@webority/theme 0.76.0 → 0.77.1

package/scss/wui/_flow.scss

@@ -9,6 +9,7 @@
 //   .stepper           — compact: numbered circle above a label, line behind.
 //   .stepper-journey   — wide: 40px dot beside a label + title, for a page masthead.
 //   .stepper-icons     — large connected icon badges with a "STEP n" eyebrow.
+//   .wui-step-tiles    — a row of tiles: rounded icon square, label and a state line, chevrons between.
 //
 // Fully themable through a small set of `--wui-step-*` custom properties — set them on
 // the stepper (or the wizard host, or any ancestor: they inherit), or flip the whole
@@ -517,11 +518,160 @@ button.step.done:focus-visible .step-circle {
     }
 }
 
+// .wui-step-tiles — each step is a list item holding a rounded icon square with the label and a
+// state line (Done, Current, To do) beside it; chevrons join the tiles. Like every variant it is one
+// brand-primary accent: the current tile is solid accent and done tiles the soft tint, so a tone
+// class recolours the current one and a done-tone class the finished ones.
+// ----------------------------------------------------------------------------
+.wui-step-tiles {
+    padding: 0 16px;
+}
+.wui-step-tiles > ol {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+.wui-step-tile {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+}
+// Every tile after the first takes an equal share of the free width and centres its chevron in it.
+.wui-step-tile + .wui-step-tile {
+    flex: 1 1 auto;
+    padding-inline-start: 12px;
+}
+.wui-step-tile + .wui-step-tile > .wui-step-tile-body {
+    margin-inline-start: 12px;
+}
+.wui-step-tile + .wui-step-tile::before {
+    content: "";
+    flex: none;
+    width: 7px;
+    height: 7px;
+    margin-inline: auto;
+    border-top: 2px solid var(--wui-step-connector, var(--color-border-strong));
+    border-right: 2px solid var(--wui-step-connector, var(--color-border-strong));
+    transform: rotate(45deg);
+}
+.wui-step-tile-body {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+    padding: 4px 8px 4px 0;
+    border: 0;
+    border-radius: var(--radius);
+    background: none;
+    font: inherit;
+    text-align: start;
+    color: inherit;
+}
+button.wui-step-tile-body {
+    cursor: pointer;
+}
+button.wui-step-tile-body:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+.wui-step-tiles .step-circle {
+    width: var(--wui-step-tile-size, 34px);
+    height: var(--wui-step-tile-size, 34px);
+    border: 0;
+    border-radius: var(--radius);
+    background: var(--color-bg-muted);
+    color: var(--color-text-subtle);
+    font-size: var(--wui-step-number-font, 13px);
+}
+.wui-step-tile.active .step-circle {
+    background: var(--wui-step-accent, var(--color-primary-ink));
+    color: var(--wui-step-accent-fg, var(--color-on-primary-ink));
+}
+.wui-step-tile.done .step-circle {
+    background: var(--wui-step-done-soft, var(--wui-step-soft, var(--color-primary-soft)));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary-ink)));
+}
+.wui-step-tile.error .step-circle {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+}
+.wui-step-tile.skipped .step-circle {
+    border: 1px dashed var(--color-border-strong);
+    color: var(--color-text-muted);
+}
+.wui-step-tiles .step-text {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+}
+.wui-step-tiles .step-label {
+    max-width: none;
+    font-size: var(--wui-step-label-font, 13px);
+    font-weight: 600;
+    line-height: 1.25;
+    color: var(--color-text);
+    white-space: nowrap;
+}
+.wui-step-tile.active .step-label {
+    color: var(--wui-step-accent, var(--color-primary-ink));
+}
+.wui-step-tile.error .step-label {
+    color: var(--color-danger-text);
+}
+button.wui-step-tile-body:hover .step-label {
+    color: var(--wui-step-accent, var(--color-primary-ink));
+}
+.wui-step-tiles .wui-step-tile-state {
+    font-size: 12px;
+    line-height: 1.3;
+    color: var(--color-text-muted);
+    white-space: nowrap;
+}
+// A vertical wizard, or a phone, stacks the tiles into a list; the chevrons only make sense in a row.
+.wui-step-tiles.stepper-vertical > ol {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+}
+.wui-step-tiles.stepper-vertical .wui-step-tile + .wui-step-tile {
+    flex: none;
+    padding-inline-start: 0;
+}
+.wui-step-tiles.stepper-vertical .wui-step-tile + .wui-step-tile > .wui-step-tile-body {
+    margin-inline-start: 0;
+}
+.wui-step-tiles.stepper-vertical .wui-step-tile + .wui-step-tile::before {
+    content: none;
+}
+@include media-breakpoint-down(md) {
+    .wui-step-tiles.wui-step-tiles > ol {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+    }
+    .wui-step-tiles.wui-step-tiles .wui-step-tile + .wui-step-tile {
+        flex: none;
+        padding-inline-start: 0;
+    }
+    .wui-step-tiles.wui-step-tiles .wui-step-tile + .wui-step-tile > .wui-step-tile-body {
+        margin-inline-start: 0;
+    }
+    .wui-step-tiles.wui-step-tiles .wui-step-tile + .wui-step-tile::before {
+        content: none;
+    }
+}
+
 // No connectors: the wizard's hide-connectors option drops the line between steps on every
 // variant and orientation. Placed after the variants so it outranks their equal-specificity
 // rails; the journey bar's .step-line siblings are simply not emitted.
 .wui-stepper-no-connectors .step + .step::before,
