@scalewing/react 1.11.0 → 1.13.0

package/dist/components/use-anchored-popover.js

@@ -13,11 +13,12 @@ function layoutViewport() {
         height: root.clientHeight || window.innerHeight,
     };
 }
-function placePopover(node, anchor, { flipInline = false }) {
+function placePopover(node, anchor, { align = 'start', flipInline = false }) {
     const position = anchoredPosition(anchor.getBoundingClientRect(), { width: node.offsetWidth, height: node.offsetHeight }, layoutViewport(), {
         gap: spacingScale[1],
         inset: spacingScale[2],
         rtl: getComputedStyle(anchor).direction === 'rtl',
+        align,
         flipInline,
     });
     node.style.left = `${position.left}px`;
@@ -31,7 +32,7 @@ function placePopover(node, anchor, { flipInline = false }) {
  * outside it and outside `ignoreRef` (the button that toggles it).
  * Browsers without the popover API get the same fixed placement.
  */
-export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss, { flipInline = false } = {}) {
+export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss, { align = 'start', flipInline = false } = {}) {
     const dismissRef = useRef(onDismiss);
     useLayoutEffect(() => {
         dismissRef.current = onDismiss;
@@ -49,7 +50,7 @@ export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss,
             if (!node.matches(':popover-open'))
                 node.showPopover();
         }
-        placePopover(node, anchor, { flipInline });
+        placePopover(node, anchor, { align, flipInline });
         function onPointerDown(event) {
             const target = event.target;
             if (!(target instanceof Node))
@@ -60,7 +61,7 @@ export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss,
         }
         function onMove() {
             if (node && anchor)
-                placePopover(node, anchor, { flipInline });
+                placePopover(node, anchor, { align, flipInline });
         }
         // A popover or anchor that changes size while open (new commands, a
         // month with another row of weeks, a relabelled trigger) moves too.
@@ -79,5 +80,5 @@ export function useAnchoredPopover(popoverRef, anchorRef, ignoreRef, onDismiss,
             if (supportsPopover && node.matches(':popover-open'))
                 node.hidePopover();
         };
-    }, [anchorRef, flipInline, ignoreRef, popoverRef]);
+    }, [align, anchorRef, flipInline, ignoreRef, popoverRef]);
 }

package/dist/css/chevron.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The stroked chevron Accordion and Select share: two muted sides of a
+ * `space-2` square, turned by each surface to point where it needs.
+ */
+export declare const chevronStroke = "border-bottom: 2px solid var(--sw-color-muted);\n  border-right: 2px solid var(--sw-color-muted);\n  box-sizing: border-box;\n  height: var(--sw-space-2);\n  width: var(--sw-space-2);";

package/dist/css/chevron.js

@@ -0,0 +1,9 @@
+/**
+ * The stroked chevron Accordion and Select share: two muted sides of a
+ * `space-2` square, turned by each surface to point where it needs.
+ */
+export const chevronStroke = `border-bottom: 2px solid var(--sw-color-muted);
+  border-right: 2px solid var(--sw-color-muted);
+  box-sizing: border-box;
+  height: var(--sw-space-2);
+  width: var(--sw-space-2);`;

package/dist/css/css-accordion.js

