@webority/theme 0.53.0 → 0.54.0

package/scss/wui/_split-view.scss

@@ -0,0 +1,321 @@
+// ── Split view ──
+// AppSplitView / <app-split-view>: a list beside a reading pane. Mobile-first: one screen at a
+// time (the list, or the pane once an item is open, `.wui-split-reading`) until the tier in
+// `data-stack-below`, then both side by side on the 12-column split in `data-list-width`. Each
+// column scrolls on its own inside the height cap, so the list keeps its place while the pane
+// scrolls.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-split-view {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+    height: var(--wui-split-height, min(760px, calc(100dvh - 12rem)));
+    min-height: 320px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius);
+    corner-shape: squircle;
+    background: var(--color-surface);
+    color: var(--color-text);
+    overflow: hidden;
+}
+
+@for $n from 3 through 8 {
+    .wui-split-view[data-list-width="#{$n}"] {
+        --wui-split-list-fr: #{$n}fr;
+        --wui-split-pane-fr: #{12 - $n}fr;
+    }
+}
+
+.wui-split-list,
+.wui-split-pane {
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+}
+.wui-split-list {
+    display: flex;
+}
+.wui-split-pane {
+    display: none;
+}
+.wui-split-view.wui-split-reading > .wui-split-list {
+    display: none;
+}
+.wui-split-view.wui-split-reading > .wui-split-pane {
+    display: flex;
+}
+
+// Side by side from the stack tier up. The legend only shows here: a phone has no keyboard to
+// press J or K on.
+@each $tier in sm, md, lg, xl, xxl {
+    @include media-breakpoint-up($tier) {
+        .wui-split-view[data-stack-below="#{$tier}"] {
+            grid-template-columns: minmax(0, var(--wui-split-list-fr, 5fr)) minmax(0, var(--wui-split-pane-fr, 7fr));
+        }
+        .wui-split-view[data-stack-below="#{$tier}"] > .wui-split-list {
+            display: flex;
+            border-right: 1px solid var(--color-border);
+        }
+        .wui-split-view[data-stack-below="#{$tier}"] > .wui-split-pane {
+            display: flex;
+        }
+        .wui-split-view[data-stack-below="#{$tier}"] .wui-split-legend {
+            display: flex;
+        }
+    }
+}
+
+// The list header, swapped for the bulk bar while items are ticked (as the table toolbar does).
+.wui-split-head {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 12px;
+    min-height: 52px;
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--color-border);
+}
+.wui-split-head-main,
+.wui-split-head-bulk {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+}
+.wui-split-head-bulk {
+    min-height: 36px;
+    padding: 2px 8px 2px 12px;
+    border-radius: var(--radius);
+    background: var(--color-primary-soft);
+}
+.wui-split-head-main[hidden],
+.wui-split-head-bulk[hidden] {
+    display: none;
+}
+.wui-split-all {
+    flex: none;
+}
+.wui-split-count {
+    margin-right: 4px;
+    font-size: 13px;
+    font-weight: 600;
+}
+
+.wui-split-chips {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.wui-split-items {
+    flex: 1 1 auto;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+
+.wui-split-item {
+    display: flex;
+    align-items: flex-start;
+    border-bottom: 1px solid var(--color-border-light);
+}
+.wui-split-item:hover {
+    background: var(--color-bg-muted);
+}
+.wui-split-item.is-selected {
+    background: var(--color-primary-soft);
+}
+// The open item: the same subtle primary background as the open row of a ledger table
+// (`.wui-row-active`). Declared after is-selected so an item both open and ticked reads as open.
+.wui-split-item.is-active,
+.wui-split-item.is-active:hover {
+    background: var(--bs-primary-bg-subtle);
+}
+
+.wui-split-check {
+    flex: none;
+    margin: 15px 0 0 16px;
+}
+
+.wui-split-link {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: flex-start;
+    gap: 12px;
+    min-width: 0;
+    padding: 12px 16px;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+}
+.wui-split-check + .wui-split-link {
+    padding-left: 10px;
+}
+.wui-split-link:hover {
+    color: inherit;
+}
+.wui-split-link:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
+}
+
+.wui-split-item-main {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+.wui-split-item-title {
+    overflow: hidden;
+    color: var(--color-text);
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.wui-split-item-meta {
+    display: -webkit-box;
+    overflow: hidden;
+    color: var(--color-text-muted);
+    font-size: 13px;
+    overflow-wrap: anywhere;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+.wui-split-item-end {
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 6px;
+    color: var(--color-text-subtle);
+    font-size: 12px;
+    white-space: nowrap;
+}
+// The subtle grey clears AA on the plain surface only; on a tinted item it is the muted grey.
+.wui-split-item:is(:hover, .is-selected, .is-active) .wui-split-item-end {
+    color: var(--color-text-muted);
+}
+.wui-split-badge {
+    min-width: 20px;
+    padding: 1px 7px;
+    border-radius: 999px;
+    background: var(--color-primary-soft);
+    color: var(--color-primary-ink);
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 18px;
+    text-align: center;
+}
+
+.wui-split-empty {
+    display: grid;
+    flex: 1 1 auto;
+    place-items: center;
+    padding: 32px 16px;
+    color: var(--color-text-muted);
+    text-align: center;
+}
+
+.wui-split-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--color-border-light);
+}
+.wui-split-skeleton-title,
+.wui-split-skeleton-meta {
+    display: block;
+    height: 12px;
+    border-radius: 6px;
+}
+.wui-split-skeleton-title {
+    width: 60%;
+}
+.wui-split-skeleton-meta {
+    width: 85%;
+    height: 10px;
+}
+
+// The hints and the shortcut legend (AppShortcutLegend) under the list. The legend's sheet opens
+// over the list, anchored to this footer rather than to its own button.
+.wui-split-legend {
+    position: relative;
+    display: none;
+    flex: none;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px 14px;
+    padding: 8px 16px;
+    border-top: 1px solid var(--color-border);
+    color: var(--color-text-muted);
+    font-size: 12px;
+}
+.wui-split-legend > .wui-shortcut-legend {
+    position: static;
+    margin-left: auto;
+}
+.wui-split-legend .wui-shortcut-sheet {
+    right: auto;
+    left: 8px;
+    width: min(320px, calc(100% - 16px));
+}
+
+.wui-split-pane-head {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    min-height: 52px;
+    padding: 8px 20px;
+    border-bottom: 1px solid var(--color-border);
+}
+.wui-split-pane-head > .wui-record-pager {
+    margin-left: auto;
+}
+.wui-split-pane-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 20px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+.wui-split-pane-body:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
+}
+// While a Razor pane fetches the next item, the old one stays in place, dimmed.
+.wui-split-pane.is-loading .wui-split-pane-body {
+    opacity: 0.55;
+    pointer-events: none;
+}
+.wui-split-pane-error {
+    padding: 32px 16px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .wui-split-item,
+    .wui-split-pane-body {
+        transition:
+            background-color 0.12s ease,
+            opacity 0.12s ease;
+    }
+}

package/scss/wui/_toolbar.scss

@@ -48,8 +48,8 @@
     cursor: default;
 }
 .toolbar-item:has(.toolbar-input:focus-visible) {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 
 // Visually hidden but focusable/announceable — same trick as .segmented-input.
@@ -121,8 +121,8 @@
     color: var(--color-text);
 }
 .toolbar-action:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 .toolbar-action:disabled {
     opacity: 0.5;

package/scss/wui/_tour.scss

@@ -55,8 +55,8 @@ wui-tour-step {
         outline: none;
     }
     &:focus-visible {
-        outline: 2px solid var(--color-primary);
-        outline-offset: 2px;
+        outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+        outline-offset: var(--wui-focus-ring-offset);
     }
 }
 

