@webority/theme 0.107.0 → 0.108.0

package/scss/wui/_data.scss

@@ -1,146 +1,11 @@
 // Prefer .wui-* for new chrome; legacy bare names here are frozen until a BREAKING rename.
-// Empty state, base table, ledger table + pagination.
+// Base table, ledger table, toolbar and filter bar. The empty state is in _empty-state.scss, the pager in _pagination.scss.
 //
 // Part of the wui-components layer — see _wui-components.scss for the whole
 // picture and the load order. Order within the layer is LOAD-BEARING: these
 // partials are a split of one stylesheet, not independent modules, so a rule
 // here may be overridden by a later partial. Never reorder the imports.
 
-// ── Empty state ──
-.empty-state {
-    text-align: center;
-    padding: 48px 24px;
-    color: var(--color-text-subtle);
-}
-.empty-state-title {
-    // Matches .tbl-empty-title, both in the sans face under every brand. A table's header hides
-    // in any .table-wrap whose empty block is visible.
-    font-size: 17px;
-    font-weight: 600;
-    line-height: 1.35;
-    color: var(--color-text);
-}
-.empty-state-message {
-    margin: 6px 0 0;
-    // Matches .tbl-empty-text.
-    font-size: 16px;
-    line-height: 1.5;
-    color: var(--color-text-muted);
-}
-.empty-state-action {
-    margin-top: 16px;
-}
-// Tighter scale for a widget/tile, as opposed to a full card or page.
-.empty-state-sm {
-    padding: 28px 16px;
-}
-.empty-state-sm .empty-state-title {
-    font-size: 14px;
-}
-.empty-state-sm .empty-state-message {
-    font-size: 12px;
-}
-.empty-state-icon {
-    width: 48px;
-    height: 48px;
-    border-radius: var(--wui-radius-lg);
-    background: var(--color-primary-soft);
-    color: var(--color-primary-text);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 14px;
-}
-
-// The empty state a DataTable renders in place of its rows. Distinct from
-// the card-level .empty-state above: a 50px primary-tinted disc, then a 32px
-// gap to the title and 12px to the subtitle.
-.tbl-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    padding: 40px 24px;
-}
-.tbl-empty-icon {
-    display: inline-grid;
-    place-items: center;
-    flex: none;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    color: var(--color-primary-text);
-    margin-bottom: 16px;
-}
-.tbl-empty-title {
-    font-size: 17px;
-    font-weight: 600;
-    line-height: 1.35;
-    color: var(--color-text);
-}
-.tbl-empty-text {
-    margin-top: 8px;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 1.5;
-    color: var(--color-text-muted);
-}
-// An action (e.g. "New assessment") sits under the subtitle when the caller
-// supplies one.
-.tbl-empty-action {
-    margin-top: 20px;
-}
-
-.wui-table-empty {
-    padding: 36px 24px;
-    text-align: center;
-    color: var(--color-text-muted);
-}
-// The empty state owns its own padding and is not a row you can act on — no
-// cell padding, no border, and no hover fill from .table / .table-ledger.
-.table td.wui-table-empty:has(> .tbl-empty),
-.table td.wui-table-empty:has(> .tbl-empty-plain) {
-    padding: 0;
-    border-bottom: 0;
-}
-// A plain-string empty (no `.tbl-empty` wrapper) — carries the padding the cell
-// used to own.
-.tbl-empty-plain {
-    padding: 36px 24px;
-    text-align: center;
-    color: var(--color-text-muted);
-}
-.table tbody tr:hover td.wui-table-empty:has(> .tbl-empty),
-.table-ledger tbody tr:hover td.wui-table-empty:has(> .tbl-empty) {
-    background: transparent;
-}
-// 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%;
-    // `.tbl-empty` / `.tbl-empty-plain` inside own the centring and padding.
-}
-// An empty list shows its empty state with no column headers above it.
-.table-wrap:has(> .tbl-empty-block:not([hidden])) > table > thead {
-    display: none;
-}
-
 // ── Table (base) ──
 // The shared data-table look, on the plain `.table` class Bootstrap already
 // gives every table. Without this a product's tables fall back to stock
@@ -231,7 +96,7 @@
     text-align: right;
 }
 
-// ── Table + pagination ──
+// ── Table ──
 // DataTable cell helpers
 .table-ledger .wui-cell-end,
 .table-ledger thead th.wui-cell-end {
@@ -681,171 +546,6 @@
     }
 }
 
