@scalewing/react 1.12.0 → 1.14.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); }
@@ -857,7 +882,8 @@ body {
 .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'] { background: Highlight; border-color: Highlight; color: HighlightText; }
+  .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; }
@@ -1082,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);
@@ -1168,6 +1202,36 @@ body {
 
 :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);
@@ -1298,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 {
@@ -1331,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 {
@@ -1383,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);
@@ -1580,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'] {
@@ -1844,6 +1912,25 @@ body {
   width: max-content;
 }
 
+/*
+ * width="full": the field and its trigger fill the container's inline size.
+ * The value still takes the free space and ellipsizes, and the chevron stays
+ * last, at the inline end. In an Inline row the field takes only the space
+ * its siblings leave, so a Button beside it keeps its label on one line.
+ */
+.sw-select-full {
+  width: 100%;
+}
+
+.sw-inline > .sw-select-full {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.sw-select-full .sw-select-trigger {
+  width: 100%;
+}
+
 .sw-select-control {
   position: relative;
 }
@@ -1964,6 +2051,15 @@ body {
   z-index: 10;
 }
 
+/*
+ * A full-width field's open list is exactly the trigger's width (min-width
+ * already beats the dialog-max cap), so it never runs past a phone's edge;
+ * a long option wraps inside it, even a single long word.
+ */
+.sw-select-full .sw-select-list {
+  width: 100%;
+}
+
 .sw-select-option {
   border-radius: var(--sw-radius-sm);
   box-sizing: border-box;
@@ -1974,6 +2070,10 @@ body {
   padding-inline: var(--sw-control-xs-padding-inline);
 }
 
+.sw-select-full .sw-select-option {
+  overflow-wrap: anywhere;
+}
+
 .sw-select-option[aria-selected='true'] {
   font-weight: 600;
 }
@@ -2984,10 +3084,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; }
 }
 

package/package.json

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