@wovenui/components 0.0.0-stage → 1.0.0

package/src/components/_alert.scss

@@ -0,0 +1,161 @@
+////
+//// @component wu-alert
+//// Inline message with a shape marker, a title, optional actions and a dismiss button.
+////
+//// Meaning is carried by the `wu-alert-title` text, such as "Error" or "Saved"; the marker shape repeats it.
+////
+//// Use `role="alert"` for urgent messages and `role="status"` for the rest. The close button is markup only; the app removes the alert.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <div class="wu-alert success" role="status">
+////     <strong class="wu-alert-title">Saved</strong>
+////     <p>Your changes are live.</p>
+////   </div>
+//// @example html
+////   <div class="wu-alert danger" role="alert">
+////     <strong class="wu-alert-title">Payment failed</strong>
+////     <p>Check the card details and try again.</p>
+////     <div class="wu-alert-actions">
+////       <button class="wu-btn danger" type="button">Retry</button>
+////       <button class="wu-btn" type="button">Cancel</button>
+////     </div>
+////     <button class="wu-alert-close" type="button" aria-label="Dismiss"></button>
+////   </div>
+//// @modifier brand | success | danger | warning | info - Role color for border, fill, marker and title; `success`, `warning` and `danger` also change the marker shape @since 1.0.0
+//// @part wu-alert-title - Bold title line that names the message @since 1.0.0
+//// @part wu-alert-actions - Row of buttons under the text @since 1.0.0
+//// @part wu-alert-close - Dismiss button in the end corner, last child of the alert @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-alert {
+    position: relative;
+    padding-block: woven.token(space-3);
+    padding-inline: calc(#{woven.token(space-4)} * 2 + #{woven.token(space-3)}) woven.token(space-4);
+    border: woven.token(border-width-1) solid woven.token(gray-border);
+    border-radius: woven.token(radius-md);
+    background: woven.token(gray-subtle);
+    color: woven.token(text-regular);
+    font-size: woven.token(font-size-sm);
+    line-height: woven.token(line-height-normal);
+
+    // Marker, centered on the first line: circle by default
+    &::before {
+        content: "";
+        position: absolute;
+        inset-block-start: calc(#{woven.token(space-3)} + (1lh - #{woven.token(space-4)}) / 2);
+        inset-inline-start: woven.token(space-4);
+        width: woven.token(space-4);
+        height: woven.token(space-4);
+        border-radius: woven.token(radius-full);
+        background: woven.token(text-gray);
+    }
+
+    > * {
+        margin: 0;
+    }
+
+    > * + * {
+        margin-block-start: woven.token(space-1);
+    }
+}
+
+.wu-alert-title {
+    display: block;
+    font-weight: woven.token(font-weight-semibold);
+}
+
+@each $role in "brand", "success", "danger", "warning", "info" {
+    .wu-alert.#{$role} {
+        border-color: woven.token(#{$role}-border);
+        background: woven.token(#{$role}-subtle);
+
+        &::before {
+            background: woven.token(text-#{$role});
+        }
+
+        .wu-alert-title {
+            color: woven.token(text-#{$role});
+        }
+    }
+}
+
+// Shape markers from _shared.scss
+.wu-alert:is(.success, .warning, .danger)::before {
+    border-radius: 0;
+}
+
+.wu-alert.success::before {
+    clip-path: var(--wu-kit-marker-check);
+}
+
+.wu-alert.warning::before {
+    clip-path: var(--wu-kit-marker-triangle);
+}
+
+.wu-alert.danger::before {
+    clip-path: var(--wu-kit-marker-octagon);
+}
+
+// Buttons under the text
+.wu-alert > .wu-alert-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: woven.token(space-2);
+    margin-block-start: woven.token(space-3);
+}
+
+// Dismiss: <button class="wu-alert-close" type="button" aria-label="Dismiss">, last in the alert.
+// Markup only; the app removes the alert. Cross drawn like .wu-tag-remove.
+.wu-alert:has(> .wu-alert-close) {
+    padding-inline-end: calc(#{woven.token(space-2)} + #{woven.token(space-6)} + #{woven.token(space-2)});
+}
+
+.wu-alert > .wu-alert-close {
+    position: absolute;
+    inset-block-start: calc(#{woven.token(space-3)} + (1lh - #{woven.token(space-6)}) / 2);
+    inset-inline-end: woven.token(space-2);
+    display: inline-grid;
+    place-items: center;
+    width: woven.token(space-6);
+    height: woven.token(space-6);
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: woven.token(radius-xs);
+    background: transparent;
+    color: woven.token(text-muted);
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+
+    &::before,
+    &::after {
+        content: "";
+        grid-area: 1 / 1;
+        width: woven.token(space-3);
+        height: woven.token(border-width-2);
+        border-radius: woven.token(radius-full);
+        background: currentcolor;
+        rotate: 45deg;
+    }
+
+    &::after {
+        rotate: -45deg;
+    }
+
+    &:hover {
+        background: color-mix(in srgb, currentcolor 15%, transparent);
+        color: woven.token(text-regular);
+    }
+
+    &:focus-visible {
+        outline: woven.token(border-focus-width) solid woven.token(border-focus);
+        outline-offset: woven.token(border-focus-offset);
+    }
+}

package/src/components/_autocomplete.scss

@@ -0,0 +1,129 @@
+////
+//// @component wu-autocomplete
+//// Combobox that filters a list of options as the user types.
+////
+//// The kit script filters the options, handles the keyboard and sets `aria-expanded`, `aria-activedescendant`, `aria-selected` and `hidden`.
+////
+//// @since 1.0.0
+//// @needs input
+//// @js required initAutocomplete
+//// @example html
+////   <div class="wu-autocomplete">
+////     <label for="city">City</label>
+////     <input class="wu-input" id="city" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="city-list" autocomplete="off">
+////     <ul class="wu-autocomplete-list" id="city-list" role="listbox" aria-label="Cities" hidden>
+////       <li class="wu-autocomplete-option" id="city-1" role="option">Amsterdam</li>
+////       <li class="wu-autocomplete-option" id="city-2" role="option">Berlin</li>
+////       <li class="wu-autocomplete-option" id="city-3" role="option" aria-disabled="true">Closed city</li>
+////     </ul>
+////     <p class="wu-autocomplete-empty" hidden>No matches</p>
+////   </div>
+//// @modifier animated - The popup fades and slides in when the user allows motion; `wu-animated` on an ancestor does the same @since 1.0.0
+//// @part wu-autocomplete-list - Popup `ul` that holds the options @since 1.0.0
+//// @part wu-autocomplete-option - One selectable `li` option @since 1.0.0
+//// @part wu-autocomplete-empty - Message shown when no option matches @since 1.0.0
+//// @variable --wu-autocomplete--MaxHeight [16rem] - Maximum height of the option list before it scrolls @since 1.0.0
+//// @state aria-selected="true" - The active option: selected fill and a start bar @since 1.0.0
+//// @state aria-disabled="true" - Half opacity and a not-allowed cursor @since 1.0.0
+//// @state hidden - An option filtered out is not displayed @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-autocomplete {
+    position: relative;
+
+    > .wu-input {
+        inline-size: 100%;
+    }
+}
+
+.wu-autocomplete-list,
+.wu-autocomplete-empty {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: calc(100% + #{woven.token(space-1)});
+    z-index: woven.token(z-dropdown);
+    margin: 0;
+    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);
+}
+
+.wu-autocomplete-list {
+    max-block-size: var(--wu-autocomplete--MaxHeight, 16rem);
+    list-style: none;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+
+.wu-autocomplete-empty {
+    padding-block: woven.token(space-2);
+    padding-inline: woven.token(space-3);
+    color: woven.token(text-muted);
+}
+
+.wu-autocomplete-option {
+    display: flex;
+    align-items: center;
+    min-block-size: woven.token(control-height-sm);
+    padding-inline: woven.token(space-3);
+    border-radius: woven.token(radius-sm);
+    cursor: pointer;
+
+    &[hidden] {
+        display: none;
+    }
+
+    &:hover {
+        background: woven.token(bg-hover);
+    }
+
+    // Active option (aria-activedescendant): selected background and a start bar, so color is not the only signal
+    &[aria-selected="true"] {
+        background: woven.token(bg-selected);
+        box-shadow: inset woven.token(border-width-2) 0 0 woven.token(brand);
+    }
+
+    &[aria-disabled="true"] {
+        opacity: woven.token(opacity-50);
+        cursor: not-allowed;
+    }
+}
+
+.wu-autocomplete-option[aria-selected="true"]:dir(rtl) {
+    box-shadow: inset calc(-1 * #{woven.token(border-width-2)}) 0 0 woven.token(brand);
+}
+
+// Opt-in motion: the popup fades and slides in
+@media (prefers-reduced-motion: no-preference) {
+    .wu-autocomplete.animated > :is(.wu-autocomplete-list, .wu-autocomplete-empty),
+    .wu-animated .wu-autocomplete > :is(.wu-autocomplete-list, .wu-autocomplete-empty) {
+        transition:
+            opacity woven.token(duration-150) woven.token(ease-out),
+            translate woven.token(duration-150) woven.token(ease-out);
+
+        @starting-style {
+            opacity: 0;
+            translate: 0 calc(-1 * #{woven.token(space-1)});
+        }
+    }
+}
+
+@media (forced-colors: active) {
+    .wu-autocomplete-option[aria-selected="true"] {
+        background: Highlight;
+        color: HighlightText;
+        forced-color-adjust: none;
+    }
+}
+
+.wu-autocomplete-option > svg {
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+}

package/src/components/_avatar-group.scss

@@ -0,0 +1,80 @@
+////
+//// @component wu-avatar-group
+//// Overlapping stack of avatars with a ring between them.
+////
+//// Put the overflow count, such as "+3", in a last `wu-avatar` as real text.
+////
+//// @since 1.0.0
+//// @needs avatar
+//// @js none
+//// @example html
+////   <div class="wu-avatar-group" role="group" aria-label="Members">
+////     <span class="wu-avatar blue" role="img" aria-label="Ana Lopez">AL</span>
+////     <span class="wu-avatar green" role="img" aria-label="Ben Kim">BK</span>
+////     <span class="wu-avatar" role="img" aria-label="3 more members">+3</span>
+////   </div>
+//// @example html
+////   <div class="wu-avatar-group animated" role="group" aria-label="Team">
+////     <span class="wu-avatar purple" role="img" aria-label="Cy Ray">CR</span>
+////     <span class="wu-avatar pink" role="img" aria-label="Di Eze">DE</span>
+////   </div>
+//// @modifier animated - On hover or focus within, the stack fans out into a row when the user allows motion; `wu-animated` on an ancestor does the same @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+$overlap: woven.token(space-3);
+$fan-step: calc(#{$overlap} + #{woven.token(space-1)});
+
+.wu-avatar-group {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+
+    > .wu-avatar {
+        box-shadow: 0 0 0 woven.token(border-width-2) var(--wu-avatar--RingColor, #{woven.token(bg-surface)});
+    }
+
+    > .wu-avatar + .wu-avatar {
+        margin-inline-start: calc(-1 * #{$overlap});
+    }
+}
+
+// Fan-out offsets: relative inset moves only the avatar, never the layout around it
+@mixin fan-out {
+    @supports (inset-inline-start: calc(sibling-index() * 1px)) {
+        > .wu-avatar {
+            inset-inline-start: calc((sibling-index() - 1) * #{$fan-step});
+        }
+    }
+
+    @supports not (inset-inline-start: calc(sibling-index() * 1px)) {
+        @for $i from 2 through 12 {
+            > .wu-avatar:nth-child(#{$i}) {
+                inset-inline-start: calc(#{$i - 1} * #{$fan-step});
+            }
+        }
+    }
+}
+
+// Opt-in motion: the stack fans out into a row as a visual effect, staggered where sibling-index() is supported
+@media (prefers-reduced-motion: no-preference) {
+    .wu-avatar-group.animated,
+    .wu-animated .wu-avatar-group {
+        > .wu-avatar {
+            inset-inline-start: 0;
+            transition: inset-inline-start woven.token(duration-500) var(--wu-kit-ease-spring);
+            transition-delay: calc((sibling-index() - 1) * 30ms);
+        }
+
+        &:focus-within {
+            @include fan-out;
+        }
+
+        @media (hover: hover) {
+            &:hover {
+                @include fan-out;
+            }
+        }
+    }
+}

package/src/components/_avatar.scss

@@ -0,0 +1,134 @@
+////
+//// @component wu-avatar
+//// Round or square badge for a person or product, with initials, an image or an svg, and an optional status dot.
+////
+//// Label it with `aria-label` or the image `alt`, status included.
+////
+//// `--wu-avatar--Size` overrides every size.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <span class="wu-avatar" role="img" aria-label="Ana Lopez">AL</span>
+////   <span class="wu-avatar sm blue" role="img" aria-label="Ben Kim">BK</span>
+////   <span class="wu-avatar lg purple" role="img" aria-label="Cy Ray">CR</span>
+//// @example html
+////   <span class="wu-avatar green" data-status="online" role="img" aria-label="Di Eze, online">DE</span>
+////   <span class="wu-avatar tile"><img src="https://wovenui.com/images/logo.svg" alt="WovenUI"></span>
+//// @modifier sm | lg - Small or large size; the default is medium @since 1.0.0
+//// @modifier tile - Square with rounded corners, for company and product logos @since 1.0.0
+//// @modifier gray | red | blue | green | yellow | purple | pink - Tinted fill and text in that hue @since 1.0.0
+//// @variable --wu-avatar--Size [var(--wu-space-10)] - Width and height; initials scale with it @since 1.0.0
+//// @variable --wu-avatar--RingColor [var(--wu-bg-surface)] - Color of the ring around the status dot, shared with avatar group and corner badge @since 1.0.0
+//// @state data-status="online" - Solid dot at the end corner @since 1.0.0
+//// @state data-status="away" - Half-filled dot @since 1.0.0
+//// @state data-status="busy" - Filled dot with a bar @since 1.0.0
+//// @state data-status="offline" - Hollow ring @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+$hues: "gray", "red", "blue", "green", "yellow", "purple", "pink";
+
+// Size and initials scale from one value; --wu-avatar--Size overrides every size
+@mixin size($default) {
+    width: var(--wu-avatar--Size, #{$default});
+    height: var(--wu-avatar--Size, #{$default});
+    font-size: calc(var(--wu-avatar--Size, #{$default}) * 0.4);
+}
+
+.wu-avatar {
+    display: inline-grid;
+    place-items: center;
+    position: relative;
+    flex-shrink: 0;
+    border-radius: woven.token(radius-full);
+    background: woven.token(gray-subtle);
+    color: woven.token(text-gray);
+    font-weight: woven.token(font-weight-medium);
+    line-height: 1;
+    text-transform: uppercase;
+    white-space: nowrap;
+    vertical-align: middle;
+    user-select: none;
+
+    @include size(woven.token(space-10));
+
+    > img {
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        object-fit: cover;
+    }
+}
+
+.wu-avatar.sm {
+    @include size(woven.token(space-8));
+}
+
+.wu-avatar.lg {
+    @include size(woven.token(space-12));
+}
+
+// Square: company and product logos
+.wu-avatar.tile {
+    border-radius: woven.token(radius-md);
+}
+
+// App svg as the glyph
+.wu-avatar > svg {
+    width: 60%;
+    height: 60%;
+}
+
+@each $hue in $hues {
+    .wu-avatar.#{$hue} {
+        background: woven.token(#{$hue}-subtle);
+        color: woven.token(text-#{$hue});
+    }
+}
+
+// Status indicator: each state has its own shape, not only a color
+.wu-avatar:is([data-status="online"], [data-status="away"], [data-status="busy"], [data-status="offline"])::after {
+    content: "";
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    width: 30%;
+    height: 30%;
+    border-radius: woven.token(radius-full);
+}
+
+// Online: solid dot
+.wu-avatar[data-status="online"]::after {
+    background: woven.token(success);
+    box-shadow: 0 0 0 woven.token(border-width-2) var(--wu-avatar--RingColor, #{woven.token(bg-surface)});
+}
+
+// Away: half filled
+.wu-avatar[data-status="away"]::after {
+    background: linear-gradient(to right, woven.token(warning) 50%, var(--wu-avatar--RingColor, #{woven.token(bg-surface)}) 50%);
+    box-shadow:
+        inset 0 0 0 woven.token(border-width-1) woven.token(warning),
+        0 0 0 woven.token(border-width-2) var(--wu-avatar--RingColor, #{woven.token(bg-surface)});
+}
+
+.wu-avatar[data-status="away"]:dir(rtl)::after {
+    background: linear-gradient(to left, woven.token(warning) 50%, var(--wu-avatar--RingColor, #{woven.token(bg-surface)}) 50%);
+}
+
+// Busy: filled with a bar
+.wu-avatar[data-status="busy"]::after {
+    background:
+        linear-gradient(var(--wu-avatar--RingColor, #{woven.token(bg-surface)}), var(--wu-avatar--RingColor, #{woven.token(bg-surface)})) center / 60% 20% no-repeat,
+        woven.token(danger);
+}
+
+// Offline: hollow ring
+.wu-avatar[data-status="offline"]::after {
+    background: var(--wu-avatar--RingColor, #{woven.token(bg-surface)});
+    box-shadow:
+        inset 0 0 0 woven.token(border-width-2) woven.token(border-strong),
+        0 0 0 woven.token(border-width-2) var(--wu-avatar--RingColor, #{woven.token(bg-surface)});
+}

package/src/components/_badge.scss

@@ -0,0 +1,91 @@
+////
+//// @component wu-badge
+//// Small pill for counts and short labels, tinted by default and solid for emphasis.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <span class="wu-badge">Draft</span>
+////   <span class="wu-badge success">Paid</span>
+////   <span class="wu-badge danger solid">3</span>
+//// @example html
+////   <span class="wu-badge-host">
+////     <button class="wu-btn" type="button" aria-label="Inbox, 3 unread">Inbox</button>
+////     <span class="wu-badge corner danger solid">3</span>
+////   </span>
+//// @modifier brand | success | danger | warning | info - Role color: tinted fill, border and text; solid fill with `solid` @since 1.0.0
+//// @modifier solid - Solid fill for stronger emphasis, gray without a role @since 1.0.0
+//// @modifier corner - Pins the badge to the top inline-end corner of a `wu-badge-host` @since 1.0.0
+//// @part wu-badge-host - Wrapper that a corner badge pins to @since 1.0.0
+//// @variable --wu-badge--Offset [50%] - How far a corner badge sits outside the host corner @since 1.0.0
+//// @variable --wu-avatar--RingColor [var(--wu-bg-surface)] - Color of the ring around a corner badge, shared with avatar @since 1.0.0
+//// @state :empty - A corner badge with no content is hidden @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+$roles: "brand", "success", "danger", "warning", "info";
+
+.wu-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: woven.token(space-1);
+    min-height: woven.token(space-5);
+    padding-inline: woven.token(space-2);
+    border: woven.token(border-width-1) solid woven.token(gray-border);
+    border-radius: woven.token(radius-full);
+    background: woven.token(gray-subtle);
+    color: woven.token(text-gray);
+    font-size: woven.token(font-size-xs);
+    font-variant-numeric: tabular-nums;
+    font-weight: woven.token(font-weight-medium);
+    line-height: 1;
+    white-space: nowrap;
+    vertical-align: middle;
+}
+
+@each $role in $roles {
+    .wu-badge.#{$role} {
+        border-color: woven.token(#{$role}-border);
+        background: woven.token(#{$role}-subtle);
+        color: woven.token(text-#{$role});
+    }
+}
+
+// Solid fill for stronger emphasis
+.wu-badge.solid {
+    border-color: woven.token(gray-700);
+    background: woven.token(gray-700);
+    color: woven.token(white);
+}
+
+@each $role in $roles {
+    .wu-badge.solid.#{$role} {
+        border-color: woven.token($role);
+        background: woven.token($role);
+        color: woven.token(text-on-#{$role});
+    }
+}
+
+.wu-badge-host {
+    display: inline-flex;
+    position: relative;
+    vertical-align: middle;
+}
+
+.wu-badge.corner {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    translate: var(--wu-badge--Offset, 50%) -50%;
+    box-shadow: 0 0 0 woven.token(border-width-2) var(--wu-avatar--RingColor, #{woven.token(bg-surface)});
+
+    &:dir(rtl) {
+        translate: calc(-1 * var(--wu-badge--Offset, 50%)) -50%;
+    }
+
+    &:empty {
+        display: none;
+    }
+}