@webority/theme 0.53.1 → 0.55.0

package/scss/wui/_onboarding-checklist.scss

@@ -0,0 +1,199 @@
+// ── Onboarding checklist ──
+// AppOnboardingChecklist / <app-onboarding-checklist> / <wui-onboarding-checklist>: a first-run
+// setup card. A heading that collapses the steps, a close icon, a bar of one segment per step and
+// the steps, each `.is-done`, `.is-current`, `.is-skipped` or `.is-todo`. A dismissed checklist
+// shows only `.wui-onboarding-restore`; the element toggles `hidden` on the card, the steps and
+// that button.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-onboarding {
+    display: block;
+}
+.wui-onboarding-card[hidden],
+.wui-onboarding-steps[hidden],
+.wui-onboarding-restore[hidden] {
+    display: none;
+}
+
+.wui-onboarding-card {
+    padding: 12px 16px 8px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius);
+    corner-shape: squircle;
+    background: var(--color-surface);
+    color: var(--color-text);
+}
+
+.wui-onboarding-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.wui-onboarding-toggle {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 2px 12px;
+    min-width: 0;
+    min-height: 44px;
+    margin-inline: -8px;
+    padding: 4px 8px;
+    border: 0;
+    border-radius: var(--wui-radius-sm);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+}
+.wui-onboarding-toggle:hover {
+    background: var(--color-bg-muted);
+}
+.wui-onboarding-toggle:focus-visible,
+.wui-onboarding-restore:focus-visible,
+.wui-onboarding-label:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+.wui-onboarding-title {
+    font-weight: 600;
+}
+.wui-onboarding-count {
+    color: var(--color-text-muted);
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+}
+.wui-onboarding-chevron {
+    display: inline-flex;
+    margin-inline-start: auto;
+    color: var(--color-text-muted);
+}
+.wui-onboarding-toggle[aria-expanded="false"] .wui-onboarding-chevron {
+    transform: rotate(-90deg);
+}
+.wui-onboarding-dismiss {
+    flex: none;
+}
+
+.wui-onboarding-bar {
+    display: flex;
+    gap: 4px;
+    margin: 4px 0 12px;
+}
+.wui-onboarding-seg {
+    flex: 1 1 0;
+    height: 4px;
+    border-radius: 2px;
+    background: var(--color-border);
+}
+.wui-onboarding-seg.is-done {
+    background: var(--color-success);
+}
+.wui-onboarding-seg.is-current {
+    background: var(--color-primary);
+}
+.wui-onboarding-seg.is-skipped {
+    background: var(--color-text-muted);
+}
+
+.wui-onboarding-steps {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+.wui-onboarding-step {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 8px 0;
+}
+.wui-onboarding-step + .wui-onboarding-step {
+    border-top: 1px solid var(--color-border);
+}
+.wui-onboarding-mark {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border: 1.5px solid var(--color-border);
+    border-radius: 50%;
+    color: var(--color-text-muted);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+}
+.wui-onboarding-step.is-current .wui-onboarding-mark {
+    border-color: var(--color-primary);
+    background: var(--color-primary-soft);
+    color: var(--color-primary-ink);
+}
+.wui-onboarding-step.is-done .wui-onboarding-mark {
+    border-color: transparent;
+    background: var(--color-success-soft);
+    color: var(--color-success-text);
+}
+.wui-onboarding-step.is-skipped .wui-onboarding-mark {
+    border-style: dashed;
+}
+.wui-onboarding-body {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    padding-top: 2px;
+}
+.wui-onboarding-label {
+    color: inherit;
+    overflow-wrap: anywhere;
+    text-decoration: none;
+}
+a.wui-onboarding-label {
+    text-decoration: underline;
+    text-decoration-color: var(--color-border);
+    text-underline-offset: 3px;
+}
+a.wui-onboarding-label:hover {
+    color: var(--color-primary-ink);
+    text-decoration-color: currentColor;
+}
+.wui-onboarding-step.is-current .wui-onboarding-label {
+    font-weight: 600;
+}
+.wui-onboarding-step.is-done .wui-onboarding-label,
+.wui-onboarding-step.is-skipped .wui-onboarding-label {
+    color: var(--color-text-muted);
+}
+.wui-onboarding-step.is-skipped .wui-onboarding-label {
+    text-decoration: line-through;
+}
+.wui-onboarding-desc {
+    color: var(--color-text-muted);
+    font-size: 13px;
+}
+
+.wui-onboarding-restore {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 44px;
+    padding: 6px 14px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-sm);
+    background: var(--color-surface);
+    color: var(--color-text);
+    font: inherit;
+    cursor: pointer;
+}
+.wui-onboarding-restore:hover {
+    background: var(--color-bg-muted);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .wui-onboarding-chevron {
+        transition: transform 160ms var(--wui-ease-ui);
+    }
+}

