@webority/theme 0.76.0 → 0.77.0

package/scss/wui/_interaction.scss

@@ -90,25 +90,14 @@ html:has(.form-actions-sticky) {
     scroll-padding-bottom: 96px;
 }
 
-// ---- Workspace switcher trigger ------------------------------------------------
-// A button styled like a field: its soft focus border alone is under 3:1, so keyboard focus
-// adds the outline right outside it. Form fields keep the soft border without an outline.
-.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;
-}
-
 // ---- Active option in a pop-up list --------------------------------------------
-// Search results, the country list, 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. Select and autocomplete options draw their own
-// light edge in _choice.scss.
+// Search results, the country list and mentions 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. Select and
+// autocomplete options draw their own light edge in _choice.scss.
 .wui-topsearch-hit.is-active,
 .country-dropdown-item.is-active,
-.wui-mention-option.is-active,
-.wui-cmd-item[aria-selected="true"] {
+.wui-mention-option.is-active {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-inset);
 }
@@ -119,7 +108,8 @@ html:has(.form-actions-sticky) {
 // 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.
+// switch, Bootstrap's close glyph) are not in this list. The on-demand widget partials restate
+// this rule for their own controls, so the wash ships with the layer that draws them.
 :is(
     .u-action,
     .pw-toggle,
@@ -139,9 +129,6 @@ html:has(.form-actions-sticky) {
     .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,
@@ -157,22 +144,10 @@ html:has(.form-actions-sticky) {
     .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,
@@ -187,9 +162,6 @@ html:has(.form-actions-sticky) {
     .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,
@@ -202,15 +174,12 @@ html:has(.form-actions-sticky) {
     .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,
@@ -254,3 +223,24 @@ html:has(.form-actions-sticky) {
         transition: transform var(--wui-press-duration) ease-out;
     }
 }
+
+// Phone touch targets
+// Below sm the pointer is a finger: every small control the library draws reaches 44px.
+@media (max-width: 575.98px) {
+    .btn-sm,
+    .btn-group-sm > .btn {
+        min-height: 44px;
+    }
+    .topbar-icon-btn,
+    .app-tabs-scroll-btn,
+    .select.tpg-select {
+        min-height: 44px;
+    }
+    .topbar-icon-btn,
+    .app-tabs-scroll-btn {
+        min-width: 44px;
+    }
+    wui-select[compact] .search-select-control {
+        min-height: 44px;
+    }
+}

package/scss/wui/_kanban.scss

@@ -653,3 +653,8 @@
         background: var(--color-primary);
     }
 }
+
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+:is(.wui-kanban-action, .wui-kanban-collapse, .wui-kanban-more):active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}

package/scss/wui/_media.scss

@@ -127,8 +127,9 @@
     height: 16px;
     padding: 0 4px;
     border-radius: 999px;
-    background: var(--color-danger);
-    color: var(--wui-bg-light);
+    // The pairing .wui-bell-count uses (_shell-parts.scss): it clears contrast in light and dark.
+    background: var(--color-danger-strong);
+    color: var(--color-progress-label);
     font-size: 10px;
     font-weight: 700;
     line-height: 1;

package/scss/wui/_rich-text.scss

@@ -9,6 +9,11 @@ wui-rich-text {
     display: block;
     min-width: 0;
 }
+// Inside a form field's flex column it would size to its content, so it stretches to the field.
+.field > wui-rich-text {
+    align-self: stretch;
+    width: 100%;
+}
 // Until the editor's own script has run, the field shows its starting value in a plain box.
 wui-rich-text:not(:defined) > textarea {
     display: block;
@@ -114,6 +119,12 @@ wui-rich-text[readonly] .wui-rich-text-shell {
     font-weight: 600;
     line-height: 1;
 }
+.wui-rich-text-glyph-bold {
+    font-weight: 700;
+}
+.wui-rich-text-glyph-italic {
+    font-style: italic;
+}
 
 // ── Link box ──
 .wui-rich-text-linkbar {
@@ -279,3 +290,13 @@ wui-rich-text[readonly] .wui-rich-text-prose {
         transition: none;
     }
 }
+
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+:is(
+    .wui-rich-text-button,
+    .wui-rich-text-link-apply,
+    .wui-rich-text-link-cancel,
+    .wui-rich-text-link-remove
+):active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}

package/scss/wui/_shell.scss

@@ -573,6 +573,11 @@
     padding-left: calc(46px + (var(--wui-nav-depth, 1) - 1) * 16px);
     font-size: 13px;
 }
+@for $n from 2 through 6 {
+    .wui-nav-depth-#{$n} {
+        --wui-nav-depth: #{$n};
+    }
+}
 // A sub-item label wraps to two lines before it is cut, so a long child label stays readable.
 // Top-level labels keep the single-line ellipsis.
 .app-nav-subitem .app-nav-text {
@@ -735,7 +740,7 @@
 .app-topbar {
     position: sticky;
     top: 0;
-    z-index: 10;
+    z-index: var(--wui-z-sticky);
     display: flex;
     align-items: center;
     justify-content: space-between;

package/scss/wui/_table-server.scss

@@ -18,6 +18,11 @@
     pointer-events: none;
     transition: opacity 0.15s ease;
 }
+.wui-skeleton-cell {
+    display: block;
+    height: 0.9rem;
+    border-radius: 0.25rem;
+}
 
 // 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.

package/scss/wui/_tree.scss

@@ -122,3 +122,8 @@ wui-tree {
         animation-duration: 2s;
     }
 }
+
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+.wui-tree-row:active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}

package/scss/wui/_utilities.scss

@@ -12,6 +12,7 @@
 .wui-icon {
     display: inline-block;
     flex-shrink: 0;
+    vertical-align: -.125em;
 }
 
 // ── Grid / layout utils ──

package/scss/wui/_workspace.scss

@@ -41,13 +41,25 @@
 .workspace-switcher-trigger:hover:not(:focus):not([aria-expanded="true"]) {
     border-color: var(--color-border-strong);
 }
+// A button styled like a field: its soft focus border alone is under 3:1, so keyboard focus
+// adds the outline right outside it. Form fields keep the soft border without an outline.
 .workspace-switcher-trigger:focus-visible,
 .workspace-switcher-trigger[aria-expanded="true"] {
-    outline: none;
+    outline: calc(var(--wui-focus-ring-width) - 1px) solid var(--color-focus-ring);
+    outline-offset: 0;
     background: var(--color-surface);
     border-color: var(--color-focus-border);
     box-shadow: none;
 }
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+:is(
+    .workspace-switcher-trigger,
+    .workspace-switcher-create,
+    .workspace-switcher-footer-action,
+    .workspace-switcher-option
+):active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}
 .workspace-switcher-trigger.is-compact {
     width: 40px;
     min-height: 40px;
@@ -382,3 +394,12 @@
         transition: none;
     }
 }
+
+// Phone touch targets
+// Below sm the pointer is a finger: every small control the library draws reaches 44px.
+@media (max-width: 575.98px) {
+    .workspace-switcher-trigger.is-compact {
+        min-width: 44px;
+        min-height: 44px;
+    }
+}