diff --git a/.changeset/eight-spiders-help.md b/.changeset/eight-spiders-help.md
new file mode 100644
index 00000000000..c916b2e375c
--- /dev/null
+++ b/.changeset/eight-spiders-help.md
@@ -0,0 +1,11 @@
+---
+"@spectrum-css/calendar": patch
+"@spectrum-css/combobox": patch
+"@spectrum-css/datepicker": patch
+"@spectrum-css/menu": patch
+"@spectrum-css/picker": patch
+"@spectrum-css/slider": patch
+"@spectrum-css/stepper": patch
+---
+
+Build change to remove the `postcss-preset-env` polyfill for the dist output of `:not` selectors containing multiple selectors, to avoid an unintended increase in specificity, which caused some visual regressions.
diff --git a/.changeset/eleven-cooks-destroy.md b/.changeset/eleven-cooks-destroy.md
new file mode 100644
index 00000000000..97ffb79d9b3
--- /dev/null
+++ b/.changeset/eleven-cooks-destroy.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/tokens": patch
+---
+
+Uses the latest release from Spectrum Tokens (13.0.0-beta.35)
diff --git a/.changeset/fresh-seahorses-join.md b/.changeset/fresh-seahorses-join.md
new file mode 100644
index 00000000000..34f9fb60e01
--- /dev/null
+++ b/.changeset/fresh-seahorses-join.md
@@ -0,0 +1,8 @@
+---
+"@spectrum-css/button": patch
+---
+
+#### refactor: remove spectrum-ButtonWithFocusRing placeholder class extend
+
+Removes the need for the extend from this placeholder class, as the styles it provides have diverged slightly from what is in button and it was causing some unnecessary CSS to override.
+This should not result in any changed visuals or behavior, as the same CSS has been integrated.
\ No newline at end of file
diff --git a/.changeset/friendly-brooms-itch.md b/.changeset/friendly-brooms-itch.md
new file mode 100644
index 00000000000..71affa08881
--- /dev/null
+++ b/.changeset/friendly-brooms-itch.md
@@ -0,0 +1,44 @@
+---
+"@spectrum-css/menu": major
+"@spectrum-css/popover": minor
+"@spectrum-css/tray": minor
+"@spectrum-css/tokens": patch
+---
+
+Removes custom menu item background color tokens: Since `@adobe/spectrum-tokens` has been updated to include many tokens relating to the menu component, including some that replace custom tokens that had previously been added. As such, these custom menu item color tokens that are now available from `@adobe/spectrum-tokens` have been removed.
+
+Spectrum 2 Menu migration:
+
+In addition to small token and minor style changes, there were several new features that were added to this version of menu, including:
+
+- A thumbnail can now be added to the menu item label
+- A section description can now be added below the menu section heading
+- The actions area previously held value text, action switches for multi-select, and the drill-in for a submenu--in this version, an external link action can now be added
+- Menu items now receive corner rounding, which is visible on hover/focus/active states
+- The focus indicator has been updated--instead of a blue line on the left (start side) of the menu item, the whole element now receives an outline
+- Menu items now have the S2 down state transform
+
+In order to accommodate menu item focus outlines, horizontal padding has been added to popover and tray.
+
+The following mods have been added:
+
+- `--mod-menu-item-corner-rounding`
+- `--mod-menu-item-description-font-weight`
+- `--mod-menu-item-label-font-weight`
+- `--mod-menu-item-thumbnail-height`
+- `--mod-menu-item-thumbnail-opacity-disabled`
+- `--mod-menu-item-thumbnail-to-label`
+- `--mod-menu-item-thumbnail-width`
+- `--mod-menu-item-top-to-drillin`
+- `--mod-menu-item-top-to-icon`
+- `--mod-menu-item-top-to-thumbnail`
+- `--mod-menu-linkout-icon-height`
+- `--mod-menu-linkout-icon-width`
+- `--mod-menu-section-description-color`
+- `--mod-menu-section-description-font-size`
+- `--mod-menu-section-description-font-weight`
+- `--mod-menu-section-description-line-height`
+- `--mod-menu-section-description-line-height-cjk`
+- `--mod-menu-section-header-to-description`
+- `--mod-popover-content-area-spacing-horizontal`
+- `--mod-tray-edge-to-content-area`
diff --git a/.changeset/nine-kings-repair.md b/.changeset/nine-kings-repair.md
new file mode 100644
index 00000000000..0714bbb8274
--- /dev/null
+++ b/.changeset/nine-kings-repair.md
@@ -0,0 +1,15 @@
+---
+"@spectrum-css/button": major
+---
+
+#### Spectrum 2 migration
+Button now uses Spectrum 2 tokens and specifications, which includes many color changes to all variants. A few other notable changes:
+- Outline buttons are no longer available in accent and negative options — use the filled variant instead.
+- Medium size is now the default. The class `.spectrum-Button--sizeM` is now unnecessary for this size, and has been removed.
+- The `.spectrum-Button--fill` class is no longer needed and has been removed.
+
+The following `--mod` custom properties have been renamed:
+- `--mod-line-height-100` has been renamed to `--mod-button-line-height`
+- `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`
+- `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`
+- `--mod-bold-font-weight` has been renamed to `--mod-button-font-weight`
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/.changeset/pre.json b/.changeset/pre.json
new file mode 100644
index 00000000000..936fb10795d
--- /dev/null
+++ b/.changeset/pre.json
@@ -0,0 +1,110 @@
+{
+ "mode": "pre",
+ "tag": "next",
+ "initialVersions": {
+ "@spectrum-tools/gh-action-file-diff": "2.0.5",
+ "@spectrum-css/preview": "8.1.0-next.1",
+ "@spectrum-css/accordion": "4.2.7-next.2",
+ "@spectrum-css/actionbar": "7.2.5-next.2",
+ "@spectrum-css/actionbutton": "5.2.7-next.2",
+ "@spectrum-css/actiongroup": "5.0.0-next.3",
+ "@spectrum-css/actionmenu": "5.1.4-next.2",
+ "@spectrum-css/alertbanner": "1.1.42-next.2",
+ "@spectrum-css/alertdialog": "1.2.5-next.2",
+ "@spectrum-css/asset": "4.0.1-next.2",
+ "@spectrum-css/assetcard": "3.1.5-next.2",
+ "@spectrum-css/assetlist": "5.2.5-next.2",
+ "@spectrum-css/avatar": "6.1.6-next.2",
+ "@spectrum-css/badge": "3.2.6-next.2",
+ "@spectrum-css/breadcrumb": "8.2.6-next.2",
+ "@spectrum-css/button": "14.0.0-next.4",
+ "@spectrum-css/buttongroup": "7.0.0-next.3",
+ "@spectrum-css/calendar": "4.2.6-next.2",
+ "@spectrum-css/card": "7.0.3-next.2",
+ "@spectrum-css/checkbox": "14.0.0-next.4",
+ "@spectrum-css/clearbutton": "5.1.5-next.2",
+ "@spectrum-css/closebutton": "5.0.0-next.2",
+ "@spectrum-css/coachindicator": "1.1.6-next.2",
+ "@spectrum-css/coachmark": "6.1.6-next.2",
+ "@spectrum-css/colorarea": "4.1.6-next.2",
+ "@spectrum-css/colorhandle": "7.1.5-next.2",
+ "@spectrum-css/colorloupe": "4.2.5-next.2",
+ "@spectrum-css/colorslider": "5.1.6-next.2",
+ "@spectrum-css/colorwheel": "3.1.6-next.2",
+ "@spectrum-css/combobox": "2.1.7-next.2",
+ "@spectrum-css/commons": "9.1.4-next.1",
+ "@spectrum-css/contextualhelp": "2.1.6-next.2",
+ "@spectrum-css/datepicker": "2.1.5-next.2",
+ "@spectrum-css/dial": "2.2.5-next.2",
+ "@spectrum-css/dialog": "9.2.5-next.2",
+ "@spectrum-css/divider": "2.2.6-next.2",
+ "@spectrum-css/dropindicator": "4.1.5-next.2",
+ "@spectrum-css/dropzone": "5.2.6-next.2",
+ "@spectrum-css/fieldgroup": "4.2.5-next.2",
+ "@spectrum-css/fieldlabel": "8.0.0-next.2",
+ "@spectrum-css/floatingactionbutton": "1.2.6-next.2",
+ "@spectrum-css/helptext": "4.1.6-next.2",
+ "@spectrum-css/icon": "6.0.6-next.2",
+ "@spectrum-css/illustratedmessage": "6.1.6-next.2",
+ "@spectrum-css/infieldbutton": "4.2.5-next.2",
+ "@spectrum-css/inlinealert": "7.1.7-next.2",
+ "@spectrum-css/link": "4.2.6-next.2",
+ "@spectrum-css/logicbutton": "3.3.5-next.2",
+ "@spectrum-css/menu": "6.1.6-next.2",
+ "@spectrum-css/miller": "5.1.5-next.2",
+ "@spectrum-css/modal": "4.2.7-next.2",
+ "@spectrum-css/opacitycheckerboard": "1.1.6-next.2",
+ "@spectrum-css/page": "7.1.5-next.2",
+ "@spectrum-css/pagination": "7.1.7-next.2",
+ "@spectrum-css/picker": "7.2.8-next.2",
+ "@spectrum-css/pickerbutton": "4.1.6-next.2",
+ "@spectrum-css/popover": "6.2.6-next.2",
+ "@spectrum-css/progressbar": "3.1.6-next.2",
+ "@spectrum-css/progresscircle": "2.2.4-next.2",
+ "@spectrum-css/radio": "8.1.6-next.2",
+ "@spectrum-css/rating": "4.2.5-next.2",
+ "@spectrum-css/search": "6.2.5-next.2",
+ "@spectrum-css/sidenav": "4.2.5-next.2",
+ "@spectrum-css/site": "4.2.5-next.2",
+ "@spectrum-css/slider": "4.3.6-next.2",
+ "@spectrum-css/splitview": "4.2.5-next.2",
+ "@spectrum-css/statuslight": "6.1.7-next.2",
+ "@spectrum-css/steplist": "4.1.5-next.2",
+ "@spectrum-css/stepper": "5.1.6-next.2",
+ "@spectrum-css/swatch": "5.1.6-next.2",
+ "@spectrum-css/swatchgroup": "2.1.6-next.2",
+ "@spectrum-css/switch": "4.2.6-next.2",
+ "@spectrum-css/table": "5.2.6-next.2",
+ "@spectrum-css/tabs": "4.1.5-next.2",
+ "@spectrum-css/tag": "8.1.6-next.2",
+ "@spectrum-css/taggroup": "4.1.6-next.2",
+ "@spectrum-css/textfield": "6.1.7-next.2",
+ "@spectrum-css/thumbnail": "5.2.5-next.2",
+ "@spectrum-css/toast": "9.1.26-next.2",
+ "@spectrum-css/tooltip": "5.3.6-next.2",
+ "@spectrum-css/tray": "2.2.8-next.2",
+ "@spectrum-css/treeview": "9.2.7-next.2",
+ "@spectrum-css/typography": "5.1.6-next.2",
+ "@spectrum-css/underlay": "3.2.5-next.2",
+ "@spectrum-css/well": "4.1.5-next.2",
+ "@spectrum-css/generator": "3.0.0",
+ "conventional-changelog-spectrum": "1.0.2",
+ "postcss-combininator": "2.0.0",
+ "postcss-custom-properties-mapping": "2.0.0",
+ "postcss-splitinator": "2.0.0",
+ "@spectrum-tools/stylelint-no-missing-var": "1.3.1",
+ "@spectrum-tools/stylelint-no-unknown-custom-properties": "1.3.2",
+ "@spectrum-tools/stylelint-no-unused-custom-properties": "1.3.1",
+ "@spectrum-tools/documentation": "1.0.0",
+ "@spectrum-css/tokens": "14.0.0-next.6",
+ "@spectrum-css/ui-icons": "1.1.2"
+ },
+ "changesets": [
+ "eleven-cooks-destroy",
+ "fresh-seahorses-join",
+ "nine-kings-repair",
+ "perfect-dogs-smash",
+ "pretty-parents-drum",
+ "proud-jokes-rule"
+ ]
+}
diff --git a/.changeset/pretty-parents-drum.md b/.changeset/pretty-parents-drum.md
new file mode 100644
index 00000000000..1ff4c501e45
--- /dev/null
+++ b/.changeset/pretty-parents-drum.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/tokens": patch
+---
+
+use spectrum-tokens@13.0.0-beta.30
diff --git a/.changeset/proud-jokes-rule.md b/.changeset/proud-jokes-rule.md
new file mode 100644
index 00000000000..15c300f61ef
--- /dev/null
+++ b/.changeset/proud-jokes-rule.md
@@ -0,0 +1,7 @@
+---
+"@spectrum-css/progressbar": major
+---
+
+feat(progressbar): S2 migration
+
+Progress bar now uses Spectrum 2 tokens and specifications. This migration includes updated colors, font sizes, and spacing. No mods were harmed in the migration of this component (all `--mod` properties remain the same).
diff --git a/.changeset/silly-ties-attend.md b/.changeset/silly-ties-attend.md
new file mode 100644
index 00000000000..46a75814ae6
--- /dev/null
+++ b/.changeset/silly-ties-attend.md
@@ -0,0 +1,7 @@
+---
+"@spectrum-css/menu": patch
+---
+
+Prevents overlap of checkbox and icon if both are used in a menu item.
+
+Also reduces a significant number of variants by consolidating menus, includes a refactor to enhance menu item understanding, and expands Chromatic testing coverage.
diff --git a/.storybook/CHANGELOG.md b/.storybook/CHANGELOG.md
index 59ef90235d9..97e89c8854f 100644
--- a/.storybook/CHANGELOG.md
+++ b/.storybook/CHANGELOG.md
@@ -86,7 +86,12 @@ This component has been deprecated. Use an action bar to allow users to perform
##7.4.2
🗓
2024-02-06
+
+##7.4.2-next.0
+🗓
+2024-02-06 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/preview@7.4.1...@spectrum-css/preview@7.4.2-next.0)
+**Note:** Spectrum 2 next version
**Note:** Version bump only for package @spectrum-css/preview
diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css
index 1ffc8c47d93..2f123142985 100644
--- a/.storybook/assets/base.css
+++ b/.storybook/assets/base.css
@@ -22,6 +22,13 @@ body {
}
.spectrum {
+ /* ---- Storybook only custom properties ---- */
+ /* Gradient that changes with the color theme. */
+ --spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500));
+ /* Gradients that do not change with the color theme, for use in static color backgrounds. */
+ --spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255, 241, 246), rgb(238, 245, 255));
+ --spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64, 0, 22), rgb(14, 24, 67));
+
background-color: var(--spectrum-background-layer-1-color);
/* @todo: add back the text color and update VRTs */
@@ -29,6 +36,14 @@ body {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
}
+.spectrum .spectrum-examples-static-black {
+ background: var(--spectrum-examples-gradient-static-black);
+}
+
+.spectrum .spectrum-examples-static-white {
+ background: var(--spectrum-examples-gradient-static-white)
+}
+
/* Hide the SVG elements that only include references */
svg:has(symbol):not(:has(use)) {
display: none;
diff --git a/.storybook/decorators/contextsWrapper.js b/.storybook/decorators/contextsWrapper.js
index 2dc017460da..dccf8a1ef4a 100644
--- a/.storybook/decorators/contextsWrapper.js
+++ b/.storybook/decorators/contextsWrapper.js
@@ -27,7 +27,7 @@ export const withContextWrapper = makeDecorator({
/** @type string */
const scale = args.scale ? args.scale : getDefaultValue(argTypes.scale) ?? "medium";
- const colors = ["light", "dark", "darkest"];
+ const colors = ["light", "dark"];
const scales = ["medium", "large"];
useEffect(() => {
@@ -54,18 +54,18 @@ export const withContextWrapper = makeDecorator({
container.classList.toggle(`spectrum--${s}`, s === scale);
}
-
- container.style.removeProperty("background");
- const hasStaticElement = container.querySelector(`.${args.rootClass}--staticWhite, .${args.rootClass}--staticBlack, .${args.rootClass}--overBackground`);
- if (hasStaticElement) {
- if (container.querySelector(`.${args.rootClass}--staticBlack`)) {
- container.style.background = "rgb(181, 209, 211)";
- } else if (container.querySelector(`.${args.rootClass}--staticWhite, .${args.rootClass}--overBackground`)) {
- container.style.background = "rgb(15, 121, 125)";
- }
+ // Change background color when demonstrating static color options.
+ if (args.staticColor === "black") {
+ container.style.background = "var(--spectrum-examples-gradient-static-black)";
+ }
+ else if (args.staticColor === "white" || args.isStaticWhite === true) {
+ container.style.background = "var(--spectrum-examples-gradient-static-white)";
+ }
+ else {
+ container.style.removeProperty("background");
}
}
- }, [color, scale, isExpress, args.staticColor]);
+ }, [color, scale, isExpress, args.staticColor, args.isStaticWhite]);
return StoryFn(context);
},
diff --git a/.storybook/decorators/index.js b/.storybook/decorators/index.js
index 9ca62537dc3..6fa9a859f73 100644
--- a/.storybook/decorators/index.js
+++ b/.storybook/decorators/index.js
@@ -2,6 +2,7 @@ import { makeDecorator, useEffect } from "@storybook/preview-api";
import { html } from "lit";
export { withContextWrapper } from "./contextsWrapper.js";
+export { withDownStateDimensionCapture } from "./withDownStateDimensionCapture.js";
export { withTestingPreviewWrapper } from "./withTestingPreviewWrapper.js";
/**
diff --git a/.storybook/decorators/withDownStateDimensionCapture.js b/.storybook/decorators/withDownStateDimensionCapture.js
new file mode 100644
index 00000000000..616852d34ce
--- /dev/null
+++ b/.storybook/decorators/withDownStateDimensionCapture.js
@@ -0,0 +1,19 @@
+export const withDownStateDimensionCapture = (selector) => (Story, context) => {
+ const captureDownStateDimensions = () => {
+ const components = document.querySelectorAll(selector);
+ components.forEach((component) => {
+ const { width, height } = component.getBoundingClientRect();
+ component.style.setProperty('--spectrum-downstate-width', `${width}px`);
+ component.style.setProperty('--spectrum-downstate-height', `${height}px`);
+ });
+ };
+
+ document.addEventListener("DOMContentLoaded", () => {
+ // Wait to make sure the story is fully rendered (otherwise width/height can be wrong)
+ setTimeout(() => {
+ captureDownStateDimensions();
+ }, 100);
+ });
+
+ return Story(context);
+};
diff --git a/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js
new file mode 100644
index 00000000000..372879350f5
--- /dev/null
+++ b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js
@@ -0,0 +1,105 @@
+import { html } from "lit";
+import { Template } from "../../../components/actionbutton/stories/template";
+
+export default {
+ title: "Foundations/Corner rounding",
+ description:
+ "The action button component represents an action a user can take.",
+ component: "ActionButton",
+ args: {
+ rootClass: "spectrum-ActionButton",
+ },
+ parameters: {
+ actions: {
+ handles: ["click .spectrum-ActionButton:not([disabled])"],
+ },
+ },
+ tags: ['foundation'],
+};
+
+const ActionButton = ({
+ ...args
+}) => {
+ return html`
+
+ `;
+};
+
+export const CornerRounding = CornerRadiusGroup.bind({});
+CornerRounding.args = {};
diff --git a/.storybook/foundations/corner-rounding/index.css b/.storybook/foundations/corner-rounding/index.css
new file mode 100644
index 00000000000..ebdd50f180f
--- /dev/null
+++ b/.storybook/foundations/corner-rounding/index.css
@@ -0,0 +1,56 @@
+/*!
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+.spectrum-Foundations-Example-CornerRounding-table {
+ border-spacing: 1rem 0;
+ margin-inline-start: -1rem;
+}
+
+.spectrum-Foundations-Example-CornerRounding-table th {
+ text-align: start;
+}
+
+.spectrum-Foundations-Example-CornerRounding {
+ inline-size: 3rem;
+ block-size: 3rem;
+ margin: 0.5rem;
+ background-color: var(--spectrum-gray-500);
+}
+
+.spectrum-Foundations-Example-CornerRounding--border {
+ background-color: var(--spectrum-gray-25);
+ border: var(--spectrum-border-width-200) solid var(--spectrum-gray-700);
+}
+
+.spectrum-Foundations-Example-CornerRounding--none {
+ border-radius: var(--spectrum-corner-radius-none);
+}
+
+.spectrum-Foundations-Example-CornerRounding--sizeS {
+ border-radius: var(--spectrum-corner-radius-small-default);
+}
+
+.spectrum-Foundations-Example-CornerRounding--sizeM {
+ border-radius: var(--spectrum-corner-radius-medium-default);
+}
+
+.spectrum-Foundations-Example-CornerRounding--sizeL {
+ border-radius: var(--spectrum-corner-radius-large-default);
+}
+
+.spectrum-Foundations-Example-CornerRounding--sizeXL {
+ border-radius: var(--spectrum-corner-radius-extra-large-default);
+}
+
+.spectrum-Foundations-Example-CornerRounding--full {
+ border-radius: var(--spectrum-corner-radius-full);
+}
diff --git a/.storybook/foundations/corner-rounding/template.js b/.storybook/foundations/corner-rounding/template.js
new file mode 100644
index 00000000000..4d24cc43dbe
--- /dev/null
+++ b/.storybook/foundations/corner-rounding/template.js
@@ -0,0 +1,42 @@
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import './index.css';
+
+const getSizeModifier = (size) => {
+ if (size === 'none' || size === 'full') {
+ return size;
+ } else {
+ return `size${size.toUpperCase()}`;
+ }
+};
+
+export const Template = ({
+ rootClass = "spectrum-Foundations-Example-CornerRounding",
+ size = "none",
+ label,
+ value,
+}) => html`
+
+
${label}
+
${value}
+
+
+
+
+
+
+
+
+
+ `;
diff --git a/.storybook/foundations/down-state/button-down-state.stories.js b/.storybook/foundations/down-state/button-down-state.stories.js
new file mode 100644
index 00000000000..603fa500c9a
--- /dev/null
+++ b/.storybook/foundations/down-state/button-down-state.stories.js
@@ -0,0 +1,27 @@
+import { Template } from "../../../components/button/stories/template";
+
+export default {
+ title: "Foundations/Down state",
+ description:
+ "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.",
+ component: "Button",
+ args: {
+ rootClass: "spectrum-Button",
+ },
+ parameters: {
+ actions: {
+ handles: ["click .spectrum-Button"],
+ },
+ },
+ tags: ["foundation"],
+};
+
+export const ButtonDownState = Template.bind({});
+ButtonDownState.args = {
+ label: "Edit",
+ variant: "accent",
+ customStyles: {
+ "--spectrum-downstate-width": "72px",
+ "--spectrum-downstate-height": "32px"
+ }
+};
diff --git a/.storybook/foundations/down-state/checkbox-down-state.stories.js b/.storybook/foundations/down-state/checkbox-down-state.stories.js
new file mode 100644
index 00000000000..fcc43a4ee1a
--- /dev/null
+++ b/.storybook/foundations/down-state/checkbox-down-state.stories.js
@@ -0,0 +1,22 @@
+import { Template } from "../../../components/checkbox/stories/template";
+
+export default {
+ title: "Foundations/Down state",
+ description:
+ "Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.",
+ component: "Checkbox",
+ args: {
+ rootClass: "spectrum-Checkbox",
+ },
+ parameters: {
+ actions: {
+ handles: ["click input[type=\"checkbox\"]"],
+ },
+ },
+ tags: ["foundation"],
+};
+
+export const CheckboxDownState = Template.bind({});
+CheckboxDownState.args = {
+ label: "Checkbox",
+};
diff --git a/.storybook/foundations/down-state/down-state.mdx b/.storybook/foundations/down-state/down-state.mdx
new file mode 100644
index 00000000000..f07e65d2f8d
--- /dev/null
+++ b/.storybook/foundations/down-state/down-state.mdx
@@ -0,0 +1,44 @@
+import { Meta, Story } from '@storybook/blocks';
+import * as Checkbox from './checkbox-down-state.stories.js';
+import * as Button from './button-down-state.stories.js';
+
+
+
+# Down state
+
+Down state is a Spectrum 2 feature that creates the illusion of components being pressed-in when active. This functionality is already included in Spectrum 2 components that require down state in this project. It is implemented with a CSS transform. The implementation depends on the size of the interactable element, as shown in the examples below.
+
+## Examples
+
+### Minimum perspective
+
+For elements that have a width of 24px or less, the minimum perspective token is used to apply the down state. One example of a component that uses this token is the checkbox:
+
+
+
+In this case, we use the minimum perspective token:
+
+```
+transform:
+ perspective(var(--spectrum-component-size-minimum-perspective-down))
+ translateZ(var(--spectrum-component-size-difference-down));
+```
+
+### Calculated perspective
+
+For elements that have a width of greater than 24px, we need to use the component's width and height to apply the down state. One example of a component that uses this logic is the button:
+
+
+
+In this case, we use a max formula to calculate the perspective based on component width and height (this helps us account for components that may be very wide):
+
+```
+transform:
+ perspective(max(
+ var(--spectrum-downstate-height),
+ var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)
+ ))
+ translateZ(var(--spectrum-component-size-difference-down));
+```
+
+*Note that in this case, users are required to develop an implementation to determine the width and height of the component. Assign these values to the `--spectrum-downstate-width` and `--spectrum-downstate-height` custom properties in a `style` attribute on the HTML element to expose them for use in the CSS.*
diff --git a/.storybook/foundations/drop-shadow/drop-shadow.mdx b/.storybook/foundations/drop-shadow/drop-shadow.mdx
new file mode 100644
index 00000000000..a8d6f298632
--- /dev/null
+++ b/.storybook/foundations/drop-shadow/drop-shadow.mdx
@@ -0,0 +1,86 @@
+import { Meta, Title, Story, Description } from '@storybook/blocks';
+import * as DropShadowStories from './drop-shadow.stories.js';
+
+
+
+
+
+
+
+Drop shadow tokens may be used for box shadows or drop shadows in CSS. Using `box-shadow` is often preferable to using `filter: drop-shadow()`, but in situations where the shadow must be applied to the alpha channel of the content rather than the border box, or if `box-shadow` is already being used for a different purpose, such as a focus outline, `filter: drop-shadow()` may be used. Note that in cases where `filter: drop-shadow()` is used, the shadow may be more blurred than the design spec due to a difference in how the blur parameter is calculated, and an adjustment by half may be needed.
+
+The opacity values in dark shadow colors are 3x the light values.
+
+These single-layer shadows are an interim solution for shadows until complex tokens (additional design data for the Spectrum Tokens system) are available to support multi-layer shadows.
+
+## Emphasized Default
+This shadow is used to provide emphasis to containers within a page.
+
+### `box-shadow`
+
+```
+box-shadow:
+ var(--spectrum-drop-shadow-emphasized-default-x)
+ var(--spectrum-drop-shadow-emphasized-default-y)
+ var(--spectrum-drop-shadow-emphasized-default-blur)
+ var(--spectrum-drop-shadow-emphasized-default-color);
+```
+
+### `filter: drop-shadow()`
+
+```
+filter: drop-shadow(
+ var(--spectrum-drop-shadow-emphasized-default-x)
+ var(--spectrum-drop-shadow-emphasized-default-y)
+ calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2)
+ var(--spectrum-drop-shadow-emphasized-default-color)
+);
+```
+
+## Emphasized Hover
+If the whole container is interactive, such as in a select box, the shadow becomes elevated on hover.
+
+### `box-shadow`
+
+```
+box-shadow:
+ var(--spectrum-drop-shadow-emphasized-hover-x)
+ var(--spectrum-drop-shadow-emphasized-hover-y)
+ var(--spectrum-drop-shadow-emphasized-hover-blur)
+ var(--spectrum-drop-shadow-emphasized-hover-color);
+```
+
+### `filter: drop-shadow()`
+
+```
+filter: drop-shadow(
+ var(--spectrum-drop-shadow-emphasized-hover-x)
+ var(--spectrum-drop-shadow-emphasized-hover-y)
+ calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2)
+ var(--spectrum-drop-shadow-emphasized-hover-color)
+);
+```
+
+## Elevated
+Elevated shadows can be used on containers that appear on top of content, such as menus, coach marks, popovers, and floating bar panels.
+
+### `box-shadow`
+
+```
+box-shadow:
+ var(--spectrum-drop-shadow-elevated-x)
+ var(--spectrum-drop-shadow-elevated-y)
+ var(--spectrum-drop-shadow-elevated-blur)
+ var(--spectrum-drop-shadow-elevated-color);
+```
+
+### `filter: drop-shadow()`
+
+```
+filter: drop-shadow(
+ var(--spectrum-drop-shadow-elevated-x)
+ var(--spectrum-drop-shadow-elevated-y)
+ calc(var(--spectrum-drop-shadow-elevated-blur) / 2)
+ var(--spectrum-drop-shadow-elevated-color)
+);
+```
diff --git a/.storybook/foundations/drop-shadow/drop-shadow.stories.js b/.storybook/foundations/drop-shadow/drop-shadow.stories.js
new file mode 100644
index 00000000000..b61c7661f4c
--- /dev/null
+++ b/.storybook/foundations/drop-shadow/drop-shadow.stories.js
@@ -0,0 +1,74 @@
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import "./index.css";
+
+export default {
+ title: "Foundations/Drop shadow",
+ description: "Drop shadows draw attention and give the appearance of depth. By default, this style is used to show elevation, when content appears on top of other content.",
+ component: "Drop shadow",
+ tags: ['foundation'],
+}
+
+const DropShadowSwatch = ({rootClass = "spectrum-Foundations-Example-DropShadow-swatch", variant, ...args}) => {
+ const { isDropShadow } = args;
+ return html`
+
+`;}
+
+const DropShadowBackground = ({rootClass = "spectrum-Foundations-Example-swatch-container", color, ...args}) => html`
+