@webority/theme 0.107.0 → 0.108.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.107.0",
+  "version": "0.108.0",
   "description": "Webority shared design system — Bootstrap 5.3 SCSS overrides, --wui-* tokens, and shared component CSS. The single source of brand chrome for React portals and Razor sites.",
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {
@@ -51,7 +51,7 @@
     "country-flag-icons": "^1.6.20",
     "sass-embedded": "^1.97.0",
     "vite": "^8.0.12",
-    "@webority/tokens": "0.107.0"
+    "@webority/tokens": "0.108.0"
   },
   "scripts": {
     "tokens": "node ../tokens/dist/webority.js brand --library --out ../tokens/dist --web scss/_tokens.generated.scss",

package/scss/_bootstrap.generated.scss

@@ -1,4 +1,4 @@
-// Generated by @webority/tokens 0.107.0 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.108.0 from its token source. Do not edit; run webority brand --library.
 $body-color: #252f4a !default;
 $body-secondary-color: #4b5675 !default;
 $body-tertiary-color: #626a82 !default;

package/scss/_tokens.generated.scss

@@ -1,4 +1,4 @@
-// Generated by @webority/tokens 0.107.0 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.108.0 from its token source. Do not edit; run webority brand --library.
 
 :root {
     --wui-primary: #4F46E5;

package/scss/_wui-components.scss

@@ -36,7 +36,9 @@
 @import "wui/navigation";
 @import "wui/nav-list";
 @import "wui/card";
+@import "wui/empty-state";
 @import "wui/data";
+@import "wui/pagination";
 @import "wui/illustration";
 @import "wui/table-server";
 @import "wui/kanban";
@@ -50,9 +52,11 @@
 @import "wui/typography";
 @import "wui/disclosure";
 @import "wui/display";
+@import "wui/compare-table";
 @import "wui/flow";
 // After `flow`: the pricing section extends its `.plan-grid` rules.
 @import "wui/sections";
+@import "wui/section-lead-capture";
 @import "wui/chart";
 @import "wui/chart-card";
 @import "wui/calendar";
@@ -102,7 +106,6 @@
 // After `overlays`: anchors the shared modal shell to the top when it holds the palette card.
 @import "wui/command-palette";
 @import "wui/context-menu";
-@import "wui/menubar";
 @import "wui/navigation-menu";
 @import "wui/tour";
 @import "wui/hover-card";
@@ -114,3 +117,5 @@
 @import "wui/interaction";
 // Last: restates the settled state of menus other partials style, so it must win.
 @import "wui/menu-motion";
+// After menu-motion: reuses its zoom keyframes and must win over the overlay partials' modal rules.
+@import "wui/dialog-motion";

package/scss/_wui-core.scss

@@ -28,7 +28,9 @@
 @import "wui/navigation";
 @import "wui/nav-list";
 @import "wui/card";
+@import "wui/empty-state";
 @import "wui/data";
+@import "wui/pagination";
 @import "wui/illustration";
 @import "wui/table-server";
 @import "wui/inline-edit";
@@ -41,9 +43,11 @@
 @import "wui/typography";
 @import "wui/disclosure";
 @import "wui/display";
+@import "wui/compare-table";
 @import "wui/flow";
 // After `flow`: the pricing section extends its `.plan-grid` rules.
 @import "wui/sections";
+@import "wui/section-lead-capture";
 @import "wui/chart";
 @import "wui/chart-card";
 @import "wui/markdown";
@@ -82,7 +86,6 @@
 @import "wui/floating";
 @import "wui/code-block";
 @import "wui/context-menu";
-@import "wui/menubar";
 @import "wui/navigation-menu";
 @import "wui/hover-card";
 @import "wui/notification-center";
@@ -93,3 +96,5 @@
 @import "wui/interaction";
 // Last: restates the settled state of menus other partials style, so it must win.
 @import "wui/menu-motion";
+// After menu-motion: reuses its zoom keyframes and must win over the overlay partials' modal rules.
+@import "wui/dialog-motion";

package/scss/wui/_avatar-picker.scss

@@ -1,12 +1,13 @@
-// ── Avatar picker ──
-// AppAvatarPicker / <app-avatar-picker>: a profile photo (or its placeholder) beside the actions
-// that change it. The crop dialog it opens is <wui-image-crop> (_image-crop.scss). The diameter
-// comes from --wui-avatar-size on .wui-avatar-picker, which both wrappers set from `size`.
+// ── Image picker, buttons look ──
+// AppImagePicker with controls="buttons" (and <app-image-picker controls="buttons">): a profile photo
+// (or its placeholder) beside the actions that change it. The crop dialog it opens is <wui-image-crop>
+// (_image-crop.scss). The diameter comes from --wui-avatar-size on .wui-image-picker-buttons, which
+// both wrappers set from `size`.
 // Every colour is a theme token, so dark mode follows the token flip.
 //
 // Part of the wui-components layer, see _wui-components.scss for load order.
 
-.wui-avatar-picker {
+.wui-image-picker-buttons {
     // The md diameter; both wrappers set their own size inline, which wins.
     --wui-avatar-size: 96px;
     display: flex;
@@ -15,7 +16,7 @@
     gap: 16px;
 }
 
-.wui-avatar-picker-face {
+.wui-image-picker-buttons-face {
     position: relative;
     display: grid;
     flex: none;
@@ -30,29 +31,29 @@
     font: inherit;
     cursor: pointer;
 }
-.wui-avatar-picker-face:disabled {
+.wui-image-picker-buttons-face:disabled {
     cursor: default;
 }
-.wui-avatar-picker-face[aria-busy="true"] {
+.wui-image-picker-buttons-face[aria-busy="true"] {
     cursor: progress;
 }
-.wui-avatar-picker-face:focus-visible {
+.wui-image-picker-buttons-face:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: 3px;
 }
 // A file held over the photo: the ring says it can be dropped there.
-.wui-avatar-picker.is-dragging .wui-avatar-picker-face {
+.wui-image-picker-buttons.is-dragging .wui-image-picker-buttons-face {
     outline: 2px dashed var(--color-primary);
     outline-offset: 3px;
 }
 
-.wui-avatar-picker-img {
+.wui-image-picker-buttons-img {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     object-fit: cover;
 }
-.wui-avatar-picker-placeholder {
+.wui-image-picker-buttons-placeholder {
     display: grid;
     place-items: center;
     font-size: calc(var(--wui-avatar-size) * 0.36);
@@ -62,7 +63,7 @@
 }
 
 // The camera mark on the ring's edge, so the photo reads as something you can change.
-.wui-avatar-picker-badge {
+.wui-image-picker-buttons-badge {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -75,41 +76,41 @@
     background: var(--color-primary);
     color: var(--color-on-primary);
 }
-.wui-avatar-picker-face:disabled:not([aria-busy="true"]) .wui-avatar-picker-badge {
+.wui-image-picker-buttons-face:disabled:not([aria-busy="true"]) .wui-image-picker-buttons-badge {
     display: none;
 }
 
-.wui-avatar-picker-actions {
+.wui-image-picker-buttons-actions {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 8px;
 }
-.wui-avatar-picker-actions .btn {
+.wui-image-picker-buttons-actions .btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
 }
-.wui-avatar-picker-actions [hidden] {
+.wui-image-picker-buttons-actions [hidden] {
     display: none;
 }
 
 // "Take photo" opens the front camera, which only a phone or tablet has: it shows on touch screens.
-.wui-avatar-picker-actions .wui-avatar-picker-camera {
+.wui-image-picker-buttons-actions .wui-image-picker-buttons-camera {
     display: none;
 }
 @media (pointer: coarse) {
-    .wui-avatar-picker-actions .wui-avatar-picker-camera:not([hidden]) {
+    .wui-image-picker-buttons-actions .wui-image-picker-buttons-camera:not([hidden]) {
         display: inline-flex;
     }
-    .wui-avatar-picker-actions .btn {
+    .wui-image-picker-buttons-actions .btn {
         min-height: 44px;
     }
 }
 
 // On a phone the actions sit under the photo, full width, so each is an easy target.
 @media (max-width: 575.98px) {
-    .wui-avatar-picker {
+    .wui-image-picker-buttons {
         flex-direction: column;
         align-items: flex-start;
     }

package/scss/wui/_choice.scss

@@ -349,7 +349,7 @@
 .search-select-lg .search-select-multi {
     height: auto;
 }
-// AppSelectMini is <wui-select compact>: sm sits on the 32px sm rung, lg one rung below the lg
+// AppSelect compact is <wui-select compact>: sm sits on the 32px sm rung, lg one rung below the lg
 // field, never under 32px. The compound selector outranks both the plain size rule and the compact rule.
 .search-select-compact.search-select-sm .search-select-control {
     height: var(--wui-control-sm);
@@ -417,12 +417,11 @@
     height: 15px;
 }
 
-// AppSelectMini — the compact single-purpose picker (page size, a range switch). It shares
-// every behaviour with AppSelect and differs only in metrics.
+// AppSelect compact (page size, a range switch, a toolbar picker). It shares every behaviour
+// with the full select and differs only in metrics.
 //
-// <wui-select compact> emitted this class and NOTHING styled it, so AppSelectMini rendered
-// byte-identical to a full-size select on both surfaces — the catalogue told people to
-// reach for it when they wanted something compact, and got a full-height control. It was invisible
+// <wui-select compact> emitted this class and NOTHING styled it, so a compact picker rendered
+// byte-identical to a full-size select on both surfaces. It was invisible
 // to every gate because the class check only ever scanned the Razor tag helpers, never the
 // elements package that actually emits it.
 //

package/scss/wui/_compare-table.scss

@@ -0,0 +1,201 @@
+// Feature-comparison table.
+//
+// Part of the wui-components layer; imported right after _display.scss. Order within the layer is load-bearing (see _wui-components.scss).
+
+// ============================================================================
+// Feature-comparison table. The highlighted column is tinted so the reader's eye
+// lands on it without a legend. The root is a size container so the phone stack
+// follows the table's own width, not the viewport.
+// ============================================================================
+.compare-table {
+    position: relative;
+    container-type: inline-size;
+    overflow: clip;
+    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: var(--wui-space-lg) var(--wui-space-lg);
+    text-align: left;
+    border-bottom: 1px solid var(--color-border);
+    font-size: var(--wui-fs-sm);
+}
+.compare-table tr:last-child td {
+    border-bottom: none;
+}
+.compare-table th {
+    background: var(--color-bg-subtle);
+    font-size: var(--wui-fs-xs);
+    font-weight: var(--wui-fw-semibold);
+    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: var(--wui-fw-medium);
+}
+.compare-table .wui-compare-center {
+    text-align: center;
+}
+.compare-table .wui-compare-nowrap {
+    white-space: nowrap;
+}
+.compare-table th[scope="row"] {
+    font-weight: var(--wui-fw-semibold);
+    font-size: var(--wui-fs-sm);
+    color: var(--color-text);
+}
+.compare-table .wui-compare-group {
+    background: var(--color-bg-subtle);
+    color: var(--color-text);
+    font-weight: var(--wui-fw-semibold);
+}
+
+// Relaxed density: a 16px body and 32px side padding, for marketing tables that read as prose.
+.compare-table.wui-compare-relaxed th,
+.compare-table.wui-compare-relaxed td {
+    padding-inline: var(--wui-space-2xl);
+    padding-block: var(--wui-space-lg);
+}
+.compare-table.wui-compare-relaxed td {
+    font-size: var(--wui-fs-base);
+}
+
+// Sticky header: the header sticks to the viewport because the root clips rather than scrolls.
+.compare-table.wui-compare-sticky-head thead th {
+    position: sticky;
+    top: var(--wui-compare-table-top, 0);
+    z-index: 1;
+}
+
+.compare-yes {
+    color: var(--color-success-text);
+}
+.compare-no {
+    color: var(--color-text-subtle);
+}
+
+.wui-compare-state {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--wui-space-xs);
+}
+.wui-compare-state .wui-icon {
+    align-self: center;
+    flex: none;
+}
+.wui-compare-state-yes {
+    color: var(--color-success-text);
+}
+.wui-compare-state-no {
+    color: var(--color-danger-text);
+}
+.wui-compare-state-warn {
+    color: var(--color-warning-text);
+}
+.wui-compare-state-partial {
+    color: var(--color-text-subtle);
+}
+
+.wui-compare-code {
+    font-weight: var(--wui-fw-semibold);
+    white-space: nowrap;
+    color: var(--color-primary-text);
+}
+
+// Phone stack: under 576px of table width each row is a card, its label the title, each cell
+// a "column name: answer" line. The header stays in the DOM, visually hidden, for screen readers.
+@container (max-width: 575px) {
+    .compare-table[data-mobile="stack"] thead {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+    }
+    .compare-table[data-mobile="stack"] table,
+    .compare-table[data-mobile="stack"] tbody,
+    .compare-table[data-mobile="stack"] tr {
+        display: block;
+        width: 100%;
+    }
+    .compare-table[data-mobile="stack"] tbody > tr {
+        margin-block-end: var(--wui-space-md);
+        padding: var(--wui-space-md) var(--wui-space-lg);
+        border: 1px solid var(--color-border);
+        border-radius: var(--wui-radius-lg);
+    }
+    .compare-table[data-mobile="stack"] tbody > tr.wui-compare-group-row {
+        margin-block-end: 0;
+        padding: 0;
+        border: 0;
+        background: none;
+    }
+    .compare-table[data-mobile="stack"] th,
+    .compare-table[data-mobile="stack"] td {
+        display: block;
+        border: 0;
+    }
+    .compare-table[data-mobile="stack"] th[scope="row"] {
+        padding: 0 0 var(--wui-space-xs);
+        font-size: var(--wui-fs-base);
+        font-weight: var(--wui-fw-semibold);
+    }
+    .compare-table[data-mobile="stack"] td {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--wui-space-md);
+        padding: var(--wui-space-xs) 0;
+        text-align: right;
+        font-size: var(--wui-fs-sm);
+    }
+    .compare-table[data-mobile="stack"] td::before {
+        content: attr(data-label);
+        flex: none;
+        font-size: var(--wui-fs-xs);
+        font-weight: var(--wui-fw-medium);
+        color: var(--color-text-subtle);
+        text-align: left;
+    }
+    .compare-table[data-mobile="stack"] td.is-highlight {
+        padding-inline: var(--wui-space-xs);
+    }
+}
+
+// Phone scroll: the table keeps its columns and scrolls sideways in a focusable region.
+.wui-compare-scroll {
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+}
+.wui-compare-scroll:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
+}
+.wui-compare-scroll[data-more="end"] {
+    mask-image: linear-gradient(to right, black calc(100% - var(--wui-space-2xl)), transparent);
+}
+.compare-table table.wui-compare-scroll-table {
+    min-width: 36rem;
+}
+.compare-table table.wui-compare-sticky-first th:first-child,
+.compare-table table.wui-compare-sticky-first td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    border-right: 1px solid var(--color-border);
+}
+.compare-table table.wui-compare-sticky-first td:first-child {
+    background: var(--color-surface);
+}

package/scss/wui/_controls.scss

@@ -1306,7 +1306,7 @@ wui-date-range {
     display: block;
     width: 100%;
 }
-// AppSelectMini renders <wui-select compact> — a page-size / range picker that is
+// AppSelect compact renders <wui-select compact> — a page-size / range picker that is
 // deliberately narrow and does NOT belong to a .field. It has to opt out of the width
 // above, or every toolbar picker stretches across its toolbar.
 wui-select[compact] {