-.wui-stepper-no-connectors .step:not(:last-child)::after {
+.wui-stepper-no-connectors .step:not(:last-child)::after,
+.wui-stepper-no-connectors .wui-step-tile + .wui-step-tile::before {
     content: none;
 }
 
@@ -999,6 +1149,11 @@ button.step.done:focus-visible .step-circle {
     // width here and lines up with the fields beside it. A .date-w-* class on the field still wins.
     --wui-datepicker-width: 100%;
 }
+@for $n from 1 through 12 {
+    .wui-form-cols-#{$n} {
+        --form-cols: #{$n};
+    }
+}
 // Below md, collapse to 1 column.
 @include media-breakpoint-down(md) {
     .form-row-grid.form-row-grid {
@@ -1056,6 +1211,60 @@ wui-wizard-step[hidden] {
 .wizard-stepper {
     margin-bottom: 24px;
 }
+// The optional bar above the stepper (`top-bar`): the title at the start, then the step count and the
+// close button at the end.
+.wui-wizard-topbar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    box-sizing: border-box;
+    height: 56px;
+    padding: 0 16px;
+    border-bottom: 1px solid var(--color-border);
+}
+.wui-wizard-topbar + .wizard-stepper {
+    margin-top: 16px;
+}
+.wui-wizard-topbar-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    font-size: 16px;
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--color-text);
+}
+.wui-wizard-topbar-count {
+    flex: none;
+    font-size: 13px;
+    color: var(--color-text-subtle);
+    white-space: nowrap;
+}
+.wui-wizard-topbar-close {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius);
+    background: transparent;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition:
+        background-color 0.12s ease,
+        color 0.12s ease;
+}
+.wui-wizard-topbar-close:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+.wui-wizard-topbar-close:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
 // A skipped step reads as "passed over", not "achieved": a dashed, muted circle so it
 // is visibly distinct from a ticked (done) step.
 .step.skipped .step-circle {

package/scss/wui/_image-crop.scss

@@ -213,3 +213,8 @@ wui-image-crop {
         min-height: 44px;
     }
 }
+
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+:is(.wui-crop-toolbtn, .wui-crop-zoombtn):active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}

package/scss/wui/_interaction.scss

@@ -90,25 +90,14 @@ html:has(.form-actions-sticky) {
     scroll-padding-bottom: 96px;
 }
 
-// ---- Workspace switcher trigger ------------------------------------------------
-// A button styled like a field: its soft focus border alone is under 3:1, so keyboard focus
-// adds the outline right outside it. Form fields keep the soft border without an outline.
-.workspace-switcher-trigger:focus-visible,
-.workspace-switcher-trigger[aria-expanded="true"] {
-    outline: calc(var(--wui-focus-ring-width) - 1px) solid var(--color-focus-ring);
-    outline-offset: 0;
-}
-
 // ---- Active option in a pop-up list --------------------------------------------
-// Search results, the country list, mentions and the command
-// palette keep focus in their input and mark the keyboard's row (aria-activedescendant) with
-// the hover tint alone, about 1.2:1. The inset ring makes that row plain; inset, because the
-// list scrolls and would clip an outer ring. Select and autocomplete options draw their own
-// light edge in _choice.scss.
+// Search results, the country list and mentions keep focus in their input and mark the
+// keyboard's row (aria-activedescendant) with the hover tint alone, about 1.2:1. The inset ring
+// makes that row plain; inset, because the list scrolls and would clip an outer ring. Select and
+// autocomplete options draw their own light edge in _choice.scss.
 .wui-topsearch-hit.is-active,
 .country-dropdown-item.is-active,
-.wui-mention-option.is-active,
-.wui-cmd-item[aria-selected="true"] {
+.wui-mention-option.is-active {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-inset);
 }
