@webority/theme 0.9.10 → 0.9.12

package/package.json

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

@@ -419,6 +419,31 @@
     --bs-dropdown-link-active-color: var(--color-primary-hover);
     --bs-dropdown-link-active-bg: var(--color-primary-soft);
     box-shadow: var(--wui-shadow-overlay);
+    // A long menu (account / workspace lists) must never spill past the screen and clip its
+    // last rows: cap the panel to the viewport and scroll INSIDE it. The room subtracted
+    // leaves space for a topbar-height trigger + margin — the common anchor for these long
+    // lists — so a top-anchored menu fits; Popper flips/shifts the panel for other anchors.
+    // The thin thumb matches the shared rail (--wui-scrollbar*), like .wui-scroll.
+    max-height: calc(100vh - 5rem);
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--wui-scrollbar) transparent;
+}
+.dropdown-menu::-webkit-scrollbar {
+    width: 8px;
+}
+.dropdown-menu::-webkit-scrollbar-track {
+    background: transparent;
+}
+.dropdown-menu::-webkit-scrollbar-thumb {
+    background-color: var(--wui-scrollbar);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+}
+.dropdown-menu::-webkit-scrollbar-thumb:hover {
+    background-color: var(--wui-scrollbar-hover);
+    background-clip: padding-box;
 }
 
 .dropdown-item {

package/scss/_wui-components.scss

@@ -59,6 +59,7 @@
 @import "flags";
 @import "wui/shell";
 @import "wui/dock";
+@import "wui/feedback";
 @import "wui/toolbar";
 // Last: restates the settled state of menus other partials style, so it must win.
 @import "wui/menu-motion";

package/scss/wui/_data.scss

@@ -13,14 +13,16 @@
     color: var(--color-text-subtle);
 }
 .empty-state-title {
-    font-size: 16px;
+    // Matches .tbl-empty-title (the DataTable empty state) so the two read as one family.
+    font-size: 18px;
     font-weight: 600;
     line-height: 1.35;
     color: var(--color-text);
 }
 .empty-state-message {
     margin: 6px 0 0;
-    font-size: 14px;
+    // Matches .tbl-empty-text.
+    font-size: 16px;
     line-height: 1.5;
     color: var(--color-text-muted);
 }
@@ -112,39 +114,26 @@
 .table-ledger tbody tr:hover td.wui-table-empty:has(> .tbl-empty) {
     background: transparent;
 }
