@scalewing/react 1.51.0 → 1.53.0

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

@@ -0,0 +1,24 @@
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
+export const tableSelectCellClass = 'sw-table-select';
+/*
+ * TableSelectCell's column: as wide as the checkbox (its padding outside),
+ * in an auto or a fixed table alike; the box centred in the cell. On a
+ * coarse pointer the column widens to the box's 44 px target
+ * (`sw-checkbox-label-hidden`, css-checkbox.ts).
+ */
+export function cssTableSelectClasses() {
+    return `.sw-table .${tableSelectCellClass} {
+  width: var(--sw-space-5);
+}
+
+.sw-table .${tableSelectCellClass} .sw-checkbox {
+  align-items: center;
+}
+
+@media ${coarsePointerQuery} {
+  .sw-table .${tableSelectCellClass} { width: ${touchTarget}; }
+}`;
+}
+export function tableSelectClassCatalog() {
+    return [tableSelectCellClass];
+}

package/dist/css/css-table.js

@@ -7,6 +7,7 @@ import { cssTableLedgerClasses, tableLedgerClassCatalog, } from './css-table-led
 import { cssTableFooterClasses, tableFooterClassCatalog, } from './css-table-footer.js';
 import { cssTablePagePinClasses, tablePagePinClassCatalog, } from './css-table-page-pin.js';
 import { cssTableTotalRowClasses, tableTotalRowClassCatalog, } from './css-table-total-row.js';
+import { cssTableSelectClasses, tableSelectClassCatalog, } from './css-table-select.js';
 import { cssTablePressClasses, tablePressClassCatalog, } from './css-table-press.js';
 import { cssTableStickyHeaderClasses, tableStickyHeaderClassCatalog, } from './css-table-sticky-header.js';
 import { cssTableSortClasses, tableSortClassCatalog, } from './css-table-sort.js';
@@ -103,6 +104,8 @@ ${cssTableBoundedClasses()}
 
 ${cssTablePressClasses()}
 