@@ -119,7 +108,8 @@ html:has(.form-actions-sticky) {
 // reduced-motion variant. !important because pressing always happens under the pointer, so a
 // more specific hover rule's `background` shorthand would otherwise reset the wash.
 // Buttons (.btn) keep Bootstrap's active fill. Controls drawn by a background image (checkbox,
-// switch, Bootstrap's close glyph) are not in this list.
+// switch, Bootstrap's close glyph) are not in this list. The on-demand widget partials restate
+// this rule for their own controls, so the wash ships with the layer that draws them.
 :is(
     .u-action,
     .pw-toggle,
@@ -139,9 +129,6 @@ html:has(.form-actions-sticky) {
     .datepicker-cell,
     .wui-daterange-preset,
     .timepicker-option,
-    .wui-calendar-nav-btn,
-    .wui-calendar-today-btn,
-    .wui-calendar-view-btn,
     .app-tabs-scroll-btn,
     .wui-overflow-more,
     .wui-overflow-item,
@@ -157,22 +144,10 @@ html:has(.form-actions-sticky) {
     .wui-shortcut-close,
     .wui-shortcut-toggle,
     .wui-sortable-handle,
-    .wui-crop-toolbtn,
-    .wui-crop-zoombtn,
-    .wui-file-viewer-zoom,
-    .wui-rich-text-button,
-    .wui-rich-text-link-apply,
-    .wui-rich-text-link-cancel,
-    .wui-rich-text-link-remove,
-    .wui-kanban-action,
-    .wui-kanban-collapse,
-    .wui-kanban-more,
     .wui-comment-action,
     .wui-reaction-add,
     .wui-reaction-choice,
     button.wui-reaction,
-    .wui-cmd-back,
-    button.wui-cmd-crumb,
     .wui-code-copy,
     .wui-notification-center-markall,
     .wui-notification-center-foot,
@@ -187,9 +162,6 @@ html:has(.form-actions-sticky) {
     .chip-remove,
     .repeater-remove,
     .wui-usermenu-trigger,
-    .workspace-switcher-trigger,
-    .workspace-switcher-create,
-    .workspace-switcher-footer-action,
     .wui-carousel-arrow,
     .wui-carousel-pause,
     .wui-menubar-trigger,
@@ -202,15 +174,12 @@ html:has(.form-actions-sticky) {
     .dropdown-item,
     .country-dropdown-item,
     .search-select-option,
-    .wui-tree-row,
     .wui-split-link,
     .wui-topsearch-hit,
     a.wui-bell-item,
     .wui-notification-center-item,
-    .workspace-switcher-option,
     .app-nav-item,
     .wui-tabbar-item,
-    .dock-item,
     .toolbar-item,
     .toolbar-action,
     .app-tab,
@@ -254,3 +223,24 @@ html:has(.form-actions-sticky) {
         transition: transform var(--wui-press-duration) ease-out;
     }
 }
+
+// Phone touch targets
+// Below sm the pointer is a finger: every small control the library draws reaches 44px.
+@media (max-width: 575.98px) {
+    .btn-sm,
+    .btn-group-sm > .btn {
+        min-height: 44px;
+    }
+    .topbar-icon-btn,
+    .app-tabs-scroll-btn,
+    .select.tpg-select {
+        min-height: 44px;
+    }
+    .topbar-icon-btn,
+    .app-tabs-scroll-btn {
+        min-width: 44px;
+    }
+    wui-select[compact] .search-select-control {
+        min-height: 44px;
+    }
+}

package/scss/wui/_kanban.scss

@@ -653,3 +653,8 @@
         background: var(--color-primary);
     }
 }
+
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+:is(.wui-kanban-action, .wui-kanban-collapse, .wui-kanban-more):active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}

package/scss/wui/_media.scss

@@ -127,8 +127,9 @@
     height: 16px;
     padding: 0 4px;
     border-radius: 999px;
-    background: var(--color-danger);
-    color: var(--wui-bg-light);
+    // The pairing .wui-bell-count uses (_shell-parts.scss): it clears contrast in light and dark.
+    background: var(--color-danger-strong);
+    color: var(--color-progress-label);
     font-size: 10px;
     font-weight: 700;
     line-height: 1;
@@ -430,7 +431,7 @@
     background: var(--color-scrim-strong);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
-    color: #fff;
+    color: var(--color-on-scrim);
     border-radius: 999px;
     cursor: pointer;
     transition: background 0.2s;
@@ -849,7 +850,7 @@
     border: 2px solid transparent;
     border-radius: 50%;
     background: var(--color-scrim-strong);
-    color: #fff;
+    color: var(--color-on-scrim);
     cursor: pointer;
     opacity: 0;
     transition:
@@ -971,7 +972,7 @@
     gap: clamp(2px, calc(var(--wui-logo-size) * 0.035), 4px);
     padding: 0 6%;
     background: var(--color-scrim-strong);
-    color: #fff;
+    color: var(--color-on-scrim);
     font-size: clamp(9px, calc(var(--wui-logo-size) * 0.1), 11px);
     line-height: 1.15;
     text-align: center;

package/scss/wui/_rich-text.scss

@@ -9,6 +9,11 @@ wui-rich-text {
     display: block;
     min-width: 0;
 }
+// Inside a form field's flex column it would size to its content, so it stretches to the field.
+.field > wui-rich-text {
+    align-self: stretch;
+    width: 100%;
+}
 // Until the editor's own script has run, the field shows its starting value in a plain box.
 wui-rich-text:not(:defined) > textarea {
     display: block;
@@ -114,6 +119,12 @@ wui-rich-text[readonly] .wui-rich-text-shell {
     font-weight: 600;
     line-height: 1;
 }
+.wui-rich-text-glyph-bold {
+    font-weight: 700;
+}
+.wui-rich-text-glyph-italic {
+    font-style: italic;
+}
 
 // ── Link box ──
 .wui-rich-text-linkbar {
@@ -279,3 +290,13 @@ wui-rich-text[readonly] .wui-rich-text-prose {
         transition: none;
     }
 }
+
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+:is(
+    .wui-rich-text-button,
+    .wui-rich-text-link-apply,
+    .wui-rich-text-link-cancel,
+    .wui-rich-text-link-remove
+):active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}

package/scss/wui/_shell.scss

@@ -573,6 +573,11 @@
     padding-left: calc(46px + (var(--wui-nav-depth, 1) - 1) * 16px);
     font-size: 13px;
 }
+@for $n from 2 through 6 {
+    .wui-nav-depth-#{$n} {
+        --wui-nav-depth: #{$n};
+    }
+}
 // A sub-item label wraps to two lines before it is cut, so a long child label stays readable.
 // Top-level labels keep the single-line ellipsis.
 .app-nav-subitem .app-nav-text {
@@ -735,7 +740,7 @@
 .app-topbar {
     position: sticky;
     top: 0;
-    z-index: 10;
+    z-index: var(--wui-z-sticky);
     display: flex;
     align-items: center;
     justify-content: space-between;

package/scss/wui/_table-server.scss

@@ -18,6 +18,11 @@
     pointer-events: none;
     transition: opacity 0.15s ease;
 }
+.wui-skeleton-cell {
+    display: block;
+    height: 0.9rem;
+    border-radius: 0.25rem;
+}
 
 // A failed fetch shows its message and Retry in the state block; the stale rows of the previous
 // page are hidden rather than left looking current.

package/scss/wui/_tree.scss

@@ -122,3 +122,8 @@ wui-tree {
         animation-duration: 2s;
     }
 }
