@webority/theme 0.107.0 → 0.108.1

package/scss/wui/_display.scss

@@ -266,76 +266,6 @@ a.kpi:focus-visible {
     }
 }
 
-// ============================================================================
-// Icon-tile info list — label/value rows, each with a leading round icon.
-// The row is an <a> when it links (mail/tel), a <div> otherwise.
-// ============================================================================
-.info-list {
-    display: flex;
-    flex-direction: column;
-}
-.info-row {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    padding: 16px 0;
-    border-bottom: 1px solid var(--color-border);
-    color: var(--color-text);
-    text-decoration: none;
-}
-// First and last rows shed their outer padding so the list sits flush in a card body.
-.info-row:first-child {
-    padding-top: 0;
-}
-.info-row:last-child {
-    padding-bottom: 0;
-    border-bottom: none;
-}
-.info-icon {
-    flex: none;
-    width: 36px;
-    height: 36px;
-    display: inline-grid;
-    place-items: center;
-    border-radius: 999px;
-    background: var(--color-primary-soft);
-    color: var(--color-primary-text);
-}
-.info-meta {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-width: 0;
-}
-.info-key {
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--color-text-subtle);
-}
-.info-value {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--color-text);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-// A blank fact reads as a muted "no value", not a broken row.
-.info-value.is-empty {
-    font-weight: 400;
-    color: var(--color-text-subtle);
-}
-a.info-row,
-a.info-row:hover {
-    text-decoration: none;
-}
-a.info-row:hover .info-value {
-    color: var(--color-primary-text);
-    text-decoration: underline;
-}
-
 // ============================================================================
 // Labeled key-value grid — record details, definitions, attributes.
 // ============================================================================
