@scalewing/react 1.47.0 → 1.49.0

package/dist/css/css-components.js

@@ -1,13 +1,17 @@
 import { cssChartToneClasses } from './chart-tones.js';
 import { cssActionBarClasses } from './css-action-bar.js';
 import { cssActionMenuClasses } from './css-action-menu.js';
+import { cssCommandPaletteClasses } from './css-command-palette.js';
+import { cssContextSwitcherClasses } from './css-context-switcher.js';
 import { cssAccordionClasses } from './css-accordion.js';
 import { cssButtonClasses } from './css-button.js';
+import { cssButtonLinkClasses } from './css-button-link.js';
 import { cssCalendarButtonClasses } from './css-calendar-button.js';
 import { cssDateRangeClasses } from './css-date-range.js';
 import { cssFileFieldClasses } from './css-file-field.js';
 import { cssArticleClasses } from './css-article.js';
 import { cssDocumentViewerClasses } from './css-document-viewer.js';
+import { cssFixtureClasses } from './css-fixture.js';
 import { cssListClasses } from './css-list.js';
 import { cssMarkdownClasses } from './css-markdown.js';
 import { cssCountPillClasses } from './css-count-pill.js';
@@ -38,6 +42,8 @@ import { cssSplitClasses } from './css-split.js';
 import { cssSwitchClasses } from './css-switch.js';
 import { cssTextClasses } from './css-text.js';
 import { cssFontMonoClasses } from './css-font-mono.js';
+import { cssSkeletonClasses } from './css-skeleton.js';
+import { cssEmptyStateClasses } from './css-empty-state.js';
 import { cssSpinnerClasses } from './css-spinner.js';
 import { cssProgressClasses } from './css-progress.js';
 import { cssNoticeClasses } from './css-notice.js';
@@ -45,6 +51,10 @@ import { cssGlyphTileClasses } from './css-glyph-tile.js';
 import { cssTooltipClasses } from './css-tooltip.js';
 import { cssInfoTipClasses } from './css-info-tip.js';
 import { cssSeparatorClasses } from './css-separator.js';
+import { cssBandClasses } from './css-band.js';
+import { cssHeroClasses } from './css-hero.js';
+import { cssSiteFooterClasses } from './css-site-footer.js';
+import { cssSiteHeaderClasses } from './css-site-header.js';
 import { cssStatTileClasses } from './css-stat-tile.js';
 import { cssDescriptionListClasses } from './css-description-list.js';
 import { cssTabsClasses } from './css-tabs.js';
@@ -140,6 +150,8 @@ ${cssFontMonoClasses()}
 
 ${cssButtonClasses()}
 
+${cssButtonLinkClasses()}
+
 ${cssCheckboxClasses()}
 
 ${cssRadioGroupClasses()}
@@ -158,6 +170,8 @@ ${cssDateRangeClasses()}
 
 ${cssListClasses()}
 
+${cssFixtureClasses()}
+
 ${cssFileFieldClasses()}
 
 ${cssArticleClasses()}
@@ -186,6 +200,14 @@ ${cssChromeClasses()}
 
 ${cssSectionNavClasses()}
 
+${cssBandClasses()}
+
+${cssHeroClasses()}
+
+${cssSiteFooterClasses()}
+
+${cssSiteHeaderClasses()}
+
 ${cssAppShellClasses()}
 
 ${cssDialogClasses()}
@@ -204,6 +226,10 @@ ${cssSelectClasses()}
 
 ${cssActionMenuClasses()}
 
+${cssContextSwitcherClasses()}
+
+${cssCommandPaletteClasses()}
+
 ${cssComboboxClasses()}
 ${cssMultiSelectClasses()}
 
@@ -213,6 +239,10 @@ ${cssSwitchClasses()}
 
 ${cssSpinnerClasses()}
 
+${cssSkeletonClasses()}
+
+${cssEmptyStateClasses()}
+
 ${cssProgressClasses()}
 
 ${cssNoticeClasses()}

package/dist/css/css-context-switcher-trigger.d.ts

