@scalewing/react 1.47.0 → 1.48.0

package/dist/css/css-command-palette-trigger.js

@@ -0,0 +1,88 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { quietFill } from './quiet-fill.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const label = typographyVariants.label;
+/* The full trigger's least width, a named geometry of this control. */
+const triggerMinWidth = '12rem';
+const trigger = '.sw-command-palette-trigger';
+const compact = `${trigger}.sw-command-palette-trigger-compact`;
+/*
+ * The trigger: a search-looking pill (the surface inside the border
+ * hairline, fully rounded) holding the glyph, the placeholder words in the
+ * muted colour taking the free space, and the key hint at the end; the sm
+ * control height, the 44 px target on a coarse pointer. `compact` is the
+ * glyph alone in a round quiet button. Hover takes the quiet fill.
+ */
+export function cssCommandPaletteTriggerClasses() {
+    return `${trigger} {
+  align-items: center;
+  appearance: none;
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  color: var(--sw-color-muted);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: 400;
+  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);
+  min-width: min(${triggerMinWidth}, 100%);
+  padding-inline: var(--sw-space-3) var(--sw-space-2);
+  text-align: start;
+}
+
+.sw-command-palette-trigger-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-command-palette-trigger-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (hover: hover) {
+  ${trigger}:hover { background: ${quietFill}; color: var(--sw-color-text); }
+}
+
+${trigger}:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+${compact} {
+  background: transparent;
+  border-color: transparent;
+  justify-content: center;
+  min-width: var(--sw-control-sm-min-height);
+  padding: 0;
+}
+
+@media ${coarsePointerQuery} {
+  ${trigger} { min-height: ${touchTarget}; }
+  ${compact} { min-width: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  ${trigger} { color: ButtonText; }
+}`;
+}
+export function commandPaletteTriggerClassCatalog() {
+    return [
+        'sw-command-palette-trigger',
+        'sw-command-palette-trigger-compact',
+        'sw-command-palette-trigger-icon',
+        'sw-command-palette-trigger-text',
+        'sw-command-palette-key',
+    ];
+}

package/dist/css/css-command-palette.d.ts

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

package/dist/css/css-command-palette.js

