@webority/theme 0.102.3 → 0.104.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.102.3",
+  "version": "0.104.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.102.3"
+    "@webority/tokens": "0.104.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.102.3 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.104.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/_components.scss

@@ -625,6 +625,15 @@
         scrollbar-color: var(--wui-scrollbar) transparent;
     }
 }
+// AppDropdown menuWidth: a fixed menu width, so long rows wrap instead of widening the menu.
+.wui-dropdown-menu-sm { width: 15rem; }
+.wui-dropdown-menu-md { width: 20rem; }
+.wui-dropdown-menu-lg { width: 25rem; }
+.wui-dropdown-menu-sm .dropdown-item,
+.wui-dropdown-menu-md .dropdown-item,
+.wui-dropdown-menu-lg .dropdown-item {
+    white-space: normal;
+}
 
 .dropdown-item {
     display: flex;
@@ -669,6 +678,15 @@
     }
 }
 
+// Listed but unchoosable (AppDropdown disabled): quiet, no hover or press tint.
+.dropdown-item.wui-dropdown-item-disabled,
+.dropdown-item.wui-dropdown-item-disabled:hover,
+.dropdown-item.wui-dropdown-item-disabled:active {
+    color: var(--color-text-subtle);
+    cursor: not-allowed;
+    background: transparent;
+}
+
 // The form of a posting dropdown item takes no box, so its item stays a plain row of the menu.
 .wui-dropdown-form {
     display: contents;

package/scss/_tokens.generated.scss

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

package/scss/wui/_choice.scss

@@ -28,11 +28,11 @@
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-offset);
 }