@@ -0,0 +1,15 @@
+export declare const contextSwitcherTriggerAppearances: readonly ["framed", "text", "pill", "icon"];
+/**
+ * How a ContextSwitcher's trigger looks: `framed` (the default) is the
+ * outlined control; `text` is its content and a chevron with no fill until
+ * hovered or open; `pill` is a rounded outlined pill at label weight;
+ * `icon` is a glyph alone in a round quiet button with no chevron.
+ */
+export type ContextSwitcherTriggerAppearance = (typeof contextSwitcherTriggerAppearances)[number];
+export declare const contextSwitcherWidths: readonly ["content", "full"];
+/** `full` makes the trigger fill its column, such as a sidebar's top. */
+export type ContextSwitcherWidth = (typeof contextSwitcherWidths)[number];
+/** The modifier class of an appearance, such as `sw-context-switcher-trigger-pill`. */
+export declare function contextSwitcherTriggerClass(appearance: ContextSwitcherTriggerAppearance): string;
+export declare function cssContextSwitcherTriggerClasses(): string;
+export declare function contextSwitcherTriggerClassCatalog(): string[];

package/dist/css/css-context-switcher-trigger.js

@@ -0,0 +1,175 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { chevronStroke } from './chevron.js';
+import { quietFill } from './quiet-fill.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const label = typographyVariants.label;
+export const contextSwitcherTriggerAppearances = [
+    'framed',
+    'text',
+    'pill',
+    'icon',
+];
+export const contextSwitcherWidths = ['content', 'full'];
+/** The modifier class of an appearance, such as `sw-context-switcher-trigger-pill`. */
+export function contextSwitcherTriggerClass(appearance) {
+    return `sw-context-switcher-trigger-${appearance}`;
+}
+const trigger = '.sw-context-switcher-trigger';
+const framed = `${trigger}.${contextSwitcherTriggerClass('framed')}`;
+const pill = `${trigger}.${contextSwitcherTriggerClass('pill')}`;
+const icon = `${trigger}.${contextSwitcherTriggerClass('icon')}`;
+/*
+ * Every trigger: a real button in label type in the text colour, its
+ * content (a mark and words, which may be two lines) taking the free space
+ * at the inline start, then the shared muted chevron pointing down; the sm
+ * control height, the 44 px target on a coarse pointer. A transparent
+ * border is kept for forced colours. The quiet fill shows while open and
+ * under a hovering pointer, so the open state is seen as well as read.
+ */
+function baseRules() {
+    return `.sw-context-switcher {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.sw-context-switcher-full {
+  display: flex;
+  width: 100%;
+}
+
+${trigger} {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: 500;
+  gap: var(--sw-space-2);
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  margin: 0;
+  max-width: 100%;
+  min-height: var(--sw-control-sm-min-height);
+  padding-block: var(--sw-space-1);
+  padding-inline: var(--sw-space-3) var(--sw-space-2);
+  text-align: start;
+}
+
+.sw-context-switcher-full ${trigger} {
+  width: 100%;
+}
+
+.sw-context-switcher-trigger-content {
+  align-items: center;
+  display: flex;
+  flex: 1 1 auto;
+  gap: var(--sw-space-2);
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+${trigger}:not(.${contextSwitcherTriggerClass('icon')})::after {
+  ${chevronStroke}
+  content: '';
+  flex: none;
+  transform: translateY(-25%) rotate(45deg);
+}
+
+${trigger}[aria-expanded='true'] {
+  background: ${quietFill};
+}
+
+@media (hover: hover) {
+  ${trigger}:hover {
+    background: ${quietFill};
+  }
+}
+
+${trigger}:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+@media ${coarsePointerQuery} {
+  ${trigger} { min-height: ${touchTarget}; }
+}`;
+}
+/*
+ * The appearances: `framed` the field's glass fill inside the border
+ * hairline; `pill` the same hairline on the surface, fully rounded, at
+ * label weight; `icon` a round button as wide as it is tall, the glyph
+ * centred and muted, no chevron. Two classes, so each outranks the base.
+ */
+function appearanceRules() {
+    return `${framed} {
+  background: var(--sw-glass-fill);
+  border-color: var(--sw-color-border);
+}
+
+${pill} {
+  background: var(--sw-color-surface);
+  border-color: var(--sw-color-border);
+  border-radius: var(--sw-radius-pill);
+  font-weight: ${label.fontWeight};
+}
+
+${framed}[aria-expanded='true'],
+${pill}[aria-expanded='true'] {
+  background: ${quietFill};
+}
+
+@media (hover: hover) {
+  ${framed}:hover,
+  ${pill}:hover {
+    background: ${quietFill};
+  }
+}
+
+${icon} {
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-muted);
+  justify-content: center;
+  min-width: var(--sw-control-sm-min-height);
+  padding: 0;
+}
+
+${icon} .sw-context-switcher-trigger-content {
+  flex: none;
+  justify-content: center;
+}
+
+${icon}[aria-expanded='true'] {
+  color: var(--sw-color-text);
+}
+
+@media ${coarsePointerQuery} {
+  ${icon} { min-width: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  ${trigger}::after { border-color: CanvasText; }
+  ${trigger}[aria-expanded='true'] { border-color: Highlight; }
+  ${icon} { color: ButtonText; }
+}`;
+}
+/* ContextSwitcher's trigger (see components/ContextSwitcher.tsx). */
+export function cssContextSwitcherTriggerClasses() {
+    return `${baseRules()}
+
+${appearanceRules()}`;
+}
+export function contextSwitcherTriggerClassCatalog() {
+    return [
+        'sw-context-switcher',
+        'sw-context-switcher-full',
+        'sw-context-switcher-trigger',
+        'sw-context-switcher-trigger-content',
+        ...contextSwitcherTriggerAppearances.map(contextSwitcherTriggerClass),
+    ];
+}

