@wovenui/components 0.0.0-stage → 1.0.0

package/src/components/_field-group.scss

@@ -0,0 +1,68 @@
+////
+//// @component wu-field-group
+//// Group of fields in a `fieldset`, stacked by default or side by side.
+////
+//// Use a `fieldset` with a `legend` of class `wu-field-group-legend`. A `sm` or `lg` on the group sizes the inputs, affixes and buttons inside it that have no size of their own; that rule lives in the input and button partials.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <fieldset class="wu-field-group">
+////     <legend class="wu-field-group-legend">Contact</legend>
+////     <div class="wu-field">
+////       <label class="wu-field-label" for="g-name">Name</label>
+////       <input class="wu-input" id="g-name" type="text">
+////     </div>
+////     <div class="wu-field">
+////       <label class="wu-field-label" for="g-mail">Email</label>
+////       <input class="wu-input" id="g-mail" type="email">
+////     </div>
+////   </fieldset>
+//// @example html
+////   <fieldset class="wu-field-group horizontal">
+////     <legend class="wu-field-group-legend">Dates</legend>
+////     <div class="wu-field">
+////       <label class="wu-field-label" for="g-from">From</label>
+////       <input class="wu-input" id="g-from" type="date">
+////     </div>
+////     <div class="wu-field">
+////       <label class="wu-field-label" for="g-to">To</label>
+////       <input class="wu-input" id="g-to" type="date">
+////     </div>
+////   </fieldset>
+//// @modifier horizontal - Fields side by side, wrapping when narrower than `--wu-field-group--MinWidth` @since 1.0.0
+//// @part wu-field-group-legend - Group title @since 1.0.0
+//// @variable --wu-field-group--MinWidth [12rem] - Width at which a field in a horizontal group wraps @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-field-group {
+    display: flex;
+    flex-direction: column;
+    gap: woven.token(space-4);
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+.wu-field-group-legend {
+    margin-block-end: woven.token(space-3);
+    padding: 0;
+    color: woven.token(text-regular);
+    font-size: woven.token(font-size-md);
+    font-weight: woven.token(font-weight-semibold);
+    line-height: woven.token(line-height-tight);
+}
+
+// Fields side by side, wrapping; --wu-field-group--MinWidth sets when a field wraps
+.wu-field-group.horizontal {
+    flex-flow: row wrap;
+    align-items: flex-start;
+
+    > .wu-field {
+        flex: 1 1 var(--wu-field-group--MinWidth, 12rem);
+    }
+}

package/src/components/_field-message.scss

@@ -0,0 +1,75 @@
+////
+//// @component wu-field-message
+//// Hint, error or success text under a form control, with a marker shape for each role.
+////
+//// Link it from the control with `aria-describedby`. The words carry the meaning ("Error: ..."); the role adds color and a marker shape: `error` a larger octagon with an exclamation mark, `success` a check, `info` a small circle.
+////
+//// Inside a `wu-field`, an `error` message stays hidden until the control is invalid.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <p class="wu-field-message" id="hint">Use your work email.</p>
+////   <p class="wu-field-message error" id="err">Error: enter a valid email.</p>
+////   <p class="wu-field-message success" id="ok">Email confirmed.</p>
+////   <p class="wu-field-message info" id="note">We never share it.</p>
+//// @modifier error | success | info - Role color and marker shape; error is also medium weight @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-field-message {
+    display: flex;
+    align-items: flex-start;
+    gap: woven.token(space-1);
+    margin: 0;
+    color: woven.token(text-muted);
+    font-size: woven.token(font-size-sm);
+    line-height: woven.token(line-height-normal);
+}
+
+.wu-field-message:is(.error, .success, .info)::before {
+    content: "";
+    flex: none;
+    width: 0.75em;
+    height: 0.75em;
+    margin-block-start: calc((1lh - 0.75em) / 2);
+    border-radius: woven.token(radius-full);
+    background: currentcolor;
+}
+
+.wu-field-message.error {
+    color: woven.token(text-danger);
+    font-weight: woven.token(font-weight-medium);
+
+    // Larger octagon with an exclamation mark, so it reads apart from the info dot at small sizes
+    &::before {
+        content: "!";
+        content: "!" / "";
+        display: grid;
+        place-content: center;
+        width: 1em;
+        height: 1em;
+        margin-block-start: calc((1lh - 1em) / 2);
+        border-radius: 0;
+        background: woven.token(text-danger);
+        color: woven.token(bg-surface);
+        font-weight: woven.token(font-weight-bold);
+        clip-path: var(--wu-kit-marker-octagon);
+    }
+}
+
+.wu-field-message.success {
+    color: woven.token(text-success);
+
+    // Check mark
+    &::before {
+        border-radius: 0;
+        clip-path: var(--wu-kit-marker-check);
+    }
+}
+
+.wu-field-message.info {
+    color: woven.token(text-info);
+}

