Spectrum 2 🎉 Feature Branch

.changeset/angry-needles-behave.md

@@ -0,0 +1,23 @@
+---
+"@spectrum-css/radio": major
+---
+
+### Spectrum 2 migration
+
+Updates:
+
+- High contrast tokens have been modified
+- Typography tokens modified
+
+#### New tokens
+
+`--spectrum-radio-border-width`
+`--spectrum-radio-text-font-weight`
+`--spectrum-radio-text-font-style`
+
+#### Updated tokens
+
+`--spectrum-radio-emphasized-accent-color`
+`--spectrum-radio-emphasized-accent-color-hover`
+`--spectrum-radio-emphasized-accent-color-down`
+`--spectrum-radio-emphasized-accent-color-focus`

.changeset/beige-dragons-tickle.md

@@ -0,0 +1,28 @@
+---
+"@spectrum-css/illustratedmessage": major
+"@spectrum-css/dropzone": major
+---
+
+### S2 Illustrated Message Migration
+
+This migration contains new tokens for t-shirt sizes (S, M, L), vertical and horizontal orientation along with their maximum width, illustration sizes, and content spacing.
+
+#### Illustrated Message
+
+New properties
+`--spectrum-illustrated-message-heading-to-description`
+`--spectrum-illustrated-message-illustration-to-heading`
+`--spectrum-illustrated-message-illustration-to-content`
+`--spectrum-illustrated-message-description-to-action`
+`--spectrum-illustrated-message-illustration-color`
+`--spectrum-illustrated-message-illustration-size`
+`--spectrum-illustrated-message-small-cjk-title-font-size`
+`--spectrum-illustrated-message-large-cjk-title-font-size`
+`--spectrum-illustrated-message-large-body-font-size`
+`--spectrum-illustrated-message-horizontal-maximum-width`
+
+Removed properties
+`--spectrum-illustrated-message-title-to-heading`
+`--spectrum-illustrated-message-description-max-inline-size`
+`--spectrum-illustrated-message-heading-max-inline-size`
+`--spectrum-illustrated-message-illustration-accent-color`

.changeset/big-beds-care.md

@@ -0,0 +1,13 @@
+---
+"@spectrum-css/dropzone": major
+---
+
+### Spectrum 2 migration
+
+Since dropzone shares a lot of illustrated message's new content tokens (typography and spacing), tons of unused`--mods` were removed.
+
+The component reflects the [new design](https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=10141-2822&m=dev) of the borders that includes dash length and dash gap.
+
+#### SVG Border
+
+To support the intention of the design, an SVG element is used. There are tokens to adjust the length of dashed lines and the gap between them. It's understood it may be too much to consume an additional element so there's a fallback where the SVG element is not necessary - dropzone will use the standard `border` CSS property.

.changeset/big-glasses-check.md

@@ -0,0 +1,13 @@
+---
+"@spectrum-css/accordion": major
+"@spectrum-css/actionbar": major
+"@spectrum-css/actiongroup": major
+---
+
+This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling.
+
+- Remove all `--mod-*` custom property hooks.
+- Keep existing class selectors and variants unchanged.
+- Update stories to reflect the removal of the `--mod-*` override layer.
+
+Breaking change: the `--mod-*` override layer is removed. Consumers should set `--spectrum-*` variables directly where customization is needed.

.changeset/big-jars-pump.md

@@ -0,0 +1,70 @@
+---
+"@spectrum-css/inlinealert": major
+---
+
+#### Spectrum 2 migration
+
+This migrates the `in-line alert` component to Spectrum 2. Custom properties have been updated and added per the design specification.
+
+Subtle and bold treatments have been added for each badge variant.
+
+To use the subtle treatment, you will need to apply the `spectrum-InLineAlert--subtle` class:
+
+```html
+<div
+	class="spectrum-InLineAlert spectrum-InLineAlert--info spectrum-InLineAlert--subtle"
+>
+	<div class="spectrum-InLineAlert-header">
+		Info variant with subtle fill
+		<svg
+			focusable="false"
+			aria-hidden="true"
+			role="img"
+			class=" spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon "
+			id="icon-52w58"
+			aria-label="InfoCircle"
+		>
+			<title id="InfoCircle">Info Circle</title>
+			<use xlink:href="#icon-info-circle" href="#icon-info-circle"></use>
+		</svg>
+	</div>
+	<div class="spectrum-InLineAlert-content">This is an alert.</div>
+</div>
+```
+
+To use the bold treatment (which is reserved for high-attention alerts only), you will need to apply the `spectrum-InLineAlert--bold` class:
+
+```html
+<div
+	class="spectrum-InLineAlert spectrum-InLineAlert--info spectrum-InLineAlert--bold"
+>
+	<div class="spectrum-InLineAlert-header">
+		Info variant with bold fill
+		<svg
+			focusable="false"
+			aria-hidden="true"
+			role="img"
+			class=" spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon "
+			id="icon-mty2x"
+			aria-label="InfoCircle"
+		>
+			<title id="InfoCircle">Info Circle</title>
+			<use xlink:href="#icon-info-circle" href="#icon-info-circle"></use>
+		</svg>
+	</div>
+	<div class="spectrum-InLineAlert-content">This is an alert.</div>
+</div>
+```
+
+Because subtle and bold treatments draw a similar level of attention you should choose only one to use consistently within a single product.
+
+##### New custom properties
+
+`--spectrum-inlinealert-min-spacing-header-to-icon`
+`--spectrum-inlinealert-spacing-content-link-button`
+`--spectrum-inlinealert-spacing-header-content`
+
+##### Removed custom properties
+
+`--spectrum-inlinealert-spacing-header-content-button`
+`--spectrum-inlinealert-spacing-header-to-icon`