-// Keep the empty state on screen. An empty table has no data to scroll to, yet its
-// header row can still be wider than the viewport (many columns, or wide header
-// labels), so `.table-wrap` would scroll horizontally and the centred empty message —
-// spanning that full width in a colSpan cell — would slide off screen on a narrow
-// screen. Keyed off the empty body itself (`.tbl-empty` for a rich AppTableEmptyState,
-// `.tbl-empty-plain` for a plain string — both surfaces render one), lay the empty
-// table out at the visible wrap width and drop the scroll, so the message stays centred
-// and fully in view. This is the "do it without turning the scroll container into a
-// query container" path the pin note on `.table-wrap:has(> .table-ledger)` calls for —
-// it replaces the earlier `container-type` + `100cqw` pin, which collapsed the wrap as a
-// flex/grid item. Scoped to the empty body, so a table WITH rows is untouched and still
-// scrolls its columns.
-// Keyed on the empty CELL (`td.wui-table-empty`, the one element unique to the empty
-// state on both surfaces) with CHILD combinators, NOT a loose descendant `:has(.tbl-empty)`.
-// The child chain matches only a table's OWN empty body — so an expandable row whose
-// nested table happens to be empty can never force the outer, data-bearing table into
-// this layout. A data table (no empty cell of its own) is untouched and still scrolls.
-.table-wrap:has(> table > tbody > tr > td.wui-table-empty) {
-    overflow-x: hidden;
-}
-.table:has(> tbody > tr > td.wui-table-empty) {
+// The React AppDataTable renders its empty state as a SIBLING of the table, INSIDE `.table-wrap`
+// (the horizontal scroller), in this `.tbl-empty-block`. Two things fall out of that placement:
+//   1. the horizontal scrollbar sits at the BOTTOM of the wrap — below this message — instead of
+//      being wedged between the header band and the message (which is what an outside-the-wrap
+//      block produced), and
+//   2. `position: sticky; left: 0` + `width: 100%` pins the message to the wrap's VISIBLE width and
+//      holds it there while a wide header scrolls behind it: `width: 100%` on a child of an
+//      overflow container resolves to the container's CONTENT (visible) width, not its scroll width,
+//      so the message never grows the scroll region and never slides off on a narrow screen.
+//
+// This deliberately does NOT use `container-type` + `100cqw` — the query container collapses
+// `.table-wrap` to a sliver when it is a flex/grid item (see the `.table-wrap` note below). Sticky
+// sidesteps that entirely. (The `.wui-table-empty` cell rules above remain for Razor, where the
+// empty state is author-placed inside a `<td colSpan>`.)
+.tbl-empty-block {
+    position: sticky;
+    left: 0;
+    // = the wrap's visible width (content box of the overflow container), never its scroll width.
     width: 100%;
-    min-width: 0;
-    table-layout: fixed;
-}
-// Under the fixed layout above the columns are narrow, so a long header label would
-// spill out of its cell and back into horizontal overflow — the very thing we just
-// removed. Clip each header to its column (ellipsis) in the empty state; short labels
-// are unaffected, and the data table keeps its natural header sizing.
-.table:has(> tbody > tr > td.wui-table-empty) > thead th {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    // `.tbl-empty` / `.tbl-empty-plain` inside own the centring and padding.
 }
 
 // ── Table (base) ──
@@ -300,8 +289,9 @@
     // ITEM (a very common product layout), forcing the whole table into a tiny horizontal
     // scroll. It was briefly added for a `100cqw` empty-state pin; the collapse is far worse
     // than the empty message not being perfectly centred on a narrow scrolling table, so the
-    // pin was removed. If the empty state ever needs viewport-relative sizing again, do it
-    // without turning the scroll container into a query container.
+    // pin was removed. The empty state now just sizes like a normal table (see the empty-state
+    // block above) — if it ever needs viewport-relative sizing again, do it without turning
+    // the scroll container into a query container.
 }
 .table-ledger {
     border-spacing: 0;

package/scss/wui/_display.scss

@@ -700,7 +700,8 @@ a.info-row:hover .info-value {
     font-size: 12.5px;
     color: var(--color-text-muted);
 }
-.timeline-at {
+.timeline-at,
+.timeline-time {
     color: var(--color-text-subtle);
     font-variant-numeric: tabular-nums;
 }
@@ -820,12 +821,30 @@ a.info-row:hover .info-value {
     justify-content: space-between;
     gap: 12px;
 }
-.timeline--progress .timeline-head .timeline-at {
+// Date OVER time — the stamp stacks vertically so the time reads on its own line beneath the
+// date. `.timeline-when` groups the two wherever a date+time stamp appears (both variants), so
+// the pair moves and aligns as one unit.
+.timeline-when {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 1px;
+}
+// Progress: the stamp is pinned top-right, so the stack is right-aligned under the title row.
+.timeline--progress .timeline-head .timeline-when {
     flex: none;
+    align-items: flex-end;
+    text-align: right;
+}
+.timeline--progress .timeline-head .timeline-at,
+.timeline--progress .timeline-head .timeline-time {
     font-size: 12.5px;
     color: var(--color-text-subtle);
     white-space: nowrap;
 }
+// The time-of-day line is a touch smaller/lighter than the date it sits under.
+.timeline-time {
+    font-size: 12px;
+}
 // An upcoming step greys down — it hasn't happened yet.
 .timeline--progress .timeline-item.is-upcoming .timeline-title {
     color: var(--color-text-muted);

package/scss/wui/_feedback.scss

@@ -0,0 +1,259 @@
+// ── In-product feedback ──
+// AppFeedback / <app-feedback> / <wui-feedback> — a floating trigger pinned to a page
+// corner that opens a small panel with a message box. The element authors the markup and
+// owns the states (`open` / `busy` on the host, `hidden` on the panel, error and thank-you
+// blocks); everything visual lives here.
+//
+// Part of the wui-components layer — see _wui-components.scss for load order.
+
+wui-feedback {
+    position: fixed;
+    bottom: 20px;
+    z-index: var(--wui-z-fixed);
+    display: block;
+}
+wui-feedback,
+wui-feedback[position="bottom-right"] {
+    right: 20px;
+    left: auto;
+}
+wui-feedback[position="bottom-left"] {
+    left: 20px;
+    right: auto;
+}
+
+// ── Trigger ──
+.feedback-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: var(--wui-control-height-sm);
+    padding: 0 16px;
+    border: none;
+    border-radius: 999px;
+    background: var(--color-primary);
+    color: var(--color-primary-text);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1;
+    cursor: pointer;
+    box-shadow: var(--wui-shadow-overlay);
+    transition:
+        background-color 160ms var(--wui-ease-ui),
+        transform 160ms var(--wui-ease-ui);
+}
+.feedback-trigger:hover {
+    background: var(--color-primary-hover);
+}
+.feedback-trigger:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+.feedback-trigger-icon {
+    display: grid;
+    place-items: center;
+    line-height: 0;
+}
+.feedback-trigger-label {
+    white-space: nowrap;
+}
+
+// ── Panel ──
+// Anchored to the same corner as the trigger, opening upward — the trigger sits at the
+// bottom of the viewport, so there is only ever room above it.
+.feedback-panel {
+    position: absolute;
+    bottom: calc(100% + 12px);
+    width: 340px;
+    max-width: calc(100vw - 40px);
+    padding: 16px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-lg);
+    box-shadow: var(--wui-shadow-overlay-lg);
+    color: var(--color-text);
+    text-align: start;
+}
+wui-feedback[position="bottom-right"] .feedback-panel {
+    right: 0;
+}
+wui-feedback[position="bottom-left"] .feedback-panel {
+    left: 0;
+}
+// `hidden` on a custom element's child is honoured, but a later display rule would win —
+// state it explicitly so the panel cannot be left visible by cascade order.
+.feedback-panel[hidden] {
+    display: none;
+}
+
+.feedback-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+.feedback-heading {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--color-text);
+}
+.feedback-close {
+    display: grid;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    flex: 0 0 auto;
+    padding: 0;
+    border: none;
+    border-radius: var(--wui-radius-sm);
+    background: transparent;
+    color: var(--color-text-muted);
+    cursor: pointer;
+}
+.feedback-close:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+.feedback-close:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 1px;
+}
+
+.feedback-body[hidden],
+.feedback-actions[hidden],
+.feedback-thanks[hidden] {
+    display: none;
+}
+
+// ── Fields ──
+.feedback-field {
+    display: block;
+    margin-bottom: 12px;
+}
+.feedback-field-label {
+    display: block;
+    margin-bottom: 6px;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-text-muted);
+}
+.feedback-message,
+.feedback-email {
+    display: block;
+    width: 100%;
+    padding: 10px 12px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-sm);
+    color: var(--color-text);
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 1.45;
+}
+.feedback-message {
+    min-height: 96px;
+    resize: vertical;
+}
+.feedback-message:focus-visible,
+.feedback-email:focus-visible {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary-soft);
+}
+.feedback-email {
+    height: var(--wui-control-height-sm);
+}
+
+.feedback-error {
+    margin: 0 0 4px;
+    font-size: 13px;
+    line-height: 1.4;
+    color: var(--color-danger-text);
+}
+.feedback-error[hidden] {
+    display: none;
+}
+
+// ── Actions ──
+.feedback-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+}
+.feedback-cancel,
+.feedback-submit {
+    height: var(--wui-control-height-sm);
+    padding: 0 14px;
+    border-radius: var(--wui-radius-sm);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1;
+    cursor: pointer;
+}
+.feedback-cancel {
+    border: 1px solid var(--color-border);
+    background: transparent;
+    color: var(--color-text);
+}
+.feedback-cancel:hover {
+    background: var(--color-bg-muted);
+}
+.feedback-submit {
+    border: none;
+    background: var(--color-primary);
+    color: var(--color-primary-text);
+}
+.feedback-submit:hover:not(:disabled) {
+    background: var(--color-primary-hover);
+}
+.feedback-submit:disabled {
+    opacity: 0.65;
+    cursor: default;
+}
+.feedback-cancel:focus-visible,
+.feedback-submit:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+// ── Thank-you ──
+.feedback-thanks {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 0 4px;
+    font-size: 14px;
+    color: var(--color-success-text);
+}
+.feedback-thanks-icon {
+    display: grid;
+    place-items: center;
+    line-height: 0;
+}
+.feedback-thanks-text {
+    font-weight: 500;
+    line-height: 1.4;
+}
+
+// ── Small screens ──
+// The panel is nearly the width of the phone, so pin it to both edges rather than to the
+// trigger's corner — a 340px card anchored to one side overhangs on the narrowest devices.
+@include media-breakpoint-down(sm) {
+    .feedback-panel {
+        position: fixed;
+        right: 12px;
+        left: 12px;
+        bottom: calc(var(--wui-control-height-sm) + 32px);
+        width: auto;
+        max-width: none;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .feedback-trigger {
+        transition: none;
+    }
+}

package/scss/wui/_navigation.scss

@@ -127,6 +127,11 @@
 
 // Optional overflow wrapper: the scroll chevrons live HERE, outside the scrolling strip,
 // so they stay pinned while the tabs scroll under them.
+// A little horizontal padding insets the strip from its container's edges, so the first/last
+// tab — and its full-width active underline — never lands on a rounded container's corner (a
+// tab strip placed flush in a card read as the underline hanging outside it). Horizontal only:
+// both surfaces render this wrapper for horizontal strips and skip it for vertical, so the two
+// stay identical.
 .app-tabs-wrap {
     position: relative;
     display: flex;
@@ -146,10 +151,12 @@
     // Auto-scrolling the active tab into view (and the chevrons) glides rather than jumps.
     scroll-behavior: smooth;
 }
-// Doubled to (0,2,0) so the strip keeps scrolling even if a consumer loads Bootstrap
-// after the theme, which would otherwise let `.nav`'s flex-wrap:wrap win on order.
+// Doubled to (0,2,0) so the strip keeps scrolling AND keeps its gutters even if a consumer
+// loads Bootstrap after the theme, which would otherwise let `.nav`'s flex-wrap:wrap and
+// padding-left:0 win on source order.
 .app-tabs.app-tabs {
     flex-wrap: nowrap;
+    padding: 0 12px;
 }
 .app-tabs::-webkit-scrollbar {
     display: none;

package/scss/wui/_utilities.scss

@@ -164,12 +164,11 @@
     align-items: center;
     justify-content: space-between;
     gap: 16px;
-    // Content-driven wrap: while the title block and actions both fit, space-between keeps the
-    // actions pinned right; once a long title needs the full width they can no longer share the
-    // row, so the actions drop onto their own line — left-aligned, since space-between places a
-    // lone wrapped item at flex-start — instead of being crushed against the title. The gap above
-    // doubles as the row-gap to that dropped line. (Below lg they stack unconditionally, further
-    // down; this is the any-width, content-driven case.)
+    // Content-driven wrap at EVERY width — there is no breakpoint stack. While the title block
+    // and actions both fit, space-between keeps the actions pinned right; once a long title needs
+    // the full width they can no longer share the row, so the actions drop onto their own line —
+    // left-aligned, since space-between places a lone wrapped item at flex-start — instead of
+    // being crushed against the title. The gap above doubles as the row-gap to that dropped line.
     flex-wrap: wrap;
 }
 // Left block: an optional leading icon tile + the title stack, kept together.
@@ -188,8 +187,8 @@
     flex: none;
     display: inline-grid;
     place-items: center;
-    width: 40px;
-    height: 40px;
+    width: 55px;
+    height: 55px;
     border-radius: var(--radius);
     corner-shape: squircle;
     background: var(--color-primary-soft);
@@ -262,6 +261,14 @@
     display: flex;
     gap: 8px;
     align-items: center;
+    // Several action buttons wrap among themselves if their own line still can't hold them all
+    // — but they never force the block full-width, so a single button stays its natural size.
+    flex-wrap: wrap;
+    // Don't let the actions be squeezed. The title block (`.page-header-lead`, min-width: 0)
+    // absorbs the shrink instead, so the actions keep their natural size and the row stays on
+    // one line while it fits — then `.page-header-bar`'s flex-wrap drops the WHOLE actions
+    // block onto its own line only once the content genuinely can't share the row.
+    flex: none;
 }
 
 // ── Size scale ── (`size`): the title and the block's rhythm scale together.