@@ -414,6 +344,9 @@ a.info-row:hover .info-value {
 .descs-col-3 .descs-list {
     --descs-cols: 3;
 }
+.wui-descs-col-4 {
+    --descs-cols: 4;
+}
 .descs-col-1.descs-bordered .descs-item:first-child {
     border-top: none;
 }
@@ -423,15 +356,20 @@ a.info-row:hover .info-value {
 .descs-col-3.descs-bordered .descs-item:nth-child(-n + 3) {
     border-top: none;
 }
+.wui-descs-col-4.descs-bordered .descs-item:nth-child(-n + 4) {
+    border-top: none;
+}
 // Media-breakpoint collapse to single column under md.
 @include media-breakpoint-down(sm) {
     .descs-col-2 .descs-list,
-    .descs-col-3 .descs-list {
+    .descs-col-3 .descs-list,
+    .wui-descs-col-4 .descs-list {
         --descs-cols: 1;
     }
     // One column here, so only the first item sits on the first row.
     .descs-col-2.descs-bordered .descs-item:nth-child(n + 2),
-    .descs-col-3.descs-bordered .descs-item:nth-child(n + 2) {
+    .descs-col-3.descs-bordered .descs-item:nth-child(n + 2),
+    .wui-descs-col-4.descs-bordered .descs-item:nth-child(n + 2) {
         border-top: 1px solid var(--color-border);
     }
 }
@@ -469,6 +407,66 @@ a.info-row:hover .info-value {
 .descs-item.wui-descs-emphasis .descs-value {
     font-weight: 700;
 }
+// Icon tile on any layout: a 16px glyph in a 36px round tile.
+.wui-descs-icon {
+    flex: none;
+    width: 36px;
+    height: 36px;
+    display: inline-grid;
+    place-items: center;
+    border-radius: 999px;
+    background: var(--color-primary-soft);
+    color: var(--color-primary-text);
+}
+.wui-descs-link {
+    color: inherit;
+    text-decoration: none;
+}
+.wui-descs-link:hover {
+    color: var(--color-primary-text);
+    text-decoration: underline;
+}
+// List layout (React `layout="list"`): one column, a rule between rows, flush first and last row,
+// and the value on one line with an ellipsis. The icon tile spans both rows beside the label and value.
+.wui-descs-list .descs-list {
+    --descs-cols: 1;
+}
+.wui-descs-list .descs-item {
+    display: grid;
+    grid-template-columns: 36px minmax(0, 1fr);
+    column-gap: 16px;
+    row-gap: 2px;
+    align-items: center;
+    padding: 16px 0;
+    border-top: none;
+    border-bottom: 1px solid var(--color-border);
+}
+.wui-descs-list .descs-item:first-child {
+    padding-top: 0;
+}
+.wui-descs-list .descs-item:last-child {
+    padding-bottom: 0;
+    border-bottom: none;
+}
+.wui-descs-list .wui-descs-icon {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+}
+.wui-descs-list .descs-label {
+    grid-column: 2;
+    grid-row: 1;
+    padding: 0;
+}
+.wui-descs-list .descs-value {
+    grid-column: 2;
+    grid-row: 2;
+    min-width: 0;
+    padding: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: normal;
+}
 
 // ============================================================================
 // Segmented control: 2 to 4 mutually exclusive options shown side by side.
@@ -1252,52 +1250,6 @@ a.info-row:hover .info-value {
     }
 }
 
-// ============================================================================
-// Feature-comparison table — us vs them. The highlighted column is tinted so
-// the reader's eye lands on it without a legend.
-// ============================================================================
-.compare-table {
-    overflow: hidden;
-    border: 1px solid var(--color-border);
-    border-radius: var(--wui-radius-lg);
-    corner-shape: squircle;
-    background: var(--color-surface);
-}
-.compare-table table {
-    width: 100%;
-    border-collapse: collapse;
-}
-.compare-table th,
-.compare-table td {
-    padding: 14px 18px;
-    text-align: left;
-    border-bottom: 1px solid var(--color-border);
-    font-size: 14px;
-}
-.compare-table tr:last-child td {
-    border-bottom: none;
-}
-.compare-table th {
-    background: var(--color-bg-subtle);
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--color-text);
-}
-.compare-table th.is-highlight {
-    background: var(--color-primary-soft);
-    color: var(--color-primary-text);
-}
-.compare-table td.is-highlight {
-    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
-    font-weight: 500;
-}
-.compare-yes {
-    color: var(--color-success-text);
-}
-.compare-no {
-    color: var(--color-text-subtle);
-}
-
 // ============================================================================
 // Resource card — an icon-tile link to a doc, guide or template.
 // ============================================================================

package/scss/wui/_drawer.scss

@@ -1,6 +1,6 @@
 // ── Drawer ──
 // AppDrawer / <app-drawer> (a <wui-drawer> element): a side drawer from md up, a bottom sheet
-// below it. The sheet is as tall as its highest snap point (`--wui-drawer-max`, percent of the
+// below it, or a side drawer at every width when it is `no-sheet`. The sheet is as tall as its highest snap point (`--wui-drawer-max`, percent of the
 // viewport height) and sits `max - snap` down, so a snap point is one number the element writes
 // (`--wui-drawer-snap`) and a drag adds its pixels (`--wui-drawer-drag`). Only transform moves.
 //
@@ -8,6 +8,7 @@
 
 .wui-drawer {
     --wui-drawer-width: 480px;
+    --wui-drawer-max-width: 92vw;
     --wui-drawer-duration: 280ms;
     position: fixed;
     inset: 0;
@@ -68,11 +69,25 @@
     min-width: 0;
 }
 .wui-drawer-title {
+    display: flex;
+    align-items: center;
+    gap: var(--wui-space-sm);
     font-size: 18px;
     font-weight: 600;
     color: var(--color-text);
     overflow-wrap: anywhere;
 }
+.wui-drawer-title-ic {
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: 30px;
+    height: 30px;
+    border-radius: var(--wui-radius-md);
+    corner-shape: squircle;
+    background: var(--color-primary-soft);
+    color: var(--color-primary-text);
+}
 .wui-drawer-subtitle {
     margin-top: 1px;
     font-size: 12px;
@@ -112,85 +127,103 @@
     display: none !important;
 }
 
-// Side drawer: from md up.
-@include media-breakpoint-up(md) {
+// Side drawer: from md up, and at every width for a `no-sheet` drawer (a menu never becomes a sheet).
+@mixin wui-drawer-side {
     .wui-drawer-panel {
         top: 0;
         bottom: 0;
         right: 0;
         width: min(var(--wui-drawer-width), 100%);
+        max-width: var(--wui-drawer-max-width);
         transform: translateX(100%);
     }
-    .wui-drawer[side="start"] .wui-drawer-panel {
+    &[side="start"] .wui-drawer-panel {
         right: auto;
         left: 0;
         transform: translateX(-100%);
     }
-    .wui-drawer[open] .wui-drawer-panel,
-    .wui-drawer[open][side="start"] .wui-drawer-panel {
+    &[open] .wui-drawer-panel,
+    &[open][side="start"] .wui-drawer-panel {
         transform: none;
     }
 }
-
-// Bottom sheet: below md.
-@include media-breakpoint-down(md) {
-    .wui-drawer-panel {
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: calc(var(--wui-drawer-max, 90) * 1dvh);
-        max-height: 100dvh;
-        border-radius: var(--wui-radius-xl) var(--wui-radius-xl) 0 0;
-        corner-shape: squircle;
-        transform: translateY(100%);
-    }
-    .wui-drawer[open] .wui-drawer-panel {
-        transform: translateY(calc((var(--wui-drawer-max, 90) - var(--wui-drawer-snap, 50)) * 1vh + var(--wui-drawer-drag, 0px)));
-        transform: translateY(calc((var(--wui-drawer-max, 90) - var(--wui-drawer-snap, 50)) * 1dvh + var(--wui-drawer-drag, 0px)));
-    }
-    // The part of the sheet below the screen edge still scrolls into view.
-    .wui-drawer-body {
-        padding-bottom: calc(24px + (var(--wui-drawer-max, 90) - var(--wui-drawer-snap, 50)) * 1dvh + env(safe-area-inset-bottom, 0px));
-    }
-    .wui-drawer-footer {
-        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
-    }
-    .wui-drawer-grip {
-        display: flex;
-        flex: none;
-        justify-content: center;
-        touch-action: none;
-        cursor: grab;
-    }
-    .wui-drawer-header {
-        touch-action: none;
-    }
-    .wui-drawer.is-dragging .wui-drawer-grip,
-    .wui-drawer.is-dragging .wui-drawer-header {
-        cursor: grabbing;
-    }
-    .wui-drawer-handle {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 64px;
-        height: 28px;
-        border-radius: var(--wui-radius-md);
-        cursor: inherit;
-    }
-    .wui-drawer-handle::before {
-        content: "";
-        width: 40px;
-        height: 4px;
-        border-radius: 999px;
-        background: var(--color-border-strong);
+@include media-breakpoint-up(md) {
+    .wui-drawer:not([no-sheet]) {
+        @include wui-drawer-side;
     }
-    .wui-drawer-handle:focus-visible {
-        outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
-        outline-offset: var(--wui-focus-ring-offset);
+}
+.wui-drawer[no-sheet] {
+    @include wui-drawer-side;
+}
+// A menu panel fills a phone, as the side panel always did below sm.
+@include media-breakpoint-down(sm) {
+    .wui-drawer[no-sheet] .wui-drawer-panel {
+        width: 100%;
+        max-width: 100%;
     }
-    .wui-drawer-header {
-        padding-top: 4px;
+}
+
+// Bottom sheet: below md, unless the drawer is `no-sheet`.
+@include media-breakpoint-down(md) {
+    .wui-drawer:not([no-sheet]) {
+        .wui-drawer-panel {
+            left: 0;
+            right: 0;
+            bottom: 0;
+            height: calc(var(--wui-drawer-max, 90) * 1dvh);
+            max-height: 100dvh;
+            border-radius: var(--wui-radius-xl) var(--wui-radius-xl) 0 0;
+            corner-shape: squircle;
+            transform: translateY(100%);
+        }
+        &[open] .wui-drawer-panel {
+            transform: translateY(calc((var(--wui-drawer-max, 90) - var(--wui-drawer-snap, 50)) * 1vh + var(--wui-drawer-drag, 0px)));
+            transform: translateY(calc((var(--wui-drawer-max, 90) - var(--wui-drawer-snap, 50)) * 1dvh + var(--wui-drawer-drag, 0px)));
+        }
+        // The part of the sheet below the screen edge still scrolls into view.
+        .wui-drawer-body {
+            padding-bottom: calc(24px + (var(--wui-drawer-max, 90) - var(--wui-drawer-snap, 50)) * 1dvh + env(safe-area-inset-bottom, 0px));
+        }
+        .wui-drawer-footer {
+            padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
+        }
+        .wui-drawer-grip {
+            display: flex;
+            flex: none;
+            justify-content: center;
+            touch-action: none;
+            cursor: grab;
+        }
+        .wui-drawer-header {
+            touch-action: none;
+        }
+        &.is-dragging .wui-drawer-grip,
+        &.is-dragging .wui-drawer-header {
+            cursor: grabbing;
+        }
+        .wui-drawer-handle {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 64px;
+            height: 28px;
+            border-radius: var(--wui-radius-md);
+            cursor: inherit;
+        }
+        .wui-drawer-handle::before {
+            content: "";
+            width: 40px;
+            height: 4px;
+            border-radius: 999px;
+            background: var(--color-border-strong);
+        }
+        .wui-drawer-handle:focus-visible {
+            outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+            outline-offset: var(--wui-focus-ring-offset);
+        }
+        .wui-drawer-header {
+            padding-top: 4px;
+        }
     }
 }
 

package/scss/wui/_empty-state.scss

@@ -0,0 +1,124 @@
+// Empty state: the card look, the table-body look and the sibling placement under a data table.
+//
+// Part of the wui-components layer; imported right before _data.scss, where these rules sat. Order within the layer is load-bearing (see _wui-components.scss).
+
+// ── Empty state ──
+.empty-state {
+    text-align: center;
+    padding: var(--wui-space-3xl) var(--wui-space-xl);
+    color: var(--color-text-subtle);
+}
+.empty-state-title {
+    // The table look shares this title. A table's header hides in any .table-wrap whose empty block is visible.
+    font-size: var(--wui-fs-base);
+    font-weight: var(--wui-fw-semibold);
+    line-height: var(--wui-lh-heading);
+    color: var(--color-text);
+}
+.empty-state-message {
+    margin: var(--wui-space-sm) 0 0;
+    font-size: var(--wui-fs-base);
+    line-height: var(--wui-lh-body);
+    color: var(--color-text-muted);
+}
+.empty-state-action {
+    margin-top: var(--wui-space-lg);
+}
+// Tighter scale for a widget/tile, as opposed to a full card or page.
+.empty-state-sm {
+    padding: var(--wui-space-2xl) var(--wui-space-lg);
+}
+.empty-state-sm .empty-state-title {
+    font-size: var(--wui-fs-sm);
+}
+.empty-state-sm .empty-state-message {
+    font-size: var(--wui-fs-xs);
+}
+.empty-state-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--wui-radius-lg);
+    background: var(--color-primary-soft);
+    color: var(--color-primary-text);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: var(--wui-space-lg);
+}
+
+// The table-body look of the empty state (AppEmptyState variant="table", the empty
+// body a DataTable renders in place of its rows): a 50px primary-tinted disc above
+// the title, with a looser padding than the card look.
+.wui-empty-state-table {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--wui-space-3xl) var(--wui-space-xl);
+    color: inherit;
+}
+.wui-empty-state-table .empty-state-icon {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    margin-bottom: var(--wui-space-lg);
+}
+.wui-empty-state-table .empty-state-message {
+    margin-top: var(--wui-space-sm);
+    font-weight: var(--wui-fw-normal);
+}
+.wui-empty-state-table .empty-state-action {
+    margin-top: var(--wui-space-xl);
+}
+
+.wui-table-empty {
+    padding: var(--wui-space-2xl) var(--wui-space-xl);
+    text-align: center;
+    color: var(--color-text-muted);
+}
+// The empty state owns its own padding and is not a row you can act on — no
+// cell padding, no border, and no hover fill from .table / .table-ledger.
+.table td.wui-table-empty:has(> .wui-empty-state-table),
+.table td.wui-table-empty:has(> .tbl-empty-plain) {
+    padding: 0;
+    border-bottom: 0;
+}
+// A plain-string empty (no table-look wrapper) — carries the padding the cell
+// needs.
+.tbl-empty-plain {
+    padding: var(--wui-space-2xl) var(--wui-space-xl);
+    text-align: center;
+    color: var(--color-text-muted);
+}
+.table tbody tr:hover td.wui-table-empty:has(> .wui-empty-state-table),
+.table-ledger tbody tr:hover td.wui-table-empty:has(> .wui-empty-state-table) {
+    background: transparent;
+}
+// The React AppDataTable renders its empty state as a SIBLING of the table, INSIDE `.table-wrap`
+// (the horizontal scroller), in this `.tbl-empty-block`. Two things fall out of that placement:
+//   1. the horizontal scrollbar sits at the BOTTOM of the wrap — below this message — instead of
+//      being wedged between the header band and the message (which is what an outside-the-wrap
+//      block produced), and
+//   2. `position: sticky; left: 0` + `width: 100%` pins the message to the wrap's VISIBLE width and
+//      holds it there while a wide header scrolls behind it: `width: 100%` on a child of an
+//      overflow container resolves to the container's CONTENT (visible) width, not its scroll width,
+//      so the message never grows the scroll region and never slides off on a narrow screen.
+//
+// This deliberately does NOT use `container-type` + `100cqw` — the query container collapses
+// `.table-wrap` to a sliver when it is a flex/grid item (see the `.table-wrap` note below). Sticky
+// sidesteps that entirely. (The `.wui-table-empty` cell rules above remain for Razor, where the
+// empty state is author-placed inside a `<td colSpan>`.)
+.tbl-empty-block {
+    position: sticky;
+    left: 0;
+    // = the wrap's visible width (content box of the overflow container), never its scroll width.
+    width: 100%;
+    // `.wui-empty-state-table` / `.tbl-empty-plain` inside own the centring and padding.
+}
+// An empty list shows its empty state with no column headers above it.
+.table-wrap:has(> .tbl-empty-block:not([hidden])) > table > thead {
+    display: none;
+}

package/scss/wui/_illustration.scss

@@ -1,5 +1,5 @@
 // ── Illustrations ──
-// The empty-state illustration set (AppEmptyState / AppTableEmptyState `illustration`, <app-empty-state
+// The empty-state illustration set (AppEmptyState `illustration`, <app-empty-state
 // illustration>): decorative SVG drawn only with these classes, so every colour is a theme token and
 // dark mode follows. Sources: packages/theme/illustrations/*.svg.
 //
@@ -71,7 +71,7 @@
     width: 112px;
     margin-bottom: 12px;
 }
-.tbl-empty .wui-empty-illustration {
+.wui-empty-state-table .wui-empty-illustration {
     width: 140px;
 }
 
@@ -92,7 +92,7 @@
     width: 88px;
     margin-bottom: 12px;
 }
-.tbl-empty .wui-empty-illustration-custom {
+.wui-empty-state-table .wui-empty-illustration-custom {
     width: 120px;
     margin-bottom: 16px;
 }

package/scss/wui/_image-crop.scss

@@ -1,5 +1,5 @@
 // ── Image crop ──
-// <wui-image-crop>: the crop surface AppLogoPicker / AppAvatarPicker (and their Razor tags) show in a dialog before
+// <wui-image-crop>: the crop surface AppImagePicker (and its Razor tag) shows in a dialog before
 // upload. The image is fitted into the stage; the frame is positioned by the element (inline
 // left/top/width/height) and dims everything outside it with a very large box-shadow, which the
 // stage clips. Every colour is a theme token, so dark mode follows the token flip.

package/scss/wui/_interaction.scss

@@ -169,13 +169,12 @@ html:has(.form-actions-sticky) {
     .attach-remove,
     .attach-item-remove,
     .file-preview-remove,
-    .set-uploader-remove,
+    .wui-image-picker-remove,
     .chip-remove,
     .repeater-remove,
     .wui-usermenu-trigger,
     .wui-carousel-arrow,
     .wui-carousel-pause,
-    .wui-menubar-trigger,
     .wui-nav-menu-trigger,
     .wui-expand-toggle,
     .wui-group-toggle,
@@ -197,7 +196,7 @@ html:has(.form-actions-sticky) {
     .segmented-option,
     .choice-chip,
     .chip-clickable,
-    .faq-q,
+    .wui-accordion-trigger,
     .wui-chart-legend-item,
     .wui-column-menu-item,
     .wui-nav-menu-link,
@@ -210,7 +209,6 @@ html:has(.form-actions-sticky) {
     .card-clickable,
     .res-card,
     a.kpi,
-    a.info-row,
     .struct-card,
     .avatar-clickable,
     .attach-drop,