@webority/theme 0.7.4 → 0.7.6

package/scss/wui/_display.scss

@@ -260,6 +260,92 @@ a.info-row:hover .info-value {
     text-decoration: underline;
 }
 
+// ============================================================================
+// Labeled key-value grid — record details, definitions, attributes.
+// ============================================================================
+.descs {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+.descs-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text);
+    padding: 0 0 12px 0;
+}
+.descs-list {
+    display: grid;
+    grid-template-columns: repeat(var(--descs-cols, 2), 1fr);
+    gap: 0;
+    margin: 0;
+    padding: 0;
+}
+.descs-item {
+    display: contents;
+    grid-column: span var(--descs-span, 1);
+}
+.descs-label {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--color-text-subtle);
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--color-border);
+    margin: 0;
+}
+.descs-value {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text);
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--color-border);
+    margin: 0;
+    word-break: break-word;
+}
+// A blank value reads as a muted "no value", not a broken row.
+.descs-value.is-empty {
+    font-weight: 400;
+    color: var(--color-text-subtle);
+}
+// Small size variant.
+.descs-sm .descs-label,
+.descs-sm .descs-value {
+    font-size: 12px;
+    padding: 8px 12px;
+}
+// Bordered variant removes inner dividers (only outer border on cells).
+.descs-bordered .descs-label,
+.descs-bordered .descs-value {
+    border-bottom: none;
+    border-right: 1px solid var(--color-border);
+}
+.descs-bordered .descs-item:last-child .descs-label,
+.descs-bordered .descs-item:last-child .descs-value {
+    border-right: none;
+}
+.descs-bordered .descs-list > :nth-child(2n-1) {
+    border-bottom: 1px solid var(--color-border);
+}
+// Column variants — set the grid-template-columns.
+.descs-col-1 .descs-list {
+    --descs-cols: 1;
+}
+.descs-col-2 .descs-list {
+    --descs-cols: 2;
+}
+.descs-col-3 .descs-list {
+    --descs-cols: 3;
+}
+// Media-breakpoint collapse to single column under md.
+@include media-breakpoint-down(sm) {
+    .descs-col-2 .descs-list,
+    .descs-col-3 .descs-list {
+        --descs-cols: 1;
+    }
+}
+
 // ============================================================================
 // Segmented control — 2–4 mutually-exclusive options shown side by side.
 // The theme toggle (light/dark/system) is the canonical use.
@@ -712,4 +798,77 @@ a.info-row:hover .info-value {
     }
 }
 
-// ============================================================================
+// ============================================================================
+// Result / outcome screen — post-checkout success, verification done, or error states.
+// Distinct from AppEmptyState (which is a card/section "nothing here yet") — this is
+// a self-contained result panel with a prominent status, heading, and actions.
+// ============================================================================
+.result {
+    text-align: center;
+    padding: 48px 24px;
+    color: var(--color-text-subtle);
+}
+.result-icon {
+    width: 64px;
+    height: 64px;
+    border-radius: var(--radius-lg);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 24px;
+}
+.result-code {
+    font-size: 72px;
+    font-weight: 700;
+    line-height: 1;
+    margin-bottom: 20px;
+    color: var(--color-text-subtle);
+    letter-spacing: -0.04em;
+}
+.result-title {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 1.35;
+    color: var(--color-text);
+    margin: 0 0 12px 0;
+}
+.result-subtitle {
+    font-size: 16px;
+    line-height: 1.5;
+    color: var(--color-text-muted);
+    margin: 0 0 20px 0;
+}
+.result-actions {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+.result-extra {
+    margin-top: 24px;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--color-text-muted);
+}
+// Tone variants — success/danger/warning/info for icon-driven results, muted for code numerics.
+.result-success .result-icon {
+    background: var(--color-success-soft);
+    color: var(--color-success-text);
+}
+.result-danger .result-icon {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+}
+.result-warning .result-icon {
+    background: var(--color-warning-soft);
+    color: var(--color-warning-text);
+}
+.result-info .result-icon {
+    background: var(--color-info-soft);
+    color: var(--color-info-text);
+}
+.result-muted .result-code {
+    color: var(--color-text-muted);
+}