package/scss/wui/_overlays.scss

@@ -285,8 +285,8 @@
 }
 .wui-modal-close:focus-visible,
 .wui-drawer-close: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 (prefers-reduced-motion: reduce) {
     .wui-modal-close,
@@ -745,20 +745,16 @@
     background: color-mix(in srgb, var(--wui-toast-accent) 14%, transparent);
     color: var(--wui-toast-accent);
 }
-.wui-toast-action:focus-visible {
-    outline: 2px solid var(--wui-toast-accent);
-    outline-offset: 1px;
-}
-
 // Geometry: optical space above the action = message half-leading (3.5px) + column gap
 // (2px) + 2px margin + action half-leading (2px) ≈ 9.5px; below = action half-leading
 // (2px) + this padding (7px) ≈ 9px. Equal by construction — don't re-balance one side alone.
 .wui-toast:has(.wui-toast-action) {
     padding-bottom: 7px;
 }
+// The shared ring, not the tone accent: the success and warning fills fall under 3:1 on the toast.
 .wui-toast-action:focus-visible {
-    outline: 2px solid var(--wui-toast-accent);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 
 .wui-toast-close {
@@ -772,8 +768,8 @@
     box-shadow: none;
 }
 .wui-toast-close:focus-visible {
-    outline: 2px solid var(--wui-toast-accent);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 
 // The auto-dismiss TIMER, deliberately invisible (height 0): the element still runs the

package/scss/wui/_rating.scss

@@ -0,0 +1,87 @@
+// ── Rating ──
+// AppRating / <app-rating>: a 1 to N star input (a <wui-rating> radiogroup) or a read-only display.
+// Each star is an outline glyph with a bold copy on top, clipped to the filled share of its width.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-rating {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    color: var(--color-warning);
+}
+.wui-rating-stars {
+    display: inline-flex;
+    gap: 2px;
+}
+.wui-rating-star {
+    position: relative;
+    display: inline-flex;
+    margin: 0;
+    line-height: 0;
+}
+.wui-rating-glyphs {
+    position: relative;
+    display: inline-flex;
+    color: var(--color-text-muted);
+}
+.wui-rating-fill {
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 0;
+    overflow: hidden;
+    color: var(--color-warning);
+    transition: width 0.12s ease;
+}
+.wui-rating-fill .wui-icon {
+    flex: none;
+}
+.wui-rating-star-full .wui-rating-fill {
+    width: 100%;
+}
+.wui-rating-star-half .wui-rating-fill {
+    width: 50%;
+}
+.wui-rating-value {
+    margin-left: 6px;
+    color: var(--color-text-muted);
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+}
+
+.wui-rating-lg .wui-rating-value {
+    font-size: 15px;
+}
+.wui-rating-sm .wui-rating-value {
+    font-size: 12px;
+}
+
+.wui-rating-input .wui-rating-star {
+    cursor: pointer;
+    border-radius: var(--wui-radius-sm);
+}
+.wui-rating-input .wui-rating-star:has(input:focus-visible) {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+.wui-rating-previewing .wui-rating-star .wui-rating-fill {
+    width: 0;
+}
+.wui-rating-previewing .wui-rating-star-preview .wui-rating-fill {
+    width: 100%;
+}
+.wui-rating-input[disabled] {
+    opacity: 0.55;
+}
+.wui-rating-input[disabled] .wui-rating-star {
+    cursor: not-allowed;
+}
+.field > .wui-rating-input {
+    align-self: flex-start;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .wui-rating-fill {
+        transition: none;
+    }
+}

package/scss/wui/_record-pager.scss

@@ -0,0 +1,27 @@
+// ── Record pager ──
+// AppRecordPager / <app-record-pager> (a <wui-record-pager> element): "12 of 47" and the
+// previous and next action icons, in a detail page's header actions or a split view's pane header.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-record-pager {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: 2px;
+}
+.wui-record-pager-position {
+    margin-right: 6px;
+    color: var(--color-text-muted);
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+.wui-record-pager-position:empty {
+    display: none;
+}
+// The <wui-record-pager> element finds its controls by these classes (J presses next, K previous).
+.wui-record-pager-prev,
+.wui-record-pager-next {
+    flex: none;
+}

package/scss/wui/_relative-time.scss

@@ -0,0 +1,10 @@
+// ── Relative time ──
+// AppRelativeTime / <app-relative-time> (a <wui-relative-time> element): "5 minutes ago" with the
+// exact IST time as the tooltip.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-relative-time {
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+}

package/scss/wui/_resizable.scss

@@ -0,0 +1,98 @@
+// ── Resizable panels ──
+// AppResizable / <app-resizable> (a <wui-resizable> element): panels side by side or stacked with a
+// handle between each pair. The element writes each panel's `flex` (a share of the room the panels
+// split) and the handle's aria-value*; the handle is a thin line with a wider invisible hit area so a
+// finger can find it. `direction="vertical"` stacks the panels and needs a height: set
+// `--wui-resizable-height` on the group, or give its parent one.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-resizable {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: var(--wui-resizable-height, auto);
+    min-width: 0;
+    min-height: 0;
+}
+.wui-resizable[direction="vertical"] {
+    flex-direction: column;
+    height: var(--wui-resizable-height, 100%);
+}
+
+.wui-resizable-panel {
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+}
+
+.wui-resizable-handle {
+    position: relative;
+    flex: none;
+    width: 9px;
+    cursor: col-resize;
+    touch-action: none;
+    user-select: none;
+    outline: none;
+}
+.wui-resizable[direction="vertical"] > .wui-resizable-handle {
+    width: auto;
+    height: 9px;
+    cursor: row-resize;
+}
+// The visible line, centred in the handle.
+.wui-resizable-handle::after {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 4px;
+    background: var(--color-border);
+    border-radius: 2px;
+}
+.wui-resizable[direction="vertical"] > .wui-resizable-handle::after {
+    inset-block: 4px;
+    inset-inline: 0;
+}
+// A wider hit area for touch than the line shows.
+.wui-resizable-handle::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline: -6px;
+}
+.wui-resizable[direction="vertical"] > .wui-resizable-handle::before {
+    inset-block: -6px;
+    inset-inline: 0;
+}
+
+.wui-resizable-handle:hover::after,
+.wui-resizable-handle.is-active::after {
+    background: var(--color-primary);
+}
+.wui-resizable-handle:focus-visible::after {
+    background: var(--color-primary);
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+.wui-resizable-handle:focus-visible {
+    z-index: 1;
+}
+
+// While dragging, the whole group keeps the resize cursor and text under the pointer is not selected.
+.wui-resizable.is-dragging {
+    cursor: col-resize;
+    user-select: none;
+}
+.wui-resizable.is-dragging[direction="vertical"] {
+    cursor: row-resize;
+}
+.wui-resizable.is-dragging > .wui-resizable-panel {
+    pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .wui-resizable-handle::after {
+        transition: background-color 120ms var(--wui-ease-ui);
+    }
+}

package/scss/wui/_rich-text.scss

@@ -101,7 +101,7 @@ wui-rich-text[readonly] .wui-rich-text-shell {
     color: var(--color-text);
 }
 .wui-rich-text-button:focus-visible {
-    outline: 2px solid var(--color-focus-border);
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: 1px;
 }
 .wui-rich-text-button:disabled {
@@ -177,7 +177,7 @@ wui-rich-text[readonly] .wui-rich-text-shell {
 .wui-rich-text-link-apply:focus-visible,
 .wui-rich-text-link-remove:focus-visible,
 .wui-rich-text-link-cancel:focus-visible {
-    outline: 2px solid var(--color-focus-border);
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: 1px;
 }
 .wui-rich-text-link-error {

package/scss/wui/_rolling-number.scss

@@ -0,0 +1,60 @@
+// ── Rolling number ──
+// AppRollingNumber / <app-rolling-number> (a <wui-rolling-number> element): a figure whose digits
+// roll to a new value. The element draws one reel (digits 0 to 9, stacked) per digit in the
+// aria-hidden roll and moves it with --wui-roll-digit; the plain text beside it is what a screen
+// reader reads, shown on its own until the element is ready or when motion is reduced.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+$wui-roll-cell: 1.2em;
+
+.wui-rolling-number {
+    position: relative;
+    display: inline-block;
+    vertical-align: bottom;
+    line-height: $wui-roll-cell;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+.wui-rolling-number-roll {
+    display: none;
+}
+.wui-rolling-number[data-ready] > .wui-rolling-number-roll {
+    display: inline-flex;
+}
+// The text stays for assistive technology while the roll is drawn.
+.wui-rolling-number[data-ready] > .wui-rolling-number-text {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+.wui-rolling-number-char {
+    display: inline-block;
+    height: $wui-roll-cell;
+}
+.wui-rolling-number-digit {
+    display: inline-block;
+    height: $wui-roll-cell;
+    overflow: hidden;
+}
+.wui-rolling-number-reel {
+    display: flex;
+    flex-direction: column;
+    transform: translateY(calc(var(--wui-roll-digit, 0) * -#{$wui-roll-cell}));
+    transition: transform var(--wui-roll-duration, 600ms) var(--wui-ease-out-quart);
+    > span {
+        display: block;
+        height: $wui-roll-cell;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .wui-rolling-number-reel {
+        transition: none;
+    }
+}