@wovenui/components 0.0.0-stage → 1.0.0

package/src/components/_dot.scss

@@ -0,0 +1,115 @@
+////
+//// @component wu-dot
+//// Small status dot for use next to status text, tinted by role.
+////
+//// Add `aria-hidden="true"` and put the meaning in the text beside it. `success`, `warning` and `danger` also change the shape (check, triangle, octagon), so color is never the only signal.
+////
+//// A corner dot pins to a `wu-badge-host`, the same wrapper a corner badge uses, and reads `--wu-badge--Offset` and `--wu-avatar--RingColor` from the badge and avatar.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <span class="wu-dot success" aria-hidden="true"></span> Online
+//// @example html
+////   <span class="wu-dot danger animated" aria-hidden="true"></span> Live
+//// @example html
+////   <span class="wu-badge-host">
+////     <button class="wu-btn" type="button" aria-label="Inbox, new messages">Inbox</button>
+////     <span class="wu-dot corner brand" aria-hidden="true"></span>
+////   </span>
+//// @modifier brand | success | danger | warning | info - Role color; success, warning and danger also change the shape @since 1.0.0
+//// @modifier corner - Pins the dot to the top inline-end corner of a `wu-badge-host` @since 1.0.0
+//// @modifier animated - Fading ring for live status when the user allows motion; `wu-animated` on an ancestor does the same @since 1.0.0
+//// @variable --wu-dot--Size [var(--wu-space-2)] - Width and height of the dot @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-dot {
+    display: inline-block;
+    position: relative;
+    flex-shrink: 0;
+    width: var(--wu-dot--Size, #{woven.token(space-2)});
+    height: var(--wu-dot--Size, #{woven.token(space-2)});
+    border-radius: woven.token(radius-full);
+    background: currentcolor;
+    color: woven.token(border-strong);
+    vertical-align: middle;
+}
+
+@each $role in "brand", "success", "danger", "warning", "info" {
+    .wu-dot.#{$role} {
+        color: woven.token($role);
+    }
+}
+
+// Corner: pinned to the top inline-end corner of a .wu-badge-host (same rule as in the badge)
+.wu-badge-host {
+    display: inline-flex;
+    position: relative;
+    vertical-align: middle;
+}
+
+.wu-dot.corner {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    translate: var(--wu-badge--Offset, 50%) -50%;
+
+    &:dir(rtl) {
+        translate: calc(-1 * var(--wu-badge--Offset, 50%)) -50%;
+    }
+
+    &:not(.success, .warning, .danger) {
+        box-shadow: 0 0 0 woven.token(border-width-2) var(--wu-avatar--RingColor, #{woven.token(bg-surface)});
+    }
+}
+
+// Shape markers from _shared.scss, drawn on ::before so the live ring is not clipped
+.wu-dot:is(.success, .warning, .danger) {
+    border-radius: 0;
+    background: none;
+
+    &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: currentcolor;
+    }
+}
+
+.wu-dot.success::before,
+.wu-dot.success::after {
+    clip-path: var(--wu-kit-marker-check);
+}
+
+.wu-dot.warning::before,
+.wu-dot.warning::after {
+    clip-path: var(--wu-kit-marker-triangle);
+}
+
+.wu-dot.danger::before,
+.wu-dot.danger::after {
+    clip-path: var(--wu-kit-marker-octagon);
+}
+
+// Opt-in motion: a fading ring for live status
+@media (prefers-reduced-motion: no-preference) {
+    .wu-dot.animated::after,
+    .wu-animated .wu-dot::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        background: currentcolor;
+        animation: wu-dot-ping 1.5s woven.token(ease-out) infinite;
+    }
+}
+
+@keyframes wu-dot-ping {
+    to {
+        opacity: 0;
+        scale: 2.5;
+    }
+}

package/src/components/_drawer.scss