package/src/components/_field.scss

@@ -0,0 +1,127 @@
+////
+//// @component wu-field
+//// Form field that stacks a label, a control and its messages, with a required marker and a floating label option.
+////
+//// The required marker comes from `required` or `aria-required="true"` on the control. An `error` message is hidden until the control is invalid. Its id joins `aria-describedby` only while it shows: server-rendered with `aria-invalid="true"`, or added by your script. Leave it out otherwise, so a hidden error is never announced; for `:user-invalid` the browser's own validation message speaks on submit.
+////
+//// `floating` needs `placeholder=" "` on the input and is not used with `horizontal`. `horizontal` puts the label beside the control from the `sm` breakpoint up.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <div class="wu-field">
+////     <label class="wu-field-label" for="f1">Email</label>
+////     <input class="wu-input" id="f1" type="email" required aria-describedby="f1-hint">
+////     <p class="wu-field-message" id="f1-hint">Hint</p>
+////     <p class="wu-field-message error" id="f1-error">Error: enter a valid email.</p>
+////   </div>
+//// @example html
+////   <div class="wu-field floating animated">
+////     <label class="wu-field-label" for="f2">Name</label>
+////     <input class="wu-input" id="f2" type="text" placeholder=" ">
+////   </div>
+//// @modifier horizontal - Label beside the control from `sm` up, in a column of `--wu-field--LabelWidth` @since 1.0.0
+//// @modifier error - On a `wu-field-message` inside the field: hidden until the control is invalid @since 1.0.0
+//// @modifier floating - Label inside the input, moved up on focus or once filled @since 1.0.0
+//// @modifier animated - On a floating field: the label slides when the user allows motion; `wu-animated` on an ancestor does the same @since 1.0.0
+//// @part wu-field-label - Label above the control @since 1.0.0
+//// @variable --wu-field--LabelWidth [10rem] - Label column width in a horizontal field @since 1.0.0
+//// @state :required | aria-required="true" - On the control: adds a required marker to the label @since 1.0.0
+//// @state aria-invalid="true" | :user-invalid - On the control: shows the `error` message @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-field {
+    display: flex;
+    flex-direction: column;
+    gap: woven.token(space-1);
+    min-width: 0;
+}
+
+.wu-field-label {
+    margin-block-end: woven.token(space-1);
+    color: woven.token(text-regular);
+    font-size: woven.token(font-size-sm);
+    font-weight: woven.token(font-weight-medium);
+    line-height: woven.token(line-height-tight);
+}
+
+// Required marker from the control's required or aria-required; the empty alt text keeps it out of the label's name
+.wu-field:has(:is(:required, [aria-required="true"])) > .wu-field-label::after {
+    content: "*";
+    content: "*" / "";
+    margin-inline-start: woven.token(space-1);
+    color: woven.token(text-danger);
+}
+
+// The error message waits for aria-invalid="true" or :user-invalid (after the user has interacted)
+.wu-field .wu-field-message.error {
+    display: none;
+}
+
+.wu-field:has(:is([aria-invalid="true"], :user-invalid)) .wu-field-message.error {
+    display: flex;
+}
+
+// Label beside the control from sm up; --wu-field--LabelWidth sets the column
+@include woven.media-up(sm) {
+    .wu-field.horizontal {
+        display: grid;
+        grid-template-columns: var(--wu-field--LabelWidth, 10rem) minmax(0, 1fr);
+        gap: woven.token(space-1) woven.token(space-4);
+        align-items: start;
+
+        > * {
+            grid-column: 2;
+        }
+
+        > .wu-field-label {
+            display: flex;
+            grid-row: 1;
+            grid-column: 1;
+            align-items: center;
+            min-height: woven.token(control-height-md);
+            margin: 0;
+        }
+    }
+}
+
+// Label inside the input, moved up on focus or once filled. Needs placeholder=" " on the input; not with horizontal.
+.wu-field.floating {
+    position: relative;
+
+    > .wu-field-label {
+        position: absolute;
+        z-index: woven.token(z-hover);
+        inset-block-start: calc((#{woven.token(control-height-lg)} - 1lh) / 2);
+        inset-inline-start: calc(#{woven.token(control-padding-inline-md)} + #{woven.token(border-width-1)});
+        margin: 0;
+        color: woven.token(text-muted);
+        font-size: woven.token(font-size-md);
+        font-weight: woven.token(font-weight-normal);
+        pointer-events: none;
+    }
+
+    > .wu-input {
+        height: woven.token(control-height-lg);
+        padding-block: woven.token(space-5) woven.token(space-1);
+        padding-inline: woven.token(control-padding-inline-md);
+    }
+}
+
+.wu-field.floating:has(> .wu-input:is(:focus, :not(:placeholder-shown))) > .wu-field-label {
+    inset-block-start: woven.token(space-1);
+    font-size: woven.token(font-size-xs);
+}
+
+// Opt-in motion: the floating label slides
+@media (prefers-reduced-motion: no-preference) {
+    .wu-field.floating.animated > .wu-field-label,
+    .wu-animated .wu-field.floating > .wu-field-label {
+        transition-property: inset-block-start, font-size;
+        transition-duration: woven.token(duration-150);
+        transition-timing-function: woven.token(ease-out);
+    }
+}

package/src/components/_form-actions.scss

@@ -0,0 +1,58 @@
+////
+//// @component wu-form-actions
+//// Footer row for form buttons, start-aligned by default.
+////
+//// `wu-form-actions-end` inside the row pushes a set of buttons to the inline end.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <div class="wu-form-actions divided">
+////     <button class="wu-btn brand" type="submit">Save</button>
+////     <button class="wu-btn" type="reset">Reset</button>
+////   </div>
+//// @example html
+////   <div class="wu-form-actions">
+////     <button class="wu-btn danger subtle" type="button">Delete</button>
+////     <div class="wu-form-actions-end">
+////       <button class="wu-btn" type="button">Cancel</button>
+////       <button class="wu-btn brand" type="submit">Save</button>
+////     </div>
+////   </div>
+//// @modifier trailing - Aligns the buttons to the inline end @since 1.0.0
+//// @modifier centered - Centers the buttons @since 1.0.0
+//// @modifier divided - Line and padding above the row @since 1.0.0
+//// @part wu-form-actions-end - Set of buttons pushed to the inline end of the row @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-form-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: woven.token(space-2);
+}
+
+.wu-form-actions-end {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: inherit;
+    margin-inline-start: auto;
+}
+
+.wu-form-actions.trailing {
+    justify-content: flex-end;
+}
+
+.wu-form-actions.centered {
+    justify-content: center;
+}
+
+// Line above the row
+.wu-form-actions.divided {
+    padding-block-start: woven.token(space-4);
+    border-block-start: woven.token(border-width-1) solid woven.token(border-regular);
+}

package/src/components/_info-row.scss

@@ -0,0 +1,69 @@
+////
+//// @component wu-info-row
+//// One label and value pair, with a line between adjacent rows.
+////
+//// Works as a `div` with `dt` and `dd` inside a `dl`.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <div class="wu-info-row">
+////     <span class="wu-info-row-label">Tax</span>
+////     <span class="wu-info-row-value">$9.60</span>
+////   </div>
+////   <div class="wu-info-row total">
+////     <span class="wu-info-row-label">Total</span>
+////     <span class="wu-info-row-value">$129.60</span>
+////   </div>
+//// @modifier total - Strong line above, regular label text and a larger value @since 1.0.0
+//// @part wu-info-row-label - Muted label @since 1.0.0
+//// @part wu-info-row-value - Value, end-aligned with tabular numbers @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-info-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: woven.token(space-1) woven.token(space-4);
+    padding-block: woven.token(space-2);
+    font-size: woven.token(font-size-sm);
+    line-height: woven.token(line-height-normal);
+}
+
+.wu-info-row + .wu-info-row {
+    border-block-start: woven.token(border-width-1) solid woven.token(border-regular);
+}
+
+.wu-info-row-label {
+    margin: 0;
+    color: woven.token(text-muted);
+}
+
+.wu-info-row-value {
+    min-width: 0;
+    margin: 0;
+    color: woven.token(text-regular);
+    font-variant-numeric: tabular-nums;
+    font-weight: woven.token(font-weight-medium);
+    text-align: end;
+    overflow-wrap: anywhere;
+}
+
+// Total row: a strong line above, label and value in regular text, larger value
+.wu-info-row.total {
+    border-block-start: woven.token(border-width-2) solid woven.token(border-strong);
+
+    > .wu-info-row-label {
+        color: woven.token(text-regular);
+        font-weight: woven.token(font-weight-semibold);
+    }
+
+    > .wu-info-row-value {
+        font-size: woven.token(font-size-md);
+        font-weight: woven.token(font-weight-semibold);
+    }
+}

package/src/components/_input-group.scss

@@ -0,0 +1,87 @@
+////
+//// @component wu-input-group
+//// Joined row of text addons, an input and buttons that share one border and radius.
+////
+//// Size the children (`wu-input sm`, `wu-btn sm`); addons stretch to the row height. Default buttons take the field border; `brand`, `danger`, `quiet` and `link` buttons keep their own look. The hovered, focused or invalid control rises above its neighbors.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <div class="wu-input-group">
+////     <span class="wu-input-group-text">https://</span>
+////     <input class="wu-input" type="text" aria-label="Website" placeholder="example.com">
+////   </div>
+//// @example html
+////   <div class="wu-input-group">
+////     <input class="wu-input sm" type="search" aria-label="Search" placeholder="Search">
+////     <button class="wu-btn brand sm" type="button">Search</button>
+////   </div>
+//// @part wu-input-group-text - Text addon with the alternate background; an `svg` child is sized as an icon @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-input-group {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+
+    > * {
+        position: relative;
+        margin: 0;
+        border-radius: 0;
+    }
+
+    > .wu-input {
+        flex: 1 1 auto;
+        width: 1%;
+        min-width: 0;
+    }
+
+    > * + * {
+        margin-inline-start: calc(-1 * #{woven.token(border-width-1)});
+    }
+
+    > :first-child {
+        border-start-start-radius: woven.token(radius-md);
+        border-end-start-radius: woven.token(radius-md);
+    }
+
+    > :last-child {
+        border-start-end-radius: woven.token(radius-md);
+        border-end-end-radius: woven.token(radius-md);
+    }
+
+    // Default buttons take the field border so the joined row reads as one control
+    > .wu-btn:not(.brand, .danger, .quiet, .link) {
+        border-color: woven.token(border-control);
+
+        &:hover {
+            border-color: woven.token(border-control-hover);
+        }
+    }
+
+    // Lift the active control so its border and focus ring sit over the neighbors
+    > :is(:hover, :focus-visible, [aria-invalid="true"], :user-invalid) {
+        z-index: woven.token(z-hover);
+    }
+}
+
+.wu-input-group-text {
+    display: flex;
+    flex: none;
+    align-items: center;
+    padding-inline: woven.token(control-padding-inline-sm);
+    border: woven.token(border-width-1) solid woven.token(border-control);
+    background: woven.token(bg-alternate);
+    color: woven.token(text-muted);
+    font-size: woven.token(font-size-sm);
+    white-space: nowrap;
+}
+
+.wu-input-group-text > svg {
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+}