@webority/theme 0.9.9 → 0.9.11

package/package.json

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

@@ -112,40 +112,17 @@
 .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) {
-    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;
-}
+// Empty state sizes exactly like a POPULATED table — a standard responsive table. It fills
+// its container (base `.table { width: 100% }`), so the columns spread to use the width; when
+// the container is too narrow the columns compress as far as they can, and once even their
+// content can't fit, `.table-wrap` (base `overflow-x: auto`) scrolls horizontally rather than
+// clipping — every header label reads in full, never ellipsis-truncated into "REFEREN…".
+//
+// So the empty state carries NO special width rule of its own: the base table layout already
+// gives responsive-then-scroll. We deliberately do NOT pin the message to the viewport with
+// `container-type` + `100cqw` (it forced the colSpan cell, and the whole table, up to the panel
+// width), and we do NOT shrink the table to `width: auto` (that collapsed the columns). Only the
+// cell reset above (no padding/border/hover) is empty-specific.
 
 // ── Table (base) ──
 // The shared data-table look, on the plain `.table` class Bootstrap already
@@ -300,8 +277,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/_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/_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.
@@ -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.
@@ -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 {