@wovenui/components 0.0.0-stage → 1.0.0

package/src/components/_sidebar.scss

@@ -0,0 +1,300 @@
+////
+//// @component wu-sidebar
+//// Vertical navigation with sections, link lists and collapsible groups.
+////
+//// Use a `nav` with an `aria-label`, and mark the current link with `aria-current="page"`. A collapsible group is a `details` with the `wu-sidebar-group` class and a `summary` with `wu-sidebar-toggle`; the toggle may also be a `button` with `aria-expanded`.
+////
+//// On narrow screens put the sidebar in a `dialog` with `wu-drawer inline-start`, where it fills the drawer.
+////
+//// Icon rail: add `collapsed`; each link holds an `svg` and a `wu-sidebar-label`, shown as a tooltip on hover or focus.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <nav class="wu-sidebar" aria-label="Main">
+////     <div class="wu-sidebar-section">
+////       <h2 class="wu-sidebar-heading">Workspace</h2>
+////       <ul class="wu-sidebar-list">
+////         <li><a class="wu-sidebar-link" href="/dashboard" aria-current="page">Dashboard</a></li>
+////         <li>
+////           <details class="wu-sidebar-group" open>
+////             <summary class="wu-sidebar-toggle">Projects</summary>
+////             <ul class="wu-sidebar-list">
+////               <li><a class="wu-sidebar-link" href="/projects/apollo">Apollo</a></li>
+////             </ul>
+////           </details>
+////         </li>
+////       </ul>
+////     </div>
+////     <div class="wu-sidebar-footer">Signed in as Sam</div>
+////   </nav>
+//// @example html
+////   <nav class="wu-sidebar collapsed pinned" aria-label="Main">
+////     <ul class="wu-sidebar-list">
+////       <li>
+////         <a class="wu-sidebar-link" href="/settings">
+////           <svg aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" /></svg>
+////           <span class="wu-sidebar-label">Settings</span>
+////         </a>
+////       </li>
+////     </ul>
+////   </nav>
+//// @modifier pinned - Sticks beside scrolling content and scrolls on its own @since 1.0.0
+//// @modifier collapsed - Icon rail: labels and headings are visually hidden, and a label shows as a tooltip on hover or focus @since 1.0.0
+//// @modifier animated - Animates the width, the chevron and the opening of groups when the user allows motion; `wu-animated` on an ancestor does the same @since 1.0.0
+//// @part wu-sidebar-header - Top row for a logo or title @since 1.0.0
+//// @part wu-sidebar-footer - Bottom row, pushed to the end @since 1.0.0
+//// @part wu-sidebar-section - Group of a heading and a list @since 1.0.0
+//// @part wu-sidebar-heading - Small muted section heading @since 1.0.0
+//// @part wu-sidebar-list - Vertical list of links; nested inside a group it is indented @since 1.0.0
+//// @part wu-sidebar-group - A `details` element that collapses a nested list @since 1.0.0
+//// @part wu-sidebar-toggle - Row that opens or closes a group, with a chevron @since 1.0.0
+//// @part wu-sidebar-link - Navigation link row @since 1.0.0
+//// @part wu-sidebar-label - Text label of a link; hidden and shown as a tooltip when collapsed @since 1.0.0
+//// @variable --wu-sidebar--Width [16rem] - Sidebar width @since 1.0.0
+//// @variable --wu-sidebar--CollapsedWidth [calc(1em + 3rem)] - Width of the icon rail @since 1.0.0
+//// @state aria-current="page" - The current link: tinted fill and a bar at the inline start @since 1.0.0
+//// @state open | aria-expanded="true" - The chevron points down @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: woven.token(space-4);
+    inline-size: var(--wu-sidebar--Width, #{woven.token(space-64)});
+    max-inline-size: 100%;
+    padding: woven.token(space-3);
+    border-inline-end: woven.token(border-width-1) solid woven.token(border-regular);
+    background: woven.token(bg-surface);
+    color: woven.token(text-regular);
+    font-size: woven.token(font-size-sm);
+}
+
+.wu-drawer > .wu-sidebar {
+    flex: 1;
+    inline-size: auto;
+    border-inline-end: 0;
+    overflow-y: auto;
+}
+
+// Sticks beside scrolling content and scrolls on its own
+.wu-sidebar.pinned {
+    position: sticky;
+    inset-block-start: 0;
+    align-self: flex-start;
+    max-block-size: 100dvh;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+
+.wu-sidebar-header,
+.wu-sidebar-footer {
+    display: flex;
+    align-items: center;
+    gap: woven.token(space-2);
+    padding-inline: woven.token(space-3);
+}
+
+.wu-sidebar-footer {
+    margin-block-start: auto;
+}
+
+.wu-sidebar-section {
+    display: flex;
+    flex-direction: column;
+    gap: woven.token(space-1);
+}
+
+.wu-sidebar-heading {
+    margin: 0;
+    padding-inline: woven.token(space-3);
+    color: woven.token(text-muted);
+    font-size: woven.token(font-size-xs);
+    font-weight: woven.token(font-weight-semibold);
+    line-height: woven.token(line-height-normal);
+}
+
+.wu-sidebar-list {
+    display: flex;
+    flex-direction: column;
+    gap: woven.token(space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.wu-sidebar-group > .wu-sidebar-list {
+    margin-block-start: woven.token(space-1);
+    padding-inline-start: woven.token(space-4);
+}
+
+// Link and group toggle share one row look; the toggle may also be a <button aria-expanded>
+.wu-sidebar-link,
+.wu-sidebar-toggle {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: woven.token(space-2);
+    width: 100%;
+    min-height: woven.token(control-height-sm);
+    padding-block: 0;
+    padding-inline: woven.token(space-3);
+    border: 0;
+    border-radius: woven.token(radius-sm);
+    background: transparent;
+    color: woven.token(text-muted);
+    font: inherit;
+    font-weight: woven.token(font-weight-medium);
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+    transition-property: background-color, color;
+    transition-duration: woven.token(duration-150);
+    transition-timing-function: woven.token(ease-out);
+
+    &:hover {
+        background: woven.token(bg-hover);
+        color: woven.token(text-regular);
+    }
+
+    // Inset ring, so a scrolling sidebar does not clip it
+    &:focus-visible {
+        outline: woven.token(border-focus-width) solid woven.token(border-focus);
+        outline-offset: calc(-1 * #{woven.token(border-focus-width)});
+    }
+
+    > svg {
+        flex-shrink: 0;
+        width: 1em;
+        height: 1em;
+    }
+}
+
+// Current page: tint plus a bar, so color is not the only signal
+.wu-sidebar-link[aria-current="page"] {
+    background: woven.token(bg-selected);
+    color: woven.token(text-brand);
+
+    &::before {
+        content: "";
+        position: absolute;
+        inset-block: woven.token(space-1);
+        inset-inline-start: 0;
+        width: woven.token(border-width-2);
+        border-radius: woven.token(radius-full);
+        background: woven.token(brand);
+    }
+}
+
+.wu-sidebar-toggle {
+    list-style: none;
+
+    &::-webkit-details-marker {
+        display: none;
+    }
+
+    // Chevron drawn with two borders: points to the end when closed, down when open
+    &::after {
+        content: "";
+        flex: none;
+        width: 0.4em;
+        height: 0.4em;
+        margin-inline-start: auto;
+        border-right: woven.token(border-width-2) solid currentcolor;
+        border-bottom: woven.token(border-width-2) solid currentcolor;
+        rotate: -45deg;
+    }
+
+    &:dir(rtl)::after {
+        rotate: 135deg;
+    }
+}
+
+.wu-sidebar-group[open] > .wu-sidebar-toggle::after,
+.wu-sidebar-toggle[aria-expanded="true"]::after {
+    rotate: 45deg;
+}
+
+.wu-sidebar-group:has([aria-current="page"]) > .wu-sidebar-toggle {
+    color: woven.token(text-regular);
+}
+
+// Icon rail: labels hidden visually but kept for screen readers, shown as a tooltip at the inline end on hover or focus
+.wu-sidebar.collapsed {
+    inline-size: var(--wu-sidebar--CollapsedWidth, calc(1em + 4 * #{woven.token(space-3)}));
+    overflow: visible;
+
+    .wu-sidebar-heading,
+    .wu-sidebar-label {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+    }
+
+    .wu-sidebar-group > .wu-sidebar-list {
+        padding-inline-start: 0;
+    }
+
+    .wu-sidebar-toggle::after {
+        display: none;
+    }
+
+    :is(.wu-sidebar-link, .wu-sidebar-toggle):is(:hover, :focus-visible) > .wu-sidebar-label {
+        inset-block-start: 50%;
+        inset-inline-start: 100%;
+        z-index: woven.token(z-tooltip);
+        width: auto;
+        height: auto;
+        margin-inline-start: woven.token(space-2);
+        padding-block: woven.token(space-1);
+        padding-inline: woven.token(space-2);
+        border-radius: woven.token(radius-xs);
+        background: woven.token(text-regular);
+        color: woven.token(text-inverted);
+        box-shadow: woven.token(shadow-md);
+        font-weight: woven.token(font-weight-normal);
+        clip-path: none;
+        pointer-events: none;
+        translate: 0 -50%;
+    }
+}
+
+// Opt-in motion: the chevron turns and groups slide open
+@media (prefers-reduced-motion: no-preference) {
+    .wu-sidebar.animated,
+    .wu-animated .wu-sidebar {
+        .wu-sidebar-toggle::after {
+            transition: rotate woven.token(duration-200) woven.token(ease-out);
+        }
+    }
+
+    .wu-sidebar.animated,
+    .wu-animated .wu-sidebar {
+        transition: inline-size woven.token(duration-200) woven.token(ease-out);
+    }
+
+    @supports (interpolate-size: allow-keywords) and selector(::details-content) {
+        .wu-sidebar.animated,
+        .wu-animated .wu-sidebar {
+            interpolate-size: allow-keywords;
+
+            .wu-sidebar-group::details-content {
+                block-size: 0;
+                overflow: clip;
+                transition:
+                    block-size woven.token(duration-200) woven.token(ease-out),
+                    content-visibility woven.token(duration-200) allow-discrete;
+            }
+
+            .wu-sidebar-group[open]::details-content {
+                block-size: auto;
+            }
+        }
+    }
+}

package/src/components/_skeleton.scss

@@ -0,0 +1,90 @@
+////
+//// @component wu-skeleton
+//// Placeholder shapes shown while content loads.
+////
+//// Placeholders are decorative: add `aria-hidden="true"` to each skeleton and `aria-busy="true"` to the region being loaded, plus visible or hidden Loading text. Remove both when the content arrives.
+////
+//// The default shape is a block. Adjacent `text` skeletons stack with a gap, and a last `text` line is shorter.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <div aria-busy="true">
+////     <span class="sr-only">Loading</span>
+////     <div class="wu-skeleton circle animated" aria-hidden="true"></div>
+////     <div class="wu-skeleton text animated" aria-hidden="true"></div>
+////     <div class="wu-skeleton text animated" aria-hidden="true"></div>
+////   </div>
+//// @example html
+////   <div class="wu-skeleton" aria-hidden="true" style="--wu-skeleton--Height: 8rem"></div>
+//// @modifier text - One line of text: height of `1em` @since 1.0.0
+//// @modifier circle - Round shape for an avatar @since 1.0.0
+//// @modifier animated - Shimmer sweep, staggered across siblings where supported, when the user allows motion; `wu-animated` on an ancestor does the same @since 1.0.0
+//// @variable --wu-skeleton--Width [100%] - Width; a last `text` line defaults to 60% @since 1.0.0
+//// @variable --wu-skeleton--Height [6rem] - Height; `text` defaults to 1em @since 1.0.0
+//// @variable --wu-skeleton--Size [2.5rem] - Width and height of a `circle` @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+$base: color-mix(in srgb, #{woven.token(text-regular)} 10%, transparent);
+$shine: color-mix(in srgb, #{woven.token(text-regular)} 6%, transparent);
+
+.wu-skeleton {
+    display: block;
+    width: var(--wu-skeleton--Width, 100%);
+    height: var(--wu-skeleton--Height, #{woven.token(space-24)});
+    border-radius: woven.token(radius-md);
+    background: linear-gradient(90deg, transparent 25%, #{$shine} 50%, transparent 75%) 150% 0 / 200% 100% no-repeat #{$base};
+}
+
+.wu-skeleton.text {
+    height: var(--wu-skeleton--Height, 1em);
+    border-radius: woven.token(radius-sm);
+}
+
+.wu-skeleton.text + .wu-skeleton.text {
+    margin-block-start: woven.token(space-2);
+}
+
+// Shorter last line of a paragraph
+.wu-skeleton.text:last-child:not(:first-child) {
+    width: var(--wu-skeleton--Width, 60%);
+}
+
+.wu-skeleton.circle {
+    flex-shrink: 0;
+    width: var(--wu-skeleton--Size, #{woven.token(space-10)});
+    height: var(--wu-skeleton--Size, #{woven.token(space-10)});
+    border-radius: woven.token(radius-full);
+}
+
+@media (forced-colors: active) {
+    .wu-skeleton {
+        border: woven.token(border-width-1) solid GrayText;
+    }
+}
+
+// Opt-in shimmer, a staggered wave where sibling-index() is supported; it sweeps in the reading direction
+@media (prefers-reduced-motion: no-preference) {
+    .wu-skeleton.animated,
+    .wu-animated .wu-skeleton {
+        animation: wu-skeleton-shimmer 1.6s ease-in-out infinite;
+        animation-delay: calc((sibling-index() - 1) * 80ms);
+
+        &:dir(rtl) {
+            animation-direction: reverse;
+        }
+    }
+}
+
+@keyframes wu-skeleton-shimmer {
+    from {
+        background-position: 150% 0;
+    }
+
+    to {
+        background-position: -50% 0;
+    }
+}

package/src/components/_spinner.scss

@@ -0,0 +1,84 @@
+////
+//// @component wu-spinner
+//// Loading ring in the current text color, with an overlay for busy regions.
+////
+//// Pair it with `role="status"` and hidden text, or use `aria-hidden="true"` next to visible text. Reduced motion is handled by core reset.
+////
+//// The overlay covers its parent, dims the content and centers a spinner with optional text. The parent becomes the positioning box unless it already has a position.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <span class="wu-spinner" role="status"><span class="sr-only">Loading</span></span>
+////   <button class="wu-btn" type="button" aria-busy="true"><span class="wu-spinner sm" aria-hidden="true"></span> Saving</button>
+//// @example html
+////   <div aria-busy="true">
+////     <div inert>Orders table</div>
+////     <div class="wu-spinner-overlay"><span class="wu-spinner" aria-hidden="true"></span><span>Loading orders</span></div>
+////   </div>
+//// @modifier sm | lg - Smaller (1rem) or larger (2rem, thicker band) ring @since 1.0.0
+//// @part wu-spinner-overlay - Layer that covers a busy region and centers a spinner with text @since 1.0.0
+//// @variable --wu-spinner--Size [1.25rem] - Width and height of the ring @since 1.0.0
+//// @variable --wu-spinner-overlay--Background [85% surface] - Overlay background @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-spinner {
+    display: inline-block;
+    flex-shrink: 0;
+    width: var(--wu-spinner--Size, #{woven.token(space-5)});
+    height: var(--wu-spinner--Size, #{woven.token(space-5)});
+    border: woven.token(border-width-2) solid color-mix(in srgb, currentcolor 25%, transparent);
+    border-block-start-color: currentcolor;
+    border-radius: woven.token(radius-full);
+    vertical-align: middle;
+    animation: wu-spinner-rotate 0.75s linear infinite;
+}
+
+.wu-spinner.sm {
+    width: var(--wu-spinner--Size, #{woven.token(space-4)});
+    height: var(--wu-spinner--Size, #{woven.token(space-4)});
+}
+
+.wu-spinner.lg {
+    width: var(--wu-spinner--Size, #{woven.token(space-8)});
+    height: var(--wu-spinner--Size, #{woven.token(space-8)});
+    border-width: woven.token(border-width-4);
+}
+
+:where(:has(> .wu-spinner-overlay)) {
+    position: relative;
+}
+
+.wu-spinner-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: woven.token(z-hover);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: woven.token(space-2);
+    padding: woven.token(space-4);
+    border-radius: inherit;
+    background: var(--wu-spinner-overlay--Background, color-mix(in srgb, #{woven.token(bg-surface)} 85%, transparent));
+    color: woven.token(text-muted);
+    font-size: woven.token(font-size-sm);
+    text-align: center;
+}
+
+.wu-spinner-overlay > :not(.wu-spinner) {
+    padding: woven.token(space-1) woven.token(space-3);
+    border-radius: woven.token(radius-full);
+    background: woven.token(bg-surface);
+}
+
+// No reduced-motion rule: core's reset already stops animation under reduced motion
+
+@keyframes wu-spinner-rotate {
+    to {
+        rotate: 360deg;
+    }
+}

package/src/components/_stat.scss

@@ -0,0 +1,92 @@
+////
+//// @component wu-stat
+//// One figure with a label, a large value in tabular figures and an optional change line.
+////
+//// Keep the signed number as text in the change line; the arrow and the color repeat it, they never replace it.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <div class="wu-stat">
+////     <span class="wu-stat-label">Active users</span>
+////     <span class="wu-stat-value">1,284</span>
+////     <span class="wu-stat-delta success" data-trend="up">+12% from last month</span>
+////   </div>
+//// @example html
+////   <div class="wu-stat lg">
+////     <span class="wu-stat-label">Open tickets</span>
+////     <span class="wu-stat-value">37</span>
+////     <span class="wu-stat-delta" data-trend="down">-5 this week</span>
+////   </div>
+//// @modifier sm | lg - Smaller or larger value @since 1.0.0
+//// @modifier success | danger - On the change line: success or danger text color @since 1.0.0
+//// @part wu-stat-label - Muted label @since 1.0.0
+//// @part wu-stat-value - Large value @since 1.0.0
+//// @part wu-stat-delta - Change line, muted by default @since 1.0.0
+//// @state data-trend="up" | data-trend="down" - On the change line: draws an up or down arrow @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-stat {
+    display: flex;
+    flex-direction: column;
+    gap: woven.token(space-1);
+}
+
+.wu-stat-label {
+    color: woven.token(text-muted);
+    font-size: woven.token(font-size-sm);
+    font-weight: woven.token(font-weight-medium);
+}
+
+.wu-stat-value {
+    color: woven.token(text-regular);
+    font-size: woven.token(font-size-3xl);
+    font-variant-numeric: tabular-nums;
+    font-weight: woven.token(font-weight-semibold);
+    line-height: woven.token(line-height-tight);
+}
+
+// Change line: keep the signed number as text; data-trend draws the arrow, role words set the tone
+.wu-stat-delta {
+    display: inline-flex;
+    align-items: center;
+    gap: woven.token(space-1);
+    color: woven.token(text-muted);
+    font-size: woven.token(font-size-sm);
+    font-variant-numeric: tabular-nums;
+    font-weight: woven.token(font-weight-medium);
+}
+
+.wu-stat-delta[data-trend]::before {
+    content: "";
+    width: woven.token(space-2);
+    height: woven.token(space-2);
+    background: currentcolor;
+}
+
+.wu-stat-delta[data-trend="up"]::before {
+    clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+.wu-stat-delta[data-trend="down"]::before {
+    clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+
+.wu-stat-delta.success {
+    color: woven.token(text-success);
+}
+
+.wu-stat-delta.danger {
+    color: woven.token(text-danger);
+}
+
+.wu-stat.sm .wu-stat-value {
+    font-size: woven.token(font-size-xl);
+}
+
+.wu-stat.lg .wu-stat-value {
+    font-size: woven.token(font-size-4xl);
+}