@wovenui/components 0.0.0-stage → 1.0.0

package/src/components/_radio.scss

@@ -0,0 +1,162 @@
+////
+//// @component wu-radio
+//// Radio button with a label, drawn from the native input.
+////
+//// The circle is `1em`, so it follows the root type size. The `wu-radio-input` part also works alone with an `aria-label`.
+////
+//// Inside a `wu-field-group sm` or `lg`, a radio without its own size takes the group size.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <label class="wu-radio">
+////     <input type="radio" class="wu-radio-input" name="plan" value="free" checked>
+////     <span class="wu-radio-label">Free</span>
+////   </label>
+////   <label class="wu-radio">
+////     <input type="radio" class="wu-radio-input" name="plan" value="pro">
+////     <span class="wu-radio-label">Pro</span>
+////   </label>
+//// @example html
+////   <input type="radio" class="wu-radio-input" name="size" value="m" aria-label="Medium">
+//// @modifier sm | lg - Smaller or larger text and circle @since 1.0.0
+//// @part wu-radio-input - The native radio input, drawn as a circle with a dot @since 1.0.0
+//// @part wu-radio-label - Label text beside the circle @since 1.0.0
+//// @state disabled - Half opacity, no pointer events @since 1.0.0
+//// @state aria-invalid="true" | :user-invalid - Two pixel danger edge that stays on hover and when checked @since 1.0.0
+//// @state :checked - Brand fill with a dot @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-radio {
+    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-radio-input:disabled) {
+        opacity: woven.token(opacity-50);
+        cursor: not-allowed;
+    }
+}
+
+.wu-radio-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-full);
+    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);
+
+    // Dot
+    &::before {
+        content: "";
+        width: 0.375em;
+        height: 0.375em;
+        border-radius: woven.token(radius-full);
+        background: woven.token(text-on-brand);
+        visibility: hidden;
+    }
+
+    &:hover:not(:disabled, :checked) {
+        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);
+    }
+
+    &:checked {
+        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) {
+        border-color: woven.token(danger);
+        box-shadow: 0 0 0 woven.token(border-width-1) woven.token(danger);
+    }
+
+    &:disabled {
+        opacity: woven.token(opacity-50);
+        cursor: not-allowed;
+    }
+
+    .wu-radio > &:disabled {
+        opacity: 1;
+    }
+}
+
+.wu-radio-label {
+    min-width: 0;
+}
+
+.wu-radio.sm {
+    font-size: woven.token(font-size-sm);
+}
+
+.wu-radio.lg {
+    font-size: woven.token(font-size-lg);
+}
+
+@media (forced-colors: active) {
+    .wu-radio-input {
+        border-color: CanvasText;
+        background: Canvas;
+        forced-color-adjust: none;
+
+        &::before {
+            background: HighlightText;
+        }
+
+        &:checked {
+            border-color: Highlight;
+            background: Highlight;
+        }
+
+        &:disabled {
+            border-color: GrayText;
+        }
+
+        &:disabled:checked {
+            background: GrayText;
+        }
+    }
+}
+
+// Size from a wu-field-group sm or lg
+:where(.wu-field-group.sm) .wu-radio:not(.sm, .lg) {
+    font-size: woven.token(font-size-sm);
+}
+
+:where(.wu-field-group.lg) .wu-radio:not(.sm, .lg) {
+    font-size: woven.token(font-size-lg);
+}

package/src/components/_segmented.scss

