@scalewing/react 1.46.0 → 1.48.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';
@@ -21,6 +25,7 @@ import { cssCheckboxClasses } from './css-checkbox.js';
 import { cssRadioGroupClasses } from './css-radio-group.js';
 import { cssChromeClasses } from './css-chrome.js';
 import { cssSectionNavClasses } from './css-section-nav.js';
+import { cssAppShellClasses } from './css-app-shell.js';
 import { cssDataClasses } from './css-data.js';
 import { cssSegmentedClasses } from './css-segmented.js';
 import { cssTableClasses } from './css-table.js';
@@ -37,6 +42,7 @@ 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 { cssSpinnerClasses } from './css-spinner.js';
 import { cssProgressClasses } from './css-progress.js';
 import { cssNoticeClasses } from './css-notice.js';
@@ -44,6 +50,9 @@ 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 { 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';
@@ -139,6 +148,8 @@ ${cssFontMonoClasses()}
 
 ${cssButtonClasses()}
 
+${cssButtonLinkClasses()}
+
 ${cssCheckboxClasses()}
 
 ${cssRadioGroupClasses()}
@@ -157,6 +168,8 @@ ${cssDateRangeClasses()}
 
 ${cssListClasses()}
 
+${cssFixtureClasses()}
+
 ${cssFileFieldClasses()}
 
 ${cssArticleClasses()}
@@ -185,6 +198,14 @@ ${cssChromeClasses()}
 
 ${cssSectionNavClasses()}
 
+${cssBandClasses()}
+
+${cssSiteFooterClasses()}
+
+${cssSiteHeaderClasses()}
+
+${cssAppShellClasses()}
+
 ${cssDialogClasses()}
 
 ${cssDialogFrameClasses()}
@@ -201,6 +222,10 @@ ${cssSelectClasses()}
 
 ${cssActionMenuClasses()}
 
+${cssContextSwitcherClasses()}
+
+${cssCommandPaletteClasses()}
+
 ${cssComboboxClasses()}
 ${cssMultiSelectClasses()}
 
@@ -210,6 +235,8 @@ ${cssSwitchClasses()}
 
 ${cssSpinnerClasses()}
 
+${cssSkeletonClasses()}
+
 ${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,2 +1,9 @@
+/** 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`. */
+export declare function countToneClass(pill: (typeof tonedPills)[number], tone: (typeof pillTones)[number]): string;
 export declare function cssCountPillClasses(): string;
 export declare function countPillClassCatalog(): string[];
+export {};

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

@@ -1,16 +1,41 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { toneTintFill, toneTintInk } from './tone-tint.js';
 const caption = typographyVariants.caption;
-/** The counts drawn as the pill: SectionNav's and a Nav word's. */
-const pills = ['sw-section-nav-count', 'sw-nav-count'];
-/** NavCount's news tone, a modifier of its pill. */
-const accentPill = 'sw-nav-count-accent';
+/**
+ * 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 tones other than the pill's own danger. */
+const pillTones = ['accent', 'warning'];
+/** A toned pill's modifier class, such as `sw-nav-count-warning`. */
+export function countToneClass(pill, tone) {
+    return `${pill}-${tone}`;
+}
+function tonedSelector(tone) {
+    return tonedPills
+        .map((pill) => `[data-theme] .${pill}.${countToneClass(pill, tone)}`)
+        .join(',\n');
+}
 /*
  * A count after a destination's words (a number waiting there, such as
  * tasks to do) is a filled pill: the danger colour with its on-colour
  * figures (4.5:1 in every palette, as a danger Button's label), caption
  * size at weight 700, a space-5 less space-1 (20) high and at least as
- * wide. Forced colours draw its edge. SectionNav's item count and Nav's
- * NavCount share it, so an area's count reads the same in both.
+ * wide. Forced colours draw its edge. SectionNav's item count, Nav's
+ * NavCount and AppShell's item count share it, so an area's count reads
+ * the same in each.
  */
 export function cssCountPillClasses() {
     const selector = pills.map((name) => `[data-theme] .${name}`).join(',\n');
@@ -33,16 +58,26 @@ export function cssCountPillClasses() {
 }
 
 /*
- * NavCount's \`tone="accent"\`: a count that is news, not work waiting (what
- * was added since the person last looked), is the accent fill with its
- * on-colour figures (4.5:1 in every palette, as a primary Button's label).
- * One class more specific than the pill, so it wins in any order.
+ * \`tone="accent"\` (NavCount, an AppShell item's \`countTone\`): a count that
+ * is news, not work waiting (what was added since the person last looked),
+ * is the accent fill with its on-colour figures (4.5:1 in every palette, as
+ * a primary Button's label). \`tone="warning"\`: work that needs the person
+ * but is not urgent is amber, the warning tint with the warning ink (a
+ * warning Notice's, 4.5:1 on the tint in every palette) inside the warning
+ * edge a warning Badge draws. One class more specific than the pill, so
+ * each wins in any order.
  */
-[data-theme] .sw-nav-count.${accentPill} {
+${tonedSelector('accent')} {
   background: var(--sw-color-accent);
   color: var(--sw-color-onAccent);
 }
 
+${tonedSelector('warning')} {
+  background: ${toneTintFill('warning')};
+  border: 1px solid var(--sw-color-warning);
+  color: ${toneTintInk('warning')};
+}
+
 /*
  * A Nav link holding a count lays out as SectionNav's link does: the words
  * and the pill centred on one line a space-2 apart (the space text node
@@ -63,5 +98,8 @@ export function cssCountPillClasses() {
 }`;
 }
 export function countPillClassCatalog() {
-    return [...pills, accentPill];
+    return [
+        ...pills,
+        ...tonedPills.flatMap((pill) => pillTones.map((tone) => countToneClass(pill, tone))),
+    ];
 }

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[];