+${cssTableSelectClasses()}
+
 ${selectedRowRules()}`;
 }
 export function tableClassCatalog() {
@@ -123,5 +126,6 @@ export function tableClassCatalog() {
         ...tablePagePinClassCatalog(),
         ...tableBoundedClassCatalog(),
         ...tablePressClassCatalog(),
+        ...tableSelectClassCatalog(),
     ];
 }

package/dist/css/site-header-geometry.d.ts

@@ -0,0 +1,21 @@
+/** The bar's height below `lg`: 56 px. */
+export declare const siteHeaderCompactHeight = "calc(var(--sw-control-md-min-height) + var(--sw-space-3))";
+/** The bar's height from `lg`: 72 px. */
+export declare const siteHeaderWideHeight = "calc(var(--sw-control-md-min-height) + var(--sw-space-5) + var(--sw-space-1))";
+/** The bar's content: the page container plus the page gutter each side. */
+export declare const siteHeaderBarMaxWidth = "calc(var(--sw-container-max) + 2 * var(--sw-space-5))";
+/** From here the bar is the wide one with its row of destinations. */
+export declare const siteHeaderWideQuery: string;
+/** From here the bar's gutter is the wider one. */
+export declare const siteHeaderGutterQuery: string;
+/** The bar's gutter below `md` (`compact`) and from it (`wide`). */
+export declare const siteHeaderGutter: {
+    readonly compact: "var(--sw-space-4)";
+    readonly wide: "var(--sw-space-5)";
+};
+/**
+ * Where the bar's content starts, measured from the header's start: the
+ * centred bar's margin (none on a window narrower than the bar) plus its
+ * gutter, so something laid over the bar lines up with the brand.
+ */
+export declare function siteHeaderContentStart(gutter: string): string;

package/dist/css/site-header-geometry.js

@@ -0,0 +1,28 @@
+import { breakpointQuery } from './breakpoints.js';
+/*
+ * The site header's measures, shared by the bar, its skip link and the
+ * document's scroll padding so all three agree on where the bar ends.
+ */
+/** The bar's height below `lg`: 56 px. */
+export const siteHeaderCompactHeight = 'calc(var(--sw-control-md-min-height) + var(--sw-space-3))';
+/** The bar's height from `lg`: 72 px. */
+export const siteHeaderWideHeight = 'calc(var(--sw-control-md-min-height) + var(--sw-space-5) + var(--sw-space-1))';
+/** The bar's content: the page container plus the page gutter each side. */
+export const siteHeaderBarMaxWidth = 'calc(var(--sw-container-max) + 2 * var(--sw-space-5))';
+/** From here the bar is the wide one with its row of destinations. */
+export const siteHeaderWideQuery = breakpointQuery('from', 'lg');
+/** From here the bar's gutter is the wider one. */
+export const siteHeaderGutterQuery = breakpointQuery('from', 'md');
+/** The bar's gutter below `md` (`compact`) and from it (`wide`). */
+export const siteHeaderGutter = {
+    compact: 'var(--sw-space-4)',
+    wide: 'var(--sw-space-5)',
+};
+/**
+ * Where the bar's content starts, measured from the header's start: the
+ * centred bar's margin (none on a window narrower than the bar) plus its
+ * gutter, so something laid over the bar lines up with the brand.
+ */
+export function siteHeaderContentStart(gutter) {
+    return `calc(max(0px, (100% - ${siteHeaderBarMaxWidth}) / 2) + ${gutter})`;
+}

package/dist/css/stylesheet.js

@@ -68,6 +68,7 @@ import { dialogBandedClassCatalog } from './css-dialog-banded.js';
 import { dialogFrameClassCatalog } from './css-dialog-frame.js';
 import { dialogCanvasClassCatalog } from './css-dialog-canvas.js';
 import { dialogGrabberClassCatalog } from './css-dialog-grabber.js';
+import { dialogEndClassCatalog } from './css-dialog-end.js';
 import { selectClassCatalog } from './css-select.js';
 import { multiSelectClassCatalog } from './css-multi-select.js';
 import { comboboxClassCatalog } from './css-combobox.js';
@@ -113,6 +114,7 @@ export function utilityClassCatalog() {
         ...dialogBandedClassCatalog(),
         ...dialogCanvasClassCatalog(),
         ...dialogGrabberClassCatalog(),
+        ...dialogEndClassCatalog(),
         ...accordionClassCatalog(),
         ...selectClassCatalog(),
         ...actionMenuClassCatalog(),

package/dist/index.d.ts

@@ -15,6 +15,8 @@ export { ListRow, type ListRowProps } from './components/ListRow.js';
 export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, type ListGroupMaxHeight, type ListGroupVariant, type ListRowTitleAppearance, type ListRowTone, type ListRowValueTone, } from './list-options.js';
 export { listTileColumnCounts, type ListGroupTileColumns, } from './css/css-list-tiles.js';
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
+export { PasteRows, type PasteRowsColumn, type PasteRowsProps, } from './components/PasteRows.js';
+export { parsePastedRows, type PastedRows, type PastedRowsDelimiter, pastedRowsDelimiters, } from './components/paste-rows/parse-pasted-rows.js';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
 export { Skeleton, skeletonVariants, type SkeletonProps, type SkeletonVariant, } from './components/Skeleton.js';
 export { EmptyState, emptyStateTitleElements, type EmptyStateProps, type EmptyStateTitleElement, } from './components/EmptyState.js';
@@ -40,7 +42,7 @@ export { Box, type BoxBorder, type BoxElement, type BoxLink, type BoxProps, } fr
 export { boxLinkAppearances } from './css/css-box-link.js';
 export { ButtonGroup, buttonGroupAppearances, type ButtonGroupAppearance, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.js';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
-export { Dialog, dialogAppearances, dialogSizes, type DialogAppearance, type DialogProps, type DialogRole, type DialogSize, type DialogTitleLevel, } from './components/Dialog.js';
+export { Dialog, dialogAppearances, dialogPlacements, dialogSizes, type DialogAppearance, type DialogPlacement, type DialogProps, type DialogRole, type DialogSize, type DialogTitleLevel, } from './components/Dialog.js';
 export { StatTile, type StatTileAppearance, statTileAppearances, type StatTileEmphasis, type StatTileProps, type StatTileTone, statTileTones, } from './components/StatTile.js';
 export { TabPanel, type TabItem, type TabPanelProps, Tabs, type TabsProps, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, type ToastAction, type ToastPlacement, } from './components/Toast.js';
@@ -69,7 +71,7 @@ export { Select } from './components/Select.js';
 export type { SelectAction, SelectOption, SelectProps, SelectWidth, } from './components/Select.js';
 export { MultiSelect, type MultiSelectAlign, type MultiSelectOption, type MultiSelectProps, } from './components/MultiSelect.js';
 export { Stack, type Align, type Justify, type StackProps, } from './components/Stack.js';
-export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, tableCellTones, tableRowVariants, type TableBodyProps, type TableCellProps, type TableCellTone, type TableColumnWidth, type TableDensity, type TableFooterProps, type TableHeaderProps, type TableLayout, type TableMaxHeight, type TableProps, type TableRowProps, type TableRowVariant, type TableSort, type TableStickyHeader, type TableVerticalAlign, } from './components/Table.js';
+export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, TableSelectCell, tableCellTones, tableRowVariants, type TableBodyProps, type TableCellProps, type TableCellTone, type TableColumnWidth, type TableDensity, type TableFooterProps, type TableHeaderProps, type TableLayout, type TableMaxHeight, type TableProps, type TableRowProps, type TableRowVariant, type TableSelectCellProps, type TableSort, type TableStickyHeader, 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 { themeCanvases, type ThemeCanvas } from './css/css-canvas-grouped.js';
@@ -81,7 +83,7 @@ export { breakpointQuery } from './css/breakpoints.js';
 export { Band, bandElements, bandTones, bandWidths, } from './components/Band.js';
 export type { BandElement, BandProps, BandTone, BandWidth, } from './components/Band.js';
 export { SiteHeader } from './components/SiteHeader.js';
-export type { SiteHeaderItem, SiteHeaderLabels, SiteHeaderProps, } from './components/SiteHeader.js';
+export type { SiteHeaderItem, SiteHeaderLabels, SiteHeaderProps, SiteHeaderSkipLink, } from './components/SiteHeader.js';
 export { ScreenPreview, screenPreviewFrames, } from './components/ScreenPreview.js';
 export type { ScreenPreviewFrame, ScreenPreviewProps, } from './components/ScreenPreview.js';
 export { PreviewGroup } from './components/screen-preview/PreviewGroup.js';

package/dist/index.js

@@ -14,6 +14,8 @@ export { ListRow } from './components/ListRow.js';
 export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, } from './list-options.js';
 export { listTileColumnCounts, } from './css/css-list-tiles.js';
 export { Checkbox } from './components/Checkbox.js';
+export { PasteRows, } from './components/PasteRows.js';
+export { parsePastedRows, pastedRowsDelimiters, } from './components/paste-rows/parse-pasted-rows.js';
 export { Spinner, } from './components/Spinner.js';
 export { Skeleton, skeletonVariants, } from './components/Skeleton.js';
 export { EmptyState, emptyStateTitleElements, } from './components/EmptyState.js';
@@ -39,7 +41,7 @@ export { Box, } from './components/Box.js';
 export { boxLinkAppearances } from './css/css-box-link.js';
 export { ButtonGroup, buttonGroupAppearances, } from './components/ButtonGroup.js';
 export { Card } from './components/Card.js';
-export { Dialog, dialogAppearances, dialogSizes, } from './components/Dialog.js';
+export { Dialog, dialogAppearances, dialogPlacements, dialogSizes, } from './components/Dialog.js';
 export { StatTile, statTileAppearances, statTileTones, } from './components/StatTile.js';
 export { TabPanel, Tabs, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, } from './components/Toast.js';
@@ -65,7 +67,7 @@ export { Combobox, comboboxSizes, } from './components/Combobox.js';
 export { Select } from './components/Select.js';
 export { MultiSelect, } from './components/MultiSelect.js';
 export { Stack, } from './components/Stack.js';
-export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, tableCellTones, tableRowVariants, } from './components/Table.js';
+export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, TableSelectCell, tableCellTones, tableRowVariants, } from './components/Table.js';
 export { Text, } from './components/Text.js';
 export { ThemeProvider, useTheme, } from './theme/ThemeProvider.js';
 export { themeCanvases } from './css/css-canvas-grouped.js';

package/dist/styles.css

@@ -1185,6 +1185,38 @@ body {
 
 .sw-checkbox-input:checked + .sw-checkbox-mark::after { display: block; }
 
+/* The mixed state: the accent fill with a dash in place of the check. */
+.sw-checkbox-input:indeterminate + .sw-checkbox-mark {
+  background: var(--sw-color-accent);
+  border-color: var(--sw-color-accent);
+}
+
+.sw-checkbox-input:indeterminate + .sw-checkbox-mark::after {
+  border-right: 0;
+  display: block;
+  height: 0;
+  inset-block-start: calc(50% - 1px);
+  inset-inline-start: calc(50% - var(--sw-space-3) / 2);
+  transform: none;
+  width: var(--sw-space-3);
+}
+
+/* A visually hidden label: the box alone is the target, its own size on a
+   fine pointer (so a compact table row keeps its height), the 44 px touch
+   target both ways on a coarse one. */
+.sw-checkbox-label-hidden {
+  justify-content: center;
+  min-height: 0;
+  position: relative;
+}
+
+@media (pointer: coarse) {
+  .sw-checkbox-label-hidden {
+    min-height: var(--sw-control-md-min-height);
+    min-width: var(--sw-control-md-min-height);
+  }
+}
+
 .sw-checkbox-input:focus-visible + .sw-checkbox-mark {
   outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
   outline-offset: var(--sw-focus-ring-offset);
@@ -1221,13 +1253,13 @@ body {
 
 @media (prefers-reduced-transparency: reduce) {
   .sw-checkbox-mark { background: var(--sw-color-surface); }
-  .sw-checkbox-input:checked + .sw-checkbox-mark { background: var(--sw-color-accent); }
+  .sw-checkbox-input:is(:checked, :indeterminate) + .sw-checkbox-mark { background: var(--sw-color-accent); }
 }
 
 @media (forced-colors: active) {
   .sw-checkbox-mark { background: Canvas; border-color: CanvasText; }
-  .sw-checkbox-input:checked + .sw-checkbox-mark { background: Highlight; border-color: Highlight; }
-  .sw-checkbox-input:checked + .sw-checkbox-mark::after { border-color: HighlightText; }
+  .sw-checkbox-input:is(:checked, :indeterminate) + .sw-checkbox-mark { background: Highlight; border-color: Highlight; }
+  .sw-checkbox-input:is(:checked, :indeterminate) + .sw-checkbox-mark::after { border-color: HighlightText; }
   .sw-checkbox-input[aria-invalid='true'] + .sw-checkbox-mark { border-color: CanvasText; }
 }
 
@@ -2174,6 +2206,18 @@ body {
   .sw-table-action { color: ButtonText; }
 }
 
+.sw-table .sw-table-select {
+  width: var(--sw-space-5);
+}
+
+.sw-table .sw-table-select .sw-checkbox {
+  align-items: center;
+}
+
+@media (pointer: coarse) {
+  .sw-table .sw-table-select { width: var(--sw-control-md-min-height); }
+}
+
 .sw-table-row-selected > :first-child {
   position: relative;
 }
@@ -4939,6 +4983,13 @@ body {
     min-height: var(--sw-control-md-min-height);
   }
 
+  [data-theme] .sw-band-inverse :is(.sw-site-footer-legal, .sw-site-footer-end) > a:not(.sw-button) {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    min-height: var(--sw-control-md-min-height);
+  }
+
   .sw-site-footer-links {
     gap: 0;
   }
@@ -4998,6 +5049,10 @@ body {
   gap: var(--sw-space-1);
 }
 
+.sw-site-header-compact-actions {
+  display: contents;
+}
+
 .sw-site-header-list {
   list-style: none;
   margin: 0;
@@ -5054,6 +5109,10 @@ body {
   list-style: none;
 }
 
+.sw-site-header-compact:has(> .sw-site-header-menu[open]) > .sw-site-header-compact-actions {
+  display: none;
+}
+
 .sw-site-header-menu > summary::-webkit-details-marker {
   display: none;
 }
@@ -5138,6 +5197,52 @@ body {
   padding-top: var(--sw-space-5);
 }
 
+.sw-site-header-skip-link {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 600;
+  inset-block-start: 50%;
+  inset-inline-start: calc(max(0px, (100% - calc(var(--sw-container-max) + 2 * var(--sw-space-5))) / 2) + var(--sw-space-4));
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  padding-inline: var(--sw-space-4);
+  position: absolute;
+  transform: translateY(-50%);
+  white-space: nowrap;
+}
+
+[data-theme] .sw-site-header-skip-link {
+  color: var(--sw-color-text);
+  text-decoration: none;
+}
+
+[data-theme] .sw-site-header-skip-link:focus {
+  min-height: var(--sw-control-md-min-height);
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-site-header-skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+
+@media (min-width: 48rem) {
+  .sw-site-header-skip-link { inset-inline-start: calc(max(0px, (100% - calc(var(--sw-container-max) + 2 * var(--sw-space-5))) / 2) + var(--sw-space-5)); }
+}
+
+html:has(.sw-site-header-sticky) {
+  scroll-padding-top: calc(calc(var(--sw-control-md-min-height) + var(--sw-space-3)) + 1px + var(--sw-space-3));
+}
+
+@media (min-width: 64rem) {
+  html:has(.sw-site-header-sticky) {
+    scroll-padding-top: calc(calc(var(--sw-control-md-min-height) + var(--sw-space-5) + var(--sw-space-1)) + 1px + var(--sw-space-3));
+  }
+}
+
 /*
  * Forced colours drop box shadows, so the current destination's bar is a
  * thick underline there.
@@ -5776,6 +5881,54 @@ body {
   }
 }
 
+@media (min-width: 48rem) {
+  .sw-dialog-end {
+    border-color: var(--sw-color-border);
+    border-radius: 0;
+    border-width: 0;
+    border-inline-start-width: 1px;
+    height: 100%;
+    inset-block: 0;
+    margin: 0;
+    margin-inline-start: auto;
+    max-height: none;
+  }
+
+  .sw-dialog-end[open] {
+    animation: sw-dialog-end-in var(--sw-motion-default) var(--sw-motion-easing);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sw-dialog-end[open]:dir(rtl) {
+    animation-name: sw-dialog-end-in-rtl;
+  }
+
+  .sw-dialog-end > .sw-stack {
+    flex: 1 0 auto;
+  }
+
+  .sw-dialog-end .sw-dialog-footer {
+    margin-top: auto;
+  }
+}
+
+@keyframes sw-dialog-end-in {
+  from { translate: 100% 0; }
+}
+
+@keyframes sw-dialog-end-in-rtl {
+  from { translate: -100% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-dialog-end[open] { animation: none; }
+}
+
+@media (forced-colors: active) {
+  .sw-dialog-end { border-inline-start-color: CanvasText; }
+}
+
 .sw-accordion {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
@@ -6030,6 +6183,15 @@ body {
   margin-top: var(--sw-space-1);
 }
 
+/* The comfortable touch target on a coarse pointer, at every size: the
+   trigger and each option are at least 44 px high (the md control height),
+   as every Button is. Type and padding keep the size's; the rule follows
+   the size rules, which it outranks only by order. */
+@media (pointer: coarse) {
+  .sw-select .sw-select-trigger,
+  .sw-select .sw-select-option { min-height: var(--sw-control-md-min-height); }
+}
+
 .sw-action-menu {
   display: inline-flex;
   position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.51.0",
+  "version": "1.53.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",