@webority/theme 0.53.1 → 0.54.0

package/scss/wui/_menubar.scss

@@ -0,0 +1,110 @@
+// ── Menubar ──
+// AppMenubar / <app-menubar> (a <wui-menubar> element): an application menubar (File, Edit, View).
+// A top menu is a Bootstrap .dropdown-menu with .dropdown-item rows, so the look, the danger tone
+// and the icon treatment come from the shared dropdown styles; this partial adds the bar, the
+// triggers and the placement. The element shows a panel with [data-open] (never `.show`, which a
+// React re-render would reset). A top panel is placed by the element with position: fixed, so it
+// escapes any clipping ancestor; a submenu is absolute against its row and flips to the left at
+// the viewport edge through [data-side="start"]. Every colour is a theme token.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+wui-menubar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 2px;
+    min-width: 0;
+}
+
+.wui-menubar-trigger {
+    padding: 6px 10px;
+    border: 0;
+    border-radius: var(--wui-radius-sm);
+    background: transparent;
+    color: var(--color-text);
+    font: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &:hover,
+    &[aria-expanded="true"] {
+        background: var(--color-bg-muted);
+    }
+    &:focus-visible {
+        outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+        outline-offset: 1px;
+    }
+    &[aria-disabled="true"] {
+        background: transparent;
+        color: var(--color-text-subtle);
+        cursor: default;
+    }
+}
+
+.dropdown-menu.wui-menubar-panel {
+    position: fixed;
+    // Above a modal, like every other portalled menu (see --wui-z-* in _tokens.scss).
+    z-index: var(--wui-z-menu);
+    min-width: 14rem;
+    outline: none;
+    transform-origin: top left;
+
+    &[data-open] {
+        display: block;
+        animation: var(--wui-menu-anim) var(--wui-menu-anim-duration) var(--wui-menu-anim-ease);
+    }
+    &.drop-up {
+        --wui-menu-drop: 6px;
+
+        transform-origin: bottom left;
+    }
+
+    .dropdown-item:focus-visible {
+        outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+        outline-offset: var(--wui-focus-ring-inset);
+    }
+    // Listed but unchoosable: quiet, and no hover tint.
+    .dropdown-item[aria-disabled="true"] {
+        color: var(--color-text-subtle);
+        cursor: default;
+        background: transparent;
+    }
+    // The row whose submenu is open keeps its tint while focus is inside the submenu.
+    .dropdown-item[aria-expanded="true"] {
+        background: var(--color-bg-muted);
+    }
+}
+
+.wui-menubar-sub {
+    position: relative;
+}
+.dropdown-menu.wui-menubar-subpanel {
+    // The element sets --wui-menubar-sub-offset when the submenu would run past the bottom edge.
+    position: absolute;
+    top: calc(var(--wui-menubar-sub-offset, 0px) - 5px);
+    right: auto;
+    bottom: auto;
+    left: 100%;
+    transform-origin: top left;
+
+    &[data-side="start"] {
+        right: 100%;
+        left: auto;
+        transform-origin: top right;
+    }
+}
+// The submenu marker; a shortcut chip never sits on the same row.
+.wui-menubar-subtrigger > .wui-menubar-chevron {
+    flex: none;
+    margin-left: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dropdown-menu.wui-menubar-panel[data-open] {
+        animation: none;
+    }
+}

package/scss/wui/_navigation-menu.scss

