@webority/theme 0.107.0 → 0.108.1

package/scss/wui/_media.scss

@@ -945,7 +945,7 @@
 // ── Logo picker ──
 // Round dropzone uploader (workspace/brand logo) and the settings-page photo
 // ring share this same interactive-uploader pattern.
-.set-uploader {
+.wui-image-picker {
     // The ring diameter (--wui-logo-size) is set on the shell, not here, so the sibling remove
     // control inherits it too; the ring, initials font and icons all derive from it.
     display: inline-flex;
@@ -956,16 +956,16 @@
     color: inherit;
     cursor: pointer;
 }
-.set-uploader:disabled {
+.wui-image-picker:disabled {
     cursor: progress;
 }
-.set-uploader-img {
+.wui-image-picker-img {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     object-fit: cover;
 }
-.set-uploader-ring {
+.wui-image-picker-ring {
     position: relative;
     width: var(--wui-logo-size);
     height: var(--wui-logo-size);
@@ -975,16 +975,16 @@
     cursor: pointer;
     transition: border-color 0.18s;
     // Query container so the overlay can drop its label on a small ring (see the @container
-    // rule after .set-uploader-overlay). container-type also makes the ring the containing
+    // rule after .wui-image-picker-overlay). container-type also makes the ring the containing
     // block for the absolute overlay — same role its position:relative already plays.
     container-type: inline-size;
 }
-.set-uploader-ring:hover,
-.set-uploader:hover .set-uploader-ring,
-.set-uploader:focus-visible .set-uploader-ring {
+.wui-image-picker-ring:hover,
+.wui-image-picker:hover .wui-image-picker-ring,
+.wui-image-picker:focus-visible .wui-image-picker-ring {
     border-color: var(--color-primary);
 }
-.set-uploader-logo {
+.wui-image-picker-logo {
     width: 100%;
     height: 100%;
     border-radius: 50%;
@@ -999,10 +999,10 @@
 }
 // Avatar variant — the standard avatar disc (muted fill) instead of the soft-primary
 // initials plate; used with a person icon when no initials are given.
-.set-uploader--avatar .set-uploader-logo {
+.wui-image-picker-avatar .wui-image-picker-logo {
     background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));
 }
-.set-uploader-overlay {
+.wui-image-picker-overlay {
     position: absolute;
     inset: 5px;
     border-radius: 50%;
@@ -1023,9 +1023,9 @@
     opacity: 0;
     transition: opacity 0.18s;
 }
-.set-uploader-ring:hover .set-uploader-overlay,
-.set-uploader:hover .set-uploader-overlay,
-.set-uploader:focus-visible .set-uploader-overlay {
+.wui-image-picker-ring:hover .wui-image-picker-overlay,
+.wui-image-picker:hover .wui-image-picker-overlay,
+.wui-image-picker:focus-visible .wui-image-picker-overlay {
     opacity: 1;
 }
 // A ring too small to fit "Update photo" without cramping it over the initials (sm = 72px,
@@ -1033,10 +1033,10 @@
 // affordance. The lone icon grows a little so it reads as the whole overlay's cue. Driven by a
 // container query on the ring, so it works for every size, preset or custom px.
 @container (max-width: 95px) {
-    .set-uploader-overlay > span {
+    .wui-image-picker-overlay > span {
         display: none;
     }
-    .set-uploader-overlay > .wui-icon {
+    .wui-image-picker-overlay > .wui-icon {
         width: calc(var(--wui-logo-size) * 0.34);
         height: calc(var(--wui-logo-size) * 0.34);
     }
@@ -1044,7 +1044,7 @@
     // (reusing the AppTooltip surface look). Text comes from data-overlay-label on the ring — a
     // distinct attribute from data-wui-tip so the global tooltip rule never fires this on a large
     // ring. Only rendered inside this container query, so md/lg (label visible) never get it.
-    .set-uploader-ring[data-overlay-label]::after {
+    .wui-image-picker-ring[data-overlay-label]::after {
         content: attr(data-overlay-label);
         position: absolute;
         top: calc(100% + 8px);
@@ -1073,29 +1073,29 @@
     }
     // :not(:disabled) — a disabled/loading picker can't be updated, so it shows no tooltip
     // (mirrors the overlay, which isn't rendered in those states).
-    .set-uploader:not(:disabled):hover .set-uploader-ring[data-overlay-label]::after,
-    .set-uploader:not(:disabled):focus-visible .set-uploader-ring[data-overlay-label]::after {
+    .wui-image-picker:not(:disabled):hover .wui-image-picker-ring[data-overlay-label]::after,
+    .wui-image-picker:not(:disabled):focus-visible .wui-image-picker-ring[data-overlay-label]::after {
         opacity: 1;
         visibility: visible;
     }
     @media (prefers-reduced-motion: reduce) {
-        .set-uploader-ring[data-overlay-label]::after {
+        .wui-image-picker-ring[data-overlay-label]::after {
             transition: none;
         }
     }
 }
 // While uploading: keep the overlay (spinner) visible and signal it's not
 // clickable.
-.set-uploader-overlay.is-loading {
+.wui-image-picker-overlay.is-loading {
     opacity: 1;
 }
-.set-uploader[aria-busy="true"] {
+.wui-image-picker[aria-busy="true"] {
     cursor: progress;
 }
-.set-uploader[aria-busy="true"] .set-uploader-logo {
+.wui-image-picker[aria-busy="true"] .wui-image-picker-logo {
     visibility: hidden;
 }
-.set-uploader-hint {
+.wui-image-picker-hint {
     margin: 12px 0 0;
     max-width: 240px;
     font-size: 12px;
@@ -1104,7 +1104,7 @@
 }
 // The picker field sizes to its content (the ring) rather than stretching to the
 // form width the way a text field does.
-.set-uploader-field {
+.wui-image-picker-field {
     gap: 8px;
     width: max-content;
     max-width: 100%;
@@ -1112,7 +1112,7 @@
 // Positioning context for the remove control, which is a sibling of the button. It also owns the
 // one sizing knob — the ring diameter — so BOTH children (the button and the remove control)
 // inherit it. Presets and the numeric `size` prop set it inline; md (120px) is the default.
-.set-uploader-shell {
+.wui-image-picker-shell {
     --wui-logo-size: 120px;
     position: relative;
     display: inline-block;
@@ -1121,35 +1121,35 @@
 // ── Inline (profile-row) layout ── ring on the left, a title/subtitle/hint column beside it —
 // the account-settings avatar row (name + role + allowed-files hint on one line). The field
 // spans its container rather than shrinking to the ring the way the stacked layout does.
-.set-uploader-field--inline {
+.wui-image-picker-field-inline {
     width: 100%;
     max-width: none;
 }
-.set-uploader-row {
+.wui-image-picker-row {
     display: flex;
     align-items: center;
     gap: 20px;
 }
-.set-uploader-meta {
+.wui-image-picker-meta {
     display: flex;
     flex-direction: column;
     gap: 2px;
     min-width: 0;
 }
-.set-uploader-title {
+.wui-image-picker-title {
     font-size: 15px;
     font-weight: 700;
     line-height: 1.35;
     color: var(--color-text);
 }
-.set-uploader-subtitle {
+.wui-image-picker-subtitle {
     font-size: 14px;
     line-height: 1.4;
     color: var(--color-text-muted);
 }
 // In the row layout the hint sits under the subtitle in the meta column — no top gap to the
 // ring and no 240px cap (it reads as a full line beside the avatar, like the reference).
-.set-uploader-meta .set-uploader-hint {
+.wui-image-picker-meta .wui-image-picker-hint {
     margin-top: 6px;
     max-width: none;
 }
@@ -1157,34 +1157,34 @@
 // ── Profile (vertical identity) layout ── the same title/subtitle/hint block as inline, but
 // stacked and centred beneath the ring — an account card / directory tile. The field shrinks to
 // its content and centres the ring + text column.
-.set-uploader-field--profile {
+.wui-image-picker-field-profile {
     align-items: center;
     text-align: center;
     width: max-content;
     max-width: 100%;
 }
-.set-uploader-field--profile .set-uploader-meta {
+.wui-image-picker-field-profile .wui-image-picker-meta {
     align-items: center;
     margin-top: 12px;
 }
 // Centred under the ring, the hint reads best with a sensible cap rather than running full width.
-.set-uploader-field--profile .set-uploader-meta .set-uploader-hint {
+.wui-image-picker-field-profile .wui-image-picker-meta .wui-image-picker-hint {
     max-width: 240px;
 }
 // Ring highlights while a file is dragged over it.
-.set-uploader.is-dragging .set-uploader-ring {
+.wui-image-picker.is-dragging .wui-image-picker-ring {
     border-color: var(--color-primary);
     background: var(--color-primary-soft);
 }
 // A plain disabled (not busy) picker: dim it and drop the pointer affordance.
-.set-uploader:disabled:not([aria-busy="true"]) {
+.wui-image-picker:disabled:not([aria-busy="true"]) {
     cursor: not-allowed;
     opacity: var(--wui-disabled-opacity);
 }
-.set-uploader:disabled:not([aria-busy="true"]) .set-uploader-ring {
+.wui-image-picker:disabled:not([aria-busy="true"]) .wui-image-picker-ring {
     border-style: solid;
 }
-.set-uploader-remove {
+.wui-image-picker-remove {
     position: absolute;
     top: 2px;
     right: 2px;
@@ -1206,15 +1206,15 @@
 }
 // The × glyph scales with the button (its width/height attributes are set in JS/Razor as a
 // baseline; this overrides them, the way the overlay icon is scaled under its container query).
-.set-uploader-remove > .wui-icon {
+.wui-image-picker-remove > .wui-icon {
     width: clamp(11px, calc(var(--wui-logo-size) * 0.115), 17px);
     height: clamp(11px, calc(var(--wui-logo-size) * 0.115), 17px);
 }
-.set-uploader-remove:hover {
+.wui-image-picker-remove:hover {
     transform: scale(1.08);
 }
 // The control's own display would otherwise beat the UA [hidden] rule and keep it visible.
-.set-uploader-remove[hidden] {
+.wui-image-picker-remove[hidden] {
     display: none;
 }
 
@@ -1222,16 +1222,16 @@
 // `size` prop / preset), so there are no per-size class rules to keep in sync.
 
 // Shape variants — every round face (ring, image, logo, overlay) shares one radius.
-.set-uploader--rounded .set-uploader-ring,
-.set-uploader--rounded .set-uploader-img,
-.set-uploader--rounded .set-uploader-logo,
-.set-uploader--rounded .set-uploader-overlay {
+.wui-image-picker-rounded .wui-image-picker-ring,
+.wui-image-picker-rounded .wui-image-picker-img,
+.wui-image-picker-rounded .wui-image-picker-logo,
+.wui-image-picker-rounded .wui-image-picker-overlay {
     border-radius: 18px;
 }
-.set-uploader--square .set-uploader-ring,
-.set-uploader--square .set-uploader-img,
-.set-uploader--square .set-uploader-logo,
-.set-uploader--square .set-uploader-overlay {
+.wui-image-picker-square .wui-image-picker-ring,
+.wui-image-picker-square .wui-image-picker-img,
+.wui-image-picker-square .wui-image-picker-logo,
+.wui-image-picker-square .wui-image-picker-overlay {
     border-radius: 8px;
 }
 

package/scss/wui/_navigation.scss

@@ -5,51 +5,6 @@
 // partials are a split of one stylesheet, not independent modules, so a rule
 // here may be overridden by a later partial. Never reorder the imports.
 
-// ── Drawer / Sidebar menu ──
-// AppSidebarMenu — react-bootstrap Offcanvas mapped onto the app tokens plus
-// a flex column layout for the header / scrolling body / sticky footer.
-.app-sidebar-menu.offcanvas {
-    // Phone first: a side panel fills the screen, because a 420px panel on a 430px phone leaves a
-    // sliver of page that reads as a rendering fault. From sm up it takes its own width (below).
-    --bs-offcanvas-width: 100vw;
-    --bs-offcanvas-bg: var(--color-surface);
-    --bs-offcanvas-color: var(--color-text);
-    --bs-offcanvas-border-color: var(--color-border);
-    --bs-offcanvas-border-width: 1px;
-    --bs-offcanvas-padding-x: 0;
-    --bs-offcanvas-padding-y: 0;
-    // A caller's own maxWidth still caps the panel on a phone.
-    max-width: var(--asm-max-width, 100vw);
-    display: flex;
-    flex-direction: column;
-}
-@include media-breakpoint-up(sm) {
-    .app-sidebar-menu.offcanvas {
-        --bs-offcanvas-width: var(--asm-width, 420px);
-        max-width: var(--asm-max-width, 92vw);
-    }
-}
-.app-sidebar-menu .offcanvas-body {
-    // Inset the content to the same 20px gutter as the header/footer so plain body
-    // content doesn't stick to the panel edge. Full-bleed content (edge-to-edge nav
-    // rows) can zero it back out via `bodyClassName="p-0"`.
-    padding: 18px 20px;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-}
-// Let a caller's bodyClassName padding utility actually win over the default above
-// (the descendant selector would otherwise out-specify a single utility class).
-.app-sidebar-menu .offcanvas-body.p-0 {
-    padding: 0;
-}
-.app-sidebar-menu .asm-footer {
-    padding: 16px 20px;
-    border-top: 1px solid var(--color-border);
-    background: var(--color-surface);
-}
-
 .drawer {
     position: fixed;
     top: 0;

package/scss/wui/_notification-center.scss

@@ -86,6 +86,10 @@
     padding: 10px 16px;
     border-bottom: 1px solid var(--color-border);
 }
+.wui-notification-center-tabs {
+    padding: 0 var(--wui-space-lg);
+    border-bottom: 1px solid var(--color-border);
+}
 .wui-notification-center-title {
     margin: 0;
     font-size: 1rem;

package/scss/wui/_overlays.scss

@@ -95,10 +95,9 @@
     flex-direction: column;
     overflow: hidden;
 }
-// The centred card keeps Bootstrap's own modal transition — a smooth fade + slide-down that
-// Bootstrap already disables under prefers-reduced-motion. Nothing to override here; both
-// react-bootstrap (animation on) and Bootstrap's JS drive it. Width comes from `size`, which
-// both surfaces resolve to `--wui-modal-max-width` on the shell (it inherits to `.wui-modal`).
+// The centred card opens with the shared dialog motion (wui/_dialog-motion.scss: soft zoom by
+// default). Width comes from `size`, which both surfaces resolve to `--wui-modal-max-width` on
+// the shell (it inherits to `.wui-modal`).
 .wui-modal-header {
     flex: 0 0 auto;
     display: flex;
@@ -280,7 +279,7 @@
 // fixed across states: only the tint animates, so the button never morphs into a
 // circle. Slower on the way in than the way out.
 //
-// The drawer (AppSidebarMenu) header close shares the rule, so the two overlays dismiss with
+// The drawer (AppDrawer) header close shares the rule, so the two overlays dismiss with
 // the same control.
 .wui-modal-close,
 .wui-drawer-close {

package/scss/wui/_pagination.scss

@@ -0,0 +1,168 @@
+// Pager: the table-footer and standalone page controls.
+//
+// Part of the wui-components layer; imported right after _data.scss. Order within the layer is load-bearing (see _wui-components.scss).
+
+// Pagination footer: a "10 per page" menu beside the page buttons, flush under a table. No row
+// range and no total; the page buttons say where you are.
+.table-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--wui-space-lg);
+    padding: var(--wui-space-md) var(--wui-space-lg);
+    border-top: 1px solid var(--color-border);
+    font-size: var(--wui-fs-xs);
+    color: var(--color-text-muted);
+    flex-wrap: wrap;
+}
+.tpg-rows {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+}
+.select.tpg-select {
+    width: auto;
+    min-width: 64px;
+    height: var(--wui-control-sm);
+    min-height: var(--wui-control-sm);
+    padding: 0 var(--wui-space-2xl) 0 var(--wui-space-md);
+    font-size: var(--wui-fs-xs);
+    font-weight: var(--wui-fw-semibold);
+    border-radius: var(--wui-radius-md);
+    background-position: right 8px center;
+    background-size: 14px;
+}
+.tpg-range {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    font-size: var(--wui-fs-sm);
+    font-weight: var(--wui-fw-medium);
+    color: var(--color-text-muted);
+}
+.tpg-nav {
+    display: inline-flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--wui-space-xs);
+}
+.tpg-arrow {
+    display: grid;
+    place-items: center;
+    width: var(--wui-control-sm);
+    height: var(--wui-control-sm);
+    border: none;
+    background: transparent;
+    color: var(--color-text-muted);
+    border-radius: 50%;
+    cursor: pointer;
+    transition:
+        background 0.14s ease,
+        color 0.14s ease;
+}
+.tpg-arrow:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    color: var(--color-primary-text);
+}
+.tpg-arrow:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+// Text-5 already reads as "unavailable", so there is no opacity dimming on top of it.
+.tpg-arrow:disabled {
+    color: var(--color-border-strong);
+    cursor: not-allowed;
+}
+
+// Numbered mode (mode="numbered"): windowed page buttons sitting between the prev/next
+// arrows in .tpg-nav, same 32px circular hit target as .tpg-arrow.
+.tpg-page {
+    display: grid;
+    place-items: center;
+    min-width: var(--wui-control-sm);
+    height: var(--wui-control-sm);
+    padding: 0 var(--wui-space-sm);
+    border: none;
+    background: transparent;
+    color: var(--color-text-muted);
+    border-radius: 50%;
+    font-size: var(--wui-fs-xs);
+    font-weight: var(--wui-fw-semibold);
+    font-variant-numeric: tabular-nums;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+        background 0.14s ease,
+        color 0.14s ease;
+}
+.tpg-page:hover:not(.is-active) {
+    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    color: var(--color-primary-text);
+}
+.tpg-page:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+.tpg-page.is-active {
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+    cursor: default;
+}
+.tpg-ellipsis {
+    display: grid;
+    place-items: center;
+    min-width: 24px;
+    height: var(--wui-control-sm);
+    color: var(--color-text-subtle);
+    font-size: var(--wui-fs-xs);
+    user-select: none;
+}
+// A finger needs a 44px target: the pager's controls grow to the control height on a phone.
+@media (max-width: 575.98px) {
+    .select.tpg-select {
+        height: var(--wui-control-md);
+        min-height: var(--wui-control-md);
+    }
+    .tpg-arrow {
+        width: var(--wui-control-md);
+        height: var(--wui-control-md);
+    }
+    .tpg-page {
+        min-width: var(--wui-control-md);
+        height: var(--wui-control-md);
+    }
+    .tpg-ellipsis {
+        height: var(--wui-control-md);
+    }
+}
+
+// Standalone pager: centred under a card or list, no footer rule or padding.
+.wui-table-pagination-standalone {
+    justify-content: center;
+    padding: 0;
+    border-top: none;
+}
+
+// The compact pager: 28px page and arrow buttons and 12px text. A phone keeps the 44px target.
+.wui-table-pagination-sm {
+    font-size: var(--wui-fs-xs);
+    .tpg-arrow,
+    .tpg-page {
+        width: 28px;
+        min-width: 28px;
+        height: 28px;
+    }
+    .tpg-page {
+        font-size: var(--wui-fs-xs);
+    }
+}
+@media (max-width: 575.98px) {
+    .wui-table-pagination-sm {
+        .tpg-arrow,
+        .tpg-page {
+            width: var(--wui-control-md);
+            min-width: var(--wui-control-md);
+            height: var(--wui-control-md);
+        }
+    }
+}

package/scss/wui/_section-lead-capture.scss

@@ -0,0 +1,31 @@
+// Lead capture section of a marketing page (AppSectionLeadCapture).
+//
+// Part of the wui-components layer; imported after _sections.scss. Order within the layer is load-bearing (see _wui-components.scss).
+
+.wui-section-lead-text {
+    max-width: 48rem;
+    margin: 0;
+    color: var(--color-text-muted);
+}
+.wui-section-lead-form,
+.wui-section-lead-success {
+    display: flex;
+    flex-direction: column;
+    gap: var(--wui-space-md);
+    width: 100%;
+    max-width: 40rem;
+}
+.wui-section-center .wui-section-lead-form,
+.wui-section-center .wui-section-lead-success {
+    margin-inline: auto;
+}
+.wui-section-lead-fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--wui-space-md);
+}
+.wui-section-lead-consent {
+    margin: 0;
+    color: var(--color-text-muted);
+    font-size: var(--wui-fs-sm);
+}

package/scss/wui/_shortcuts.scss

@@ -134,6 +134,15 @@
     background: var(--color-bg-muted);
     color: var(--color-text);
 }
+.wui-shortcut-group + .wui-shortcut-group {
+    margin-top: var(--wui-space-lg);
+}
+.wui-shortcut-group-title {
+    margin: 0 0 var(--wui-space-sm);
+    font-size: var(--wui-fs-sm);
+    font-weight: var(--wui-fw-semibold);
+    color: var(--color-text-subtle);
+}
 .wui-shortcut-keys {
     display: grid;
     gap: 6px;
@@ -152,6 +161,6 @@
 .wui-shortcut-keys dd {
     margin: 0;
     color: var(--color-text-muted);
-    font-size: 13px;
+    font-size: var(--wui-fs-sm);
     text-align: end;
 }

package/scss/wui/_table-server.scss

@@ -29,7 +29,7 @@
 .wui-table-server > .table-wrap[data-wui-table-error] > .table > tbody {
     display: none;
 }
-.wui-table-error .tbl-empty-icon {
+.wui-table-error .empty-state-icon {
     color: var(--color-danger-text);
     background: var(--color-danger-soft);
 }

package/scss/wui/_whats-new.scss

@@ -45,6 +45,23 @@
 .wui-whats-new:not([data-wui-unread]) .wui-whats-new-dot {
     display: none;
 }
+// With indicator="count" the dot holds the unread number, so it widens into a pill around it.
+.wui-whats-new[indicator="count"] .wui-whats-new-dot {
+    box-sizing: border-box;
+    width: auto;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 var(--wui-space-xs);
+    border-radius: var(--wui-radius-pill);
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--wui-fs-xs);
+    font-weight: var(--wui-fw-semibold);
+    line-height: var(--wui-lh-heading);
+}
 
 .wui-whats-new-panel {
     display: none;