@webority/theme 0.53.1 → 0.54.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.53.1",
+  "version": "0.54.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": {

package/scss/_components.scss

@@ -549,8 +549,8 @@
 }
 // No box to light up, so keyboard focus gets the outline ring instead.
 .btn.btn-ghost:focus-visible {
-    outline: 2px solid var(--color-primary-ink);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
     box-shadow: none;
 }
 .btn.btn-ghost.btn-ghost:disabled,
@@ -702,8 +702,8 @@ button.wui-input-leading:hover {
 }
 button.wui-input-trailing:focus-visible,
 button.wui-input-leading: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);
     color: var(--color-primary-ink);
     border-radius: 9999px;
 }
@@ -829,6 +829,9 @@ html.is-scrolling body::-webkit-scrollbar-thumb {
     .press-feedback {
         transition: none;
     }
+    .press-feedback:active:not(:disabled) {
+        transform: none;
+    }
     // Hover animation options: hide the moving layer and drop lift/glow so no
     // option animates, regardless of which .btn-anim-* is applied.
     .btn:not(.btn-icon):not(.u-action)::before {
@@ -854,6 +857,26 @@ html.is-scrolling body::-webkit-scrollbar-thumb {
     color: var(--color-text) !important;
 }
 
+// Bootstrap paints `.text-danger/-success/-warning/-info` and `.link-*` with the
+// brand FILL hue (2.29:1 to 4.38:1 on white). Text takes the AA text token, which
+// the alias layer also lifts for dark mode.
+@each $family in (danger, success, warning, info) {
+    .text-#{$family},
+    .link-#{$family},
+    .link-#{$family}:hover,
+    .link-#{$family}:focus {
+        color: var(--color-#{$family}-text) !important;
+    }
+    .link-#{$family} {
+        text-decoration-color: var(--color-#{$family}-text) !important;
+    }
+}
+
+// Lets a flex child shrink below its content so `.text-truncate` can work.
+.min-w-0 {
+    min-width: 0 !important;
+}
+
 // Font-family utilities Bootstrap has no equivalent for. Products were declaring
 // these locally, which is how a font choice drifts between surfaces.
 .font-mono {

package/scss/_marketing.scss

@@ -62,6 +62,11 @@
 // ---- Gradient backgrounds -------------------------------------------
 .bg-hero-gradient { background: var(--wui-hero-gradient); }
 .bg-cta-gradient { background: var(--wui-cta-gradient); }
+// The brand ring sinks into these deep brand fills; white keeps the focus ring at 3:1 on them.
+.bg-hero-gradient,
+.bg-cta-gradient {
+    --color-focus-ring: var(--color-on-scrim);
+}
 
 // ---- Marketing pill buttons (locked design parity) -------------------
 // Pixel-locked to the standalone reference's `btn-squircle inline-flex

package/scss/_variables.scss

@@ -336,11 +336,12 @@ $link-hover-decoration: underline;
 
 
 // ---- Focus ring -----------------------------------------------------
-// $focus-ring-color is intentionally NOT overridden. rgba($primary, …) here captures the
-// LIBRARY's $primary (this file compiles before a product's brand override), so the ring
-// leaked indigo into every product. Bootstrap's !default `rgba($primary, $focus-ring-opacity)`
-// is evaluated after the brand override, so it tracks the brand correctly.
+// Bootstrap's own ring is the primary at 25% opacity, under 3:1 on white (WCAG 1.4.11). It
+// points at the runtime ring token instead, so every Bootstrap control that keeps a box-shadow
+// ring (close button, nav link, pagination, accordion, .focus-ring) draws the solid, brand-tracking
+// colour. A runtime var also avoids capturing the library's compile-time $primary.
 // $focus-ring-blur matches BS (0) — not restated.
+$focus-ring-color: var(--color-focus-ring);
 $focus-ring-width: 3px; // BS 0.25rem (4px)
 
 

package/scss/_wui-aliases.scss

@@ -43,6 +43,20 @@
   // It is the only focus cue on a field, so it must clear 3:1 against the field and surface
   // (WCAG 1.4.11): the full primary, not a tint.
   --color-focus-border: var(--wui-primary);
+  // The keyboard focus ring every control draws on :focus-visible: an outline of this colour,
+  // width and offset. The primary ink clears 4.5:1 on every light surface and the dark primary
+  // on every dark one, so the ring keeps 3:1 whatever the brand. A coloured surface (a scrim, a
+  // brand hero) resets --color-focus-ring for its subtree. Inside a scroller that would clip an
+  // outer ring, the ring is drawn inset with --wui-focus-ring-inset.
+  --color-focus-ring: var(--color-primary-ink);
+  --wui-focus-ring-width: 2px;
+  --wui-focus-ring-offset: 2px;
+  --wui-focus-ring-inset: calc(-1 * var(--wui-focus-ring-width));
+  // Pressed: a translucent wash of the control's own ink laid over whatever fill it has, so it
+  // reads one step deeper than hover on any surface and in either theme, with no motion.
+  --color-pressed-overlay: color-mix(in srgb, currentColor 12%, transparent);
+  --wui-press-scale: 0.96;
+  --wui-press-duration: 80ms;
   --color-text-muted: var(--wui-text-2);
   --color-text-subtle: var(--wui-text-3);
 

package/scss/_wui-components.scss

@@ -34,21 +34,41 @@
 @import "wui/navigation";
 @import "wui/card";
 @import "wui/data";
+@import "wui/illustration";
 @import "wui/table-server";
 @import "wui/kanban";
+@import "wui/inline-edit";
+@import "wui/mention-input";
+@import "wui/comment-thread";
 @import "wui/overlays";
+@import "wui/drawer";
 @import "wui/modal-remote";
 @import "wui/utilities";
 @import "wui/typography";
 @import "wui/disclosure";
 @import "wui/display";
 @import "wui/flow";
+// After `flow`: the pricing section extends its `.plan-grid` rules.
+@import "wui/sections";
 @import "wui/chart";
 @import "wui/chart-card";
 @import "wui/calendar";
 @import "wui/rich-text";
 @import "wui/scrollbar";
 @import "wui/sortable";
+// Before `split-view`, which places the legend sheet inside the list column.
+@import "wui/record-pager";
+@import "wui/shortcuts";
+@import "wui/split-view";
+@import "wui/groups";
+@import "wui/carousel";
+@import "wui/onboarding-checklist";
+@import "wui/rating";
+@import "wui/relative-time";
+@import "wui/resizable";
+@import "wui/rolling-number";
+@import "wui/show-more";
+@import "wui/truncate";
 // After `navigation`/`overlays`: the switcher restates dropdown-item chrome those partials
 // set, so it has to win on equal specificity.
 @import "wui/workspace";
@@ -62,14 +82,23 @@
 @import "wui/dock";
 @import "wui/consent-banner";
 @import "wui/file-viewer";
+@import "wui/lightbox";
 @import "wui/toolbar";
 @import "wui/theme-toggle";
 @import "wui/tree";
 @import "wui/floating";
 @import "wui/chat";
+@import "wui/code-block";
 // After `overlays`: anchors the shared modal shell to the top when it holds the palette card.
 @import "wui/command-palette";
 @import "wui/context-menu";
+@import "wui/menubar";
+@import "wui/navigation-menu";
 @import "wui/tour";
+@import "wui/hover-card";
+@import "wui/notification-center";
+@import "wui/whats-new";
+// After every component partial: the shared focus ring and pressed wash settle ties with their hover rules.
+@import "wui/interaction";
 // Last: restates the settled state of menus other partials style, so it must win.
 @import "wui/menu-motion";

package/scss/wui/_avatar-picker.scss

@@ -37,7 +37,7 @@
     cursor: progress;
 }
 .wui-avatar-picker-face:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: 3px;
 }
 // A file held over the photo: the ring says it can be dropped there.

package/scss/wui/_calendar.scss

@@ -75,8 +75,8 @@ wui-calendar {
 .wui-calendar-today-btn:focus-visible,
 .wui-calendar-nav-btn:focus-visible,
 .wui-calendar-view-btn: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);
 }
 .wui-calendar-title {
     flex: 1 1 auto;
@@ -180,11 +180,11 @@ wui-calendar {
 // A day cell, a week or day heading and an event are reached by keyboard; the ring is the same
 // primary outline every other control in the library draws. The engine marks days with data-date.
 wui-calendar [data-date]: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-inset);
 }
 wui-calendar a:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: 1px;
 }
 // The engine draws day numbers, headings and event titles as bare anchors, which the page's link

