@wovenui/components 0.0.0-stage → 1.0.0

package/src/components/_tabs.scss

@@ -0,0 +1,327 @@
+////
+//// @component wu-tabs
+//// Tabs that show one panel at a time, following the WAI-ARIA tabs pattern, in line, card, boxed and vertical styles.
+////
+//// The kit script adds arrow keys, Home and End, switches the panels and fills in roles, ids, `aria-controls`, `aria-labelledby` and `tabindex` when they are missing. Without it the first panel shows.
+////
+//// In `vertical` tabs the script sets `aria-orientation="vertical"` on the list; without the script, add it yourself.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js required initTabs
+//// @example html
+////   <div class="wu-tabs">
+////     <div class="wu-tabs-list" role="tablist" aria-label="Account">
+////       <button class="wu-tabs-tab" type="button" role="tab" id="tab-profile" aria-controls="panel-profile" aria-selected="true">Profile</button>
+////       <button class="wu-tabs-tab" type="button" role="tab" id="tab-billing" aria-controls="panel-billing" aria-selected="false" tabindex="-1">Billing</button>
+////     </div>
+////     <div class="wu-tabs-panel" role="tabpanel" id="panel-profile" aria-labelledby="tab-profile" tabindex="0">Profile settings</div>
+////     <div class="wu-tabs-panel" role="tabpanel" id="panel-billing" aria-labelledby="tab-billing" tabindex="0" hidden>Billing settings</div>
+////   </div>
+//// @example html
+////   <div class="wu-tabs vertical boxed">
+////     <div class="wu-tabs-list" role="tablist" aria-label="Settings" aria-orientation="vertical">
+////       <button class="wu-tabs-tab" type="button" role="tab" id="tab-general" aria-controls="panel-general" aria-selected="true">General</button>
+////       <button class="wu-tabs-tab" type="button" role="tab" id="tab-team" aria-controls="panel-team" aria-selected="false" tabindex="-1" disabled>Team</button>
+////     </div>
+////     <div class="wu-tabs-panel" role="tabpanel" id="panel-general" aria-labelledby="tab-general" tabindex="0">General settings</div>
+////     <div class="wu-tabs-panel" role="tabpanel" id="panel-team" aria-labelledby="tab-team" tabindex="0" hidden>Team settings</div>
+////   </div>
+//// @modifier card - Joined tab boxes; the selected tab opens into the panel @since 1.0.0
+//// @modifier boxed - Tabs and panels inside one bordered box @since 1.0.0
+//// @modifier vertical - Tab list at the inline start, selected bar on its inline end edge @since 1.0.0
+//// @modifier animated - Selected bar grows from the center and the panel fades in when the user allows motion; `wu-animated` on an ancestor does the same @since 1.0.0
+//// @part wu-tabs-list - Row of tabs; scrolls sideways and fades the edge with more tabs @since 1.0.0
+//// @part wu-tabs-tab - One tab button; a direct child `svg` is sized to `1em` @since 1.0.0
+//// @part wu-tabs-panel - Content shown for the selected tab @since 1.0.0
+//// @state aria-selected="true" - On a tab: regular text color and a brand bar @since 1.0.0
+//// @state disabled | aria-disabled="true" - On a tab: half opacity and a not-allowed cursor @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-tabs-list {
+    display: flex;
+    gap: woven.token(space-1);
+    border-block-end: woven.token(border-width-1) solid woven.token(border-regular);
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+// Scroll cue: the edge with more tabs behind it fades out; the scrollbar hides where the cue works
+@property --wu-kit-tabs-fade-start {
+    syntax: "<length>";
+    inherits: false;
+    initial-value: 0;
+}
+
+@property --wu-kit-tabs-fade-end {
+    syntax: "<length>";
+    inherits: false;
+    initial-value: 0;
+}
+
+@supports (animation-timeline: scroll()) {
+    .wu-tabs-list {
+        scrollbar-width: none;
+        mask-image: linear-gradient(to right, transparent, #000 var(--wu-kit-tabs-fade-start), #000 calc(100% - var(--wu-kit-tabs-fade-end)), transparent);
+        animation-name: wu-tabs-fade;
+        animation-timing-function: linear;
+        animation-fill-mode: both;
+        animation-timeline: scroll(self inline);
+
+        &:dir(rtl) {
+            mask-image: linear-gradient(to left, transparent, #000 var(--wu-kit-tabs-fade-start), #000 calc(100% - var(--wu-kit-tabs-fade-end)), transparent);
+        }
+    }
+}
+
+@keyframes wu-tabs-fade {
+    0% {
+        --wu-kit-tabs-fade-start: 0px;
+        --wu-kit-tabs-fade-end: #{woven.token(space-8)};
+    }
+
+    8% {
+        --wu-kit-tabs-fade-start: #{woven.token(space-8)};
+    }
+
+    92% {
+        --wu-kit-tabs-fade-end: #{woven.token(space-8)};
+    }
+
+    100% {
+        --wu-kit-tabs-fade-start: #{woven.token(space-8)};
+        --wu-kit-tabs-fade-end: 0px;
+    }
+}
+
+.wu-tabs-tab {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: woven.token(space-2);
+    min-block-size: woven.token(control-height-md);
+    margin: 0;
+    padding-block: 0;
+    padding-inline: woven.token(space-3);
+    border: 0;
+    border-radius: woven.token(radius-sm) woven.token(radius-sm) 0 0;
+    background: transparent;
+    color: woven.token(text-muted);
+    font: inherit;
+    font-size: woven.token(font-size-sm);
+    font-weight: woven.token(font-weight-medium);
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color woven.token(duration-150) woven.token(ease-out);
+
+    // Selected bar, drawn inside the tab so the scrolling list does not clip it
+    &::after {
+        content: "";
+        position: absolute;
+        inset-inline: 0;
+        inset-block-end: 0;
+        block-size: woven.token(border-width-2);
+        border-radius: woven.token(radius-full);
+        background: transparent;
+    }
+
+    &:hover {
+        color: woven.token(text-regular);
+    }
+
+    &:focus-visible {
+        outline: woven.token(border-focus-width) solid woven.token(border-focus);
+        outline-offset: calc(-1 * #{woven.token(border-focus-width)});
+    }
+
+    &[aria-selected="true"] {
+        color: woven.token(text-regular);
+
+        &::after {
+            background: woven.token(brand);
+        }
+    }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+        opacity: woven.token(opacity-50);
+        cursor: not-allowed;
+    }
+
+    > svg {
+        flex-shrink: 0;
+        width: 1em;
+        height: 1em;
+    }
+}
+
+// Inline padding lines the text up with the tab labels and keeps the inset focus ring off the text
+.wu-tabs-panel {
+    padding-block: woven.token(space-4);
+    padding-inline: woven.token(space-3);
+
+    &:focus-visible {
+        border-radius: woven.token(radius-sm);
+        outline: woven.token(border-focus-width) solid woven.token(border-focus);
+        outline-offset: calc(-1 * #{woven.token(border-focus-width)});
+    }
+}
+
+// Card: joined tab boxes; the selected one has no bottom line, so it opens into the content.
+// A filler after the tabs carries the line to the end of the list.
+.wu-tabs.card > .wu-tabs-list {
+    gap: 0;
+    border-block-end: 0;
+
+    &::after {
+        content: "";
+        flex: 1 0 0;
+        border-block-end: woven.token(border-width-1) solid woven.token(border-regular);
+    }
+}
+
+.wu-tabs.card > .wu-tabs-list > .wu-tabs-tab {
+    border: woven.token(border-width-1) solid woven.token(border-regular);
+    border-radius: 0;
+    background: woven.token(bg-alternate);
+
+    & + .wu-tabs-tab {
+        margin-inline-start: calc(-1 * #{woven.token(border-width-1)});
+    }
+
+    &:first-child {
+        border-start-start-radius: woven.token(radius-md);
+    }
+
+    &:last-child {
+        border-start-end-radius: woven.token(radius-md);
+    }
+
+    &[aria-selected="true"] {
+        border-block-end-color: transparent;
+        background: transparent;
+    }
+}
+
+// Boxed: the list line is an inset shadow, so the selected tab's background can cover it
+.wu-tabs.boxed > .wu-tabs-list {
+    border-block-end: 0;
+    box-shadow: inset 0 calc(-1 * #{woven.token(border-width-1)}) 0 woven.token(border-regular);
+}
+
+// Boxed: tabs and panels inside one bordered box, the selected tab joined to the panel
+.wu-tabs.boxed {
+    border: woven.token(border-width-1) solid woven.token(border-regular);
+    border-radius: woven.token(radius-md);
+    background: woven.token(bg-surface);
+
+    > .wu-tabs-list {
+        gap: 0;
+        border-start-start-radius: calc(#{woven.token(radius-md)} - #{woven.token(border-width-1)});
+        border-start-end-radius: calc(#{woven.token(radius-md)} - #{woven.token(border-width-1)});
+        background: woven.token(bg-alternate);
+    }
+
+    > .wu-tabs-list > .wu-tabs-tab {
+        border-inline: woven.token(border-width-1) solid transparent;
+        border-radius: 0;
+
+        &[aria-selected="true"] {
+            border-inline-color: woven.token(border-regular);
+            background: woven.token(bg-surface);
+        }
+
+        &:first-child {
+            border-inline-start-color: transparent;
+        }
+    }
+
+    > .wu-tabs-panel {
+        padding: woven.token(space-4);
+    }
+}
+
+.wu-tabs:is(.card, .boxed) > .wu-tabs-list > .wu-tabs-tab::after {
+    content: none;
+}
+
+// Vertical: the list sits at the inline start, the selected bar on its inline end edge
+.wu-tabs.vertical {
+    display: flex;
+    align-items: flex-start;
+
+    > .wu-tabs-list {
+        flex: none;
+        flex-direction: column;
+        align-self: stretch;
+        border-block-end: 0;
+        border-inline-end: woven.token(border-width-1) solid woven.token(border-regular);
+        overflow: visible;
+        mask-image: none;
+        animation: none;
+    }
+
+    > .wu-tabs-list > .wu-tabs-tab {
+        border-radius: 0;
+        border-start-start-radius: woven.token(radius-sm);
+        border-end-start-radius: woven.token(radius-sm);
+        justify-content: flex-start;
+        text-align: start;
+
+        &::after {
+            inset-block: 0;
+            inset-inline: auto 0;
+            inline-size: woven.token(border-width-2);
+            block-size: auto;
+        }
+    }
+
+    > .wu-tabs-panel {
+        flex: 1;
+        min-inline-size: 0;
+        padding-block: woven.token(space-2);
+        padding-inline: woven.token(space-4);
+    }
+}
+
+// Opt-in motion: the bar grows from the center, the panel fades in
+@media (prefers-reduced-motion: no-preference) {
+    .wu-tabs.animated,
+    .wu-animated .wu-tabs {
+        .wu-tabs-tab::after {
+            scale: 0 1;
+            transition:
+                scale woven.token(duration-300) var(--wu-kit-ease-spring),
+                background-color woven.token(duration-150) woven.token(ease-out);
+        }
+
+        .wu-tabs-tab[aria-selected="true"]::after {
+            scale: 1;
+        }
+
+        &.vertical .wu-tabs-tab:not([aria-selected="true"])::after {
+            scale: 1 0;
+        }
+
+        .wu-tabs-panel {
+            transition:
+                opacity woven.token(duration-200) woven.token(ease-out),
+                translate woven.token(duration-200) woven.token(ease-out);
+
+            @starting-style {
+                opacity: 0;
+                translate: 0 woven.token(space-1);
+            }
+        }
+    }
+}
+
+@media (forced-colors: active) {
+    .wu-tabs-tab[aria-selected="true"]::after {
+        background: Highlight;
+    }
+}

package/src/components/_tag.scss

@@ -0,0 +1,143 @@
+////
+//// @component wu-tag
+//// Label for a category or a filter, in seven hues, as plain text, a link or a button.
+////
+//// A link or button tag gets a pointer, a hover color and the focus ring. `aria-pressed` on a button tag makes a checkable filter chip; toggling the attribute is up to your script.
+////
+//// A direct child `svg` is sized to `1em`. The remove button needs an `aria-label` that names the tag.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <span class="wu-tag">Design</span>
+////   <span class="wu-tag blue">Frontend</span>
+//// @example html
+////   <div role="group" aria-label="Filter by topic">
+////     <button class="wu-tag" type="button" aria-pressed="true">Design</button>
+////     <button class="wu-tag" type="button" aria-pressed="false">Research</button>
+////   </div>
+//// @example html
+////   <span class="wu-tag purple">Research <button class="wu-tag-remove" type="button" aria-label="Remove Research"></button></span>
+//// @modifier gray | red | blue | green | yellow | purple | pink - Hue color: subtle background, hue border and hue text @since 1.0.0
+//// @part wu-tag-remove - Remove button inside the tag, its cross drawn in CSS @since 1.0.0
+//// @state aria-pressed="true" - On a button tag: brand tint, ring and a check mark @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+$hues: "gray", "red", "blue", "green", "yellow", "purple", "pink";
+
+.wu-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: woven.token(space-1);
+    min-height: woven.token(space-6);
+    padding-inline: woven.token(space-2);
+    border: woven.token(border-width-1) solid woven.token(border-regular);
+    border-radius: woven.token(radius-sm);
+    background: woven.token(bg-surface);
+    color: woven.token(text-regular);
+    font: inherit;
+    font-size: woven.token(font-size-xs);
+    font-weight: woven.token(font-weight-medium);
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    vertical-align: middle;
+}
+
+// App svg beside the label
+.wu-tag > svg {
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+}
+
+// Link and button tags are interactive
+.wu-tag:is(a[href], button) {
+    cursor: pointer;
+    transition-property: background-color, border-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);
+    }
+}
+
+// Checkable chip: aria-pressed on a button tag. A check mark and a ring carry the state, not color alone
+.wu-tag:is(button)[aria-pressed="true"] {
+    border-color: woven.token(brand-border);
+    background: woven.token(brand-subtle);
+    color: woven.token(text-brand);
+    box-shadow: inset 0 0 0 woven.token(border-width-1) woven.token(brand-border);
+
+    &::before {
+        content: "";
+        flex-shrink: 0;
+        width: 0.5em;
+        height: 0.9em;
+        margin-block-start: -0.2em;
+        border-bottom: 0.15em solid currentcolor;
+        border-right: 0.15em solid currentcolor;
+        rotate: 45deg;
+    }
+
+    &:hover {
+        border-color: woven.token(brand);
+        background: woven.token(brand-subtle);
+    }
+}
+
+@each $hue in $hues {
+    .wu-tag.#{$hue} {
+        border-color: woven.token(#{$hue}-border);
+        background: woven.token(#{$hue}-subtle);
+        color: woven.token(text-#{$hue});
+    }
+}
+
+// Remove button, the cross drawn with two rotated bars
+.wu-tag-remove {
+    display: inline-grid;
+    place-items: center;
+    width: woven.token(space-5);
+    height: woven.token(space-5);
+    min-height: 0;
+    margin-inline-end: calc(-1 * #{woven.token(space-1)});
+    padding: 0;
+    border: 0;
+    border-radius: woven.token(radius-xs);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+
+    &::before,
+    &::after {
+        content: "";
+        grid-area: 1 / 1;
+        width: woven.token(space-2);
+        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);
+    }
+}
+
+.wu-tag:is(a[href], button):focus-visible,
+.wu-tag-remove:focus-visible {
+    outline: woven.token(border-focus-width) solid woven.token(border-focus);
+    outline-offset: woven.token(border-focus-offset);
+}

package/src/components/_text.scss

@@ -0,0 +1,42 @@
+////
+//// @component wu-text
+//// Body text on any element, with relaxed leading and space between paragraphs in a row.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <p class="wu-text lg">A lead paragraph introduces the page.</p>
+////   <p class="wu-text">Body text follows with relaxed leading.</p>
+////   <p class="wu-text sm muted">Small, muted text for notes and fine print.</p>
+//// @modifier sm - Small size @since 1.0.0
+//// @modifier lg - Large size, for a lead paragraph @since 1.0.0
+//// @modifier muted - Muted color @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-text {
+    margin: 0;
+    color: woven.token(text-regular);
+    font-size: woven.token(font-size-md);
+    line-height: woven.token(line-height-relaxed);
+    text-wrap: pretty;
+}
+
+.wu-text + .wu-text {
+    margin-block-start: woven.token(space-3);
+}
+
+.wu-text.sm {
+    font-size: woven.token(font-size-sm);
+}
+
+// Lead paragraph
+.wu-text.lg {
+    font-size: woven.token(font-size-lg);
+}
+
+.wu-text.muted {
+    color: woven.token(text-muted);
+}

package/src/components/_textarea.scss

@@ -0,0 +1,57 @@
+////
+//// @component wu-textarea
+//// Multi-line field with a bounded height that grows with the content, where the browser supports it.
+////
+//// Core base already styles a `textarea` like an input (border, focus ring, invalid border, disabled). The kit adds the radius, the type size and a height between three and twelve lines.
+////
+//// Growth uses `field-sizing: content`, and `rows` is ignored there.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <div class="wu-field">
+////     <label class="wu-field-label" for="textarea-notes">Notes</label>
+////     <textarea class="wu-textarea" id="textarea-notes">Type more lines to see the field grow.</textarea>
+////   </div>
+//// @example html
+////   <textarea class="wu-textarea" aria-label="Short note" style="--wu-textarea--MinHeight: 2.5rem; --wu-textarea--MaxHeight: 6rem">One line to start.</textarea>
+//// @variable --wu-textarea--MinHeight [3 lines plus padding and border] - Minimum height @since 1.0.0
+//// @variable --wu-textarea--MaxHeight [12 lines plus padding and border] - Maximum height @since 1.0.0
+//// @state :disabled - Not-allowed cursor and no resize @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;
+
+.wu-textarea {
+    display: block;
+    min-height: var(--wu-textarea--MinHeight, calc(3lh + 2 * #{woven.token(space-2)} + 2 * #{woven.token(border-width-1)}));
+    max-height: var(--wu-textarea--MaxHeight, calc(12lh + 2 * #{woven.token(space-2)} + 2 * #{woven.token(border-width-1)}));
+    border-radius: woven.token(radius-md);
+    font-size: woven.token(font-size-md);
+    line-height: woven.token(line-height-normal);
+    resize: vertical;
+
+    &:disabled {
+        cursor: not-allowed;
+        resize: none;
+    }
+
+    &[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);
+    }
+}
+
+// Grows with typing between the min and max height; rows is ignored here
+@supports (field-sizing: content) {
+    .wu-textarea {
+        field-sizing: content;
+    }
+}