@webority/theme 0.53.1 → 0.54.0

package/scss/wui/_interaction.scss

@@ -0,0 +1,286 @@
+// ── Focus ring and pressed state ──
+// The one keyboard focus ring and the one pressed wash, for every control the library draws.
+// The recipe is tokens in _wui-aliases.scss: an outline of --wui-focus-ring-width in
+// --color-focus-ring at --wui-focus-ring-offset (--wui-focus-ring-inset inside a scroller), and
+// --color-pressed-overlay laid over the control's own fill. A component partial keeps its own
+// :focus-visible rule only to place the ring (offset, radius, which box carries it).
+//
+// Part of the wui-components layer, imported last so its pressed rules settle ties with the
+// hover rules of the partials above.
+
+// ---- Default ring -----------------------------------------------------------
+// Anything focusable that no partial styles gets the shared ring instead of the browser's.
+// Zero specificity, so every component rule (including a panel's deliberate `outline: none`)
+// still wins. Text fields are left out: they get the field edge below.
+:where(
+    a[href],
+    area[href],
+    button,
+    summary,
+    input[type="checkbox"],
+    input[type="radio"],
+    input[type="range"],
+    [role="button"],
+    [role="link"],
+    [role="tab"],
+    [role="menuitem"],
+    [role="menuitemcheckbox"],
+    [role="menuitemradio"],
+    [role="option"],
+    [role="treeitem"],
+    [role="switch"],
+    [role="checkbox"],
+    [role="radio"],
+    [role="slider"],
+    [tabindex]:not([tabindex="-1"])
+):where(:focus-visible) {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+
+// ---- Bootstrap controls -----------------------------------------------------
+// Bootstrap rings a button with a 50% primary box-shadow, under 3:1 on white, and repaints it
+// on toggled and checked buttons. The shared outline replaces it; its offset leaves a real gap,
+// so the ring reads beside a solid fill and on whatever surface is behind the button.
+.btn {
+    --bs-btn-focus-box-shadow: 0 0 #0000;
+}
+.btn:focus-visible,
+.btn-check:focus-visible + .btn {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+
+// Bootstrap rings the close button on any :focus, a mouse click included.
+.btn-close {
+    --bs-btn-close-focus-shadow: 0 0 #0000;
+}
+.btn-close:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+
+.pagination {
+    --bs-pagination-focus-box-shadow: 0 0 #0000;
+}
+.page-link:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+
+// A menu row showed focus only as the soft hover tint (about 1.2:1). Inset, because the menu
+// scrolls and would clip an outer ring.
+.dropdown-item:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
+}
+
+// ---- Not obscured (WCAG 2.4.11) ---------------------------------------------
+// A control focused by Tab scrolls clear of the sticky shell topbar (72px) and a sticky form
+// footer (AppFormActions sticky, about 78px), not under them.
+html:has(.app-shell .app-topbar) {
+    scroll-padding-top: 88px;
+}
+html:has(.form-actions-sticky) {
+    scroll-padding-bottom: 96px;
+}
+// A modal or drawer body scrolls on its own, so the document's padding does not reach a sticky
+// footer inside it.
+:is(.wui-modal-body, .modal-body, .wui-drawer-body):has(.form-actions-sticky) {
+    scroll-padding-bottom: 96px;
+}
+
+// ---- Text fields --------------------------------------------------------------
+// A field's focus cue is its edge: the 1px border plus an outline of the rest of
+// --wui-focus-ring-width right outside it, so the edge reads 2px and nothing shifts. Each
+// selector repeats its partial's focus rule at the same specificity, so an invalid field's own
+// border colour still wins and only the outer edge is added. The open state of a picker counts:
+// focus has moved into its pop-up, but the field still reads as the one being edited.
+.form-control:focus,
+.form-select:focus,
+.input:focus,
+.select:focus,
+.textarea:focus,
+.search-select-control:focus-within,
+.search-select-control.open,
+.search-select-search:focus-within,
+.datepicker.open .datepicker-trigger,
+.daterange.open .daterange-trigger,
+.timepicker.open .timepicker-trigger,
+.input-affixed:focus-within,
+.input-with-unit:focus-within,
+.num-wrap:focus-within,
+.app-phone-number-input .phone-input-wrap:focus-within,
+.wui-input-group:focus-within,
+.otp-slot.active,
+.dropdown-search-input:focus,
+.file-input:not(.has-files):focus-within,
+.wui-rich-text-shell:focus-within,
+.wui-rich-text-link-input:focus,
+.workspace-switcher-trigger:focus-visible,
+.workspace-switcher-trigger[aria-expanded="true"] {
+    outline: calc(var(--wui-focus-ring-width) - 1px) solid var(--color-focus-ring);
+    outline-offset: 0;
+}
+// A control inside a wrapper that draws the border leaves the edge to the wrapper, and a bare
+// input has no edge.
+.input-bare:focus,
+:is(.input-affixed, .input-with-unit, .num-wrap, .phone-input-wrap, .wui-input-group) :is(.form-control, .input, .textarea, .num-input):focus {
+    outline: none;
+}
+
+// ---- Active option in a pop-up list --------------------------------------------
+// Search results, the country list, select and autocomplete options, mentions and the command
+// palette keep focus in their input and mark the keyboard's row (aria-activedescendant) with
+// the hover tint alone, about 1.2:1. The inset ring makes that row plain; inset, because the
+// list scrolls and would clip an outer ring.
+.wui-topsearch-hit.is-active,
+.country-dropdown-item.is-active,
+.search-select-option.is-active,
+.wui-mention-option.is-active,
+.wui-cmd-item[aria-selected="true"] {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
+}
+
+// ---- Pressed ----------------------------------------------------------------
+// One step deeper than hover: the control's own ink at 12% over whatever fill it has, on a
+// solid fill and a transparent one, in both themes. It is a colour change, so it needs no
+// reduced-motion variant. !important because pressing always happens under the pointer, so a
+// more specific hover rule's `background` shorthand would otherwise reset the wash.
+// Buttons (.btn) keep Bootstrap's active fill. Controls drawn by a background image (checkbox,
+// switch, Bootstrap's close glyph) are not in this list.
+:is(
+    .u-action,
+    .pw-toggle,
+    .input-clear,
+    .num-btn,
+    .num-stepper-btns button,
+    .search-clear,
+    .search-select-clear,
+    .search-select-reset,
+    button.wui-input-leading,
+    button.wui-input-trailing,
+    .country-toggle,
+    .wui-timepicker-toggle,
+    .datepicker-nav-btn,
+    button.datepicker-month,
+    .datepicker-day,
+    .datepicker-cell,
+    .wui-daterange-preset,
+    .timepicker-option,
+    .wui-calendar-nav-btn,
+    .wui-calendar-today-btn,
+    .wui-calendar-view-btn,
+    .app-tabs-scroll-btn,
+    .wui-overflow-more,
+    .wui-overflow-item,
+    .app-sidebar-toggle,
+    .topbar-icon-btn,
+    .infotip-btn,
+    .wui-dropdown-trigger,
+    .wui-banner-dismiss,
+    .alert-dismissible .btn-close,
+    .wui-modal-close,
+    .wui-drawer-close,
+    .wui-toast-action,
+    .wui-shortcut-close,
+    .wui-shortcut-toggle,
+    .wui-sortable-handle,
+    .wui-crop-toolbtn,
+    .wui-crop-zoombtn,
+    .wui-file-viewer-zoom,
+    .wui-rich-text-button,
+    .wui-rich-text-link-apply,
+    .wui-rich-text-link-cancel,
+    .wui-rich-text-link-remove,
+    .wui-kanban-action,
+    .wui-kanban-collapse,
+    .wui-kanban-more,
+    .wui-comment-action,
+    .wui-reaction-add,
+    .wui-reaction-choice,
+    button.wui-reaction,
+    .wui-cmd-back,
+    button.wui-cmd-crumb,
+    .wui-code-copy,
+    .wui-notification-center-markall,
+    .wui-notification-center-foot,
+    .wui-bell-markall,
+    .wui-bell-foot,
+    .wui-onboarding-toggle,
+    .wui-onboarding-restore,
+    .attach-remove,
+    .attach-item-remove,
+    .file-preview-remove,
+    .set-uploader-remove,
+    .chip-remove,
+    .repeater-remove,
+    .wui-usermenu-trigger,
+    .workspace-switcher-trigger,
+    .workspace-switcher-create,
+    .workspace-switcher-footer-action,
+    .wui-carousel-arrow,
+    .wui-carousel-pause,
+    .wui-menubar-trigger,
+    .wui-nav-menu-trigger,
+    .wui-expand-toggle,
+    .wui-group-toggle,
+    .tpg-arrow,
+    .tpg-page,
+    .page-link,
+    .dropdown-item,
+    .country-dropdown-item,
+    .search-select-option,
+    .wui-tree-row,
+    .wui-split-link,
+    .wui-topsearch-hit,
+    a.wui-bell-item,
+    .wui-notification-center-item,
+    .workspace-switcher-option,
+    .app-nav-item,
+    .wui-tabbar-item,
+    .dock-item,
+    .toolbar-item,
+    .toolbar-action,
+    .app-tab,
+    .segmented-option,
+    .choice-chip,
+    .chip-clickable,
+    .faq-q,
+    .wui-chart-legend-item,
+    .wui-column-menu-item,
+    .wui-nav-menu-link,
+    .wui-nav-menu-toplink,
+    .wui-whats-new-link,
+    a.wui-onboarding-label,
+    .wui-inline-edit-display,
+    .table th.sortable,
+    .wui-lightbox-item,
+    .card-clickable,
+    .res-card,
+    a.kpi,
+    a.info-row,
+    .struct-card,
+    .avatar-clickable,
+    .attach-drop,
+    .logo-dropzone,
+    .wui-rating-input .wui-rating-star
+):active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}
+
+// Glyph-only controls have little fill for the wash to show on: the glyph itself answers.
+// No transform on the close button: an alert positions its close with one.
+.btn-close:active:not(:disabled) {
+    opacity: 1;
+}
+.wui-carousel-dot:active::before {
+    background: var(--color-text);
+}
+@media (prefers-reduced-motion: no-preference) {
+    .wui-rating-input:not([disabled]) .wui-rating-star:active {
+        transform: scale(var(--wui-press-scale));
+        transition: transform var(--wui-press-duration) ease-out;
+    }
+}

