@scalewing/react 1.8.0 → 1.9.0

package/dist/components/date-field/DateFieldGlyph.d.ts

@@ -0,0 +1,9 @@
+export type DateFieldGlyphName = 'calendar' | 'previous' | 'next';
+/**
+ * Private control chrome for DateField. Stroke, size, and color come from
+ * the generated `sw-date-field-glyph` rule; the chevrons mirror in
+ * right-to-left text.
+ */
+export declare function DateFieldGlyph({ name }: {
+    name: DateFieldGlyphName;
+}): import("react").JSX.Element;

package/dist/components/date-field/DateFieldGlyph.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+const PATHS = {
+    calendar: 'M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5zM4 10h16M8.5 2.5v3M15.5 2.5v3',
+    previous: 'M14.5 6l-6 6 6 6',
+    next: 'M9.5 6l6 6-6 6',
+};
+/**
+ * Private control chrome for DateField. Stroke, size, and color come from
+ * the generated `sw-date-field-glyph` rule; the chevrons mirror in
+ * right-to-left text.
+ */
+export function DateFieldGlyph({ name }) {
+    return (_jsx("svg", { "aria-hidden": "true", className: cx('sw-date-field-glyph', name !== 'calendar' && 'sw-date-field-glyph-directional'), focusable: "false", viewBox: "0 0 24 24", children: _jsx("path", { d: PATHS[name] }) }));
+}

package/dist/components/date-field/use-anchored-popover.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+/**
+ * Shows a mounted element on the top layer as a manual popover, keeps it
+ * beside `anchorRef` through scroll and resize, and calls `onDismiss` for a
+ * press outside it and outside `ignoreRef` (the button that toggles it).
+ * Browsers without the popover API get the same fixed placement.
+ */
+export declare function useAnchoredPopover(popoverRef: RefObject<HTMLElement | null>, anchorRef: RefObject<HTMLElement | null>, ignoreRef: RefObject<HTMLElement | null>, onDismiss: () => void): void;

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

@@ -0,0 +1,61 @@
+import { spacingScale } from '@scalewing/tokens';
+import { useLayoutEffect, useRef } from 'react';
+import { anchoredPosition } from '../../anchored-position.js';
+function placePopover(node, anchor) {
+    const position = anchoredPosition(anchor.getBoundingClientRect(), { width: node.offsetWidth, height: node.offsetHeight }, { width: window.innerWidth, height: window.innerHeight }, {
+        gap: spacingScale[1],
+        inset: spacingScale[2],
+        rtl: getComputedStyle(anchor).direction === 'rtl',
+    });
+    node.style.left = `${position.left}px`;
+    node.style.top = `${position.top}px`;
+}
+/**
+ * Shows a mounted element on the top layer as a manual popover, keeps it
+ * beside `anchorRef` through scroll and resize, and calls `onDismiss` for a
+ * press 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) {
+    const dismissRef = useRef(onDismiss);
+    useLayoutEffect(() => {
+        dismissRef.current = onDismiss;
+    });
+    useLayoutEffect(() => {
+        const node = popoverRef.current;
+        const anchor = anchorRef.current;
+        if (!node || !anchor)
+            return;
+        const supportsPopover = typeof node.showPopover === 'function';
+        // Set only where supported: an unsupported runtime would hide a
+        // `[popover]` element that it can never show.
+        if (supportsPopover) {
+            node.setAttribute('popover', 'manual');
+            if (!node.matches(':popover-open'))
+                node.showPopover();
+        }
+        placePopover(node, anchor);
+        function onPointerDown(event) {
+            const target = event.target;
+            if (!(target instanceof Node))
+                return;
+            if (node?.contains(target) || ignoreRef.current?.contains(target))
+                return;
+            dismissRef.current();
+        }
+        function onMove() {
+            if (node && anchor)
+                placePopover(node, anchor);
+        }
+        document.addEventListener('pointerdown', onPointerDown);
+        window.addEventListener('resize', onMove);
+        window.addEventListener('scroll', onMove, true);
+        return () => {
+            document.removeEventListener('pointerdown', onPointerDown);
+            window.removeEventListener('resize', onMove);
+            window.removeEventListener('scroll', onMove, true);
+            if (supportsPopover && node.matches(':popover-open'))
+                node.hidePopover();
+        };
+    }, [anchorRef, ignoreRef, popoverRef]);
+}

package/dist/components/date-field/use-date-entry.d.ts

@@ -0,0 +1,20 @@
+import { type DateEntryPattern } from '../../date-entry.js';
+export type DateEntry = {
+    text: string;
+    /** The date the text forms: YYYY-MM-DD, '' when blank, null when not one. */
+    parsed: string | null;
+    /** Typed text that is not a date, after the person left the field. */
+    invalid: boolean;
+    change: (text: string) => void;
+    check: () => void;
+    reset: () => void;
+};
+/**
+ * Typed entry over a controlled date-only value. A keystroke that finishes
+ * a date (see `isCompleteDateEntry`) or blanks the text calls `onCommit`;
+ * a date whose last field may still grow commits on `check` (blur or
+ * Enter). Text that is not (yet) a date stays on screen and leaves the value
+ * alone. The text also stays when the parent keeps the old value; when
+ * `value` changes from outside to any other date, the text follows it.
+ */
+export declare function useDateEntry(value: string, pattern: DateEntryPattern, onCommit: (value: string) => void): DateEntry;