package/dist/css/css-context-switcher.d.ts

@@ -0,0 +1,4 @@
+/** The trigger's width, set on the open popup so it is never narrower. */
+export declare const contextSwitcherTriggerWidthVariable = "--sw-context-switcher-trigger-width";
+export declare function cssContextSwitcherClasses(): string;
+export declare function contextSwitcherClassCatalog(): string[];

package/dist/css/css-context-switcher.js

@@ -0,0 +1,219 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { checkStrokeIn } from './chevron.js';
+import { contextSwitcherTriggerClassCatalog, cssContextSwitcherTriggerClasses, } from './css-context-switcher-trigger.js';
+import { quietFill } from './quiet-fill.js';
+import { zIndex } from './stacking.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const caption = typographyVariants.caption;
+const label = typographyVariants.label;
+/* The popup's least width, a named geometry of this control. */
+const popupMinWidth = '15rem';
+/** The trigger's width, set on the open popup so it is never narrower. */
+export const contextSwitcherTriggerWidthVariable = '--sw-context-switcher-trigger-width';
+const viewportCap = 'calc(100% - var(--sw-space-2) - var(--sw-space-2))';
+/*
+ * The popup: a glass panel on the top layer beside the trigger (placed by
+ * script, as the menus are), at least 15rem and as wide as the trigger
+ * (its width set by the component), capped by the dialog width (or the
+ * trigger's, when wider) and the viewport. A column: the filter field,
+ * the listbox (the only part that scrolls), the empty words, the footer.
+ */
+function popupRules() {
+    return `.sw-context-switcher-popup {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-sm);
+  box-shadow: var(--sw-elevation-sm), 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;
+  gap: var(--sw-space-1);
+  inset: auto;
+  margin: 0;
+  max-height: ${viewportCap};
+  max-width: min(max(var(--sw-dialog-max), var(${contextSwitcherTriggerWidthVariable}, 0px)), ${viewportCap});
+  min-width: min(max(${popupMinWidth}, var(${contextSwitcherTriggerWidthVariable}, 0px)), ${viewportCap});
+  padding: var(--sw-space-1);
+  position: fixed;
+  width: max-content;
+  ${zIndex('popup')}
+}
+
+.sw-context-switcher-filter {
+  box-sizing: border-box;
+  flex: none;
+  margin: var(--sw-space-1);
+  width: calc(100% - var(--sw-space-2));
+}
+
+.sw-context-switcher-list {
+  flex: 1 1 auto;
+  max-height: var(--sw-select-max);
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.sw-context-switcher-list:focus {
+  outline: none;
+}
+
+.sw-context-switcher-heading {
+  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;
+  padding: var(--sw-space-2) var(--sw-space-2) var(--sw-space-1);
+}
+
+.sw-context-switcher-empty {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  margin: 0;
+  padding: var(--sw-space-2);
+}
+
+.sw-context-switcher-footer {
+  border-top: 1px solid var(--sw-color-border);
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  gap: var(--sw-space-1);
+  padding-top: var(--sw-space-1);
+}
+
+.sw-context-switcher-action-icon {
+  display: inline-flex;
+  flex: none;
+}`;
+}
+/*
+ * An option: the mark, the label over its muted detail, then the badge,
+ * the count pill and the current one's check at the inline end. The sm
+ * control height (44 px on a coarse pointer). The active row (the arrow
+ * keys' or the pointer's) takes the quiet fill, and an accent ring while
+ * the list itself has visible focus; the current one is at label weight
+ * with the accent check. Forced colours draw the active row in Highlight.
+ */
+function optionRules() {
+    return `.sw-context-switcher-option {
+  align-items: center;
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  gap: var(--sw-space-2);
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-height: var(--sw-control-sm-min-height);
+  overflow-wrap: anywhere;
+  padding: var(--sw-space-1) var(--sw-space-2);
+}
+
+.sw-context-switcher-option[data-active='true'] {
+  background: ${quietFill};
+}
+
+/* On the quiet fill the muted detail moves toward the text colour, keeping 4.5:1. */
+.sw-context-switcher-option[data-active='true'] .sw-context-switcher-detail {
+  color: color-mix(in srgb, var(--sw-color-muted) 70%, var(--sw-color-text));
+}
+
+.sw-context-switcher-list:focus-visible .sw-context-switcher-option[data-active='true'] {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-context-switcher-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-context-switcher-words {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sw-context-switcher-option[aria-selected='true'] .sw-context-switcher-label {
+  font-weight: ${label.fontWeight};
+}
+
+.sw-context-switcher-detail {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-context-switcher-count {
+  flex: none;
+}
+
+.sw-context-switcher-check {
+  ${checkStrokeIn('var(--sw-color-accent)')}
+  box-sizing: border-box;
+  flex: none;
+  height: var(--sw-space-3);
+  margin-inline: var(--sw-space-1);
+  transform: rotate(45deg);
+  width: var(--sw-space-2);
+}
+
+@media ${coarsePointerQuery} {
+  .sw-context-switcher-option { min-height: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  .sw-context-switcher-popup { border-color: CanvasText; }
+  .sw-context-switcher-option[data-active='true'] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
+  .sw-context-switcher-option[data-active='true'] .sw-context-switcher-detail { color: HighlightText; }
+  .sw-context-switcher-option[data-active='true'] .sw-badge,
+  .sw-context-switcher-option[data-active='true'] .sw-context-switcher-count { forced-color-adjust: auto; }
+  .sw-context-switcher-check { border-color: CanvasText; }
+  .sw-context-switcher-option[data-active='true'] .sw-context-switcher-check { border-color: HighlightText; }
+  .sw-context-switcher-footer { border-color: CanvasText; }
+}`;
+}
+/*
+ * ContextSwitcher (see components/ContextSwitcher.tsx): the trigger is
+ * `css-context-switcher-trigger.ts`; its count joins the shared pill
+ * (`css-count-pill.ts`).
+ */
+export function cssContextSwitcherClasses() {
+    return `${cssContextSwitcherTriggerClasses()}
+
+${popupRules()}
+
+${optionRules()}`;
+}
+export function contextSwitcherClassCatalog() {
+    return [
+        ...contextSwitcherTriggerClassCatalog(),
+        'sw-context-switcher-popup',
+        'sw-context-switcher-filter',
+        'sw-context-switcher-list',
+        'sw-context-switcher-heading',
+        'sw-context-switcher-option',
+        'sw-context-switcher-icon',
+        'sw-context-switcher-words',
+        'sw-context-switcher-label',
+        'sw-context-switcher-detail',
+        'sw-context-switcher-check',
+        'sw-context-switcher-empty',
+        'sw-context-switcher-footer',
+        'sw-context-switcher-action-icon',
+        // sw-context-switcher-count is the shared pill's (css-count-pill.ts).
+    ];
+}

