@scalewing/react 1.21.0 → 1.23.0

package/dist/css/css-section-nav.js

@@ -0,0 +1,120 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery, breakpoints, } from './breakpoints.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const label = typographyVariants.label;
+export function sectionNavVerticalClass(breakpoint) {
+    return `sw-section-nav-vertical-from-${breakpoint}`;
+}
+/*
+ * From the breakpoint up the row becomes a side list: one item per line,
+ * the full width of its column, the current one marked by an accent bar at
+ * its inline start instead of the underline.
+ */
+function verticalRules() {
+    return breakpoints
+        .map((breakpoint) => {
+        const nav = `.${sectionNavVerticalClass(breakpoint)}`;
+        return `@media ${breakpointQuery('from', breakpoint)} {
+  ${nav} .sw-section-nav-list {
+    border-bottom: 0;
+    flex-direction: column;
+    gap: var(--sw-space-1);
+  }
+
+  ${nav} .sw-section-nav-link {
+    border-bottom: 0;
+    border-inline-start: 2px solid transparent;
+    border-radius: 0 var(--sw-radius-sm) var(--sw-radius-sm) 0;
+    margin-bottom: 0;
+    width: 100%;
+  }
+
+  ${nav} .sw-section-nav-link:dir(rtl) {
+    border-radius: var(--sw-radius-sm) 0 0 var(--sw-radius-sm);
+  }
+
+  ${nav} .sw-section-nav-link[aria-current] {
+    border-inline-start-color: var(--sw-color-accent);
+  }
+}`;
+    })
+        .join('\n\n');
+}
+/*
+ * A section navigation is quieter than a workspace's: label-size words in
+ * the muted color with no fill, the current item in the text color over an
+ * accent underline on the row's hairline (as a tab strip marks its tab),
+ * and a soft fill on hover. A link that is the current page or holds it is
+ * marked the same way. A coarse pointer gets the 44 px target. The link
+ * rules start at the canvas (`[data-theme]`) to outrank its accent links.
+ */
+export function cssSectionNavClasses() {
+    return `.sw-section-nav-list {
+  border-bottom: 1px solid var(--sw-color-border);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-1) var(--sw-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+[data-theme] .sw-section-nav-link {
+  align-items: center;
+  border-bottom: 2px solid transparent;
+  border-radius: var(--sw-radius-sm) var(--sw-radius-sm) 0 0;
+  box-sizing: border-box;
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  gap: var(--sw-space-2);
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  margin-bottom: -1px;
+  min-height: var(--sw-control-sm-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+  text-decoration: none;
+}
+
+[data-theme] .sw-section-nav-link:hover {
+  background: color-mix(in srgb, var(--sw-color-muted) 12%, transparent);
+  color: var(--sw-color-text);
+}
+
+[data-theme] .sw-section-nav-link:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+[data-theme] .sw-section-nav-link[aria-current] {
+  border-bottom-color: var(--sw-color-accent);
+  color: var(--sw-color-text);
+}
+
+.sw-section-nav-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+${verticalRules()}
+
+@media ${coarsePointerQuery} {
+  [data-theme] .sw-section-nav-link { min-height: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  [data-theme] .sw-section-nav-link { color: LinkText; }
+  [data-theme] .sw-section-nav-link[aria-current] { border-color: Highlight; color: CanvasText; }
+}`;
+}
+export function sectionNavClassCatalog() {
+    return [
+        'sw-section-nav',
+        'sw-section-nav-list',
+        'sw-section-nav-link',
+        'sw-section-nav-icon',
+        ...breakpoints.map(sectionNavVerticalClass),
+    ];
+}

