@scalewing/react 1.21.0 → 1.23.0

package/dist/styles.css

@@ -1420,6 +1420,121 @@ body {
   padding: var(--sw-space-1) var(--sw-space-2);
 }
 
+.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;
+}
+
+.sw-table .sw-table-col-xs { width: 4rem; }
+.sw-table .sw-table-col-sm { width: 6rem; }
+.sw-table .sw-table-col-md { width: 8rem; }
+.sw-table .sw-table-col-lg { width: 12rem; }
+.sw-table .sw-table-col-xl { width: 16rem; }
+
+.sw-table.sw-table-top th,
+.sw-table.sw-table-top td {
+  vertical-align: top;
+}
+
+.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);
+}
+
+.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 {
+  content: '';
+  border-bottom: 2px solid var(--sw-color-muted);
+    border-right: 2px solid var(--sw-color-muted);
+    box-sizing: border-box;
+    height: var(--sw-space-2);
+    width: var(--sw-space-2);
+  border-color: currentColor;
+  display: block;
+  margin-top: calc(var(--sw-space-1) / 2);
+  transform: rotate(-135deg);
+}
+
+.sw-table-sort-descending::after,
+.sw-table-sort-none::after {
+  content: '';
+  border-bottom: 2px solid var(--sw-color-muted);
+    border-right: 2px solid var(--sw-color-muted);
+    box-sizing: border-box;
+    height: var(--sw-space-2);
+    width: var(--sw-space-2);
+  border-color: currentColor;
+  display: block;
+  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);
+}
+
+@media (pointer: coarse) {
+  .sw-table-sort { min-height: var(--sw-control-md-min-height); }
+}
+
+@media (forced-colors: active) {
+  .sw-table-sort { color: ButtonText; }
+  .sw-table-sort-none { opacity: 1; }
+}
+
 .sw-table-row-selected > :first-child {
   position: relative;
 }
@@ -1658,16 +1773,51 @@ body {
   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: 600;
 }
 
+.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: 600;
 }
@@ -1709,7 +1859,15 @@ body {
   }
   .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;
@@ -1818,6 +1976,38 @@ body {
   justify-content: space-between;
 }
 