-.struct-card.checked {
+.struct-card:has(.struct-card-input:checked) {
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     background: color-mix(in srgb, var(--color-primary) 5%, transparent);
 }
-.struct-card.checked .struct-card-title {
+.struct-card:has(.struct-card-input:checked) .struct-card-title {
     color: var(--color-primary-text);
 }
 
@@ -44,7 +44,7 @@
 .struct-card:has(.struct-card-input:disabled):hover {
     border-color: var(--color-border);
 }
-.struct-card.checked:has(.struct-card-input:disabled):hover {
+.struct-card:has(.struct-card-input:checked):has(.struct-card-input:disabled):hover {
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
 .struct-card:has(.struct-card-input:disabled):active {
@@ -69,10 +69,27 @@
         background 0.12s,
         color 0.12s;
 }
-.struct-card.checked .struct-card-ic {
+.struct-card:has(.struct-card-input:checked) .struct-card-ic {
     background: var(--color-surface);
     color: var(--color-primary-text);
 }
+// Opt-in (selected-style="filled"): the checked card's icon disc fills with primary. The hover
+// rule above is more specific, so the hovered, enabled card repeats the selector to keep its glyph on-primary.
+.wui-struct-card-filled:has(.struct-card-input:checked) .struct-card-ic,
+.wui-struct-card-filled:has(.struct-card-input:checked):hover:not(:has(.struct-card-input:disabled)) .struct-card-ic {
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+}
+// The linear and bold glyphs are both rendered; the input's checked state picks one.
+.wui-struct-card-glyph-on {
+    display: none;
+}
+.struct-card:has(.struct-card-input:checked) .wui-struct-card-glyph {
+    display: none;
+}
+.struct-card:has(.struct-card-input:checked) .wui-struct-card-glyph-on {
+    display: inline-flex;
+}
 // Hover previews the chosen glyph colour; a card that cannot change keeps its grey.
 .struct-card:hover:not(:has(.struct-card-input:disabled)) .struct-card-ic {
     color: var(--color-primary-text);
@@ -118,7 +135,7 @@
         opacity 0.12s ease,
         transform 0.12s ease;
 }
-.struct-card.checked .struct-card-check {
+.struct-card:has(.struct-card-input:checked) .struct-card-check {
     opacity: 1;
     transform: scale(1);
 }
@@ -211,7 +228,7 @@
 }
 // Drop the icon disc — the illustration stands on its own, sized large.
 .struct-card-tile .struct-card-ic,
-.struct-card-tile.checked .struct-card-ic {
+.struct-card-tile:has(.struct-card-input:checked) .struct-card-ic {
     width: auto;
     height: auto;
     border-radius: 0;

package/scss/wui/_controls.scss

@@ -364,6 +364,14 @@
 .form-switch-pill .form-check-input {
     corner-shape: squircle;
 }
+
+// Round checkbox (app-checkbox shape="circle"): the same glyph, ring, disabled and error states
+// as the square box, drawn as a circle. The wrapper class and the type selector outrank the square
+// box's own radius rule.
+.form-check-circle .form-check-input[type="checkbox"] {
+    border-radius: 50%;
+    corner-shape: round;
+}
 @media (prefers-reduced-motion: reduce) {
     .form-check-input,
     .wui-check,
@@ -1723,6 +1731,17 @@ wui-select[compact] {
     background: var(--color-surface);
     color: var(--color-primary-text);
 }
+// variant="solid": the checked chip fills with primary and its count turns a translucent on-primary pill.
+.wui-choice-chip-solid:has(input:checked),
+.wui-choice-chip-solid:has(input:checked):hover {
+    border-color: transparent;
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+}
+.wui-choice-chip-solid:has(input:checked) .count {
+    background: color-mix(in srgb, var(--color-on-primary) 22%, transparent);
+    color: inherit;
+}
 
 // Size scale (`size`): height, padding, gap and font step together; md is the base above.
 .choice-chip-sm {

package/scss/wui/_data.scss

@@ -1380,6 +1380,14 @@
     background: color-mix(in srgb, var(--color-danger) 10%, transparent);
     color: var(--color-danger-text);
 }
+// A neutral action: muted ink at rest, a muted surface and body ink on hover (an action on a card or a quiet surface).
+.u-action.neutral {
+    color: var(--color-text-muted);
+}
+.u-action.neutral:hover:not(:disabled) {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
 .u-action.u-action-preview {
     background: var(--color-primary-soft);
     color: var(--color-primary-text);

package/scss/wui/_overlays.scss

@@ -318,6 +318,45 @@
     }
 }
 
+// The back arrow before a modal's title: the close button's size, shape and colours, on the start side.
+.wui-modal-back {
+    margin-inline-end: var(--wui-space-xs);
+    display: grid;
+    place-items: center;
+    flex: none;
+    width: var(--wui-control-md);
+    height: var(--wui-control-md);
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    background: var(--color-bg-subtle);
+    color: var(--color-text-muted);
+    border-radius: var(--wui-radius-lg);
+    corner-shape: squircle;
+    transition:
+        background 180ms cubic-bezier(0.4, 0, 0.2, 1),
+        color 180ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.wui-modal-back:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+    transition:
+        background 280ms cubic-bezier(0.16, 1, 0.3, 1),
+        color 280ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.wui-modal-back:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+@media (prefers-reduced-motion: reduce) {
+    .wui-modal-back,
+    .wui-modal-back:hover {
+        transition:
+            background 1ms linear,
+            color 1ms linear;
+    }
+}
+
 // Fullscreen size: the card is the whole viewport. Both surfaces put `wui-modal-fullscreen` on the
 // `.modal` shell (Razor's size="fullscreen", React's size="fullscreen"); neither sets a max-width.
 // Header and footer are flex: none, so they stay pinned while the body scrolls between them, and

package/scss/wui/_page-header-bar.scss

@@ -16,7 +16,9 @@
 }
 .page-header.page-header-bar .page-title {
     flex: 0 1 auto;
-    min-width: min(12ch, max-content);
+    // Zero, not a floor: the tools are `flex: none`, so the title must be the part that gives way.
+    // `min()` cannot take `max-content`, and an invalid floor falls back to `auto`, which never shrinks.
+    min-width: 0;
     font-size: 20px;
     overflow: hidden;
     text-overflow: ellipsis;

package/scss/wui/_shell.scss

@@ -360,22 +360,70 @@
 // the brand row and needs none.
 .app-nav-group + .app-nav-group {
     margin-top: 20px;
-    padding-top: 12px;
+    padding-top: var(--wui-space-md);
     border-top: 1px solid var(--color-border);
 }
 // A node the author places right after a group's links (`groups[].after` /
 // `<app-nav-group-after>`). Like sidebarStart it has no place on the 88px rail.
 .wui-nav-group-after {
     flex: none;
-    margin-top: 4px;
+    margin-top: var(--wui-space-xs);
 }
 .app-nav-group-label {
     padding: 6px 14px;
     font-size: 12px;
-    font-weight: 600;
+    font-weight: var(--wui-fw-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-subtle);
+}
+// A collapsible group folds from this heading: the label's type on a full-width row, with the caret at the end.
+.wui-nav-group-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--wui-space-sm);
+    width: 100%;
+    margin: 0;
+    padding: 6px 14px;
+    border: 0;
+    border-radius: var(--wui-radius-sm);
+    background: transparent;
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: var(--wui-fw-semibold);
+    text-align: left;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     color: var(--color-text-subtle);
+    cursor: pointer;
+}
+.wui-nav-group-toggle:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
+}
+.wui-nav-group-collapsible,
+.wui-nav-group-text {
+    min-width: 0;
+}
+.wui-nav-group-caret {
+    flex: none;
+    display: inline-grid;
+    place-items: center;
+    transition: transform 0.2s var(--wui-ease-ui);
+}
+.wui-nav-group-folded > .wui-nav-group-toggle .wui-nav-group-caret {
+    transform: rotate(-90deg);
+}
+.app-shell:not(.collapsed) .wui-nav-group-folded > .wui-nav-group-body {
+    display: none;
+}
+// A sub-heading between runs of links inside a group.
+.wui-nav-header {
+    padding: 6px 10px 2px 12px;
+    font-size: var(--wui-fs-xs);
+    font-weight: var(--wui-fw-semibold);
+    color: var(--color-text-subtle);
 }
 
 .app-nav-item {
@@ -473,7 +521,10 @@
     padding: 9px 0;
 }
 .app-shell.collapsed .app-nav-badge,
+.app-shell.collapsed .wui-nav-new,
 .app-shell.collapsed .app-nav-group-label,
+.app-shell.collapsed .wui-nav-group-toggle,
+.app-shell.collapsed .wui-nav-header,
 .app-shell.collapsed .wui-nav-group-after,
 .app-shell.collapsed .app-sidebar-brand-text,
 .app-shell.collapsed .app-sidebar-start {
@@ -539,6 +590,19 @@
     color: var(--color-primary-text);
 }
 
+// A "New" pill after a label, shown through a date (`new-until`). It takes the success
+// tint the tone badge uses, so it reads green in every theme.
+.wui-nav-new {
+    flex: none;
+    padding: 0 var(--wui-space-xs);
+    border-radius: var(--wui-radius-pill);
+    background: var(--color-success-soft);
+    font-size: var(--wui-fs-xs);
+    font-weight: var(--wui-fw-bold);
+    line-height: var(--wui-lh-heading);
+    color: var(--color-success-text);
+}
+
 // ── Expandable sub-items ─────────────────────────────────────────────────────
 // A parent row that toggles a nested list. It reuses the .app-nav-item chrome but
 // is a <button>; the caret rotates open. The nested list animates its height via
@@ -918,11 +982,20 @@
     }
     .app-shell.app-shell.collapsed .app-nav-text,
     .app-shell.app-shell.collapsed .app-nav-badge,
+    .app-shell.app-shell.collapsed .wui-nav-new,
     .app-shell.app-shell.collapsed .app-nav-group-label,
+    .app-shell.app-shell.collapsed .wui-nav-header,
     .app-shell.app-shell.collapsed .wui-nav-group-after,
     .app-shell.app-shell.collapsed .app-sidebar-start {
         display: revert;
     }
+    // The drawer shows full labels even on the desktop collapsed state, so a folded group still folds here.
+    .app-shell.app-shell.collapsed .wui-nav-group-toggle {
+        display: flex;
+    }
+    .app-shell.app-shell.collapsed .wui-nav-group-folded > .wui-nav-group-body {
+        display: none;
+    }
     // Drawer always shows full labels — the compact rail control has no role here.
     .app-shell.app-shell.collapsed .app-sidebar-start-compact {
         display: none;

package/scss/wui/_typography.scss

@@ -273,6 +273,16 @@
     color: currentColor;
 }
 
+// A pressed toggle chip (aria-pressed="true" on its button) takes the primary look whatever its tone,
+// so a script flips the look by flipping the attribute it already sets for screen readers.
+.chip-clickable:has(> .chip-body[aria-pressed="true"]) {
+    @include wui-tone-pill-colors(primary, var(--color-primary-text));
+}
+.chip-clickable:has(> .chip-body[aria-pressed="true"]) .chip-ic,
+.chip-clickable:has(> .chip-body[aria-pressed="true"]) .chip-remove {
+    color: currentColor;
+}
+
 // Disabled — deliberately NOT opacity, and deliberately after the tones.
 //
 // `opacity: .55` fades the whole chip, label included, so a faded label can fall under the

package/scss/wui/_utilities.scss

@@ -441,6 +441,41 @@
     outline-offset: var(--wui-focus-ring-offset);
     border-radius: var(--wui-radius-sm);
 }
+// AppDropdown toggleVariant="neutral": a custom trigger that keeps the surrounding font and colour, with a muted
+// surface on hover and while open. The negative start margin keeps its text aligned with the text above it.
+.wui-dropdown-trigger-neutral {
+    gap: var(--wui-space-xs);
+    margin-inline-start: calc(-1 * var(--wui-space-xs));
+    padding: var(--wui-space-xxs) var(--wui-space-xs);
+    border-radius: var(--wui-radius-sm);
+    transition: background 0.12s ease;
+}
+.wui-dropdown-trigger-neutral:hover,
+.wui-dropdown-trigger-neutral[aria-expanded="true"] {
+    background: var(--color-bg-muted);
+}
+
+// A line of short facts ("1 Oct to 14 Oct . 3 days left . 4/9 Done"): muted small text, a 3px dot (the dot's own size) drawn between items.
+// The dot is a pseudo-element, so screen readers never read it and no separator markup is written.
+.wui-meta-list {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--wui-space-sm);
+    font-size: var(--wui-fs-sm);
+    color: var(--color-text-muted);
+    white-space: nowrap;
+}
+.wui-meta-list > * + *::before {
+    content: "";
+    display: inline-block;
+    width: 3px;
+    height: 3px;
+    margin-inline-end: var(--wui-space-sm);
+    border-radius: 50%;
+    background: var(--color-text-muted);
+    opacity: 0.6;
+    vertical-align: middle;
+}
 
 // AppPopover wrapper (React panel styling comes from Bootstrap's .popover; this is only the
 // Razor anchor span carrying the data-bs-* wiring). inline-block so it hugs its trigger and