@webority/theme 0.14.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.14.0",
+  "version": "0.15.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": {

package/scss/_wui-components.scss

@@ -51,5 +51,7 @@
 @import "wui/dock";
 @import "wui/consent-banner";
 @import "wui/toolbar";
+// After `overlays`: anchors the shared modal shell to the top when it holds the palette card.
+@import "wui/command-palette";
 // Last: restates the settled state of menus other partials style, so it must win.
 @import "wui/menu-motion";

package/scss/wui/_command-palette.scss

@@ -0,0 +1,195 @@
+// ── Command palette ──
+// AppCommandPalette / <app-command-palette> / <wui-command-palette>: app-wide "search and jump".
+// The overlay is the shared modal (.wui-modal-shell, .wui-modal), with .wui-cmd-card on the
+// card; this partial styles only what sits inside it, plus the top anchoring. The element marks
+// the active result with aria-selected="true", which is the one state hook below. Every colour
+// is a theme token, so dark mode follows the token flip with no rules of its own.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+// Anchored near the top rather than centred, so the input stays put while results grow and
+// shrink underneath it.
+.modal.wui-modal-shell:has(.wui-cmd-card) {
+    align-items: flex-start;
+    padding-top: max(20px, min(12vh, 120px));
+}
+.wui-modal.wui-cmd-card {
+    max-height: min(560px, calc(100vh - 2 * max(20px, min(12vh, 120px))));
+}
+// The list scrolls, not the body: the input and the footer stay pinned.
+.wui-cmd-card > .wui-modal-body {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    overflow: hidden;
+}
+
+wui-command-palette {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.wui-cmd-search {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 10px;
+    padding: 0 16px;
+    border-bottom: 1px solid var(--color-border);
+}
+.wui-cmd-search-icon {
+    display: inline-flex;
+    flex: 0 0 auto;
+    color: var(--color-text-muted);
+}
+.wui-cmd-input {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 52px;
+    padding: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--color-text);
+    font-size: 16px;
+}
+.wui-cmd-input::placeholder {
+    color: var(--color-text-subtle);
+}
+.wui-cmd-spinner {
+    flex: 0 0 auto;
+    color: var(--color-primary);
+}
+
+.wui-cmd-list {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 6px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border-strong) transparent;
+}
+.wui-cmd-list[hidden],
+.wui-cmd-group[hidden],
+.wui-cmd-item[hidden] {
+    display: none;
+}
+.wui-cmd-group + .wui-cmd-group {
+    margin-top: 4px;
+}
+.wui-cmd-group-label {
+    padding: 8px 10px 4px;
+    color: var(--color-text-muted);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.wui-cmd-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 10px;
+    border-radius: var(--radius);
+    corner-shape: squircle;
+    color: var(--color-text);
+    cursor: pointer;
+    // Keeps a little of the next row visible when the keyboard scrolls the active one in.
+    scroll-margin: 6px;
+}
+.wui-cmd-item[aria-selected="true"] {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+.wui-cmd-item-icon {
+    display: inline-grid;
+    flex: 0 0 auto;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius);
+    corner-shape: squircle;
+    background: var(--color-bg-muted);
+    color: var(--color-text-muted);
+}
+.wui-cmd-item[aria-selected="true"] .wui-cmd-item-icon {
+    background: var(--color-surface);
+    color: var(--color-primary);
+}
+.wui-cmd-item-text {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+}
+.wui-cmd-item-label,
+.wui-cmd-item-desc {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 1.4;
+}
+.wui-cmd-item-label {
+    font-size: 14px;
+}
+.wui-cmd-item-desc {
+    color: var(--color-text-muted);
+    font-size: 12px;
+}
+.wui-cmd-item-meta {
+    flex: 0 0 auto;
+    color: var(--color-text-muted);
+    font-size: 12px;
+}
+// The query inside a label: bolder, never a highlighter block.
+.wui-cmd-mark {
+    padding: 0;
+    background: transparent;
+    color: inherit;
+    font-weight: 700;
+}
+
+.wui-cmd-empty {
+    padding: 20px 16px;
+    color: var(--color-text-muted);
+    font-size: 13px;
+    text-align: center;
+}
+// The status region is always in the page, so a screen reader hears the empty text arrive;
+// with nothing to say it takes no room.
+.wui-cmd-empty:empty {
+    display: none;
+}
+
+.wui-cmd-footer {
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 16px;
+    padding: 8px 16px;
+    border-top: 1px solid var(--color-border);
+    color: var(--color-text-muted);
+    font-size: 12px;
+}
+.wui-cmd-footer kbd {
+    padding: 1px 6px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-sm);
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+    font-family: inherit;
+    font-size: 11px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .wui-cmd-item {
+        transition:
+            background-color 0.12s ease,
+            color 0.12s ease;
+    }
+}

