@scalewing/react 1.52.0 → 1.54.0

package/dist/css/css-dialog-end.d.ts

@@ -0,0 +1,13 @@
+import { type Breakpoint } from './breakpoints.js';
+/**
+ * Where a Dialog sits from the layout breakpoint up: `center` (the
+ * default) in the middle of the window, `end` as a side panel docked to
+ * the inline end (the right, the left in right-to-left).
+ */
+export declare const dialogPlacements: readonly ["center", "end"];
+export type DialogPlacement = (typeof dialogPlacements)[number];
+export declare const dialogEndClass = "sw-dialog-end";
+/** The side panel takes its place from this breakpoint up. */
+export declare const dialogEndFrom: Breakpoint;
+export declare function cssDialogEndClasses(): string;
+export declare function dialogEndClassCatalog(): string[];

package/dist/css/css-dialog-end.js

@@ -0,0 +1,75 @@
+import { breakpointQuery } from './breakpoints.js';
+/**
+ * Where a Dialog sits from the layout breakpoint up: `center` (the
+ * default) in the middle of the window, `end` as a side panel docked to
+ * the inline end (the right, the left in right-to-left).
+ */
+export const dialogPlacements = ['center', 'end'];
+export const dialogEndClass = 'sw-dialog-end';
+/** The side panel takes its place from this breakpoint up. */
+export const dialogEndFrom = 'md';
+const end = `.${dialogEndClass}`;
+/*
+ * From md up, `placement="end"` is a side panel: the window's full height
+ * at the inline end, square corners, one hairline on its inline-start
+ * edge, the size's width (md 32rem, lg 56rem, xl 65rem) with a space-8
+ * strip of backdrop always in view. Its column grows to the full height so
+ * the pinned footer sits on the bottom edge even when the content is short;
+ * longer content scrolls inside the panel under the sticky footer, as in
+ * the centred dialog. It slides in from its edge unless reduced motion is
+ * asked for. Below md the class draws nothing: the dialog is centred, or a
+ * bottom sheet with `sheetBelow`. Emitted after the banded and grabber
+ * rules so its edges win at equal specificity.
+ */
+export function cssDialogEndClasses() {
+    return `@media ${breakpointQuery('from', dialogEndFrom)} {
+  ${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;
+  }
+
+  ${end}[open] {
+    animation: sw-dialog-end-in var(--sw-motion-default) var(--sw-motion-easing);
+    display: flex;
+    flex-direction: column;
+  }
+
+  ${end}[open]:dir(rtl) {
+    animation-name: sw-dialog-end-in-rtl;
+  }
+
+  ${end} > .sw-stack {
+    flex: 1 0 auto;
+  }
+
+  ${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) {
+  ${end}[open] { animation: none; }
+}
+
+@media (forced-colors: active) {
+  ${end} { border-inline-start-color: CanvasText; }
+}`;
+}
+export function dialogEndClassCatalog() {
+    return [dialogEndClass];
+}

package/dist/css/css-select.js

@@ -2,6 +2,7 @@ import { typographyVariants } from '@scalewing/tokens';
 import { chevronStroke } from './chevron.js';
 import { zIndex } from './stacking.js';
 import { quietFill } from './quiet-fill.js';
+import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const caption = typographyVariants.caption;
 const label = typographyVariants.label;
 export function cssSelectClasses() {
@@ -186,6 +187,15 @@ export function cssSelectClasses() {
   border-top: 1px solid var(--sw-color-border);
   color: var(--sw-color-accent);
   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 ${coarsePointerQuery} {
+  .sw-select .sw-select-trigger,
+  .sw-select .sw-select-option { min-height: ${touchTarget}; }
 }`;
 }
 export function selectClassCatalog() {

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

@@ -0,0 +1,3 @@
+export declare const tableSelectCellClass = "sw-table-select";
+export declare function cssTableSelectClasses(): string;
+export declare function tableSelectClassCatalog(): string[];

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/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';

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

@@ -666,6 +666,30 @@ body {
   text-decoration-line: underline;
 }
 
+.sw-link-external-mark {
+  border-right: 2px solid currentColor;
+  border-top: 2px solid currentColor;
+  box-sizing: border-box;
+  display: inline-block;
+  height: var(--sw-space-2);
+  margin-inline-start: var(--sw-space-1);
+  position: relative;
+  vertical-align: middle;
+  width: var(--sw-space-2);
+}
+
+.sw-link-external-mark::after {
+  border-left: 2px solid currentColor;
+  content: '';
+  height: calc(var(--sw-space-2) * 1.25);
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.sw-link-external-mark:dir(rtl) { transform: scaleX(-1); }
+
 /*
  * A programmatic focus target (tabindex="-1": a notice, a card or a heading
  * that a script focuses after a save) takes the accent ring past the ring
@@ -1185,6 +1209,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 +1277,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 +2230,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;
 }
@@ -5837,6 +5905,54 @@ html:has(.sw-site-header-sticky) {
   }
 }
 
+@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);
@@ -6091,6 +6207,15 @@ html:has(.sw-site-header-sticky) {
   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.52.0",
+  "version": "1.54.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",