package/dist/css/css-table-layout.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The sized column widths, in rem so a header in caption type and a cell in
+ * body type agree: `xs` holds a count or a short code, `sm` a short date or
+ * an amount, `md` a date with its year, `lg` a date and a time, `xl` a name
+ * or a short phrase. A cell's padding is outside the width.
+ */
+export declare const tableColumnSizes: {
+    readonly xs: 4;
+    readonly sm: 6;
+    readonly md: 8;
+    readonly lg: 12;
+    readonly xl: 16;
+};
+export type TableColumnSize = keyof typeof tableColumnSizes;
+/** A column's width: shrink to its content on one line, or a size. */
+export type TableColumnWidth = 'min' | TableColumnSize;
+export declare const tableColumnWidths: readonly TableColumnWidth[];
+export declare function tableColumnWidthClass(width: TableColumnWidth): string;
+export declare function cssTableLayoutClasses(): string;
+export declare function tableLayoutClassCatalog(): string[];

package/dist/css/css-table-layout.js

@@ -0,0 +1,59 @@
+/**
+ * The sized column widths, in rem so a header in caption type and a cell in
+ * body type agree: `xs` holds a count or a short code, `sm` a short date or
+ * an amount, `md` a date with its year, `lg` a date and a time, `xl` a name
+ * or a short phrase. A cell's padding is outside the width.
+ */
+export const tableColumnSizes = {
+    xs: 4,
+    sm: 6,
+    md: 8,
+    lg: 12,
+    xl: 16,
+};
+export const tableColumnWidths = [
+    'min',
+    ...Object.keys(tableColumnSizes),
+];
+export function tableColumnWidthClass(width) {
+    return `sw-table-col-${width}`;
+}
+/*
+ * A fixed table sizes its columns from the header row only, so a filter
+ * that hides a row moves no column. `min` is the one-percent idiom: an auto
+ * table gives the column the least room its content allows, on one line; a
+ * fixed table never measures content, so there `min` is no width at all
+ * and the column shares what is left. `top` starts every cell of a tall row
+ * on its first line.
+ */
+export function cssTableLayoutClasses() {
+    const sizes = Object.entries(tableColumnSizes)
+        .map(([size, rem]) => `.sw-table .${tableColumnWidthClass(size)} { width: ${rem}rem; }`)
+        .join('\n');
+    return `.sw-table-fixed {
+  table-layout: fixed;
+}
+
+.sw-table .sw-table-col-min {
+  white-space: nowrap;
+  width: 1%;
+}
+
+.sw-table-fixed .sw-table-col-min {
+  width: auto;
+}
+
+${sizes}
+
+.sw-table.sw-table-top th,
+.sw-table.sw-table-top td {
+  vertical-align: top;
+}`;
+}
+export function tableLayoutClassCatalog() {
+    return [
+        'sw-table-fixed',
+        'sw-table-top',
+        ...tableColumnWidths.map(tableColumnWidthClass),
+    ];
+}

package/dist/css/css-table-sort.d.ts

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

package/dist/css/css-table-sort.js

