@wovenui/components 0.0.0-stage → 1.0.0

package/src/components/_breadcrumb.scss

@@ -0,0 +1,115 @@
+////
+//// @component wu-breadcrumb
+//// Trail of links that shows where the page sits in the site.
+////
+//// Wrap an ordered list in a `nav` with an `aria-label`, and mark the last item with `aria-current="page"`.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <nav class="wu-breadcrumb" aria-label="Breadcrumb">
+////     <ol class="wu-breadcrumb-list">
+////       <li class="wu-breadcrumb-item"><a class="wu-breadcrumb-link" href="/">Home</a></li>
+////       <li class="wu-breadcrumb-item"><a class="wu-breadcrumb-link" href="/projects/">Projects</a></li>
+////       <li class="wu-breadcrumb-item"><span aria-current="page">Website</span></li>
+////     </ol>
+////   </nav>
+//// @example html
+////   <nav class="wu-breadcrumb slash sm" aria-label="Breadcrumb">
+////     <ol class="wu-breadcrumb-list">
+////       <li class="wu-breadcrumb-item"><a class="wu-breadcrumb-link" href="/">Home</a></li>
+////       <li class="wu-breadcrumb-item"><span aria-current="page">Docs</span></li>
+////     </ol>
+////   </nav>
+//// @modifier slash - A slash separator instead of the chevron @since 1.0.0
+//// @modifier sm - Smaller font size @since 1.0.0
+//// @part wu-breadcrumb-list - The `ol` that lays the items out and wraps them @since 1.0.0
+//// @part wu-breadcrumb-item - One `li` in the trail, with a separator before it @since 1.0.0
+//// @part wu-breadcrumb-link - Underlined link to a parent page @since 1.0.0
+//// @state aria-current="page" - The current page: regular text weight and color, no underline @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-breadcrumb {
+    color: woven.token(text-muted);
+    font-size: woven.token(font-size-sm);
+    line-height: woven.token(line-height-normal);
+}
+
+.wu-breadcrumb-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: woven.token(space-1) woven.token(space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.wu-breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+    gap: woven.token(space-2);
+    min-width: 0;
+}
+
+// Separator: a chevron drawn with two borders, mirrored in RTL
+.wu-breadcrumb-item + .wu-breadcrumb-item::before {
+    content: "";
+    flex: none;
+    width: 0.4em;
+    height: 0.4em;
+    border-block-start: woven.token(border-width-1) solid currentcolor;
+    border-inline-end: woven.token(border-width-1) solid currentcolor;
+    color: woven.token(text-subtle);
+    rotate: 45deg;
+}
+
+.wu-breadcrumb-item + .wu-breadcrumb-item:dir(rtl)::before {
+    rotate: -45deg;
+}
+
+.wu-breadcrumb.slash .wu-breadcrumb-item + .wu-breadcrumb-item::before {
+    content: "/";
+    content: "/" / "";
+    width: auto;
+    height: auto;
+    border: 0;
+    rotate: none;
+}
+
+.wu-breadcrumb.slash .wu-breadcrumb-item + .wu-breadcrumb-item:dir(rtl)::before {
+    rotate: none;
+}
+
+// Underlined at rest so links read as links; the current page is plain text
+.wu-breadcrumb-link {
+    border-radius: woven.token(radius-xs);
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-color: woven.token(border-strong);
+    text-decoration-thickness: woven.token(border-width-1);
+    text-underline-offset: 0.2em;
+
+    &:hover {
+        color: woven.token(text-regular);
+        text-decoration-color: currentcolor;
+    }
+
+    &:focus-visible {
+        outline: woven.token(border-focus-width) solid woven.token(border-focus);
+        outline-offset: woven.token(border-focus-offset);
+    }
+}
+
+.wu-breadcrumb-item [aria-current="page"] {
+    color: woven.token(text-regular);
+    font-weight: woven.token(font-weight-medium);
+    text-decoration: none;
+}
+
+.wu-breadcrumb.sm {
+    font-size: woven.token(font-size-xs);
+}

package/src/components/_btn-group.scss