@@ -0,0 +1,172 @@
+// ── Navigation menu ──
+// AppNavigationMenu / <app-navigation-menu> (a <wui-navigation-menu> element): a site's top
+// navigation. An entry is a link or a button that discloses a panel of links; the panel opens on
+// click and keyboard (never on hover) and the element marks it with [data-open] and, when it would
+// leave the viewport on the right, [data-align="end"]. From the md tier up the entries sit in a
+// row and a panel floats under its entry; below it the entries stack and a panel is part of the
+// page flow, so nothing is placed by script on a phone. Every colour is a theme token.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+wui-navigation-menu {
+    display: block;
+}
+
+.wui-nav-menu-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+.wui-nav-menu-item {
+    position: relative;
+}
+
+.wui-nav-menu-trigger,
+.wui-nav-menu-toplink {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    padding: 8px 12px;
+    border: 0;
+    border-radius: var(--wui-radius-sm);
+    background: transparent;
+    color: var(--color-text);
+    font: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.2;
+    text-align: start;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &:hover,
+    &[aria-expanded="true"] {
+        background: var(--color-bg-muted);
+        color: var(--color-text);
+    }
+    &:focus-visible {
+        outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+        outline-offset: 1px;
+    }
+    &[aria-current="page"] {
+        color: var(--color-primary-ink);
+    }
+}
+.wui-nav-menu-trigger > .wui-nav-menu-chevron {
+    flex: none;
+    margin-left: auto;
+    transition: rotate 150ms var(--wui-ease-out-quart);
+}
+.wui-nav-menu-trigger[aria-expanded="true"] > .wui-nav-menu-chevron {
+    rotate: 180deg;
+}
+
+.wui-nav-menu-panel {
+    display: none;
+    padding: 4px 0 4px 12px;
+
+    &[data-open] {
+        display: block;
+    }
+}
+.wui-nav-menu-links {
+    display: grid;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.wui-nav-menu-link {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 8px 10px;
+    border-radius: var(--wui-radius-sm);
+    color: var(--color-text);
+    text-decoration: none;
+
+    &:hover {
+        background: var(--color-bg-muted);
+        color: var(--color-text);
+    }
+    &:focus-visible {
+        outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+        outline-offset: var(--wui-focus-ring-inset);
+    }
+    &[aria-current="page"] .wui-nav-menu-link-label {
+        color: var(--color-primary-ink);
+    }
+    > .wui-icon {
+        flex: none;
+        margin-top: 2px;
+        color: var(--color-text-muted);
+    }
+}
+.wui-nav-menu-link-text {
+    display: grid;
+    gap: 2px;
+    min-width: 0;
+}
+.wui-nav-menu-link-label {
+    font-size: 14px;
+    font-weight: 600;
+}
+.wui-nav-menu-link-desc {
+    color: var(--color-text-muted);
+    font-size: 13px;
+    line-height: 1.4;
+}
+
+@include media-breakpoint-up(md) {
+    .wui-nav-menu-list {
+        flex-direction: row;
+        align-items: center;
+    }
+    .wui-nav-menu-trigger,
+    .wui-nav-menu-toplink {
+        width: auto;
+    }
+    .wui-nav-menu-trigger > .wui-nav-menu-chevron {
+        margin-left: 0;
+    }
+    .wui-nav-menu-panel {
+        position: absolute;
+        top: calc(100% + 6px);
+        left: 0;
+        z-index: var(--wui-z-dropdown);
+        width: max-content;
+        min-width: 16rem;
+        max-width: min(36rem, calc(100vw - 16px));
+        padding: 8px;
+        border: 1px solid var(--color-border);
+        border-radius: var(--wui-radius);
+        corner-shape: squircle;
+        background: var(--color-surface);
+        box-shadow: var(--wui-shadow-overlay);
+        transform-origin: top left;
+
+        &[data-open] {
+            animation: var(--wui-menu-anim) var(--wui-menu-anim-duration) var(--wui-menu-anim-ease);
+        }
+        &[data-align="end"] {
+            right: 0;
+            left: auto;
+            transform-origin: top right;
+        }
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .wui-nav-menu-panel[data-open] {
+        animation: none;
+    }
+    .wui-nav-menu-trigger > .wui-nav-menu-chevron {
+        transition: none;
+    }
+}

package/scss/wui/_navigation.scss

@@ -277,8 +277,8 @@
     pointer-events: none;
 }
 .app-tab:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
     border-radius: var(--radius-sm);
 }
 // A destructive tab reads as destructive whether or not it is the active one.
@@ -469,8 +469,8 @@
     height: var(--wui-tab-h, 0);
     transform: translateY(var(--wui-tab-y, 0));
     transition:
-        transform 0.42s var(--wui-ease-elastic),
-        height 0.42s var(--wui-ease-elastic),
+        transform 0.42s var(--wui-ease-out-quart),
+        height 0.42s var(--wui-ease-out-quart),
         opacity 0.15s ease;
 }
 // Vertical pills: the moving pill fills the row width.
