diff --git a/.changeset/perfect-dogs-smash.md b/.changeset/perfect-dogs-smash.md
new file mode 100644
index 00000000000..11a91efdd47
--- /dev/null
+++ b/.changeset/perfect-dogs-smash.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/button": patch
+---
+
+chore: run branch through formatter
diff --git a/.storybook/package.json b/.storybook/package.json
index 8e15065e015..3217b65e58c 100644
--- a/.storybook/package.json
+++ b/.storybook/package.json
@@ -11,7 +11,7 @@
},
"dependencies": {
"@adobe/spectrum-css-workflow-icons": "^1.5.4",
- "@spectrum-css/tokens": "^14.0.0-next.6",
+ "@spectrum-css/tokens": "^14.0.0-next.7",
"@spectrum-css/ui-icons": "^1.1.2"
},
"devDependencies": {
@@ -50,5 +50,12 @@
"storybook": "^8.0.9",
"style-loader": "4.0.0",
"webpack": "^5.91.0"
- }
+ },
+ "keywords": [
+ "adobe",
+ "css",
+ "design system",
+ "spectrum",
+ "storybook"
+ ]
}
diff --git a/components/actionbutton/metadata/mods.md b/components/actionbutton/metadata/mods.md
index fd40645cf65..1ee43dbeda1 100644
--- a/components/actionbutton/metadata/mods.md
+++ b/components/actionbutton/metadata/mods.md
@@ -49,6 +49,9 @@
| `--mod-actionbutton-min-width` |
| `--mod-actionbutton-static-content-color` |
| `--mod-actionbutton-text-to-visual` |
+| `--mod-animation-duration-100` |
| `--mod-button-animation-duration` |
| `--mod-button-font-family` |
| `--mod-button-line-height` |
+| `--mod-line-height-100` |
+| `--mod-sans-font-family-stack` |
diff --git a/components/actiongroup/CHANGELOG.md b/components/actiongroup/CHANGELOG.md
index be300c8e950..8fedace7a32 100644
--- a/components/actiongroup/CHANGELOG.md
+++ b/components/actiongroup/CHANGELOG.md
@@ -8,15 +8,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
🗓
2024-04-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actiongroup@4.2.5...@spectrum-css/actiongroup@5.0.0)
-* feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
+- feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
- ###
- 🛑 BREAKING CHANGES
+ ###
- *
- - Removes component-builder & component-builder-simple for script leveraging postcss
+ 🛑 BREAKING CHANGES
+
+ -
+
+ * Removes component-builder & component-builder-simple for script leveraging postcss
-- Imports added to index.css and themes/express.css
+* Imports added to index.css and themes/express.css
##4.2.5
diff --git a/components/button/index.css b/components/button/index.css
index 88aace6b292..9970e58cecd 100644
--- a/components/button/index.css
+++ b/components/button/index.css
@@ -142,20 +142,12 @@ governing permissions and limitations under the License.
}
.spectrum-Icon {
- /* Any block-size difference between the intended workflow icon size and actual icon used.
+ /* stylelint-disable-next-line custom-property-pattern -- Any block-size difference between the intended workflow icon size and actual icon used.
Helps support any existing use of smaller UI icons instead of intended Workflow icons. */
- --_icon-size-difference: max(0px,
- var(--spectrum-button-intended-icon-size) -
- var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))
- );
+ --_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size)));
- margin-block-start: var(--mod-button-icon-margin-block-start,
- max(0px,
- var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) -
- var(--mod-button-border-width, var(--spectrum-button-border-width)) +
- (var(--_icon-size-difference, 0px) / 2)
- )
- );
+ /* stylelint-disable-next-line custom-property-pattern -- see note above */
+ margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2)));
margin-inline-start: calc(
var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) -
diff --git a/components/button/metadata/mods.md b/components/button/metadata/mods.md
index 4460826b8ac..c8fa31d2674 100644
--- a/components/button/metadata/mods.md
+++ b/components/button/metadata/mods.md
@@ -1,5 +1,6 @@
| Modifiable custom properties |
| ------------------------------------------ |
+| `--mod-animation-duration-100` |
| `--mod-bold-font-weight` |
| `--mod-button-animation-duration` |
| `--mod-button-background-color-default` |
@@ -44,4 +45,6 @@
| `--mod-button-top-to-icon` |
| `--mod-button-top-to-text` |
| `--mod-focus-indicator-gap` |
+| `--mod-line-height-100` |
+| `--mod-sans-font-family-stack` |
| `--mod-static-black-focus-indicator-color` |
diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js
index d2cbe6ffe3f..6d47463f10b 100644
--- a/components/button/stories/button.stories.js
+++ b/components/button/stories/button.stories.js
@@ -1,7 +1,7 @@
+import { withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
+
import { html } from "lit";
import { styleMap } from "lit/directives/style-map.js";
-import { when } from "lit/directives/when.js";
-import { withDownStateDimensionCapture } from "../../../.storybook/decorators";
import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
@@ -14,7 +14,6 @@ import { Template } from "./template";
export default {
title: "Components/Button",
component: "Button",
- decorators: [withDownStateDimensionCapture('.spectrum-Button:not(:disabled)')],
argTypes: {
size: {
name: "Size",
@@ -146,6 +145,7 @@ export default {
}
},
decorators: [
+ withDownStateDimensionCapture(".spectrum-Button:not(:disabled)"),
(Story, context) => html`