package/scss/wui/_card.scss

@@ -190,6 +190,6 @@ button.card-clickable {
     transform: translateY(-1px);
 }
 .card-clickable: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/_carousel.scss

@@ -0,0 +1,182 @@
+// ── Carousel ──
+// AppCarousel / <app-carousel> (a <wui-carousel> element): slides in a scroll-snap track with previous
+// and next buttons, a dot per page and an optional visible pause button. The track scrolls on its own
+// (swipe, trackpad, keys); the element adds the buttons, dots and autoplay. Slides in view come from
+// --wui-carousel-per-view, -md and -lg set on the element; --wui-carousel-view is what applies at the
+// current width and is what the element reads to group the dots into pages.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-carousel {
+    --wui-carousel-gap: 20px;
+    --wui-carousel-view: var(--wui-carousel-per-view, 1);
+
+    display: block;
+    min-width: 0;
+}
+@include media-breakpoint-up(md) {
+    .wui-carousel {
+        --wui-carousel-view: var(--wui-carousel-per-view-md, var(--wui-carousel-per-view, 1));
+    }
+}
+@include media-breakpoint-up(lg) {
+    .wui-carousel {
+        --wui-carousel-view: var(--wui-carousel-per-view-lg, var(--wui-carousel-per-view-md, var(--wui-carousel-per-view, 1)));
+    }
+}
+
+.wui-carousel-stage {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.wui-carousel-track {
+    position: relative; // slides measure their offset from the track
+    display: flex;
+    flex: 1 1 0;
+    min-width: 0;
+    gap: var(--wui-carousel-gap);
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+    &:focus-visible {
+        outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+        outline-offset: var(--wui-focus-ring-offset);
+        border-radius: var(--wui-radius-sm);
+    }
+}
+@media (prefers-reduced-motion: no-preference) {
+    .wui-carousel-track {
+        scroll-behavior: smooth;
+    }
+}
+
+.wui-carousel-slide {
+    flex: 0 0 calc((100% - (var(--wui-carousel-view) - 1) * var(--wui-carousel-gap)) / var(--wui-carousel-view));
+    min-width: 0;
+    scroll-snap-align: start;
+}
+
+.wui-carousel-arrow {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    border: 1px solid var(--color-border);
+    border-radius: 50%;
+    background: var(--color-surface);
+    color: var(--color-text);
+    cursor: pointer;
+    transition:
+        background-color 160ms var(--wui-ease-ui),
+        color 160ms var(--wui-ease-ui);
+    &:hover {
+        background: var(--color-primary-soft);
+        color: var(--color-primary-ink);
+    }
+    &:focus-visible {
+        outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+        outline-offset: var(--wui-focus-ring-offset);
+    }
+    // Disabled by aria so a focused button at the end of the row keeps focus.
+    &[aria-disabled="true"] {
+        opacity: 0.4;
+        cursor: default;
+        background: var(--color-surface);
+        color: var(--color-text);
+    }
+}
+
+.wui-carousel-dots {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 8px;
+}
+// A 24px target around a 10px dot (WCAG 2.5.8).
+.wui-carousel-dot {
+    position: relative;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    &::before {
+        content: "";
+        position: absolute;
+        inset: 7px;
+        border-radius: 50%;
+        background: var(--color-border-strong);
+        transition: background-color 160ms var(--wui-ease-ui);
+    }
+    &:hover::before {
+        background: var(--color-text-muted);
+    }
+    &[aria-current="true"]::before {
+        background: var(--color-primary);
+    }
+    &:focus-visible {
+        outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+        outline-offset: 0;
+        border-radius: 50%;
+    }
+}
+
+.wui-carousel-pause {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+    padding: 8px 16px;
+    border: 1px solid var(--color-primary);
+    border-radius: 999px;
+    background: var(--color-surface);
+    color: var(--color-primary-ink);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+    &:hover {
+        background: var(--color-primary-soft);
+    }
+    &:focus-visible {
+        outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+        outline-offset: var(--wui-focus-ring-offset);
+    }
+    &[hidden] {
+        display: none;
+    }
+}
+// The glyph is two bars (pause) and, once paused, a triangle (play).
+.wui-carousel-pause-icon {
+    width: 10px;
+    height: 12px;
+    border-right: 3px solid currentColor;
+    border-left: 3px solid currentColor;
+}
+// The word swaps between Pause and Play and stays on one line.
+.wui-carousel-pause-text {
+    white-space: nowrap;
+}
+wui-carousel[data-paused] .wui-carousel-pause-icon {
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-right: 0;
+    border-left: 10px solid currentColor;
+}
+
+// One page of slides: nothing to step through.
+wui-carousel[data-single] {
+    .wui-carousel-arrow,
+    .wui-carousel-dots {
+        display: none;
+    }
+}

package/scss/wui/_chart.scss

@@ -48,7 +48,7 @@ wui-chart {
     color: var(--color-text);
 }
 .wui-chart-legend-item:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: 1px;
 }
 .wui-chart-legend-swatch {
@@ -81,7 +81,7 @@ wui-chart {
     transition: opacity 200ms var(--wui-ease-out-quart);
 }
 .wui-chart-surface:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: 4px;
 }
 .wui-chart-canvas {

package/scss/wui/_choice.scss

@@ -25,8 +25,8 @@
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
 .struct-card:has(.struct-card-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);
 }
 .struct-card.checked {
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
@@ -582,6 +582,7 @@ wui-datepicker:not([aria-invalid="true"]) .datepicker:not(.open) .datepicker-tri
 wui-date-range:not([aria-invalid="true"]) .daterange:not(.open) .daterange-trigger:focus:not(:focus-visible) {
     background-color: var(--color-field-bg);
     border-color: var(--color-field-border);
+    outline: none;
 }
 // Portalled to <body> and fixed-positioned from JS so a modal's
 // overflow:hidden can't clip it; top/left come from inline styles. z-index
@@ -831,8 +832,8 @@ button.datepicker-month:hover {
 .datepicker-cell:focus-visible {
     outline: none;
     box-shadow:
-        0 0 0 2px var(--color-surface),
-        0 0 0 4px var(--color-primary);
+        0 0 0 var(--wui-focus-ring-offset) var(--color-surface),
+        0 0 0 calc(var(--wui-focus-ring-offset) + var(--wui-focus-ring-width)) var(--color-focus-ring);
 }
 
 // The panel view fades+scales in on every drill; each month nav slides in from its direction.
@@ -974,6 +975,53 @@ button.datepicker-month:hover {
     font-size: 12px;
     color: var(--color-text-subtle);
 }
+// Quick ranges: a list beside the calendars. [hidden] must stay display:none, so the flex row
+// applies only while the popover is open.
+.daterange-pop.wui-daterange-pop--presets {
+    width: 800px;
+}
+.daterange-pop.wui-daterange-pop--presets:not([hidden]) {
+    display: flex;
+    gap: 18px;
+}
+.wui-daterange-presets {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 148px;
+    gap: 2px;
+    padding-right: 18px;
+    border-right: 1px solid var(--color-border);
+}
+.wui-daterange-main {
+    flex: 1;
+    min-width: 0;
+}
+.wui-daterange-preset {
+    border: none;
+    background: transparent;
+    padding: 7px 10px;
+    border-radius: var(--radius);
+    font-size: 13px;
+    font-weight: 500;
+    text-align: left;
+    white-space: nowrap;
+    color: var(--color-text);
+    cursor: pointer;
+    transition: background 0.12s;
+}
+.wui-daterange-preset:hover:not(:disabled) {
+    background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 8%, transparent));
+    color: var(--color-primary-ink);
+}
+.wui-daterange-preset.is-active {
+    background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 12%, transparent));
+    color: var(--color-primary-ink);
+    font-weight: 600;
+}
+.wui-daterange-preset:disabled {
+    color: var(--color-text-subtle);
+    cursor: not-allowed;
+}
 @media (max-width: 767.98px) {
     // Below Bootstrap md tier: stack the calendars so the popover still fits the viewport.
     .daterange-pop {
@@ -983,6 +1031,27 @@ button.datepicker-month:hover {
         flex-direction: column;
         gap: 16px;
     }
+    // On a phone the quick ranges sit above the calendars, wrapping as a row of buttons.
+    .daterange-pop.wui-daterange-pop--presets {
+        width: 320px;
+    }
+    .daterange-pop.wui-daterange-pop--presets:not([hidden]) {
+        flex-direction: column;
+        gap: 12px;
+    }
+    .wui-daterange-presets {
+        flex: none;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 4px;
+        padding: 0 0 12px;
+        border-right: none;
+        border-bottom: 1px solid var(--color-border);
+    }
+    .wui-daterange-preset {
+        min-height: 44px;
+        border: 1px solid var(--color-border);
+    }
 }
 @media (prefers-reduced-motion: reduce) {
     .daterange-pop {
@@ -1137,8 +1206,8 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     outline: none;
 }
 .country-toggle: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);
 }
 .country-toggle:disabled {
@@ -1310,6 +1379,11 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     background: var(--color-primary-soft) !important;
     color: var(--color-primary-ink) !important;
 }
+// The tint alone is about 1.2:1; keyboard focus adds the ring, inset inside the scrolling list.
+.country-dropdown-item:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
+}
 .country-dropdown-item.selected {
     background: var(--color-primary-soft) !important;
     color: var(--color-primary-ink) !important;
@@ -1392,7 +1466,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     color: var(--color-primary-ink);
 }
 .wui-timepicker-toggle:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: -4px;
 }
 .wui-timepicker-toggle:disabled {
@@ -1523,5 +1597,11 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 }
 .timepicker-option:focus-visible {
     outline: none;
-    box-shadow: inset 0 0 0 2px var(--color-primary);
+    box-shadow: inset 0 0 0 var(--wui-focus-ring-width) var(--color-focus-ring);
+}
+// On the solid selected fill the ring would vanish into it; a surface line inside keeps it visible.
+.timepicker-option.is-selected:focus-visible {
+    box-shadow:
+        inset 0 0 0 var(--wui-focus-ring-width) var(--color-focus-ring),
+        inset 0 0 0 calc(2 * var(--wui-focus-ring-width)) var(--color-surface);
 }