@webority/theme 0.24.0 → 0.26.0

package/scss/wui/_shell-parts.scss

@@ -0,0 +1,503 @@
+// Shell parts: notification bell, topbar search, phone tab bar, user menu.
+//
+// Part of the wui-components layer; imported after its base partial (see _wui-components.scss).
+// The same markup comes from React AppShell (userMenu / notifications / search / tab items) and
+// the Razor <app-shell-*> helpers. Every class here is wui-*; the frame classes it hangs off
+// (.app-shell, .app-topbar-start, .app-content, .app-footer) are the shell's own.
+//
+// Phone floor: every control here is at least 44px tall below 768px, and nothing that opens is
+// wider than the viewport less 24px.
+
+.app-shell {
+    // One height the tab bar, the content's bottom padding and the footer's offset agree on.
+    --wui-tabbar-h: 60px;
+}
+
+// ── Phone tab bar ───────────────────────────────────────────────────────────────────────────
+// Four destinations plus More (or five), fixed to the bottom below md. Above md the sidebar or
+// drawer carries the nav, so the bar is not rendered visible at all.
+.wui-tabbar {
+    display: none;
+}
+@include media-breakpoint-down(md) {
+    .wui-tabbar {
+        position: fixed;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: var(--wui-z-fixed);
+        display: grid;
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+        padding-bottom: env(safe-area-inset-bottom);
+        border-top: 1px solid var(--color-border);
+        background: var(--color-surface);
+    }
+    // The last content must scroll clear of the bar, and a footer sits on top of it.
+    .app-shell:has(> .wui-tabbar) .app-content {
+        padding-bottom: calc(var(--wui-tabbar-h) + 28px + env(safe-area-inset-bottom));
+    }
+    .app-shell:has(> .wui-tabbar) .app-footer {
+        bottom: calc(var(--wui-tabbar-h) + env(safe-area-inset-bottom));
+    }
+}
+.wui-tabbar-item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    min-width: 0;
+    min-height: var(--wui-tabbar-h);
+    padding: 6px 4px;
+    border: 0;
+    background: transparent;
+    font: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--color-text-muted);
+    text-decoration: none;
+    cursor: pointer;
+}
+.wui-tabbar-item:hover {
+    color: var(--color-text);
+    text-decoration: none;
+}
+.wui-tabbar-item.active {
+    color: var(--color-primary);
+    font-weight: 600;
+}
+.wui-tabbar-item:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -4px;
+    border-radius: var(--radius-lg);
+}
+.wui-tabbar-icon {
+    display: inline-grid;
+    place-items: center;
+}
+.wui-tabbar-label {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+// A count over the icon. Neutral by default, toned like the nav badge it mirrors (-text on -soft,
+// the 4.5:1 pairing the nav badge tones use).
+.wui-tabbar-badge {
+    position: absolute;
+    top: 6px;
+    left: calc(50% + 6px);
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: 999px;
+    background: var(--color-bg-muted);
+    color: var(--color-text-muted);
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 18px;
+    text-align: center;
+}
+.wui-tabbar-badge.tone-danger {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+}
+.wui-tabbar-badge.tone-success {
+    background: var(--color-success-soft);
+    color: var(--color-success-text);
+}
+.wui-tabbar-badge.tone-warning {
+    background: var(--color-warning-soft);
+    color: var(--color-warning-text);
+}
+
+// ── Topbar menus: shared card ───────────────────────────────────────────────────────────────
+// Both menus open with Bootstrap's static display (Razor data-bs-display="static"; React sets
+// data-bs-popper="static" while open), so placement is plain CSS: under the trigger, end-aligned.
+.wui-usermenu-menu,
+.wui-bell-menu {
+    top: calc(100% + 8px);
+    right: 0;
+    left: auto;
+    max-width: calc(100vw - 24px);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    background: var(--color-surface);
+    box-shadow: var(--shadow-overlay);
+}
+.wui-usermenu-menu .dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 44px;
+    border-radius: var(--radius-sm);
+    color: var(--color-text-body);
+    white-space: normal;
+}
+.wui-usermenu-menu .dropdown-item:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+.wui-usermenu-menu .dropdown-item.danger {
+    color: var(--color-danger-text);
+}
+
+// ── User menu ───────────────────────────────────────────────────────────────────────────────
+.wui-usermenu-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 44px;
+    padding: 4px 8px 4px 4px;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--color-text);
+    font: inherit;
+    cursor: pointer;
+}
+.wui-usermenu-trigger:hover {
+    background: var(--color-bg-muted);
+}
+.wui-usermenu-trigger:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+.wui-usermenu-text {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.2;
+    text-align: left;
+}
+.wui-usermenu-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text);
+}
+.wui-usermenu-role {
+    font-size: 12px;
+    color: var(--color-text-muted);
+}
+.wui-usermenu-caret {
+    color: var(--color-text-muted);
+}
+// Below xl the name and role give way to the avatar alone.
+@include media-breakpoint-down(xl) {
+    .wui-usermenu-text,
+    .wui-usermenu-caret {
+        display: none;
+    }
+    // The avatar alone is narrower than a touch target.
+    .wui-usermenu-trigger {
+        min-width: 44px;
+        justify-content: center;
+        padding: 4px;
+    }
+}
+.wui-usermenu-menu {
+    min-width: 260px;
+    padding: 8px;
+}
+.wui-usermenu-head {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 6px;
+    padding: 8px 8px 12px;
+    border-bottom: 1px solid var(--color-border);
+}
+.wui-usermenu-who {
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+.wui-usermenu-logout {
+    margin: 0;
+}
+.wui-usermenu-logout .dropdown-item {
+    width: 100%;
+    border: 0;
+    background: transparent;
+    text-align: left;
+}
+
+// ── Notification bell ───────────────────────────────────────────────────────────────────────
+.wui-bell-trigger {
+    position: relative;
+}
+// White on the strong danger fill, the avatar badge's pairing. Ringed in the surface colour so it
+// reads as sitting on the bell rather than touching it.
+.wui-bell-count {
+    position: absolute;
+    top: 2px;
+    right: 0;
+    box-sizing: content-box;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border: 2px solid var(--color-surface);
+    border-radius: 999px;
+    background: var(--color-danger-strong);
+    color: var(--wui-bg-light);
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 18px;
+    text-align: center;
+}
+.wui-bell-count[hidden] {
+    display: none;
+}
+.wui-bell-menu {
+    width: 360px;
+    padding: 0;
+    overflow: hidden;
+}
+.wui-bell-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 10px 16px;
+    border-bottom: 1px solid var(--color-border);
+}
+.wui-bell-title {
+    font-weight: 600;
+    color: var(--color-text);
+}
+.wui-bell-markall {
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+    padding: 0 4px;
+    border: 0;
+    background: none;
+    color: var(--color-primary);
+    font: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+}
+.wui-bell-markall:hover {
+    text-decoration: underline;
+}
+.wui-bell-markall:disabled {
+    opacity: 0.6;
+    cursor: default;
+}
+.wui-bell-list {
+    max-height: min(420px, 60vh);
+    overflow-y: auto;
+}
+.wui-bell-list[aria-busy="true"] {
+    opacity: 0.7;
+}
+.wui-bell-item {
+    display: flex;
+    gap: 12px;
+    min-height: 44px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--color-border-light);
+    color: var(--color-text-body);
+    text-decoration: none;
+}
+a.wui-bell-item:hover {
+    background: var(--color-bg-muted);
+    text-decoration: none;
+}
+.wui-bell-item:last-child {
+    border-bottom: 0;
+}
+.wui-bell-dot {
+    flex: none;
+    width: 8px;
+    height: 8px;
+    margin-top: 6px;
+    border-radius: 50%;
+    background: var(--color-primary);
+}
+.wui-bell-item-read .wui-bell-dot {
+    visibility: hidden;
+}
+.wui-bell-icon {
+    flex: none;
+    color: var(--color-text-subtle);
+}
+.wui-bell-body {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+.wui-bell-item-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text);
+    overflow-wrap: anywhere;
+}
+.wui-bell-item-read .wui-bell-item-title {
+    font-weight: 400;
+}
+.wui-bell-when {
+    font-size: 12px;
+    color: var(--color-text-muted);
+}
+.wui-bell-state {
+    padding: 20px 16px;
+    font-size: 14px;
+    color: var(--color-text-muted);
+    text-align: center;
+}
+.wui-bell-foot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 44px;
+    border-top: 1px solid var(--color-border);
+    color: var(--color-primary);
+    font-size: 14px;
+    font-weight: 500;
+    text-decoration: none;
+}
+.wui-bell-foot:hover {
+    background: var(--color-bg-muted);
+}
+// A 360px card would overflow a 375px phone: below md the panel is a sheet inset 12px, under the
+// 72px topbar.
+@include media-breakpoint-down(md) {
+    .wui-bell-menu {
+        position: fixed;
+        top: 72px;
+        right: 12px;
+        left: 12px;
+        width: auto;
+        max-width: none;
+    }
+    .wui-bell-list {
+        max-height: calc(100dvh - 72px - 12px - 120px);
+    }
+}
+
+// ── Topbar search ───────────────────────────────────────────────────────────────────────────
+// A field after the topbar-start content above md; an icon button that opens the field as a
+// full-width panel under the topbar below it.
+.app-topbar-start:has(> .wui-topsearch) {
+    flex: 1 1 auto;
+}
+.wui-topsearch {
+    position: relative;
+    width: min(380px, 38vw);
+}
+.wui-topsearch-open {
+    display: none;
+}
+.wui-topsearch-results {
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 0;
+    left: 0;
+    z-index: var(--wui-z-dropdown);
+    max-height: min(440px, 70vh);
+    padding: 6px;
+    overflow-y: auto;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    background: var(--color-surface);
+    box-shadow: var(--shadow-overlay);
+}
+.wui-topsearch-results[hidden] {
+    display: none;
+}
+.wui-topsearch-group + .wui-topsearch-group {
+    margin-top: 4px;
+    padding-top: 4px;
+    border-top: 1px solid var(--color-border-light);
+}
+.wui-topsearch-group-label {
+    padding: 6px 10px 4px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--color-text-subtle);
+}
+.wui-topsearch-hit {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 44px;
+    padding: 6px 10px;
+    border-radius: var(--radius-sm);
+    color: var(--color-text-body);
+    text-decoration: none;
+}
+.wui-topsearch-hit:hover,
+.wui-topsearch-hit.is-active {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+    text-decoration: none;
+}
+.wui-topsearch-hit-icon {
+    flex: none;
+    display: inline-grid;
+    place-items: center;
+    color: var(--color-text-subtle);
+}
+.wui-topsearch-hit-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+.wui-topsearch-hit-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text);
+    overflow-wrap: anywhere;
+}
+.wui-topsearch-hit-sub {
+    font-size: 12px;
+    color: var(--color-text-muted);
+}
+.wui-topsearch-all {
+    margin-top: 4px;
+    border-top: 1px solid var(--color-border-light);
+    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+}
+.wui-topsearch-empty {
+    padding: 14px 10px;
+    font-size: 14px;
+    color: var(--color-text-muted);
+}
+// While suggestions load, the leading glyph dims; the field stays usable.
+.wui-topsearch.is-loading .search-icon {
+    opacity: 0.5;
+}
+@include media-breakpoint-down(md) {
+    .wui-topsearch {
+        width: auto;
+        margin-left: auto;
+    }
+    .wui-topsearch-open {
+        display: inline-flex;
+    }
+    .wui-topsearch-panel {
+        display: none;
+    }
+    .wui-topsearch.is-open .wui-topsearch-panel {
+        position: fixed;
+        top: 72px;
+        right: 0;
+        left: 0;
+        z-index: var(--wui-z-dropdown);
+        display: block;
+        padding: 12px;
+        border-bottom: 1px solid var(--color-border);
+        background: var(--color-surface);
+        box-shadow: var(--shadow-overlay);
+    }
+    .wui-topsearch-results {
+        position: static;
+        max-height: calc(100dvh - 72px - 24px - 52px);
+        margin-top: 8px;
+        box-shadow: none;
+    }
+}