package/dist/components/date-field/use-date-entry.js

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { formatDateEntry, isCompleteDateEntry, parseDateEntry, } from '../../date-entry.js';
+/**
+ * Typed entry over a controlled date-only value. A keystroke that finishes
+ * a date (see `isCompleteDateEntry`) or blanks the text calls `onCommit`;
+ * a date whose last field may still grow commits on `check` (blur or
+ * Enter). Text that is not (yet) a date stays on screen and leaves the value
+ * alone. The text also stays when the parent keeps the old value; when
+ * `value` changes from outside to any other date, the text follows it.
+ */
+export function useDateEntry(value, pattern, onCommit) {
+    const [draft, setDraft] = useState(null);
+    const current = draft !== null && (draft.value === value || draft.committed === value)
+        ? draft
+        : null;
+    // The parent adopted the commit: tie the text to it, so a later outside
+    // change back to the old value replaces the text.
+    if (current !== null && current.value !== value)
+        setDraft({ ...current, value, committed: null });
+    const text = current ? current.text : formatDateEntry(value, pattern);
+    const parsed = parseDateEntry(text, pattern);
+    function change(next) {
+        const nextValue = parseDateEntry(next, pattern);
+        const ready = nextValue === '' ||
+            (nextValue !== null && isCompleteDateEntry(next, pattern));
+        const committed = ready && nextValue !== value ? nextValue : null;
+        setDraft({ text: next, value, committed, checked: false });
+        if (committed !== null)
+            onCommit(committed);
+    }
+    function check() {
+        if (current === null)
+            return;
+        if (parsed === null) {
+            setDraft({ ...current, checked: true });
+            return;
+        }
+        if (parsed === value) {
+            // Show the value in the locale's padded form.
+            setDraft(null);
+            return;
+        }
+        // Commit once; a parent that keeps the old value keeps the padded text.
+        if (parsed !== current.committed)
+            onCommit(parsed);
+        setDraft({
+            text: formatDateEntry(parsed, pattern),
+            value,
+            committed: parsed,
+            checked: false,
+        });
+    }
+    return {
+        text,
+        parsed,
+        invalid: current !== null && current.checked && parsed === null,
+        change,
+        check,
+        reset: () => setDraft(null),
+    };
+}

package/dist/components/date-field/use-lang-locale.d.ts

@@ -0,0 +1,7 @@
+import { type RefObject } from 'react';
+/**
+ * The `locale` prop when given; otherwise the `lang` of the nearest ancestor
+ * of `ref`, read when the field mounts, then en-US. A product that switches
+ * language without remounting passes `locale`.
+ */
+export declare function useLangLocale(locale: string | undefined, ref: RefObject<HTMLElement | null>): string;

package/dist/components/date-field/use-lang-locale.js

@@ -0,0 +1,17 @@
+import { useLayoutEffect, useState } from 'react';
+import { resolveDateLocale } from '../../date-field-locale.js';
+/**
+ * The `locale` prop when given; otherwise the `lang` of the nearest ancestor
+ * of `ref`, read when the field mounts, then en-US. A product that switches
+ * language without remounting passes `locale`.
+ */
+export function useLangLocale(locale, ref) {
+    const [lang, setLang] = useState(null);
+    useLayoutEffect(() => {
+        if (locale !== undefined)
+            return;
+        const nearest = ref.current?.closest('[lang]')?.getAttribute('lang');
+        setLang(nearest ?? null);
+    }, [locale, ref]);
+    return resolveDateLocale(locale, lang);
+}

package/dist/css/css-accordion.js

