@scalewing/react 1.26.0 → 1.27.0

package/dist/styles.css

@@ -2707,6 +2707,33 @@ body {
   .sw-action-bar-actions > * { flex: 1 1 auto; }
 }
 
+.sw-action-bar-summary {
+  align-items: baseline;
+  column-gap: var(--sw-space-2);
+  display: inline-flex;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.sw-action-bar-summary-label,
+.sw-action-bar-summary-detail {
+  color: var(--sw-color-muted);
+  font-size: 15px;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+}
+
+.sw-action-bar-summary-value {
+  color: var(--sw-color-text);
+}
+
+.sw-action-bar-summary-danger .sw-action-bar-summary-value { color: var(--sw-color-danger); }
+.sw-action-bar-summary-success .sw-action-bar-summary-value { color: var(--sw-color-success); }
+
+@media (forced-colors: active) {
+  .sw-action-bar-summary-value { color: CanvasText; }
+}
+
 .sw-action-bar-sticky {
   bottom: calc(var(--sw-space-2) + env(safe-area-inset-bottom, 0px));
   position: sticky;
@@ -3608,6 +3635,57 @@ body {
   .sw-denomination-grid .sw-denomination-cell-toned .sw-denomination-cell-zero { color: GrayText; }
 }
 
+.sw-denomination-strip td.sw-denomination-entry {
+  padding: var(--sw-space-1);
+}
+
+.sw-denomination-entry .sw-stepper-full .sw-stepper-track {
+  grid-template-columns: var(--sw-space-6) minmax(var(--sw-space-8), 1fr) var(--sw-space-6);
+}
+
+/* A strip with entry rows centres its heads and read-only counts over the steppers. */
+.sw-denomination-strip-entry .sw-denomination-head:not(.sw-denomination-total-head),
+.sw-denomination-strip-entry .sw-denomination-cell {
+  text-align: center;
+}
+
+[data-theme] .sw-denomination-cell-toned .sw-stepper:not(.sw-stepper-invalid) input.sw-stepper-input:not(:disabled) {
+  border-color: var(--sw-denomination-cell-tone);
+  box-shadow: inset 0 0 0 1px var(--sw-denomination-cell-tone);
+}
+
+.sw-denomination-label-words {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sw-denomination-label-caption,
+.sw-denomination-head-caption {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+}
+
+.sw-denomination-row-quiet,
+.sw-denomination-strip .sw-denomination-row-quiet .sw-denomination-label {
+  background: var(--sw-color-subtle);
+}
+
+.sw-denomination-strip .sw-denomination-row-disabled .sw-denomination-label-body,
+.sw-denomination-strip .sw-denomination-row-disabled .sw-denomination-cell,
+.sw-denomination-strip .sw-denomination-row-disabled .sw-denomination-total {
+  opacity: var(--sw-disabled-opacity);
+}
+
+@media (forced-colors: active) {
+  [data-theme] .sw-denomination-cell-toned .sw-stepper:not(.sw-stepper-invalid) input.sw-stepper-input:not(:disabled) { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; }
+  .sw-denomination-label-caption,
+  .sw-denomination-head-caption { color: CanvasText; }
+}
+
 .sw-denomination-scroll-aligned {
   container-type: inline-size;
 }
@@ -3791,6 +3869,251 @@ body {
   .sw-field-error, .sw-field-required { color: Mark; }
 }
 
+.sw-stepper {
+  align-items: flex-start;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  min-width: 0;
+  /* Holds its hidden label and empty error region, which leave the flow,
+     so inside a scroll region they never widen the page. */
+  position: relative;
+}
+
+.sw-stepper-full { align-items: stretch; display: flex; }
+
+.sw-stepper-track {
+  display: inline-grid;
+  gap: var(--sw-space-1);
+  grid-template-columns: var(--sw-space-6) auto var(--sw-space-6);
+}
+
+.sw-stepper-full .sw-stepper-track {
+  display: grid;
+  grid-template-columns: var(--sw-space-6) minmax(0, 1fr) var(--sw-space-6);
+}
+
+.sw-stepper-button {
+  align-items: center;
+  appearance: none;
+  background: var(--sw-color-subtle);
+  border: 1px solid transparent;
+  border-radius: var(--sw-radius-sm);
+  color: var(--sw-color-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: 20px;
+  font-weight: 600;
+  justify-content: center;
+  line-height: 28px;
+  margin: 0;
+  min-height: var(--sw-control-md-min-height);
+  padding: 0;
+  touch-action: manipulation;
+}
+
+.sw-stepper-button:hover:not(:disabled) {
+  background: var(--sw-color-border);
+}
+
+.sw-stepper-button:disabled {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+[data-theme] input.sw-stepper-input {
+  font-size: 17px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  inline-size: calc(5ch + 2 * var(--sw-space-1));
+  line-height: 25px;
+  min-width: 0;
+  padding-inline: var(--sw-space-1);
+  text-align: center;
+}
+
+.sw-stepper-full input.sw-stepper-input { inline-size: 100%; }
+
+[data-theme] .sw-stepper-invalid input.sw-stepper-input {
+  border-color: var(--sw-color-danger);
+}
+
+[data-theme] .sw-stepper-changed input.sw-stepper-input {
+  border-color: var(--sw-color-accent);
+  box-shadow: inset 0 0 0 1px var(--sw-color-accent);
+}
+
+[data-theme] .sw-stepper-changed input.sw-stepper-input:not(:placeholder-shown) {
+  background-image: linear-gradient(color-mix(in srgb, var(--sw-color-accent) 12%, transparent), color-mix(in srgb, var(--sw-color-accent) 12%, transparent));
+}
+
+/* Read-only: the buttons keep their room, so the count lines up with an editable one. */
+.sw-stepper-readonly .sw-stepper-button { visibility: hidden; }
+
+@media (forced-colors: active) {
+  .sw-stepper-button { border-color: ButtonText; }
+  .sw-stepper-button:disabled { border-color: GrayText; color: GrayText; opacity: 1; }
+  [data-theme] .sw-stepper-invalid input.sw-stepper-input { border-color: Mark; }
+  [data-theme] .sw-stepper-changed input.sw-stepper-input { border-color: Highlight; box-shadow: inset 0 0 0 1px Highlight; background-image: none; }
+}
+
+.sw-steps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sw-steps-item {
+  --sw-steps-padding: var(--sw-space-3);
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-md);
+  box-shadow: inset 0 1px 0 var(--sw-glass-specular);
+  color: var(--sw-color-text);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-4);
+  padding: var(--sw-steps-padding) var(--sw-space-4);
+  position: relative;
+}
+
+.sw-steps-item-current,
+.sw-steps-item-error {
+  --sw-steps-padding: var(--sw-space-4);
+}
+
+/* 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 {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--sw-space-3);
+  min-height: var(--sw-control-xs-min-height);
+  min-width: 0;
+}
+
+.sw-steps-marker {
+  align-items: center;
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  height: var(--sw-control-xs-min-height);
+  justify-content: center;
+  line-height: 18px;
+  width: var(--sw-control-xs-min-height);
+}
+
+.sw-steps-title {
+  font-family: var(--sw-font-sans);
+  font-size: 17px;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 25px;
+  margin: 0;
+  min-width: 0;
+  padding-block: calc((var(--sw-control-xs-min-height) - 25px) / 2);
+}
+
+.sw-steps-item-current .sw-steps-title,
+.sw-steps-item-error .sw-steps-title {
+  font-size: 20px;
+  letter-spacing: -0.3px;
+  line-height: 28px;
+  padding-block: calc((var(--sw-control-xs-min-height) - 28px) / 2);
+}
+
+.sw-steps-item-upcoming .sw-steps-title,
+.sw-steps-item-skipped .sw-steps-title,
+.sw-steps-reason {
+  color: var(--sw-color-muted);
+}
+
+.sw-steps-summary {
+  flex: 1 1 0;
+  font-size: 15px;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  min-width: 25%;
+  overflow: hidden;
+  padding-block: calc((var(--sw-control-xs-min-height) - 20px) / 2);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sw-button.sw-steps-edit {
+  flex: none;
+  margin-block: calc((var(--sw-control-xs-min-height) - var(--sw-control-sm-min-height)) / 2);
+  margin-inline-start: auto;
+}
+
+.sw-steps-body {
+  margin-inline-start: calc(var(--sw-control-xs-min-height) + var(--sw-space-3));
+  min-width: 0;
+}
+
+.sw-steps-item-upcoming .sw-steps-marker,
+.sw-steps-item-skipped .sw-steps-marker {
+  box-shadow: inset 0 0 0 2px var(--sw-color-border);
+  color: var(--sw-color-muted);
+}
+
+.sw-steps-item-current .sw-steps-marker {
+  background: var(--sw-color-accent);
+  color: var(--sw-color-onAccent);
+}
+
+.sw-steps-item-error .sw-steps-marker {
+  background: var(--sw-color-danger);
+  color: var(--sw-color-onDanger);
+}
+
+.sw-steps-item-done .sw-steps-marker {
+  background: var(--sw-color-success);
+}
+
+/* Private chrome: a check drawn with two borders, as Checkbox's. */
+.sw-steps-item-done .sw-steps-marker::after {
+  border-bottom: 2px solid var(--sw-color-surface);
+  border-right: 2px solid var(--sw-color-surface);
+  content: '';
+  height: var(--sw-space-3);
+  margin-top: calc(-1 * var(--sw-space-1) / 2);
+  transform: rotate(45deg);
+  width: calc(var(--sw-space-3) / 2);
+}
+
+.sw-steps-item:not(:last-child)::after {
+  background: var(--sw-color-border);
+  bottom: calc(-1 * var(--sw-space-2) - 1px);
+  content: '';
+  inset-inline-start: calc(var(--sw-space-4) + var(--sw-control-xs-min-height) / 2 - 1px);
+  position: absolute;
+  top: calc(var(--sw-steps-padding) + var(--sw-control-xs-min-height) + var(--sw-space-1));
+  width: 2px;
+}
+
+.sw-steps-item-done:not(:last-child)::after {
+  background: var(--sw-color-success);
+}
+
+@media (forced-colors: active) {
+  .sw-steps-marker { border: 2px solid CanvasText; box-shadow: none; }
+  .sw-steps-item-current .sw-steps-marker { border-color: Highlight; }
+  .sw-steps-item-done .sw-steps-marker::after { border-color: CanvasText; }
+  .sw-steps-item:not(:last-child)::after { background: CanvasText; }
+  .sw-steps-item-upcoming .sw-steps-title,
+  .sw-steps-item-skipped .sw-steps-title { color: GrayText; }
+}
+
 .sw-split {
   align-items: stretch;
   align-self: start;
@@ -3992,6 +4315,7 @@ body {
   .sw-card-glass,
   .sw-app-header,
   .sw-action-bar,
+  .sw-steps-item,
   .sw-badge-neutral,
   .sw-segmented,
   .sw-table-sticky thead th,

package/package.json

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