@@ -0,0 +1,105 @@
+import { chevronStroke } from './chevron.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+/*
+ * A sortable header's button keeps the header's own text style (caption,
+ * semibold, muted): it is the column's name that can be pressed, not a link
+ * or a ghost button. The sorted column's name is the text color. The glyph
+ * is the stroked chevron Accordion and Select draw: up for ascending, down
+ * for descending, and a quieter up-and-down pair on a column that can be
+ * sorted but is not. In an end-aligned (numeric) column the glyph goes
+ * before the name, so the name's end lines up with the figures under it.
+ */
+function glyphRules() {
+    const chevron = `content: '';
+  ${chevronStroke.replaceAll('\n', '\n  ')}
+  border-color: currentColor;
+  display: block;`;
+    return `.sw-table-sort-glyph {
+  align-items: center;
+  display: inline-flex;
+  flex: none;
+  flex-direction: column;
+  justify-content: center;
+  min-height: var(--sw-space-4);
+  width: var(--sw-space-2);
+}
+
+.sw-table-sort-ascending::before,
+.sw-table-sort-none::before {
+  ${chevron}
+  margin-top: calc(var(--sw-space-1) / 2);
+  transform: rotate(-135deg);
+}
+
+.sw-table-sort-descending::after,
+.sw-table-sort-none::after {
+  ${chevron}
+  margin-bottom: calc(var(--sw-space-1) / 2);
+  transform: rotate(45deg);
+}
+
+.sw-table-sort-none {
+  opacity: var(--sw-quiet-opacity);
+}
+
+.sw-table-sort-none::before,
+.sw-table-sort-none::after {
+  height: calc(var(--sw-space-2) * 0.75);
+  width: calc(var(--sw-space-2) * 0.75);
+}`;
+}
+export function cssTableSortClasses() {
+    return `.sw-table-sort {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sw-radius-sm);
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  gap: var(--sw-space-1);
+  letter-spacing: inherit;
+  /* A step of room for the focus ring, taken back so the name stays on the cell's edge. */
+  margin-inline: calc(-1 * var(--sw-space-1));
+  min-height: var(--sw-control-xs-min-height);
+  padding: 0 var(--sw-space-1);
+  text-align: inherit;
+}
+
+.sw-table .sw-table-numeric .sw-table-sort,
+.sw-table .sw-table-end .sw-table-sort {
+  flex-direction: row-reverse;
+}
+
+.sw-table-sort:hover,
+.sw-table th[aria-sort] .sw-table-sort {
+  color: var(--sw-color-text);
+}
+
+.sw-table-sort:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+${glyphRules()}
+
+@media ${coarsePointerQuery} {
+  .sw-table-sort { min-height: ${touchTarget}; }
+}
+
+@media (forced-colors: active) {
+  .sw-table-sort { color: ButtonText; }
+  .sw-table-sort-none { opacity: 1; }
+}`;
+}
+export function tableSortClassCatalog() {
+    return [
+        'sw-table-sort',
+        'sw-table-sort-glyph',
+        'sw-table-sort-ascending',
+        'sw-table-sort-descending',
+        'sw-table-sort-none',
+    ];
+}

package/dist/css/css-table.js

@@ -1,5 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { scrollRegionRules } from './css-scroll-region.js';
+import { cssTableLayoutClasses, tableLayoutClassCatalog, } from './css-table-layout.js';
+import { cssTableSortClasses, tableSortClassCatalog, } from './css-table-sort.js';
 import { zIndex } from './stacking.js';
 const caption = typographyVariants.caption;
 /*
@@ -83,6 +85,10 @@ export function cssTableClasses() {
   padding: var(--sw-space-1) var(--sw-space-2);
 }
 
+${cssTableLayoutClasses()}
+
+${cssTableSortClasses()}
+
 ${selectedRowRules()}`;
 }
 export function tableClassCatalog() {
@@ -95,5 +101,7 @@ export function tableClassCatalog() {
         'sw-table-sticky',
         'sw-table-compact',
         'sw-table-row-selected',
+        ...tableLayoutClassCatalog(),
+        ...tableSortClassCatalog(),
     ];
 }

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

@@ -1,4 +1,9 @@
 export declare const stuckCanvasShare = 0.9;
-/** The tab strip: a scrollable row of tabs with an accent underline under the current one. */
+/**
+ * The tab strip: a scrollable row of tabs with an accent underline under the
+ * current one. While labels are scrolled out past an inline edge, that edge
+ * draws the scroll region's shade (its scrollbar is hidden), so a phone shows
+ * that the strip goes on.
+ */
 export declare function cssTabsClasses(): string;
 export declare function tabsClassCatalog(): string[];

package/dist/css/css-tabs.js

@@ -1,4 +1,5 @@
 import { typographyVariants } from '@scalewing/tokens';