@@ -0,0 +1,113 @@
+////
+//// @component wu-btn-group
+//// Joins buttons into one segmented control, as a split button, a toggle set or a radio set.
+////
+//// Split divider: use `brand`, `danger` or `quiet` on both buttons of a pair. Checkable: use `role="group"` with checkboxes or `role="radiogroup"` with radios.
+////
+//// The checked label takes the `aria-pressed` look; arrow keys are native for radios. `animated` on a button gives it the press from `wu-btn`.
+////
+//// @since 1.0.0
+//// @needs button
+//// @js none
+//// @example html
+////   <div class="wu-btn-group">
+////     <button class="wu-btn brand" type="button">Save</button>
+////     <button class="wu-btn brand caret" type="button" popovertarget="more-save" aria-label="More save options"></button>
+////   </div>
+////   <div id="more-save" popover>Save as draft</div>
+//// @example html
+////   <div class="wu-btn-group" role="radiogroup" aria-label="Align">
+////     <label class="wu-btn"><input type="radio" name="align" class="sr-only" checked> Left</label>
+////     <label class="wu-btn"><input type="radio" name="align" class="sr-only"> Right</label>
+////   </div>
+//// @example html
+////   <div class="wu-btn-group vertical" role="group" aria-label="View">
+////     <button class="wu-btn" type="button" aria-pressed="true">List</button>
+////     <button class="wu-btn" type="button" aria-pressed="false">Grid</button>
+////   </div>
+//// @modifier vertical - Stacks the buttons in a column @since 1.0.0
+//// @modifier brand | danger | quiet - On two neighbor buttons: a divider line between them, for split buttons @since 1.0.0
+//// @state aria-pressed="true" - Toggle on: selected tint and an inner ring; a checked input inside the label does the same @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-btn-group {
+    display: inline-flex;
+    vertical-align: middle;
+
+    > .wu-btn {
+        position: relative;
+        border-radius: 0;
+    }
+
+    > .wu-btn:is(:hover, :focus-visible, [aria-pressed="true"], :has(> input:checked, > input:focus-visible)) {
+        z-index: woven.token(z-hover);
+    }
+
+    // Toggle state: tint plus an inner ring, so color is not the only signal
+    > .wu-btn:is([aria-pressed="true"], :has(> input:checked)) {
+        background: woven.token(bg-selected);
+        box-shadow: inset 0 0 0 woven.token(border-width-1) woven.token(brand);
+        color: woven.token(text-brand);
+    }
+
+    > .wu-btn:has(> input:focus-visible) {
+        outline: woven.token(border-focus-width) solid woven.token(border-focus);
+        outline-offset: woven.token(border-focus-offset);
+    }
+
+    > .wu-btn:has(> input:disabled) {
+        opacity: woven.token(opacity-50);
+        pointer-events: none;
+    }
+
+    // Split button divider
+    > .wu-btn.brand + .wu-btn.brand {
+        border-inline-start-color: color-mix(in srgb, woven.token(text-on-brand) 40%, transparent);
+    }
+
+    > .wu-btn.danger + .wu-btn.danger {
+        border-inline-start-color: color-mix(in srgb, woven.token(text-on-danger) 40%, transparent);
+    }
+
+    > .wu-btn.quiet + .wu-btn.quiet {
+        border-inline-start-color: woven.token(border-regular);
+    }
+}
+
+.wu-btn-group:not(.vertical) > .wu-btn {
+    &:first-child {
+        border-start-start-radius: woven.token(radius-md);
+        border-end-start-radius: woven.token(radius-md);
+    }
+
+    &:nth-last-child(1 of .wu-btn) {
+        border-start-end-radius: woven.token(radius-md);
+        border-end-end-radius: woven.token(radius-md);
+    }
+
+    & + .wu-btn {
+        margin-inline-start: calc(-1 * #{woven.token(border-width-1)});
+    }
+}
+
+.wu-btn-group.vertical {
+    flex-direction: column;
+
+    > .wu-btn:first-child {
+        border-start-start-radius: woven.token(radius-md);
+        border-start-end-radius: woven.token(radius-md);
+    }
+
+    > .wu-btn:nth-last-child(1 of .wu-btn) {
+        border-end-start-radius: woven.token(radius-md);
+        border-end-end-radius: woven.token(radius-md);
+    }
+
+    > .wu-btn + .wu-btn {
+        margin-block-start: calc(-1 * #{woven.token(border-width-1)});
+    }
+}
+
+// Opt-in motion: animated gives each button the .wu-btn.animated press, set in _button.scss

package/src/components/_button.scss

@@ -0,0 +1,301 @@
+////
+//// @component wu-btn
+//// Buttons for actions, in roles and sizes, with a caret for menus and split buttons.
+////
+//// A `button` element is the default; an `a` element with `wu-btn` looks the same for navigation.
+////
+//// Inside a `wu-field-group sm` or `lg`, a button without its own size takes the group size.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <button class="wu-btn" type="button">Cancel</button>
+////   <button class="wu-btn brand" type="button">Save</button>
+////   <button class="wu-btn danger subtle sm" type="button">Delete</button>
+//// @example html
+////   <button class="wu-btn icon round" type="button" aria-label="Settings">
+////     <svg aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" /></svg>
+////   </button>
+////   <button class="wu-btn brand" type="button" aria-busy="true">Saving</button>
+//// @example html
+////   <button class="wu-btn caret" type="button" popovertarget="actions">Actions</button>
+////   <div id="actions" popover>Menu content</div>
+//// @modifier brand - Solid brand fill for the main action @since 1.0.0
+//// @modifier danger - Solid danger fill for destructive actions @since 1.0.0
+//// @modifier subtle - With `brand` or `danger`: tinted fill and border, solid on hover @since 1.0.0
+//// @modifier quiet - No border or fill until hover @since 1.0.0
+//// @modifier link - Looks like a link, no padding, keeps the control height @since 1.0.0
+//// @modifier round - Pill shape; a circle when the button is empty or holds only an svg @since 1.0.0
+//// @modifier icon - Square button for one svg and no text; give it an `aria-label` @since 1.0.0
+//// @modifier caret - Adds a caret after the label; an empty caret button with an `aria-label` is a narrow caret-only button for split buttons @since 1.0.0
+//// @modifier sm | lg - Small or large control height and font size @since 1.0.0
+//// @modifier animated - Spring press scale when the user allows motion; `wu-animated` on an ancestor or `wu-btn-group animated` does the same @since 1.0.0
+//// @variable --wu-btn--CaretSize [0.4em] - Size of the caret @since 1.0.0
+//// @state disabled | aria-disabled="true" - Half opacity, no pointer events @since 1.0.0
+//// @state aria-busy="true" - Loading: blocks pointer clicks and keeps full opacity @since 1.0.0
+//// @state :popover-open - The caret turns while the popover right after the button is open @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: woven.token(space-2);
+    min-height: woven.token(control-height-md);
+    padding-inline: woven.token(control-padding-inline-md);
+    border: woven.token(border-width-1) solid woven.token(border-regular);
+    border-radius: woven.token(radius-md);
+    background: woven.token(bg-surface);
+    color: woven.token(text-regular);
+    font: inherit;
+    font-size: woven.token(font-size-sm);
+    font-weight: woven.token(font-weight-medium);
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition-property: background-color, border-color, color;
+    transition-duration: woven.token(duration-150);
+    transition-timing-function: woven.token(ease-out);
+
+    &:hover {
+        border-color: woven.token(border-strong);
+        background: woven.token(bg-hover);
+    }
+
+    &:focus-visible {
+        outline: woven.token(border-focus-width) solid woven.token(border-focus);
+        outline-offset: woven.token(border-focus-offset);
+    }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+        opacity: woven.token(opacity-50);
+        pointer-events: none;
+    }
+
+    &[aria-busy="true"] {
+        opacity: 1;
+        pointer-events: none;
+    }
+}
+
+.wu-btn.brand {
+    border-color: woven.token(brand);
+    background: woven.token(brand);
+    color: woven.token(text-on-brand);
+
+    &:hover {
+        border-color: woven.token(brand-hover);
+        background: woven.token(brand-hover);
+    }
+
+    &:active {
+        border-color: woven.token(brand-active);
+        background: woven.token(brand-active);
+    }
+}
+
+.wu-btn.danger {
+    border-color: woven.token(danger);
+    background: woven.token(danger);
+    color: woven.token(text-on-danger);
+
+    &:hover {
+        border-color: woven.token(danger-hover);
+        background: woven.token(danger-hover);
+    }
+
+    &:active {
+        border-color: woven.token(danger-active);
+        background: woven.token(danger-active);
+    }
+}
+
+// Subtle: tinted role fill and border, solid on hover
+.wu-btn.brand.subtle {
+    border-color: woven.token(brand-border);
+    background: woven.token(brand-subtle);
+    color: woven.token(text-brand);
+
+    &:hover {
+        border-color: woven.token(brand-hover);
+        background: woven.token(brand-hover);
+        color: woven.token(text-on-brand);
+    }
+
+    &:active {
+        border-color: woven.token(brand-active);
+        background: woven.token(brand-active);
+        color: woven.token(text-on-brand);
+    }
+}
+
+.wu-btn.danger.subtle {
+    border-color: woven.token(danger-border);
+    background: woven.token(danger-subtle);
+    color: woven.token(text-danger);
+
+    &:hover {
+        border-color: woven.token(danger-hover);
+        background: woven.token(danger-hover);
+        color: woven.token(text-on-danger);
+    }
+
+    &:active {
+        border-color: woven.token(danger-active);
+        background: woven.token(danger-active);
+        color: woven.token(text-on-danger);
+    }
+}
+
+.wu-btn > svg {
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+}
+
+.wu-btn.quiet {
+    border-color: transparent;
+    background: transparent;
+
+    &:hover {
+        border-color: transparent;
+        background: woven.token(bg-hover);
+    }
+}
+
+.wu-btn.sm {
+    min-height: woven.token(control-height-sm);
+    padding-inline: woven.token(control-padding-inline-sm);
+    font-size: woven.token(font-size-xs);
+}
+
+.wu-btn.lg {
+    min-height: woven.token(control-height-lg);
+    padding-inline: woven.token(control-padding-inline-lg);
+    font-size: woven.token(font-size-md);
+}
+
+.wu-btn.caret::after {
+    content: "";
+    inline-size: var(--wu-btn--CaretSize, 0.4em);
+    block-size: var(--wu-btn--CaretSize, 0.4em);
+    margin-block-start: -0.2em;
+    border-bottom: 0.125em solid currentcolor;
+    border-right: 0.125em solid currentcolor;
+    rotate: 45deg;
+}
+
+// Link: text only, no padding; keeps the control height so it lines up in a toolbar row
+.wu-btn.link {
+    padding-inline: 0;
+    border-color: transparent;
+    background: transparent;
+    color: woven.token(text-link);
+
+    &:hover {
+        border-color: transparent;
+        background: transparent;
+        color: woven.token(text-link-hover);
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+    }
+}
+
+// Icon: square box for one svg and no text; round makes it a circle
+.wu-btn.icon {
+    min-inline-size: woven.token(control-height-md);
+    padding: 0;
+
+    > svg {
+        width: 1.25em;
+        height: 1.25em;
+    }
+}
+
+.wu-btn.icon.sm {
+    min-inline-size: woven.token(control-height-sm);
+}
+
+.wu-btn.icon.lg {
+    min-inline-size: woven.token(control-height-lg);
+}
+
+// Round: pill; a circle when empty or holding only an svg
+.wu-btn.round {
+    border-radius: woven.token(radius-full);
+}
+
+.wu-btn.round:empty,
+.wu-btn.round:has(> svg:only-child) {
+    min-inline-size: woven.token(control-height-md);
+    padding-inline: 0;
+}
+
+.wu-btn.round.sm:empty,
+.wu-btn.round.sm:has(> svg:only-child) {
+    min-inline-size: woven.token(control-height-sm);
+}
+
+.wu-btn.round.lg:empty,
+.wu-btn.round.lg:has(> svg:only-child) {
+    min-inline-size: woven.token(control-height-lg);
+}
+
+// Caret-only: square, matched to the control height of each size
+.wu-btn.caret:empty {
+    min-inline-size: woven.token(control-height-md);
+    padding-inline: 0;
+}
+
+.wu-btn.caret.sm:empty {
+    min-inline-size: woven.token(control-height-sm);
+}
+
+.wu-btn.caret.lg:empty {
+    min-inline-size: woven.token(control-height-lg);
+}
+
+.wu-btn.caret:has(+ [popover]:popover-open)::after {
+    margin-block-start: 0.2em;
+    rotate: 225deg;
+}
+
+// Size from a wu-field-group sm or lg; a button with its own sm or lg keeps it
+@each $size, $font in ("sm": "font-size-xs", "lg": "font-size-md") {
+    $h: woven.token(control-height-#{$size});
+
+    :where(.wu-field-group.#{$size}) {
+        .wu-btn:not(.sm, .lg) {
+            min-height: $h;
+            font-size: woven.token(#{$font});
+        }
+
+        .wu-btn:not(.sm, .lg, .icon, .link, .caret:empty, .round:empty, .round:has(> svg:only-child)) {
+            padding-inline: woven.token(control-padding-inline-#{$size});
+        }
+
+        .wu-btn:not(.sm, .lg):is(.icon, .caret:empty, .round:empty, .round:has(> svg:only-child)) {
+            min-inline-size: $h;
+        }
+    }
+}
+
+// Opt-in motion: spring press scale, also for every button of an animated group
+@media (prefers-reduced-motion: no-preference) {
+    .wu-btn.animated,
+    .wu-btn-group.animated > .wu-btn,
+    .wu-animated .wu-btn {
+        transition-property: background-color, border-color, color, scale;
+        transition-duration: woven.token(duration-150), woven.token(duration-150), woven.token(duration-150), woven.token(duration-500);
+        transition-timing-function: woven.token(ease-out), woven.token(ease-out), woven.token(ease-out), var(--wu-kit-ease-spring);
+
+        &:active {
+            scale: 0.95;
+        }
+    }
+}

package/src/components/_card.scss

@@ -0,0 +1,120 @@
+////
+//// @component wu-card
+//// Bordered surface that groups a header, a body and a footer.
+////
+//// Put one real link, usually in the title, on `wu-card-link` to make the whole card clickable. Other controls stay clickable above it.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <div class="wu-card">
+////     <div class="wu-card-header"><h3 class="wu-card-title">Plan</h3></div>
+////     <div class="wu-card-body">Everything you need to start.</div>
+////     <div class="wu-card-footer"><button class="wu-btn brand" type="button">Choose</button></div>
+////   </div>
+//// @example html
+////   <div class="wu-card">
+////     <div class="wu-card-body">
+////       <h3 class="wu-card-title"><a class="wu-card-link" href="/docs/">Read the docs</a></h3>
+////       <p>Guides for every component.</p>
+////     </div>
+////   </div>
+//// @part wu-card-header - Top row for a title and actions, with a bottom border @since 1.0.0
+//// @part wu-card-title - Heading inside the header or body @since 1.0.0
+//// @part wu-card-body - Main content; it grows so footers line up across a row of cards @since 1.0.0
+//// @part wu-card-footer - Bottom row for actions, aligned to the end, with a top border @since 1.0.0
+//// @part wu-card-link - Link stretched over the whole card @since 1.0.0
+//// @variable --wu-card--Padding [var(--wu-space-5)] - Padding of the header, body and footer @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-card {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    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-sm);
+}
+
+.wu-card-header,
+.wu-card-body,
+.wu-card-footer {
+    padding: var(--wu-card--Padding, #{woven.token(space-5)});
+}
+
+.wu-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: woven.token(space-3);
+    border-block-end: woven.token(border-width-1) solid woven.token(border-regular);
+}
+
+.wu-card-title {
+    margin: 0;
+    font-size: woven.token(font-size-md);
+    font-weight: woven.token(font-weight-semibold);
+    line-height: woven.token(line-height-tight);
+}
+
+// Grows so footers line up across a row of cards
+.wu-card-body {
+    flex-grow: 1;
+}
+
+.wu-card-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: woven.token(space-2);
+    border-block-start: woven.token(border-width-1) solid woven.token(border-regular);
+}
+
+// Whole-card link: one real link (usually in the title) stretched over the card
+.wu-card-link {
+    color: inherit;
+    text-decoration: none;
+
+    &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+    }
+
+    &:focus-visible {
+        outline: none;
+    }
+
+    &:focus-visible::after {
+        outline: woven.token(border-focus-width) solid woven.token(border-focus);
+        outline-offset: woven.token(border-focus-offset);
+    }
+}
+
+.wu-card:has(.wu-card-link) {
+    transition-property: border-color, box-shadow;
+    transition-duration: woven.token(duration-150);
+    transition-timing-function: woven.token(ease-out);
+
+    // Other controls stay clickable above the stretched link
+    :is(a, button, input, select, textarea, summary, label):not(.wu-card-link) {
+        position: relative;
+        z-index: woven.token(z-hover);
+    }
+}
+
+.wu-card:has(.wu-card-link:hover) {
+    border-color: woven.token(border-strong);
+    box-shadow: woven.token(shadow-md);
+
+    .wu-card-link {
+        text-decoration: underline;
+    }
+}