@@ -1,3 +1,33 @@
+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;
+  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); }
+
+.sw-accordion[open] > .sw-accordion-summary .sw-accordion-marker {
+  transform: rotate(45deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-accordion-marker { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .sw-accordion-marker { border-color: CanvasText; }
+}`;
+}
 export function cssAccordionClasses() {
     return `.sw-accordion {
   background: var(--sw-glass-fill);
@@ -9,25 +39,42 @@ export function cssAccordionClasses() {
   color: var(--sw-color-text);
 }
 
+/* A nested disclosure sits inside a larger surface, so its corners are smaller. */
+.sw-accordion-sm { border-radius: var(--sw-radius-md); }
+
 .sw-accordion-summary {
+  align-items: center;
+  box-sizing: border-box;
   cursor: pointer;
-  display: list-item;
+  display: flex;
+  gap: var(--sw-space-3);
+  list-style: none;
   min-height: var(--sw-control-md-min-height);
 }
 
-.sw-accordion-summary::-webkit-details-marker {
-  color: var(--sw-color-muted);
-}
+/* A nested header is an sm control, still a comfortable pointer and touch target. */
+.sw-accordion-sm > .sw-accordion-summary { min-height: var(--sw-control-sm-min-height); }
 
-.sw-accordion-summary::marker {
-  color: var(--sw-color-muted);
+.sw-accordion-heading {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
 }
 
 .sw-accordion-summary:focus-visible {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);
-}`;
+}
+
+${markerRules()}`;
 }
 export function accordionClassCatalog() {
-    return ['sw-accordion', 'sw-accordion-summary'];
+    return [
+        'sw-accordion',
+        'sw-accordion-sm',
+        'sw-accordion-summary',
+        'sw-accordion-heading',
+        'sw-accordion-marker',
+    ];
 }

package/dist/css/css-action-bar.d.ts

@@ -0,0 +1,4 @@
+import { type Breakpoint } from './breakpoints.js';
+export declare function actionBarStickyClass(stickyBelow: Breakpoint | undefined): string;
+export declare function cssActionBarClasses(): string;
+export declare function actionBarClassCatalog(): string[];

package/dist/css/css-action-bar.js

@@ -0,0 +1,99 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery, breakpoints, } from './breakpoints.js';
+import { zIndex } from './stacking.js';
+const caption = typographyVariants.caption;
+/* The bar floats a step above the bottom edge and clears the home indicator. */
+function stuckToBottom(indent) {
+    return [
+        'bottom: calc(var(--sw-space-2) + env(safe-area-inset-bottom, 0px));',
+        'position: sticky;',
+        zIndex('bottomChrome'),
+    ]
+        .map((declaration) => `${indent}${declaration}`)
+        .join('\n');
+}
+export function actionBarStickyClass(stickyBelow) {
+    return stickyBelow
+        ? `sw-action-bar-sticky-below-${stickyBelow}`
+        : 'sw-action-bar-sticky';
+}
+function stickyRules() {
+    const below = breakpoints
+        .map((breakpoint) => `@media ${breakpointQuery('below', breakpoint)} {
+  .${actionBarStickyClass(breakpoint)} {
+${stuckToBottom('    ')}
+  }
+}`)
+        .join('\n\n');
+    return `.sw-action-bar-sticky {
+${stuckToBottom('  ')}
+}
+
+${below}`;
+}
+export function cssActionBarClasses() {
+    return `.sw-action-bar {
+  align-items: center;
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-lg);
+  box-shadow: 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-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-4);
+  padding-block: var(--sw-space-3);
+  padding-left: max(var(--sw-space-4), env(safe-area-inset-left, 0px));
+  padding-right: max(var(--sw-space-4), env(safe-area-inset-right, 0px));
+}
+
+.sw-action-bar-status {
+  color: var(--sw-color-muted);
+  flex: 1 1 auto;
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+  margin: 0;
+  min-width: 0;
+}
+
+/* With no status the live region stays in the page, so a first status is
+   still announced, but it takes no room in the bar. */
+.sw-action-bar-status:empty {
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+.sw-action-bar-actions {
+  align-items: center;
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  .sw-action-bar-status,
+  .sw-action-bar-actions { flex-basis: 100%; }
+  .sw-action-bar-actions > * { flex: 1 1 auto; }
+}
+
+${stickyRules()}`;
+}
+export function actionBarClassCatalog() {
+    return [
+        'sw-action-bar',
+        'sw-action-bar-status',
+        'sw-action-bar-actions',
+        'sw-action-bar-sticky',
+        ...breakpoints.map((breakpoint) => actionBarStickyClass(breakpoint)),
+    ];
+}

package/dist/css/css-action-menu.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { zIndex } from './stacking.js';
 const label = typographyVariants.label;
 export function cssActionMenuClasses() {
     return `.sw-action-menu {
@@ -45,7 +46,7 @@ export function cssActionMenuClasses() {
   overflow: auto;
   padding: var(--sw-space-1);
   position: fixed;
-  z-index: 10;
+  ${zIndex('popup')}
 }
 
 .sw-action-menu-list[hidden] {

package/dist/css/css-box-border.d.ts

@@ -0,0 +1,5 @@
+export type BoxBorderValue = boolean | 'dashed';
+/** The generated class for a Box `border` prop, or none for `false`. */
+export declare function boxBorderClass(border: BoxBorderValue | undefined): string | undefined;
+export declare function cssBoxBorderClasses(): string;
+export declare function boxBorderClassCatalog(): string[];

package/dist/css/css-box-border.js

@@ -0,0 +1,24 @@
+const borderStyles = ['solid', 'dashed'];
+function borderClass(style) {
+    return style === 'solid' ? 'sw-border' : `sw-border-${style}`;
+}
+/** The generated class for a Box `border` prop, or none for `false`. */
+export function boxBorderClass(border) {
+    if (!border)
+        return undefined;
+    return borderClass(border === 'dashed' ? 'dashed' : 'solid');
+}
+/*
+ * A Box `border` is a token hairline. These rules are emitted after every
+ * component rule so that, at equal specificity, the prop still wins over a
+ * Box-based component's own frame. A consumer `style` wins over both. In
+ * forced colors the system border color replaces the token and the style stays.
+ */
+export function cssBoxBorderClasses() {
+    return borderStyles
+        .map((style) => `.${borderClass(style)} { border: 1px ${style} var(--sw-color-border); }`)
+        .join('\n');
+}
+export function boxBorderClassCatalog() {
+    return borderStyles.map(borderClass);
+}

package/dist/css/css-chrome.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { zIndex } from './stacking.js';
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
 export function cssChromeClasses() {
@@ -14,7 +15,7 @@ export function cssChromeClasses() {
 .sw-app-header-sticky {
   position: sticky;
   top: 0;
-  z-index: 2;
+  ${zIndex('topChrome')}
 }
 
 .sw-nav {

package/dist/css/css-components.js

@@ -1,5 +1,6 @@
 import { compactTypographyVariants, typographyVariants, } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
+import { cssActionBarClasses } from './css-action-bar.js';
 import { cssActionMenuClasses } from './css-action-menu.js';
 import { cssAccordionClasses } from './css-accordion.js';
 import { cssButtonClasses } from './css-button.js';
@@ -26,6 +27,8 @@ import { cssGridSpanClasses } from './css-grid-span.js';
 import { cssDenominationGridClasses } from './css-denomination-grid.js';
 import { cssFieldClasses } from './css-field.js';
 import { cssToastClasses } from './css-toast.js';
+import { cssBoxBorderClasses } from './css-box-border.js';
+import { cssPopupHostRules } from './stacking.js';
 /*
  * Reduce Transparency swaps every glass surface for the solid surface. It is
  * emitted after every component rule: at equal specificity the later rule wins,
@@ -35,6 +38,7 @@ function reducedTransparencyRules() {
     return `@media (prefers-reduced-transparency: reduce) {
   .sw-card-glass,
   .sw-app-header,
+  .sw-action-bar,
   .sw-badge-neutral,
   .sw-segmented,
   .sw-table-sticky thead th,
@@ -45,6 +49,7 @@ function reducedTransparencyRules() {
   .sw-accordion,
   .sw-select-list,
   .sw-action-menu-list,
+  .sw-date-field-calendar,
   .sw-toast {
     background: var(--sw-color-surface);
     backdrop-filter: none;
@@ -82,12 +87,7 @@ export function cssComponentClasses() {
   -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
 }
 
-/* Backdrop blur makes a glass surface its own stacking context, so an open popup inside it would paint under the next surface. */
-.sw-card-glass:has(.sw-select-list, .sw-action-menu-list:not([hidden]), .sw-tooltip:not([hidden])),
-.sw-accordion:has(.sw-select-list, .sw-action-menu-list:not([hidden]), .sw-tooltip:not([hidden])) {
-  position: relative;
-  z-index: 1;
-}
+${cssPopupHostRules()}
 
 .sw-card-outlined {
   background: var(--sw-color-surface);
@@ -145,6 +145,8 @@ ${cssSelectClasses()}
 
 ${cssActionMenuClasses()}
 
+${cssActionBarClasses()}
+
 ${cssSwitchClasses()}
 
 ${cssSpinnerClasses()}
@@ -173,5 +175,7 @@ ${cssToastClasses()}
 
 ${cssResponsiveClasses()}
 
+${cssBoxBorderClasses()}
+
 ${reducedTransparencyRules()}`;
 }

package/dist/css/css-data.js

@@ -1,5 +1,6 @@
 import { trackInset, typographyVariants } from '@scalewing/tokens';
 import { scrollRegionRules } from './css-scroll-region.js';
+import { zIndex } from './stacking.js';
 export const badgeTones = [
     'neutral',
     'accent',
@@ -180,7 +181,7 @@ ${scrollRegionRules('.sw-table-wrap')}
   -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
   position: sticky;
   top: 0;
-  z-index: 1;
+  ${zIndex('stickyCell')}
 }
 
 .sw-table-compact th,