package/scss/wui/_shell.scss

@@ -736,6 +736,17 @@
     .app-shell.app-shell .app-topbar {
         padding-inline: 16px;
     }
+    .app-shell.app-shell .app-content {
+        padding-block: 16px 32px;
+    }
+}
+// Phones: the topbar's icon controls meet the 44px touch floor (36px is a pointer size).
+@include media-breakpoint-down(md) {
+    .app-shell.app-shell .app-topbar-menu,
+    .app-topbar .topbar-icon-btn {
+        width: 44px;
+        height: 44px;
+    }
 }
 // The scrim exists only while the drawer is open, and only below lg — it is
 // rendered unconditionally and made visible here so there is no JS breakpoint check.

package/scss/wui/_sortable.scss

@@ -0,0 +1,135 @@
+// ── Sortable list ──
+// AppSortableList / <app-sortable-list> / <wui-sortable>. The element moves the real items
+// while the person drags and shows a `.wui-sortable-ghost` copy under the pointer; everything
+// visual lives here.
+//
+// Part of the wui-components layer — see _wui-components.scss for load order.
+
+wui-sortable {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    // An empty list is still a drop target.
+    min-height: 44px;
+}
+wui-sortable[orientation="horizontal"] {
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.wui-sortable-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 12px 6px 6px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius);
+    corner-shape: squircle;
+    color: var(--color-text);
+    // Dragging a body text selection is never what a drag on an item means.
+    -webkit-user-select: none;
+    user-select: none;
+}
+// A pointer drag from the body starts on the item itself; touch scrolling stays on until the
+// press-and-hold promotes it, so only the handle opts out of the browser's panning.
+wui-sortable:not([handle]):not([disabled]) .wui-sortable-item:not([data-disabled]) {
+    cursor: grab;
+}
+wui-sortable[disabled] .wui-sortable-item,
+.wui-sortable-item[data-disabled] {
+    color: var(--color-text-muted);
+}
+
+.wui-sortable-handle {
+    display: grid;
+    place-items: center;
+    flex: none;
+    // 44px is the touch target; the glyph stays small inside it.
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    border: none;
+    border-radius: var(--wui-radius-sm);
+    background: transparent;
+    color: var(--color-text-subtle);
+    cursor: grab;
+    touch-action: none;
+    transition:
+        background-color 160ms var(--wui-ease-ui),
+        color 160ms var(--wui-ease-ui);
+}
+.wui-sortable-handle:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+.wui-sortable-handle:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+// Lifted by the keyboard.
+.wui-sortable-handle[aria-pressed="true"] {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+.wui-sortable-handle:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+    background: transparent;
+    color: var(--color-text-subtle);
+}
+
+.wui-sortable-body {
+    flex: 1 1 auto;
+    // Lets long content wrap instead of widening the list past a 375px phone.
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+// The real item, while its ghost is under the pointer: it marks where the drop would land.
+.wui-sortable-item.wui-sortable-dragging {
+    background: var(--color-primary-soft);
+    border-style: dashed;
+    border-color: var(--color-primary);
+    > * {
+        opacity: 0.35;
+    }
+}
+
+.wui-sortable-ghost {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--wui-z-tooltip, 1650);
+    margin: 0;
+    box-shadow: var(--wui-shadow-overlay);
+    pointer-events: none;
+    cursor: grabbing;
+}
+
+// While any drag runs, the whole page shows the grabbing cursor and does not select text.
+html.wui-sortable-active,
+html.wui-sortable-active * {
+    cursor: grabbing !important;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+// The aria-live announcement region: read by screen readers, never seen.
+.wui-sortable-live {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .wui-sortable-handle {
+        transition: none;
+    }
+}

package/scss/wui/_table-server.scss

@@ -0,0 +1,40 @@
+// Server-paged data table: loading, empty and error states, the busy dim and the server sort affordance.
+//
+// Part of the wui-components layer; imported after its base partial (see _wui-components.scss).
+//
+// `<app-data-table src>` wraps the usual `.table-wrap` in `.wui-table-server`; the rows, pager and
+// states are swapped in by the behaviour layer (ui-elements serverTable.js). The sortable header
+// (`th[data-sort-key]` gets `.sortable` and the `.sort-icon`) and the empty state
+// (`.tbl-empty-block`) reuse the client-side table rules in _data.scss unchanged.
+
+// While a page is in flight the current rows stay in place, dimmed, so the table does not jump;
+// they are not interactive until the new page lands.
+.wui-table-server > .table-wrap[aria-busy="true"] {
+    cursor: progress;
+}
+.wui-table-server > .table-wrap[aria-busy="true"] > .table > tbody {
+    opacity: 0.55;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+}
+
+// A failed fetch shows its message and Retry in the state block; the stale rows of the previous
+// page are hidden rather than left looking current.
+.wui-table-server > .table-wrap[data-wui-table-error] > .table > tbody {
+    display: none;
+}
+.wui-table-error .tbl-empty-icon {
+    color: var(--color-danger-text);
+    background: var(--color-danger-soft);
+}
+
+// The pager region exists from the first paint; an empty list has no pager to show.
+.wui-table-pager:empty {
+    display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .wui-table-server > .table-wrap[aria-busy="true"] > .table > tbody {
+        transition: none;
+    }
+}