package/scss/wui/_kanban.scss

@@ -196,8 +196,8 @@
 .wui-kanban-collapse:focus-visible,
 .wui-kanban-action:focus-visible,
 .wui-kanban-switch: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);
 }
 @media (pointer: coarse) {
     .wui-kanban-collapse,
@@ -257,8 +257,8 @@
     border-color: var(--color-border-strong);
 }
 .wui-kanban-card: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);
 }
 .wui-kanban-card[hidden],
 .wui-kanban-card[data-wui-overflow] {
@@ -301,8 +301,8 @@
     color: var(--color-text);
 }
 .wui-kanban-more: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);
 }
 @media (pointer: coarse) {
     .wui-kanban-more {

package/scss/wui/_lightbox.scss

@@ -0,0 +1,169 @@
+// ── Lightbox ──
+// AppLightbox / <app-lightbox> (a <wui-lightbox> element): a gallery of thumbnails that open
+// full screen with zoom, previous and next, a caption and a download. The element builds the
+// dialog inside itself, so a lightbox opened from a modal stays inside that modal's focus trap.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-lightbox {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+.wui-lightbox-item {
+    display: block;
+    flex: 0 0 auto;
+    width: 112px;
+    aspect-ratio: 4 / 3;
+    overflow: hidden;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius);
+    background: var(--color-bg-muted);
+    cursor: zoom-in;
+    img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+    &:hover {
+        border-color: var(--color-border-strong);
+    }
+    &:focus-visible {
+        outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+        outline-offset: var(--wui-focus-ring-offset);
+    }
+}
+
+// Above a modal (so a gallery in a dialog opens over it), below menus and tooltips.
+.wui-lightbox-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--wui-z-tour);
+    display: flex;
+    flex-direction: column;
+    background: var(--color-scrim-strong);
+    color: var(--color-on-scrim);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    &:focus {
+        outline: none;
+    }
+}
+@media (prefers-reduced-motion: no-preference) {
+    .wui-lightbox-overlay {
+        animation: wui-lightbox-in 160ms var(--wui-ease-out-quart);
+    }
+    .wui-lightbox-image {
+        transition: transform 120ms var(--wui-ease-out-quart);
+    }
+    .wui-lightbox-stage.is-dragging .wui-lightbox-image {
+        transition: none;
+    }
+}
+@keyframes wui-lightbox-in {
+    from {
+        opacity: 0;
+    }
+}
+
+.wui-lightbox-bar {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 8px 12px;
+}
+.wui-lightbox-count {
+    font-size: 14px;
+    font-variant-numeric: tabular-nums;
+}
+.wui-lightbox-tools {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+.wui-lightbox-btn.u-action {
+    color: var(--color-on-scrim);
+    &:hover:not(:disabled) {
+        background: color-mix(in srgb, var(--color-on-scrim) 16%, transparent);
+        color: var(--color-on-scrim);
+    }
+    &:focus-visible {
+        outline: var(--wui-focus-ring-width) solid var(--color-on-scrim);
+        outline-offset: var(--wui-focus-ring-offset);
+    }
+    &:disabled {
+        opacity: 0.4;
+    }
+}
+
+.wui-lightbox-stage {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    // The element handles every gesture itself (swipe, pinch, pan); the browser must not scroll or zoom the page.
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+    &.wui-lightbox-zoomed {
+        cursor: grab;
+    }
+}
+.wui-lightbox-image {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    transform-origin: center;
+    &[hidden] {
+        display: none;
+    }
+}
+.wui-lightbox-status {
+    margin: 0;
+    padding: 0 24px;
+    text-align: center;
+    &:empty {
+        display: none;
+    }
+}
+.wui-lightbox-nav.u-action {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: color-mix(in srgb, var(--color-scrim-strong) 70%, transparent);
+    &[hidden] {
+        display: none;
+    }
+}
+.wui-lightbox-prev {
+    left: 12px;
+}
+.wui-lightbox-next {
+    right: 12px;
+}
+.wui-lightbox-caption {
+    flex: 0 0 auto;
+    margin: 0;
+    padding: 12px 64px 20px;
+    text-align: center;
+    font-size: 14px;
+    &[hidden] {
+        display: none;
+    }
+}
+
+// A phone swipes between images and has little width to spare.
+@media (max-width: 575.98px) {
+    .wui-lightbox-item {
+        width: calc(33.333% - 6px);
+    }
+    .wui-lightbox-caption {
+        padding-inline: 16px;
+    }
+}

package/scss/wui/_media.scss

@@ -151,8 +151,8 @@
     transform: scale(1.06);
 }
 .avatar-clickable: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);
 }
 
 // ── Presence status ── (`status`): a dot at the lower-right, ringed in the surface