@@ -1,17 +1,14 @@
+import { chevronStroke } from './chevron.js';
 function markerRules() {
     return `/* A token chevron replaces the user-agent triangle: it points to the inline end when closed and down when open. */
 .sw-accordion-summary::-webkit-details-marker { display: none; }
 
 .sw-accordion-marker {
-  border-bottom: 2px solid var(--sw-color-muted);
-  border-right: 2px solid var(--sw-color-muted);
-  box-sizing: border-box;
+  ${chevronStroke}
   flex: none;
-  height: var(--sw-space-2);
   margin-inline-end: var(--sw-space-1);
   transform: rotate(-45deg);
   transition: transform var(--sw-motion-default) var(--sw-motion-easing);
-  width: var(--sw-space-2);
 }
 
 .sw-accordion-marker:dir(rtl) { transform: rotate(135deg); }

package/dist/css/css-button.d.ts

@@ -3,6 +3,8 @@ export declare function buttonClassNames(options: {
     size: ButtonSize;
     variant: ButtonVariant;
 }): string[];
+export declare const pressedRingGap = 2;
+export declare const pressedRingWidth = 4;
 export declare function cssButtonClasses(): string;
 export declare const buttonGroupJustifies: readonly ["start", "end", "between"];
 export declare function buttonClassCatalog(): string[];

package/dist/css/css-button.js

@@ -17,6 +17,33 @@ function variantRules() {
         `.sw-button-danger { background: var(--sw-color-danger); border-color: transparent; color: var(--sw-color-onDanger); }`,
     ].join('\n');
 }
+/*
+ * A toggle button's pressed state is an accent ring drawn outside the fill,
+ * past a 2 px gap in the page background: the ring meets the background on
+ * both sides, so it keeps the accent's contrast on the canvas (4.5:1 or more
+ * in every palette, above WCAG 1.4.11's 3:1) whatever the variant's fill.
+ * A focused pressed button moves its focus outline out past the ring, so the
+ * two stay apart. The unpressed button keeps its full label contrast: no
+ * opacity.
+ *
+ * Forced colors drop box shadows, so there the same ring is a Highlight
+ * border on an out-of-flow ::after, and the button's own border turns
+ * Highlight. The button keeps the forced ButtonFace and ButtonText of every
+ * other button: a Highlight fill cannot be used, because Chromium paints
+ * the forced backplate behind a button's text in Canvas, which erased a
+ * HighlightText label (1.00:1, Teisoro's pressed toggles in 1.12.0), and
+ * forced-color-adjust: none would let every descendant keep author colors.
+ */
+export const pressedRingGap = 2;
+export const pressedRingWidth = 4;
+function pressedRules() {
+    return `.sw-button[aria-pressed='true'] { box-shadow: 0 0 0 ${pressedRingGap}px var(--sw-color-background), 0 0 0 ${pressedRingWidth}px var(--sw-color-accent); }
+.sw-button[aria-pressed='true']:focus-visible { outline-offset: calc(var(--sw-focus-ring-offset) + ${pressedRingWidth}px); }
+@media (forced-colors: active) {
+  .sw-button[aria-pressed='true'] { border-color: Highlight; position: relative; }
+  .sw-button[aria-pressed='true']::after { border: ${pressedRingWidth - pressedRingGap}px solid Highlight; border-radius: inherit; content: ''; inset: calc(-1px - ${pressedRingWidth}px); pointer-events: none; position: absolute; }
+}`;
+}
 function sizeRules() {
     return buttonSizes
         .map((size) => {
@@ -54,11 +81,8 @@ export function cssButtonClasses() {
   opacity: var(--sw-disabled-opacity);
 }
 
-.sw-button[aria-pressed='false'] {
-  opacity: var(--sw-quiet-opacity);
-}
-
 ${variantRules()}
+${pressedRules()}
 ${sizeRules()}
 ${groupRules()}`;
 }

package/dist/css/css-checkbox.js