package/dist/css/css-count-pill.d.ts

@@ -1,5 +1,5 @@
-/** The pills that take a tone modifier: NavCount's and AppShell's item count. */
-declare const tonedPills: readonly ["sw-nav-count", "sw-app-shell-count"];
+/** The pills that take a tone modifier: all but SectionNav's. */
+declare const tonedPills: readonly ["sw-nav-count", "sw-app-shell-count", "sw-context-switcher-count"];
 /** The tones other than the pill's own danger. */
 declare const pillTones: readonly ["accent", "warning"];
 /** A toned pill's modifier class, such as `sw-nav-count-warning`. */

package/dist/css/css-count-pill.js

@@ -1,14 +1,22 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { toneTintFill, toneTintInk } from './tone-tint.js';
 const caption = typographyVariants.caption;
-/** The counts drawn as the pill: SectionNav's, a Nav word's and AppShell's. */
+/**
+ * The counts drawn as the pill: SectionNav's, a Nav word's, AppShell's and
+ * a ContextSwitcher option's.
+ */
 const pills = [
     'sw-section-nav-count',
     'sw-nav-count',
     'sw-app-shell-count',
+    'sw-context-switcher-count',
+];
+/** The pills that take a tone modifier: all but SectionNav's. */
+const tonedPills = [
+    'sw-nav-count',
+    'sw-app-shell-count',
+    'sw-context-switcher-count',
 ];
