@wovenui/components 0.0.0-stage → 1.0.0

package/src/components/_checkbox.scss

@@ -0,0 +1,168 @@
+////
+//// @component wu-checkbox
+//// Custom checkbox with a label, a check mark and an indeterminate dash.
+////
+//// The box is 1em, so it follows the root type size. The `wu-checkbox-input` part also works alone with an `aria-label`.
+////
+//// Inside a `wu-field-group sm` or `lg`, a checkbox without its own size takes the group size.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <label class="wu-checkbox">
+////     <input type="checkbox" class="wu-checkbox-input" name="terms" checked>
+////     <span class="wu-checkbox-label">I accept the terms</span>
+////   </label>
+//// @example html
+////   <label class="wu-checkbox sm">
+////     <input type="checkbox" class="wu-checkbox-input" name="news" disabled>
+////     <span class="wu-checkbox-label">Send the newsletter</span>
+////   </label>
+////   <input type="checkbox" class="wu-checkbox-input" name="all" aria-label="Select all">
+//// @modifier sm | lg - Small or large font size, and so box size @since 1.0.0
+//// @part wu-checkbox-input - The `input` drawn as a box @since 1.0.0
+//// @part wu-checkbox-label - Label text next to the box @since 1.0.0
+//// @state checked - Brand fill with a check mark @since 1.0.0
+//// @state indeterminate - Brand fill with a dash @since 1.0.0
+//// @state disabled - Half opacity and a not-allowed cursor @since 1.0.0
+//// @state aria-invalid="true" - Danger edge that stays on hover and when checked @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-checkbox {
+    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-checkbox-input:disabled) {
+        opacity: woven.token(opacity-50);
+        cursor: not-allowed;
+    }
+}
+
+.wu-checkbox-input {
+    display: inline-grid;
+    flex: none;
+    place-content: center;
+    width: 1em;
+    height: 1em;
+    margin: 0;
+    margin-block-start: calc((1lh - 1em) / 2);
+    border: woven.token(border-width-1) solid woven.token(border-control);
+    border-radius: woven.token(radius-xs);
+    background: woven.token(bg-surface);
+    font-size: inherit;
+    line-height: inherit;
+    vertical-align: middle;
+    appearance: none;
+    cursor: pointer;
+    transition-property: background-color, border-color;
+    transition-duration: woven.token(duration-150);
+    transition-timing-function: woven.token(ease-out);
+
+    // Check mark, drawn with clip-path
+    &::before {
+        content: "";
+        width: 0.75em;
+        height: 0.75em;
+        background: woven.token(text-on-brand);
+        clip-path: var(--wu-kit-marker-check);
+        visibility: hidden;
+    }
+
+    &:hover:not(:disabled, :checked, :indeterminate) {
+        border-color: woven.token(border-control-hover);
+    }
+
+    &:focus-visible {
+        outline: woven.token(border-focus-width) solid woven.token(border-focus);
+        outline-offset: woven.token(border-focus-offset);
+    }
+
+    &:is(:checked, :indeterminate) {
+        border-color: woven.token(brand);
+        background: woven.token(brand);
+
+        &::before {
+            visibility: visible;
+        }
+
+        &:hover:not(:disabled) {
+            border-color: woven.token(brand-hover);
+            background: woven.token(brand-hover);
+        }
+    }
+
+    // Invalid: a 2px danger edge that stays on hover and when checked
+    &:is([aria-invalid="true"], :user-invalid),
+    &:is([aria-invalid="true"], :user-invalid):is(:hover, :checked, :indeterminate) {
+        border-color: woven.token(danger);
+        box-shadow: 0 0 0 woven.token(border-width-1) woven.token(danger);
+    }
+
+    // Indeterminate dash
+    &:indeterminate::before {
+        clip-path: inset(40% 10%);
+    }
+
+    &:disabled {
+        opacity: woven.token(opacity-50);
+        cursor: not-allowed;
+    }
+
+    .wu-checkbox > &:disabled {
+        opacity: 1;
+    }
+}
+
+.wu-checkbox-label {
+    min-width: 0;
+}
+
+.wu-checkbox.sm {
+    font-size: woven.token(font-size-sm);
+}
+
+.wu-checkbox.lg {
+    font-size: woven.token(font-size-lg);
+}
+
+@media (forced-colors: active) {
+    .wu-checkbox-input {
+        border-color: CanvasText;
+        background: Canvas;
+        forced-color-adjust: none;
+
+        &::before {
+            background: HighlightText;
+        }
+
+        &:is(:checked, :indeterminate) {
+            border-color: Highlight;
+            background: Highlight;
+        }
+
+        &:disabled {
+            border-color: GrayText;
+        }
+
+        &:disabled:is(:checked, :indeterminate) {
+            background: GrayText;
+        }
+    }
+}
+
+// Size from a wu-field-group sm or lg
+:where(.wu-field-group.sm) .wu-checkbox:not(.sm, .lg) {
+    font-size: woven.token(font-size-sm);
+}
+
+:where(.wu-field-group.lg) .wu-checkbox:not(.sm, .lg) {
+    font-size: woven.token(font-size-lg);
+}

