@webority/theme 0.104.1 → 0.106.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.104.1",
+  "version": "0.106.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.104.1"
+    "@webority/tokens": "0.106.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.104.1 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.106.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.104.1 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.106.0 from its token source. Do not edit; run webority brand --library.
 
 :root {
     --wui-primary: #4F46E5;
@@ -210,6 +210,10 @@
     --color-surface-inverse: var(--wui-text-heading);
     --color-surface-inverse-raised: color-mix(in srgb, var(--color-text-inverse) 5%, var(--color-surface-inverse));
     --color-surface-inverse-elevated: color-mix(in srgb, var(--color-text-inverse) 9%, var(--color-surface-inverse));
+    --color-surface-dark: var(--wui-text-heading);
+    --color-surface-dark-border: color-mix(in srgb, var(--wui-bg-light) 14%, var(--wui-text-heading));
+    --color-on-surface-dark: var(--wui-bg-light);
+    --color-on-surface-dark-muted: color-mix(in srgb, var(--wui-bg-light) 72%, var(--wui-text-heading));
     --color-text: var(--wui-text-heading);
     --color-text-body: var(--wui-text-1);
     --color-text-muted: var(--wui-text-2);

package/scss/_wui-components.scss

@@ -30,9 +30,11 @@
 @import "wui/pending";
 @import "wui/choice";
 @import "wui/media";
+@import "wui/file-tiles";
 @import "wui/image-crop";
 @import "wui/avatar-picker";
 @import "wui/navigation";
+@import "wui/nav-list";
 @import "wui/card";
 @import "wui/data";
 @import "wui/illustration";
@@ -62,6 +64,7 @@
 @import "wui/record-pager";
 @import "wui/shortcuts";
 @import "wui/split-view";
+@import "wui/detail-pane";
 @import "wui/groups";
 @import "wui/carousel";
 @import "wui/onboarding-checklist";

package/scss/_wui-core.scss

@@ -23,8 +23,10 @@
 @import "wui/pending";
 @import "wui/choice";
 @import "wui/media";
+@import "wui/file-tiles";
 @import "wui/avatar-picker";
 @import "wui/navigation";
+@import "wui/nav-list";
 @import "wui/card";
 @import "wui/data";
 @import "wui/illustration";
@@ -51,6 +53,7 @@
 @import "wui/record-pager";
 @import "wui/shortcuts";
 @import "wui/split-view";
+@import "wui/detail-pane";
 @import "wui/groups";
 @import "wui/carousel";
 @import "wui/onboarding-checklist";

package/scss/wui/_calendar.scss

@@ -275,6 +275,25 @@ wui-calendar[data-view="month"] .wui-calendar-chip-title {
     white-space: normal;
 }
 
+// The "+N" link on a card that stands for several events: a small pill of its own inside the card.
+.wui-calendar-stack {
+    display: inline-block;
+    margin-inline-start: var(--wui-space-xs);
+    padding: 0 var(--wui-space-xs);
+    border-radius: var(--wui-radius-pill);
+    background: var(--color-surface);
+    color: var(--color-text-body);
+    font-size: var(--wui-fs-xs);
+    font-weight: var(--wui-fw-semibold);
+    line-height: var(--wui-lh-heading);
+    text-decoration: none;
+}
+
+.wui-calendar-stack:hover,
+.wui-calendar-stack:focus-visible {
+    background: var(--color-bg-muted);
+}
+
 // What a page with no script shows until the element's script replaces it.
 .wui-calendar-fallback {
     margin: 0;

package/scss/wui/_comment-thread.scss

@@ -221,6 +221,26 @@ button.wui-reaction:hover,
     flex-wrap: wrap;
     gap: 8px;
 }
+.wui-comment-composer-inline {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--wui-space-xs);
+}
+.wui-comment-composer-inline .wui-comment-composer-avatar {
+    flex: none;
+}
+.wui-comment-composer-inline .wui-mention-input {
+    flex: 1;
+    min-width: 0;
+}
+.wui-comment-composer-inline .wui-comment-form-actions {
+    margin: 0;
+}
+.wui-comment-composer-inline .wui-comment-error {
+    flex: 1 0 100%;
+}
 
 .wui-comment-error {
     font-size: 12px;

package/scss/wui/_detail-pane.scss

@@ -0,0 +1,25 @@
+// AppDetailPane / <app-detail-pane>: an in-page detail column beside a list, filled by WUI.pane.load.
+
+.wui-detail-pane {
+    min-width: 0;
+}
+.wui-detail-pane[data-sticky] {
+    position: sticky;
+    top: var(--wui-detail-pane-top, var(--wui-space-4xl));
+    align-self: start;
+    max-height: calc(100dvh - var(--wui-detail-pane-top, var(--wui-space-4xl)) - var(--wui-space-lg));
+    overflow: auto;
+}
+.wui-detail-pane > .wui-modal {
+    max-width: none;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-lg);
+    box-shadow: none;
+    background: var(--color-surface);
+}
+.wui-detail-pane > .wui-modal > .wui-modal-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--wui-space-md);
+    padding: var(--wui-space-lg);
+}

