@webority/theme 0.25.0 → 0.26.1

package/scss/wui/_shell-parts.scss

@@ -1,3 +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/_table-server.scss

@@ -1,3 +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;
+    }
+}