.changeset/brave-bikes-teach.md

@@ -0,0 +1,61 @@
+---
+"@spectrum-css/actionmenu": major
+"@spectrum-css/actionbutton": minor
+"@spectrum-css/menu": patch
+"@spectrum-css/actiongroup": patch
+---
+
+### Action menu component (now with custom styles!)
+
+Introduces `@spectrum-css/actionmenu`, a composition of `ActionButton`, `Popover`, and `Menu` to present action lists from a trigger. Now with custom styles!
+
+- Adds wrapper classes: `spectrum-ActionMenu`, `spectrum-ActionMenu-trigger`, `spectrum-ActionMenu-popover`, and `spectrum-ActionMenu-menu`.
+- Supports long press triggers and four placements (start/end, top/bottom) via the underlying popover API.
+- Design reference: [Figma S2 token specs](https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=20959-21513&node-type=frame&t=jbePQKK1yLdrHG2M-11).
+
+#### Migration notes
+
+- If you previously composed an action menu manually (action button + popover + menu), you can adopt the new wrapper classes without changing the underlying markup semantics. Ensure the trigger has `aria-haspopup="menu"` and manages `aria-expanded` according to your application logic.
+- For spacing customizations previously done with ad‑hoc margins, switch to the new `--spectrum-actionmenu-button-to-menu-gap` custom property.
+
+Example markup:
+
+```html
+<div class="spectrum-ActionMenu">
+	<button
+		class="spectrum-ActionMenu-trigger spectrum-ActionButton"
+		aria-haspopup="menu"
+		aria-expanded="false"
+	>
+		<!-- icon/label -->
+	</button>
+	<div class="spectrum-ActionMenu-popover spectrum-Popover">
+		<ul class="spectrum-ActionMenu-menu spectrum-Menu">
+			<!-- menu items -->
+		</ul>
+	</div>
+	<!-- popover positioning/visibility is owned by your implementation -->
+	<!-- use long-press behavior when appropriate to your UX -->
+	<!-- use Popover placement options: bottom-start, bottom-end, start-top, end-top -->
+</div>
+```
+
+### Menu refinements
+
+Updates `@spectrum-css/menu` styles to align with latest Spectrum 2 design specifications and improve accessibility.
+
+- Updated `.is-selectableMultiple .spectrum-Menu-itemCheckbox` to `.is-selectableMultiple:not(:has(.is-selectable)) .spectrum-Menu-itemCheckbox` to prevent clash with the `.is-selectable` placement.
+- Non-breaking; no class or DOM changes required.
+
+### Action button refinements
+
+- Selection styling now applies when components use ARIA pressed/expanded semantics, not just `.is-selected`.
+- Implemented with `:where()` to keep selector specificity low and prevent downstream specificity battles.
+- Non-breaking; no class changes required.
+
+### Action group refinements
+
+Aligns selection behavior of grouped items with action button updates.
+
+- Adds `:where([aria-pressed="true"], [aria-expanded="true"])` alongside `.is-selected` on items to cover more accessibility use-cases while keeping specificity low.
+- Non-breaking; no class changes required.

.changeset/breezy-impalas-push.md