package/scss/wui/_disclosure.scss

@@ -107,6 +107,45 @@
     padding-bottom: 16px;
 }
 
+// Flat: a text toggle with a leading chevron, for a section header rather than a card.
+.faq-list.wui-accordion-flat {
+    gap: 0;
+}
+.faq-list.wui-accordion-flat .faq-item {
+    border: 0;
+    background: none;
+    box-shadow: none;
+}
+.faq-list.wui-accordion-flat .faq-q {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--wui-space-xs);
+    margin: var(--wui-space-lg) 0 var(--wui-space-xs);
+    padding: var(--wui-space-xxs) 0;
+    font-size: var(--wui-fs-sm);
+    font-weight: var(--wui-fw-semibold);
+    color: var(--color-text-muted);
+    background: none;
+}
+.faq-list.wui-accordion-flat .faq-q-icon {
+    transform: rotate(-90deg);
+}
+.faq-list.wui-accordion-flat .faq-item.open .faq-q-icon {
+    transform: none;
+}
+
+.wui-accordion-count {
+    display: inline-flex;
+    justify-content: center;
+    min-width: 20px;
+    padding: 0 var(--wui-space-xs);
+    border-radius: var(--wui-radius-pill);
+    background: var(--color-bg-muted);
+    color: var(--color-text-muted);
+    font-size: var(--wui-fs-xs);
+}
+
 @media (prefers-reduced-motion: reduce) {
     .faq-a-wrap,
     .faq-q-icon,

package/scss/wui/_drawer.scss

@@ -25,6 +25,9 @@
 .wui-drawer[size="lg"] {
     --wui-drawer-width: 640px;
 }
+.wui-drawer[size="xl"] {
+    --wui-drawer-width: 720px;
+}
 
 .wui-drawer-backdrop {
     position: absolute;

package/scss/wui/_file-tiles.scss

@@ -0,0 +1,57 @@
+// AppFileTiles / <app-file-tiles>: a read-only grid of file tiles with a type tile, name, size and meta line.
+
+.wui-file-tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: var(--wui-space-xs);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.wui-file-tile {
+    display: flex;
+    align-items: center;
+    gap: var(--wui-space-sm);
+    min-width: 0;
+    padding: var(--wui-space-xs) var(--wui-space-sm);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-md);
+    color: var(--color-text);
+    font-size: var(--wui-fs-sm);
+    text-decoration: none;
+}
+
+a.wui-file-tile:hover {
+    border-color: var(--color-primary);
+}
+
+.wui-file-tile-ext {
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: 34px;
+    height: 34px;
+    border-radius: var(--wui-radius-sm);
+    background: var(--color-primary-soft);
+    color: var(--color-primary-text);
+    font-size: var(--wui-fs-xs);
+    font-weight: var(--wui-fw-bold);
+}
+
+.wui-file-tile-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.wui-file-tile-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.wui-file-tile-meta {
+    font-size: var(--wui-fs-xs);
+    color: var(--color-text-subtle);
+}

package/scss/wui/_media.scss

@@ -752,6 +752,29 @@
     overflow-wrap: anywhere;
 }
 
