@scalewing/react 1.12.0 → 1.14.0

package/dist/css/css-data.js

@@ -1,6 +1,4 @@
-import { buttonVariants, 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,8 +8,6 @@ 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}`];
 }
@@ -83,171 +79,12 @@ export function cssDataClasses() {
   color: var(--sw-color-warning);
 }
 
-${badgeOnFilledButtonRules()}
-
-.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);
@@ -270,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-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); }
@@ -79,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-radio-group.js

@@ -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);
@@ -142,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[];

package/dist/css/css-segmented.js

@@ -0,0 +1,127 @@
+import { trackInset, typographyVariants } from '@scalewing/tokens';
+const body = typographyVariants.body;
+const data = typographyVariants.data;
+/*
+ * The control and its error message. The wrapper takes the track's place in
+ * the layout: inline beside text and stretched in a Stack (compact), block
+ * wide and stretched (filled), and the track fills it. The message has
+ * inline-size containment, so its length never widens the field by itself;
+ * while it has text the field is at least 24ch wide, capped at its
+ * container (the percentage resolves against the Stack or Inline, not the
+ * field), so a short track does not squeeze the message into a column. In
+ * a Stack that changes nothing; in an Inline the field grows and the row
+ * moves, while the track keeps its labels' width.
+ */
+function fieldRules() {
+    return `.sw-segmented-field {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+}
+
+.sw-segmented-field-filled {
+  display: flex;
+}
+
+.sw-segmented-field > .sw-field-error {
+  contain: inline-size;
+}
+
+.sw-segmented-field:has(> .sw-field-error:not(:empty)) {
+  min-inline-size: min(100%, 24ch);
+}
+
+.sw-inline > .sw-segmented-field > .sw-segmented {
+  align-self: flex-start;
+}
+
+.sw-segmented[aria-invalid='true'] {
+  border-color: var(--sw-color-danger);
+}
+
+@media (forced-colors: active) {
+  .sw-segmented[aria-invalid='true'] { border-color: Mark; }
+}`;
+}
+export function cssSegmentedClasses() {
+    return `${fieldRules()}
+
+.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;
+}`;
+}
+export function segmentedClassCatalog() {
+    return [
+        'sw-segmented-field',
+        'sw-segmented-field-filled',
+        'sw-segmented',
+        'sw-segmented-item',
+        'sw-segmented-item-selected',
+        'sw-segmented-filled',
+        'sw-segmented-disabled',
+    ];
+}

package/dist/css/css-select.js

@@ -9,6 +9,25 @@ export function cssSelectClasses() {
   width: max-content;
 }
 
+/*
+ * width="full": the field and its trigger fill the container's inline size.
+ * The value still takes the free space and ellipsizes, and the chevron stays
+ * last, at the inline end. In an Inline row the field takes only the space
+ * its siblings leave, so a Button beside it keeps its label on one line.
+ */
+.sw-select-full {
+  width: 100%;
+}
+
+.sw-inline > .sw-select-full {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.sw-select-full .sw-select-trigger {
+  width: 100%;
+}
+
 .sw-select-control {
   position: relative;
 }
@@ -125,6 +144,15 @@ export function cssSelectClasses() {
   ${zIndex('popup')}
 }
 
+/*
+ * A full-width field's open list is exactly the trigger's width (min-width
+ * already beats the dialog-max cap), so it never runs past a phone's edge;
+ * a long option wraps inside it, even a single long word.
+ */
+.sw-select-full .sw-select-list {
+  width: 100%;
+}
+
 .sw-select-option {
   border-radius: var(--sw-radius-sm);
   box-sizing: border-box;
@@ -135,6 +163,10 @@ export function cssSelectClasses() {
   padding-inline: var(--sw-control-xs-padding-inline);
 }
 
+.sw-select-full .sw-select-option {
+  overflow-wrap: anywhere;
+}
+
 .sw-select-option[aria-selected='true'] {
   font-weight: ${label.fontWeight};
 }
@@ -159,6 +191,7 @@ export function selectClassCatalog() {
     return [
         'sw-select',
         'sw-select-xs',
+        'sw-select-full',
         'sw-select-control',
         'sw-select-trigger',
         'sw-select-value',

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

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

package/dist/css/css-table.js

@@ -0,0 +1,99 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { scrollRegionRules } from './css-scroll-region.js';
+import { zIndex } from './stacking.js';
+const caption = typographyVariants.caption;
+/*
+ * A selected row is marked by an accent bar at its inline start and nothing
+ * else: no fill, so text, muted text and accent text (ghost buttons, links)
+ * keep the contrast they have on the table's own surface. (A subtle tint
+ * dropped accent text under 4.5:1 in several palettes.) The bar is the first
+ * cell's ::before, absolutely placed in the cell's own padding, so it takes
+ * no layout space and no column moves when a row is picked. It is a border,
+ * not a fill, so forced colors keep it, drawn in the system highlight.
+ */
+function selectedRowRules() {
+    return `.sw-table-row-selected > :first-child {
+  position: relative;
+}
+
+.sw-table-row-selected > :first-child::before {
+  border-inline-start: var(--sw-space-1) solid var(--sw-color-accent);
+  content: '';
+  inset-block: 0;
+  inset-inline-start: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+@media (forced-colors: active) {
+  .sw-table-row-selected > :first-child::before { border-color: Highlight; }
+}`;
+}
+export function cssTableClasses() {
+    return `${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);
+}
+
+${selectedRowRules()}`;
+}
+export function tableClassCatalog() {
+    return [
+        '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/stylesheet.js

@@ -24,6 +24,8 @@ import { cssComponentClasses } from './css-components.js';
 import { buttonClassCatalog } from './css-button.js';
 import { chartClassCatalog } from './css-chart.js';
 import { dataClassCatalog } from './css-data.js';
+import { segmentedClassCatalog } from './css-segmented.js';
+import { tableClassCatalog } from './css-table.js';
 import { chromeClassCatalog } from './css-chrome.js';
 import { dialogClassCatalog } from './css-dialog.js';
 import { selectClassCatalog } from './css-select.js';
@@ -49,6 +51,8 @@ export function utilityClassCatalog() {
         ...Object.keys(typographyVariants).map((name) => `sw-text-${name}`),
         ...buttonClassCatalog(),
         ...dataClassCatalog(),
+        ...segmentedClassCatalog(),
+        ...tableClassCatalog(),
         ...chartClassCatalog(),
         ...chromeClassCatalog(),
         ...dialogClassCatalog(),

package/dist/index.d.ts

@@ -29,7 +29,7 @@ export type { SplitProps } from './components/Split.js';
 export { Nav, type NavProps } from './components/Nav.js';
 export { SegmentedControl, type SegmentedControlProps, type SegmentedControlVariant, type SegmentedItem, } from './components/SegmentedControl.js';
 export { Select } from './components/Select.js';
-export type { SelectAction, SelectOption, SelectProps, } from './components/Select.js';
+export type { SelectAction, SelectOption, SelectProps, SelectWidth, } from './components/Select.js';
 export { Stack, type Align, type Justify, type StackProps, } from './components/Stack.js';
 export { Table, TableBody, TableCell, TableHeader, TableRow, type TableBodyProps, type TableCellProps, type TableDensity, type TableHeaderProps, type TableProps, type TableRowProps, } from './components/Table.js';
 export { Text, type TextAlign, type TextElement, type TextProps, } from './components/Text.js';