-/** The pills that take a tone modifier: NavCount's and AppShell's item count. */
-const tonedPills = ['sw-nav-count', 'sw-app-shell-count'];
 /** The tones other than the pill's own danger. */
 const pillTones = ['accent', 'warning'];
 /** A toned pill's modifier class, such as `sw-nav-count-warning`. */

package/dist/css/css-empty-state.d.ts

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

package/dist/css/css-empty-state.js

@@ -0,0 +1,77 @@
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+/*
+ * EmptyState: a centred column on the surface inside a dashed hairline
+ * (the md radius), spacing step 8 above and below and step 4 at the sides,
+ * its parts a step 3 apart. The glyph sits in a decorative step-8 square of
+ * the subtle fill in the muted colour, a direct-child SVG drawn at step 5.
+ * The title and line keep a readable measure and wrap; a long word breaks.
+ * The actions are a centred row that wraps, a step 2 apart, each Button a
+ * 44 px target on a coarse pointer. Forced colours keep the dashed edge in
+ * the system's border colour and draw the glyph in CanvasText.
+ */
+export function cssEmptyStateClasses() {
+    return `.sw-empty-state {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border: 1px dashed var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  padding: var(--sw-space-8) var(--sw-space-4);
+  text-align: center;
+  width: 100%;
+}
+
+.sw-empty-state-icon {
+  align-items: center;
+  background: var(--sw-color-subtle);
+  border-radius: var(--sw-radius-md);
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  flex: none;
+  height: var(--sw-space-8);
+  justify-content: center;
+  width: var(--sw-space-8);
+}
+
+.sw-empty-state-icon > svg {
+  height: var(--sw-space-5);
+  width: var(--sw-space-5);
+}
+
+.sw-empty-state-title,
+.sw-empty-state-description {
+  margin: 0;
+  max-width: var(--sw-reading-max);
+}
+
+.sw-empty-state-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  justify-content: center;
+  margin-top: var(--sw-space-1);
+}
+
+@media ${coarsePointerQuery} {
+  .sw-empty-state-actions .sw-button { min-height: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  .sw-empty-state { border-color: CanvasText; }
+  .sw-empty-state-icon { color: CanvasText; }
+}`;
+}
+export function emptyStateClassCatalog() {
+    return [
+        'sw-empty-state',
+        'sw-empty-state-icon',
+        'sw-empty-state-title',
+        'sw-empty-state-description',
+        'sw-empty-state-actions',
+    ];
+}

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

@@ -0,0 +1,5 @@
+export declare const fixtureCenterKinds: readonly ["time", "score"];
+/** `time` is a kickoff time in a grey chip; `score` is bold figures. */
+export type FixtureCenterKind = (typeof fixtureCenterKinds)[number];
+export declare function cssFixtureClasses(): string;
+export declare function fixtureClassCatalog(): string[];