@scalewing/react 1.11.0 → 1.13.0

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

@@ -1,13 +1,8 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { chevronStroke } from './chevron.js';
 import { zIndex } from './stacking.js';
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
-const chevronImage = `background-image:
-    linear-gradient(45deg, transparent 50%, var(--sw-color-muted) 50%),
-    linear-gradient(135deg, var(--sw-color-muted) 50%, transparent 50%);
-  background-repeat: no-repeat;
-  background-size: var(--sw-space-1) var(--sw-space-1),
-    var(--sw-space-1) var(--sw-space-1);`;
 export function cssSelectClasses() {
     return `.sw-select {
   max-width: 100%;
@@ -19,13 +14,10 @@ export function cssSelectClasses() {
 }
 
 .sw-select-trigger {
+  align-items: center;
   appearance: none;
   -webkit-appearance: none;
   background-color: var(--sw-glass-fill);
-  ${chevronImage}
-  background-position:
-    calc(100% - var(--sw-space-4)) calc(50% - 1px),
-    calc(100% - calc(var(--sw-space-4) - var(--sw-space-1))) calc(50% - 1px);
   border: 1px solid var(--sw-color-border);
   border-radius: var(--sw-radius-sm);
   box-sizing: border-box;
@@ -34,19 +26,60 @@ export function cssSelectClasses() {
   display: inline-flex;
   font-family: inherit;
   font-size: inherit;
+  gap: var(--sw-space-3);
   letter-spacing: inherit;
   line-height: inherit;
   margin: 0;
+  max-width: 100%;
   min-height: var(--sw-control-md-min-height);
   padding-block: 0;
   padding-inline: var(--sw-control-md-padding-inline);
-  padding-inline-end: calc(
-    var(--sw-control-md-padding-inline) + var(--sw-space-5)
-  );
   text-align: start;
+}
+
+/* The chevron Accordion uses, pointing down, centred on the text. */
+.sw-select-trigger::after {
+  ${chevronStroke}
+  content: '';
+  flex: none;
+  transform: translateY(-25%) rotate(45deg);
+}
+
+/*
+ * The current label and a hidden copy of every option's label share one grid
+ * cell, so the trigger is as wide as the longest option and keeps that width
+ * when the value changes; past the available width the label ellipsizes.
+ */
+.sw-select-value {
+  display: grid;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.sw-select-value > * {
+  grid-area: 1 / 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.sw-select-value-sizer {
+  visibility: hidden;
+}
+
+.sw-select-placeholder {
+  color: var(--sw-color-muted);
+}
+
+.sw-select-invalid .sw-select-trigger {
+  border-color: var(--sw-color-danger);
+}
+
+.sw-select-value-sizer::before {
+  content: attr(data-label);
+}
+
 .sw-select-trigger:focus {
   box-shadow: none;
   outline: none;
@@ -58,17 +91,17 @@ export function cssSelectClasses() {
 }
 
 .sw-select-xs .sw-select-trigger {
-  background-position:
-    calc(100% - var(--sw-space-3)) calc(50% - 1px),
-    calc(100% - calc(var(--sw-space-3) - var(--sw-space-1))) calc(50% - 1px);
   font-size: ${caption.fontSize}px;
+  gap: var(--sw-space-2);
   letter-spacing: ${caption.letterSpacing}px;
   line-height: ${caption.lineHeight}px;
   min-height: var(--sw-control-xs-min-height);
   padding-inline: var(--sw-control-xs-padding-inline);
-  padding-inline-end: calc(
-    var(--sw-control-xs-padding-inline) + var(--sw-space-5)
-  );
+}
+
+@media (forced-colors: active) {
+  .sw-select-trigger::after { border-color: CanvasText; }
+  .sw-select-invalid .sw-select-trigger { border-color: Mark; }
 }
 
 .sw-select-list {
@@ -128,6 +161,11 @@ export function selectClassCatalog() {
         'sw-select-xs',
         'sw-select-control',
         'sw-select-trigger',
+        'sw-select-value',
+        'sw-select-value-text',
+        'sw-select-value-sizer',
+        'sw-select-placeholder',
+        'sw-select-invalid',
         'sw-select-list',
         'sw-select-option',
         'sw-select-action',

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/css-toast.d.ts

@@ -1,2 +1,4 @@
+export declare const toastTones: readonly ["neutral", "success", "warning", "danger"];
+export type ToastTone = (typeof toastTones)[number];
 export declare function cssToastClasses(): string;
 export declare function toastClassCatalog(): string[];

package/dist/css/css-toast.js

@@ -1,3 +1,14 @@
+export const toastTones = ['neutral', 'success', 'warning', 'danger'];
+const tintedTones = toastTones.filter((tone) => tone !== 'neutral');
+/*
+ * A tone tints the toast's border and its icon; the message keeps the text
+ * color, so it reads the same in every tone and the word carries the meaning.
+ */
+function toneRules() {
+    return tintedTones
+        .map((tone) => `.sw-toast-${tone} { --sw-toast-tone: var(--sw-color-${tone}); border-color: var(--sw-toast-tone); }`)
+        .join('\n');
+}
 export function cssToastClasses() {
     return `.sw-toast {
   background: var(--sw-glass-fill);
@@ -19,6 +30,29 @@ export function cssToastClasses() {
   width: max-content;
 }
 
+${toneRules()}
+
+.sw-toast-row {
+  align-items: center;
+  display: flex;
+  gap: var(--sw-space-2);
+}
+
+.sw-toast-icon {
+  color: var(--sw-toast-tone, currentColor);
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-toast-body {
+  min-width: 0;
+}
+
+@media (forced-colors: active) {
+  .sw-toast { border-color: CanvasText; }
+  .sw-toast-icon { color: CanvasText; }
+}
+
 .sw-toast:popover-open {
   animation: sw-toast-float var(--sw-motion-default) var(--sw-motion-easing);
 }
@@ -88,5 +122,12 @@ export function cssToastClasses() {
 }`;
 }
 export function toastClassCatalog() {
-    return ['sw-toast', 'sw-toast-travel'];
+    return [
+        'sw-toast',
+        ...tintedTones.map((tone) => `sw-toast-${tone}`),
+        'sw-toast-row',
+        'sw-toast-icon',
+        'sw-toast-body',
+        'sw-toast-travel',
+    ];
 }

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

@@ -1 +1,3 @@
+/** The `sw-sr-only` declarations: kept for assistive technology, not drawn. */
+export declare const visuallyHiddenDeclarations = "position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;";
 export declare function cssUtilities(): string;

package/dist/css/css-utilities.js

@@ -1,5 +1,7 @@
 import { spacingSteps } from '@scalewing/tokens';
 import { gapAxes, layoutClassNames, paddingAxes, spacingClass, } from './spacing-classes.js';
+/** The `sw-sr-only` declarations: kept for assistive technology, not drawn. */
+export const visuallyHiddenDeclarations = 'position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;';
 function paddingRule(axis, step) {
     const className = spacingClass('padding', axis, step);
     const value = `var(--sw-space-${step})`;
@@ -39,7 +41,7 @@ const layoutRules = {
     'sw-grow': '.sw-grow { flex-grow: 1; }',
     'sw-full-width': '.sw-full-width { width: 100%; }',
     'sw-container': '.sw-container { width: 100%; max-width: var(--sw-container-max); margin-inline: auto; }',
-    'sw-sr-only': '.sw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }',
+    'sw-sr-only': `.sw-sr-only { ${visuallyHiddenDeclarations} }`,
     'sw-align-start': '.sw-align-start { align-items: flex-start; }',
     'sw-align-center': '.sw-align-center { align-items: center; }',
     'sw-align-end': '.sw-align-end { align-items: flex-end; }',

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

@@ -1,4 +1,4 @@
-export { ActionMenu, type ActionMenuItem, type ActionMenuProps, } from './components/ActionMenu.js';
+export { ActionMenu, type ActionMenuAlign, type ActionMenuItem, type ActionMenuProps, } from './components/ActionMenu.js';
 export { ActionBar, type ActionBarProps } from './components/ActionBar.js';
 export { Accordion } from './components/Accordion.js';
 export type { AccordionProps, AccordionSize } from './components/Accordion.js';
@@ -20,8 +20,8 @@ export { Card, type CardProps, type CardVariant } from './components/Card.js';
 export { Dialog, type DialogProps, type DialogSize, } from './components/Dialog.js';
 export { StatTile, type StatTileEmphasis, type StatTileProps, type StatTileTone, statTileTones, } from './components/StatTile.js';
 export { TabPanel, type TabItem, type TabPanelProps, Tabs, type TabsProps, tabId, tabPanelId, } from './components/Tabs.js';
-export { Toast } from './components/Toast.js';
-export type { ToastProps } from './components/Toast.js';
+export { Toast, toastTones } from './components/Toast.js';
+export type { ToastProps, ToastTone } from './components/Toast.js';
 export { Field, type FieldProps, type FieldSize } from './components/Field.js';
 export { Inline, type InlineProps } from './components/Inline.js';
 export { Split } from './components/Split.js';

package/dist/index.js

@@ -19,7 +19,7 @@ export { Card } from './components/Card.js';
 export { Dialog, } from './components/Dialog.js';
 export { StatTile, statTileTones, } from './components/StatTile.js';
 export { TabPanel, Tabs, tabId, tabPanelId, } from './components/Tabs.js';
-export { Toast } from './components/Toast.js';
+export { Toast, toastTones } from './components/Toast.js';
 export { Field } from './components/Field.js';
 export { Inline } from './components/Inline.js';
 export { Split } from './components/Split.js';