@wovenui/components 0.0.0-stage → 1.0.0

package/src/components/_input.scss

@@ -0,0 +1,278 @@
+////
+//// @component wu-input
+//// Text input in three sizes, with disabled, read-only and invalid looks, plus prefix, suffix and a clear button inside the field border.
+////
+//// Core base already sets the border, background, hover, focus ring, invalid border, disabled look, placeholder color, padding and the md height; the kit adds the radius, type size and sizes.
+////
+//// `wu-input-affix` draws the box and the input inside goes bare. Prefix and suffix sit on the inline start and end, so they swap in right-to-left pages. A `wu-select` can replace the input. `sm` and `lg` go on the wrapper. `wu-input-clear` is started by the kit script: it shows while the field has text, clears it and refocuses.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js optional initInputClear
+//// @example html
+////   <input class="wu-input" type="text" aria-label="Name" placeholder="Name">
+////   <input class="wu-input sm" type="text" aria-label="Code" value="A-12" readonly>
+////   <input class="wu-input lg" type="email" aria-label="Email" aria-invalid="true">
+//// @example html
+////   <div class="wu-input-affix">
+////     <span class="wu-input-prefix"><svg aria-hidden="true" viewBox="0 0 24 24"><circle cx="11" cy="11" r="6" /></svg></span>
+////     <input class="wu-input" type="search" aria-label="Search">
+////     <button class="wu-input-clear" type="button" aria-label="Clear" hidden></button>
+////     <span class="wu-input-suffix">USD</span>
+////   </div>
+//// @modifier sm | lg - Small or large control height, padding and font size; also on `wu-input-affix`, and taken from a `wu-field-group sm` or `lg` when the control has no size @since 1.0.0
+//// @part wu-input-affix - Wrapper that draws the field box around a bare input or select, with a prefix, suffix and clear button @since 1.0.0
+//// @part wu-input-prefix - Content before the input, such as an icon or currency symbol @since 1.0.0
+//// @part wu-input-suffix - Content after the input, such as a unit @since 1.0.0
+//// @part wu-input-clear - Clear button inside the affix; an empty button shows a multiplication sign; give it an `aria-label` @since 1.0.0
+//// @state disabled - Not-allowed cursor; an affix with a disabled control dims @since 1.0.0
+//// @state readonly - Alternate background @since 1.0.0
+//// @state aria-invalid="true" | :user-invalid - Danger border doubled to 2px, so the change is not color alone @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+@mixin centered-pad($height) {
+    $rest: "#{$height} - 2 * #{woven.token(border-width-1)} - 1em * #{woven.token(line-height-normal)}";
+
+    --wu-kit-pad-start: #{round(down, calc((#{$rest}) / 2), 1px)};
+
+    padding-block: var(--wu-kit-pad-start) calc(#{$rest} - var(--wu-kit-pad-start));
+}
+
+// Text-like <input>. Core base already sets the border, background, hover, focus ring, invalid border,
+// disabled look, placeholder color, padding and the md height; the kit adds radius, type size and sizes.
+.wu-input {
+    border-radius: woven.token(radius-md);
+    font-size: woven.token(font-size-md);
+    line-height: woven.token(line-height-normal);
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+
+    &[readonly] {
+        background-color: woven.token(bg-alternate);
+    }
+
+    // Invalid: core's danger border doubled to 2px, so the change is not color alone
+    &:is([aria-invalid="true"], :user-invalid) {
+        box-shadow: inset 0 0 0 woven.token(border-width-1) woven.token(danger);
+    }
+}
+
+.wu-input.sm {
+    height: woven.token(control-height-sm);
+    padding-inline: woven.token(control-padding-inline-sm);
+    font-size: woven.token(font-size-sm);
+
+    @include centered-pad(woven.token(control-height-sm));
+}
+
+.wu-input.lg {
+    height: woven.token(control-height-lg);
+    padding-inline: woven.token(control-padding-inline-lg);
+}
+
+// Prefix and suffix inside the field border; the wrapper draws the box and the input inside goes bare.
+// <div class="wu-input-affix">
+//   <span class="wu-input-prefix"><svg aria-hidden="true">...</svg></span>
+//   <input class="wu-input" type="search" aria-label="Search">
+//   <button class="wu-input-clear" type="button" aria-label="Clear" hidden></button>
+//   <span class="wu-input-suffix">USD</span>
+// </div>
+// Prefix and suffix sit on the inline start and end, so they swap in RTL. A wu-select can replace the input.
+// wu-input-clear is started by the kit script: it shows with content, clears and refocuses. Sizes: sm, lg on the wrapper.
+.wu-input-affix {
+    display: flex;
+    align-items: center;
+    gap: woven.token(space-2);
+    width: 100%;
+
+    --wu-kit-affix-height: #{woven.token(control-height-md)};
+
+    height: var(--wu-kit-affix-height);
+    padding-inline: woven.token(control-padding-inline-md);
+    border: woven.token(border-width-1) solid woven.token(border-control);
+    border-radius: woven.token(radius-md);
+    background-color: woven.token(bg-surface);
+    color: woven.token(text-regular);
+    font-size: woven.token(font-size-md);
+    line-height: woven.token(line-height-normal);
+    transition: border-color woven.token(duration-150) woven.token(ease-out);
+
+    &:hover:not(:has(:disabled, [aria-invalid="true"], :user-invalid)) {
+        border-color: woven.token(border-control-hover);
+    }
+
+    &:has(:focus-visible) {
+        outline: woven.token(border-focus-width) solid woven.token(border-focus);
+        outline-offset: calc(-1 * #{woven.token(border-focus-offset)});
+    }
+
+    &:has(:is([aria-invalid="true"], :user-invalid)) {
+        border-color: woven.token(danger);
+        box-shadow: inset 0 0 0 woven.token(border-width-1) woven.token(danger);
+    }
+
+    &:has(.wu-input:disabled, .wu-select:disabled) {
+        background-color: woven.token(bg-disabled);
+        opacity: woven.token(opacity-50);
+        cursor: not-allowed;
+    }
+
+    > :is(.wu-input, .wu-select) {
+        flex: 1 1 auto;
+        width: 1%;
+        min-width: 0;
+        height: 100%;
+        padding-block: 0;
+        padding-inline: 0;
+        border: 0;
+        border-radius: 0;
+        background-color: transparent;
+        box-shadow: none;
+        font-size: inherit;
+        outline: 0;
+
+        &:is(:hover, :focus-visible, :disabled, [aria-invalid="true"], :user-invalid) {
+            border: 0;
+            background-color: transparent;
+            box-shadow: none;
+            opacity: 1;
+            outline: 0;
+        }
+    }
+
+    > .wu-input {
+        @include centered-pad(var(--wu-kit-affix-height));
+    }
+
+    // A single-line select rounds half-pixel padding down, as .wu-select.sm does, so the text sits centered.
+    // The doubled class outranks the align-items: center that select.scss sets here.
+    > .wu-select.wu-select:not([multiple], [size]:not([size="1"])) {
+        align-items: normal;
+        padding-block: round(down, calc((var(--wu-kit-affix-height) - 2 * #{woven.token(border-width-1)} - 1em * #{woven.token(line-height-normal)}) / 2), 1px);
+    }
+
+    // A native search field draws its own clear mark; the kit button replaces it
+    > input[type="search"]::-webkit-search-cancel-button {
+        appearance: none;
+    }
+
+    > input[type="search"]::-webkit-search-decoration {
+        appearance: none;
+    }
+
+    // Select arrow keeps its inline-end room inside the wrapper
+    > .wu-select:not([multiple], [size]:not([size="1"])) {
+        padding-inline-end: calc(2 * 0.3125rem + #{woven.token(space-2)});
+    }
+}
+
+.wu-input-prefix,
+.wu-input-suffix {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    color: woven.token(text-muted);
+    white-space: nowrap;
+
+    > svg {
+        flex-shrink: 0;
+        width: 1em;
+        height: 1em;
+    }
+}
+
+.wu-input-clear {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.5em;
+    block-size: 1.5em;
+    padding: 0;
+    border: 0;
+    border-radius: woven.token(radius-full);
+    background: transparent;
+    color: woven.token(text-muted);
+    font-size: inherit;
+    line-height: 1;
+    cursor: pointer;
+
+    &:empty::before {
+        content: "\00d7";
+        font-size: 1.25em;
+    }
+
+    &:hover {
+        background: woven.token(bg-hover);
+        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);
+    }
+
+    &[hidden] {
+        display: none;
+    }
+
+    > svg {
+        flex-shrink: 0;
+        width: 1em;
+        height: 1em;
+    }
+}
+
+.wu-input-affix.sm {
+    --wu-kit-affix-height: #{woven.token(control-height-sm)};
+
+    height: var(--wu-kit-affix-height);
+    padding-inline: woven.token(control-padding-inline-sm);
+    font-size: woven.token(font-size-sm);
+}
+
+.wu-input-affix.lg {
+    --wu-kit-affix-height: #{woven.token(control-height-lg)};
+
+    height: var(--wu-kit-affix-height);
+    padding-inline: woven.token(control-padding-inline-lg);
+}
+
+@media (forced-colors: active) {
+    .wu-input-affix:has(:focus-visible) {
+        outline-color: Highlight;
+    }
+}
+
+// Size from a wu-field-group sm or lg; a control with its own sm or lg keeps it
+@each $size, $font in ("sm": "font-size-sm", "lg": "font-size-md") {
+    $h: woven.token(control-height-#{$size});
+    $pad: woven.token(control-padding-inline-#{$size});
+    $fs: woven.token(#{$font});
+
+    :where(.wu-field-group.#{$size}) {
+        .wu-input:not(.sm, .lg, .wu-input-affix > *) {
+            height: $h;
+            padding-inline: $pad;
+            font-size: $fs;
+
+            @if $size == "sm" {
+                @include centered-pad($h);
+            } @else {
+                padding-block: 0;
+            }
+        }
+
+        .wu-input-affix:not(.sm, .lg) {
+            --wu-kit-affix-height: #{$h};
+
+            height: $h;
+            padding-inline: $pad;
+            font-size: $fs;
+        }
+    }
+}

package/src/components/_list.scss

@@ -0,0 +1,76 @@
+////
+//// @component wu-list
+//// Vertical list of rows with a title, text and room for leading or trailing content.
+////
+//// Use a `ul` or `ol`; add `role="list"` to keep list semantics without markers. `wu-list-body` grows between leading and trailing content such as an avatar, badge or button.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <ul class="wu-list divided" role="list">
+////     <li class="wu-list-item">
+////       <div class="wu-list-body">
+////         <p class="wu-list-title">Ada Lovelace</p>
+////         <p class="wu-list-text">Engineer</p>
+////       </div>
+////       <span class="wu-badge success">Active</span>
+////     </li>
+////     <li class="wu-list-item">
+////       <div class="wu-list-body">
+////         <p class="wu-list-title">Grace Hopper</p>
+////       </div>
+////     </li>
+////   </ul>
+//// @modifier divided - Line between rows @since 1.0.0
+//// @modifier sm - Tighter row padding @since 1.0.0
+//// @part wu-list-item - Row, a flex container @since 1.0.0
+//// @part wu-list-body - Column that grows between leading and trailing content @since 1.0.0
+//// @part wu-list-title - Row title, medium weight @since 1.0.0
+//// @part wu-list-text - Muted supporting text @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-list {
+    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-list-item {
+    display: flex;
+    align-items: center;
+    gap: woven.token(space-3);
+    padding-block: woven.token(space-3);
+}
+
+// Grows between leading and trailing content (avatar, badge, button)
+.wu-list-body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.wu-list-title {
+    margin: 0;
+    font-weight: woven.token(font-weight-medium);
+}
+
+.wu-list-text {
+    margin: 0;
+    color: woven.token(text-muted);
+    text-wrap: pretty;
+}
+
+.wu-list.divided > .wu-list-item + .wu-list-item {
+    border-block-start: woven.token(border-width-1) solid woven.token(border-regular);
+}
+
+.wu-list.sm > .wu-list-item {
+    padding-block: woven.token(space-2);
+}

package/src/components/_modal.scss

@@ -0,0 +1,168 @@
+////
+//// @component wu-modal
+//// Dialog built on the native `dialog` element, with header, body and footer.
+////
+//// Esc closes it, and `closedby="any"` adds click outside where supported. `showModal()` and the `command` attribute lock page scroll; `show()` opens it non-modal and leaves the page alone.
+////
+//// The body scrolls on its own when the content is taller than the dialog.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <button class="wu-btn" type="button" commandfor="m1" command="show-modal">Open</button>
+////   <dialog class="wu-modal" id="m1" aria-labelledby="m1-title" closedby="any">
+////     <header class="wu-modal-header">
+////       <h2 class="wu-modal-title" id="m1-title">Title</h2>
+////       <button class="wu-modal-close" type="button" commandfor="m1" command="close" aria-label="Close"></button>
+////     </header>
+////     <div class="wu-modal-body">Content</div>
+////     <form class="wu-modal-footer" method="dialog">
+////       <button class="wu-btn">Cancel</button>
+////       <button class="wu-btn brand" value="confirm">Save</button>
+////     </form>
+////   </dialog>
+//// @modifier sm | lg - Narrow (24rem) or wide (48rem) dialog; the default is 32rem @since 1.0.0
+//// @modifier animated - Fades and scales the dialog in and out and fades the backdrop when the user allows motion; `wu-animated` on an ancestor does the same @since 1.0.0
+//// @part wu-modal-header - Top row for the title and close button @since 1.0.0
+//// @part wu-modal-title - Dialog heading @since 1.0.0
+//// @part wu-modal-close - Close button drawn with the shared close icon; give it an `aria-label` @since 1.0.0
+//// @part wu-modal-body - Scrolling content area @since 1.0.0
+//// @part wu-modal-footer - Bottom row for actions, aligned to the inline end @since 1.0.0
+//// @variable --wu-modal--Width [32rem] - Dialog width @since 1.0.0
+//// @variable --wu-modal--MaxHeight [calc(100dvh - 4rem)] - Largest dialog height before the body scrolls @since 1.0.0
+//// @variable --wu-modal--Backdrop [50% black, 70% in dark themes] - Backdrop color @since 1.0.0
+//// @state open - Displays the dialog as a flex column @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+@use "../close";
+
+.wu-modal {
+    inset: 0;
+    inline-size: var(--wu-modal--Width, 32rem);
+    max-inline-size: calc(100% - #{woven.token(space-8)});
+    block-size: fit-content;
+    max-block-size: var(--wu-modal--MaxHeight, calc(100dvh - #{woven.token(space-16)}));
+    margin: auto;
+    padding: 0;
+    border: woven.token(border-width-1) solid woven.token(border-regular);
+    border-radius: woven.token(radius-lg);
+    background: woven.token(bg-surface);
+    color: woven.token(text-regular);
+    box-shadow: woven.token(shadow-xl);
+    z-index: woven.token(z-modal);
+
+    &[open] {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &::backdrop {
+        background: var(--wu-modal--Backdrop, color-mix(in srgb, #{woven.token(black)} 50%, transparent));
+
+        // Stronger in dark themes, so the dialog stands apart
+        @include woven.dark-mode {
+            background: var(--wu-modal--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-modal:modal) {
+    overflow: hidden;
+    scrollbar-gutter: stable;
+}
+
+.wu-modal.sm {
+    inline-size: var(--wu-modal--Width, 24rem);
+}
+
+.wu-modal.lg {
+    inline-size: var(--wu-modal--Width, 48rem);
+}
+
+.wu-modal-header,
+.wu-modal-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-modal-header {
+    justify-content: space-between;
+    border-block-end: woven.token(border-width-1) solid woven.token(border-regular);
+}
+
+.wu-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);
+}
+
+// Scrolls on its own when the content is taller than the dialog
+.wu-modal-body {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    padding: woven.token(space-5);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+
+.wu-modal-footer {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    border-block-start: woven.token(border-width-1) solid woven.token(border-regular);
+}
+
+.wu-modal-close {
+    @include close.button;
+
+    margin-inline-end: calc(-1 * #{woven.token(space-2)});
+}
+
+// Opt-in motion: the dialog fades and scales in and out, the backdrop fades
+@media (prefers-reduced-motion: no-preference) {
+    .wu-modal.animated,
+    .wu-animated .wu-modal {
+        opacity: 0;
+        scale: 0.96;
+        transition:
+            opacity woven.token(duration-200) woven.token(ease-out),
+            scale woven.token(duration-200) woven.token(ease-out),
+            display woven.token(duration-200) allow-discrete,
+            overlay woven.token(duration-200) allow-discrete;
+
+        &::backdrop {
+            opacity: 0;
+            transition:
+                opacity woven.token(duration-200) woven.token(ease-out),
+                display woven.token(duration-200) allow-discrete,
+                overlay woven.token(duration-200) allow-discrete;
+        }
+
+        &[open] {
+            opacity: 1;
+            scale: 1;
+
+            @starting-style {
+                opacity: 0;
+                scale: 0.96;
+            }
+        }
+
+        &[open]::backdrop {
+            opacity: 1;
+
+            @starting-style {
+                opacity: 0;
+            }
+        }
+    }
+}

package/src/components/_page-header.scss

@@ -0,0 +1,85 @@
+////
+//// @component wu-page-header
+//// Page title row with an optional description, breadcrumb and action buttons.
+////
+//// Actions line up with the title and wrap below it on narrow screens. A direct `wu-breadcrumb` child takes its own full-width row above the title.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <header class="wu-page-header divided">
+////     <nav class="wu-breadcrumb" aria-label="Breadcrumb">
+////       <ol>
+////         <li><a href="/projects">Projects</a></li>
+////         <li aria-current="page">Apollo</li>
+////       </ol>
+////     </nav>
+////     <div class="wu-page-header-main">
+////       <h1 class="wu-page-header-title">Apollo</h1>
+////       <p class="wu-page-header-text">Launch plan and open tasks.</p>
+////     </div>
+////     <div class="wu-page-header-actions">
+////       <button class="wu-btn" type="button">Share</button>
+////       <button class="wu-btn brand" type="button">New task</button>
+////     </div>
+////   </header>
+//// @modifier divided - Adds a bottom border and padding under the header @since 1.0.0
+//// @part wu-page-header-main - Column that holds the title and description @since 1.0.0
+//// @part wu-page-header-title - Page heading @since 1.0.0
+//// @part wu-page-header-text - Muted description under the title @since 1.0.0
+//// @part wu-page-header-actions - Row of buttons, centered on the title first line @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-page-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: woven.token(space-3) woven.token(space-4);
+    color: woven.token(text-regular);
+
+    > .wu-breadcrumb {
+        flex-basis: 100%;
+    }
+}
+
+.wu-page-header-main {
+    display: flex;
+    flex: 1 1 woven.token(space-64);
+    flex-direction: column;
+    gap: woven.token(space-1);
+    min-width: 0;
+}
+
+.wu-page-header-title {
+    margin: 0;
+    font-size: woven.token(font-size-2xl);
+    font-weight: woven.token(font-weight-semibold);
+    line-height: woven.token(line-height-tight);
+    text-wrap: balance;
+}
+
+.wu-page-header-text {
+    max-inline-size: 65ch;
+    margin: 0;
+    color: woven.token(text-muted);
+    font-size: woven.token(font-size-sm);
+    text-wrap: pretty;
+}
+
+// Centered on the title's first line, however long the description is
+.wu-page-header-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: woven.token(space-2);
+    min-block-size: calc(#{woven.token(font-size-2xl)} * #{woven.token(line-height-tight)});
+}
+
+.wu-page-header.divided {
+    padding-block-end: woven.token(space-4);
+    border-block-end: woven.token(border-width-1) solid woven.token(border-regular);
+}