@@ -0,0 +1,183 @@
+////
+//// @component wu-segmented
+//// Radio group shown as connected segments, one selected at a time.
+////
+//// Arrow keys move the choice natively, and segments share the width equally. A `div` with `role="radiogroup"` and an `aria-label` works instead of a `fieldset`.
+////
+//// Type follows the button: `xs`, `sm` and `md` for `sm`, default and `lg`. The animated thumb supports up to six label segments.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <fieldset class="wu-segmented">
+////     <legend class="sr-only">View</legend>
+////     <label class="wu-segmented-item"><input type="radio" name="view" class="wu-segmented-input" value="day" checked> Day</label>
+////     <label class="wu-segmented-item"><input type="radio" name="view" class="wu-segmented-input" value="week"> Week</label>
+////     <label class="wu-segmented-item"><input type="radio" name="view" class="wu-segmented-input" value="month"> Month</label>
+////   </fieldset>
+//// @modifier sm | lg - Smaller or larger control height and font size @since 1.0.0
+//// @modifier animated - One thumb slides to the checked segment with a spring when the user allows motion; `wu-animated` on an ancestor does the same @since 1.0.0
+//// @part wu-segmented-item - One segment: the label that wraps a radio input @since 1.0.0
+//// @part wu-segmented-input - The radio input, visually hidden but focusable and announced @since 1.0.0
+//// @state :checked - The selected segment has a raised surface, an edge and a shadow @since 1.0.0
+//// @state disabled - Half opacity on that segment @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+$-inset: woven.token(space-1);
+$-max-animated: 6;
+
+.wu-segmented {
+    position: relative;
+    display: inline-grid;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    min-inline-size: 0;
+    min-block-size: 0;
+    block-size: woven.token(control-height-md);
+    margin: 0;
+    padding: $-inset;
+    border: 0;
+    border-radius: woven.token(radius-md);
+    background: woven.token(bg-alternate);
+    font-size: woven.token(font-size-sm);
+    vertical-align: middle;
+}
+
+.wu-segmented-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline: woven.token(control-padding-inline-sm);
+    border-radius: woven.token(radius-sm);
+    color: woven.token(text-muted);
+    font-weight: woven.token(font-weight-medium);
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    transition-property: background-color, box-shadow, color;
+    transition-duration: woven.token(duration-150);
+    transition-timing-function: woven.token(ease-out);
+
+    &:hover:not(:has(:checked, :disabled)) {
+        color: woven.token(text-regular);
+    }
+
+    &:has(:focus-visible) {
+        outline: woven.token(border-focus-width) solid woven.token(border-focus);
+        outline-offset: woven.token(border-focus-offset);
+    }
+
+    // Selected: raised surface with an edge and a shadow, so color is not the only signal
+    &:has(:checked) {
+        background: woven.token(bg-surface);
+        box-shadow:
+            inset 0 0 0 woven.token(border-width-1) woven.token(border-control),
+            woven.token(shadow-sm);
+        color: woven.token(text-regular);
+    }
+
+    &:has(:disabled) {
+        opacity: woven.token(opacity-50);
+        cursor: not-allowed;
+    }
+}
+
+// Visually hidden, still focusable and announced
+.wu-segmented-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    opacity: 0;
+    clip-path: inset(50%);
+    pointer-events: none;
+}
+
+.wu-segmented.sm {
+    block-size: woven.token(control-height-sm);
+    font-size: woven.token(font-size-xs);
+
+    > .wu-segmented-item {
+        padding-inline: woven.token(space-2);
+    }
+}
+
+.wu-segmented.lg {
+    block-size: woven.token(control-height-lg);
+    font-size: woven.token(font-size-md);
+
+    > .wu-segmented-item {
+        padding-inline: woven.token(control-padding-inline-md);
+    }
+}
+
+// Opt-in motion: one thumb slides to the checked segment with a spring (up to six label segments)
+@media (prefers-reduced-motion: no-preference) {
+    .wu-segmented.animated:not(:has(> .wu-segmented-item:nth-of-type(#{$-max-animated + 1}))),
+    .wu-animated .wu-segmented:not(:has(> .wu-segmented-item:nth-of-type(#{$-max-animated + 1}))) {
+        &:has(:checked)::before {
+            content: "";
+            position: absolute;
+            inset-block: $-inset;
+            inset-inline-start: $-inset;
+            border-radius: woven.token(radius-sm);
+            background: woven.token(bg-surface);
+            box-shadow:
+                inset 0 0 0 woven.token(border-width-1) woven.token(border-control),
+                woven.token(shadow-sm);
+            transition: translate woven.token(duration-500) var(--wu-kit-ease-spring);
+        }
+
+        @for $n from 1 through $-max-animated {
+            &:has(> .wu-segmented-item:nth-of-type(#{$n}):last-of-type)::before {
+                width: calc((100% - 2 * #{$-inset}) / #{$n});
+            }
+        }
+
+        @for $i from 2 through $-max-animated {
+            &:has(> .wu-segmented-item:nth-of-type(#{$i}) :checked)::before {
+                translate: ($i - 1) * 100% 0;
+            }
+
+            &:dir(rtl):has(> .wu-segmented-item:nth-of-type(#{$i}) :checked)::before {
+                translate: ($i - 1) * -100% 0;
+            }
+        }
+
+        > .wu-segmented-item:has(:checked) {
+            background: transparent;
+            box-shadow: none;
+        }
+    }
+}
+
+@media (forced-colors: active) {
+    .wu-segmented {
+        border: woven.token(border-width-1) solid ButtonBorder;
+    }
+
+    .wu-segmented-item:has(:checked),
+    .wu-segmented::before {
+        background: Highlight;
+        color: HighlightText;
+        forced-color-adjust: none;
+    }
+}
+
+// Size from a wu-field-group sm or lg
+@each $size, $font in ("sm": "font-size-xs", "lg": "font-size-md") {
+    :where(.wu-field-group.#{$size}) .wu-segmented:not(.sm, .lg) {
+        block-size: woven.token(control-height-#{$size});
+        font-size: woven.token(#{$font});
+    }
+}
+
+.wu-segmented-item > svg {
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+}

package/src/components/_select.scss

@@ -0,0 +1,154 @@
+////
+//// @component wu-select
+//// Native `select` with the kit input look and a drawn arrow.
+////
+//// Core base already sets the border, background, hover, focus ring, invalid border, disabled look, padding and the default height. List boxes (`multiple` or `size`) keep their natural height and have no arrow.
+////
+//// Where `appearance: base-select` is supported, the picker matches the kit; other browsers keep the native list.
+////
+//// Inside a `wu-field-group sm` or `lg`, a select without its own size takes the group size.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <select class="wu-select" name="country" aria-label="Country">
+////     <option>Pakistan</option>
+////     <option>United Arab Emirates</option>
+////   </select>
+//// @example html
+////   <select class="wu-select sm" name="sort" aria-label="Sort by" aria-invalid="true">
+////     <option>Newest</option>
+////     <option>Oldest</option>
+////   </select>
+//// @modifier sm | lg - Smaller or larger control height and padding @since 1.0.0
+//// @variable --wu-select--ArrowColor [var(--wu-text-muted)] - Color of the arrow @since 1.0.0
+//// @state disabled - Not-allowed cursor on top of core disabled look @since 1.0.0
+//// @state aria-invalid="true" | :user-invalid - Danger edge doubled to two pixels, so the change is not color alone @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+$-arrow: 0.3125rem;
+$-arrow-color: var(--wu-select--ArrowColor, #{woven.token(text-muted)});
+
+.wu-select {
+    border-radius: woven.token(radius-md);
+    font-size: woven.token(font-size-md);
+    line-height: woven.token(line-height-normal);
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+
+    // 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);
+    }
+}
+
+// Single-line select: CSS triangle arrow from two gradient halves at the inline end
+.wu-select:not([multiple], [size]:not([size="1"])) {
+    padding-inline-end: calc(#{woven.token(control-padding-inline-md)} + 2 * #{$-arrow} + #{woven.token(space-2)});
+    background-image: linear-gradient(45deg, transparent 50%, #{$-arrow-color} 50%), linear-gradient(135deg, #{$-arrow-color} 50%, transparent 50%);
+    background-position:
+        calc(100% - #{woven.token(control-padding-inline-md)} - #{$-arrow}) 50%,
+        calc(100% - #{woven.token(control-padding-inline-md)}) 50%;
+    background-size: $-arrow $-arrow;
+    background-repeat: no-repeat;
+    appearance: none;
+    cursor: pointer;
+
+    &:dir(rtl) {
+        background-position:
+            woven.token(control-padding-inline-md) 50%,
+            calc(#{woven.token(control-padding-inline-md)} + #{$-arrow}) 50%;
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+}
+
+.wu-select.sm {
+    padding-inline: woven.token(control-padding-inline-sm);
+    font-size: woven.token(font-size-sm);
+}
+
+.wu-select.lg {
+    padding-inline: woven.token(control-padding-inline-lg);
+}
+
+// Height and centered text for the class and the field-group cascade, one rule
+@each $size, $font in ("sm": "font-size-sm", "lg": "font-size-md") {
+    .wu-select.#{$size}:not([multiple], [size]:not([size="1"])),
+    :where(.wu-field-group.#{$size}) .wu-select:not(.sm, .lg, .wu-input-affix > *, [multiple], [size]:not([size="1"])) {
+        height: woven.token(control-height-#{$size});
+        padding-block: round(down, calc((#{woven.token(control-height-#{$size})} - 2 * #{woven.token(border-width-1)} - #{woven.token(#{$font})} * #{woven.token(line-height-normal)}) / 2), 1px);
+    }
+}
+
+// The wrapper sets no padding on its select, so center the text in the box
+.wu-input-affix > .wu-select:not([multiple], [size]:not([size="1"])) {
+    align-items: center;
+}
+
+// Customizable select where supported: a picker that matches the kit; other browsers keep the native list
+@supports (appearance: base-select) {
+    .wu-select:not([multiple], [size]:not([size="1"])) {
+        appearance: base-select;
+
+        &::picker-icon {
+            display: none;
+        }
+
+        &::picker(select) {
+            margin-block: woven.token(space-1);
+            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);
+            box-shadow: woven.token(shadow-lg);
+            color: woven.token(text-regular);
+            appearance: base-select;
+        }
+
+        option {
+            padding-block: woven.token(space-2);
+            padding-inline: woven.token(control-padding-inline-sm);
+            border-radius: woven.token(radius-sm);
+            cursor: pointer;
+        }
+
+        option:is(:hover, :focus-visible) {
+            background: woven.token(bg-hover);
+        }
+
+        option:checked {
+            background: woven.token(bg-selected);
+            color: woven.token(text-brand);
+        }
+
+        option:disabled {
+            opacity: woven.token(opacity-50);
+            cursor: not-allowed;
+        }
+    }
+}
+
+// Forced colors: the native control and its own arrow, also over the customizable select
+@media (forced-colors: active) {
+    .wu-select:not([multiple], [size]:not([size="1"])) {
+        padding-inline-end: woven.token(control-padding-inline-md);
+        background-image: none;
+        appearance: auto;
+    }
+}
+
+// Size from a wu-field-group sm or lg; a select with its own sm or lg keeps it
+@each $size, $font in ("sm": "font-size-sm", "lg": "font-size-md") {
+    :where(.wu-field-group.#{$size}) .wu-select:not(.sm, .lg, .wu-input-affix > *, [multiple], [size]:not([size="1"])) {
+        padding-inline-start: woven.token(control-padding-inline-#{$size});
+        font-size: woven.token(#{$font});
+    }
+}