@scalewing/react 1.8.0 → 1.10.0

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-calendar-button.d.ts

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

package/dist/css/css-calendar-button.js

@@ -0,0 +1,33 @@
+import { buttonSizes } from '@scalewing/tokens';
+/* The comfortable touch target: the md control height, 44 px, both ways. */
+const touchTarget = 'var(--sw-control-md-min-height)';
+/* Square at every Button size: as wide as the size's control height. */
+function squareRules() {
+    return buttonSizes
+        .map((size) => `.sw-button-${size}.sw-calendar-button { min-width: var(--sw-control-${size}-min-height); }`)
+        .join('\n');
+}
+export function cssCalendarButtonClasses() {
+    return `.sw-button.sw-calendar-button {
+  flex: none;
+  padding-inline: 0;
+}
+
+${squareRules()}
+
+.sw-calendar-button:not(.sw-button-md) .sw-date-field-glyph {
+  height: var(--sw-space-4);
+  width: var(--sw-space-4);
+}
+
+/* A coarse pointer gets the full touch target at the smaller sizes too. */
+@media (pointer: coarse) {
+  .sw-button.sw-calendar-button {
+    min-height: ${touchTarget};
+    min-width: ${touchTarget};
+  }
+}`;
+}
+export function calendarButtonClassCatalog() {
+    return ['sw-calendar-button'];
+}

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,8 +1,10 @@
 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';
+import { cssCalendarButtonClasses } from './css-calendar-button.js';
 import { cssChartClasses } from './css-chart.js';
 import { cssCheckboxClasses } from './css-checkbox.js';
 import { cssRadioGroupClasses } from './css-radio-group.js';
@@ -26,6 +28,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 +39,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 +50,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 +88,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);
@@ -133,6 +134,8 @@ ${cssDataClasses()}
 
 ${cssDateFieldClasses()}
 
+${cssCalendarButtonClasses()}
+
 ${cssChartClasses()}
 
 ${cssChromeClasses()}
@@ -145,6 +148,8 @@ ${cssSelectClasses()}
 
 ${cssActionMenuClasses()}
 
+${cssActionBarClasses()}
+
 ${cssSwitchClasses()}
 
 ${cssSpinnerClasses()}
@@ -173,5 +178,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,

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;