-// Pagination footer: a "10 per page" menu beside the page buttons, flush under a table. No row
-// range and no total; the page buttons say where you are.
-.table-pagination {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 16px;
-    padding: 12px 16px;
-    border-top: 1px solid var(--color-border);
-    font-size: 13px;
-    color: var(--color-text-muted);
-    flex-wrap: wrap;
-}
-.tpg-rows {
-    display: inline-flex;
-    align-items: center;
-    white-space: nowrap;
-}
-.select.tpg-select {
-    width: auto;
-    min-width: 64px;
-    height: var(--wui-control-sm);
-    min-height: var(--wui-control-sm);
-    padding: 0 28px 0 12px;
-    font-size: 13px;
-    font-weight: 600;
-    border-radius: var(--wui-radius-md);
-    background-position: right 8px center;
-    background-size: 14px;
-}
-.tpg-range {
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--color-text-muted);
-}
-.tpg-nav {
-    display: inline-flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 4px;
-}
-.tpg-arrow {
-    display: grid;
-    place-items: center;
-    width: var(--wui-control-sm);
-    height: var(--wui-control-sm);
-    border: none;
-    background: transparent;
-    color: var(--color-text-muted);
-    border-radius: 50%;
-    cursor: pointer;
-    transition:
-        background 0.14s ease,
-        color 0.14s ease;
-}
-.tpg-arrow:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    color: var(--color-primary-text);
-}
-.tpg-arrow:focus-visible {
-    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
-    outline-offset: var(--wui-focus-ring-offset);
-}
-// Text-5 already reads as "unavailable" — no opacity dimming on top of it.
-.tpg-arrow:disabled {
-    color: var(--color-border-strong);
-    cursor: not-allowed;
-}
-
-// Numbered mode (mode="numbered") — windowed page buttons sitting between the prev/next
-// arrows in .tpg-nav, same 32px circular hit target as .tpg-arrow.
-.tpg-page {
-    display: grid;
-    place-items: center;
-    min-width: var(--wui-control-sm);
-    height: var(--wui-control-sm);
-    padding: 0 6px;
-    border: none;
-    background: transparent;
-    color: var(--color-text-muted);
-    border-radius: 50%;
-    font-size: 13px;
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-    text-decoration: none;
-    cursor: pointer;
-    transition:
-        background 0.14s ease,
-        color 0.14s ease;
-}
-.tpg-page:hover:not(.is-active) {
-    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    color: var(--color-primary-text);
-}
-.tpg-page:focus-visible {
-    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
-    outline-offset: var(--wui-focus-ring-offset);
-}
-.tpg-page.is-active {
-    background: var(--color-primary);
-    color: var(--color-on-primary);
-    cursor: default;
-}
-.tpg-ellipsis {
-    display: grid;
-    place-items: center;
-    min-width: 24px;
-    height: var(--wui-control-sm);
-    color: var(--color-text-subtle);
-    font-size: 13px;
-    user-select: none;
-}
-// A finger needs a 44px target: the pager's controls grow to the control height on a phone.
-@media (max-width: 575.98px) {
-    .select.tpg-select {
-        height: var(--wui-control-md);
-        min-height: var(--wui-control-md);
-    }
-    .tpg-arrow {
-        width: var(--wui-control-md);
-        height: var(--wui-control-md);
-    }
-    .tpg-page {
-        min-width: var(--wui-control-md);
-        height: var(--wui-control-md);
-    }
-    .tpg-ellipsis {
-        height: var(--wui-control-md);
-    }
-}
-
-// ── Standalone pagination (AppPagination) ──
-// Bootstrap's .pagination is already styled; these rules refine it for the common case
-// of a nav wrapper and ellipsis representation.
-.pagination-nav {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    max-width: 100%;
-}
-// Many pages wrap onto a second row rather than push past a phone screen.
-.pagination-nav .pagination {
-    flex-wrap: wrap;
-    justify-content: center;
-    row-gap: 4px;
-}
-.pagination-md {
-    // Default Bootstrap pagination size (no-op, but explicit for parallelism with sm)
-}
-.pagination-sm .page-link {
-    padding: 0.25rem 0.5rem;
-    font-size: 12px;
-}
-.page-ellipsis {
-    display: grid;
-    place-items: center;
-    min-width: 24px;
-    color: var(--color-text-subtle);
-    font-size: 13px;
-    user-select: none;
-}
-
 // Horizontal scroll guard + flush-fit inside a card. Wrapping the table here
 // also stops `.card > .table` header-corner rounding from applying mid-card.
 .table-wrap {

package/scss/wui/_dialog-motion.scss

@@ -0,0 +1,34 @@
+// ── Dialog open motion ──
+// Every Bootstrap modal (AppModal, the Ctrl+K palette and search, Razor <app-modal>, confirm
+// dialogs) opens with the same soft zoom the menus use: a fade in from 95% size, no bounce.
+// Like the menu motion it is a PRODUCT-LEVEL choice, set once on the root element:
+//
+//   <html>                                  soft zoom (default)
+//   <html data-wui-dialog-motion="slide">   Bootstrap's fade and slide down from the top
+//
+// The zoom animates the standalone `scale` property and drops Bootstrap's transform transition,
+// so the slide never runs underneath it. Close stays Bootstrap's own quick fade of the modal.
+// Side panels (offcanvas, drawers) keep their slide: they come from an edge by nature.
+//
+// Imported after menu-motion, whose wui-menu-zoom keyframes it reuses.
+
+:root {
+    --wui-dialog-anim: wui-menu-zoom;
+    --wui-dialog-anim-duration: 160ms;
+    --wui-dialog-anim-ease: var(--wui-ease-out);
+}
+
+:root:not([data-wui-dialog-motion="slide"]) .modal.fade .modal-dialog {
+    transform: none;
+    transition: none;
+}
+
+:root:not([data-wui-dialog-motion="slide"]) .modal.show .modal-dialog {
+    animation: var(--wui-dialog-anim) var(--wui-dialog-anim-duration) var(--wui-dialog-anim-ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    :root:not([data-wui-dialog-motion="slide"]) .modal.show .modal-dialog {
+        animation: none;
+    }
+}

package/scss/wui/_disclosure.scss

@@ -11,31 +11,31 @@
 // thing script does is toggle `.open`.
 //
 // Markup (identical on both surfaces):
-//   <div class="faq-list">
-//     <div class="faq-item">                     (+ .open when expanded)
-//       <button class="faq-q" aria-expanded>…<span class="faq-q-icon">…</span></button>
-//       <div class="faq-a-wrap"><div class="faq-a-inner">…</div></div>
+//   <div class="wui-accordion">
+//     <div class="wui-accordion-item">                     (+ .open when expanded)
+//       <button class="wui-accordion-trigger" aria-expanded>…<span class="wui-accordion-icon">…</span></button>
+//       <div class="wui-accordion-panel"><div class="wui-accordion-body">…</div></div>
 //     </div>
 //   </div>
-.faq-list {
+.wui-accordion {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }
-.faq-item {
+.wui-accordion-item {
     border: 1px solid var(--color-border);
     background: var(--color-surface);
     overflow: hidden;
     transition: border-color 0.15s ease;
     border-radius: var(--wui-field-md-radius);
 }
-.faq-item:hover:not(.open) {
+.wui-accordion-item:hover:not(.open) {
     border-color: var(--color-border-strong);
 }
-.faq-item.open {
+.wui-accordion-item.open {
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
-.faq-q {
+.wui-accordion-trigger {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -53,25 +53,25 @@
     cursor: pointer;
     transition: color 0.12s ease;
 }
-.faq-q:hover {
+.wui-accordion-trigger:hover {
     color: var(--color-primary-text);
 }
-.faq-q:focus-visible {
+.wui-accordion-trigger:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-inset);
 }
-.faq-item.open .faq-q {
+.wui-accordion-item.open .wui-accordion-trigger {
     color: var(--color-primary-text);
 }
 // Chevron rotates to point up when the pane is open.
-.faq-q-icon {
+.wui-accordion-icon {
     flex: none;
     display: grid;
     place-items: center;
     color: var(--color-text-subtle);
     transition: transform 0.2s var(--wui-ease-out);
 }
-.faq-item.open .faq-q-icon {
+.wui-accordion-item.open .wui-accordion-icon {
     transform: rotate(180deg);
     color: var(--color-primary-text);
 }
@@ -79,15 +79,15 @@
 // The animating track. `min-height: 0` on the inner element is required — a grid
 // item's default `min-height: auto` refuses to shrink below its content, which
 // would defeat the 0fr row entirely.
-.faq-a-wrap {
+.wui-accordion-panel {
     display: grid;
     grid-template-rows: 0fr;
     transition: grid-template-rows 0.28s var(--wui-ease-out);
 }
-.faq-item.open .faq-a-wrap {
+.wui-accordion-item.open .wui-accordion-panel {
     grid-template-rows: 1fr;
 }
-.faq-a-inner {
+.wui-accordion-body {
     min-height: 0;
     overflow: hidden;
     // Horizontal padding is CONSTANT in both states. Toggling it with `.open` made the content
@@ -100,23 +100,23 @@
     line-height: 1.6;
     color: var(--color-text-muted);
 }
-.faq-a-inner > :first-child {
+.wui-accordion-body > :first-child {
     margin-top: 0;
 }
-.faq-item.open .faq-a-inner {
+.wui-accordion-item.open .wui-accordion-body {
     padding-bottom: 16px;
 }
 
 // Flat: a text toggle with a leading chevron, for a section header rather than a card.
-.faq-list.wui-accordion-flat {
+.wui-accordion.wui-accordion-flat {
     gap: 0;
 }
-.faq-list.wui-accordion-flat .faq-item {
+.wui-accordion.wui-accordion-flat .wui-accordion-item {
     border: 0;
     background: none;
     box-shadow: none;
 }
-.faq-list.wui-accordion-flat .faq-q {
+.wui-accordion.wui-accordion-flat .wui-accordion-trigger {
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -128,10 +128,10 @@
     color: var(--color-text-muted);
     background: none;
 }
-.faq-list.wui-accordion-flat .faq-q-icon {
+.wui-accordion.wui-accordion-flat .wui-accordion-icon {
     transform: rotate(-90deg);
 }
-.faq-list.wui-accordion-flat .faq-item.open .faq-q-icon {
+.wui-accordion.wui-accordion-flat .wui-accordion-item.open .wui-accordion-icon {
     transform: none;
 }
 
@@ -147,9 +147,9 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .faq-a-wrap,
-    .faq-q-icon,
-    .faq-item {
+    .wui-accordion-panel,
+    .wui-accordion-icon,
+    .wui-accordion-item {
         transition: none;
     }
 }