@scalewing/react 1.28.0 → 1.30.0

package/dist/styles.css

@@ -19,6 +19,14 @@
   --sw-color-warning: #B54708;
   --sw-color-border: #D2D2D7;
   --sw-button-secondary-border: #D2D2D7;
+  --sw-categorical-green: #2E8F47;
+  --sw-categorical-blue: #0A7AFF;
+  --sw-categorical-orange: #D57F00;
+  --sw-categorical-purple: #8E5CD9;
+  --sw-categorical-teal: #1A96AD;
+  --sw-categorical-rose: #C2415D;
+  --sw-categorical-neutral: #8E8E93;
+  --sw-categorical-on: #FFFFFF;
   --sw-space-0: 0px;
   --sw-space-1: 4px;
   --sw-space-2: 8px;
@@ -84,6 +92,14 @@
   --sw-color-warning: #FDB022;
   --sw-color-border: #3A3A3C;
   --sw-button-secondary-border: #3A3A3C;
+  --sw-categorical-green: #2E8F47;
+  --sw-categorical-blue: #0A7AFF;
+  --sw-categorical-orange: #D57F00;
+  --sw-categorical-purple: #8E5CD9;
+  --sw-categorical-teal: #1A96AD;
+  --sw-categorical-rose: #C2415D;
+  --sw-categorical-neutral: #8E8E93;
+  --sw-categorical-on: #FFFFFF;
   --sw-space-0: 0px;
   --sw-space-1: 4px;
   --sw-space-2: 8px;
@@ -812,10 +828,10 @@ body {
 }
 
 /* Backdrop blur makes a glass surface its own stacking context, so it lifts while it holds an open popup (see stacking.ts). */