+// The button form (AppFilePicker variant="button"): one outline button in a bare field, no dropzone.
+// Positioned so the loading veil covers the button rather than the page.
+.wui-file-input-button-field {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--wui-space-xxs);
+    border: 0;
+    padding: 0;
+    background: none;
+    min-height: 0;
+}
+// The base .file-input fills its column and tints on hover and focus; the button form keeps its
+// natural width and no band behind the button.
+.file-input.wui-file-input-button-field {
+    width: auto;
+}
+.file-input.wui-file-input-button-field:hover:not(:focus-within),
+.file-input.wui-file-input-button-field:focus-within {
+    background: none;
+}
+
 // Large preview shown once an image exists; hover reveals a "Change image"
 // overlay.
 .file-preview {

package/scss/wui/_modal-remote.scss

@@ -55,7 +55,7 @@
 }
 
 // The remote drawer: the same shell and card, docked to the end edge at full height. Width
-// comes from `--wui-modal-max-width` (sm 360, md 480, lg 640), set on the shell by the script.
+// comes from `--wui-modal-max-width` (sm 360, md 480, lg 640, xl 720), set on the shell by the script.
 .modal.wui-modal-shell.wui-remote-drawer {
     justify-content: flex-end;
     align-items: stretch;

package/scss/wui/_nav-list.scss

@@ -0,0 +1,90 @@
+// AppNavList / <app-nav-list>: a page-level rail of links with icons or dots, counts and a tinted current row.
+// The current row is tinted by the primary soft fill and its text takes the AA primary text colour. Every colour is a theme token.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-nav-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--wui-space-xxs);
+}
+
+.wui-nav-list-item {
+    display: flex;
+    align-items: center;
+    gap: var(--wui-space-sm);
+    width: 100%;
+    min-height: 40px;
+    padding: var(--wui-space-xs) var(--wui-space-sm);
+    border: 0;
+    border-radius: var(--wui-radius-lg);
+    background: none;
+    color: var(--color-text);
+    font: inherit;
+    font-size: var(--wui-fs-sm);
+    text-align: start;
+    text-decoration: none;
+
+    &:hover {
+        background: var(--color-bg-muted);
+    }
+    &:focus-visible {
+        outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+        outline-offset: 1px;
+    }
+    &.is-active {
+        background: var(--color-primary-soft);
+        color: var(--color-primary-text);
+        font-weight: var(--wui-fw-medium);
+    }
+}
+
+.wui-nav-list-icon {
+    flex: none;
+}
+
+.wui-nav-list-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.wui-nav-list-dot {
+    flex: none;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--color-text-subtle);
+
+    &.tone-primary {
+        background: var(--color-primary);
+    }
+    &.tone-info {
+        background: var(--color-info);
+    }
+    &.tone-success {
+        background: var(--color-success);
+    }
+    &.tone-warning {
+        background: var(--color-warning);
+    }
+    &.tone-danger {
+        background: var(--color-danger);
+    }
+}
+
+.wui-nav-list-count {
+    margin-inline-start: auto;
+    color: var(--color-text-subtle);
+    font-size: var(--wui-fs-xs);
+}
+
+.wui-nav-list-divider {
+    height: 0;
+    margin: var(--wui-space-xs) var(--wui-space-xxs);
+    border: 0;
+    border-top: 1px solid var(--color-border);
+    opacity: 1;
+}

package/scss/wui/_overlays.scss