@@ -100,6 +100,7 @@ export function cssCheckboxClasses() {
 
 .sw-checkbox-description { color: var(--sw-color-muted); }
 .sw-checkbox-error { color: var(--sw-color-danger); }
+.sw-checkbox-error:empty { position: absolute; }
 
 @media (prefers-reduced-transparency: reduce) {
   .sw-checkbox-mark { background: var(--sw-color-surface); }

package/dist/css/css-components.js

@@ -8,6 +8,8 @@ import { cssCheckboxClasses } from './css-checkbox.js';
 import { cssRadioGroupClasses } from './css-radio-group.js';
 import { cssChromeClasses } from './css-chrome.js';
 import { cssDataClasses } from './css-data.js';
+import { cssSegmentedClasses } from './css-segmented.js';
+import { cssTableClasses } from './css-table.js';
 import { cssDateFieldClasses } from './css-date-field.js';
 import { cssDialogClasses } from './css-dialog.js';
 import { cssSelectClasses } from './css-select.js';
@@ -109,6 +111,10 @@ ${cssRadioGroupClasses()}
 
 ${cssDataClasses()}
 
+${cssSegmentedClasses()}
+
+${cssTableClasses()}
+
 ${cssDateFieldClasses()}
 
 ${cssCalendarButtonClasses()}

package/dist/css/css-data.js

@@ -1,6 +1,4 @@
-import { trackInset, typographyVariants } from '@scalewing/tokens';
-import { scrollRegionRules } from './css-scroll-region.js';
-import { zIndex } from './stacking.js';
+import { buttonVariants, typographyVariants } from '@scalewing/tokens';
 export const badgeTones = [
     'neutral',
     'accent',
@@ -10,11 +8,24 @@ export const badgeTones = [
 ];
 export const badgeSizes = ['sm', 'md'];
 const caption = typographyVariants.caption;
-const data = typographyVariants.data;
-const body = typographyVariants.body;
 export function badgeClassNames(tone, size = 'md') {
     return ['sw-badge', `sw-badge-${tone}`, `sw-badge-${size}`];
 }
+/*
+ * A badge inside a filled button would otherwise draw its tone on the
+ * button's fill (a warning badge on the accent is about 1.1:1), so it takes
+ * the surface and sets its words in the text color, which is 4.5:1 on the
+ * surface in every palette; its tone stays on its border (3:1 or more), as
+ * some palettes' tones are under 4.5:1 as text on the surface. A ghost
+ * button has no fill.
+ */
+function badgeOnFilledButtonRules() {
+    const filled = buttonVariants
+        .filter((variant) => variant !== 'ghost')
+        .map((variant) => `.sw-button-${variant}`)
+        .join(', ');
+    return `:is(${filled}) .sw-badge { background: var(--sw-color-surface); color: var(--sw-color-text); }`;
+}
 export function cssDataClasses() {
     return `.sw-badge {
   align-items: center;
@@ -68,169 +79,12 @@ export function cssDataClasses() {
   color: var(--sw-color-warning);
 }
 
-.sw-segmented {
-  background: var(--sw-glass-fill);
-  border: 1px solid var(--sw-glass-border);
-  border-radius: var(--sw-radius-pill);
-  box-sizing: border-box;
-  display: inline-flex;
-  gap: ${trackInset}px;
-  padding: ${trackInset}px;
-}
-
-.sw-segmented-item {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  border-radius: var(--sw-radius-pill);
-  color: var(--sw-color-muted);
-  cursor: pointer;
-  font-family: var(--sw-font-sans);
-  font-size: ${data.fontSize}px;
-  font-weight: 600;
-  letter-spacing: ${data.letterSpacing}px;
-  line-height: ${data.lineHeight}px;
-  min-height: var(--sw-control-xs-min-height);
-  padding-inline: var(--sw-control-xs-padding-inline);
-}
-
-.sw-segmented-item:focus-visible {
-  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
-  outline-offset: var(--sw-focus-ring-offset);
-}
-
-.sw-segmented-item-selected {
-  background: var(--sw-color-surface);
-  color: var(--sw-color-text);
-}
-
-.sw-segmented-filled {
-  display: grid;
-  grid-auto-columns: minmax(0, 1fr);
-  grid-auto-flow: column;
-}
-
-.sw-segmented-filled .sw-segmented-item {
-  align-items: center;
-  color: var(--sw-color-text);
-  display: inline-flex;
-  font-size: ${body.fontSize}px;
-  justify-content: center;
-  letter-spacing: ${body.letterSpacing}px;
-  line-height: ${body.lineHeight}px;
-  min-height: var(--sw-control-md-min-height);
-  min-width: 0;
-  padding-inline: var(--sw-control-md-padding-inline);
-}
-
-.sw-segmented-filled .sw-segmented-item-selected {
-  background: var(--sw-color-accent);
-  color: var(--sw-color-onAccent);
-}
-
-.sw-segmented-disabled {
-  opacity: var(--sw-disabled-opacity);
-}
-
-.sw-segmented-item:disabled {
-  cursor: not-allowed;
-}
-
-${scrollRegionRules('.sw-table-wrap')}
-
-.sw-table {
-  border-collapse: collapse;
-  width: 100%;
-}
-
-.sw-table th,
-.sw-table td {
-  border-bottom: 1px solid var(--sw-color-border);
-  padding: var(--sw-space-2) var(--sw-space-3);
-  text-align: start;
-  vertical-align: middle;
-}
-
-.sw-table th {
-  color: var(--sw-color-muted);
-  font-family: var(--sw-font-sans);
-  font-size: ${caption.fontSize}px;
-  font-weight: 600;
-  letter-spacing: ${caption.letterSpacing}px;
-  line-height: ${caption.lineHeight}px;
-}
-
-/* Descendant form outranks .sw-table th / .sw-table td, which set text-align: start. */
-.sw-table .sw-table-end {
-  text-align: end;
-}
-
-.sw-table .sw-table-numeric {
-  font-variant-numeric: tabular-nums;
-  text-align: end;
-}
-
-.sw-table-clip {
-  max-width: 0;
-  overflow: hidden;
-}
-
-.sw-table-sticky thead th {
-  background: var(--sw-glass-fill);
-  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
-  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
-  position: sticky;
-  top: 0;
-  ${zIndex('stickyCell')}
-}
-
-.sw-table-compact th,
-.sw-table-compact td {
-  padding: var(--sw-space-1) var(--sw-space-2);
-}
-
-.sw-table-row-selected > :first-child {
-  padding-inline-start: var(--sw-space-5);
-  position: relative;
-}
-
-.sw-table-compact .sw-table-row-selected > :first-child {
-  padding-inline-start: var(--sw-space-4);
-}
-
-.sw-table-row-selected > :first-child::before {
-  background: var(--sw-color-accent);
-  border-radius: var(--sw-radius-pill);
-  content: '';
-  height: var(--sw-space-2);
-  inset-block-start: 50%;
-  inset-inline-start: var(--sw-space-2);
-  position: absolute;
-  transform: translateY(-50%);
-  width: var(--sw-space-2);
-}
-
-.sw-table-compact .sw-table-row-selected > :first-child::before {
-  inset-inline-start: var(--sw-space-1);
-}`;
+${badgeOnFilledButtonRules()}`;
 }
 export function dataClassCatalog() {
     return [
         'sw-badge',
         ...badgeTones.map((tone) => `sw-badge-${tone}`),
         ...badgeSizes.map((size) => `sw-badge-${size}`),
-        'sw-segmented',
-        'sw-segmented-item',
-        'sw-segmented-item-selected',
-        'sw-segmented-filled',
-        'sw-segmented-disabled',
-        'sw-table-wrap',
-        'sw-table',
-        'sw-table-end',
-        'sw-table-numeric',
-        'sw-table-clip',
-        'sw-table-sticky',
-        'sw-table-compact',
-        'sw-table-row-selected',
     ];
 }

package/dist/css/css-date-field.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { disabledControlForcedColors, disabledControlSurface, } from './css-document.js';
 import { zIndex } from './stacking.js';
 const body = typographyVariants.body;
 const label = typographyVariants.label;
@@ -19,12 +20,11 @@ function fieldRules() {
   width: max-content;
 }
 
+/* The label inherits the canvas's body type, as Field's does; the label
+   words inside it are a Text label span. The same line box gives the same
+   gap to the entry as a Field beside it. */
 .sw-date-field-label {
   color: var(--sw-color-text);
-  font-family: var(--sw-font-sans);
-  font-size: ${label.fontSize}px;
-  font-weight: ${label.fontWeight};
-  line-height: ${label.lineHeight}px;
 }
 
 .sw-date-field-control {
@@ -71,7 +71,11 @@ ${input}[aria-invalid='true'] {
   border-color: var(--sw-color-danger);
 }
 
-${input}:disabled,
+/* The entry looks locked as every text control does; its button fades as buttons do. */
+${input}:disabled {
+  ${disabledControlSurface}
+}
+
 .sw-date-field-button:disabled {
   cursor: not-allowed;
   opacity: var(--sw-disabled-opacity);
@@ -123,7 +127,8 @@ ${input}:disabled,
 }
 
 .sw-date-field-description { color: var(--sw-color-muted); }
-.sw-date-field-error { color: var(--sw-color-danger); }`;
+.sw-date-field-error { color: var(--sw-color-danger); }
+.sw-date-field-error:empty { position: absolute; }`;
 }
 function calendarRules() {
     return `.sw-date-field-calendar {
@@ -269,6 +274,9 @@ function adaptiveRules() {
 
 @media (forced-colors: active) {
   ${input}[aria-invalid='true'] { border-color: CanvasText; }
+  ${input}:disabled {
+    ${disabledControlForcedColors}
+  }
   .sw-date-field-calendar { border-color: CanvasText; }
   .sw-date-field-day[aria-current='date'] { border-color: CanvasText; }
   .sw-date-field-day[aria-selected='true'] {

package/dist/css/css-denomination-grid.js

@@ -2,6 +2,7 @@ import { typographyVariants } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
 import { badgeTones } from './css-data.js';
 import { scrollRegionRules } from './css-scroll-region.js';
+import { visuallyHiddenDeclarations } from './css-utilities.js';
 import { zIndex } from './stacking.js';
 const caption = typographyVariants.caption;
 const data = typographyVariants.data;
@@ -209,8 +210,15 @@ ${scrollRegionRules('.sw-denomination-scroll')}
   text-align: center;
 }
 
+/*
+ * Below md the aria-hidden copy under each row label is what shows; the
+ * total cell stays in the table, visually hidden, so a screen reader still
+ * reads each total in its row and under its column header.
+ */
 @media ${breakpointQuery('below', 'md')} {
-  .sw-denomination-strip .sw-denomination-total { display: none; }
+  .sw-denomination-strip .sw-denomination-total,
+  .sw-denomination-strip .sw-denomination-total-head { padding: 0; position: relative; }
+  .sw-denomination-total-value { ${visuallyHiddenDeclarations} }
   .sw-denomination-total-inline { display: block; }
   .sw-denomination-label-body { flex-direction: column; align-items: flex-start; gap: var(--sw-space-1); }
   .sw-denomination-strip th,
@@ -249,6 +257,8 @@ export function denominationGridClassCatalog() {
         'sw-denomination-cell-negative',
         'sw-denomination-total',
         'sw-denomination-total-inline',
+        'sw-denomination-total-head',
+        'sw-denomination-total-value',
         'sw-denomination-tiles',
         'sw-denomination-tile-list',
         'sw-denomination-tile',

package/dist/css/css-document.d.ts

@@ -1,3 +1,5 @@
 /** The frame every native text control draws: fill, hairline border, radius. */
 export declare const controlSurface = "background-color: var(--sw-glass-fill);\n  border: 1px solid var(--sw-color-border);\n  border-radius: var(--sw-radius-sm);\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  padding-inline: var(--sw-control-md-padding-inline);";
+export declare const disabledControlSurface = "background-color: var(--sw-color-subtle);\n  border-style: dashed;\n  cursor: not-allowed;\n  opacity: 1;\n  -webkit-text-fill-color: currentColor;";
+export declare const disabledControlForcedColors = "border-color: GrayText;\n  color: GrayText;\n  -webkit-text-fill-color: GrayText;";
 export declare function cssDocumentCanvas(): string;

package/dist/css/css-document.js

@@ -18,6 +18,22 @@ export const controlSurface = `background-color: var(--sw-glass-fill);
   font-family: inherit;
   font-size: inherit;
   padding-inline: var(--sw-control-md-padding-inline);`;
+/*
+ * A disabled text control keeps its value in the text color, so a locked
+ * value stays readable (4.5:1 or more on the subtle fill in every palette),
+ * and says it is locked with the quiet subtle fill and a dashed hairline
+ * instead of the opacity buttons use. WebKit fades a disabled entry's text
+ * with its own fill color and opacity, so both are set back.
+ */
+export const disabledControlSurface = `background-color: var(--sw-color-subtle);
+  border-style: dashed;
+  cursor: not-allowed;
+  opacity: 1;
+  -webkit-text-fill-color: currentColor;`;
+/* Forced colors keep the dashed border; the system's disabled color draws it. */
+export const disabledControlForcedColors = `border-color: GrayText;
+  color: GrayText;
+  -webkit-text-fill-color: GrayText;`;
 export function cssDocumentCanvas() {
     return `html,
 body {
@@ -99,5 +115,24 @@ body {
 [data-theme] select:focus-visible {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);
+}
+
+/* The browser's placeholder gray is one fixed #757575 (2.3:1 on a dark
+   field); muted is tuned per palette and scheme. */
+[data-theme] :is(${typedInputs})::placeholder {
+  color: var(--sw-color-muted);
+  opacity: 1;
+}
+
+[data-theme] :is(${typedInputs}):disabled,
+[data-theme] select:disabled {
+  ${disabledControlSurface}
+}
+
+@media (forced-colors: active) {
+  [data-theme] :is(${typedInputs}):disabled,
+  [data-theme] select:disabled {
+    ${disabledControlForcedColors}
+  }
 }`;
 }

package/dist/css/css-field.js

@@ -1,5 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
-import { controlSurface } from './css-document.js';
+import { controlSurface, disabledControlForcedColors, disabledControlSurface, } from './css-document.js';
 const caption = typographyVariants.caption;
 /*
  * A prefix or suffix sits inside the control frame: the wrapper draws the
@@ -51,7 +51,14 @@ function adornmentRules() {
   padding-inline: var(--sw-control-xs-padding-inline);
 }
 
-.sw-field-invalid .sw-field-adorned { border-color: var(--sw-color-danger); }`;
+.sw-field-invalid .sw-field-adorned { border-color: var(--sw-color-danger); }
+
+/* The frame draws the surface, so it carries the disabled look for its input. */
+.sw-field-adorned:has(> input:disabled) {
+  ${disabledControlSurface}
+}
+
+[data-theme] .sw-field-adorned > input:disabled { background: transparent; }`;
 }
 export function cssFieldClasses() {
     return `.sw-field-required { color: var(--sw-color-danger); }
@@ -66,6 +73,9 @@ export function cssFieldClasses() {
 .sw-field-description { color: var(--sw-color-muted); }
 .sw-field-error { color: var(--sw-color-danger); }
 
+/* An error region is always rendered as a live region; empty, it leaves the layout (and its gap) but stays in the accessibility tree. */
+.sw-field-error:empty { position: absolute; }
+
 [data-theme] .sw-field-invalid :is(input, select, textarea) {
   border-color: var(--sw-color-danger);
 }
@@ -76,6 +86,9 @@ ${adornmentRules()}
   [data-theme] .sw-field-invalid :is(input, select, textarea),
   .sw-field-invalid .sw-field-adorned { border-color: Mark; }
   .sw-field-prefix, .sw-field-suffix { color: CanvasText; }
+  .sw-field-adorned:has(> input:disabled) {
+    ${disabledControlForcedColors}
+  }
   .sw-field-error, .sw-field-required { color: Mark; }
 }`;
 }

package/dist/css/css-filter-chips.js

@@ -70,8 +70,15 @@ export function cssFilterChipsClasses() {
   line-height: ${data.lineHeight}px;
 }
 
+/*
+ * A zero-count chip is quiet without fading: it drops the glass fill and
+ * sets its label in the muted color, which is 4.5:1 on the canvas, surface
+ * and subtle fill in every palette. It can still be chosen, so it never
+ * reads as disabled.
+ */
 .sw-filter-chip-quiet:not(:has(.sw-filter-chip-input:checked)) .sw-filter-chip-face {
-  opacity: var(--sw-quiet-opacity);
+  background: transparent;
+  color: var(--sw-color-muted);
 }
 
 .sw-filter-chip-input:checked + .sw-filter-chip-face {
@@ -99,7 +106,6 @@ export function cssFilterChipsClasses() {
   .sw-filter-chip-input:checked + .sw-filter-chip-face { background: Highlight; border-color: Highlight; color: HighlightText; }
   .sw-filter-chip-input:focus-visible + .sw-filter-chip-face { outline-color: Highlight; }
   .sw-filter-chip-count { color: inherit; }
-  .sw-filter-chip-quiet:not(:has(.sw-filter-chip-input:checked)) .sw-filter-chip-face { opacity: 1; color: GrayText; border-color: GrayText; }
 }`;
 }
 export function filterChipsClassCatalog() {

package/dist/css/css-radio-group.js

@@ -92,7 +92,7 @@ export function cssRadioGroupClasses() {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
-.sw-radio-group:has(.sw-radio-group-error) .sw-radio-group-mark {
+.sw-radio-group[aria-invalid='true'] .sw-radio-group-mark {
   border-color: var(--sw-color-danger);
 }
 
@@ -101,6 +101,14 @@ export function cssRadioGroupClasses() {
   opacity: var(--sw-disabled-opacity);
 }
 
+/* A consumer glyph beside the label, in the label's color and the option's gap. */
+.sw-radio-group-icon {
+  align-items: center;
+  color: var(--sw-color-text);
+  display: inline-flex;
+  flex: none;
+}
+
 .sw-radio-group-text {
   color: var(--sw-color-text);
   font-family: var(--sw-font-sans);
@@ -119,6 +127,7 @@ export function cssRadioGroupClasses() {
 
 .sw-radio-group-description { color: var(--sw-color-muted); }
 .sw-radio-group-error { color: var(--sw-color-danger); }
+.sw-radio-group-error:empty { position: absolute; }
 
 @media (prefers-reduced-transparency: reduce) {
   .sw-radio-group-mark { background: var(--sw-color-surface); }
@@ -129,7 +138,7 @@ export function cssRadioGroupClasses() {
   .sw-radio-group-mark { background: Canvas; border-color: CanvasText; }
   .sw-radio-group-input:checked + .sw-radio-group-mark { background: Highlight; border-color: Highlight; }
   .sw-radio-group-input:checked + .sw-radio-group-mark::after { background: HighlightText; }
-  .sw-radio-group:has(.sw-radio-group-error) .sw-radio-group-mark { border-color: CanvasText; }
+  .sw-radio-group[aria-invalid='true'] .sw-radio-group-mark { border-color: CanvasText; }
 }`;
 }
 export function radioGroupClassCatalog() {
@@ -141,6 +150,7 @@ export function radioGroupClassCatalog() {
         'sw-radio-group-control',
         'sw-radio-group-input',
         'sw-radio-group-mark',
+        'sw-radio-group-icon',
         'sw-radio-group-text',
         'sw-radio-group-description',
         'sw-radio-group-error',

package/dist/css/css-segmented.d.ts

@@ -0,0 +1,2 @@
+export declare function cssSegmentedClasses(): string;
+export declare function segmentedClassCatalog(): string[];