+.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; }
+}
+
 .sw-app-header {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
@@ -1851,6 +2041,18 @@ body {
   color: var(--sw-color-text);
 }
 
+/*
+ * A button in a navigation is a destination: on a coarse pointer it grows to
+ * the 44 px touch target both ways, whatever its size, as a section link
+ * and a calendar button do. A label beside its glyph keeps its line.
+ */
+@media (pointer: coarse) {
+  .sw-nav .sw-button {
+    min-height: var(--sw-control-md-min-height);
+    min-width: var(--sw-control-md-min-height);
+  }
+}
+
 .sw-field-xs :is(select, input, textarea) {
   font-size: 13px;
   letter-spacing: -0.08px;
@@ -1870,6 +2072,88 @@ body {
   );
 }
 
+.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: 15px;
+  font-weight: 600;
+  gap: var(--sw-space-2);
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  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;
+}
+
+@media (min-width: 48rem) {
+  .sw-section-nav-vertical-from-md .sw-section-nav-list {
+    border-bottom: 0;
+    flex-direction: column;
+    gap: var(--sw-space-1);
+  }
+
+  .sw-section-nav-vertical-from-md .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%;
+  }
+
+  .sw-section-nav-vertical-from-md .sw-section-nav-link:dir(rtl) {
+    border-radius: var(--sw-radius-sm) 0 0 var(--sw-radius-sm);
+  }
+
+  .sw-section-nav-vertical-from-md .sw-section-nav-link[aria-current] {
+    border-inline-start-color: var(--sw-color-accent);
+  }
+}
+
+@media (pointer: coarse) {
+  [data-theme] .sw-section-nav-link { min-height: var(--sw-control-md-min-height); }
+}
+
+@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; }
+}
+
 .sw-dialog {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
@@ -2285,6 +2569,27 @@ body {
   z-index: 10;
 }
 
+/* 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: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  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;
@@ -2617,11 +2922,14 @@ body {
   font-family: var(--sw-font-sans);
   font-size: 13px;
   line-height: 18px;
-  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;
   z-index: 10;
 }
@@ -2760,6 +3068,12 @@ body {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
+.sw-tabs.sw-scroll-more-start { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-tabs.sw-scroll-more-end { box-shadow: inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-tabs.sw-scroll-more-start:dir(rtl) { box-shadow: inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-tabs.sw-scroll-more-end:dir(rtl) { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+.sw-tabs.sw-scroll-more-start.sw-scroll-more-end { box-shadow: inset var(--sw-space-6) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent), inset calc(-1 * var(--sw-space-6)) 0 var(--sw-space-5) calc(-1 * var(--sw-space-5)) color-mix(in srgb, var(--sw-color-text) 28%, transparent); }
+
 .sw-tabs-sticky {
   background: color-mix(in srgb, var(--sw-color-background) 90%, transparent);
   backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
@@ -3195,7 +3509,8 @@ body {
 @media not all and (min-width: 48rem) {
   .sw-denomination-strip .sw-denomination-total,
   .sw-denomination-strip .sw-denomination-total-head { padding: 0; position: relative; }
-  .sw-denomination-total-value { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+  .sw-denomination-total-value,
+  .sw-denomination-total-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
   .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); }
@@ -3226,6 +3541,47 @@ body {
   .sw-denomination-grid .sw-denomination-cell-toned .sw-denomination-cell-zero { color: GrayText; }
 }
 
+.sw-denomination-scroll-aligned {
+  container-type: inline-size;
+}
+
+.sw-denomination-label-xs { --sw-denomination-label-width: 4rem; }
+.sw-denomination-label-sm { --sw-denomination-label-width: 6rem; }
+.sw-denomination-label-md { --sw-denomination-label-width: 8rem; }
+.sw-denomination-label-lg { --sw-denomination-label-width: 12rem; }
+.sw-denomination-label-xl { --sw-denomination-label-width: 16rem; }
+
+.sw-denomination-strip-aligned {
+  --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))
+  );
+}
+
+.sw-denomination-strip-aligned th,
+.sw-denomination-strip-aligned td {
+  box-sizing: border-box;
+}
+
+.sw-denomination-strip-aligned .sw-denomination-label,
+.sw-denomination-strip-aligned thead .sw-denomination-corner:first-child {
+  width: var(--sw-denomination-label-width);
+}
+
+.sw-denomination-strip-aligned .sw-denomination-cell,
+.sw-denomination-strip-aligned .sw-denomination-head:not(.sw-denomination-total-head),
+.sw-denomination-strip-aligned .sw-denomination-total,
+.sw-denomination-strip-aligned .sw-denomination-total-head {
+  width: var(--sw-denomination-share);
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-denomination-strip-aligned { --sw-denomination-total-shown: 0; }
+  .sw-denomination-strip-aligned .sw-denomination-total,
+  .sw-denomination-strip-aligned .sw-denomination-total-head { width: 0; }
+}
+
 @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; }
@@ -3255,6 +3611,17 @@ body {
   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);
+}
+
 .sw-field-adorned {
   background-color: var(--sw-glass-fill);
   border: 1px solid var(--sw-color-border);
@@ -3321,6 +3688,8 @@ body {
 @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) {
     border-color: GrayText;
@@ -3516,6 +3885,14 @@ body {
   .sw-hide-below-md { display: none; }
 }
 
+@media (min-width: 64rem) {
+  .sw-hide-from-lg { display: none; }
+}
+
+@media not all and (min-width: 64rem) {
+  .sw-hide-below-lg { display: none; }
+}
+
 .sw-border { border: 1px solid var(--sw-color-border); }
 .sw-border-dashed { border: 1px dashed var(--sw-color-border); }
 

package/dist/visibility-classes.d.ts

@@ -1,6 +1,6 @@
-import { type Breakpoint } from './css/breakpoints.js';
+import { type VisibilityBreakpoint } from './css/breakpoints.js';
 export type VisibilityProps = {
-    hideBelow?: Breakpoint;
-    hideFrom?: Breakpoint;
+    hideBelow?: VisibilityBreakpoint;
+    hideFrom?: VisibilityBreakpoint;
 };
 export declare function visibilityClassNames({ hideBelow, hideFrom, }: VisibilityProps): string[];

package/dist/visibility-classes.js

@@ -1,5 +1,11 @@
-import { hideClass } from './css/breakpoints.js';
+import { hideClass, visibilityBreakpoints, } from './css/breakpoints.js';
+function assertBreakpoint(prop, breakpoint) {
+    if (breakpoint && !visibilityBreakpoints.includes(breakpoint))
+        throw new RangeError(`${prop} must be one of ${visibilityBreakpoints.join(', ')}`);
+}
 export function visibilityClassNames({ hideBelow, hideFrom, }) {
+    assertBreakpoint('hideBelow', hideBelow);
+    assertBreakpoint('hideFrom', hideFrom);
     return [
         ...(hideBelow ? [hideClass('below', hideBelow)] : []),
         ...(hideFrom ? [hideClass('from', hideFrom)] : []),

package/package.json

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