@scalewing/react 1.27.0 → 1.29.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;
@@ -48,6 +56,7 @@
   --sw-container-max: 72rem;
   --sw-dialog-max: 32rem;
   --sw-dialog-max-lg: 56rem;
+  --sw-dialog-max-xl: 65rem;
   --sw-select-max: 16rem;
   --sw-split-min: 14rem;
   --sw-split-size: 22rem;
@@ -83,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;
@@ -112,6 +129,7 @@
   --sw-container-max: 72rem;
   --sw-dialog-max: 32rem;
   --sw-dialog-max-lg: 56rem;
+  --sw-dialog-max-xl: 65rem;
   --sw-select-max: 16rem;
   --sw-split-min: 14rem;
   --sw-split-size: 22rem;
@@ -810,8 +828,8 @@ 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;
 }
@@ -1346,6 +1364,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);
 }
@@ -2182,6 +2239,10 @@ body {
   max-width: min(var(--sw-dialog-max-lg), calc(100vw - var(--sw-space-8)));
 }
 
+.sw-dialog-xl {
+  max-width: min(var(--sw-dialog-max-xl), calc(100vw - var(--sw-space-8)));
+}
+
 @media not all and (min-width: 48rem) {
   .sw-dialog-sheet-below-md {
     border-radius: var(--sw-radius-lg) var(--sw-radius-lg) 0 0;
@@ -2198,6 +2259,12 @@ body {
   .sw-dialog-sheet-below-md[open] {
     animation: sw-dialog-sheet-in var(--sw-motion-default) var(--sw-motion-easing);
   }
+
+  .sw-dialog-sheet-below-md .sw-dialog-footer {
+    bottom: calc(-1 * (var(--sw-space-5) + env(safe-area-inset-bottom, 0px)));
+    margin-bottom: calc(-1 * (var(--sw-space-5) + env(safe-area-inset-bottom, 0px)));
+    padding-bottom: calc(var(--sw-space-3) + env(safe-area-inset-bottom, 0px));
+  }
 }
 
 @keyframes sw-dialog-sheet-in {
@@ -2223,7 +2290,8 @@ body {
   gap: var(--sw-space-2);
 }
 
-.sw-dialog-header > :first-child {
+.sw-dialog-header > :is(h2, h3),
+.sw-dialog-titles {
   flex: 1 1 auto;
   min-width: 0;
 }
@@ -2270,6 +2338,64 @@ body {
 .sw-dialog-close-glyph::before { transform: rotate(45deg); }
 .sw-dialog-close-glyph::after { transform: rotate(-45deg); }
 
+.sw-dialog-header-framed {
+  align-items: center;
+  gap: var(--sw-space-3);
+}
+
+.sw-dialog-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-dialog-description { margin: 0; }
+
+.sw-dialog-footer {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border-top: 1px solid var(--sw-color-border);
+  /* Sticky insets count from the scrollport's padding edge: step past the
+     dialog's own padding to sit on its bottom edge. */
+  bottom: calc(-1 * var(--sw-space-5));
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-4);
+  margin: 0 calc(-1 * var(--sw-space-5)) calc(-1 * var(--sw-space-5));
+  padding: var(--sw-space-3) var(--sw-space-5);
+  position: sticky;
+}
+
+.sw-dialog-footer-status {
+  align-items: center;
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* With no summary the live region stays in the dialog, so a first figure
+   is still announced, but it takes no room in the footer. */
+.sw-dialog-footer-status:empty {
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+.sw-dialog-footer-actions {
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+@media (forced-colors: active) {
+  .sw-dialog-footer { border-top-color: CanvasText; }
+}
+
 .sw-accordion {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
@@ -2646,6 +2772,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);
@@ -2893,6 +3151,7 @@ body {
 
 .sw-progress-accent { --sw-progress-color: var(--sw-color-accent); }
 .sw-progress-success { --sw-progress-color: var(--sw-color-success); }
+.sw-progress-warning { --sw-progress-color: var(--sw-color-warning); }
 .sw-progress-danger { --sw-progress-color: var(--sw-color-danger); }
 
 .sw-progress-heading {
@@ -2943,6 +3202,150 @@ body {
   .sw-progress-bar::-moz-progress-bar { background: Highlight; }
 }
 
+.sw-notice-info { --sw-notice-fill: var(--sw-color-accentSubtle); --sw-notice-ink: color-mix(in srgb, var(--sw-color-accent) 70%, var(--sw-color-text)); }
+.sw-notice-success { --sw-notice-fill: color-mix(in srgb, var(--sw-color-success) 10%, var(--sw-color-surface)); --sw-notice-ink: color-mix(in srgb, var(--sw-color-success) 70%, var(--sw-color-text)); }
+.sw-notice-warning { --sw-notice-fill: color-mix(in srgb, var(--sw-color-warning) 10%, var(--sw-color-surface)); --sw-notice-ink: color-mix(in srgb, var(--sw-color-warning) 70%, var(--sw-color-text)); }
+.sw-notice-danger { --sw-notice-fill: color-mix(in srgb, var(--sw-color-danger) 10%, var(--sw-color-surface)); --sw-notice-ink: color-mix(in srgb, var(--sw-color-danger) 70%, var(--sw-color-text)); }
+
+.sw-notice {
+  align-items: flex-start;
+  background: var(--sw-notice-fill);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-notice-ink);
+  column-gap: var(--sw-space-2);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  min-width: 0;
+  padding: var(--sw-space-2) var(--sw-space-3);
+  row-gap: var(--sw-space-2);
+  /* Muted words of a control inside (a field's or a checkbox's
+     description) take the ink, which keeps 4.5:1 on the fill. */
+  --sw-color-muted: var(--sw-notice-ink);
+}
+
+.sw-notice-icon {
+  display: inline-flex;
+  flex: none;
+  min-height: 20px;
+  align-items: center;
+}
+
+.sw-notice-content {
+  align-items: baseline;
+  column-gap: var(--sw-space-2);
+  display: flex;
+  flex: 1 1 16rem;
+  flex-wrap: wrap;
+  min-width: 0;
+  row-gap: var(--sw-space-1);
+}
+
+.sw-notice-stacked {
+  align-items: stretch;
+  flex-direction: column;
+  row-gap: var(--sw-space-2);
+}
+
+.sw-notice-title {
+  font-weight: 600;
+  min-width: 0;
+}
+
+.sw-notice-body {
+  flex: 1 1 auto;
+  font-weight: 400;
+  min-width: 0;
+}
+
+.sw-notice-action {
+  align-items: center;
+  align-self: flex-start;
+  display: inline-flex;
+  flex: none;
+  min-height: 20px;
+}
+
+/* A small Button keeps the note one text line tall: it overhangs the
+   padding evenly instead of growing the row. */
+.sw-notice-action > .sw-button {
+  margin-block: calc((20px - var(--sw-control-sm-min-height)) / 2);
+}
+
+/* A band across the page's full width, such as an environment strip
+   above the app header: square, the xs control height, caption type,
+   its words centered on one line that wraps on a phone. A glyph or an
+   action stays on the words' row (no wrap): the words wrap instead. */
+.sw-notice-band {
+  align-items: center;
+  border-radius: 0;
+  flex-wrap: nowrap;
+  font-size: 13px;
+  justify-content: center;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  min-height: var(--sw-control-xs-min-height);
+  padding: var(--sw-space-1) var(--sw-space-4);
+  text-align: center;
+  width: 100%;
+}
+
+.sw-notice-band .sw-notice-content {
+  flex: 0 1 auto;
+  justify-content: center;
+}
+
+.sw-notice-band .sw-notice-icon,
+.sw-notice-band .sw-notice-action { min-height: 18px; }
+
+.sw-notice-band .sw-notice-action { align-self: center; }
+
+.sw-notice-band .sw-notice-action > .sw-button {
+  margin-block: calc((18px - var(--sw-control-sm-min-height)) / 2);
+}
+
+@media (forced-colors: active) {
+  .sw-notice { border: 1px solid CanvasText; }
+  .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;
@@ -3727,6 +4130,28 @@ body {
   .sw-denomination-strip-aligned .sw-denomination-total-head { width: 0; }
 }
 
+.sw-denomination-labels-plain .sw-denomination-label {
+  border-inline-start: 0;
+  color: var(--sw-color-text);
+}
+
+/* The total under a phone's label keeps its row's tone. */
+.sw-denomination-labels-plain .sw-denomination-total-inline { color: var(--sw-denomination-tone); }
+
+.sw-denomination-strip.sw-denomination-labels-plain .sw-denomination-label {
+  padding-inline-start: var(--sw-space-2);
+}
+
+.sw-denomination-strip.sw-denomination-labels-plain .sw-denomination-label::before { content: none; }
+
+@media not all and (min-width: 48rem) {
+  .sw-denomination-strip.sw-denomination-labels-plain .sw-denomination-label { padding-inline-start: var(--sw-space-1); }
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-labels-plain .sw-denomination-label { color: CanvasText; }
+}
+
 @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; }
@@ -4292,6 +4717,99 @@ body {
   }
 }
 
+.sw-toast-title {
+  display: block;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+}
+
+.sw-toast-detail {
+  color: var(--sw-color-muted);
+  font-size: 15px;
+  font-weight: 400;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+}
+
+.sw-toast-row:has(.sw-toast-title) { align-items: flex-start; }
+
+.sw-toast-row .sw-toast-body { flex: 1 1 auto; }
+
+.sw-button.sw-toast-action {
+  flex: none;
+  margin-block: calc((20px - var(--sw-control-sm-min-height)) / 2);
+}
+
+.sw-toast-interactive { pointer-events: auto; }
+
+.sw-toast-top-end {
+  bottom: auto;
+  left: auto;
+  max-width: min(var(--sw-dialog-max), calc(100% - var(--sw-space-4) - var(--sw-space-4)));
+  right: max(var(--sw-space-4), env(safe-area-inset-right, 0px));
+  top: max(var(--sw-space-4), env(safe-area-inset-top, 0px));
+  translate: none;
+}
+
+.sw-toast-top-end:dir(rtl) {
+  left: max(var(--sw-space-4), env(safe-area-inset-left, 0px));
+  right: auto;
+}
+
+.sw-toast-top-end:popover-open {
+  animation: sw-toast-drop var(--sw-motion-default) var(--sw-motion-easing);
+}
+
+@keyframes sw-toast-drop {
+  from {
+    opacity: 0;
+    translate: 0 calc(-1 * var(--sw-space-3));
+  }
+  to {
+    opacity: 1;
+    translate: none;
+  }
+}
+
+.sw-toast-remaining {
+  background: var(--sw-color-border);
+  border-radius: var(--sw-radius-pill);
+  display: block;
+  height: var(--sw-space-1);
+  margin-top: var(--sw-space-2);
+  overflow: hidden;
+  position: relative;
+}
+
+.sw-toast-remaining::after {
+  animation: sw-toast-remaining var(--sw-toast-duration, 0ms) linear forwards;
+  background: var(--sw-toast-tone, var(--sw-color-accent));
+  content: '';
+  inset: 0;
+  position: absolute;
+  transform-origin: left center;
+}
+
+.sw-toast-remaining:dir(rtl)::after { transform-origin: right center; }
+
+.sw-toast-paused .sw-toast-remaining::after { animation-play-state: paused; }
+
+@keyframes sw-toast-remaining {
+  from { transform: scaleX(1); }
+  to { transform: scaleX(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-toast-top-end:popover-open { animation: none; }
+}
+
+@media (forced-colors: active) {
+  .sw-toast-remaining { background: Canvas; border: 1px solid CanvasText; }
+  .sw-toast-remaining::after { background: CanvasText; }
+}
+
 @media (min-width: 48rem) {
   .sw-hide-from-md { display: none; }
 }
@@ -4326,6 +4844,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.27.0",
+  "version": "1.29.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",