-.sw-card-glass:has(.sw-select-list, .sw-action-menu-list, .sw-tooltip:not([hidden]), .sw-date-field-calendar),
-.sw-accordion:has(.sw-select-list, .sw-action-menu-list, .sw-tooltip:not([hidden]), .sw-date-field-calendar) {
+.sw-card-glass:has(.sw-select-list, .sw-action-menu-list, .sw-multi-select-panel, .sw-tooltip:not([hidden]), .sw-date-field-calendar),
+.sw-accordion:has(.sw-select-list, .sw-action-menu-list, .sw-multi-select-panel, .sw-tooltip:not([hidden]), .sw-date-field-calendar) {
   position: relative;
-  z-index: 3;
+  z-index: 4;
 }
 
 .sw-card-outlined {
@@ -915,6 +931,53 @@ body {
   .sw-button-group > * { width: 100%; }
 }
 
+.sw-button-group.sw-button-group-attached {
+  align-items: stretch;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 0;
+  isolation: isolate;
+  max-width: 100%;
+  width: fit-content;
+}
+
+.sw-button-group.sw-button-group-attached > .sw-button {
+  border-radius: 0;
+}
+
+.sw-button-group.sw-button-group-attached > .sw-button + .sw-button {
+  margin-inline-start: -1px;
+}
+
+.sw-button-group.sw-button-group-attached > .sw-button:first-child {
+  border-end-start-radius: var(--sw-radius-sm);
+  border-start-start-radius: var(--sw-radius-sm);
+}
+
+.sw-button-group.sw-button-group-attached > .sw-button:last-child {
+  border-end-end-radius: var(--sw-radius-sm);
+  border-start-end-radius: var(--sw-radius-sm);
+}
+
+.sw-button-group.sw-button-group-attached > .sw-button + .sw-button:not(.sw-button-secondary) {
+  border-inline-start-color: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+.sw-button-group.sw-button-group-attached > .sw-button[aria-pressed='true'] {
+  position: relative;
+  z-index: 1;
+}
+
+.sw-button-group.sw-button-group-attached > .sw-button:focus-visible {
+  position: relative;
+  z-index: 2;
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-button-group.sw-button-group-attached { align-items: stretch; flex-direction: row; }
+  .sw-button-group.sw-button-group-attached > * { width: auto; }
+}
+
 .sw-checkbox {
   display: flex;
   flex-direction: column;
@@ -1348,6 +1411,45 @@ body {
   color: var(--sw-color-onAccent);
 }
 
+.sw-segmented.sw-segmented-with-icons:not(.sw-segmented-filled) {
+  background: var(--sw-color-subtle);
+  border-color: transparent;
+}
+
+.sw-segmented-with-icons:not(.sw-segmented-filled) .sw-segmented-item-selected {
+  box-shadow: var(--sw-elevation-sm);
+}
+
+.sw-segmented-with-icons .sw-segmented-item {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  justify-content: center;
+}
+
+.sw-segmented-with-icons:not(.sw-segmented-filled) .sw-segmented-item {
+  font-size: 15px;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  min-height: var(--sw-control-md-min-height);
+  padding-inline: var(--sw-space-2) var(--sw-space-3);
+}
+
+.sw-segmented-item-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-segmented.sw-segmented-with-icons[aria-invalid='true'] {
+  border-color: var(--sw-color-danger);
+}
+
+@media (forced-colors: active) {
+  .sw-segmented.sw-segmented-with-icons:not(.sw-segmented-filled) { border-color: CanvasText; }
+  .sw-segmented-with-icons:not(.sw-segmented-filled) .sw-segmented-item-selected { outline: 2px solid Highlight; }
+  .sw-segmented.sw-segmented-with-icons[aria-invalid='true'] { border-color: Mark; }
+}
+
 .sw-segmented-disabled {
   opacity: var(--sw-disabled-opacity);
 }
@@ -1538,6 +1640,118 @@ body {
   .sw-table-sort-none { opacity: 1; }
 }
 
+.sw-table .sw-table-tone-success {
+  color: var(--sw-color-success);
+}
+
+.sw-table .sw-table-tone-danger {
+  color: var(--sw-color-danger);
+}
+
+.sw-table .sw-table-tone-muted {
+  color: var(--sw-color-muted);
+}
+
+.sw-table .sw-table-tone-accent {
+  color: var(--sw-color-accent);
+}
+
+.sw-table-column-rules :is(th, td) + :is(th, td) {
+  border-inline-start: 1px solid var(--sw-color-border);
+}
+
+/* A sticky header cell is positioned, so the next cell's fill covers a
+   collapsed border; its rule is a border on its own ::after instead, so
+   forced colours keep it and the logical inset mirrors it. */
+.sw-table-sticky.sw-table-column-rules thead :is(th, td) + :is(th, td)::after {
+  border-inline-start: 1px solid var(--sw-color-border);
+  content: '';
+  inset-block: 0;
+  inset-inline-start: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+:where(.sw-table tbody, .sw-table tfoot) th[scope='row'] {
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+}
+
+.sw-table-row-sub > th[scope='row'] {
+  padding-inline-start: calc(var(--sw-space-3) + var(--sw-space-6) + var(--sw-space-3));
+  position: relative;
+}
+
+.sw-table-compact .sw-table-row-sub > th[scope='row'] {
+  padding-inline-start: calc(var(--sw-space-2) + var(--sw-space-6) + var(--sw-space-3));
+}
+
+.sw-table-row-sub > th[scope='row']::after {
+  block-size: var(--sw-space-5);
+  border-inline-start: 2px solid var(--sw-color-border);
+  content: '';
+  inset-block-start: 50%;
+  inset-inline-start: calc(var(--sw-space-3) + var(--sw-space-6));
+  pointer-events: none;
+  position: absolute;
+  transform: translateY(-50%);
+}
+
+.sw-table-compact .sw-table-row-sub > th[scope='row']::after {
+  inset-inline-start: calc(var(--sw-space-2) + var(--sw-space-6));
+}
+
+.sw-table .sw-table-row-struck > :is(td, th) {
+  background: var(--sw-color-subtle);
+  color: var(--sw-color-muted);
+  text-decoration: line-through;
+}
+
+.sw-table .sw-table-row-struck > [class*='sw-table-tone-'] {
+  color: var(--sw-color-muted);
+}
+
+@media (forced-colors: active) {
+  .sw-table-column-rules :is(th, td) + :is(th, td),
+  .sw-table-sticky.sw-table-column-rules thead :is(th, td) + :is(th, td)::after { border-color: CanvasText; }
+  .sw-table-row-sub > th[scope='row']::after { border-color: CanvasText; }
+}
+
+.sw-table tfoot :is(th, td) {
+  font-weight: 600;
+  position: relative;
+}
+
+.sw-table tfoot > tr:first-child > :is(th, td)::before {
+  border-top: 2px solid var(--sw-color-border);
+  content: '';
+  /* Over the last body row's 1 px border, so the rule reads 2 px. */
+  inset-block-start: -1px;
+  inset-inline: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.sw-table .sw-table-footer-sticky :is(th, td) {
+  background: var(--sw-glass-fill);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  bottom: 0;
+  position: sticky;
+  z-index: 2;
+}
+
+.sw-table-wrap.sw-scroll-fits:has(> .sw-table > .sw-table-footer-sticky) {
+  overflow: visible;
+}
+
+@media (forced-colors: active) {
+  .sw-table tfoot > tr:first-child > :is(th, td)::before { border-color: CanvasText; }
+  .sw-table .sw-table-footer-sticky :is(th, td),
+  .sw-table-sticky thead th { background: Canvas; backdrop-filter: none; -webkit-backdrop-filter: none; }
+}
+
 .sw-table-row-selected > :first-child {
   position: relative;
 }
@@ -2031,7 +2245,7 @@ body {
 .sw-app-header-sticky {
   position: sticky;
   top: 0;
-  z-index: 4;
+  z-index: 5;
 }
 
 .sw-nav {
@@ -2155,6 +2369,54 @@ body {
   }
 }
 
+.sw-section-nav.sw-section-nav-filled .sw-section-nav-list {
+  border-bottom: 0;
+}
+
+/* (0,4,0): outranks the underline and the side list's start bar. */
+[data-theme] .sw-section-nav.sw-section-nav-filled .sw-section-nav-link {
+  border: 2px solid transparent;
+  border-radius: var(--sw-radius-sm);
+  font-weight: 500;
+  margin-bottom: 0;
+  min-height: var(--sw-control-sm-min-height);
+  padding-inline: var(--sw-control-sm-padding-inline);
+}
+
+[data-theme] .sw-section-nav.sw-section-nav-filled .sw-section-nav-link[aria-current] {
+  background: color-mix(in srgb, var(--sw-color-muted) 18%, transparent);
+  border-color: transparent;
+  color: var(--sw-color-text);
+  font-weight: 600;
+}
+
+[data-theme] .sw-section-nav-count {
+  align-items: center;
+  background: var(--sw-color-danger);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  color: var(--sw-color-onDanger);
+  display: inline-flex;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  justify-content: center;
+  letter-spacing: -0.08px;
+  line-height: 1;
+  min-height: calc(var(--sw-space-5) - var(--sw-space-1));
+  min-width: calc(var(--sw-space-5) - var(--sw-space-1));
+  padding-inline: var(--sw-space-1);
+}
+
+@media (pointer: coarse) {
+  [data-theme] .sw-section-nav.sw-section-nav-filled .sw-section-nav-link { min-height: var(--sw-control-md-min-height); }
+}
+
+@media (forced-colors: active) {
+  [data-theme] .sw-section-nav.sw-section-nav-filled .sw-section-nav-link[aria-current] { border-color: Highlight; }
+  [data-theme] .sw-section-nav-count { border: 1px solid CanvasText; }
+}
+
 @media (pointer: coarse) {
   [data-theme] .sw-section-nav-link { min-height: var(--sw-control-md-min-height); }
 }
@@ -2705,6 +2967,47 @@ body {
   color: var(--sw-color-danger);
 }
 
+/*
+ * A command's detail: its current value at the inline end in the muted
+ * colour, then a chevron pointing to the inline end (mirrored right to
+ * left). A long value wraps between words, never inside one (the command
+ * itself may break anywhere), and the chevron stays last.
+ */
+.sw-action-menu-detail {
+  align-items: center;
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  margin-inline-start: auto;
+  overflow-wrap: normal;
+  padding-inline-start: var(--sw-space-3);
+  text-align: end;
+}
+
+.sw-action-menu-chevron {
+  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);
+  flex: none;
+  transform: rotate(-45deg);
+}
+
+.sw-action-menu-chevron:dir(rtl) {
+  transform: rotate(135deg);
+}
+
+/* A hairline that sets a command apart from the ones above. */
+.sw-action-menu-separator {
+  border-top: 1px solid var(--sw-color-border);
+  margin-block: var(--sw-space-1);
+}
+
+@media (forced-colors: active) {
+  .sw-action-menu-chevron { border-color: CanvasText; }
+}
+
 /* A coarse pointer gets the full touch target: the trigger at least square, and every command as tall. */
 @media (pointer: coarse) {
   .sw-action-menu-trigger {
@@ -2717,6 +3020,138 @@ body {
   }
 }
 
+.sw-multi-select {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.sw-multi-select-trigger {
+  align-items: center;
+  appearance: none;
+  background-color: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  column-gap: var(--sw-space-2);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  margin: 0;
+  max-width: 100%;
+  min-height: var(--sw-control-md-min-height);
+  padding-inline: var(--sw-control-md-padding-inline);
+}
+
+.sw-multi-select-trigger::after {
+  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);
+  content: '';
+  flex: none;
+  margin-inline-start: var(--sw-space-2);
+  transform: translateY(-25%) rotate(45deg);
+}
+
+.sw-multi-select-trigger:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-multi-select-trigger:disabled {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-multi-select-label {
+  color: var(--sw-color-muted);
+  font-weight: 500;
+}
+
+.sw-multi-select-summary {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sw-multi-select-panel {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-sm);
+  box-shadow: var(--sw-elevation-sm), inset 0 1px 0 var(--sw-glass-specular);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  display: flex;
+  flex-direction: column;
+  inset: auto;
+  margin: 0;
+  /* The viewport, not --sw-select-max: the list is short and should show
+     whole rather than scroll inside a 22rem cap. */
+  max-height: calc(100% - var(--sw-space-2) - var(--sw-space-2));
+  max-width: calc(100% - var(--sw-space-2) - var(--sw-space-2));
+  min-width: var(--sw-select-max);
+  overflow: auto;
+  padding: var(--sw-space-1);
+  position: fixed;
+  width: max-content;
+  z-index: 10;
+}
+
+.sw-multi-select-commands {
+  border-bottom: 1px solid var(--sw-color-border);
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--sw-space-1);
+  padding-bottom: var(--sw-space-1);
+}
+
+.sw-multi-select-row-separated {
+  border-top: 1px solid var(--sw-color-border);
+  margin-top: var(--sw-space-1);
+  padding-top: var(--sw-space-1);
+}
+
+.sw-checkbox-label.sw-multi-select-option {
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 400;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  padding-inline: var(--sw-space-2);
+  width: 100%;
+}
+
+.sw-multi-select-option:hover {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+.sw-multi-select-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-multi-select-text {
+  min-width: 0;
+}
+
+@media (forced-colors: active) {
+  .sw-multi-select-trigger::after { border-color: CanvasText; }
+  .sw-multi-select-panel { border-color: CanvasText; }
+  .sw-multi-select-commands,
+  .sw-multi-select-row-separated { border-color: CanvasText; }
+}
+
 .sw-action-bar {
   align-items: center;
   background: var(--sw-glass-fill);
@@ -2808,14 +3243,14 @@ body {
 .sw-action-bar-sticky {
   bottom: calc(var(--sw-space-2) + env(safe-area-inset-bottom, 0px));
   position: sticky;
-  z-index: 2;
+  z-index: 3;
 }
 
 @media not all and (min-width: 48rem) {
   .sw-action-bar-sticky-below-md {
     bottom: calc(var(--sw-space-2) + env(safe-area-inset-bottom, 0px));
     position: sticky;
-    z-index: 2;
+    z-index: 3;
   }
 }
 
@@ -3126,6 +3561,39 @@ body {
   .sw-notice-band { border-width: 0 0 1px; }
 }
 
+.sw-glyph-tile {
+  align-items: center;
+  background: var(--sw-glyph-tile-fill);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-categorical-on);
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+}
+
+.sw-glyph-tile > svg {
+  flex: none;
+  height: var(--sw-space-4);
+  width: var(--sw-space-4);
+}
+
+.sw-glyph-tile-green { --sw-glyph-tile-fill: var(--sw-categorical-green); }
+.sw-glyph-tile-blue { --sw-glyph-tile-fill: var(--sw-categorical-blue); }
+.sw-glyph-tile-orange { --sw-glyph-tile-fill: var(--sw-categorical-orange); }
+.sw-glyph-tile-purple { --sw-glyph-tile-fill: var(--sw-categorical-purple); }
+.sw-glyph-tile-teal { --sw-glyph-tile-fill: var(--sw-categorical-teal); }
+.sw-glyph-tile-rose { --sw-glyph-tile-fill: var(--sw-categorical-rose); }
+.sw-glyph-tile-neutral { --sw-glyph-tile-fill: var(--sw-categorical-neutral); }
+
+.sw-glyph-tile-sm { height: var(--sw-space-5); width: var(--sw-space-5); }
+.sw-glyph-tile-md { height: var(--sw-control-xs-min-height); width: var(--sw-control-xs-min-height); }
+.sw-glyph-tile-lg { height: var(--sw-space-6); width: var(--sw-space-6); }
+
+@media (forced-colors: active) {
+  .sw-glyph-tile { border: 1px solid CanvasText; color: CanvasText; }
+}
+
 .sw-tooltip-anchor {
   display: inline-flex;
   position: relative;
@@ -3357,7 +3825,7 @@ body {
   -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
   position: sticky;
   top: env(safe-area-inset-top, 0px);
-  z-index: 4;
+  z-index: 5;
 }
 
 @media (prefers-reduced-transparency: reduce) {
@@ -3472,11 +3940,35 @@ body {
   opacity: var(--sw-disabled-opacity);
 }
 
+/*
+ * An error: the message under the chips in the danger colour (a polite live
+ * region, out of the layout while empty) and every chip's edge in danger,
+ * the chosen one too (it keeps its accent fill), in normal and forced
+ * colours alike.
+ */
+.sw-filter-chips-error {
+  color: var(--sw-color-danger);
+  display: block;
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  line-height: 18px;
+  padding-top: var(--sw-space-2);
+}
+
+.sw-filter-chips-error:empty { position: absolute; }
+
+.sw-filter-chips[aria-invalid='true'] .sw-filter-chip-face {
+  border-color: var(--sw-color-danger);
+}
+
 @media (forced-colors: active) {
   .sw-filter-chip-face { background: Canvas; border-color: CanvasText; color: CanvasText; }
+  .sw-filter-chips-error { color: Mark; }
   .sw-filter-chip-input:checked + .sw-filter-chip-face { background: Highlight; border-color: Highlight; color: HighlightText; }
   .sw-filter-chip-input:focus-visible + .sw-filter-chip-face { outline-color: Highlight; }
   .sw-filter-chip-count { color: inherit; }
+  /* After the checked rule, so every chip, the chosen one too, takes the edge. */
+  .sw-filter-chips[aria-invalid='true'] .sw-filter-chip-face { border-color: Mark; }
 }
 
 .sw-grid {
@@ -4617,6 +5109,7 @@ body {
   .sw-badge-neutral,
   .sw-segmented,
   .sw-table-sticky thead th,
+  .sw-table .sw-table-footer-sticky :is(th, td),
   .sw-denomination-strip .sw-denomination-label,
   .sw-denomination-strip thead .sw-denomination-corner:first-child,
   .sw-bar-chart-track,
@@ -4624,6 +5117,7 @@ body {
   .sw-accordion,
   .sw-select-list,
   .sw-action-menu-list,
+  .sw-multi-select-panel,
   .sw-date-field-calendar,
   .sw-toast {
     background: var(--sw-color-surface);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.28.0",
+  "version": "1.30.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@scalewing/tokens": "^1.4.0"
+    "@scalewing/tokens": "^1.5.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",