@webority/theme 0.53.1 → 0.54.0

package/scss/wui/_code-block.scss

@@ -0,0 +1,138 @@
+// ── Code block ──
+// AppCodeBlock / <app-code-block> (a <wui-code-block> element): source with syntax colours, a header
+// with a Copy button, optional line numbers and wrapping. The element hides the plain
+// `.wui-code-source` once it has drawn `.wui-code-chrome`; without script the source stays.
+// Colours are semantic text tokens, so light and dark follow the theme.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-code-block {
+    display: block;
+    min-width: 0;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius);
+    background: var(--color-bg-subtle);
+    color: var(--color-text);
+    font-family: var(--bs-font-monospace);
+    font-size: 13px;
+    line-height: 1.6;
+    overflow: hidden;
+}
+
+.wui-code-source {
+    margin: 0;
+    padding: 12px 14px;
+    overflow-x: auto;
+    color: inherit;
+    font: inherit;
+    white-space: pre;
+}
+.wui-code-source code {
+    color: inherit;
+    font: inherit;
+}
+.wui-code-block[wrap] .wui-code-source {
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+}
+.wui-code-block[data-wui-ready] > .wui-code-source {
+    display: none;
+}
+
+.wui-code-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 2px 6px 2px 14px;
+    border-bottom: 1px solid var(--color-border);
+    background: var(--color-bg-muted);
+}
+.wui-code-title {
+    min-width: 0;
+    overflow: hidden;
+    color: var(--color-text-muted);
+    font-family: var(--font-sans);
+    font-size: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.wui-code-copy {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+.wui-code-copy-icon {
+    display: inline-flex;
+}
+
+.wui-code-view {
+    overflow-x: auto;
+    padding: 12px 0;
+}
+.wui-code-view:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
+}
+.wui-code-pre {
+    margin: 0;
+    color: inherit;
+    font: inherit;
+    white-space: pre;
+    counter-reset: wui-code-line;
+}
+.wui-code-pre code {
+    display: block;
+    color: inherit;
+    font: inherit;
+}
+.wui-code-block[wrap] .wui-code-pre {
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+}
+.wui-code-line {
+    display: block;
+    min-height: 1.6em;
+    padding-inline: 14px;
+}
+.wui-code-block[line-numbers] .wui-code-line {
+    position: relative;
+    padding-inline-start: calc(30px + var(--wui-code-digits, 2) * 1ch);
+    counter-increment: wui-code-line;
+}
+.wui-code-block[line-numbers] .wui-code-line::before {
+    position: absolute;
+    inset-inline-start: 14px;
+    width: calc(var(--wui-code-digits, 2) * 1ch);
+    content: counter(wui-code-line);
+    color: var(--color-text-subtle);
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+    user-select: none;
+}
+
+.wui-code-t-comment {
+    color: var(--color-text-subtle);
+    font-style: italic;
+}
+.wui-code-t-string {
+    color: var(--color-success-text);
+}
+.wui-code-t-number,
+.wui-code-t-literal,
+.wui-code-t-variable {
+    color: var(--color-warning-text);
+}
+.wui-code-t-keyword,
+.wui-code-t-tag {
+    color: var(--color-primary-ink);
+}
+.wui-code-t-function,
+.wui-code-t-type,
+.wui-code-t-attr {
+    color: var(--color-info-text);
+}
+.wui-code-t-punct {
+    color: var(--color-text-muted);
+}

package/scss/wui/_command-palette.scss

@@ -63,6 +63,79 @@ wui-command-palette {
     color: var(--color-primary-ink);
 }
 
+// Nested pages: the Back button and the path to the open page. The element fills the trail and
+// shows the bar only while a page is open.
+.wui-cmd-crumbs {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    border-bottom: 1px solid var(--color-border);
+}
+.wui-cmd-crumbs[hidden] {
+    display: none;
+}
+.wui-cmd-back {
+    display: inline-grid;
+    flex: 0 0 auto;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius);
+    corner-shape: squircle;
+    background: transparent;
+    color: var(--color-text-muted);
+    cursor: pointer;
+}
+.wui-cmd-back:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+.wui-cmd-trail {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    color: var(--color-text-muted);
+    font-size: 13px;
+    list-style: none;
+}
+.wui-cmd-trail > li + li::before {
+    content: "/";
+    padding: 0 6px;
+    color: var(--color-text-subtle);
+}
+.wui-cmd-crumb {
+    padding: 2px 4px;
+    border: 0;
+    border-radius: var(--wui-radius-sm);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+}
+button.wui-cmd-crumb {
+    cursor: pointer;
+}
+button.wui-cmd-crumb:hover {
+    color: var(--color-text);
+    text-decoration: underline;
+}
+span.wui-cmd-crumb[aria-current="page"] {
+    color: var(--color-text);
+    font-weight: 600;
+}
+.wui-cmd-back:focus-visible,
+button.wui-cmd-crumb:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: 1px;
+}
+
 .wui-cmd-list {
     flex: 1 1 auto;
     min-height: 0;
@@ -74,10 +147,16 @@ wui-command-palette {
 }
 .wui-cmd-list[hidden],
 .wui-cmd-group[hidden],
+.wui-cmd-page[hidden],
 .wui-cmd-item[hidden] {
     display: none;
 }
-.wui-cmd-group + .wui-cmd-group {
+// The element fills this with the recently chosen items; with none it takes no room.
+.wui-cmd-recents:empty {
+    display: none;
+}
+.wui-cmd-group + .wui-cmd-group,
+.wui-cmd-recents:not(:empty) + .wui-cmd-group {
     margin-top: 4px;
 }
 .wui-cmd-group-label {
@@ -150,6 +229,25 @@ wui-command-palette {
     color: var(--color-text-muted);
     font-size: 12px;
 }
+.wui-cmd-item-chevron {
+    display: inline-flex;
+    flex: 0 0 auto;
+    color: var(--color-text-muted);
+}
+.wui-cmd-item > .wui-kbd {
+    flex: 0 0 auto;
+}
+.wui-cmd-item[aria-selected="true"] > .wui-kbd {
+    border-color: var(--color-primary-ink);
+    background: var(--color-surface);
+    color: var(--color-primary-ink);
+}
+// A phone has no keyboard to press them on.
+@media (hover: none) and (pointer: coarse) {
+    .wui-cmd-item > .wui-kbd {
+        display: none;
+    }
+}
 // The query inside a label: bolder, never a highlighter block.
 .wui-cmd-mark {
     padding: 0;

package/scss/wui/_comment-thread.scss

@@ -0,0 +1,268 @@
+// ── Comment thread ──
+// AppCommentThread / <app-comment-thread> / <wui-comment-thread>: comments with an avatar, the
+// author and time, the body with mentions, reactions and the Reply, Edit and Delete actions;
+// replies indent under their comment. The element shows and hides the boxes and the delete
+// question; [aria-busy] on the host while a change is saving.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-comment-thread {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-width: 0;
+}
+
+.wui-comment-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+.wui-comment-replies {
+    gap: 12px;
+    margin-top: 12px;
+    // Under the parent's avatar, so a reply reads as belonging to it.
+    margin-inline-start: 20px;
+    padding-inline-start: 22px;
+    border-inline-start: 2px solid var(--color-border);
+}
+.wui-comment-empty {
+    margin: 0;
+    color: var(--color-text-muted);
+}
+
+.wui-comment-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+}
+.wui-comment-avatar {
+    flex: none;
+}
+.wui-comment-main {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+}
+
+.wui-comment-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 2px 8px;
+}
+.wui-comment-author {
+    font-weight: 600;
+    color: var(--color-text);
+}
+.wui-comment-time,
+.wui-comment-edited {
+    font-size: 12px;
+    color: var(--color-text-muted);
+    font-variant-numeric: tabular-nums;
+}
+
+.wui-comment-text {
+    color: var(--color-text);
+    overflow-wrap: anywhere;
+    // The line breaks a person typed still read as lines.
+    white-space: pre-wrap;
+}
+.wui-comment-text[hidden] {
+    display: none;
+}
+.wui-comment-text-deleted {
+    font-style: italic;
+    color: var(--color-text-muted);
+}
+.wui-mention {
+    padding: 0 2px;
+    border-radius: var(--wui-radius-sm);
+    background: var(--color-primary-soft);
+    color: var(--color-primary-ink);
+    font-weight: 500;
+}
+
+.wui-comment-reactions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+}
+.wui-reaction,
+.wui-reaction-add {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-height: 28px;
+    padding: 2px 8px;
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    background: var(--color-surface);
+    color: var(--color-text);
+    font: inherit;
+    font-size: 13px;
+    line-height: 1;
+    transition:
+        background-color 160ms var(--wui-ease-ui),
+        border-color 160ms var(--wui-ease-ui);
+}
+button.wui-reaction,
+.wui-reaction-add {
+    cursor: pointer;
+}
+button.wui-reaction:hover,
+.wui-reaction-add:hover {
+    background: var(--color-bg-muted);
+}
+.wui-reaction-mine {
+    border-color: var(--color-primary);
+    background: var(--color-primary-soft);
+    color: var(--color-primary-ink);
+}
+.wui-reaction-count {
+    font-variant-numeric: tabular-nums;
+}
+.wui-reaction-add {
+    color: var(--color-text-muted);
+}
+
+.wui-reaction-picker {
+    position: fixed;
+    z-index: var(--wui-z-menu);
+    display: flex;
+    gap: 2px;
+    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-reaction-picker[hidden] {
+    display: none;
+}
+.wui-reaction-choice {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: 0;
+    border-radius: var(--radius);
+    background: transparent;
+    font-size: 18px;
+    cursor: pointer;
+}
+.wui-reaction-choice:hover {
+    background: var(--color-bg-muted);
+}
+
+.wui-comment-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 12px;
+}
+.wui-comment-actions[hidden] {
+    display: none;
+}
+.wui-comment-action {
+    padding: 2px 0;
+    border: 0;
+    background: transparent;
+    color: var(--color-text-muted);
+    font: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+}
+.wui-comment-action:hover {
+    color: var(--color-primary-ink);
+}
+
+.wui-comment-confirm {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+}
+.wui-comment-confirm[hidden] {
+    display: none;
+}
+.wui-comment-confirm-text {
+    font-size: 13px;
+    color: var(--color-text);
+}
+
+.wui-comment-editor,
+.wui-comment-reply,
+.wui-comment-composer {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.wui-comment-reply {
+    margin-top: 12px;
+    margin-inline-start: 42px;
+}
+.wui-comment-editor[hidden],
+.wui-comment-reply[hidden] {
+    display: none;
+}
+.wui-comment-form-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.wui-comment-error {
+    font-size: 12px;
+    // The AA text shade, as .field-error: the fill red is under 4.5:1 at this size.
+    color: var(--color-danger-text);
+}
+.wui-comment-error[hidden] {
+    display: none;
+}
+
+.wui-comment-action:focus-visible,
+.wui-reaction:focus-visible,
+.wui-reaction-add:focus-visible,
+.wui-reaction-choice:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+
+@media (pointer: coarse) {
+    .wui-reaction,
+    .wui-reaction-add,
+    .wui-reaction-choice {
+        min-height: 44px;
+        min-width: 44px;
+        justify-content: center;
+    }
+    .wui-comment-action {
+        min-height: 44px;
+    }
+}
+
+@media (max-width: 575.98px) {
+    .wui-comment-replies {
+        margin-inline-start: 8px;
+        padding-inline-start: 12px;
+    }
+    .wui-comment-reply {
+        margin-inline-start: 0;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .wui-reaction,
+    .wui-reaction-add {
+        transition: none;
+    }
+}

package/scss/wui/_context-menu.scss

@@ -35,8 +35,8 @@ wui-context-menu {
 
     // A row the user can reach with the keyboard shows where it is.
     .dropdown-item: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);
     }
     // Listed but unchoosable: quiet, and no hover tint.
     .dropdown-item[aria-disabled="true"] {

package/scss/wui/_controls.scss

@@ -145,14 +145,15 @@
     border-color: var(--color-primary);
     box-shadow: 0 0 0 2px var(--color-primary-soft);
 }
-// Keyboard focus keeps a restrained brand ring — a keyboard user MUST see where focus is
-// (a11y). :focus-visible matches keyboard/AT focus only, never a plain mouse click.
+// Keyboard focus draws the shared ring, never the soft hover glow (under 3:1 and identical to
+// hover). :focus-visible matches keyboard/AT focus only, never a plain mouse click.
 .form-check-input:focus-visible,
 .wui-check:focus-visible,
 .wui-radio:focus-visible {
-    outline: none;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
     border-color: var(--color-primary);
-    box-shadow: 0 0 0 2px var(--color-primary-soft);
+    box-shadow: none;
 }
 // A plain MOUSE click must leave NO lingering focus/active glow, ring, border tint or
 // darkening — Bootstrap paints all of them on :focus/:active. Neutralise them for pointer
@@ -762,8 +763,8 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     background: transparent;
 }
 .pw-toggle: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);
 }
 .pw-toggle .pw-eye-off {
     display: none;
@@ -805,8 +806,8 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     background: var(--color-bg-muted);
 }
 .input-clear: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);
 }
 @keyframes wui-clear-in {
     from { opacity: 0; transform: translateY(-50%) scale(0.72); }
@@ -1256,7 +1257,8 @@ wui-select[compact] {
     background: var(--color-bg-muted);
 }
 .num-btn:focus-visible {
-    outline: none;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
     color: var(--color-primary-ink);
 }
 .num-btn:active:not(:disabled) {
@@ -1419,8 +1421,8 @@ wui-select[compact] {
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
 .choice-chip:has(input: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);
 }
 .choice-chip input {
     position: absolute;
@@ -1687,7 +1689,7 @@ wui-otp {
     box-shadow: 0 3px 14px color-mix(in srgb, var(--color-primary) 28%, transparent);
 }
 .slider-thumb:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: 4px;
 }
 .slider-thumb:disabled,