chore: merge latest from main (#3671)

* chore: merge latest from main
* docs(button): restore autodocs page after mdx removal
* docs(icon): adjust story visibility and order

In the switch back to autodocs from a custom MDX, some newly added
stories for S2 needed to be hidden for the Docs page, and some story
titles needing renaming to keep related stories in order.

---------

Co-authored-by: Josh Winn <[email protected]>

Author: castastrophe

components/button/CHANGELOG.md

@@ -15,6 +15,27 @@
 - Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
   - @spectrum-css/icon@10.0.0-next.0
 
+## 14.1.6
+
+### Patch Changes
+
+📝 [#3665](https://github.com/adobe/spectrum-css/pull/3665) [`56e143a`](https://github.com/adobe/spectrum-css/commit/56e143a6ac9efda0eaec7a4d1cde01319985b2e2) Thanks [@rise-erpelding](https://github.com/rise-erpelding)!
+
+Adjust S1/Express static outline variant content color (from transparent-black/white to solid black/white) to fix unintentional regression.
+
+## 14.1.5
+
+### Patch Changes
+
+📝 [#3662](https://github.com/adobe/spectrum-css/pull/3662) [`79e3363`](https://github.com/adobe/spectrum-css/commit/79e336369700b9eded8fb7154995abee3789b545) Thanks [@castastrophe](https://github.com/castastrophe)!
+
+This update aims to simplify `--mod-*` access by ensuring local variants and states aren't hooking into those custom properties for overrides. This updates all local variants and states to override the `--spectrum-button-*` properties instead and adjusts the specificity to ensure no regressions in rendered results.
+
+Other changes of note:
+
+- Removes the `.spectrum-Button--sizeM` as unnecessary and duplicate as these styles are applied in the base class.
+- Reduces the use of the `:not()` pseudo-class in theme overrides as these selectors are more complex to remap for web component projects.
+
 ## 14.1.4
 
 ### Patch Changes

components/button/index.css

@@ -552,6 +552,7 @@ a.spectrum-Button {
 		--highcontrast-button-border-color-disabled: GrayText;
 		--highcontrast-button-background-color-disabled: ButtonFace;
 
+		/* @passthrough start -- progress circle highcontrast overrides */
 		--mod-progress-circle-track-border-color: ButtonText;
 		--mod-progress-circle-track-border-color-over-background: ButtonText;
 		--mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium);

components/button/stories/button.mdx

@@ -9,6 +9,10 @@ import { ButtonsWithIconOptions, TextOverflowTemplate, TextWrapTemplate, Treatme
 
 /**
  * Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
+ *
+ * There are four available variants that are used for different levels of emphasis and different
+ * types of actions. By default, a button uses the fill style with a solid background. The primary
+ * and secondary variants also have an outline option.
  */
 export default {
 	title: "Button",
@@ -101,11 +105,12 @@ export default {
 	decorators: [
 		withDownStateDimensionCapture,
 	],
-	tags: ["!autodocs", "migrated"],
+	tags: ["migrated"],
 };
 
 export const Default = ButtonGroups.bind({});
 Default.args = {};
+Default.tags = ["!autodocs"];
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = ButtonGroups.bind({});
@@ -197,6 +202,9 @@ Negative.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * When a button needs to be placed on top of a dark color background or a visual, use the static white options. Static color buttons do not change shades or values depending upon the color theme.
+ */
 export const StaticWhitePrimary = TreatmentTemplate.bind({});
 StaticWhitePrimary.tags = ["!dev"];
 StaticWhitePrimary.args = {
@@ -207,6 +215,7 @@ StaticWhitePrimary.args = {
 StaticWhitePrimary.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+StaticWhitePrimary.storyName = "Static white - primary";
 
 export const StaticWhiteSecondary = TreatmentTemplate.bind({});
 StaticWhiteSecondary.tags = ["!dev"];
@@ -218,7 +227,11 @@ StaticWhiteSecondary.args = {
 StaticWhiteSecondary.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+StaticWhiteSecondary.storyName = "Static white - secondary";
 
+/**
+ * When a button needs to be placed on top of a light color background or a visual, use the static black options. Static color buttons do not change shades or values depending upon the color theme.
+ */
 export const StaticBlackPrimary = TreatmentTemplate.bind({});
 StaticBlackPrimary.tags = ["!dev"];
 StaticBlackPrimary.args = {
@@ -229,6 +242,7 @@ StaticBlackPrimary.args = {
 StaticBlackPrimary.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+StaticBlackPrimary.storyName = "Static black - primary";
 
 export const StaticBlackSecondary = TreatmentTemplate.bind({});
 StaticBlackSecondary.tags = ["!dev"];
@@ -240,6 +254,8 @@ StaticBlackSecondary.args = {
 StaticBlackSecondary.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+StaticBlackSecondary.storyName = "Static black - secondary";
+
 
 /**
  * The pending button is for indicating that a quick progress action is taking place. In this case, the
@@ -282,7 +298,7 @@ Disabled.parameters = {
  */
 export const WithWrapping = TextOverflowTemplate.bind({});
 WithWrapping.tags = ["!dev"];
-WithWrapping.storyName = "Text overflow behavior";
+WithWrapping.storyName = "Text overflow";
 WithWrapping.args = {
 	variant: "primary",
 };
@@ -298,7 +314,7 @@ WithWrapping.parameters = {
 
 export const DisableWrapping = TextWrapTemplate.bind({});
 DisableWrapping.tags = ["!dev"];
-DisableWrapping.storyName = "Disable label wrap";
+DisableWrapping.storyName = "Text overflow - disabled text wrap";
 DisableWrapping.args = {
 	variant: "primary",
 };