@webority/theme 0.122.0 → 0.124.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.122.0",
+  "version": "0.124.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": {
@@ -47,7 +47,7 @@
     "postcss": "^8.5.31"
   },
   "devDependencies": {
-    "@webority/tokens": "0.122.0",
+    "@webority/tokens": "0.124.0",
     "bootstrap": "5.3.3",
     "country-flag-icons": "^1.6.20",
     "sass-embedded": "^1.97.0",

package/scss/_bootstrap.generated.scss

@@ -1,4 +1,4 @@
-// Generated by @webority/tokens 0.122.0 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.124.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.122.0 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.124.0 from its token source. Do not edit; run webority brand --library.
 
 :root {
     --wui-primary: #4F46E5;
@@ -360,6 +360,13 @@
     --wui-surface-mute: var(--wui-dark-bg-muted);
     --wui-neutral-bg-dark: var(--wui-dark-bg-muted);
     --wui-neutral-bg-light: var(--wui-dark-bg-surface);
+    --wui-info-10: color-mix(in srgb, var(--wui-info) 16%, var(--wui-dark-bg-surface));
+    --wui-info-5: color-mix(in srgb, var(--wui-info) 10%, var(--wui-dark-bg-surface));
+    --wui-success-10: color-mix(in srgb, var(--wui-success) 16%, var(--wui-dark-bg-surface));
+    --wui-success-5: color-mix(in srgb, var(--wui-success) 10%, var(--wui-dark-bg-surface));
+    --wui-warning-10: color-mix(in srgb, var(--wui-warning) 16%, var(--wui-dark-bg-surface));
+    --wui-warning-5: color-mix(in srgb, var(--wui-warning) 10%, var(--wui-dark-bg-surface));
+    --wui-danger-10: color-mix(in srgb, var(--wui-danger) 16%, var(--wui-dark-bg-surface));
     --wui-danger-5: color-mix(in srgb, var(--wui-danger) 10%, var(--wui-dark-bg-surface));
     --wui-chart-1: var(--wui-dark-primary);
     --wui-chart-2: var(--wui-dark-chart-2);
@@ -380,6 +387,8 @@
     --wui-chart-diverging-mid: var(--wui-dark-chart-diverging-mid);
     --wui-chart-diverging-high: var(--wui-dark-chart-diverging-high);
     --wui-chart-neutral: var(--wui-dark-chart-neutral);
+    --wui-shadow-popover: 0px 8px 28px -6px rgba(0, 0, 0, 0.55);
+    --wui-shadow-modal: 0px 24px 60px -16px rgba(0, 0, 0, 0.7);
     --color-bg: var(--wui-dark-bg-page);
     --color-bg-subtle: var(--wui-dark-bg-elevated);
     --color-bg-muted: var(--wui-dark-bg-muted);
@@ -475,6 +484,7 @@
     --bs-emphasis-color: var(--color-text);
     --bs-secondary-color: var(--color-text-muted);
     --bs-tertiary-color: var(--color-text-subtle);
+    --bs-heading-color: var(--color-text);
     --bs-body-bg: var(--color-bg);
     --bs-border-color: var(--color-border);
     --bs-secondary-bg: var(--color-surface);
@@ -505,6 +515,13 @@
     --wui-surface-mute: var(--wui-dark-bg-muted);
     --wui-neutral-bg-dark: var(--wui-dark-bg-muted);
     --wui-neutral-bg-light: var(--wui-dark-bg-surface);
+    --wui-info-10: color-mix(in srgb, var(--wui-info) 16%, var(--wui-dark-bg-surface));
+    --wui-info-5: color-mix(in srgb, var(--wui-info) 10%, var(--wui-dark-bg-surface));
+    --wui-success-10: color-mix(in srgb, var(--wui-success) 16%, var(--wui-dark-bg-surface));
+    --wui-success-5: color-mix(in srgb, var(--wui-success) 10%, var(--wui-dark-bg-surface));
+    --wui-warning-10: color-mix(in srgb, var(--wui-warning) 16%, var(--wui-dark-bg-surface));
+    --wui-warning-5: color-mix(in srgb, var(--wui-warning) 10%, var(--wui-dark-bg-surface));
+    --wui-danger-10: color-mix(in srgb, var(--wui-danger) 16%, var(--wui-dark-bg-surface));
     --wui-danger-5: color-mix(in srgb, var(--wui-danger) 10%, var(--wui-dark-bg-surface));
     --wui-chart-1: var(--wui-dark-primary);
     --wui-chart-2: var(--wui-dark-chart-2);
@@ -525,6 +542,8 @@
     --wui-chart-diverging-mid: var(--wui-dark-chart-diverging-mid);
     --wui-chart-diverging-high: var(--wui-dark-chart-diverging-high);
     --wui-chart-neutral: var(--wui-dark-chart-neutral);
+    --wui-shadow-popover: 0px 8px 28px -6px rgba(0, 0, 0, 0.55);
+    --wui-shadow-modal: 0px 24px 60px -16px rgba(0, 0, 0, 0.7);
     --color-bg: var(--wui-dark-bg-page);
     --color-bg-subtle: var(--wui-dark-bg-elevated);
     --color-bg-muted: var(--wui-dark-bg-muted);
@@ -620,6 +639,7 @@
     --bs-emphasis-color: var(--color-text);
     --bs-secondary-color: var(--color-text-muted);
     --bs-tertiary-color: var(--color-text-subtle);
+    --bs-heading-color: var(--color-text);
     --bs-body-bg: var(--color-bg);
     --bs-border-color: var(--color-border);
     --bs-secondary-bg: var(--color-surface);
@@ -645,29 +665,30 @@
 
 $wui-dark-layer-names: (
     wui-primary-50, wui-primary-30, wui-primary-20, wui-primary-15, wui-primary-10, wui-primary-5,
-    wui-surface-soft, wui-surface-violet-soft, wui-surface-mute, wui-neutral-bg-dark, wui-neutral-bg-light, wui-danger-5,
-    wui-chart-1, wui-chart-2, wui-chart-3, wui-chart-4, wui-chart-5, wui-chart-6,
-    wui-chart-7, wui-chart-8, wui-chart-seq-0, wui-chart-seq-1, wui-chart-seq-2, wui-chart-seq-3,
-    wui-chart-seq-4, wui-chart-seq-5, wui-chart-seq-6, wui-chart-diverging-low, wui-chart-diverging-mid, wui-chart-diverging-high,
-    wui-chart-neutral, color-bg, color-bg-subtle, color-bg-muted, color-surface, color-surface-inverse,
-    color-text, color-text-body, color-text-muted, color-text-subtle, color-text-inverse, color-link,
-    color-border, color-border-subtle, color-border-strong, color-field-bg, color-field-border, color-field-border-hover,
-    color-field-border-focus, color-scrim, color-scrim-strong, color-progress-track, color-progress-label, color-thumb,
-    color-scrollbar, color-scrollbar-hover, color-scrollbar-active, color-primary, color-primary-hover, color-primary-soft,
-    color-primary-text, color-on-primary, color-success, color-success-pressed, color-success-soft, color-success-border,
-    color-success-text, color-success-text-on-soft, color-success-strong, color-on-success, color-on-success-strong, color-warning,
-    color-warning-pressed, color-warning-soft, color-warning-border, color-warning-text, color-warning-text-on-soft, color-warning-strong,
-    color-warning-strong-hover, color-on-warning, color-on-warning-strong, color-danger, color-danger-pressed, color-danger-soft,
-    color-danger-border, color-danger-text, color-danger-text-on-soft, color-danger-strong, color-danger-strong-hover, color-on-danger,
-    color-on-danger-strong, color-info, color-info-pressed, color-info-soft, color-info-border, color-info-text,
-    color-info-text-on-soft, color-info-strong, color-on-info, color-on-info-strong, color-chart-1, color-chart-2,
-    color-chart-3, color-chart-4, color-chart-5, color-chart-6, color-chart-7, color-chart-8,
-    color-chart-seq-0, color-chart-seq-1, color-chart-seq-2, color-chart-seq-3, color-chart-seq-4, color-chart-seq-5,
-    color-chart-seq-6, color-chart-diverging-low, color-chart-diverging-mid, color-chart-diverging-high, color-chart-neutral, wui-close-filter,
-    wui-thumb-shadow, wui-thumb-shadow-hover, bs-body-color, bs-emphasis-color, bs-secondary-color, bs-tertiary-color,
-    bs-body-bg, bs-border-color, bs-secondary-bg, bs-tertiary-bg, bs-primary, bs-body-bg-rgb,
-    bs-primary-rgb, bs-body-color-rgb, bs-emphasis-color-rgb, bs-secondary-color-rgb, bs-tertiary-color-rgb, bs-secondary-bg-rgb,
-    bs-tertiary-bg-rgb, bs-border-color-rgb
+    wui-surface-soft, wui-surface-violet-soft, wui-surface-mute, wui-neutral-bg-dark, wui-neutral-bg-light, wui-info-10,
+    wui-info-5, wui-success-10, wui-success-5, wui-warning-10, wui-warning-5, wui-danger-10,
+    wui-danger-5, wui-chart-1, wui-chart-2, wui-chart-3, wui-chart-4, wui-chart-5,
+    wui-chart-6, wui-chart-7, wui-chart-8, wui-chart-seq-0, wui-chart-seq-1, wui-chart-seq-2,
+    wui-chart-seq-3, wui-chart-seq-4, wui-chart-seq-5, wui-chart-seq-6, wui-chart-diverging-low, wui-chart-diverging-mid,
+    wui-chart-diverging-high, wui-chart-neutral, wui-shadow-popover, wui-shadow-modal, color-bg, color-bg-subtle,
+    color-bg-muted, color-surface, color-surface-inverse, color-text, color-text-body, color-text-muted,
+    color-text-subtle, color-text-inverse, color-link, color-border, color-border-subtle, color-border-strong,
+    color-field-bg, color-field-border, color-field-border-hover, color-field-border-focus, color-scrim, color-scrim-strong,
+    color-progress-track, color-progress-label, color-thumb, color-scrollbar, color-scrollbar-hover, color-scrollbar-active,
+    color-primary, color-primary-hover, color-primary-soft, color-primary-text, color-on-primary, color-success,
+    color-success-pressed, color-success-soft, color-success-border, color-success-text, color-success-text-on-soft, color-success-strong,
+    color-on-success, color-on-success-strong, color-warning, color-warning-pressed, color-warning-soft, color-warning-border,
+    color-warning-text, color-warning-text-on-soft, color-warning-strong, color-warning-strong-hover, color-on-warning, color-on-warning-strong,
+    color-danger, color-danger-pressed, color-danger-soft, color-danger-border, color-danger-text, color-danger-text-on-soft,
+    color-danger-strong, color-danger-strong-hover, color-on-danger, color-on-danger-strong, color-info, color-info-pressed,
+    color-info-soft, color-info-border, color-info-text, color-info-text-on-soft, color-info-strong, color-on-info,
+    color-on-info-strong, color-chart-1, color-chart-2, color-chart-3, color-chart-4, color-chart-5,
+    color-chart-6, color-chart-7, color-chart-8, color-chart-seq-0, color-chart-seq-1, color-chart-seq-2,
+    color-chart-seq-3, color-chart-seq-4, color-chart-seq-5, color-chart-seq-6, color-chart-diverging-low, color-chart-diverging-mid,
+    color-chart-diverging-high, color-chart-neutral, wui-close-filter, wui-thumb-shadow, wui-thumb-shadow-hover, bs-body-color,
+    bs-emphasis-color, bs-secondary-color, bs-tertiary-color, bs-heading-color, bs-body-bg, bs-border-color,
+    bs-secondary-bg, bs-tertiary-bg, bs-primary, bs-body-bg-rgb, bs-primary-rgb, bs-body-color-rgb,
+    bs-emphasis-color-rgb, bs-secondary-color-rgb, bs-tertiary-color-rgb, bs-secondary-bg-rgb, bs-tertiary-bg-rgb, bs-border-color-rgb
 );
 
 // var() resolves where a name is declared, so the html copies keep the light values for a light box.
@@ -708,6 +729,13 @@ html {
         --wui-surface-mute: var(--wui-dark-bg-muted);
         --wui-neutral-bg-dark: var(--wui-dark-bg-muted);
         --wui-neutral-bg-light: var(--wui-dark-bg-surface);
+        --wui-info-10: color-mix(in srgb, var(--wui-info) 16%, var(--wui-dark-bg-surface));
+        --wui-info-5: color-mix(in srgb, var(--wui-info) 10%, var(--wui-dark-bg-surface));
+        --wui-success-10: color-mix(in srgb, var(--wui-success) 16%, var(--wui-dark-bg-surface));
+        --wui-success-5: color-mix(in srgb, var(--wui-success) 10%, var(--wui-dark-bg-surface));
+        --wui-warning-10: color-mix(in srgb, var(--wui-warning) 16%, var(--wui-dark-bg-surface));
+        --wui-warning-5: color-mix(in srgb, var(--wui-warning) 10%, var(--wui-dark-bg-surface));
+        --wui-danger-10: color-mix(in srgb, var(--wui-danger) 16%, var(--wui-dark-bg-surface));
         --wui-danger-5: color-mix(in srgb, var(--wui-danger) 10%, var(--wui-dark-bg-surface));
         --wui-chart-1: var(--wui-dark-primary);
         --wui-chart-2: var(--wui-dark-chart-2);
@@ -728,6 +756,8 @@ html {
         --wui-chart-diverging-mid: var(--wui-dark-chart-diverging-mid);
         --wui-chart-diverging-high: var(--wui-dark-chart-diverging-high);
         --wui-chart-neutral: var(--wui-dark-chart-neutral);
+        --wui-shadow-popover: 0px 8px 28px -6px rgba(0, 0, 0, 0.55);
+        --wui-shadow-modal: 0px 24px 60px -16px rgba(0, 0, 0, 0.7);
         --color-bg: var(--wui-dark-bg-page);
         --color-bg-subtle: var(--wui-dark-bg-elevated);
         --color-bg-muted: var(--wui-dark-bg-muted);
@@ -823,6 +853,7 @@ html {
         --bs-emphasis-color: var(--color-text);
         --bs-secondary-color: var(--color-text-muted);
         --bs-tertiary-color: var(--color-text-subtle);
+        --bs-heading-color: var(--color-text);
         --bs-body-bg: var(--color-bg);
         --bs-border-color: var(--color-border);
         --bs-secondary-bg: var(--color-surface);

package/scss/wui/_chat.scss

@@ -89,3 +89,68 @@ wui-chat[position="start"] .wui-chat-panel {
 .wui-chat-composer .wui-field-message:empty {
     display: none;
 }
+
+// Attachments wrap onto new rows as the composer or a sent question grows.
+.wui-chat-attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--wui-space-xs);
+}
+.wui-chat-question-attachments {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--wui-space-xs);
+}
+
+// The banner that says a question is being edited, with its cancel control beside the text.
+.wui-chat-editing {
+    display: flex;
+    align-items: center;
+    gap: var(--wui-space-sm);
+    padding: var(--wui-space-sm) var(--wui-space-md);
+    background: var(--color-bg-muted);
+    border-radius: var(--wui-radius-md);
+    color: var(--color-text-muted);
+    font-size: var(--wui-fs-sm);
+}
+
+// Copy, edit, retry and the other actions under an answer; they wrap rather than overflow the panel.
+.wui-chat-turn-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--wui-space-xs);
+    margin-block-start: var(--wui-space-xs);
+}
+
+// Suggested follow-up questions under an answer, as wrapping chips.
+.wui-chat-suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--wui-space-xs);
+}
+
+// Past chats: a scrolling list in the body's padding, one row per chat.
+.wui-chat-past {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    gap: var(--wui-space-xs);
+    padding: var(--wui-space-lg);
+    overflow: auto;
+}
+// min-width 0 lets the title inside the row shrink and truncate instead of pushing the row wider.
+.wui-chat-past-row {
+    display: flex;
+    align-items: center;
+    gap: var(--wui-space-sm);
+    min-width: 0;
+}
+
+// Bootstrap's d-flex is !important, so hidden needs its own rule.
+.wui-chat-foot[hidden],
+.wui-chat-past[hidden],
+.wui-chat-suggestions[hidden] {
+    display: none !important;
+}

