@scalewing/react 1.11.0 → 1.13.0

package/dist/styles.css

@@ -660,6 +660,31 @@ body {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
+/* The browser's placeholder gray is one fixed #757575 (2.3:1 on a dark
+   field); muted is tuned per palette and scheme. */
+[data-theme] :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), textarea)::placeholder {
+  color: var(--sw-color-muted);
+  opacity: 1;
+}
+
+[data-theme] :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), textarea):disabled,
+[data-theme] select:disabled {
+  background-color: var(--sw-color-subtle);
+  border-style: dashed;
+  cursor: not-allowed;
+  opacity: 1;
+  -webkit-text-fill-color: currentColor;
+}
+
+@media (forced-colors: active) {
+  [data-theme] :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), textarea):disabled,
+  [data-theme] select:disabled {
+    border-color: GrayText;
+  color: GrayText;
+  -webkit-text-fill-color: GrayText;
+  }
+}
+
 .sw-padding-0 { padding: var(--sw-space-0); }
 .sw-padding-1 { padding: var(--sw-space-1); }
 .sw-padding-2 { padding: var(--sw-space-2); }
@@ -849,15 +874,17 @@ body {
   opacity: var(--sw-disabled-opacity);
 }
 
-.sw-button[aria-pressed='false'] {
-  opacity: var(--sw-quiet-opacity);
-}
-
 .sw-button-primary { background: var(--sw-color-accent); border-color: transparent; color: var(--sw-color-onAccent); }
 .sw-button-secondary { background: var(--sw-color-secondary); border-color: var(--sw-button-secondary-border); color: var(--sw-color-onSecondary); }
 .sw-button-tertiary { background: var(--sw-color-tertiary); border-color: transparent; color: var(--sw-color-onTertiary); }
 .sw-button-ghost { background: transparent; border-color: transparent; color: var(--sw-color-accent); }
 .sw-button-danger { background: var(--sw-color-danger); border-color: transparent; color: var(--sw-color-onDanger); }
+.sw-button[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--sw-color-background), 0 0 0 4px var(--sw-color-accent); }
+.sw-button[aria-pressed='true']:focus-visible { outline-offset: calc(var(--sw-focus-ring-offset) + 4px); }
+@media (forced-colors: active) {
+  .sw-button[aria-pressed='true'] { border-color: Highlight; position: relative; }
+  .sw-button[aria-pressed='true']::after { border: 2px solid Highlight; border-radius: inherit; content: ''; inset: calc(-1px - 4px); pointer-events: none; position: absolute; }
+}
 .sw-button-xs { min-height: 28px; padding-inline: 10px; }
 .sw-button-sm { min-height: 32px; padding-inline: 12px; }
 .sw-button-md { min-height: 44px; padding-inline: 16px; }