@@ -272,8 +279,8 @@
     font-size: 20px;
 }
 .page-header-sm .page-header-icon {
-    width: 34px;
-    height: 34px;
+    width: 49px;
+    height: 49px;
 }
 .page-header-lg {
     margin-bottom: 32px;
@@ -282,8 +289,8 @@
     font-size: 30px;
 }
 .page-header-lg .page-header-icon {
-    width: 48px;
-    height: 48px;
+    width: 63px;
+    height: 63px;
 }
 
 // ── Centre alignment ── (`align="center"`): for empty-state and wizard mastheads.
@@ -318,21 +325,18 @@
 // its actions stack, and the actions stretch to the full width rather than
 // crowding the title. Bootstrap's lg tier (991.98px), not an invented breakpoint.
 //
-// Selectors are DOUBLED (`.page-header-bar.page-header-bar`) on purpose. A media
-// query adds no specificity, so a consumer's own single-class rule — written later
-// in the cascade, as a consuming app's stylesheet always is — silently beats the
-// responsive rule and the layout never collapses. Doubling puts these at (0,2,0)
-// so they hold, while still leaving a consumer free to override deliberately.
+// The masthead bar is NOT stacked at a breakpoint. It wraps by CONTENT: `.page-header-bar`
+// carries `flex-wrap: wrap` and its actions `flex: none`, so the title and actions share one
+// row wherever they fit and the actions drop below only when the row genuinely can't hold both
+// — a hard `max-width: 991.98px` column-stack pushed the actions under the title even on a
+// 768px tablet that had ample room for them side by side.
+//
+// Selectors below are DOUBLED (`.field-row.field-row`) on purpose. A media query adds no
+// specificity, so a consumer's own single-class rule — written later in the cascade, as a
+// consuming app's stylesheet always is — silently beats the responsive rule and the layout
+// never collapses. Doubling puts these at (0,2,0) so they hold, while still leaving a consumer
+// free to override deliberately.
 @media (max-width: 991.98px) {
-    .page-header-bar.page-header-bar {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 12px;
-    }
-    .page-actions.page-actions {
-        flex-wrap: wrap;
-        width: 100%;
-    }
     // A two-up field row is too tight for a tablet column.
     .field-row.field-row,
     .field-row-3.field-row-3 {
@@ -422,6 +426,62 @@
     display: inline-block;
 }
 
+// Password-requirements checklist — the content of the popover AppInput (type="password" +
+// passwordRequirements) opens on focus. Rendered identically by React (a JSX <ul>) and Razor
+// (the same <ul> built in webority-ui.js), so both surfaces read the same. `.pw-popover` is the
+// custom class both put on Bootstrap's `.popover` panel.
+.pw-popover .popover-body {
+    padding: 12px 14px;
+}
+.pw-criteria {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.pw-criteria .pw-rule {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    line-height: 1.3;
+}
+// The state mark is a baked-colour circled ✓/✕ — matched to the AA status ramp. The list TEXT
+// uses the -text token for contrast; the mark itself needs less and uses the vivid ramp value.
+.pw-criteria .pw-mark {
+    flex: none;
+    width: 18px;
+    height: 18px;
+    background: center / contain no-repeat;
+}
+.pw-criteria .pw-rule-text {
+    min-width: 0;
+}
+.pw-criteria .pw-rule.met {
+    color: var(--color-success-text);
+}
+.pw-criteria .pw-rule.met .pw-mark {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317C653' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 2.5 2.5 5.5-6'/%3E%3C/svg%3E");
+}
+.pw-criteria .pw-rule.unmet {
+    color: var(--color-danger-text);
+}
+.pw-criteria .pw-rule.unmet .pw-mark {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8285A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6m0-6-6 6'/%3E%3C/svg%3E");
+}
+// The checklist opens with a PLAIN FADE only — no drop / zoom / scale. It opts out of the shared
+// menu-open motion (_menu-motion.scss animates every `.popover.show`) and lets Bootstrap's own
+// `.fade` opacity transition carry the fade in and out. Both surfaces render `.popover.pw-popover`
+// (React via react-bootstrap's Popover, Razor via Bootstrap's popover), so this makes the two
+// identical. Higher specificity than `.popover.show` so it wins regardless of partial load order.
+.popover.pw-popover.show {
+    animation: none;
+    scale: none;
+    translate: none;
+}
+
 // Page/system-level announcement bar (AppBanner / <app-banner>). Full-width and persistent —
 // distinct from an inline .alert or a transient toast. Tones reuse the shared soft/text ramp.
 .wui-banner {