package/scss/wui/_tree.scss

@@ -50,8 +50,8 @@ wui-tree {
 }
 // The item holds the focus, but it also holds its subtree, so the ring goes on its own row.
 .wui-tree-item:focus-visible > .wui-tree-row {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
 }
 .wui-tree-row-error .wui-tree-label {
     color: var(--color-danger);

package/scss/wui/_truncate.scss

@@ -0,0 +1,32 @@
+// ── Truncate ──
+// AppTruncate / <app-truncate> (a <wui-truncate> element): text cut with an ellipsis by width or by
+// line count. The element sets data-wui-tip (drawn by the CSS tooltip in _overlays.scss) on itself,
+// not on the clipped span, because the span's overflow:hidden would clip the bubble.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-truncate {
+    display: block;
+    min-width: 0;
+    max-width: var(--wui-truncate-width, 100%);
+}
+.wui-truncate-text {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.wui-truncate-multi .wui-truncate-text {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--wui-truncate-lines, 2);
+    line-clamp: var(--wui-truncate-lines, 2);
+    white-space: normal;
+    overflow-wrap: anywhere;
+}
+// Focusable only while the text is cut (the element adds tabindex then).
+.wui-truncate[tabindex]:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+    border-radius: 4px;
+}

package/scss/wui/_typography.scss

@@ -40,6 +40,20 @@
     line-height: 1.15;
 }
 
+/* ── Chip group: a row of chips that wraps, or (overflow="menu") moves the extras into a More menu ── */
+.wui-chip-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+}
+.wui-chip-group-nowrap {
+    flex-wrap: nowrap;
+}
+.wui-chip-group-nowrap > * {
+    flex: none;
+}
+
 /* ── Chip (token / tag) ── */
 .chip {
     display: inline-flex;

package/scss/wui/_utilities.scss

@@ -88,8 +88,8 @@
 }
 .infotip-btn:focus-visible {
     color: var(--color-primary-ink);
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 .infotip-pop {
     position: absolute;
@@ -420,8 +420,8 @@
     cursor: pointer;
 }
 .wui-dropdown-trigger:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
     border-radius: var(--radius-sm);
 }
 
