@scalewing/react 1.30.0 → 1.32.0

package/dist/styles.css

@@ -828,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-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) {
+.sw-card-glass:has(.sw-select-list, .sw-action-menu-list, .sw-multi-select-panel, .sw-combobox-popup, .sw-tooltip:not([hidden]), .sw-date-field-calendar),
+.sw-accordion:has(.sw-select-list, .sw-action-menu-list, .sw-multi-select-panel, .sw-combobox-popup, .sw-tooltip:not([hidden]), .sw-date-field-calendar) {
   position: relative;
   z-index: 4;
 }
@@ -913,6 +913,13 @@ body {
 .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-neutral { background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent); border-color: transparent; color: var(--sw-color-text); }
+.sw-button-disabled-neutral:disabled:not(.sw-button-ghost) {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  border-color: transparent;
+  color: color-mix(in srgb, var(--sw-color-muted) 48%, transparent);
+  opacity: 1;
+}
 .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) {
@@ -978,6 +985,30 @@ body {
   .sw-button-group.sw-button-group-attached > * { width: auto; }
 }
 
+.sw-button-group.sw-button-group-attached.sw-button-group-track {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  border-radius: var(--sw-radius-sm);
+}
+
+.sw-button-group.sw-button-group-attached.sw-button-group-track > .sw-button {
+  background: transparent;
+  border-color: transparent;
+  color: var(--sw-color-text);
+}
+
+.sw-button-group.sw-button-group-attached.sw-button-group-track > .sw-button + .sw-button {
+  border-inline-start-color: var(--sw-color-border);
+}
+
+.sw-button-group.sw-button-group-attached.sw-button-group-track > .sw-button:disabled {
+  opacity: var(--sw-disabled-opacity);
+}
+
+@media (forced-colors: active) {
+  .sw-button-group.sw-button-group-attached.sw-button-group-track { outline: 1px solid CanvasText; }
+  .sw-button-group.sw-button-group-attached.sw-button-group-track > .sw-button[aria-pressed='true'] { border-color: Highlight; }
+}
+
 .sw-checkbox {
   display: flex;
   flex-direction: column;
@@ -1319,7 +1350,7 @@ 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); }
+:is(.sw-button-primary, .sw-button-secondary, .sw-button-tertiary, .sw-button-danger, .sw-button-neutral) .sw-badge { background: var(--sw-color-surface); color: var(--sw-color-text); }
 
 .sw-segmented-field {
   display: inline-flex;
@@ -1411,12 +1442,12 @@ body {
   color: var(--sw-color-onAccent);
 }
 
-.sw-segmented.sw-segmented-with-icons:not(.sw-segmented-filled) {
+.sw-segmented.sw-segmented-with-icons:not(.sw-segmented-filled, .sw-segmented-raised) {
   background: var(--sw-color-subtle);
   border-color: transparent;
 }
 
-.sw-segmented-with-icons:not(.sw-segmented-filled) .sw-segmented-item-selected {
+.sw-segmented-with-icons:not(.sw-segmented-filled, .sw-segmented-raised) .sw-segmented-item-selected {
   box-shadow: var(--sw-elevation-sm);
 }
 
@@ -1427,7 +1458,7 @@ body {
   justify-content: center;
 }
 
-.sw-segmented-with-icons:not(.sw-segmented-filled) .sw-segmented-item {
+.sw-segmented-with-icons:not(.sw-segmented-filled, .sw-segmented-raised) .sw-segmented-item {
   font-size: 15px;
   letter-spacing: -0.2px;
   line-height: 20px;
@@ -1445,11 +1476,57 @@ body {
 }
 
 @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:not(.sw-segmented-filled, .sw-segmented-raised) { border-color: CanvasText; }
+  .sw-segmented-with-icons:not(.sw-segmented-filled, .sw-segmented-raised) .sw-segmented-item-selected { outline: 2px solid Highlight; }
   .sw-segmented.sw-segmented-with-icons[aria-invalid='true'] { border-color: Mark; }
 }
 
+.sw-segmented.sw-segmented-raised {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  border-color: transparent;
+  border-radius: calc(var(--sw-radius-sm) + 2px);
+}
+
+/* Sized to its segments even where the field is stretched (a Stack). */
+.sw-segmented-field > .sw-segmented.sw-segmented-raised {
+  align-self: flex-start;
+}
+
+.sw-segmented.sw-segmented-raised .sw-segmented-item {
+  border-radius: var(--sw-radius-sm);
+  color: var(--sw-color-text);
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  min-height: var(--sw-control-md-min-height);
+  padding-inline: var(--sw-space-4);
+}
+
+.sw-segmented.sw-segmented-raised.sw-segmented-with-icons .sw-segmented-item {
+  padding-inline: var(--sw-space-2) var(--sw-space-3);
+}
+
+.sw-segmented.sw-segmented-raised .sw-segmented-item-selected {
+  background: var(--sw-color-surface);
+  box-shadow: var(--sw-elevation-sm);
+  font-weight: 600;
+}
+
+[data-theme='dark'] .sw-segmented.sw-segmented-raised .sw-segmented-item-selected {
+  box-shadow: inset 0 0 0 1px var(--sw-color-muted);
+}
+
+.sw-segmented.sw-segmented-raised[aria-invalid='true'] {
+  border-color: var(--sw-color-danger);
+}
+
+@media (forced-colors: active) {
+  .sw-segmented.sw-segmented-raised { border-color: CanvasText; }
+  .sw-segmented.sw-segmented-raised .sw-segmented-item-selected { outline: 2px solid Highlight; }
+  .sw-segmented.sw-segmented-raised[aria-invalid='true'] { border-color: Mark; }
+}
+
 .sw-segmented-disabled {
   opacity: var(--sw-disabled-opacity);
 }
@@ -2242,6 +2319,17 @@ body {
   -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
 }
 
+.sw-app-header-bar {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  background: var(--sw-color-surface);
+  border-color: var(--sw-color-border);
+  border-radius: 0;
+  border-style: solid;
+  border-width: 0 0 1px;
+  box-shadow: none;
+}
+
 .sw-app-header-sticky {
   position: sticky;
   top: 0;
@@ -2278,6 +2366,32 @@ body {
   }
 }
 
+.sw-nav.sw-nav-words :is(a, .sw-button) {
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--sw-color-muted);
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  text-decoration: none;
+}
+
+@media (hover: hover) {
+  .sw-nav.sw-nav-words :is(a, .sw-button):hover:not(:disabled, [aria-disabled='true']) {
+    color: var(--sw-color-text);
+  }
+}
+
+.sw-nav.sw-nav-words :is(a, .sw-button)[aria-current]:not([aria-current='false']) {
+  color: var(--sw-color-text);
+  font-weight: 600;
+}
+
+@media (forced-colors: active) {
+  .sw-nav.sw-nav-words :is(a, .sw-button)[aria-current]:not([aria-current='false']) { border-color: Highlight; text-decoration: underline; }
+}
+
 .sw-field-xs :is(select, input, textarea) {
   font-size: 13px;
   letter-spacing: -0.08px;
@@ -2603,6 +2717,52 @@ body {
   .sw-dialog-footer { border-top-color: CanvasText; }
 }
 
+.sw-dialog-banded {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  background: var(--sw-color-surface);
+  border-color: transparent;
+  box-shadow: var(--sw-elevation-md);
+}
+
+.sw-dialog-banded .sw-dialog-header {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border-bottom: 1px solid var(--sw-color-border);
+  margin: calc(-1 * var(--sw-space-5)) calc(-1 * var(--sw-space-5)) 0;
+  padding: var(--sw-space-4) var(--sw-space-5);
+  position: sticky;
+  top: calc(-1 * var(--sw-space-5));
+  z-index: 5;
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-dialog-sheet-below-md.sw-dialog-banded .sw-dialog-header {
+    margin-left: calc(-1 * max(var(--sw-space-5), env(safe-area-inset-left, 0px)));
+    margin-right: calc(-1 * max(var(--sw-space-5), env(safe-area-inset-right, 0px)));
+    padding-left: max(var(--sw-space-5), env(safe-area-inset-left, 0px));
+    padding-right: max(var(--sw-space-5), env(safe-area-inset-right, 0px));
+  }
+}
+
+.sw-dialog-banded .sw-button.sw-dialog-close {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-text);
+  margin: 0;
+}
+
+@media (hover: hover) {
+  .sw-dialog-banded .sw-button.sw-dialog-close:hover {
+    background: color-mix(in srgb, var(--sw-color-muted) 24%, transparent);
+  }
+}
+
+@media (forced-colors: active) {
+  .sw-dialog-banded { border-color: CanvasText; }
+  .sw-dialog-banded .sw-dialog-header { border-bottom-color: CanvasText; }
+}
+
 .sw-accordion {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);
@@ -3020,6 +3180,155 @@ body {
   }
 }
 
+.sw-action-menu-trigger.sw-action-menu-trigger-text {
+  align-items: center;
+  background: transparent;
+  border-color: transparent;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 500;
+  gap: var(--sw-space-2);
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  min-height: var(--sw-control-sm-min-height);
+  padding-inline: var(--sw-space-3) var(--sw-space-2);
+}
+
+.sw-action-menu-trigger.sw-action-menu-trigger-text::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);
+}
+
+.sw-action-menu-trigger.sw-action-menu-trigger-text[aria-expanded='true'] {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+@media (hover: hover) {
+  .sw-action-menu-trigger.sw-action-menu-trigger-text:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  }
+}
+
+@media (pointer: coarse) {
+  .sw-action-menu-trigger.sw-action-menu-trigger-text { min-height: var(--sw-control-md-min-height); }
+}
+
+@media (forced-colors: active) {
+  .sw-action-menu-trigger.sw-action-menu-trigger-text::after { border-color: CanvasText; }
+  .sw-action-menu-trigger.sw-action-menu-trigger-text[aria-expanded='true'] { border-color: Highlight; }
+}
+
+.sw-combobox {
+  max-width: 100%;
+  min-width: 0;
+}
+
+.sw-combobox-popup {
+  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);
+  inset: auto;
+  margin: 0;
+  max-height: min(var(--sw-select-max), calc(100% - var(--sw-space-2) - var(--sw-space-2)));
+  max-width: calc(100% - var(--sw-space-2) - var(--sw-space-2));
+  overflow: auto;
+  padding: var(--sw-space-1);
+  position: fixed;
+  z-index: 10;
+}
+
+.sw-combobox-heading {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  padding: var(--sw-space-2) var(--sw-space-3) var(--sw-space-1);
+}
+
+.sw-combobox-option {
+  align-items: center;
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  column-gap: var(--sw-space-2);
+  cursor: pointer;
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  min-height: var(--sw-control-md-min-height);
+  overflow-wrap: anywhere;
+  padding: var(--sw-space-1) var(--sw-space-3);
+}
+
+.sw-combobox-option + .sw-combobox-option {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+.sw-combobox-label {
+  font-weight: 600;
+}
+
+.sw-combobox-description {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+}
+
+.sw-combobox-option[aria-selected='true'] {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+.sw-combobox-option[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.sw-combobox-option[aria-disabled='true'] .sw-combobox-label {
+  color: var(--sw-color-muted);
+}
+
+.sw-combobox-action {
+  border-top: 1px solid var(--sw-color-border);
+  color: var(--sw-color-accent);
+  margin-top: var(--sw-space-1);
+}
+
+.sw-combobox-empty,
+.sw-combobox-note {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  padding: var(--sw-space-2) var(--sw-space-3);
+}
+
+@media (forced-colors: active) {
+  .sw-combobox-popup { border-color: CanvasText; }
+  .sw-combobox-option[aria-selected='true'] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
+  .sw-combobox-option[aria-selected='true'] .sw-combobox-description { color: HighlightText; }
+  .sw-combobox-option[aria-selected='true'] .sw-badge { forced-color-adjust: auto; }
+  .sw-combobox-option[aria-disabled='true'] .sw-combobox-label { color: GrayText; }
+  .sw-combobox-option[aria-selected='true'][aria-disabled='true'] .sw-combobox-label { color: HighlightText; }
+  .sw-combobox-option + .sw-combobox-option { border-color: CanvasText; }
+  .sw-combobox-action { border-color: CanvasText; }
+}
 .sw-multi-select {
   display: inline-flex;
   max-width: 100%;
@@ -4289,10 +4598,10 @@ body {
   .sw-denomination-tile-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 }
 
-.sw-denomination-cell-tone-accent { --sw-denomination-cell-tone: var(--sw-color-accent); }
-.sw-denomination-cell-tone-success { --sw-denomination-cell-tone: var(--sw-color-success); }
-.sw-denomination-cell-tone-danger { --sw-denomination-cell-tone: var(--sw-color-danger); }
-.sw-denomination-cell-tone-warning { --sw-denomination-cell-tone: var(--sw-color-warning); }
+.sw-denomination-cell-tone-accent { --sw-denomination-cell-tone: var(--sw-color-accent); --sw-denomination-cell-fill: var(--sw-color-accentSubtle); --sw-denomination-cell-ink: color-mix(in srgb, var(--sw-color-accent) 70%, var(--sw-color-text)); }
+.sw-denomination-cell-tone-success { --sw-denomination-cell-tone: var(--sw-color-success); --sw-denomination-cell-fill: color-mix(in srgb, var(--sw-color-success) 10%, var(--sw-color-surface)); --sw-denomination-cell-ink: color-mix(in srgb, var(--sw-color-success) 70%, var(--sw-color-text)); }
+.sw-denomination-cell-tone-danger { --sw-denomination-cell-tone: var(--sw-color-danger); --sw-denomination-cell-fill: color-mix(in srgb, var(--sw-color-danger) 10%, var(--sw-color-surface)); --sw-denomination-cell-ink: color-mix(in srgb, var(--sw-color-danger) 70%, var(--sw-color-text)); }
+.sw-denomination-cell-tone-warning { --sw-denomination-cell-tone: var(--sw-color-warning); --sw-denomination-cell-fill: color-mix(in srgb, var(--sw-color-warning) 10%, var(--sw-color-surface)); --sw-denomination-cell-ink: color-mix(in srgb, var(--sw-color-warning) 70%, var(--sw-color-text)); }
 
 .sw-denomination-grid .sw-denomination-cell.sw-denomination-cell-toned,
 .sw-denomination-grid .sw-denomination-cell-toned .sw-denomination-cell {
@@ -4305,9 +4614,19 @@ body {
   box-shadow: inset 0 0 0 1px var(--sw-denomination-cell-tone);
 }
 
+/* A pill: the count on its tone's tint, in the tone's ink (a Notice's words: 4.5:1 on the tint unless the palette's own tone is under it). */
+.sw-denomination-cell-tones-pill .sw-denomination-cell-toned .sw-denomination-cell-value:not(:empty) {
+  background: var(--sw-denomination-cell-fill);
+  border-radius: var(--sw-radius-sm);
+  color: var(--sw-denomination-cell-ink);
+  display: inline-block;
+  padding: calc(var(--sw-space-1) / 2) var(--sw-space-2);
+}
+
 @media (forced-colors: active) {
   .sw-denomination-grid .sw-denomination-cell-zero.sw-denomination-cell-toned,
   .sw-denomination-grid .sw-denomination-cell-toned .sw-denomination-cell-zero { color: GrayText; }
+  .sw-denomination-cell-tones-pill .sw-denomination-cell-toned .sw-denomination-cell-value:not(:empty) { color: inherit; outline: 1px solid CanvasText; }
 }
 
 .sw-denomination-strip td.sw-denomination-entry {
@@ -4424,6 +4743,74 @@ body {
   .sw-denomination-labels-plain .sw-denomination-label { color: CanvasText; }
 }
 
+.sw-denomination-scroll-framed {
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+}
+
+.sw-denomination-strip.sw-denomination-framed :where(th, td) {
+  padding: var(--sw-space-4) var(--sw-space-3);
+}
+
+.sw-denomination-strip.sw-denomination-framed thead :where(th, td),
+.sw-denomination-strip.sw-denomination-framed thead .sw-denomination-corner:first-child {
+  background: var(--sw-color-subtle);
+  padding-block: var(--sw-space-2);
+}
+
+.sw-denomination-strip.sw-denomination-framed :is(th, td) + :is(th, td) {
+  border-inline-start: 1px solid var(--sw-color-border);
+}
+
+.sw-denomination-strip.sw-denomination-framed :where(.sw-denomination-label) {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  background: var(--sw-color-surface);
+}
+
+.sw-denomination-strip.sw-denomination-framed .sw-denomination-label {
+  padding-inline: var(--sw-space-3);
+}
+
+.sw-denomination-strip.sw-denomination-framed .sw-denomination-head:not(.sw-denomination-total-head),
+.sw-denomination-strip.sw-denomination-framed .sw-denomination-cell {
+  text-align: center;
+}
+
+.sw-denomination-strip.sw-denomination-framed .sw-denomination-cell {
+  font-size: 15px;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-denomination-strip.sw-denomination-framed :where(th, td),
+  .sw-denomination-strip.sw-denomination-framed .sw-denomination-label { padding-inline: var(--sw-space-2); }
+  .sw-denomination-strip.sw-denomination-framed .sw-denomination-total,
+  .sw-denomination-strip.sw-denomination-framed .sw-denomination-total-head { border-inline-start: 0; padding: 0; }
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-scroll-framed,
+  .sw-denomination-strip.sw-denomination-framed :is(th, td) + :is(th, td) { border-color: CanvasText; }
+}
+
+.sw-denomination-totals-strong .sw-denomination-total {
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+}
+
+.sw-denomination-totals-strong .sw-denomination-total-inline { font-weight: 700; }
+
+.sw-denomination-totals-strong .sw-denomination-row-neutral .sw-denomination-total,
+.sw-denomination-totals-strong .sw-denomination-row-neutral .sw-denomination-total-inline {
+  color: var(--sw-color-text);
+}
+
 @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; }
@@ -4516,6 +4903,104 @@ body {
 
 [data-theme] .sw-field-adorned > input:disabled { background: transparent; }
 
+.sw-field-adorned.sw-field-search {
+  gap: var(--sw-space-2);
+  padding-inline-end: 0;
+}
+
+.sw-field-search-leading {
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  flex: none;
+}
+
+[data-theme] .sw-field-search > input[type='search'] {
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.sw-field-search > input[type='search']::-webkit-search-cancel-button,
+.sw-field-search > input[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+
+.sw-field-search > input:last-child {
+  margin-inline-end: var(--sw-control-md-padding-inline);
+}
+
+.sw-field-search-clear {
+  align-items: center;
+  align-self: stretch;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sw-radius-sm);
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+  margin: 0;
+  min-width: var(--sw-control-xs-min-height);
+  padding: 0 var(--sw-space-2);
+}
+
+.sw-field-search-clear:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+/* One ring at a time: the clear button's own while it has focus. */
+.sw-field-search:has(.sw-field-search-clear:focus-visible) {
+  outline: none;
+}
+
+.sw-field-search-clear:hover .sw-field-search-cross {
+  background: var(--sw-color-text);
+}
+
+.sw-field-xs .sw-field-search > input:last-child {
+  margin-inline-end: var(--sw-control-xs-padding-inline);
+}
+
+.sw-field-search-cross {
+  background: var(--sw-color-muted);
+  border-radius: var(--sw-radius-pill);
+  display: inline-block;
+  height: var(--sw-space-4);
+  position: relative;
+  width: var(--sw-space-4);
+}
+
+.sw-field-search-cross::before,
+.sw-field-search-cross::after {
+  background: var(--sw-color-surface);
+  border-radius: 1px;
+  content: '';
+  height: 2px;
+  inset: 0;
+  margin: auto;
+  position: absolute;
+  width: calc(var(--sw-space-2) + 2px);
+}
+
+.sw-field-search-cross::before { transform: rotate(45deg); }
+.sw-field-search-cross::after { transform: rotate(-45deg); }
+
+@media (pointer: coarse) {
+  .sw-field-search-clear { min-width: var(--sw-control-md-min-height); }
+}
+
+@media (forced-colors: active) {
+  .sw-field-search-leading { color: FieldText; }
+  /* Backgrounds are forced in this mode; the disc keeps its own system colours. */
+  .sw-field-search-cross { background: ButtonText; forced-color-adjust: none; }
+  .sw-field-search-cross::before,
+  .sw-field-search-cross::after { background: ButtonFace; }
+}
+
 [data-theme] .sw-field-changed > :is(input, select, textarea),
 .sw-field-changed .sw-field-adorned {
   border-color: var(--sw-color-accent);
@@ -4645,6 +5130,12 @@ body {
   background-image: linear-gradient(color-mix(in srgb, var(--sw-color-accent) 12%, transparent), color-mix(in srgb, var(--sw-color-accent) 12%, transparent));
 }
 
+/* A plain limit: − at min and + at max keep their look, still disabled. */
+.sw-stepper-limit-plain .sw-stepper-button:disabled {
+  cursor: default;
+  opacity: 1;
+}
+
 /* Read-only: the buttons keep their room, so the count lines up with an editable one. */
 .sw-stepper-readonly .sw-stepper-button { visibility: hidden; }
 
@@ -5100,6 +5591,7 @@ body {
 
 .sw-border { border: 1px solid var(--sw-color-border); }
 .sw-border-dashed { border: 1px dashed var(--sw-color-border); }
+.sw-border-bottom { border-width: 0 0 1px; border-style: solid; border-color: var(--sw-color-border); }
 
 @media (prefers-reduced-transparency: reduce) {
   .sw-card-glass,
@@ -5118,6 +5610,7 @@ body {
   .sw-select-list,
   .sw-action-menu-list,
   .sw-multi-select-panel,
+  .sw-combobox-popup,
   .sw-date-field-calendar,
   .sw-toast {
     background: var(--sw-color-surface);

package/package.json

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