@webority/theme 0.53.1 → 0.55.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

@@ -1,97 +1,18 @@
 // ── Product tour ──
-// AppTour / <app-tour> / <wui-tour>: a dimmed page with one highlighted element and a card
-// holding the step text and Back / Next / Skip. The element appends .wui-tour-layer to <body>
-// and positions .wui-tour-spot (over the target) and .wui-tour-card (against the target, through
-// anchorOverlay, which sets position, top and left inline). Everything visual is here, every
-// colour a theme token.
+// AppTour / <app-tour> / <wui-tour>. The one entry for every tour rule: the partials under
+// wui/tour/ hold one concern each, matching the element's modules (tourMotion.js, tourProgress.js,
+// tourPlacement.js, tourMedia.js, tourAdvance.js, tourEnd.js). Nothing else imports them, so the
+// tour's styles move as a whole by moving this one import.
+//
+// Isolated tours carry a sealed copy of every .wui-tour-* rule (packages/elements/src/tourIsolated.js),
+// and a test pins that copy to the compiled theme.
 //
 // Part of the wui-components layer, see _wui-components.scss for load order.
 
-// The step data of a server-rendered tour is plain markup the element reads and the page never shows.
-wui-tour,
-wui-tour-step {
-    display: none;
-}
-
-.wui-tour-layer {
-    position: fixed;
-    inset: 0;
-    z-index: var(--wui-z-tour);
-}
-
-// The dim is the spot's own shadow, so the hole around the target needs no clip-path.
-.wui-tour-spot {
-    position: fixed;
-    border-radius: var(--wui-radius-sm);
-    box-shadow:
-        0 0 0 2px var(--color-primary),
-        0 0 0 100vmax var(--color-scrim-strong);
-    pointer-events: none;
-}
-@media (prefers-reduced-motion: no-preference) {
-    .wui-tour-spot {
-        transition:
-            top 160ms ease,
-            left 160ms ease,
-            width 160ms ease,
-            height 160ms ease;
-    }
-}
-
-.wui-tour-card {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: min(360px, calc(100vw - 16px));
-    padding: 16px;
-    overflow-y: auto;
-    background: var(--color-surface);
-    color: var(--color-text);
-    border: 1px solid var(--color-border);
-    border-radius: var(--wui-radius-lg);
-    corner-shape: squircle;
-    box-shadow: var(--wui-shadow-overlay);
-    &:focus {
-        outline: none;
-    }
-    &:focus-visible {
-        outline: 2px solid var(--color-primary);
-        outline-offset: 2px;
-    }
-}
-
-.wui-tour-position {
-    margin: 0;
-    font-size: 12px;
-    color: var(--color-text-muted);
-}
-.wui-tour-title {
-    margin: 0;
-    font-size: 16px;
-    font-weight: 600;
-}
-.wui-tour-text {
-    margin: 0;
-    font-size: 14px;
-    color: var(--color-text-muted);
-}
-.wui-tour-actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    margin-top: 4px;
-}
-.wui-tour-nav {
-    display: flex;
-    gap: 8px;
-}
-// The buttons keep Bootstrap's look; the width stops the label change between Next and Done from
-// moving the row, and Skip reads as the quiet action.
-.wui-tour-skip {
-    color: var(--color-text-muted);
-}
-.wui-tour-back,
-.wui-tour-next {
-    min-width: 64px;
-}
+@import "tour/base";
+@import "tour/motion";
+@import "tour/progress";
+@import "tour/placement";
+@import "tour/media";
+@import "tour/advance";
+@import "tour/end";

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);
 }
 
 // ============================================================================