package/scss/wui/_controls.scss

@@ -255,6 +255,10 @@
     box-shadow: none;
     filter: none;
 }
+// Bootstrap paints a mouse-focused box's border in its compiled indigo; the switch keeps its own transparent track.
+.form-check-input:focus:not(:focus-visible):not(:checked):not([type="checkbox"]:indeterminate):not(.form-switch .form-check-input) {
+    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
+}
 .form-check-input:checked,
 .wui-check:checked,
 .wui-radio:checked {
@@ -372,6 +376,50 @@
     border-radius: 50%;
     corner-shape: round;
 }
+
+// Table-row switch (<app-row-switch>, AppRowSwitch): a button, not an input, so a row can post it.
+// Same track, knob, colours and focus ring as the form switch above.
+.wui-row-switch {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    border: 0;
+    background: none;
+    border-radius: var(--wui-radius-pill);
+    cursor: pointer;
+}
+.wui-row-switch:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+.wui-row-switch__track {
+    position: relative;
+    display: block;
+    width: 40px;
+    height: 22px;
+    border-radius: var(--wui-radius-pill);
+    background-color: var(--color-border-strong);
+}
+.wui-row-switch__thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background-color: var(--color-surface);
+}
+.wui-row-switch[aria-checked="true"] .wui-row-switch__track {
+    background-color: var(--color-primary);
+}
+.wui-row-switch[aria-checked="true"] .wui-row-switch__thumb {
+    transform: translateX(18px);
+}
+.wui-row-switch:disabled,
+.wui-row-switch[aria-busy="true"] {
+    opacity: var(--wui-disabled-opacity);
+    cursor: not-allowed;
+}
 @media (prefers-reduced-motion: reduce) {
     .form-check-input,
     .wui-check,
@@ -1335,6 +1383,22 @@ wui-select[compact] {
 .field > .wui-score-scale {
     align-self: stretch;
 }
+// A chosen value's photo or initials sits at the control's start edge, and the start padding makes
+// room for it: the avatar's own width plus the control's gap. The width is .avatar-xs's fixed size,
+// a layout constant with no token. Logical properties, so the start edge follows the reading direction.
+.search-select-control.wui-has-value-avatar {
+    --wui-search-select-value-avatar-size: 20px;
+    position: relative;
+    padding-inline-start: calc(var(--wui-space-md) + var(--wui-search-select-value-avatar-size) + var(--wui-space-sm));
+}
+.search-select-control.wui-has-value-avatar > .wui-search-select-value-avatar {
+    position: absolute;
+    inset-inline-start: var(--wui-space-md);
+    top: 50%;
+    transform: translateY(-50%);
+    display: inline-flex;
+    pointer-events: none;
+}
 // A file picker fills its column by default (align-self:stretch fills the field on the cross
 // axis, but the field itself collapses to its content when it is a flex item — the showcase
 // lays fields out in a flex row — so stretch the field to its container first). Override per

package/scss/wui/_data.scss

@@ -768,7 +768,7 @@
         min-width: 0;
         max-width: none;
         white-space: normal;
-        overflow-wrap: anywhere;
+        overflow-wrap: break-word;
     }
     .table-ledger.wui-table-stack,
     .table-ledger.wui-table-stack > tbody,
@@ -826,7 +826,7 @@
     // its edge (a long email under an avatar did).
     .table-ledger.wui-table-stack > * > tr > td > * {
         min-width: 0;
-        overflow-wrap: anywhere;
+        overflow-wrap: break-word;
     }
     .table-ledger.wui-table-stack > tbody > tr > td .u-meta {
         align-items: flex-end;
@@ -851,7 +851,7 @@
         overflow: visible;
         -webkit-line-clamp: none;
         line-clamp: none;
-        overflow-wrap: anywhere;
+        overflow-wrap: break-word;
     }
     // A group header is a section label between the cards, not a card of its own.
     .table-ledger.wui-table-stack > tbody > tr.wui-group-row {
@@ -937,6 +937,12 @@
 .table-wrap.wui-table-scroll:has(> .table-ledger) {
     padding-top: 0;
 }
+// A scrolling table that opens its card needs its spacing outside the scroll box: padding here
+// would show scrolled rows above the sticky header. The card is a flex column, so the margin
+// does not collapse out of it.
+.card > .table-wrap.wui-table-scroll:has(> .table-ledger):first-child {
+    margin-top: var(--wui-card-pad);
+}
 
 // Pinned first column (`stickyFirstColumn`): the identity column, and the select/expand columns the
 // library puts before it, hold their place while a wide table scrolls sideways. The identity column

package/scss/wui/_display.scss

@@ -1494,6 +1494,10 @@ button.wui-link {
     z-index: 0;
     white-space: var(--wui-link-label-white-space, nowrap);
 }
+// A link in a table cell may wrap: a nowrap label runs under the pinned actions column.
+.table-ledger td .wui-link__label {
+    --wui-link-label-white-space: normal;
+}
 .wui-link__ic {
     display: inline-flex;
     flex: none;

package/scss/wui/_markdown.scss

@@ -88,3 +88,9 @@
 .wui-markdown .table th {
     font-weight: 600;
 }
+// A citation chip sits inside a line of text, so it takes the line's baseline.
+.wui-markdown-citation {
+    display: inline-flex;
+    vertical-align: baseline;
+    margin-inline: var(--wui-space-xxs);
+}

package/scss/wui/_navigation-menu.scss

@@ -33,7 +33,7 @@ wui-navigation-menu {
     padding: 8px 12px;
     border: 0;
     border-radius: var(--wui-radius-sm);
-    background: transparent;
+    background: var(--wui-nav-menu-item-bg, transparent);
     color: var(--color-text);
     font: inherit;
     font-size: 14px;
@@ -54,6 +54,8 @@ wui-navigation-menu {
         outline-offset: 1px;
     }
     &[aria-current="page"] {
+        // Set through the item variable, not background, so the hover fill above still wins.
+        --wui-nav-menu-item-bg: var(--wui-nav-menu-current-bg, transparent);
         color: var(--color-primary-text);
     }
 }

package/scss/wui/_sections.scss

@@ -262,6 +262,16 @@
     filter: none;
     opacity: 1;
 }
+// Dark pages: a dark mark turns light, and the hover and focus reveal keeps that inversion.
+:root[data-theme="dark"] .wui-section-logo-img {
+    filter: grayscale(1) invert(1);
+    opacity: 0.8;
+}
+:root[data-theme="dark"] .wui-section-logo-img:hover,
+:root[data-theme="dark"] .wui-section-logo a:focus-visible .wui-section-logo-img {
+    filter: grayscale(1) invert(1);
+    opacity: 1;
+}
 .wui-section-logo-text {
     font-family: inherit;
     font-weight: 600;

package/scss/wui/_shell-parts.scss

@@ -8,7 +8,7 @@
 // Phone floor: every control here is at least 44px tall below 768px, and nothing that opens is
 // wider than the viewport less 24px.
 
-.app-shell {
+:root {
     // One height the tab bar, the content's bottom padding and the footer's offset agree on.
     --wui-tabbar-h: 60px;
 }