@@ -0,0 +1,200 @@
+////
+//// @component wu-drawer
+//// Side panel on the native `dialog` element, docked to the inline end, the inline start or the bottom.
+////
+//// Opens with invoker commands (`commandfor` and `command`), no script. With `show-modal` the page does not scroll while it is open; the page keeps its scrollbar gutter so it does not shift. `show` opens it non-modal and leaves the page alone.
+////
+//// Docks to the inline end by default; `inline-start` or `bottom` moves it. Right-to-left pages mirror the slide.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <button class="wu-btn" type="button" commandfor="d1" command="show-modal">Filters</button>
+////   <dialog class="wu-drawer" id="d1" aria-labelledby="d1-title" closedby="any">
+////     <header class="wu-drawer-header">
+////       <h2 class="wu-drawer-title" id="d1-title">Filters</h2>
+////       <button class="wu-drawer-close" type="button" commandfor="d1" command="close" aria-label="Close"></button>
+////     </header>
+////     <div class="wu-drawer-body">Content</div>
+////     <form class="wu-drawer-footer" method="dialog">
+////       <button class="wu-btn brand">Apply</button>
+////     </form>
+////   </dialog>
+//// @example html
+////   <dialog class="wu-drawer bottom animated" id="d2" aria-label="Details" closedby="any">
+////     <div class="wu-drawer-body">Content</div>
+////   </dialog>
+//// @modifier inline-start - Docks to the inline start instead of the inline end @since 1.0.0
+//// @modifier bottom - Docks to the bottom edge with rounded top corners, up to `--wu-drawer--MaxHeight` @since 1.0.0
+//// @modifier animated - Slides in from its edge and fades the backdrop when the user allows motion; `wu-animated` on an ancestor does the same @since 1.0.0
+//// @part wu-drawer-header - Top row with the title and close button @since 1.0.0
+//// @part wu-drawer-title - Heading in the header @since 1.0.0
+//// @part wu-drawer-body - Scrolling content area that fills the drawer @since 1.0.0
+//// @part wu-drawer-footer - Bottom row for actions, aligned to the inline end @since 1.0.0
+//// @part wu-drawer-close - Close button drawn by the shared close style; give it an `aria-label` @since 1.0.0
+//// @variable --wu-drawer--Width [24rem] - Drawer width when docked to a side @since 1.0.0
+//// @variable --wu-drawer--MaxHeight [75dvh] - Maximum height of a bottom drawer @since 1.0.0
+//// @variable --wu-drawer--Backdrop [50% black, 70% in dark themes] - Color behind a modal drawer @since 1.0.0
+//// @state open - Shown as a flex column so the body scrolls between header and footer @since 1.0.0
+//// @state :modal - Locks page scroll while the drawer is open with `show-modal` @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+@use "../close";
+
+.wu-drawer {
+    position: fixed;
+    inset-block: 0;
+    inset-inline: auto 0;
+    inline-size: var(--wu-drawer--Width, 24rem);
+    max-inline-size: calc(100% - #{woven.token(space-8)});
+    block-size: auto;
+    max-block-size: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-inline-start: woven.token(border-width-1) solid woven.token(border-regular);
+    background: woven.token(bg-surface);
+    color: woven.token(text-regular);
+    box-shadow: woven.token(shadow-xl);
+    z-index: woven.token(z-drawer);
+
+    &[open] {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &::backdrop {
+        background: var(--wu-drawer--Backdrop, color-mix(in srgb, #{woven.token(black)} 50%, transparent));
+
+        // Stronger in dark themes, so the drawer stands apart
+        @include woven.dark-mode {
+            background: var(--wu-drawer--Backdrop, color-mix(in srgb, #{woven.token(black)} 70%, transparent));
+        }
+    }
+}
+
+// Page scroll lock while one is open with showModal(); show() opens it non-modal and leaves the page alone.
+// The gutter keeps the page from shifting when its scrollbar goes away.
+:root:has(.wu-drawer:modal) {
+    overflow: hidden;
+    scrollbar-gutter: stable;
+}
+
+.wu-drawer.inline-start {
+    inset-inline: 0 auto;
+    border-inline-start: 0;
+    border-inline-end: woven.token(border-width-1) solid woven.token(border-regular);
+}
+
+.wu-drawer.bottom {
+    inset-block: auto 0;
+    inset-inline: 0;
+    inline-size: auto;
+    max-inline-size: none;
+    max-block-size: var(--wu-drawer--MaxHeight, 75dvh);
+    border-inline-start: 0;
+    border-block-start: woven.token(border-width-1) solid woven.token(border-regular);
+    border-start-start-radius: woven.token(radius-lg);
+    border-start-end-radius: woven.token(radius-lg);
+    padding-block-end: env(safe-area-inset-bottom, 0);
+}
+
+.wu-drawer-header,
+.wu-drawer-footer {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: woven.token(space-2);
+    margin: 0;
+    padding-block: woven.token(space-4);
+    padding-inline: woven.token(space-5);
+}
+
+.wu-drawer-header {
+    justify-content: space-between;
+    border-block-end: woven.token(border-width-1) solid woven.token(border-regular);
+}
+
+.wu-drawer-title {
+    margin: 0;
+    font-size: woven.token(font-size-lg);
+    font-weight: woven.token(font-weight-semibold);
+    line-height: woven.token(line-height-tight);
+}
+
+.wu-drawer-body {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    padding: woven.token(space-5);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+
+.wu-drawer-footer {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    border-block-start: woven.token(border-width-1) solid woven.token(border-regular);
+}
+
+.wu-drawer-close {
+    @include close.button;
+
+    margin-inline-end: calc(-1 * #{woven.token(space-2)});
+}
+
+// Off-screen position for the slide, mirrored in right-to-left pages
+@mixin -offscreen {
+    translate: 100% 0;
+
+    &:dir(rtl),
+    &.inline-start {
+        translate: -100% 0;
+    }
+
+    &.inline-start:dir(rtl) {
+        translate: 100% 0;
+    }
+
+    &.bottom {
+        translate: 0 100%;
+    }
+}
+
+// Opt-in motion: the drawer slides in from its edge and back out, the backdrop fades
+@media (prefers-reduced-motion: no-preference) {
+    .wu-drawer.animated,
+    .wu-animated .wu-drawer {
+        transition:
+            translate woven.token(duration-300) woven.token(ease-out),
+            display woven.token(duration-300) allow-discrete,
+            overlay woven.token(duration-300) allow-discrete;
+
+        &:not([open]) {
+            @include -offscreen;
+        }
+
+        &[open] {
+            @starting-style {
+                @include -offscreen;
+            }
+        }
+
+        &::backdrop {
+            opacity: 0;
+            transition:
+                opacity woven.token(duration-300) woven.token(ease-out),
+                display woven.token(duration-300) allow-discrete,
+                overlay woven.token(duration-300) allow-discrete;
+        }
+
+        &[open]::backdrop {
+            opacity: 1;
+
+            @starting-style {
+                opacity: 0;
+            }
+        }
+    }
+}

package/src/components/_dropdown.scss

@@ -0,0 +1,182 @@
+////
+//// @component wu-dropdown
+//// Menu of links and buttons in a native popover, anchored under its trigger.
+////
+//// A button with `popovertarget` opens it; `commandfor` with `command="toggle-popover"` works as the trigger too. Esc and a click outside close it. `popovertargetaction="hide"` on a button item closes the menu after its click handler runs.
+////
+//// Opens under the trigger where anchor positioning exists and flips when there is no room; elsewhere it is centered in the viewport. Engines without implicit anchors need `anchor-name` on the trigger and `position-anchor` on the menu, with the same name.
+////
+//// `inline-end` aligns the menu's inline end with the trigger's, as for the caret of a split button.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <button class="wu-btn caret" type="button" popovertarget="menu1">Actions</button>
+////   <div class="wu-dropdown" id="menu1" popover>
+////     <a class="wu-dropdown-item" href="/edit">Edit</a>
+////     <button class="wu-dropdown-item" type="button" popovertarget="menu1" popovertargetaction="hide">Duplicate</button>
+////     <hr class="wu-dropdown-separator">
+////     <button class="wu-dropdown-item danger" type="button" popovertarget="menu1" popovertargetaction="hide">Delete</button>
+////   </div>
+//// @modifier inline-end - Aligns the menu's inline end with the trigger's inline end @since 1.0.0
+//// @modifier danger - On an item: danger text and a danger hover tint @since 1.0.0
+//// @modifier animated - Fades and slides in and out when the user allows motion; `wu-animated` on an ancestor does the same @since 1.0.0
+//// @part wu-dropdown-item - Link or button row in the menu; an `svg` child is sized as an icon @since 1.0.0
+//// @part wu-dropdown-separator - Line between groups of items; use an `hr` @since 1.0.0
+//// @variable --wu-dropdown--MinWidth [10rem] - Minimum menu width @since 1.0.0
+//// @variable --wu-dropdown--MaxHeight [20rem] - Maximum menu height before it scrolls @since 1.0.0
+//// @state disabled | aria-disabled="true" - On an item: half opacity, no pointer events @since 1.0.0
+//// @state :popover-open - A plain trigger button right before the menu takes a hover look while it is open @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-dropdown {
+    inset: 0;
+    inline-size: fit-content;
+    block-size: fit-content;
+    min-inline-size: var(--wu-dropdown--MinWidth, 10rem);
+    max-block-size: var(--wu-dropdown--MaxHeight, 20rem);
+    margin: auto;
+    padding: woven.token(space-1);
+    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);
+    box-shadow: woven.token(shadow-lg);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    z-index: woven.token(z-dropdown);
+}
+
+@supports (anchor-name: --x) {
+    .wu-dropdown {
+        // auto keeps the implicit anchor, which normal drops without position-area
+        position-anchor: auto;
+        inset: auto;
+        inset-block-start: anchor(end);
+        inset-inline-start: anchor(self-start);
+        margin: 0;
+        margin-block: woven.token(space-1);
+        position-try-fallbacks:
+            flip-block,
+            flip-inline,
+            flip-block flip-inline;
+    }
+
+    // A split button's caret ends the group, so the menu ends with the group too
+    .wu-dropdown.inline-end {
+        inset-inline: auto anchor(self-end);
+    }
+}
+
+// Plain trigger while its menu is open; a caret trigger turns its caret, a filled one keeps its fill
+button:not(.caret, .brand, .danger):has(+ .wu-dropdown:popover-open) {
+    border-color: woven.token(border-control-hover);
+    background: woven.token(bg-hover);
+}
+
+.wu-dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: woven.token(space-2);
+    inline-size: 100%;
+    min-block-size: 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: inherit;
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color woven.token(duration-150) woven.token(ease-out);
+
+    // App icon
+    > svg {
+        flex-shrink: 0;
+        inline-size: 1em;
+        block-size: 1em;
+    }
+
+    &:hover {
+        background: woven.token(bg-hover);
+    }
+
+    // Inset ring, so the scrolling menu 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)});
+    }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+        opacity: woven.token(opacity-50);
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+}
+
+.wu-dropdown-item.danger {
+    color: woven.token(text-danger);
+
+    &:hover {
+        background: woven.token(danger-subtle);
+    }
+}
+
+.wu-dropdown-separator {
+    block-size: 0;
+    margin-block: woven.token(space-1);
+    margin-inline: calc(-1 * #{woven.token(space-1)});
+    border: 0;
+    border-block-start: woven.token(border-width-1) solid woven.token(border-regular);
+}
+
+// Opt-in motion: the menu fades and slides in and out. Anchored, the slide is a margin on the trigger side,
+// which flip-block mirrors, so a menu flipped above slides up; centered, it is a short translate.
+@media (prefers-reduced-motion: no-preference) {
+    .wu-dropdown.animated,
+    .wu-animated .wu-dropdown {
+        opacity: 0;
+        translate: 0 calc(-1 * #{woven.token(space-1)});
+        transition:
+            opacity woven.token(duration-150) woven.token(ease-out),
+            translate woven.token(duration-150) woven.token(ease-out),
+            margin woven.token(duration-150) woven.token(ease-out),
+            display woven.token(duration-150) allow-discrete,
+            overlay woven.token(duration-150) allow-discrete;
+
+        &:popover-open {
+            opacity: 1;
+            translate: 0;
+
+            @starting-style {
+                opacity: 0;
+                translate: 0 calc(-1 * #{woven.token(space-1)});
+            }
+        }
+    }
+
+    @supports (anchor-name: --x) {
+        .wu-dropdown.animated,
+        .wu-animated .wu-dropdown {
+            translate: 0;
+            margin-block-start: 0;
+
+            &:popover-open {
+                margin-block-start: woven.token(space-1);
+
+                @starting-style {
+                    translate: 0;
+                    margin-block-start: 0;
+                }
+            }
+        }
+    }
+}

package/src/components/_empty-state.scss

@@ -0,0 +1,146 @@
+////
+//// @component wu-empty-state
+//// Centered message for a view with no content or a finished result, with an icon, title, text and actions.
+////
+//// The icon slot holds the app's own icon; left empty, it draws a calm empty-box shape. Result roles tint the slot, and an empty slot draws the alert's marker shape.
+////
+//// The title text carries the meaning ("Payment received"); the shape repeats it.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <div class="wu-empty-state">
+////     <span class="wu-empty-state-icon" aria-hidden="true"></span>
+////     <h3 class="wu-empty-state-title">No projects yet</h3>
+////     <p class="wu-empty-state-text">Create a project to get started.</p>
+////     <div class="wu-empty-state-actions">
+////       <button class="wu-btn brand" type="button">New project</button>
+////     </div>
+////   </div>
+//// @example html
+////   <div class="wu-empty-state success sm dashed">
+////     <span class="wu-empty-state-icon" aria-hidden="true"></span>
+////     <h3 class="wu-empty-state-title">Payment received</h3>
+////   </div>
+//// @modifier dashed - Dashed border and radius around the whole state @since 1.0.0
+//// @modifier sm - Compact size for use inside a card, panel or table @since 1.0.0
+//// @modifier success | warning | danger | info - Result: tints the icon slot; an empty slot draws the marker shape @since 1.0.0
+//// @part wu-empty-state-icon - Round icon slot; empty, it draws a shape @since 1.0.0
+//// @part wu-empty-state-title - Heading @since 1.0.0
+//// @part wu-empty-state-text - Supporting text, limited to a readable width @since 1.0.0
+//// @part wu-empty-state-actions - Centered row for buttons @since 1.0.0
+//// @state :empty - An empty icon slot draws the empty-box or marker shape @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: woven.token(space-2);
+    padding-block: woven.token(space-12);
+    padding-inline: woven.token(space-6);
+    color: woven.token(text-muted);
+    font-size: woven.token(font-size-sm);
+    text-align: center;
+}
+
+.wu-empty-state-icon {
+    display: inline-grid;
+    place-items: center;
+    width: woven.token(space-12);
+    height: woven.token(space-12);
+    margin-block-end: woven.token(space-2);
+    border-radius: woven.token(radius-full);
+    background: woven.token(bg-alternate);
+    color: woven.token(text-subtle);
+
+    > * {
+        max-width: woven.token(space-6);
+        max-height: woven.token(space-6);
+    }
+
+    &:empty::before {
+        content: "";
+        width: woven.token(space-5);
+        height: woven.token(space-4);
+        border: woven.token(border-width-2) dashed currentcolor;
+        border-radius: woven.token(radius-xs);
+    }
+}
+
+.wu-empty-state-title {
+    margin: 0;
+    color: woven.token(text-regular);
+    font-size: woven.token(font-size-lg);
+    font-weight: woven.token(font-weight-semibold);
+    line-height: woven.token(line-height-tight);
+}
+
+.wu-empty-state-text {
+    max-inline-size: 40ch;
+    margin: 0;
+}
+
+.wu-empty-state-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: woven.token(space-2);
+    margin-block-start: woven.token(space-3);
+}
+
+.wu-empty-state.dashed {
+    border: woven.token(border-width-1) dashed woven.token(border-strong);
+    border-radius: woven.token(radius-lg);
+}
+
+// Compact, for use inside a card, panel or table
+.wu-empty-state.sm {
+    padding-block: woven.token(space-6);
+    padding-inline: woven.token(space-4);
+
+    .wu-empty-state-title {
+        font-size: woven.token(font-size-md);
+    }
+
+    .wu-empty-state-icon {
+        width: woven.token(space-10);
+        height: woven.token(space-10);
+        margin-block-end: 0;
+    }
+}
+
+// Result variants with the shared marker shapes from _shared.scss
+@each $role in "success", "warning", "danger", "info" {
+    .wu-empty-state.#{$role} .wu-empty-state-icon {
+        background: woven.token(#{$role}-subtle);
+        color: woven.token(text-#{$role});
+
+        &:empty::before {
+            width: woven.token(space-6);
+            height: woven.token(space-6);
+            border: 0;
+            border-radius: woven.token(radius-full);
+            background: currentcolor;
+        }
+    }
+}
+
+.wu-empty-state:is(.success, .warning, .danger) .wu-empty-state-icon:empty::before {
+    border-radius: 0;
+}
+
+.wu-empty-state.success .wu-empty-state-icon:empty::before {
+    clip-path: var(--wu-kit-marker-check);
+}
+
+.wu-empty-state.warning .wu-empty-state-icon:empty::before {
+    clip-path: var(--wu-kit-marker-triangle);
+}
+
+.wu-empty-state.danger .wu-empty-state-icon:empty::before {
+    clip-path: var(--wu-kit-marker-octagon);
+}