@@ -0,0 +1,209 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+import { cssCommandPaletteKeyClasses } from './css-command-palette-key.js';
+import { commandPaletteTriggerClassCatalog, cssCommandPaletteTriggerClasses, } from './css-command-palette-trigger.js';
+import { quietFill } from './quiet-fill.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const body = typographyVariants.body;
+const caption = typographyVariants.caption;
+const label = typographyVariants.label;
+/* The palette's width, a named geometry of this control. */
+const paletteWidth = '40rem';
+/* Its distance from the window's top: a tenth of the height, at least space-2. */
+const paletteTop = 'max(var(--sw-space-2), 10vh)';
+const fromMd = breakpointQuery('from', 'md');
+/*
+ * The palette: a modal dialog on the top layer near the window's top (not
+ * centred, so results grow downward), glass like Dialog, 40rem wide (the
+ * window less space-2 each side on a phone). Its body is a column: the
+ * field, the listbox (the only part that scrolls), the message, the hint.
+ */
+function frameRules() {
+    return `.sw-command-palette {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-lg);
+  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);
+  margin: var(--sw-space-2) auto auto;
+  max-height: calc(100dvh - 2 * var(--sw-space-2));
+  max-width: calc(100% - 2 * var(--sw-space-2));
+  overflow: hidden;
+  padding: 0;
+  width: ${paletteWidth};
+}
+
+@media ${fromMd} {
+  .sw-command-palette {
+    margin-top: ${paletteTop};
+    max-height: calc(100dvh - ${paletteTop} - var(--sw-space-8));
+  }
+}
+
+.sw-command-palette::backdrop {
+  background: color-mix(in srgb, var(--sw-color-text) 28%, transparent);
+}
+
+.sw-command-palette-body {
+  display: flex;
+  flex-direction: column;
+  max-height: inherit;
+}
+
+[data-theme] input.sw-command-palette-field {
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--sw-color-border);
+  border-radius: 0;
+  box-sizing: border-box;
+  flex: none;
+  font-size: ${body.fontSize}px;
+  letter-spacing: ${body.letterSpacing}px;
+  line-height: ${body.lineHeight}px;
+  min-height: ${touchTarget};
+  padding: var(--sw-space-3) var(--sw-space-4);
+  width: 100%;
+}
+
+[data-theme] input.sw-command-palette-field:focus,
+[data-theme] input.sw-command-palette-field:focus-visible {
+  border-bottom-color: var(--sw-color-accent);
+  box-shadow: inset 0 -1px 0 var(--sw-color-accent);
+  outline: none;
+}
+
+.sw-command-palette-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--sw-space-1) var(--sw-space-2);
+}
+
+.sw-command-palette-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-command-palette-message,
+.sw-command-palette-hint {
+  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-3) var(--sw-space-4);
+}
+
+.sw-command-palette-hint {
+  border-top: 1px solid var(--sw-color-border);
+  flex: none;
+}`;
+}
+/*
+ * A result: its mark, its label over its muted detail, and on the active
+ * row (`aria-selected`, the arrow keys' or the pointer's) the quiet fill
+ * and the Enter key cap at the end. The sm control height, 44 px on a
+ * coarse pointer. On the fill the detail moves toward the text colour to
+ * keep 4.5:1. Forced colours draw the active row in Highlight.
+ */
+function itemRules() {
+    return `.sw-command-palette-item {
+  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-3);
+  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-command-palette-item[aria-selected='true'] {
+  background: ${quietFill};
+}
+
+.sw-command-palette-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-command-palette-words {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sw-command-palette-label {
+  font-weight: 500;
+}
+
+.sw-command-palette-detail {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-command-palette-item[aria-selected='true'] .sw-command-palette-detail {
+  color: color-mix(in srgb, var(--sw-color-muted) 70%, var(--sw-color-text));
+}
+
+@media ${coarsePointerQuery} {
+  .sw-command-palette-item { min-height: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  .sw-command-palette { border-color: CanvasText; }
+  .sw-command-palette-item[aria-selected='true'] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
+  .sw-command-palette-item[aria-selected='true'] .sw-command-palette-detail,
+  .sw-command-palette-item[aria-selected='true'] .sw-command-palette-key { border-color: HighlightText; color: HighlightText; }
+  [data-theme] input.sw-command-palette-field:focus-visible { border-bottom-color: Highlight; box-shadow: inset 0 -1px 0 Highlight; }
+}`;
+}
+/*
+ * CommandPalette and CommandPaletteTrigger (see components/CommandPalette.tsx):
+ * the trigger is `css-command-palette-trigger.ts`, the shared key cap
+ * `css-command-palette-key.ts`.
+ */
+export function cssCommandPaletteClasses() {
+    return `${cssCommandPaletteKeyClasses()}
+
+${cssCommandPaletteTriggerClasses()}
+
+${frameRules()}
+
+${itemRules()}`;
+}
+export function commandPaletteClassCatalog() {
+    return [
+        ...commandPaletteTriggerClassCatalog(),
+        'sw-command-palette',
+        'sw-command-palette-body',
+        'sw-command-palette-field',
+        'sw-command-palette-list',
+        'sw-command-palette-heading',
+        'sw-command-palette-item',
+        'sw-command-palette-icon',
+        'sw-command-palette-words',
+        'sw-command-palette-label',
+        'sw-command-palette-detail',
+        'sw-command-palette-message',
+        'sw-command-palette-hint',
+    ];
+}

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,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';
@@ -45,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';
@@ -140,6 +148,8 @@ ${cssFontMonoClasses()}
 
 ${cssButtonClasses()}
 
+${cssButtonLinkClasses()}
+
 ${cssCheckboxClasses()}
 
 ${cssRadioGroupClasses()}
@@ -158,6 +168,8 @@ ${cssDateRangeClasses()}
 
 ${cssListClasses()}
 
+${cssFixtureClasses()}
+
 ${cssFileFieldClasses()}
 
 ${cssArticleClasses()}
@@ -186,6 +198,12 @@ ${cssChromeClasses()}
 
 ${cssSectionNavClasses()}
 
+${cssBandClasses()}
+
+${cssSiteFooterClasses()}
+
+${cssSiteHeaderClasses()}
+
 ${cssAppShellClasses()}
 
 ${cssDialogClasses()}
@@ -204,6 +222,10 @@ ${cssSelectClasses()}
 
 ${cssActionMenuClasses()}
 
+${cssContextSwitcherClasses()}
+
+${cssCommandPaletteClasses()}
+
 ${cssComboboxClasses()}
 ${cssMultiSelectClasses()}
 
@@ -213,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[];