@@ -0,0 +1,11 @@
+---
+"@spectrum-css/switch": patch
+---
+
+### S2 switch fixes
+
+This work addresses minor regressions in the Switch component. Animation tokens are reimplemented and their usage updated within the style definitions.
+
+Reference:
+
+- [S2 switch migration](https://github.com/adobe/spectrum-css/pull/2651)

.changeset/calm-hats-sleep.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/bundle": major
+---
+
+Release bundle with the latest styles on the S2 feature branch.

.changeset/chatty-lands-attack.md

@@ -0,0 +1,28 @@
+---
+"@spectrum-css/accordion": major
+---
+
+### Spectrum 2 migration
+
+Accordion now uses Spectrum 2 tokens and specifications.
+
+New sized tokens are used for corner rounding, the spacing around the disclosure icon, and
+the spacing around the content area.
+
+#### New features
+
+- Adds the optional "quiet" style, which does not show dividers between accordion items.
+- Adds CSS transition to animate the rotation of the disclosure indicator when expanding and
+  collapsing the accordion item.
+- Adds no inline padding variant (`.spectrum-Accordion--noInlinePadding`) in which the item
+  header does not have padding.
+- Per design spec, accordion items have a min-width and default width. Default width should not be smaller than
+  `--spectrum-accordion-item-minimum-width`.
+
+#### Markup changes
+
+The HTML markup has changed slightly for the accordion header. The disclosure icon has been moved
+from outside the button (`spectrum-Accordion-itemHeader`), to within the button. The extra
+element with class `spectrum-Accordion-itemIconContainer`, previously wrapping the icon, has
+been removed. A span with class `spectrum-Accordion-itemTitle` has been added around the heading
+text.

.changeset/chilled-peaches-enjoy.md

@@ -0,0 +1,11 @@
+---
+"@spectrum-css/actionbutton": major
+---
+
+Action button now uses Spectrum 2 tokens and design specifications. A few notable changes:
+
+- Medium is now the default size and `.spectrum-ActionButton--sizeM` has been removed.
+- Includes the Spectrum 2 down state transform.
+- The component border was not removed and its color was changed to `transparent` in order to continue support for Windows High Contrast / forced colors, which still shows a border.
+- Some selectors to target the icon + text button and the icon-only button have been simplified using `:has`. This removes some overly complex `calc()` functions used for inline spacing, uses the design tokens more directly, and removes the previously documented need for the component's child elements to use a specific source order.
+- Background and content colors were updated.

.changeset/chilly-peaches-sniff.md

@@ -0,0 +1,7 @@
+---
+"@spectrum-css/statuslight": major
+---
+
+#### Spectrum 2 migration
+
+New non-semantic colors were added to the variants list, while the `accent` semantic variant was removed. There were also some new and updated color and text-to-visual tokens used to match the designs, along with normalizing font family, font style, and font weight.

.changeset/chubby-mirrors-wish.md

@@ -0,0 +1,6 @@
+---
+"@spectrum-css/sidenav": patch
+"@spectrum-css/tooltip": patch
+---
+
+Replace deprecated `word-break: break-word` with `overflow-wrap: break-word` to align with modern CSS standards and improve cross-browser compatibility. This property was deprecated in Chrome 44 (July 2015) in favor of the standardized `overflow-wrap` property.

.changeset/clean-oranges-smell.md

@@ -0,0 +1,11 @@
+---
+"@spectrum-css/preview": major
+---
+
+Updates Storybook to use the latest icon sets for Spectrum 2. Includes changes to the directories that
+are used for loading in the sprite sheet and the individual icons, as they have moved.
+
+The global Icon Loader has been updated to apply the existing key name renaming from file names to icon
+names. This is now done once at the loader step, rather than each time within the Icon component template.
+The loader also now excludes the handful of 22x20 workflow icons, as these are not yet handled within the
+design system.

.changeset/cool-wolves-like.md

@@ -0,0 +1,13 @@
+---
+"@spectrum-css/tokens": minor
+---
+
+`@adobe/spectrum-tokens@13.12.0` ->`@adobe/spectrum-tokens@13.13.0`
+
+### Added
+
+- `--spectrum-select-box-horizontal-minimum-width`: `188px` (desktop), `220px` (mobile)
+
+### Updated
+
+- `--spectrum-select-box-edge-to-checkbox`: Updated from a variable sizing based on the viewport to a fixed value (`8px`).

.changeset/cute-pillows-stand.md

@@ -0,0 +1,7 @@
+---
+"@spectrum-css/statuslight": patch
+---
+
+### S2 status light fix
+
+This work removes the reference to `default-font-family` in favor for `sans-font-family-stack` to ensure the status light's font renders appropriately for web.

.changeset/cute-windows-unite.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/ui-icons": minor
+---
+
+Updates ui-icons to include linkout-75 icon.

.changeset/deep-sloths-fetch.md

@@ -0,0 +1,18 @@
+---
+"@spectrum-css/actionbar": major
+---
+
+### Actionbar S2 Migration
+
+Action bar now has some updated colors, corner radius, and icons. There's a new look to the default and emphasized variants.
+
+The emphasized has changed from an `accent` background color to a `neutral` background color. In light mode, the clear button and action buttons are `staticWhite` and in dark mode they are `staticBlack`.
+
+#### New tokens
+
+`--spectrum-actionbar-emphasized-actionbutton-label-color`
+`--spectrum-actionbar-emphasized-icon-color`
+`--spectrum-actionbar-minimum-width`
+`--spectrum-actionbar-spacing-label-to-action-group`
+`--spectrum-actionbar-spacing-action-group-edge`
+`--spectrum-actionbar-close-button-to-counter`

.changeset/dirty-melons-look.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/swatch": patch
+---
+
+Updates the add swatch icon to use the ui rather than workflow icon

.changeset/early-ends-fail.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/icon": minor
+---
+
+Adds icon class for link out 75 icon