@scalewing/react 1.21.0 → 1.22.0

package/dist/components/use-anchored-popover.js

@@ -13,7 +13,8 @@ function layoutViewport() {
         height: root.clientHeight || window.innerHeight,
     };
 }
-function placePopover(node, anchor, { align = 'start', flipInline = false }) {
+/** Places a fixed (or top-layer) `node` beside `anchor`, inside the viewport. */
+export function placePopover(node, anchor, { align = 'start', flipInline = false }) {
     const position = anchoredPosition(anchor.getBoundingClientRect(), { width: node.offsetWidth, height: node.offsetHeight }, layoutViewport(), {
         gap: spacingScale[1],
         inset: spacingScale[2],

package/dist/css/css-action-menu.js

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { zIndex } from './stacking.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
+const caption = typographyVariants.caption;
 const label = typographyVariants.label;
 export function cssActionMenuClasses() {
     return `.sw-action-menu {
@@ -56,6 +57,27 @@ export function cssActionMenuClasses() {
   ${zIndex('popup')}
 }
 
+/* Each child of the header is a line of its own: a name, then a role. */
+.sw-action-menu-header {
+  border-bottom: 1px solid var(--sw-color-border);
+  color: var(--sw-color-muted);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  margin-bottom: var(--sw-space-1);
+  /* The commands' inline padding, so the header's words line up with theirs. */
+  padding: var(--sw-space-1) var(--sw-control-xs-padding-inline) var(--sw-space-2);
+}
+
+/* With a header, the commands are the menu inside the popover. */
+.sw-action-menu-items {
+  display: block;
+}
+
 .sw-action-menu-item {
   align-items: center;
   appearance: none;
@@ -109,6 +131,8 @@ export function actionMenuClassCatalog() {
         'sw-action-menu',
         'sw-action-menu-trigger',
         'sw-action-menu-list',
+        'sw-action-menu-header',
+        'sw-action-menu-items',
         'sw-action-menu-item',
         'sw-action-menu-item-danger',
     ];

package/dist/css/css-chart.js

@@ -1,6 +1,47 @@
 import { typographyVariants } from '@scalewing/tokens';
 const caption = typographyVariants.caption;
 const data = typographyVariants.data;
+/*
+ * A diverging chart puts zero in the middle of each track, marked by a
+ * hairline: a positive bar starts there and grows toward the inline end, a
+ * negative one ends there and grows toward the start, each at most half the
+ * track. The fill keeps its share of the scale (`--sw-bar-fill`), so a
+ * bar is half as long as in the magnitude layout, on the same scale. The
+ * end at zero is square, so the bars meet the hairline.
+ */
+function divergingRules() {
+    return `.sw-bar-chart-diverging .sw-bar-chart-track {
+  position: relative;
+}
+
+.sw-bar-chart-diverging .sw-bar-chart-track::before {
+  background: var(--sw-color-border);
+  content: '';
+  inset-block: 0;
+  inset-inline-start: 50%;
+  position: absolute;
+  width: 1px;
+}
+
+.sw-bar-chart-diverging .sw-bar-chart-fill {
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+  margin-inline-start: 50%;
+  width: calc(var(--sw-bar-fill, 0) * 50%);
+}
+
+.sw-bar-chart-diverging .sw-bar-chart-fill-negative {
+  border-end-end-radius: 0;
+  border-end-start-radius: inherit;
+  border-start-end-radius: 0;
+  border-start-start-radius: inherit;
+  margin-inline-start: calc(50% - var(--sw-bar-fill, 0) * 50%);
+}
+
+@media (forced-colors: active) {
+  .sw-bar-chart-diverging .sw-bar-chart-track::before { background: CanvasText; }
+}`;
+}
 export function cssChartClasses() {
     return `.sw-bar-chart {
   display: grid;
@@ -80,7 +121,9 @@ export function cssChartClasses() {
 .sw-bar-chart-axis-track {
   display: flex;
   justify-content: space-between;
-}`;
+}
+
+${divergingRules()}`;
 }
 export function chartClassCatalog() {
     return [
@@ -94,5 +137,6 @@ export function chartClassCatalog() {
         'sw-bar-chart-fill-negative',
         'sw-bar-chart-value',
         'sw-bar-chart-axis-track',
+        'sw-bar-chart-diverging',
     ];
 }

package/dist/css/css-components.js

@@ -7,6 +7,7 @@ import { cssChartClasses } from './css-chart.js';
 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 { cssDataClasses } from './css-data.js';
 import { cssSegmentedClasses } from './css-segmented.js';
 import { cssTableClasses } from './css-table.js';
@@ -123,6 +124,8 @@ ${cssChartClasses()}
 
 ${cssChromeClasses()}
 
+${cssSectionNavClasses()}
+
 ${cssDialogClasses()}
 
 ${cssAccordionClasses()}

package/dist/css/css-date-field.js

@@ -229,16 +229,51 @@ function calendarRules() {
   background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
 }
 
+/*
+ * A range's days are one band in each week row: square-cornered, the accent
+ * at 16 % over the calendar's glass, rounded at the range's start and end.
+ * accentSubtle is mixed against the surface, not the glass, and fades to
+ * nothing where the accent is near AA, so the band would vanish in most
+ * dark palettes. Every number on the band is in the text colour, which
+ * keeps 4.5:1 on it in every palette (muted and accent do not); a
+ * neighbouring month's day and today are marked by the band and today's
+ * accent ring (3:1 or more on the band). The selected day sits on top.
+ */
+.sw-date-field-day-in-range {
+  background: color-mix(in srgb, var(--sw-color-accent) 16%, transparent);
+  border-radius: 0;
+  color: var(--sw-color-text);
+}
+
+.sw-date-field-day-range-start {
+  border-end-start-radius: var(--sw-radius-pill);
+  border-start-start-radius: var(--sw-radius-pill);
+}
+
+.sw-date-field-day-range-end {
+  border-end-end-radius: var(--sw-radius-pill);
+  border-start-end-radius: var(--sw-radius-pill);
+}
+
 .sw-date-field-day[aria-current='date'] {
   border-color: var(--sw-color-accent);
   color: var(--sw-color-accent);
   font-weight: ${label.fontWeight};
 }
 
+.sw-date-field-day-in-range[aria-current='date'] {
+  color: var(--sw-color-text);
+}
+
+.sw-date-field-day-in-range:hover:not([aria-disabled='true']) {
+  background: color-mix(in srgb, var(--sw-color-accent) 24%, transparent);
+}
+
 .sw-date-field-day[aria-selected='true'],
 .sw-date-field-day[aria-selected='true']:hover {
   background: var(--sw-color-accent);
   border-color: var(--sw-color-accent);
+  border-radius: var(--sw-radius-pill);
   color: var(--sw-color-onAccent);
   font-weight: ${label.fontWeight};
 }
@@ -279,7 +314,15 @@ function adaptiveRules() {
   }
   .sw-date-field-calendar { border-color: CanvasText; }
   .sw-date-field-day[aria-current='date'] { border-color: CanvasText; }
-  .sw-date-field-day[aria-selected='true'] {
+  .sw-date-field-day-in-range,
+  .sw-date-field-day-in-range:hover:not([aria-disabled='true']),
+  .sw-date-field-day-in-range[aria-current='date'] {
+    background: Mark;
+    color: MarkText;
+    forced-color-adjust: none;
+  }
+  .sw-date-field-day[aria-selected='true'],
+  .sw-date-field-day[aria-selected='true']:hover {
     background: Highlight;
     color: HighlightText;
     forced-color-adjust: none;
@@ -311,6 +354,9 @@ export function dateFieldClassCatalog() {
         'sw-date-field-grid',
         'sw-date-field-day',
         'sw-date-field-day-outside',
+        'sw-date-field-day-in-range',
+        'sw-date-field-day-range-start',
+        'sw-date-field-day-range-end',
         'sw-date-field-footer',
     ];
 }

package/dist/css/css-denomination-aligned.d.ts

@@ -0,0 +1,7 @@
+import { type TableColumnSize } from './css-table-layout.js';
+/** The row-label widths a strip lines up at: the Table column sizes. */
+export type DenominationLabelWidth = TableColumnSize;
+export declare const denominationLabelWidths: DenominationLabelWidth[];
+export declare function denominationLabelWidthClass(width: DenominationLabelWidth): string;
+export declare function cssDenominationAlignedClasses(): string;
+export declare function denominationAlignedClassCatalog(): string[];

package/dist/css/css-denomination-aligned.js

@@ -0,0 +1,68 @@
+import { breakpointQuery } from './breakpoints.js';
+import { tableColumnSizes } from './css-table-layout.js';
+export const denominationLabelWidths = Object.keys(tableColumnSizes);
+export function denominationLabelWidthClass(width) {
+    return `sw-denomination-label-${width}`;
+}
+/*
+ * A strip with a label width lines its columns up with every other strip
+ * of the same columns in a container of the same width, such as the cards
+ * of a feed: the label column is that width, and the count columns (and the
+ * total column from md up, where it is drawn) share the rest of the scroll
+ * region's width equally, measured from the region itself (a container, so
+ * 100cqi is its width) rather than from the cells' content. Every column is
+ * sized, so the browser has no spare width to share by content. A count
+ * wider than its share widens its column, and the strip then scrolls as a
+ * plain one does. The component sets the column count and whether there is
+ * a total column (`--sw-denomination-columns`, `--sw-denomination-total`);
+ * below md the total column collapses, so it takes no share.
+ */
+export function cssDenominationAlignedClasses() {
+    const widths = Object.entries(tableColumnSizes)
+        .map(([size, rem]) => `.${denominationLabelWidthClass(size)} { --sw-denomination-label-width: ${rem}rem; }`)
+        .join('\n');
+    const strip = '.sw-denomination-strip-aligned';
+    return `.sw-denomination-scroll-aligned {
+  container-type: inline-size;
+}
+
+${widths}
+
+${strip} {
+  --sw-denomination-total-shown: 1;
+  --sw-denomination-share: calc(
+    (100cqi - var(--sw-denomination-label-width)) /
+      (var(--sw-denomination-columns) + var(--sw-denomination-total) * var(--sw-denomination-total-shown))
+  );
+}
+
+${strip} th,
+${strip} td {
+  box-sizing: border-box;
+}
+
+${strip} .sw-denomination-label,
+${strip} thead .sw-denomination-corner:first-child {
+  width: var(--sw-denomination-label-width);
+}
+
+${strip} .sw-denomination-cell,
+${strip} .sw-denomination-head:not(.sw-denomination-total-head),
+${strip} .sw-denomination-total,
+${strip} .sw-denomination-total-head {
+  width: var(--sw-denomination-share);
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  ${strip} { --sw-denomination-total-shown: 0; }
+  ${strip} .sw-denomination-total,
+  ${strip} .sw-denomination-total-head { width: 0; }
+}`;
+}
+export function denominationAlignedClassCatalog() {
+    return [
+        'sw-denomination-scroll-aligned',
+        'sw-denomination-strip-aligned',
+        ...denominationLabelWidths.map(denominationLabelWidthClass),
+    ];
+}

package/dist/css/css-denomination-grid.js

@@ -1,6 +1,7 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { breakpointQuery } from './breakpoints.js';
 import { badgeTones } from './css-data.js';
+import { cssDenominationAlignedClasses, denominationAlignedClassCatalog, } from './css-denomination-aligned.js';
 import { cssDenominationCellToneClasses, denominationCellToneClassCatalog, } from './css-denomination-cell-tones.js';
 import { pinnedStartShadeRules, scrollRegionRules, } from './css-scroll-region.js';
 import { visuallyHiddenDeclarations } from './css-utilities.js';
@@ -235,7 +236,8 @@ ${pinnedStartShadeRules('.sw-denomination-scroll', [
 @media ${breakpointQuery('below', 'md')} {
   .sw-denomination-strip .sw-denomination-total,
   .sw-denomination-strip .sw-denomination-total-head { padding: 0; position: relative; }
-  .sw-denomination-total-value { ${visuallyHiddenDeclarations} }
+  .sw-denomination-total-value,
+  .sw-denomination-total-label { ${visuallyHiddenDeclarations} }
   .sw-denomination-total-inline { display: block; }
   .sw-denomination-label-body { flex-direction: column; align-items: flex-start; gap: var(--sw-space-1); }
   .sw-denomination-strip .sw-denomination-label-line { gap: var(--sw-space-1); }
@@ -247,6 +249,8 @@ ${pinnedStartShadeRules('.sw-denomination-scroll', [
 
 ${cssDenominationCellToneClasses()}
 
+${cssDenominationAlignedClasses()}
+
 @media (forced-colors: active) {
   .sw-denomination-label { border-inline-start-color: CanvasText; color: CanvasText; }
   .sw-denomination-strip .sw-denomination-label::before { background: CanvasText; forced-color-adjust: none; }
@@ -279,11 +283,13 @@ export function denominationGridClassCatalog() {
         'sw-denomination-total',
         'sw-denomination-total-inline',
         'sw-denomination-total-head',
+        'sw-denomination-total-label',
         'sw-denomination-total-value',
         'sw-denomination-tiles',
         'sw-denomination-tile-list',
         'sw-denomination-tile',
         'sw-denomination-subtotal',
         ...denominationCellToneClassCatalog(),
+        ...denominationAlignedClassCatalog(),
     ];
 }

package/dist/css/css-field.js

@@ -80,11 +80,24 @@ export function cssFieldClasses() {
   border-color: var(--sw-color-danger);
 }
 
+/*
+ * A changed value: the accent border, a hairline thicker through an inset
+ * shadow so nothing moves, on the control or on an adorned frame (whose
+ * input draws no border of its own).
+ */
+[data-theme] .sw-field-changed > :is(input, select, textarea),
+.sw-field-changed .sw-field-adorned {
+  border-color: var(--sw-color-accent);
+  box-shadow: inset 0 0 0 1px var(--sw-color-accent);
+}
+
 ${adornmentRules()}
 
 @media (forced-colors: active) {
   [data-theme] .sw-field-invalid :is(input, select, textarea),
   .sw-field-invalid .sw-field-adorned { border-color: Mark; }
+  [data-theme] .sw-field-changed > :is(input, select, textarea),
+  .sw-field-changed .sw-field-adorned { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; }
   .sw-field-prefix, .sw-field-suffix { color: CanvasText; }
   .sw-field-adorned:has(> input:disabled) {
     ${disabledControlForcedColors}
@@ -99,6 +112,7 @@ export function fieldClassCatalog() {
         'sw-field-description',
         'sw-field-error',
         'sw-field-invalid',
+        'sw-field-changed',
         'sw-field-adorned',
         'sw-field-prefix',
         'sw-field-suffix',

package/dist/css/css-scroll-region.d.ts

@@ -1,3 +1,11 @@
+/**
+ * The shade each inline edge of `selector` draws while `useScrollOverflow`
+ * marks it (`sw-scroll-more-start`, `sw-scroll-more-end`). The start edge is
+ * the left in a left-to-right box and the right in RTL. A box that scrolls
+ * itself (a `Tabs` strip) takes these alone; a scroll region takes them
+ * through `scrollRegionRules`.
+ */
+export declare function scrollShadeRules(selector: string): string;
 /**
  * A scroll region is a full-width box that scrolls its own content when the
  * content is wider (or taller) than the box, so a wide table never widens the

package/dist/css/css-scroll-region.js

@@ -12,8 +12,14 @@ function edgeShade(side) {
     const offset = side === 'left' ? 'var(--sw-space-6)' : 'calc(-1 * var(--sw-space-6))';
     return `inset ${offset} 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) ${shadeColor}`;
 }
-/** The start edge is the left in a left-to-right box and the right in RTL. */
-function edgeShadeRules(selector) {
+/**
+ * The shade each inline edge of `selector` draws while `useScrollOverflow`
+ * marks it (`sw-scroll-more-start`, `sw-scroll-more-end`). The start edge is
+ * the left in a left-to-right box and the right in RTL. A box that scrolls
+ * itself (a `Tabs` strip) takes these alone; a scroll region takes them
+ * through `scrollRegionRules`.
+ */
+export function scrollShadeRules(selector) {
     const more = (edge) => `${selector}.sw-scroll-more-${edge}`;
     const both = `${more('start')}.sw-scroll-more-end`;
     return [
@@ -47,7 +53,7 @@ ${selector}:focus-visible {
   outline-offset: calc(-1 * var(--sw-focus-ring-width));
 }
 
-${edgeShadeRules(selector)}`;
+${scrollShadeRules(selector)}`;
 }
 export function scrollRegionClassCatalog() {
     return ['sw-scroll-more-start', 'sw-scroll-more-end'];

package/dist/css/css-section-nav.d.ts

@@ -0,0 +1,4 @@
+import { type Breakpoint } from './breakpoints.js';
+export declare function sectionNavVerticalClass(breakpoint: Breakpoint): string;
+export declare function cssSectionNavClasses(): string;
+export declare function sectionNavClassCatalog(): string[];

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