@@ -968,6 +995,7 @@ body {
 
 .sw-checkbox-description { color: var(--sw-color-muted); }
 .sw-checkbox-error { color: var(--sw-color-danger); }
+.sw-checkbox-error:empty { position: absolute; }
 
 @media (prefers-reduced-transparency: reduce) {
   .sw-checkbox-mark { background: var(--sw-color-surface); }
@@ -1071,7 +1099,7 @@ body {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
-.sw-radio-group:has(.sw-radio-group-error) .sw-radio-group-mark {
+.sw-radio-group[aria-invalid='true'] .sw-radio-group-mark {
   border-color: var(--sw-color-danger);
 }
 
@@ -1080,6 +1108,14 @@ body {
   opacity: var(--sw-disabled-opacity);
 }
 
+/* A consumer glyph beside the label, in the label's color and the option's gap. */
+.sw-radio-group-icon {
+  align-items: center;
+  color: var(--sw-color-text);
+  display: inline-flex;
+  flex: none;
+}
+
 .sw-radio-group-text {
   color: var(--sw-color-text);
   font-family: var(--sw-font-sans);
@@ -1098,6 +1134,7 @@ body {
 
 .sw-radio-group-description { color: var(--sw-color-muted); }
 .sw-radio-group-error { color: var(--sw-color-danger); }
+.sw-radio-group-error:empty { position: absolute; }
 
 @media (prefers-reduced-transparency: reduce) {
   .sw-radio-group-mark { background: var(--sw-color-surface); }
@@ -1108,7 +1145,7 @@ body {
   .sw-radio-group-mark { background: Canvas; border-color: CanvasText; }
   .sw-radio-group-input:checked + .sw-radio-group-mark { background: Highlight; border-color: Highlight; }
   .sw-radio-group-input:checked + .sw-radio-group-mark::after { background: HighlightText; }
-  .sw-radio-group:has(.sw-radio-group-error) .sw-radio-group-mark { border-color: CanvasText; }
+  .sw-radio-group[aria-invalid='true'] .sw-radio-group-mark { border-color: CanvasText; }
 }
 
 .sw-badge {
@@ -1163,6 +1200,38 @@ body {
   color: var(--sw-color-warning);
 }
 
+:is(.sw-button-primary, .sw-button-secondary, .sw-button-tertiary, .sw-button-danger) .sw-badge { background: var(--sw-color-surface); color: var(--sw-color-text); }
+
+.sw-segmented-field {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+}
+
+.sw-segmented-field-filled {
+  display: flex;
+}
+
+.sw-segmented-field > .sw-field-error {
+  contain: inline-size;
+}
+
+.sw-segmented-field:has(> .sw-field-error:not(:empty)) {
+  min-inline-size: min(100%, 24ch);
+}
+
+.sw-inline > .sw-segmented-field > .sw-segmented {
+  align-self: flex-start;
+}
+
+.sw-segmented[aria-invalid='true'] {
+  border-color: var(--sw-color-danger);
+}
+
+@media (forced-colors: active) {
+  .sw-segmented[aria-invalid='true'] { border-color: Mark; }
+}
+
 .sw-segmented {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
@@ -1293,28 +1362,20 @@ body {
 }
 
 .sw-table-row-selected > :first-child {
-  padding-inline-start: var(--sw-space-5);
   position: relative;
 }
 
-.sw-table-compact .sw-table-row-selected > :first-child {
-  padding-inline-start: var(--sw-space-4);
-}
-
 .sw-table-row-selected > :first-child::before {
-  background: var(--sw-color-accent);
-  border-radius: var(--sw-radius-pill);
+  border-inline-start: var(--sw-space-1) solid var(--sw-color-accent);
   content: '';
-  height: var(--sw-space-2);
-  inset-block-start: 50%;
-  inset-inline-start: var(--sw-space-2);
+  inset-block: 0;
+  inset-inline-start: 0;
+  pointer-events: none;
   position: absolute;
-  transform: translateY(-50%);
-  width: var(--sw-space-2);
 }
 
-.sw-table-compact .sw-table-row-selected > :first-child::before {
-  inset-inline-start: var(--sw-space-1);
+@media (forced-colors: active) {
+  .sw-table-row-selected > :first-child::before { border-color: Highlight; }
 }
 
 .sw-date-field {
@@ -1326,12 +1387,11 @@ body {
   width: max-content;
 }
 
+/* The label inherits the canvas's body type, as Field's does; the label
+   words inside it are a Text label span. The same line box gives the same
+   gap to the entry as a Field beside it. */
 .sw-date-field-label {
   color: var(--sw-color-text);
-  font-family: var(--sw-font-sans);
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 20px;
 }
 
 .sw-date-field-control {
@@ -1378,7 +1438,15 @@ body {
   border-color: var(--sw-color-danger);
 }
 
-.sw-date-field .sw-date-field-control > .sw-date-field-input:disabled,
+/* The entry looks locked as every text control does; its button fades as buttons do. */
+.sw-date-field .sw-date-field-control > .sw-date-field-input:disabled {
+  background-color: var(--sw-color-subtle);
+  border-style: dashed;
+  cursor: not-allowed;
+  opacity: 1;
+  -webkit-text-fill-color: currentColor;
+}
+
 .sw-date-field-button:disabled {
   cursor: not-allowed;
   opacity: var(--sw-disabled-opacity);
@@ -1431,6 +1499,7 @@ body {
 
 .sw-date-field-description { color: var(--sw-color-muted); }
 .sw-date-field-error { color: var(--sw-color-danger); }
+.sw-date-field-error:empty { position: absolute; }
 
 .sw-date-field-calendar {
   background: var(--sw-glass-fill);
@@ -1574,6 +1643,11 @@ body {
 
 @media (forced-colors: active) {
   .sw-date-field .sw-date-field-control > .sw-date-field-input[aria-invalid='true'] { border-color: CanvasText; }
+  .sw-date-field .sw-date-field-control > .sw-date-field-input:disabled {
+    border-color: GrayText;
+  color: GrayText;
+  -webkit-text-fill-color: GrayText;
+  }
   .sw-date-field-calendar { border-color: CanvasText; }
   .sw-date-field-day[aria-current='date'] { border-color: CanvasText; }
   .sw-date-field-day[aria-selected='true'] {
@@ -1811,12 +1885,12 @@ body {
   border-bottom: 2px solid var(--sw-color-muted);
   border-right: 2px solid var(--sw-color-muted);
   box-sizing: border-box;
-  flex: none;
   height: var(--sw-space-2);
+  width: var(--sw-space-2);
+  flex: none;
   margin-inline-end: var(--sw-space-1);
   transform: rotate(-45deg);
   transition: transform var(--sw-motion-default) var(--sw-motion-easing);
-  width: var(--sw-space-2);
 }
 
 .sw-accordion-marker:dir(rtl) { transform: rotate(135deg); }
@@ -1843,18 +1917,10 @@ body {
 }
 
 .sw-select-trigger {
+  align-items: center;
   appearance: none;
   -webkit-appearance: none;
   background-color: var(--sw-glass-fill);
-  background-image:
-    linear-gradient(45deg, transparent 50%, var(--sw-color-muted) 50%),
-    linear-gradient(135deg, var(--sw-color-muted) 50%, transparent 50%);
-  background-repeat: no-repeat;
-  background-size: var(--sw-space-1) var(--sw-space-1),
-    var(--sw-space-1) var(--sw-space-1);
-  background-position:
-    calc(100% - var(--sw-space-4)) calc(50% - 1px),
-    calc(100% - calc(var(--sw-space-4) - var(--sw-space-1))) calc(50% - 1px);
   border: 1px solid var(--sw-color-border);
   border-radius: var(--sw-radius-sm);
   box-sizing: border-box;
@@ -1863,19 +1929,64 @@ body {
   display: inline-flex;
   font-family: inherit;
   font-size: inherit;
+  gap: var(--sw-space-3);
   letter-spacing: inherit;
   line-height: inherit;
   margin: 0;
+  max-width: 100%;
   min-height: var(--sw-control-md-min-height);
   padding-block: 0;
   padding-inline: var(--sw-control-md-padding-inline);
-  padding-inline-end: calc(
-    var(--sw-control-md-padding-inline) + var(--sw-space-5)
-  );
   text-align: start;
+}
+
+/* The chevron Accordion uses, pointing down, centred on the text. */
+.sw-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;
+  transform: translateY(-25%) rotate(45deg);
+}
+
+/*
+ * The current label and a hidden copy of every option's label share one grid
+ * cell, so the trigger is as wide as the longest option and keeps that width
+ * when the value changes; past the available width the label ellipsizes.
+ */
+.sw-select-value {
+  display: grid;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.sw-select-value > * {
+  grid-area: 1 / 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.sw-select-value-sizer {
+  visibility: hidden;
+}
+
+.sw-select-placeholder {
+  color: var(--sw-color-muted);
+}
+
+.sw-select-invalid .sw-select-trigger {
+  border-color: var(--sw-color-danger);
+}
+
+.sw-select-value-sizer::before {
+  content: attr(data-label);
+}
+
 .sw-select-trigger:focus {
   box-shadow: none;
   outline: none;
@@ -1887,17 +1998,17 @@ body {
 }
 
 .sw-select-xs .sw-select-trigger {
-  background-position:
-    calc(100% - var(--sw-space-3)) calc(50% - 1px),
-    calc(100% - calc(var(--sw-space-3) - var(--sw-space-1))) calc(50% - 1px);
   font-size: 13px;
+  gap: var(--sw-space-2);
   letter-spacing: -0.08px;
   line-height: 18px;
   min-height: var(--sw-control-xs-min-height);
   padding-inline: var(--sw-control-xs-padding-inline);
-  padding-inline-end: calc(
-    var(--sw-control-xs-padding-inline) + var(--sw-space-5)
-  );
+}
+
+@media (forced-colors: active) {
+  .sw-select-trigger::after { border-color: CanvasText; }
+  .sw-select-invalid .sw-select-trigger { border-color: Mark; }
 }
 
 .sw-select-list {
@@ -2544,8 +2655,15 @@ body {
   line-height: 18px;
 }
 
+/*
+ * A zero-count chip is quiet without fading: it drops the glass fill and
+ * sets its label in the muted color, which is 4.5:1 on the canvas, surface
+ * and subtle fill in every palette. It can still be chosen, so it never
+ * reads as disabled.
+ */
 .sw-filter-chip-quiet:not(:has(.sw-filter-chip-input:checked)) .sw-filter-chip-face {
-  opacity: var(--sw-quiet-opacity);
+  background: transparent;
+  color: var(--sw-color-muted);
 }
 
 .sw-filter-chip-input:checked + .sw-filter-chip-face {
@@ -2573,7 +2691,6 @@ body {
   .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; }
-  .sw-filter-chip-quiet:not(:has(.sw-filter-chip-input:checked)) .sw-filter-chip-face { opacity: 1; color: GrayText; border-color: GrayText; }
 }
 
 .sw-grid {
@@ -2837,8 +2954,15 @@ body {
   text-align: center;
 }
 
+/*
+ * Below md the aria-hidden copy under each row label is what shows; the
+ * total cell stays in the table, visually hidden, so a screen reader still
+ * reads each total in its row and under its column header.
+ */
 @media not all and (min-width: 48rem) {
-  .sw-denomination-strip .sw-denomination-total { display: none; }
+  .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-inline { display: block; }
   .sw-denomination-label-body { flex-direction: column; align-items: flex-start; gap: var(--sw-space-1); }
   .sw-denomination-strip th,
@@ -2869,6 +2993,9 @@ body {
 .sw-field-description { color: var(--sw-color-muted); }
 .sw-field-error { color: var(--sw-color-danger); }
 
+/* An error region is always rendered as a live region; empty, it leaves the layout (and its gap) but stays in the accessibility tree. */
+.sw-field-error:empty { position: absolute; }
+
 [data-theme] .sw-field-invalid :is(input, select, textarea) {
   border-color: var(--sw-color-danger);
 }
@@ -2925,10 +3052,26 @@ body {
 
 .sw-field-invalid .sw-field-adorned { border-color: var(--sw-color-danger); }
 
+/* The frame draws the surface, so it carries the disabled look for its input. */
+.sw-field-adorned:has(> input:disabled) {
+  background-color: var(--sw-color-subtle);
+  border-style: dashed;
+  cursor: not-allowed;
+  opacity: 1;
+  -webkit-text-fill-color: currentColor;
+}
+
+[data-theme] .sw-field-adorned > input:disabled { background: transparent; }
+
 @media (forced-colors: active) {
   [data-theme] .sw-field-invalid :is(input, select, textarea),
   .sw-field-invalid .sw-field-adorned { border-color: Mark; }
   .sw-field-prefix, .sw-field-suffix { color: CanvasText; }
+  .sw-field-adorned:has(> input:disabled) {
+    border-color: GrayText;
+  color: GrayText;
+  -webkit-text-fill-color: GrayText;
+  }
   .sw-field-error, .sw-field-required { color: Mark; }
 }
 
@@ -3015,6 +3158,31 @@ body {
   width: max-content;
 }
 
+.sw-toast-success { --sw-toast-tone: var(--sw-color-success); border-color: var(--sw-toast-tone); }
+.sw-toast-warning { --sw-toast-tone: var(--sw-color-warning); border-color: var(--sw-toast-tone); }
+.sw-toast-danger { --sw-toast-tone: var(--sw-color-danger); border-color: var(--sw-toast-tone); }
+
+.sw-toast-row {
+  align-items: center;
+  display: flex;
+  gap: var(--sw-space-2);
+}
+
+.sw-toast-icon {
+  color: var(--sw-toast-tone, currentColor);
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-toast-body {
+  min-width: 0;
+}
+
+@media (forced-colors: active) {
+  .sw-toast { border-color: CanvasText; }
+  .sw-toast-icon { color: CanvasText; }
+}
+
 .sw-toast:popover-open {
   animation: sw-toast-float var(--sw-motion-default) var(--sw-motion-easing);
 }

package/package.json

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