@scalewing/react 1.8.0 → 1.9.0

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

@@ -1,8 +1,15 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { zIndex } from './stacking.js';
 const body = typographyVariants.body;
 const label = typographyVariants.label;
 const caption = typographyVariants.caption;
-export function cssDateFieldClasses() {
+/* The calendar button, month steps, and days are one square control wide. */
+const square = 'var(--sw-control-md-min-height)';
+/* Wide enough for "MM/DD/YYYY" in the system sans. */
+const entryWidth = '12ch';
+/* Outranks the canvas rule for text inputs so the button keeps its room. */
+const input = '.sw-date-field .sw-date-field-control > .sw-date-field-input';
+function fieldRules() {
     return `.sw-date-field {
   display: flex;
   flex-direction: column;
@@ -20,7 +27,15 @@ export function cssDateFieldClasses() {
   line-height: ${label.lineHeight}px;
 }
 
-.sw-date-field-input {
+.sw-date-field-control {
+  align-self: flex-start;
+  display: flex;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+}
+
+${input} {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-color-border);
   border-radius: var(--sw-radius-sm);
@@ -28,26 +43,78 @@ export function cssDateFieldClasses() {
   color: var(--sw-color-text);
   font-family: var(--sw-font-sans);
   font-size: ${body.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  margin: 0;
+  max-width: 100%;
   min-height: var(--sw-control-md-min-height);
   min-width: 0;
-  padding-inline: var(--sw-control-md-padding-inline);
-  width: 100%;
+  padding-inline: var(--sw-control-md-padding-inline) ${square};
+  width: calc(${entryWidth} + var(--sw-control-md-padding-inline) + ${square});
+}
+
+${input}::placeholder {
+  color: var(--sw-color-muted);
+  opacity: 1;
+}
+
+${input}:focus {
+  box-shadow: none;
+  outline: none;
 }
 
-.sw-date-field-input:focus-visible {
+${input}:focus-visible {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);
 }
 
-.sw-date-field-input[aria-invalid='true'] {
+${input}[aria-invalid='true'] {
   border-color: var(--sw-color-danger);
 }
 
-.sw-date-field-input:disabled {
+${input}:disabled,
+.sw-date-field-button:disabled {
   cursor: not-allowed;
   opacity: var(--sw-disabled-opacity);
 }
 
+.sw-date-field-button {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sw-radius-sm);
+  color: var(--sw-color-muted);
+  cursor: pointer;
+  display: flex;
+  inset-block: 0;
+  inset-inline-end: 0;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  width: ${square};
+}
+
+.sw-date-field-button:hover:not(:disabled),
+.sw-date-field-button[aria-expanded='true'] {
+  color: var(--sw-color-text);
+}
+
+.sw-date-field-glyph {
+  fill: none;
+  flex: none;
+  height: var(--sw-space-5);
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.75;
+  width: var(--sw-space-5);
+}
+
+[dir='rtl'] .sw-date-field-glyph-directional {
+  transform: scaleX(-1);
+}
+
 .sw-date-field-description,
 .sw-date-field-error {
   font-family: var(--sw-font-sans);
@@ -56,22 +123,185 @@ export function cssDateFieldClasses() {
 }
 
 .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); }`;
+}
+function calendarRules() {
+    return `.sw-date-field-calendar {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-md);
+  box-shadow: var(--sw-elevation-md), inset 0 1px 0 var(--sw-glass-specular);
+  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));
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--sw-font-sans);
+  gap: var(--sw-space-2);
+  height: auto;
+  inset: auto;
+  margin: 0;
+  max-width: calc(100vw - var(--sw-space-2) - var(--sw-space-2));
+  overflow: visible;
+  padding: var(--sw-space-3);
+  position: fixed;
+  width: max-content;
+  ${zIndex('popup')}
+}
+
+.sw-date-field-header {
+  align-items: center;
+  display: flex;
+  gap: var(--sw-space-1);
+  justify-content: space-between;
+}
+
+.sw-date-field-jump {
+  display: flex;
+  gap: var(--sw-space-1);
+  min-width: 0;
+}
+
+.sw-date-field-step {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-text);
+  cursor: pointer;
+  display: flex;
+  flex: none;
+  height: ${square};
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  width: ${square};
+}
+
+.sw-date-field-step[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-date-field-grid {
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+
+.sw-date-field-grid th {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  font-weight: normal;
+  line-height: ${caption.lineHeight}px;
+  padding: 0 0 var(--sw-space-1);
+  text-align: center;
+}
 
-@media (prefers-reduced-transparency: reduce) {
-  .sw-date-field-input { background: var(--sw-color-surface); }
+.sw-date-field-day {
+  border: 1px solid transparent;
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  cursor: pointer;
+  font-size: ${label.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  height: ${square};
+  padding: 0;
+  text-align: center;
+  vertical-align: middle;
+  width: ${square};
+}
+
+.sw-date-field-day-outside {
+  color: var(--sw-color-muted);
+}
+
+.sw-date-field-step:hover:not([aria-disabled='true']),
+.sw-date-field-day:hover:not([aria-disabled='true']) {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+.sw-date-field-day[aria-current='date'] {
+  border-color: var(--sw-color-accent);
+  color: var(--sw-color-accent);
+  font-weight: ${label.fontWeight};
+}
+
+.sw-date-field-day[aria-selected='true'],
+.sw-date-field-day[aria-selected='true']:hover {
+  background: var(--sw-color-accent);
+  border-color: var(--sw-color-accent);
+  color: var(--sw-color-onAccent);
+  font-weight: ${label.fontWeight};
+}
+
+.sw-date-field-day[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-date-field-button:focus,
+.sw-date-field-step:focus,
+.sw-date-field-day:focus {
+  outline: none;
+}
+
+.sw-date-field-button:focus-visible,
+.sw-date-field-step:focus-visible,
+.sw-date-field-day:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-date-field-footer {
+  display: flex;
+  gap: var(--sw-space-1);
+  justify-content: flex-end;
+}`;
+}
+function adaptiveRules() {
+    return `@media (prefers-reduced-transparency: reduce) {
+  ${input} { background: var(--sw-color-surface); }
 }
 
 @media (forced-colors: active) {
-  .sw-date-field-input[aria-invalid='true'] { border-color: CanvasText; }
+  ${input}[aria-invalid='true'] { border-color: CanvasText; }
+  .sw-date-field-calendar { border-color: CanvasText; }
+  .sw-date-field-day[aria-current='date'] { border-color: CanvasText; }
+  .sw-date-field-day[aria-selected='true'] {
+    background: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
 }`;
 }
+export function cssDateFieldClasses() {
+    return `${fieldRules()}
+
+${calendarRules()}
+
+${adaptiveRules()}`;
+}
 export function dateFieldClassCatalog() {
     return [
         'sw-date-field',
         'sw-date-field-label',
+        'sw-date-field-control',
         'sw-date-field-input',
+        'sw-date-field-button',
+        'sw-date-field-glyph',
+        'sw-date-field-glyph-directional',
         'sw-date-field-description',
         'sw-date-field-error',
+        'sw-date-field-calendar',
+        'sw-date-field-header',
+        'sw-date-field-jump',
+        'sw-date-field-step',
+        'sw-date-field-grid',
+        'sw-date-field-day',
+        'sw-date-field-day-outside',
+        'sw-date-field-footer',
     ];
 }

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 { zIndex } from './stacking.js';
 const caption = typographyVariants.caption;
 const data = typographyVariants.data;
 const label = typographyVariants.label;
@@ -81,7 +82,7 @@ ${scrollRegionRules('.sw-denomination-scroll')}
   -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
   inset-inline-start: 0;
   position: sticky;
-  z-index: 1;
+  ${zIndex('stickyCell')}
 }
 
 /*

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

@@ -1 +1,3 @@
+/** 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 function cssDocumentCanvas(): string;

package/dist/css/css-document.js

@@ -10,7 +10,8 @@ const typedInputs = [
     'input:not([type])',
     'textarea',
 ].join(', ');
-const controlSurface = `background-color: var(--sw-glass-fill);
+/** The frame every native text control draws: fill, hairline border, radius. */
+export const controlSurface = `background-color: var(--sw-glass-fill);
   border: 1px solid var(--sw-color-border);
   border-radius: var(--sw-radius-sm);
   color: inherit;

package/dist/css/css-field.js

@@ -1,5 +1,58 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { controlSurface } from './css-document.js';
 const caption = typographyVariants.caption;
+/*
+ * A prefix or suffix sits inside the control frame: the wrapper draws the
+ * canvas control surface and the focus ring, and the native input inside it
+ * drops its own frame so the text and the value read as one control.
+ */
+function adornmentRules() {
+    return `.sw-field-adorned {
+  ${controlSurface}
+  align-items: center;
+  box-sizing: border-box;
+  cursor: text;
+  display: flex;
+  gap: var(--sw-space-1);
+  min-height: var(--sw-control-md-min-height);
+}
+
+[data-theme] .sw-field-adorned > input {
+  align-self: stretch;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  padding-inline: 0;
+}
+
+[data-theme] .sw-field-adorned > input:focus-visible { outline: none; }
+
+.sw-field-adorned:focus-within {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-field-prefix,
+.sw-field-suffix {
+  color: var(--sw-color-muted);
+  flex: none;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.sw-field-xs .sw-field-adorned {
+  font-size: ${caption.fontSize}px;
+  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);
+}
+
+.sw-field-invalid .sw-field-adorned { border-color: var(--sw-color-danger); }`;
+}
 export function cssFieldClasses() {
     return `.sw-field-required { color: var(--sw-color-danger); }
 
@@ -17,8 +70,12 @@ export function cssFieldClasses() {
   border-color: var(--sw-color-danger);
 }
 
+${adornmentRules()}
+
 @media (forced-colors: active) {
-  [data-theme] .sw-field-invalid :is(input, select, textarea) { border-color: Mark; }
+  [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-error, .sw-field-required { color: Mark; }
 }`;
 }
@@ -29,5 +86,8 @@ export function fieldClassCatalog() {
         'sw-field-description',
         'sw-field-error',
         'sw-field-invalid',
+        'sw-field-adorned',
+        'sw-field-prefix',
+        'sw-field-suffix',
     ];
 }

package/dist/css/css-select.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { zIndex } from './stacking.js';
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
 const chevronImage = `background-image:
@@ -88,7 +89,7 @@ export function cssSelectClasses() {
   padding: var(--sw-space-1);
   position: absolute;
   width: max-content;
-  z-index: 3;
+  ${zIndex('popup')}
 }
 
 .sw-select-option {

package/dist/css/css-tooltip.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { zIndex } from './stacking.js';
 const caption = typographyVariants.caption;
 export function cssTooltipClasses() {
     return `.sw-tooltip-anchor {
@@ -21,7 +22,7 @@ export function cssTooltipClasses() {
   padding: var(--sw-space-2);
   position: absolute;
   width: max-content;
-  z-index: 10;
+  ${zIndex('popup')}
 }
 
 .sw-tooltip[hidden] { display: none; }

package/dist/css/stacking.d.ts

@@ -0,0 +1,10 @@
+export declare const stackingOrder: {
+    readonly stickyCell: 1;
+    readonly bottomChrome: 2;
+    readonly popupHost: 3;
+    readonly topChrome: 4;
+    readonly popup: 10;
+};
+export type StackingLayer = keyof typeof stackingOrder;
+export declare function zIndex(layer: StackingLayer): string;
+export declare function cssPopupHostRules(): string;

package/dist/css/stacking.js

@@ -0,0 +1,47 @@
+/*
+ * The one stacking order of the generated stylesheet. Every generated
+ * `z-index` reads a layer from here, lowest first:
+ *
+ * 1. `stickyCell`: a sticky table header cell or row label over the cells
+ *    that scroll under it.
+ * 2. `bottomChrome`: the sticky ActionBar over the page flow it follows.
+ * 3. `popupHost`: a glass surface (glass Card, Accordion) while it holds an
+ *    open popup. Backdrop blur makes that surface its own stacking context, so
+ *    its popup can only paint as high as the surface does; lifting the surface
+ *    over the ActionBar keeps an open list tappable where the bar would cover
+ *    it, and over the next surface in the flow.
+ * 4. `topChrome`: the sticky AppHeader, over a lifted surface that scrolls up
+ *    under it (the header is the page's way back, and a popup opens downward).
+ * 5. `popup`: a popup outside any lifted surface (Select list, ActionMenu
+ *    list, Tooltip, DateField calendar) over everything in the page.
+ *
+ * Dialog and Toast sit on the browser's top layer, above all of these.
+ */
+export const stackingOrder = {
+    stickyCell: 1,
+    bottomChrome: 2,
+    popupHost: 3,
+    topChrome: 4,
+    popup: 10,
+};
+export function zIndex(layer) {
+    return `z-index: ${stackingOrder[layer]};`;
+}
+const openPopups = [
+    '.sw-select-list',
+    '.sw-action-menu-list:not([hidden])',
+    '.sw-tooltip:not([hidden])',
+    // Rendered only while open; on the top layer where the popover API exists.
+    '.sw-date-field-calendar',
+].join(', ');
+const popupHosts = ['.sw-card-glass', '.sw-accordion'];
+export function cssPopupHostRules() {
+    const selectors = popupHosts
+        .map((host) => `${host}:has(${openPopups})`)
+        .join(',\n');
+    return `/* Backdrop blur makes a glass surface its own stacking context, so it lifts while it holds an open popup (see stacking.ts). */
+${selectors} {
+  position: relative;
+  ${zIndex('popupHost')}
+}`;
+}

package/dist/css/stylesheet.js

@@ -1,4 +1,5 @@
 import { cardVariants, darkTheme, lightTheme, typographyVariants, } from '@scalewing/tokens';
+import { actionBarClassCatalog } from './css-action-bar.js';
 import { actionMenuClassCatalog } from './css-action-menu.js';
 import { accordionClassCatalog } from './css-accordion.js';
 import { switchClassCatalog } from './css-switch.js';
@@ -17,6 +18,7 @@ import { gridClassCatalog } from './css-grid.js';
 import { gridSpanClassCatalog } from './css-grid-span.js';
 import { denominationGridClassCatalog } from './css-denomination-grid.js';
 import { fieldClassCatalog } from './css-field.js';
+import { boxBorderClassCatalog } from './css-box-border.js';
 import { cssComponentClasses } from './css-components.js';
 import { buttonClassCatalog } from './css-button.js';
 import { chartClassCatalog } from './css-chart.js';
@@ -52,6 +54,7 @@ export function utilityClassCatalog() {
         ...accordionClassCatalog(),
         ...selectClassCatalog(),
         ...actionMenuClassCatalog(),
+        ...actionBarClassCatalog(),
         ...switchClassCatalog(),
         ...dateFieldClassCatalog(),
         ...checkboxClassCatalog(),
@@ -70,6 +73,7 @@ export function utilityClassCatalog() {
         ...splitClassCatalog(),
         ...toastClassCatalog(),
         ...responsiveClassCatalog(),
+        ...boxBorderClassCatalog(),
     ];
 }
 export { generatePaletteStylesheet, paletteStylesheetIds, } from './css-palettes.js';

package/dist/date-entry-validity.d.ts

@@ -0,0 +1,10 @@
+import { type DateFieldLabels } from './date-field-labels.js';
+/**
+ * The message a date entry reports through `setCustomValidity`, so a form
+ * will not submit while it shows something other than an allowed date, as
+ * a native date input's `badInput`, `rangeUnderflow` and `rangeOverflow`
+ * would block it. `parsed` is the date the text forms, '' when blank, or
+ * null when the text is not a date. Empty means valid; `required` covers a
+ * blank entry.
+ */
+export declare function dateEntryValidity(parsed: string | null, labels: Pick<DateFieldLabels, 'invalidEntry' | 'outOfRange'>, min?: string, max?: string): string;

package/dist/date-entry-validity.js

@@ -0,0 +1,16 @@
+import { isOutsideDateRange } from './date-only.js';
+/**
+ * The message a date entry reports through `setCustomValidity`, so a form
+ * will not submit while it shows something other than an allowed date, as
+ * a native date input's `badInput`, `rangeUnderflow` and `rangeOverflow`
+ * would block it. `parsed` is the date the text forms, '' when blank, or
+ * null when the text is not a date. Empty means valid; `required` covers a
+ * blank entry.
+ */
+export function dateEntryValidity(parsed, labels, min, max) {
+    if (parsed === null)
+        return labels.invalidEntry;
+    if (isOutsideDateRange(parsed, min, max))
+        return labels.outOfRange;
+    return '';
+}

package/dist/date-entry.d.ts

@@ -0,0 +1,32 @@
+export type DateEntryPart = 'day' | 'month' | 'year';
+/** How a locale writes a numeric date: field order and the separator. */
+export type DateEntryPattern = {
+    order: readonly [DateEntryPart, DateEntryPart, DateEntryPart];
+    separator: string;
+};
+/**
+ * Reads the numeric field order and separator from `Intl` for `locale`, for
+ * example month/day/year with "/" for en-US and day.month.year for de.
+ */
+export declare function dateEntryPattern(locale: string): DateEntryPattern;
+/** Zero-padded, Latin digits in the pattern's order; empty for no date. */
+export declare function formatDateEntry(value: string, pattern: DateEntryPattern): string;
+/** A hint such as "MM/DD/YYYY" from the consumer's per-part letters. */
+export declare function dateEntryPlaceholder(pattern: DateEntryPattern, letters: Record<DateEntryPart, string>): string;
+/**
+ * Whether typed text is finished, so a date it forms can be committed while
+ * the person is still typing: eight bare digits, or three fields whose last
+ * one is at full width (four year digits, two for a trailing day or month).
+ * A shorter last field may still grow, as "2024-03-1" on the way to
+ * "2024-03-10", so it waits for blur or Enter instead.
+ */
+export declare function isCompleteDateEntry(text: string, pattern: DateEntryPattern): boolean;
+/**
+ * Parses typed text in the pattern's order. Day and month take one or two
+ * digits, the year exactly four, and any non-digit run separates fields.
+ * Eight bare digits split by field width in the same order (MMDDYYYY for
+ * en-US). A four-digit first field reads as ISO year-month-day in every
+ * locale, since no locale starts a day or month with four digits. Returns
+ * the YYYY-MM-DD value, '' for blank text, or null when it is not a date.
+ */
+export declare function parseDateEntry(text: string, pattern: DateEntryPattern): string | null;