package/scss/wui/_display.scss

@@ -412,8 +412,14 @@ a.info-row:hover .info-value {
 // label in primary. The tint is 8% so the label clears AA on it in both themes (light 5.6:1,
 // dark 4.5:1); a stronger tint drops the dark label under 4.5:1.
 // ============================================================================
+// Each size sets one option height, icon size and note size, so a text, icon or note option in
+// the same control lines up, and the four sizes step evenly: 28 / 32 / 38 / 44px tall overall
+// (the track adds 8px), xl matching the 44px field height. A note option grows past the height.
 .segmented {
     --segmented-selected-bg: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
+    --segmented-option-h: 24px;
+    --segmented-icon: 13px;
+    --segmented-note: 10px;
     position: relative;
     display: inline-flex;
     gap: 2px;
@@ -428,7 +434,10 @@ a.info-row:hover .info-value {
     display: inline-flex;
     align-items: center;
     gap: 5px;
-    padding: 5px 12px;
+    min-height: var(--segmented-option-h);
+    // A small fixed vertical padding: the min-height sets the height, so an icon cannot push
+    // one option taller than its text-only siblings. Only a two-line note option grows.
+    padding: 4px 12px;
     border: 0;
     border-radius: 999px;
     background: transparent;
@@ -478,7 +487,7 @@ a.info-row:hover .info-value {
     color: inherit;
 }
 .segmented-option-note {
-    font-size: 10px;
+    font-size: var(--segmented-note);
     font-weight: 400;
     // Inherits the option's current text colour (plain, hover, or primary-on-checked) rather
     // than a fixed token, so it always matches without a separate state per variant. No opacity
@@ -529,25 +538,61 @@ a.info-row:hover .info-value {
     background: transparent;
     box-shadow: none;
 }
+// A two-line note option keeps a little more air inside the ring than a one-line option needs.
+.segmented-option:has(.segmented-option-note) {
+    padding-top: 6px;
+    padding-bottom: 6px;
+}
+.segmented-option > .wui-icon {
+    flex: none;
+    width: var(--segmented-icon);
+    height: var(--segmented-icon);
+}
+// Borderless (bordered={false} / bordered="false") — the selected pill keeps its tint and primary
+// label but drops the ring, on both the sliding thumb and the no-JS per-option pill.
+.segmented-borderless .segmented-thumb,
+.segmented-borderless .segmented-option:has(.segmented-input:checked) {
+    box-shadow: none;
+}
 // Icon pop — the selected segment's glyph springs up a touch as it becomes active.
 .segmented-option:has(.segmented-input:checked) .wui-icon {
     transform: scale(1.14);
     transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 .segmented-sm .segmented-thumb,
-.segmented-lg .segmented-thumb {
+.segmented-lg .segmented-thumb,
+.segmented-xl .segmented-thumb {
     top: 3px;
     bottom: 3px;
 }
+.segmented-sm {
+    --segmented-option-h: 20px;
+    --segmented-icon: 12px;
+}
+.segmented-lg {
+    --segmented-option-h: 30px;
+    --segmented-icon: 15px;
+    --segmented-note: 11px;
+}
+.segmented-xl {
+    --segmented-option-h: 36px;
+    --segmented-icon: 17px;
+    --segmented-note: 12px;
+}
 .segmented-sm .segmented-option {
     padding: 4px 9px;
     font-size: 11px;
 }
 .segmented-lg .segmented-option {
     gap: 6px;
-    padding: 8px 16px;
+    padding: 4px 16px;
     font-size: 13px;
 }
+.segmented-xl .segmented-option {
+    gap: 7px;
+    padding: 4px 20px;
+    font-size: 15px;
+}
 // Full width — segments share the row equally (a toggle spanning a card or toolbar).
 .segmented-full {
     display: flex;

package/scss/wui/_overlays.scss

@@ -316,23 +316,23 @@
 // keeps a non-square source whole rather than cropping it.
 .wui-confirm-icon img {
     display: block;
-    width: var(--wui-confirm-icon-size, 80px);
-    height: var(--wui-confirm-icon-size, 80px);
+    width: var(--wui-confirm-icon-size, 120px);
+    height: var(--wui-confirm-icon-size, 120px);
     object-fit: contain;
 }
 .wui-confirm-icon svg {
-    width: var(--wui-confirm-icon-size, 80px);
-    height: var(--wui-confirm-icon-size, 80px);
+    width: var(--wui-confirm-icon-size, 120px);
+    height: var(--wui-confirm-icon-size, 120px);
 }
-// Icon size tracks the copy: a title+message dialog keeps the full 80px badge, but a lone
+// Icon size tracks the copy: a title+message dialog keeps the full 120px badge, but a lone
 // title (no message) is one line and gets a smaller badge. `.wui-confirm-msg` is a real
 // element rendered only when a message exists, so `:has()` is reliable here; CSS width/height
 // override the SVG's own width/height attributes. An explicit iconSize / icon-size sets
 // --wui-confirm-icon-size on the badge and wins in both cases.
 .wui-confirm-content:not(:has(.wui-confirm-msg)) .wui-confirm-icon svg,
 .wui-confirm-content:not(:has(.wui-confirm-msg)) .wui-confirm-icon img {
-    width: var(--wui-confirm-icon-size, 56px);
-    height: var(--wui-confirm-icon-size, 56px);
+    width: var(--wui-confirm-icon-size, 84px);
+    height: var(--wui-confirm-icon-size, 84px);
 }
 .wui-confirm-title {
     margin: 0 0 10px;

package/scss/wui/_shell.scss

@@ -194,8 +194,12 @@
 .app-shell {
     --app-sidebar-w: 260px;
     --app-sidebar-rail-w: 88px;
+    // The sidebar's bottom band, from the rule above the collapse toggle to the sidebar's
+    // bottom edge, is the height of a one-line footer. The rule then continues the footer's
+    // top edge across the shell. The toggle fills what is left after the rule and two gaps.
+    --app-shell-foot-h: 39px;
     // The equal space above (below the rule) and below the collapse toggle.
-    --app-sidebar-toggle-gap: 12px;
+    --app-sidebar-toggle-gap: 4px;
 
     position: relative;
     display: grid;
@@ -552,7 +556,9 @@
     justify-content: center;
     width: 100%;
     position: relative;
-    min-height: var(--wui-control-height);
+    // The band height less the rule and the gaps above and below the toggle, so rule + toggle
+    // + bottom inset add up to exactly --app-shell-foot-h.
+    height: calc(var(--app-shell-foot-h) - 1px - 2 * var(--app-sidebar-toggle-gap));
     // 8px above the rule, the 1px rule, then the same gap below it as under the row.
     margin-top: calc(9px + var(--app-sidebar-toggle-gap));
     padding: 0;