@@ -317,8 +317,8 @@
 .attach-drop:has(+ input:focus-visible) {
     border-color: var(--color-primary);
     background: var(--color-primary-soft);
-    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);
 }
 .attach-drop-icon {
     flex: 0 0 auto;
@@ -1210,7 +1210,10 @@
 .logo-dropzone:focus-visible {
     border-color: var(--color-primary);
     background: var(--color-primary-soft);
-    outline: none;
+}
+.logo-dropzone:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 .logo-dropzone.has-image {
     border-style: solid;

package/scss/wui/_mention-input.scss

@@ -0,0 +1,88 @@
+// ── Mention input ──
+// AppMentionInput / <app-mention-input> / <wui-mention-input>, also the boxes of a comment thread.
+// A textarea where "@" opens a fixed list of people under the box, placed by the element
+// (anchorOverlay) so it escapes a scrolling card or dialog.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-mention-input {
+    display: block;
+    min-width: 0;
+}
+.wui-mention-input-text {
+    width: 100%;
+    resize: vertical;
+}
+
+.wui-mention-menu {
+    position: fixed;
+    z-index: var(--wui-z-menu);
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 240px;
+    max-width: min(360px, calc(100vw - 8px));
+    max-height: 300px;
+    overflow-y: auto;
+    padding: 4px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    corner-shape: squircle;
+    box-shadow: var(--shadow-overlay);
+}
+.wui-mention-menu[hidden] {
+    display: none;
+}
+
+.wui-mention-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    border-radius: var(--radius);
+    corner-shape: squircle;
+    color: var(--color-text);
+    cursor: pointer;
+}
+// The active row is the element's, not :hover, so keys and pointer agree on one row.
+.wui-mention-option.is-active {
+    background: var(--color-primary-soft);
+    color: var(--color-primary-ink);
+}
+.wui-mention-option-photo {
+    flex: none;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+.wui-mention-option-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+.wui-mention-option-label,
+.wui-mention-option-description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.wui-mention-option-description {
+    font-size: 12px;
+    color: var(--color-text-muted);
+}
+.wui-mention-option.is-active .wui-mention-option-description {
+    color: inherit;
+}
+.wui-mention-empty {
+    padding: 8px 12px;
+    font-size: 13px;
+    color: var(--color-text-muted);
+}
+
+@media (pointer: coarse) {
+    .wui-mention-option {
+        min-height: 44px;
+    }
+}