package/src/components/_code-block.scss

@@ -0,0 +1,78 @@
+////
+//// @component wu-code-block
+//// Scrollable block for code, with edge shadows when the content overflows.
+////
+//// Use `pre` with `code` inside, and add `tabindex="0"` and an `aria-label` so keyboard users can scroll it.
+////
+//// For line numbers, wrap each line in a `wu-code-block-line` span. The numbers are not copied or read aloud.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <pre class="wu-code-block" tabindex="0" aria-label="Install command"><code>pnpm add @wovenui/components</code></pre>
+//// @example html
+////   <pre class="wu-code-block" tabindex="0" aria-label="Example"><code><span class="wu-code-block-line">const a = 1;</span>
+////   <span class="wu-code-block-line">const b = 2;</span></code></pre>
+//// @part wu-code-block-line - Inline span for one line, with an optional line number @since 1.0.0
+//// @variable --wu-code-block--Background [var(--wu-bg-alternate)] - Background of the block and of its scroll shadow covers @since 1.0.0
+//// @variable --wu-code-block--FontFamily [ui-monospace] - Font family; the default is a system monospace stack @since 1.0.0
+//// @state :focus-visible - Focus ring, for the scrollable block @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+$bg: var(--wu-code-block--Background, #{woven.token(bg-alternate)});
+$shadow: color-mix(in srgb, #{woven.token(text-regular)} 15%, transparent);
+
+.wu-code-block {
+    margin: 0;
+    padding: woven.token(space-4);
+    overflow: auto;
+    border: woven.token(border-width-1) solid woven.token(border-regular);
+    border-radius: woven.token(radius-md);
+    background:
+        linear-gradient(to right, #{$bg} 50%, transparent) left / #{woven.token(space-8)} 100% no-repeat local,
+        linear-gradient(to left, #{$bg} 50%, transparent) right / #{woven.token(space-8)} 100% no-repeat local,
+        linear-gradient(to right, #{$shadow}, transparent) left / #{woven.token(space-3)} 100% no-repeat scroll,
+        linear-gradient(to left, #{$shadow}, transparent) right / #{woven.token(space-3)} 100% no-repeat scroll,
+        #{$bg};
+    color: woven.token(text-regular);
+    font-family: var(--wu-code-block--FontFamily, ui-monospace, "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace);
+    font-size: woven.token(font-size-sm);
+    line-height: woven.token(line-height-relaxed);
+    white-space: pre;
+    tab-size: 4;
+    counter-reset: wu-code-line;
+
+    // Undo core's inline code look
+    > code {
+        padding: 0;
+        border-radius: 0;
+        background: none;
+        color: inherit;
+        font: inherit;
+        white-space: inherit;
+    }
+
+    &:focus-visible {
+        outline: woven.token(border-focus-width) solid woven.token(border-focus);
+        outline-offset: woven.token(border-focus-offset);
+    }
+}
+
+// Optional line numbers: wrap each line in an inline span. Numbers are not copied or read aloud.
+.wu-code-block-line {
+    counter-increment: wu-code-line;
+}
+
+.wu-code-block-line::before {
+    content: counter(wu-code-line);
+    content: counter(wu-code-line) / "";
+    display: inline-block;
+    min-width: 3ch;
+    margin-inline-end: woven.token(space-4);
+    color: woven.token(text-muted);
+    text-align: end;
+    user-select: none;
+}

package/src/components/_confirm-modal.scss

@@ -0,0 +1,75 @@
+////
+//// @component wu-confirm-modal
+//// Dialog that asks the user to confirm or cancel an action, with a title, a message and two buttons.
+////
+//// Builds on `wu-modal` for open, close, backdrop and motion, and on `wu-btn` for the actions. Use `role="alertdialog"`.
+////
+//// The subject is optional and names the object. `danger` gives the message full weight; the confirming button takes `wu-btn danger`. `dialog.returnValue` holds the value of the button that closed it.
+////
+//// @since 1.0.0
+//// @needs modal, button
+//// @js none
+//// @example html
+////   <button class="wu-btn" type="button" commandfor="c1" command="show-modal">Delete</button>
+////   <dialog class="wu-modal wu-confirm-modal danger" id="c1" role="alertdialog" aria-labelledby="c1-title" aria-describedby="c1-subject c1-message">
+////     <h2 class="wu-confirm-modal-title" id="c1-title">Delete project?</h2>
+////     <p class="wu-confirm-modal-subject" id="c1-subject">Website redesign</p>
+////     <p class="wu-confirm-modal-message" id="c1-message">This cannot be undone.</p>
+////     <form class="wu-confirm-modal-actions" method="dialog">
+////       <button class="wu-btn" value="cancel" autofocus>Cancel</button>
+////       <button class="wu-btn danger" value="confirm">Delete</button>
+////     </form>
+////   </dialog>
+//// @modifier danger - Message at full contrast and body size, for destructive actions @since 1.0.0
+//// @part wu-confirm-modal-title - Heading that names the question @since 1.0.0
+//// @part wu-confirm-modal-subject - Optional line that names the object the action applies to @since 1.0.0
+//// @part wu-confirm-modal-message - Supporting text about the consequence @since 1.0.0
+//// @part wu-confirm-modal-actions - Form that holds the buttons, aligned to the end @since 1.0.0
+//// @variable --wu-confirm-modal--Width [26rem] - Width of the dialog @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-confirm-modal {
+    gap: woven.token(space-2);
+    inline-size: var(--wu-confirm-modal--Width, 26rem);
+    padding: woven.token(space-6);
+}
+
+.wu-confirm-modal-title {
+    margin: 0;
+    font-size: woven.token(font-size-lg);
+    font-weight: woven.token(font-weight-semibold);
+    line-height: woven.token(line-height-tight);
+}
+
+// Names the object the action applies to
+.wu-confirm-modal-subject {
+    margin: 0;
+    color: woven.token(text-regular);
+    font-weight: woven.token(font-weight-semibold);
+    overflow-wrap: anywhere;
+}
+
+.wu-confirm-modal-message {
+    margin: 0;
+    color: woven.token(text-muted);
+    font-size: woven.token(font-size-sm);
+    line-height: woven.token(line-height-normal);
+    text-wrap: pretty;
+}
+
+.wu-confirm-modal-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: woven.token(space-2);
+    margin: 0;
+    margin-block-start: woven.token(space-4);
+}
+
+// Destructive confirm: the stakes read at full contrast and body size
+.wu-confirm-modal.danger .wu-confirm-modal-message {
+    color: woven.token(text-regular);
+    font-size: woven.token(font-size-md);
+}

package/src/components/_data-table.scss

@@ -0,0 +1,79 @@
+////
+//// @component wu-data-table
+//// Sortable table: click a header to sort rows by text or number.
+////
+//// Add it to a `wu-table`; the sort button and arrows come from the table component, and the kit script sorts the first `tbody` and sets `aria-sort`. A `data-sort-value` on a cell wins over its text.
+////
+//// The script adds a `wu-data-table-status` live region after the table and announces each sort there.
+////
+//// @since 1.0.0
+//// @needs table
+//// @js required initDataTable
+//// @example html
+////   <table class="wu-table wu-data-table">
+////     <thead>
+////       <tr>
+////         <th scope="col" aria-sort="ascending"><button class="wu-table-sort" type="button">Name</button></th>
+////         <th scope="col" class="wu-table-num"><button class="wu-table-sort" type="button">Amount</button></th>
+////       </tr>
+////     </thead>
+////     <tbody>
+////       <tr><td>Ada</td><td class="wu-table-num" data-sort-value="1200">$1,200</td></tr>
+////       <tr><td>Grace</td><td class="wu-table-num" data-sort-value="950">$950</td></tr>
+////     </tbody>
+////   </table>
+//// @modifier animated - Rows glide to their new place when the user allows motion; `wu-animated` on an ancestor does the same @since 1.0.0
+//// @part wu-data-table-status - Visually hidden live region added by the script to announce each sort @since 1.0.0
+//// @part wu-data-table-row - View transition class, not an HTML class, set on body rows while they move; target `::view-transition-group(*.wu-data-table-row)` to restyle the glide @since 1.0.0
+//// @state aria-sort="ascending" - Header cell sorted ascending, set by the script @since 1.0.0
+//// @state aria-sort="descending" - Header cell sorted descending, set by the script @since 1.0.0
+//// @state aria-busy="true" - Set while rows move: progress cursor, and the row animation runs @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-data-table[aria-busy="true"] {
+    cursor: progress;
+}
+
+// Larger sort arrows than the plain table's, drawn at 1.25 times its paths
+.wu-data-table .wu-table-sort::after {
+    width: 10px;
+    height: 15px;
+    clip-path: path("M5 0L10 6.25H0Z M0 8.75H10L5 15Z");
+}
+
+.wu-data-table th[aria-sort="ascending"] > .wu-table-sort::after {
+    clip-path: path("M5 4.375L10 10.625H0Z");
+}
+
+.wu-data-table th[aria-sort="descending"] > .wu-table-sort::after {
+    clip-path: path("M0 4.375H10L5 10.625Z");
+}
+
+// Visually hidden live region for the sort announcement
+.wu-data-table-status {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+
+// Opt-in motion: rows glide to their new place (view transition, started by the script)
+@media (prefers-reduced-motion: no-preference) {
+    .wu-data-table.animated[aria-busy="true"] > tbody > tr,
+    .wu-animated .wu-data-table[aria-busy="true"] > tbody > tr {
+        view-transition-class: wu-data-table-row;
+        view-transition-name: match-element;
+    }
+
+    ::view-transition-group(*.wu-data-table-row) {
+        animation-duration: woven.token(duration-300);
+        animation-timing-function: woven.token(ease-out);
+    }
+}

package/src/components/_desc-list.scss

@@ -0,0 +1,180 @@
+////
+//// @component wu-desc-list
+//// Description list of terms and values, plain, divided, bordered or in columns.
+////
+//// Use a `dl`; wrap each pair in a `div` for divided, bordered and column layouts.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <dl class="wu-desc-list horizontal divided">
+////     <div><dt>Name</dt><dd>Ada Lovelace</dd></div>
+////     <div><dt>Role</dt><dd>Engineer</dd></div>
+////   </dl>
+//// @example html
+////   <dl class="wu-desc-list bordered">
+////     <div><dt>Plan</dt><dd>Team</dd></div>
+////     <div><dt>Seats</dt><dd>12</dd></div>
+////   </dl>
+//// @example html
+////   <dl class="wu-desc-list columns">
+////     <div><dt>City</dt><dd>Berlin</dd></div>
+////     <div><dt>Country</dt><dd>Germany</dd></div>
+////     <div><dt>Timezone</dt><dd>CET</dd></div>
+////   </dl>
+//// @modifier horizontal - Terms in a column beside their descriptions @since 1.0.0
+//// @modifier divided - Lines between the `div` pairs @since 1.0.0
+//// @modifier bordered - Table look: lines around every cell, terms on the alternate background @since 1.0.0
+//// @modifier columns - Several pairs per row; with `bordered`, each pair is a term cell beside its description @since 1.0.0
+//// @variable --wu-desc-list--TermWidth [fit-content(40%)] - Width of the term column in `horizontal` and `bordered` @since 1.0.0
+//// @variable --wu-desc-list--Columns [3] - Most pairs per row in `columns` @since 1.0.0
+//// @variable --wu-desc-list--ColumnWidth [10rem] - Narrowest a pair gets in `columns` before a row holds fewer @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-desc-list {
+    margin: 0;
+    color: woven.token(text-regular);
+    font-size: woven.token(font-size-sm);
+    line-height: woven.token(line-height-normal);
+
+    > dt,
+    > div > dt {
+        color: woven.token(text-muted);
+        font-weight: woven.token(font-weight-medium);
+    }
+
+    > dd,
+    > div > dd {
+        margin: 0;
+        text-wrap: pretty;
+    }
+
+    > dt + dd,
+    > dd + dd,
+    > div > dt + dd,
+    > div > dd + dd {
+        margin-block-start: woven.token(space-1);
+    }
+
+    > dd + dt,
+    > div + div {
+        margin-block-start: woven.token(space-4);
+    }
+}
+
+// Terms in a column beside their descriptions; --wu-desc-list--TermWidth sets the column
+.wu-desc-list.horizontal {
+    display: grid;
+    grid-template-columns: var(--wu-desc-list--TermWidth, fit-content(40%)) minmax(0, 1fr);
+    gap: woven.token(space-3) woven.token(space-6);
+
+    > div {
+        display: grid;
+        grid-column: 1 / -1;
+        grid-template-columns: subgrid;
+        row-gap: woven.token(space-1);
+    }
+
+    > dt,
+    > div > dt {
+        grid-column: 1;
+    }
+
+    > dd,
+    > div > dd {
+        grid-column: 2;
+    }
+
+    // The grid gaps space the rows
+    > *,
+    > div > * {
+        margin-block-start: 0;
+    }
+}
+
+// Lines between <div> groups
+.wu-desc-list.divided > div + div {
+    padding-block-start: woven.token(space-3);
+    border-block-start: woven.token(border-width-1) solid woven.token(border-regular);
+}
+
+// Bordered: term and description cells with lines between them, terms on the alternate background.
+// Each cell draws its top and start line 1px outside itself; the root clips the outer ones behind its own border.
+.wu-desc-list.bordered {
+    display: grid;
+    grid-template-columns: var(--wu-desc-list--TermWidth, fit-content(40%)) minmax(0, 1fr);
+    overflow: hidden;
+    border: woven.token(border-width-1) solid woven.token(border-regular);
+    border-radius: woven.token(radius-md);
+    background: woven.token(bg-surface);
+
+    > div {
+        display: grid;
+        grid-column: 1 / -1;
+        grid-template-columns: subgrid;
+    }
+
+    > dt,
+    > dd,
+    > div > dt,
+    > div > dd {
+        margin-block-start: calc(-1 * #{woven.token(border-width-1)});
+        margin-inline-start: calc(-1 * #{woven.token(border-width-1)});
+        padding-block: woven.token(space-2);
+        padding-inline: woven.token(space-3);
+        border-block-start: woven.token(border-width-1) solid woven.token(border-regular);
+        border-inline-start: woven.token(border-width-1) solid woven.token(border-regular);
+    }
+
+    > dt,
+    > div > dt {
+        grid-column: 1;
+        background: woven.token(bg-alternate);
+    }
+
+    > dd,
+    > div > dd {
+        grid-column: 2;
+    }
+
+    > div + div {
+        margin-block-start: 0;
+    }
+}
+
+// Columns: pairs side by side, at most --wu-desc-list--Columns per row (3), fewer when a pair would be narrower
+// than --wu-desc-list--ColumnWidth (10rem)
+@mixin -columns($gap: null) {
+    $count: var(--wu-desc-list--Columns, 3);
+    $share: "100% / #{$count}";
+
+    @if $gap {
+        $share: "(100% - (#{$count} - 1) * #{$gap}) / #{$count}";
+    }
+
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--wu-desc-list--ColumnWidth, 10rem), #{$share})), 1fr));
+}
+
+.wu-desc-list.columns {
+    display: grid;
+    gap: woven.token(space-4) woven.token(space-6);
+    @include -columns(woven.token(space-6));
+
+    > div + div {
+        margin-block-start: 0;
+    }
+}
+
+// Bordered columns: each pair is a term cell beside its description cell
+.wu-desc-list.bordered.columns {
+    gap: 0;
+    @include -columns;
+
+    > div {
+        grid-column: auto;
+        grid-template-columns: var(--wu-desc-list--TermWidth, 40%) minmax(0, 1fr);
+    }
+}

package/src/components/_divider.scss

@@ -0,0 +1,66 @@
+////
+//// @component wu-divider
+//// Horizontal or vertical separator line, optionally with a text label between two lines.
+////
+//// Use an `hr` element. `aria-orientation="vertical"` turns it into a vertical line between inline items. With content, the text is read and the lines are decoration.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <hr class="wu-divider">
+////   <hr class="wu-divider dashed">
+//// @example html
+////   <div class="wu-divider">or</div>
+//// @example html
+////   <span>Edit</span><hr class="wu-divider" aria-orientation="vertical"><span>Share</span>
+//// @modifier dashed - Dashed line, also on the lines beside a label @since 1.0.0
+//// @state aria-orientation="vertical" - Vertical line that stretches to the row height @since 1.0.0
+//// @state :not(:empty) - With content: the text sits between two lines @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-divider {
+    height: 0;
+    margin-block: woven.token(space-4);
+    margin-inline: 0;
+    border: 0;
+    border-block-start: woven.token(border-width-1) solid woven.token(border-regular);
+}
+
+.wu-divider[aria-orientation="vertical"] {
+    display: inline-block;
+    align-self: stretch;
+    width: 0;
+    height: auto;
+    min-height: 1em;
+    margin-block: 0;
+    margin-inline: woven.token(space-2);
+    border-block-start: 0;
+    border-inline-start: woven.token(border-width-1) solid woven.token(border-regular);
+    vertical-align: middle;
+}
+
+.wu-divider:not(:empty) {
+    display: flex;
+    align-items: center;
+    gap: woven.token(space-3);
+    height: auto;
+    border-block-start: 0;
+    color: woven.token(text-muted);
+    font-size: woven.token(font-size-xs);
+
+    &::before,
+    &::after {
+        content: "";
+        flex: 1;
+        border-block-start: woven.token(border-width-1) solid woven.token(border-regular);
+    }
+}
+
+.wu-divider.dashed,
+.wu-divider.dashed::before,
+.wu-divider.dashed::after {
+    border-style: dashed;
+}