+import { scrollShadeRules } from './css-scroll-region.js';
 import { zIndex } from './stacking.js';
 const label = typographyVariants.label;
 /*
@@ -32,7 +33,12 @@ function stickyRules() {
   }
 }`;
 }
-/** The tab strip: a scrollable row of tabs with an accent underline under the current one. */
+/**
+ * The tab strip: a scrollable row of tabs with an accent underline under the
+ * current one. While labels are scrolled out past an inline edge, that edge
+ * draws the scroll region's shade (its scrollbar is hidden), so a phone shows
+ * that the strip goes on.
+ */
 export function cssTabsClasses() {
     return `.sw-tabs {
   border-bottom: 1px solid var(--sw-color-border);
@@ -87,6 +93,8 @@ export function cssTabsClasses() {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
+${scrollShadeRules('.sw-tabs')}
+
 ${stickyRules()}
 
 @media (forced-colors: active) {

package/dist/css/css-tooltip.js

@@ -16,11 +16,14 @@ export function cssTooltipClasses() {
   font-family: var(--sw-font-sans);
   font-size: ${caption.fontSize}px;
   line-height: ${caption.lineHeight}px;
-  inset-block-start: calc(100% + var(--sw-space-1));
-  inset-inline-start: 0;
-  max-width: min(18rem, calc(100vw - 2 * var(--sw-space-3)));
+  /* The popover layer's inset: 0 would ignore the placed left in right-to-left. */
+  inset: auto;
+  margin: 0;
+  /* On the top layer 100% is the viewport without a classic scrollbar. */
+  max-width: min(18rem, calc(100% - 2 * var(--sw-space-2)));
+  overflow: visible;
   padding: var(--sw-space-2);
-  position: absolute;
+  position: fixed;
   width: max-content;
   ${zIndex('popup')}
 }

package/dist/css/stylesheet.js

@@ -28,6 +28,7 @@ import { dataClassCatalog } from './css-data.js';
 import { segmentedClassCatalog } from './css-segmented.js';
 import { tableClassCatalog } from './css-table.js';
 import { chromeClassCatalog } from './css-chrome.js';
+import { sectionNavClassCatalog } from './css-section-nav.js';
 import { dialogClassCatalog } from './css-dialog.js';
 import { selectClassCatalog } from './css-select.js';
 import { splitClassCatalog } from './css-split.js';
@@ -57,6 +58,7 @@ export function utilityClassCatalog() {
         ...scrollRegionClassCatalog(),
         ...chartClassCatalog(),
         ...chromeClassCatalog(),
+        ...sectionNavClassCatalog(),
         ...dialogClassCatalog(),
         ...accordionClassCatalog(),
         ...selectClassCatalog(),

package/dist/date-only.d.ts

@@ -24,3 +24,15 @@ export declare function isOutsideDateRange(value: string, min?: string, max?: st
 export declare function clampDateOnly(value: string, min?: string, max?: string): string;
 /** The date on the device's local wall calendar, never converted through UTC. */
 export declare function todayDateOnly(now?: Date): string;
+/** A span of calendar days, both ends included. */
+export type DateOnlyRange = {
+    start: string;
+    end: string;
+};
+/** Validates a range: two valid dates, the start not after the end. */
+export declare function assertDateRange(range: DateOnlyRange | undefined): void;
+/**
+ * Where a day sits in a range: its start, its end, both (a one-day range),
+ * inside it, or out.
+ */
+export declare function dayInRange(value: string, range: DateOnlyRange | undefined): 'only' | 'start' | 'end' | 'inside' | null;

package/dist/date-only.js

@@ -83,3 +83,27 @@ export function todayDateOnly(now = new Date()) {
         day: now.getDate(),
     });
 }
+/** Validates a range: two valid dates, the start not after the end. */
+export function assertDateRange(range) {
+    if (range === undefined)
+        return;
+    assertDateOnly('range.start', range.start);
+    assertDateOnly('range.end', range.end);
+    if (range.start > range.end)
+        throw new RangeError('range.start must not be after range.end');
+}
+/**
+ * Where a day sits in a range: its start, its end, both (a one-day range),
+ * inside it, or out.
+ */
+export function dayInRange(value, range) {
+    if (!range || value < range.start || value > range.end)
+        return null;
+    if (range.start === range.end)
+        return 'only';
+    if (value === range.start)
+        return 'start';
+    if (value === range.end)
+        return 'end';
+    return 'inside';
+}

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { Accordion } from './components/Accordion.js';
 export type { AccordionProps, AccordionSize } from './components/Accordion.js';
 export { Switch, type SwitchProps } from './components/Switch.js';
 export { DateField, type DateFieldLabels, type DateFieldProps, type WeekStart, } from './components/DateField.js';
-export { CalendarButton, type CalendarButtonLabels, type CalendarButtonProps, } from './components/CalendarButton.js';
+export { CalendarButton, type CalendarButtonLabels, type CalendarButtonProps, type CalendarButtonRange, } from './components/CalendarButton.js';
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
 export { Progress, type ProgressProps, type ProgressTone, } from './components/Progress.js';
@@ -27,16 +27,18 @@ export { Inline, type InlineProps } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export type { SplitProps } from './components/Split.js';
 export { Nav, type NavProps } from './components/Nav.js';
+export { SectionNav, type SectionNavItem, type SectionNavProps, } from './components/SectionNav.js';
 export { SegmentedControl, type SegmentedControlProps, type SegmentedControlVariant, type SegmentedItem, } from './components/SegmentedControl.js';
 export { Select } from './components/Select.js';
 export type { SelectAction, SelectOption, SelectProps, SelectWidth, } from './components/Select.js';
 export { Stack, type Align, type Justify, type StackProps, } from './components/Stack.js';
-export { Table, TableBody, TableCell, TableHeader, TableRow, type TableBodyProps, type TableCellProps, type TableDensity, type TableHeaderProps, type TableProps, type TableRowProps, } from './components/Table.js';
+export { Table, TableBody, TableCell, TableHeader, TableRow, type TableBodyProps, type TableCellProps, type TableColumnWidth, type TableDensity, type TableHeaderProps, type TableLayout, type TableProps, type TableRowProps, type TableSort, type TableVerticalAlign, } from './components/Table.js';
 export { Text, type TextAlign, type TextElement, type TextProps, } from './components/Text.js';
 export { ThemeProvider, useTheme, type ThemeProviderProps, } from './theme/ThemeProvider.js';
 export { utilityClassCatalog } from './css/stylesheet.js';
 export type { VisibilityProps } from './visibility-classes.js';
-export type { Breakpoint } from './css/breakpoints.js';
+export type { Breakpoint, BreakpointDirection, VisibilityBreakpoint, } from './css/breakpoints.js';
+export { breakpointQuery } from './css/breakpoints.js';
 export { Separator } from './components/Separator.js';
 export type { SeparatorOrientation, SeparatorProps, } from './components/Separator.js';
 export { Grid } from './components/Grid.js';
@@ -44,6 +46,6 @@ export type { GridColumns, GridProps } from './components/Grid.js';
 export type { GridColumnSpan } from './css/css-grid-span.js';
 export type { ColumnSpanProps } from './column-span-classes.js';
 export { DenominationGrid } from './components/DenominationGrid.js';
-export type { DenominationGridColumn, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowRole, DenominationGridTone, } from './components/DenominationGrid.js';
+export type { DenominationGridColumn, DenominationGridLayout, DenominationGridProps, DenominationGridRow, DenominationGridRowRole, DenominationGridTone, DenominationLabelWidth, } from './components/DenominationGrid.js';
 export { FilterChips } from './components/FilterChips.js';
 export type { FilterChipOption, FilterChipsProps, } from './components/FilterChips.js';

package/dist/index.js

@@ -24,6 +24,7 @@ export { Field } from './components/Field.js';
 export { Inline } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export { Nav } from './components/Nav.js';
+export { SectionNav, } from './components/SectionNav.js';
 export { SegmentedControl, } from './components/SegmentedControl.js';
 export { Select } from './components/Select.js';
 export { Stack, } from './components/Stack.js';
@@ -31,6 +32,7 @@ export { Table, TableBody, TableCell, TableHeader, TableRow, } from './component
 export { Text, } from './components/Text.js';
 export { ThemeProvider, useTheme, } from './theme/ThemeProvider.js';
 export { utilityClassCatalog } from './css/stylesheet.js';
+export { breakpointQuery } from './css/breakpoints.js';
 export { Separator } from './components/Separator.js';
 export { Grid } from './components/Grid.js';
 export { DenominationGrid } from './components/DenominationGrid.js';