@@ -499,14 +499,117 @@
     background: var(--color-bg-muted);
 }
 .app-tabs-scroll-btn:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 .app-tabs-wrap.is-overflow-start .app-tabs-scroll-btn.prev,
 .app-tabs-wrap.is-overflow-end .app-tabs-scroll-btn.next {
     display: inline-flex;
 }
 
+// ── Overflow menu (<wui-overflow>) — items that do not fit move into a "More" menu. ──
+// Used by AppTabs `overflow="menu"` and AppChipGroup `overflow="menu"`; the element hides an
+// item with [data-wui-overflow-hidden] and owns the More button and its menu.
+.wui-overflow {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    max-width: 100%;
+}
+.wui-overflow > [data-wui-overflow-list] {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+[data-wui-overflow-hidden] {
+    display: none !important;
+}
+.wui-overflow-more {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 28px;
+    padding: 0 10px;
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    background: var(--color-surface);
+    color: var(--color-text-muted);
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+}
+.wui-overflow-more[hidden],
+.wui-overflow-menu[hidden] {
+    display: none;
+}
+.wui-overflow-more::after {
+    content: "";
+    width: 6px;
+    height: 6px;
+    margin-top: -3px;
+    border-right: 1.5px solid currentColor;
+    border-bottom: 1.5px solid currentColor;
+    transform: rotate(45deg);
+}
+.wui-overflow-more:hover,
+.wui-overflow-more[aria-expanded="true"] {
+    color: var(--color-text);
+    background: var(--color-bg-muted);
+}
+.wui-overflow-more:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+.wui-overflow-menu {
+    z-index: var(--wui-z-dropdown);
+    display: flex;
+    flex-direction: column;
+    min-width: 160px;
+    max-width: min(320px, calc(100vw - 8px));
+    padding: 4px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    background: var(--color-surface);
+    box-shadow: var(--wui-shadow-overlay);
+}
+.wui-overflow-item {
+    display: block;
+    width: 100%;
+    padding: 8px 10px;
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--color-text);
+    font-family: inherit;
+    font-size: 14px;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+}
+.wui-overflow-item:hover,
+.wui-overflow-item:focus-visible {
+    background: var(--color-bg-muted);
+}
+// Inset: the menu scrolls, so an outer ring would be clipped at its edges.
+.wui-overflow-item:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
+}
+.wui-overflow-item[aria-checked="true"] {
+    color: var(--color-primary-ink);
+    font-weight: 600;
+}
+.wui-overflow-item[aria-disabled="true"] {
+    color: var(--color-text-subtle);
+    cursor: not-allowed;
+}
+
 // ── Motion off — no slide, no overshoot; the bar just fades in place. ──
 @media (prefers-reduced-motion: reduce) {
     .app-tab-indicator,

package/scss/wui/_notification-center.scss

@@ -0,0 +1,251 @@
+// ── Notification centre ──
+// AppNotificationCenter / <app-notification-center> (a <wui-notification-center> element): a bell
+// with an unread count that opens a panel of notifications grouped by day. The element shows the
+// panel from the host's [open] attribute, so a React re-render never resets it. Every colour,
+// radius and shadow is a theme token.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-notification-center {
+    position: relative;
+    display: inline-flex;
+}
+.wui-notification-center-trigger {
+    position: relative;
+}
+// White on the strong danger fill, ringed in the surface colour so it reads as sitting on the bell.
+.wui-notification-center-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(--color-progress-label);
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 18px;
+    text-align: center;
+    pointer-events: none;
+}
+.wui-notification-center-count[hidden] {
+    display: none;
+}
+
+// Read by screen readers, never seen: the count announcement and the "Unread: " prefix, which
+// the element finds by these names.
+.wui-notification-center-live,
+.wui-notification-center-unread-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+}
+
+.wui-notification-center-panel {
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 0;
+    z-index: var(--wui-z-dropdown);
+    display: none;
+    width: 380px;
+    max-width: calc(100vw - 24px);
+    overflow: hidden;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-lg);
+    background: var(--color-surface);
+    box-shadow: var(--wui-shadow-overlay);
+    // Focus lands on the panel itself when it opens; the controls inside carry the visible focus.
+    outline: none;
+    transform-origin: top right;
+}
+.wui-notification-center[open] > .wui-notification-center-panel {
+    display: block;
+    animation: var(--wui-menu-anim) var(--wui-menu-anim-duration) var(--wui-menu-anim-ease);
+}
+@media (prefers-reduced-motion: reduce) {
+    .wui-notification-center[open] > .wui-notification-center-panel {
+        animation: none;
+    }
+}
+
+.wui-notification-center-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 10px 16px;
+    border-bottom: 1px solid var(--color-border);
+}
+.wui-notification-center-title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--color-text);
+}
+.wui-notification-center-markall {
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+    padding: 0 4px;
+    border: 0;
+    border-radius: var(--wui-radius-sm);
+    background: none;
+    color: var(--color-primary-ink);
+    font: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+}
+.wui-notification-center-markall:hover {
+    text-decoration: underline;
+}
+.wui-notification-center-markall:disabled {
+    opacity: 0.6;
+    cursor: default;
+    text-decoration: none;
+}
+
+.wui-notification-center-list {
+    max-height: min(440px, 60vh);
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--wui-scrollbar) transparent;
+}
+.wui-notification-center-day {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    margin: 0;
+    padding: 8px 16px 6px;
+    background: var(--color-bg-muted);
+    color: var(--color-text-muted);
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+}
+.wui-notification-center-items {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+.wui-notification-center-item {
+    display: flex;
+    gap: 12px;
+    width: 100%;
+    min-height: 44px;
+    padding: 12px 16px;
+    border: 0;
+    border-bottom: 1px solid var(--color-border-light);
+    background: transparent;
+    color: var(--color-text-body);
+    font: inherit;
+    text-align: left;
+    text-decoration: none;
+    cursor: pointer;
+}
+.wui-notification-center-item:hover {
+    background: var(--color-bg-muted);
+    text-decoration: none;
+}
+.wui-notification-center-item:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
+}
+.wui-notification-center-items > li:last-child > .wui-notification-center-item {
+    border-bottom: 0;
+}
+.wui-notification-center-dot {
+    flex: none;
+    width: 8px;
+    height: 8px;
+    margin-top: 6px;
+    border-radius: 50%;
+    background: var(--color-primary);
+}
+.wui-notification-center-item-read .wui-notification-center-dot {
+    visibility: hidden;
+}
+.wui-notification-center-icon {
+    flex: none;
+    color: var(--color-text-subtle);
+}
+.wui-notification-center-body {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+.wui-notification-center-item-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text);
+    overflow-wrap: anywhere;
+}
+.wui-notification-center-item-read .wui-notification-center-item-title {
+    font-weight: 400;
+}
+.wui-notification-center-item-text {
+    font-size: 13px;
+    color: var(--color-text-muted);
+    overflow-wrap: anywhere;
+}
+.wui-notification-center-when {
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text-muted);
+}
+.wui-notification-center-empty {
+    margin: 0;
+    padding: 28px 16px;
+    font-size: 14px;
+    color: var(--color-text-muted);
+    text-align: center;
+}
+.wui-notification-center-foot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 44px;
+    border-top: 1px solid var(--color-border);
+    color: var(--color-primary-ink);
+    font-size: 14px;
+    font-weight: 500;
+    text-decoration: none;
+}
+.wui-notification-center-foot:hover {
+    background: var(--color-bg-muted);
+}
+.wui-notification-center-foot:focus-visible,
+.wui-notification-center-markall:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
+}
+
+// A 380px card would overflow a 375px phone: below md the panel is a sheet inset 12px.
+@include media-breakpoint-down(md) {
+    .wui-notification-center {
+        position: static;
+    }
+    .wui-notification-center-panel {
+        position: fixed;
+        top: 72px;
+        right: 12px;
+        left: 12px;
+        width: auto;
+        max-width: none;
+    }
+    .wui-notification-center-list {
+        max-height: calc(100dvh - 72px - 12px - 120px);
+    }
+}