@@ -34,6 +34,13 @@
     z-index: var(--wui-z-modal);
     padding: 20px;
 }
+// A dialog opened over a side panel (drawer or offcanvas) sits above it and its dim layer.
+.modal.wui-modal-stacked {
+    z-index: calc(var(--bs-modal-zindex, 1055) + 10);
+}
+.modal-backdrop.wui-modal-backdrop-stacked {
+    z-index: calc(var(--bs-modal-zindex, 1055) + 9);
+}
 // `display: flex` ONLY while the dialog is actually open.
 //
 // This was `display: flex !important` on the rule above, which beat Bootstrap's
@@ -143,6 +150,14 @@
 .wui-modal-headtext {
     min-width: 0;
 }
+// Actions beside the title sit before the close button, pushed to the trailing edge.
+.wui-modal-header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--wui-space-xs);
+    flex-wrap: wrap;
+    margin-inline-start: auto;
+}
 .wui-modal-headicon {
     display: inline-flex;
     align-items: center;
@@ -490,6 +505,18 @@
 .wui-confirm-actions .btn {
     flex: 1;
 }
+// Plain confirm: text reads from the start edge, and its small buttons keep their natural width,
+// right-aligned, instead of sharing the row.
+.wui-confirm-plain .wui-confirm-content {
+    align-items: flex-start;
+    text-align: start;
+}
+.wui-confirm-plain .wui-confirm-actions {
+    justify-content: flex-end;
+}
+.wui-confirm-plain .wui-confirm-actions .btn {
+    flex: none;
+}
 
 // ── Tooltip ──
 // Both surfaces render Bootstrap's .tooltip / .tooltip-inner (React via react-bootstrap

package/scss/wui/_sortable.scss

@@ -40,6 +40,12 @@ wui-sortable[disabled] .wui-sortable-item,
 .wui-sortable-item[data-disabled] {
     color: var(--color-text-muted);
 }
+wui-sortable[borderless] .wui-sortable-item {
+    border-color: transparent;
+    background: transparent;
+    padding: 0;
+    box-shadow: none;
+}
 
 .wui-sortable-handle {
     display: grid;
@@ -79,6 +85,27 @@ wui-sortable[disabled] .wui-sortable-item,
     color: var(--color-text-subtle);
 }
 
+// The gutter keeps the handle's space whether or not it shows, so showing it moves nothing.
+wui-sortable[handle-display="hover"] {
+    padding-inline-start: var(--wui-space-lg);
+}
+wui-sortable[handle-display="hover"] .wui-sortable-handle {
+    margin-inline-start: calc(-1 * var(--wui-space-lg));
+}
+wui-sortable[handle-display="hover"] .wui-sortable-handle {
+    opacity: 0;
+}
+wui-sortable[handle-display="hover"] .wui-sortable-item:hover .wui-sortable-handle,
+wui-sortable[handle-display="hover"] .wui-sortable-handle:focus-visible,
+wui-sortable[handle-display="hover"] .wui-sortable-handle[aria-pressed="true"] {
+    opacity: 1;
+}
+@media (hover: none) {
+    wui-sortable[handle-display="hover"] .wui-sortable-handle {
+        opacity: 1;
+    }
+}
+
 .wui-sortable-body {
     flex: 1 1 auto;
     // Lets long content wrap instead of widening the list past a 375px phone.

package/scss/wui/_utilities.scss

@@ -273,6 +273,16 @@
     color: var(--color-text-muted);
     margin-top: 2px;
 }
+.wui-page-header-subtitle-inline .page-titlebar {
+    align-items: baseline;
+    flex-wrap: wrap;
+    column-gap: var(--wui-space-sm);
+}
+.wui-page-header-subtitle-inline .page-subtitle {
+    margin: 0;
+    font-size: var(--wui-fs-sm);
+    color: var(--color-text-subtle);
+}
 .page-actions {
     display: flex;
     gap: 8px;