@scalewing/react 1.35.1 → 1.37.0

package/dist/styles.css

@@ -914,18 +914,21 @@ body {
   outline-offset: var(--sw-focus-ring-offset);
 }
 
-.sw-button:disabled {
+/* A button that is off but still pressed and focused (`aria-disabled`,
+   for a submit that, pressed while off, shows what to fix) looks as a
+   disabled one; forced colors grey it too, after the pressed rules. */
+.sw-button:disabled,
+.sw-button[aria-disabled='true'] {
   cursor: not-allowed;
   opacity: var(--sw-disabled-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-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) {
+.sw-button-disabled-neutral:is(:disabled, [aria-disabled='true']):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);
@@ -937,6 +940,10 @@ body {
   .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; }
 }
+@media (forced-colors: active) {
+  .sw-button[aria-disabled='true'],
+  .sw-button-disabled-neutral[aria-disabled='true']:not(.sw-button-ghost) { border-color: GrayText; color: GrayText; }
+}
 .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; }
@@ -4900,6 +4907,41 @@ body {
   color: var(--sw-color-text);
 }
 
+.sw-denomination-strip .sw-denomination-value-row,
+.sw-denomination-strip .sw-denomination-value-row .sw-denomination-label {
+  background: var(--sw-color-subtle);
+}
+
+.sw-denomination-strip .sw-denomination-value-row :is(th, td) {
+  padding-block: var(--sw-space-2);
+}
+
+.sw-denomination-strip .sw-denomination-value-row .sw-denomination-value {
+  color: var(--sw-color-text);
+  font-size: 15px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.sw-denomination-strip .sw-denomination-value-row.sw-denomination-row-disabled .sw-denomination-value {
+  opacity: var(--sw-disabled-opacity);
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-denomination-strip .sw-denomination-value-row :is(th, td) { padding-block: var(--sw-space-1); }
+  .sw-denomination-strip .sw-denomination-value-row .sw-denomination-total { padding: 0; }
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-strip .sw-denomination-value-row,
+  .sw-denomination-strip .sw-denomination-value-row .sw-denomination-label { background: Canvas; }
+  .sw-denomination-strip .sw-denomination-value-row .sw-denomination-value { 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; }
@@ -5259,10 +5301,20 @@ body {
 }
 
 .sw-steps-item-current,
-.sw-steps-item-error {
+.sw-steps-item-error,
+.sw-steps-open > .sw-steps-item {
   --sw-steps-padding: var(--sw-space-4);
 }
 
+/* An open list's step is a region holding its header and body, spaced as
+   the item spaces them in a stepped list. */
+.sw-steps-region {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-4);
+  min-width: 0;
+}
+
 /* The marker sits at the top of the header, so the connector always starts
    under it; each line of the header is centred on the marker's height. */
 .sw-steps-header {
@@ -5301,7 +5353,8 @@ body {
 }
 
 .sw-steps-item-current .sw-steps-title,
-.sw-steps-item-error .sw-steps-title {
+.sw-steps-item-error .sw-steps-title,
+.sw-steps-open > .sw-steps-item .sw-steps-title {
   font-size: 20px;
   letter-spacing: -0.3px;
   line-height: 28px;

package/dist/tab-stop.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The `tabIndex` every Scalewing press control and link renders by default.
+ *
+ * Safari leaves a `<button>`, a link, a checkbox and a radio out of the Tab
+ * order unless the element carries an explicit `tabindex` (its "Press Tab to
+ * highlight each item" setting is off by default), so a keyboard user there
+ * Tabs past them to the address bar. An explicit `0` puts them in the same
+ * order every other browser already gives them. A control that is
+ * deliberately not a tab stop (a Stepper's − and +, a roving item) keeps its
+ * own `-1`, and a consumer's `tabIndex` always wins.
+ */
+export declare const tabStop = 0;
+/**
+ * Which radio of a group carries the explicit tab stop: the checked one, or
+ * the first enabled one while none is. Browsers move between a group's
+ * radios with the arrow keys and Tab only into the group, so the others keep
+ * no `tabindex` and each browser's own group rule stands.
+ */
+export declare function radioTabStopValue(options: readonly {
+    value: string;
+    disabled?: boolean;
+}[], value: string | undefined): string | undefined;

package/dist/tab-stop.js

@@ -0,0 +1,23 @@
+/**
+ * The `tabIndex` every Scalewing press control and link renders by default.
+ *
+ * Safari leaves a `<button>`, a link, a checkbox and a radio out of the Tab
+ * order unless the element carries an explicit `tabindex` (its "Press Tab to
+ * highlight each item" setting is off by default), so a keyboard user there
+ * Tabs past them to the address bar. An explicit `0` puts them in the same
+ * order every other browser already gives them. A control that is
+ * deliberately not a tab stop (a Stepper's − and +, a roving item) keeps its
+ * own `-1`, and a consumer's `tabIndex` always wins.
+ */
+export const tabStop = 0;
+/**
+ * Which radio of a group carries the explicit tab stop: the checked one, or
+ * the first enabled one while none is. Browsers move between a group's
+ * radios with the arrow keys and Tab only into the group, so the others keep
+ * no `tabindex` and each browser's own group rule stands.
+ */
+export function radioTabStopValue(options, value) {
+    const enabled = options.filter((option) => !option.disabled);
+    return (enabled.find((option) => option.value === value) ?? enabled[0])
+        ?.value;
+}

package/package.json

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