+
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+.wui-tree-row:active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}

package/scss/wui/_utilities.scss

@@ -12,6 +12,7 @@
 .wui-icon {
     display: inline-block;
     flex-shrink: 0;
+    vertical-align: -.125em;
 }
 
 // ── Grid / layout utils ──

package/scss/wui/_workspace.scss

@@ -41,13 +41,25 @@
 .workspace-switcher-trigger:hover:not(:focus):not([aria-expanded="true"]) {
     border-color: var(--color-border-strong);
 }
+// A button styled like a field: its soft focus border alone is under 3:1, so keyboard focus
+// adds the outline right outside it. Form fields keep the soft border without an outline.
 .workspace-switcher-trigger:focus-visible,
 .workspace-switcher-trigger[aria-expanded="true"] {
-    outline: none;
+    outline: calc(var(--wui-focus-ring-width) - 1px) solid var(--color-focus-ring);
+    outline-offset: 0;
     background: var(--color-surface);
     border-color: var(--color-focus-border);
     box-shadow: none;
 }
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+:is(
+    .workspace-switcher-trigger,
+    .workspace-switcher-create,
+    .workspace-switcher-footer-action,
+    .workspace-switcher-option
+):active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}
 .workspace-switcher-trigger.is-compact {
     width: 40px;
     min-height: 40px;
@@ -382,3 +394,12 @@
         transition: none;
     }
 }
+
+// Phone touch targets
+// Below sm the pointer is a finger: every small control the library draws reaches 44px.
+@media (max-width: 575.98px) {
+    .workspace-switcher-trigger.is-compact {
+        min-width: 44px;
+        min-height: 44px;
+    }
+}