@wovenui/components 0.0.0-stage → 1.0.0

package/src/components/_timeline.scss

@@ -0,0 +1,196 @@
+////
+//// @component wu-timeline
+//// Ordered list of events with markers and a rail, role colors and a progress mode.
+////
+//// Role words on an item color its marker; `success`, `warning` and `danger` also change the marker shape, so color is not the only cue.
+////
+//// With `aria-current="step"` on one item the list becomes a progress rail: earlier items filled, the current one ringed, later ones hollow. Say "completed" in the item text too.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <ol class="wu-timeline">
+////     <li class="wu-timeline-item success">
+////       <p class="wu-timeline-title">Order shipped</p>
+////       <time class="wu-timeline-time" datetime="2026-03-02">2 March</time>
+////       <p class="wu-timeline-text">Handed to the carrier.</p>
+////     </li>
+////     <li class="wu-timeline-item danger">
+////       <p class="wu-timeline-title">Payment failed</p>
+////       <time class="wu-timeline-time" datetime="2026-03-01">1 March</time>
+////     </li>
+////   </ol>
+//// @example html
+////   <ol class="wu-timeline">
+////     <li class="wu-timeline-item"><p class="wu-timeline-title">Cart (completed)</p></li>
+////     <li class="wu-timeline-item" aria-current="step"><p class="wu-timeline-title">Payment</p></li>
+////     <li class="wu-timeline-item"><p class="wu-timeline-title">Confirmation</p></li>
+////   </ol>
+//// @modifier brand | info - On an item: marker color @since 1.0.0
+//// @modifier success | warning | danger - On an item: marker color and a check, triangle or octagon shape @since 1.0.0
+//// @modifier animated - Each rail segment draws once as it scrolls into view when the user allows motion; `wu-animated` on an ancestor does the same @since 1.0.0
+//// @part wu-timeline-item - One event: a marker, a rail to the next item and the content @since 1.0.0
+//// @part wu-timeline-title - Event title in medium weight @since 1.0.0
+//// @part wu-timeline-time - Muted time or date line @since 1.0.0
+//// @part wu-timeline-text - Muted description @since 1.0.0
+//// @state aria-current="step" - On an item: the current step, ringed; earlier items fill and later ones turn hollow @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+$marker: woven.token(space-3);
+
+.wu-timeline {
+    margin: 0;
+    padding: 0;
+    color: woven.token(text-regular);
+    font-size: woven.token(font-size-sm);
+    line-height: woven.token(line-height-normal);
+    list-style: none;
+}
+
+.wu-timeline-item {
+    position: relative;
+    padding-block-end: woven.token(space-6);
+    padding-inline-start: calc(#{$marker} + #{woven.token(space-3)});
+
+    // Marker, centered on the first line
+    &::before {
+        content: "";
+        position: absolute;
+        inset-block-start: calc((1lh - #{$marker}) / 2);
+        inset-inline-start: 0;
+        width: $marker;
+        height: $marker;
+        border-radius: woven.token(radius-full);
+        background: woven.token(border-strong);
+    }
+
+    // Rail to the next marker
+    &::after {
+        content: "";
+        position: absolute;
+        inset-block: calc((1lh + #{$marker}) / 2 + #{woven.token(space-1)}) calc(#{woven.token(space-1)} - (1lh - #{$marker}) / 2);
+        inset-inline-start: calc((#{$marker} - #{woven.token(border-width-2)}) / 2);
+        width: woven.token(border-width-2);
+        border-radius: woven.token(radius-full);
+        background: woven.token(border-regular);
+    }
+
+    &:last-child {
+        padding-block-end: 0;
+
+        &::after {
+            content: none;
+        }
+    }
+}
+
+.wu-timeline-title {
+    margin: 0;
+    font-weight: woven.token(font-weight-medium);
+}
+
+.wu-timeline-time {
+    display: block;
+    color: woven.token(text-muted);
+    font-size: woven.token(font-size-xs);
+    font-variant-numeric: tabular-nums;
+}
+
+.wu-timeline-text {
+    margin: 0;
+    margin-block-start: woven.token(space-1);
+    color: woven.token(text-muted);
+    text-wrap: pretty;
+}
+
+@each $role in "brand", "success", "danger", "warning", "info" {
+    .wu-timeline-item.#{$role}::before {
+        background: woven.token($role);
+    }
+}
+
+// Shape markers from _shared.scss
+.wu-timeline-item:is(.success, .warning, .danger)::before {
+    border-radius: 0;
+}
+
+.wu-timeline-item.success::before {
+    clip-path: var(--wu-kit-marker-check);
+}
+
+.wu-timeline-item.warning::before {
+    clip-path: var(--wu-kit-marker-triangle);
+}
+
+.wu-timeline-item.danger::before {
+    clip-path: var(--wu-kit-marker-octagon);
+}
+
+// Progress: completed
+.wu-timeline-item:has(~ [aria-current="step"]) {
+    &::before,
+    &::after {
+        background: woven.token(brand);
+    }
+}
+
+// Progress: current, a ring
+.wu-timeline-item[aria-current="step"] {
+    &::before {
+        border-radius: woven.token(radius-full);
+        clip-path: none;
+        background: woven.token(bg-surface);
+        box-shadow:
+            inset 0 0 0 woven.token(border-width-2) woven.token(brand),
+            0 0 0 woven.token(border-width-4) woven.token(brand-subtle);
+    }
+
+    .wu-timeline-title {
+        font-weight: woven.token(font-weight-semibold);
+    }
+}
+
+// Progress: upcoming, hollow
+.wu-timeline-item[aria-current="step"] ~ .wu-timeline-item {
+    color: woven.token(text-muted);
+
+    &::before {
+        border-radius: woven.token(radius-full);
+        clip-path: none;
+        background: woven.token(bg-surface);
+        box-shadow: inset 0 0 0 woven.token(border-width-2) woven.token(border-strong);
+    }
+}
+
+// Opt-in motion: each rail segment draws once as it scrolls into view
+@media (prefers-reduced-motion: no-preference) {
+    .wu-timeline.animated,
+    .wu-animated .wu-timeline {
+        > .wu-timeline-item::after {
+            transform-origin: top;
+            animation: wu-timeline-draw woven.token(duration-500) woven.token(ease-out) both;
+        }
+
+        @supports (animation-timeline: view()) {
+            > .wu-timeline-item::after {
+                animation-duration: auto;
+                animation-timing-function: linear;
+                animation-timeline: view();
+                animation-range: entry 0% cover 40%;
+            }
+        }
+    }
+}
+
+@keyframes wu-timeline-draw {
+    from {
+        scale: 1 0;
+    }
+
+    to {
+        scale: 1 1;
+    }
+}

package/src/components/_title.scss

@@ -0,0 +1,41 @@
+////
+//// @component wu-title
+//// Visual heading size on any element, in four steps.
+////
+//// Pick the heading level for the document outline and the size for the look.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <h2 class="wu-title xl">Extra large title</h2>
+////   <h2 class="wu-title">Default title</h2>
+//// @example html
+////   <h3 class="wu-title lg">An h3 with the large size</h3>
+//// @modifier sm - Large size, one step below the default @since 1.0.0
+//// @modifier lg - 2xl size @since 1.0.0
+//// @modifier xl - 3xl size @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-title {
+    margin: 0;
+    color: woven.token(text-regular);
+    font-size: woven.token(font-size-xl);
+    font-weight: woven.token(font-weight-semibold);
+    line-height: woven.token(line-height-tight);
+    text-wrap: balance;
+}
+
+.wu-title.sm {
+    font-size: woven.token(font-size-lg);
+}
+
+.wu-title.lg {
+    font-size: woven.token(font-size-2xl);
+}
+
+.wu-title.xl {
+    font-size: woven.token(font-size-3xl);
+}

package/src/components/_toast.scss

@@ -0,0 +1,221 @@
+////
+//// @component wu-toast
+//// Short notification in a corner of the viewport, shown in a polite live region.
+////
+//// The region sits at the bottom end corner by default and scrolls when the toasts are taller than the viewport. The title text carries the meaning, not the color.
+////
+//// `toast("Saved")` from the kit script adds a toast, and the region when the page has none. It closes the toast after a delay, pauses on hover and focus, keeps at most three open and skips a repeat of an open message.
+////
+//// Create the region at page load; a region added together with its first toast may not be announced.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js required toast, dismiss
+//// @example html
+////   <section class="wu-toast-region animated" aria-live="polite" aria-label="Notifications">
+////     <div class="wu-toast success">
+////       <p class="wu-toast-title">Saved</p>
+////       <p>Your changes are live.</p>
+////       <button class="wu-toast-close" type="button" aria-label="Close"></button>
+////     </div>
+////   </section>
+//// @example html
+////   <section class="wu-toast-region top-end" aria-live="polite" aria-label="Notifications"></section>
+//// @modifier brand | success | danger | warning | info - On a toast: role color on the start edge and the title @since 1.0.0
+//// @modifier top-start | top-end | bottom-start - On the region: moves it to another corner; the default is the bottom end corner @since 1.0.0
+//// @modifier animated - On the region: toasts slide in, fade out and stack behind the newest, fanning out on hover or focus; `wu-animated` on an ancestor does the same @since 1.0.0
+//// @part wu-toast-region - Fixed live region that holds the toasts; hidden when empty @since 1.0.0
+//// @part wu-toast-title - Toast title in semibold weight @since 1.0.0
+//// @part wu-toast-close - Close button with `aria-label`, its cross drawn in CSS @since 1.0.0
+//// @variable --wu-toast--Width [22rem] - Width of the toasts in the region @since 1.0.0
+//// @state hidden - On a toast: removed from layout, after a fade out with `animated` @since 1.0.0
+//// @state :empty - A region with no toasts is hidden @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+@use "../close";
+
+$-gap: woven.token(space-2);
+$-edge: woven.token(space-4);
+$-depth: "(sibling-count() - sibling-index())";
+
+// The padding keeps the toast shadows inside the scrolling region; the toasts sit $-edge from the viewport edge
+.wu-toast-region {
+    position: fixed;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    z-index: woven.token(z-toast);
+    display: flex;
+    flex-direction: column;
+    gap: $-gap;
+    inline-size: min(calc(var(--wu-toast--Width, 22rem) + 2 * #{$-edge}), 100%);
+    max-block-size: 100dvh;
+    padding: $-edge;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    pointer-events: none;
+
+    &:empty {
+        display: none;
+    }
+}
+
+.wu-toast-region.top-start,
+.wu-toast-region.top-end {
+    inset-block: 0 auto;
+    flex-direction: column-reverse;
+}
+
+.wu-toast-region.top-start,
+.wu-toast-region.bottom-start {
+    inset-inline: 0 auto;
+}
+
+.wu-toast {
+    flex: none;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    column-gap: woven.token(space-2);
+    align-items: start;
+    padding-block: woven.token(space-3);
+    padding-inline: woven.token(space-4) woven.token(space-2);
+    border: woven.token(border-width-1) solid woven.token(border-regular);
+    border-radius: woven.token(radius-md);
+    background: woven.token(bg-raised);
+    color: woven.token(text-regular);
+    font-size: woven.token(font-size-sm);
+    line-height: woven.token(line-height-normal);
+    box-shadow: woven.token(shadow-lg);
+    pointer-events: auto;
+
+    &[hidden] {
+        display: none;
+    }
+
+    > :not(.wu-toast-close) {
+        grid-column: 1;
+        margin: 0;
+        min-inline-size: 0;
+        overflow-wrap: anywhere;
+    }
+
+    > :not(.wu-toast-close) + :not(.wu-toast-close) {
+        margin-block-start: woven.token(space-1);
+    }
+}
+
+.wu-toast-title {
+    font-weight: woven.token(font-weight-semibold);
+}
+
+@each $role in "brand", "success", "danger", "warning", "info" {
+    .wu-toast.#{$role} {
+        border-inline-start: woven.token(border-width-4) solid woven.token($role);
+
+        > .wu-toast-title {
+            color: woven.token(text-#{$role});
+        }
+    }
+}
+
+.wu-toast-close {
+    @include close.button;
+
+    grid-area: 1 / 2 / span 9;
+    margin-block: calc(-1 * #{woven.token(space-1)});
+}
+
+// Stack: older toasts stack behind the newest and fan out while the region
+// is hovered or focused. Layout only; the motion below is separate, so reduced motion keeps the same stack.
+@supports (z-index: sibling-index()) {
+    .wu-toast-region.animated,
+    .wu-animated .wu-toast-region {
+        display: grid;
+        max-block-size: none;
+        overflow: visible;
+    }
+
+    .wu-toast-region.animated > .wu-toast,
+    .wu-animated .wu-toast-region > .wu-toast {
+        grid-area: 1 / 1;
+        align-self: end;
+        transform-origin: 50% 100%;
+        opacity: clamp(0, 3 - #{$-depth}, 1);
+        translate: 0 calc(#{$-depth} * -1 * #{woven.token(space-3)});
+        scale: calc(1 - #{$-depth} * 0.05);
+    }
+
+    // Fully hidden behind the stack: not focusable until the stack fans out
+    .wu-toast-region.animated:not(:hover, :focus-within) > .wu-toast:nth-last-child(n + 4),
+    .wu-animated .wu-toast-region:not(:hover, :focus-within) > .wu-toast:nth-last-child(n + 4) {
+        visibility: hidden;
+    }
+
+    .wu-toast-region.top-start.animated > .wu-toast,
+    .wu-toast-region.top-end.animated > .wu-toast,
+    .wu-animated .wu-toast-region.top-start > .wu-toast,
+    .wu-animated .wu-toast-region.top-end > .wu-toast {
+        align-self: start;
+        transform-origin: 50% 0;
+        translate: 0 calc(#{$-depth} * #{woven.token(space-3)});
+    }
+
+    .wu-toast-region.animated:is(:hover, :focus-within) > .wu-toast,
+    .wu-animated .wu-toast-region:is(:hover, :focus-within) > .wu-toast {
+        opacity: 1;
+        translate: 0 calc(#{$-depth} * (-100% - #{$-gap}));
+        scale: 1;
+    }
+
+    .wu-toast-region.top-start.animated:is(:hover, :focus-within) > .wu-toast,
+    .wu-toast-region.top-end.animated:is(:hover, :focus-within) > .wu-toast,
+    .wu-animated .wu-toast-region.top-start:is(:hover, :focus-within) > .wu-toast,
+    .wu-animated .wu-toast-region.top-end:is(:hover, :focus-within) > .wu-toast {
+        translate: 0 calc(#{$-depth} * (100% + #{$-gap}));
+    }
+}
+
+// Opt-in motion: toasts slide in, fade out, and glide between stack positions
+@media (prefers-reduced-motion: no-preference) {
+    .wu-toast-region.animated > .wu-toast,
+    .wu-animated .wu-toast-region > .wu-toast {
+        transition:
+            opacity woven.token(duration-300) woven.token(ease-out),
+            translate woven.token(duration-500) var(--wu-kit-ease-spring),
+            scale woven.token(duration-500) var(--wu-kit-ease-spring),
+            visibility woven.token(duration-300) allow-discrete,
+            display woven.token(duration-300) allow-discrete;
+    }
+
+    // Entry: after the stack rules, so the slide wins on the first frame
+    .wu-toast-region.animated > .wu-toast,
+    .wu-animated .wu-toast-region > .wu-toast {
+        @starting-style {
+            opacity: 0;
+            translate: 0 100%;
+        }
+    }
+
+    .wu-toast-region.top-start.animated > .wu-toast,
+    .wu-toast-region.top-end.animated > .wu-toast,
+    .wu-animated .wu-toast-region.top-start > .wu-toast,
+    .wu-animated .wu-toast-region.top-end > .wu-toast {
+        @starting-style {
+            opacity: 0;
+            translate: 0 -100%;
+        }
+    }
+
+    // Closing: fade out before removal
+    .wu-toast-region.animated > .wu-toast[hidden],
+    .wu-animated .wu-toast-region > .wu-toast[hidden] {
+        opacity: 0;
+    }
+}
+
+@media (forced-colors: active) {
+    .wu-toast {
+        border-inline-start-width: woven.token(border-width-4);
+    }
+}

package/src/components/_toggle.scss

@@ -0,0 +1,171 @@
+////
+//// @component wu-toggle
+//// On and off switch built on a native checkbox with `role="switch"`.
+////
+//// The track is 2.25em by 1.25em with a 1em thumb, so it follows the root type size and the `sm` and `lg` steps.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <label class="wu-toggle">
+////     <input class="wu-toggle-input" type="checkbox" role="switch" checked>
+////     <span class="wu-toggle-label">Email notifications</span>
+////   </label>
+//// @example html
+////   <label class="wu-toggle lg animated">
+////     <input class="wu-toggle-input" type="checkbox" role="switch" aria-invalid="true">
+////     <span class="wu-toggle-label">Accept the terms</span>
+////   </label>
+//// @modifier sm | lg - Smaller or larger switch and label @since 1.0.0
+//// @modifier animated - Spring thumb when the user allows motion; `wu-animated` on an ancestor does the same @since 1.0.0
+//// @part wu-toggle-input - The checkbox: track and thumb @since 1.0.0
+//// @part wu-toggle-label - Label text beside the switch @since 1.0.0
+//// @state :checked - Brand track and the thumb moved to the end @since 1.0.0
+//// @state disabled - Half opacity and a not-allowed cursor @since 1.0.0
+//// @state aria-invalid="true" | :user-invalid - Danger outline @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-toggle {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: woven.token(space-2);
+    color: woven.token(text-regular);
+    font-size: woven.token(font-size-md);
+    line-height: woven.token(line-height-normal);
+    cursor: pointer;
+
+    &:has(.wu-toggle-input:disabled) {
+        opacity: woven.token(opacity-50);
+        cursor: not-allowed;
+    }
+}
+
+.wu-toggle-input {
+    display: inline-grid;
+    flex: none;
+    place-items: center start;
+    width: 2.25em;
+    height: 1.25em;
+    margin: 0;
+    margin-block-start: calc((1lh - 1.25em) / 2);
+    padding-inline: 0.125em;
+    border: 0;
+    border-radius: woven.token(radius-full);
+    background: woven.token(border-control);
+    font-size: inherit;
+    line-height: inherit;
+    vertical-align: middle;
+    appearance: none;
+    cursor: pointer;
+    transition-property: background-color;
+    transition-duration: woven.token(duration-150);
+    transition-timing-function: woven.token(ease-out);
+
+    // Thumb
+    &::before {
+        content: "";
+        width: 1em;
+        height: 1em;
+        border-radius: woven.token(radius-full);
+        background: woven.token(bg-surface);
+        box-shadow: woven.token(shadow-sm);
+    }
+
+    &:hover:not(:disabled, :checked) {
+        background: woven.token(border-control-hover);
+    }
+
+    &:is([aria-invalid="true"], :user-invalid) {
+        outline: woven.token(border-width-1) solid woven.token(danger);
+        outline-offset: woven.token(border-width-1);
+    }
+
+    &:focus-visible {
+        outline: woven.token(border-focus-width) solid woven.token(border-focus);
+        outline-offset: woven.token(border-focus-offset);
+    }
+
+    &:checked {
+        background: woven.token(brand);
+
+        &::before {
+            background: woven.token(text-on-brand);
+            translate: 1em 0;
+        }
+
+        &:hover:not(:disabled) {
+            background: woven.token(brand-hover);
+        }
+    }
+
+    &:checked:dir(rtl)::before {
+        translate: -1em 0;
+    }
+
+    &:disabled {
+        opacity: woven.token(opacity-50);
+        cursor: not-allowed;
+    }
+
+    .wu-toggle > &:disabled {
+        opacity: 1;
+    }
+}
+
+.wu-toggle-label {
+    min-width: 0;
+}
+
+.wu-toggle.sm {
+    font-size: woven.token(font-size-sm);
+}
+
+.wu-toggle.lg {
+    font-size: woven.token(font-size-lg);
+}
+
+// Calm default: the thumb slides without overshoot
+@media (prefers-reduced-motion: no-preference) {
+    .wu-toggle-input::before {
+        transition: translate woven.token(duration-150) woven.token(ease-out);
+    }
+
+    // Opt-in motion: spring thumb
+    .wu-toggle.animated .wu-toggle-input::before,
+    .wu-animated .wu-toggle-input::before {
+        transition: translate woven.token(duration-500) var(--wu-kit-ease-spring);
+    }
+}
+
+@media (forced-colors: active) {
+    .wu-toggle-input {
+        padding-inline: calc(0.125em - #{woven.token(border-width-1)});
+        border: woven.token(border-width-1) solid CanvasText;
+        background: Canvas;
+        forced-color-adjust: none;
+
+        &::before {
+            background: CanvasText;
+        }
+
+        &:checked {
+            border-color: Highlight;
+            background: Highlight;
+
+            &::before {
+                background: HighlightText;
+            }
+        }
+
+        &:disabled {
+            border-color: GrayText;
+
+            &::before {
+                background: GrayText;
+            }
+        }
+    }
+}