@@ -583,8 +583,8 @@
     opacity: 1;
 }
 .wui-banner-dismiss:focus-visible {
-    outline: 2px solid currentColor;
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid currentColor;
+    outline-offset: var(--wui-focus-ring-offset);
 }
 .wui-banner-info {
     background: var(--color-info-soft);
@@ -1059,8 +1059,8 @@
     box-shadow: none;
 }
 .alert .btn-close:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 
 // ============================================================================

package/scss/wui/_whats-new.scss

@@ -0,0 +1,147 @@
+// ── What's new ──
+// AppWhatsNew / <app-whats-new> (a <wui-whats-new> element): a gift icon with an unread dot and a
+// panel of dated release notes under it. The element shows the dot through [data-wui-unread] on the
+// host, the panel through [data-open] (never .show or hidden, which a React re-render could
+// reset), marks each unread entry with [data-wui-unread] and places the panel with position: fixed,
+// so it escapes any clipping ancestor. Without script the panel stays closed.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-whats-new {
+    display: inline-flex;
+    flex: none;
+}
+.wui-whats-new-trigger {
+    position: relative;
+    --wui-action-size: 36px;
+}
+// The trigger's name when there is no visible text: the label, plus "unread" while the dot shows.
+.wui-whats-new-name,
+.wui-whats-new-unread {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+.wui-whats-new:not([data-wui-unread]) .wui-whats-new-unread {
+    display: none;
+}
+// Ringed in the surface colour so it reads as sitting on the icon rather than touching it.
+.wui-whats-new-dot {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    box-sizing: content-box;
+    width: 8px;
+    height: 8px;
+    border: 2px solid var(--color-surface);
+    border-radius: 50%;
+    background: var(--color-danger-strong);
+}
+.wui-whats-new:not([data-wui-unread]) .wui-whats-new-dot {
+    display: none;
+}
+
+.wui-whats-new-panel {
+    display: none;
+    position: fixed;
+    z-index: var(--wui-z-popover);
+    box-sizing: border-box;
+    width: min(380px, calc(100vw - 8px));
+    max-height: min(560px, calc(100vh - 8px));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-lg);
+    background: var(--color-surface);
+    box-shadow: var(--wui-shadow-overlay);
+    color: var(--color-text-body);
+    // Focus lands on the panel itself after an open; the links carry the visible focus.
+    outline: none;
+    transform-origin: top right;
+}
+.wui-whats-new[data-open] .wui-whats-new-panel {
+    display: block;
+    animation: var(--wui-menu-anim) var(--wui-menu-anim-duration) var(--wui-menu-anim-ease);
+}
+.wui-whats-new-panel.drop-up {
+    --wui-menu-drop: 6px;
+
+    transform-origin: bottom right;
+}
+.wui-whats-new-title {
+    margin: 0;
+    padding: 14px 16px 10px;
+    border-bottom: 1px solid var(--color-border-light);
+    font-size: 15px;
+    font-weight: 600;
+}
+.wui-whats-new-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+.wui-whats-new-entry {
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--color-border-light);
+}
+.wui-whats-new-entry:last-child {
+    border-bottom: 0;
+}
+// A mark on the edge for what was new when the panel opened.
+.wui-whats-new-entry[data-wui-unread] {
+    box-shadow: inset 3px 0 0 var(--color-primary);
+}
+.wui-whats-new-date {
+    display: block;
+    color: var(--color-text-muted);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+}
+.wui-whats-new-entry-title {
+    margin: 2px 0 0;
+    font-size: 14px;
+    font-weight: 600;
+}
+.wui-whats-new-body {
+    margin: 4px 0 0;
+    color: var(--color-text-muted);
+    font-size: 13px;
+    overflow-wrap: anywhere;
+}
+.wui-whats-new-image {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin-top: 10px;
+    border: 1px solid var(--color-border-light);
+    border-radius: var(--wui-radius-sm);
+}
+.wui-whats-new-link {
+    display: inline-block;
+    margin-top: 8px;
+    font-size: 13px;
+    font-weight: 500;
+}
+.wui-whats-new-link:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+    border-radius: 2px;
+}
+.wui-whats-new-empty {
+    margin: 0;
+    padding: 24px 16px;
+    color: var(--color-text-muted);
+    font-size: 13px;
+    text-align: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .wui-whats-new[data-open] .wui-whats-new-panel {
+        animation: none;
+    }
+}

package/scss/wui/_workspace.scss

@@ -221,8 +221,8 @@
 .workspace-switcher .workspace-switcher-option:focus-visible,
 .workspace-switcher .workspace-switcher-create:focus-visible,
 .workspace-switcher .workspace-switcher-footer-action:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 // The active workspace keeps its tint through hover, so the tick is never the only cue.
 .workspace-switcher .workspace-switcher-option.is-active,