package/scss/wui/_flow.scss

@@ -10,6 +10,10 @@
 //   .stepper-journey   — wide: 40px dot beside a label + title, for a page masthead.
 // ============================================================================
 .stepper {
+    // Full width so the flex:1 steps spread evenly across the container. Without it,
+    // a stepper dropped into a flex/grid parent shrinks to its content and the steps
+    // bunch at one edge, colliding their labels.
+    width: 100%;
     display: flex;
     align-items: flex-start;
     gap: 0;
@@ -79,27 +83,61 @@
 .step.done .step-label {
     color: var(--color-text);
 }
-// A step that is an <a> is a deep link back to an earlier stage of the wizard.
+// An interactive step — an <a> deep-linking back to a stage, or a <button> in a
+// JS-driven wizard. A button needs its chrome stripped so it reads as a step.
+button.step {
+    border: none;
+    background: none;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+}
 a.step {
     text-decoration: none;
+}
+a.step,
+button.step {
     cursor: pointer;
 }
-a.step:hover .step-circle {
+a.step:hover .step-circle,
+button.step:hover .step-circle {
     box-shadow: 0 0 0 4px var(--color-primary-soft);
     transform: scale(1.04);
 }
-a.step:hover .step-label {
+a.step:hover .step-label,
+button.step:hover .step-label {
     color: var(--color-primary);
 }
-a.step:focus-visible {
+a.step:focus-visible,
+button.step:focus-visible {
     outline: none;
 }
-// The ring moves onto the circle: an outline on the <a> would box the whole column.
-a.step:focus-visible .step-circle {
+// The ring moves onto the circle: an outline on the <a>/<button> would box the whole column.
+a.step:focus-visible .step-circle,
+button.step:focus-visible .step-circle {
     box-shadow:
         0 0 0 4px var(--color-primary-soft),
         0 0 0 6px var(--color-primary);
 }
+// A step that failed its stage — a red circle with an alert, so an invalid step
+// reads as wrong at a glance rather than merely "not done".
+.step.error .step-circle {
+    border-color: var(--color-danger);
+    background: var(--color-danger);
+    color: var(--color-on-scrim);
+}
+.step.error .step-label {
+    color: var(--color-danger-text);
+}
+// A secondary line under the label — a short "what this step is for". Muted and
+// narrow so it never competes with the label it explains.
+.step-desc {
+    max-width: 130px;
+    font-size: 12px;
+    line-height: 1.3;
+    color: var(--color-text-muted);
+    overflow-wrap: break-word;
+}
 
 .stepper-journey {
     display: flex;
@@ -166,6 +204,15 @@ a.step:focus-visible .step-circle {
 .stepper-journey .step.active .step-index {
     color: var(--color-primary);
 }
+.stepper-journey .step.error .step-circle {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+    box-shadow: none;
+    transform: none;
+}
+.stepper-journey .step.error .step-index {
+    color: var(--color-danger-text);
+}
 .stepper-journey .step-label {
     max-width: none;
     margin-top: 8px;
@@ -176,6 +223,15 @@ a.step:focus-visible .step-circle {
     text-overflow: ellipsis;
     color: var(--color-text);
 }
+// In the journey bar the description sits inside the text column, under the label —
+// wider and left-aligned to match, not the centred compact treatment.
+.stepper-journey .step-desc {
+    max-width: none;
+    margin-top: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 .stepper-journey .step-line {
     flex: none;
     width: 32px;
@@ -199,8 +255,86 @@ a.step:focus-visible .step-circle {
         display: none;
     }
 }
+// Vertical orientation. The steps run down a side rail instead of across — for a
+// narrow column, a drawer, or a settings wizard.
+// ----------------------------------------------------------------------------
+.stepper-vertical {
+    flex-direction: column;
+    align-items: stretch;
+    // The gap between steps; kept in sync with the ::after `bottom` so the connector
+    // spans it exactly and still meets the next circle.
+    gap: 18px;
+    padding: 0;
+}
+// Each compact step becomes a two-column row: the circle in a fixed rail on the
+// left, the label and its description stacked on the right.
+.stepper-vertical .step {
+    display: grid;
+    grid-template-columns: 28px 1fr;
+    column-gap: 12px;
+    // No gap between the label and its description — they read as one block; the
+    // base .step gap of 10px is for the horizontal circle→label spacing.
+    row-gap: 0;
+    align-items: start;
+    text-align: left;
+}
+// The circle spans the whole text block rather than sitting in the first row: a
+// row sized to the 28px circle would leave dead space below a single-line label
+// before the description. Spanning lets each row size to its text instead.
+.stepper-vertical .step-circle {
+    grid-column: 1;
+    grid-row: 1 / -1;
+    align-self: start;
+}
+.stepper-vertical .step-label {
+    grid-column: 2;
+    grid-row: 1;
+    max-width: none;
+    // Centred against the circle when the step has no description (single 28px row);
+    // a no-op when a description makes the row size to the label.
+    align-self: center;
+}
+.stepper-vertical .step-desc {
+    grid-column: 2;
+    grid-row: 2;
+    max-width: none;
+}
+// The compact connector is horizontal (::before); redraw it as a vertical segment
+// down the circle's centre, from below one circle to the top of the next.
+.stepper-vertical .step + .step::before {
+    content: none;
+}
+.stepper-vertical .step:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    // 13px = half the 28px circle minus 1 for the 2px line's own width.
+    left: 13px;
+    top: 28px;
+    // Reaches through the 18px inter-step gap to meet the next circle's top; keep
+    // this in sync with the .stepper-vertical `gap`.
+    bottom: -18px;
+    width: 2px;
+    background: var(--color-border);
+    z-index: 0;
+}
+.stepper-vertical .step.done:not(:last-child)::after {
+    background: var(--color-primary);
+}
+// The journey bar stacked vertically reuses its own narrow-width treatment: a plain
+// column with the horizontal connectors dropped (a real vertical rail here would
+// fight the two-line text blocks for alignment).
+.stepper-journey.stepper-vertical {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+}
+.stepper-journey.stepper-vertical .step-line {
+    display: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
     a.step:hover .step-circle,
+    button.step:hover .step-circle,
     .stepper-journey .step-circle {
         transition: none;
         transform: none;
@@ -407,4 +541,79 @@ a.step:focus-visible .step-circle {
     text-align: center;
 }
 
-// ============================================================================
+// ============================================================================
+// Form layout helpers — section, row (grid), actions footer.
+//
+// AppFormSection wraps related fields with a title + description intro.
+// AppFormRow arranges fields in a responsive grid (1/2/3 columns).
+// AppFormActions is an action button footer, optionally sticky-bottom.
+// ============================================================================
+.form-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+.form-section-head {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.form-section-title {
+    margin: 0;
+    font-size: 17px;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--color-text);
+}
+.form-section-desc {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.4;
+    color: var(--color-text-muted);
+}
+.form-section-body {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+// ============================================================================
+.form-row-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--form-cols, 2), minmax(0, 1fr));
+    gap: 16px;
+    align-items: start;
+}
+// Below md, collapse to 1 column.
+@include media-breakpoint-down(md) {
+    .form-row-grid.form-row-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+// ============================================================================
+.form-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    justify-content: flex-end;
+}
+.form-actions-start {
+    justify-content: flex-start;
+}
+.form-actions-between {
+    justify-content: space-between;
+}
+.form-actions-sticky {
+    position: sticky;
+    bottom: 0;
+    padding: 16px 0;
+    margin-top: 24px;
+    border-top: 1px solid var(--color-border);
+    background: var(--color-surface);
+}
+@media (prefers-reduced-motion: reduce) {
+    .form-actions-sticky {
+        transition: none;
+    }
+}