@wovenui/components 0.0.0-stage → 1.0.0

package/src/components/_toolbar.scss

@@ -0,0 +1,74 @@
+////
+//// @component wu-toolbar
+//// Wrapping row of controls, with groups, separators, an end group and a boxed variant.
+////
+//// A toolbar holds controls of one height, so it lines up by itself. Status displays such as tags and badges go outside the row.
+////
+//// `role="toolbar"` promises arrow-key focus, so add it only with a script that provides it; otherwise use a plain `div`.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <div class="wu-toolbar">
+////     <div class="wu-toolbar-group">
+////       <button class="wu-btn sm" type="button">Bold</button>
+////       <button class="wu-btn sm" type="button">Italic</button>
+////     </div>
+////     <span class="wu-toolbar-separator" aria-hidden="true"></span>
+////     <div class="wu-toolbar-end">
+////       <button class="wu-btn brand sm" type="button">Publish</button>
+////     </div>
+////   </div>
+//// @example html
+////   <div class="wu-toolbar boxed">
+////     <span class="wu-text sm">3 selected</span>
+////     <button class="wu-btn sm" type="button">Archive</button>
+////   </div>
+//// @modifier boxed - Border, padding and the alternate background @since 1.0.0
+//// @modifier sm - Smaller gap @since 1.0.0
+//// @part wu-toolbar-group - Controls that stay together @since 1.0.0
+//// @part wu-toolbar-separator - Vertical line between groups @since 1.0.0
+//// @part wu-toolbar-end - Pushes itself and what follows to the end @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: woven.token(space-2);
+    color: woven.token(text-regular);
+}
+
+.wu-toolbar-group,
+.wu-toolbar-end {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: inherit;
+}
+
+// Pushes itself and what follows to the end
+.wu-toolbar-end {
+    margin-inline-start: auto;
+}
+
+.wu-toolbar-separator {
+    align-self: stretch;
+    width: woven.token(border-width-1);
+    margin-block: woven.token(space-1);
+    background: woven.token(border-regular);
+}
+
+.wu-toolbar.boxed {
+    padding: woven.token(space-2);
+    border: woven.token(border-width-1) solid woven.token(border-regular);
+    border-radius: woven.token(radius-md);
+    background: woven.token(bg-alternate);
+}
+
+.wu-toolbar.sm {
+    gap: woven.token(space-1);
+}

package/src/components/_topbar.scss

@@ -0,0 +1,204 @@
+////
+//// @component wu-topbar
+//// Application header with a brand, a scrolling nav, an end group, a pinned variant and a page progress line.
+////
+//// `wu-topbar-nav` works on the `nav` itself or on the `ul` inside it. When space runs out the nav scrolls first, then the brand truncates.
+////
+//// The bar stays in the flow; add `pinned` to stick it to the top. The progress line is decoration, so mark it `aria-hidden="true"`; it fills as the page scrolls and stays hidden when reduced motion is set.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <header class="wu-topbar pinned">
+////     <a class="wu-topbar-brand" href="/">Acme</a>
+////     <nav aria-label="Main">
+////       <ul class="wu-topbar-nav">
+////         <li><a class="wu-topbar-link" href="/dashboard" aria-current="page">Dashboard</a></li>
+////         <li><a class="wu-topbar-link" href="/billing">Billing</a></li>
+////       </ul>
+////     </nav>
+////     <div class="wu-topbar-end">
+////       <button class="wu-btn sm" type="button">Sign out</button>
+////     </div>
+////     <div class="wu-topbar-progress" aria-hidden="true"></div>
+////   </header>
+//// @example html
+////   <header class="wu-topbar">
+////     <a class="wu-topbar-brand" href="/">Acme</a>
+////     <nav class="wu-topbar-nav" aria-label="Main">
+////       <a class="wu-topbar-link" href="/billing" aria-current="page">Billing</a>
+////       <a class="wu-topbar-link" href="/team">Team</a>
+////     </nav>
+////   </header>
+//// @modifier pinned - Sticks to the top of its scroll container, with a shadow once stuck @since 1.0.0
+//// @part wu-topbar-brand - Brand link or text; truncates last @since 1.0.0
+//// @part wu-topbar-nav - Nav, or its list, that takes the free space and scrolls sideways @since 1.0.0
+//// @part wu-topbar-link - Nav link; a direct child `svg` is sized to `1em` @since 1.0.0
+//// @part wu-topbar-end - Group pushed to the inline end @since 1.0.0
+//// @part wu-topbar-progress - Line along the bottom edge that fills as the page scrolls @since 1.0.0
+//// @state aria-current="page" - On a link: current page, brand underline @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-topbar {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: woven.token(space-4);
+    min-height: woven.token(space-16);
+    padding-inline: woven.token(space-4);
+    overflow-x: clip;
+    border-block-end: woven.token(border-width-1) solid woven.token(border-regular);
+    background: woven.token(bg-surface);
+    color: woven.token(text-regular);
+}
+
+.wu-topbar-brand {
+    display: inline-flex;
+    flex: 0 1 auto;
+    align-items: center;
+    gap: woven.token(space-2);
+    min-width: 0;
+    overflow: hidden;
+    color: inherit;
+    font-weight: woven.token(font-weight-semibold);
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &:focus-visible {
+        outline: woven.token(border-focus-width) solid woven.token(border-focus);
+        outline-offset: woven.token(border-focus-offset);
+    }
+}
+
+// On <nav> with links, or on its <ul>; scrolls sideways when it runs out of room.
+// A zero basis lets it take the free space and give it up before the brand and the end group.
+.wu-topbar-nav,
+.wu-topbar > :has(> .wu-topbar-nav) {
+    display: flex;
+    flex: 1 1 0;
+    align-self: stretch;
+    min-width: 0;
+}
+
+.wu-topbar-nav {
+    gap: woven.token(space-1);
+    margin: 0;
+    padding: 0;
+    overflow-x: auto;
+    list-style: none;
+
+    > li {
+        display: flex;
+    }
+}
+
+.wu-topbar-link {
+    display: inline-flex;
+    align-items: center;
+    gap: woven.token(space-2);
+    padding-inline: woven.token(space-3);
+    box-shadow: inset 0 calc(-1 * #{woven.token(border-width-2)}) 0 transparent;
+    color: woven.token(text-muted);
+    font-size: woven.token(font-size-sm);
+    font-weight: woven.token(font-weight-medium);
+    text-decoration: none;
+    white-space: nowrap;
+    transition-property: color, box-shadow;
+    transition-duration: woven.token(duration-150);
+    transition-timing-function: woven.token(ease-out);
+
+    &:hover {
+        color: woven.token(text-regular);
+    }
+
+    // Inset ring, so the scrolling nav does not clip it
+    &:focus-visible {
+        outline: woven.token(border-focus-width) solid woven.token(border-focus);
+        outline-offset: calc(-1 * #{woven.token(border-focus-width)});
+    }
+
+    &[aria-current="page"] {
+        box-shadow: inset 0 calc(-1 * #{woven.token(border-width-2)}) 0 woven.token(brand);
+        color: woven.token(text-regular);
+    }
+
+    > svg {
+        flex-shrink: 0;
+        width: 1em;
+        height: 1em;
+    }
+}
+
+.wu-topbar-end {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: woven.token(space-2);
+    margin-inline-start: auto;
+}
+
+.wu-topbar.pinned {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: woven.token(z-sticky);
+}
+
+// Shadow only once the bar is stuck; the bottom border is the fallback
+@supports (container-type: scroll-state) {
+    .wu-topbar.pinned {
+        container-type: scroll-state;
+
+        &::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            box-shadow: woven.token(shadow-md);
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+
+    @container scroll-state(stuck: top) {
+        .wu-topbar.pinned::after {
+            opacity: 1;
+        }
+    }
+}
+
+// Page progress: <div class="wu-topbar-progress" aria-hidden="true">, filled by page scroll where supported
+.wu-topbar-progress {
+    display: none;
+}
+
+@supports (animation-timeline: scroll()) {
+    @media (prefers-reduced-motion: no-preference) {
+        .wu-topbar-progress {
+            display: block;
+            position: absolute;
+            inset-inline: 0;
+            inset-block-end: calc(-1 * #{woven.token(border-width-1)});
+            height: woven.token(border-width-2);
+            background: woven.token(brand);
+            transform-origin: left;
+            scale: 0 1;
+            animation-name: wu-topbar-progress;
+            animation-timing-function: linear;
+            animation-fill-mode: both;
+            animation-timeline: scroll(root block);
+
+            &:dir(rtl) {
+                transform-origin: right;
+            }
+        }
+    }
+}
+
+@keyframes wu-topbar-progress {
+    to {
+        scale: 1 1;
+    }
+}

package/src/entries/accordion.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/accordion: the accordion and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("accordion"));

package/src/entries/alert.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/alert: the alert and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("alert"));

package/src/entries/autocomplete.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/autocomplete: the autocomplete and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("autocomplete"));

package/src/entries/avatar-group.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/avatar-group: the avatar-group and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("avatar-group"));

package/src/entries/avatar.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/avatar: the avatar and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("avatar"));

package/src/entries/badge.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/badge: the badge and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("badge"));

package/src/entries/breadcrumb.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/breadcrumb: the breadcrumb and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("breadcrumb"));

package/src/entries/btn-group.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/btn-group: the btn-group and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("btn-group"));

package/src/entries/button.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/button: the button and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("button"));

package/src/entries/card.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/card: the card and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("card"));

package/src/entries/checkbox.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/checkbox: the checkbox and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("checkbox"));

package/src/entries/code-block.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/code-block: the code-block and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("code-block"));

package/src/entries/confirm-modal.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/confirm-modal: the confirm-modal and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("confirm-modal"));

package/src/entries/data-table.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/data-table: the data-table and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("data-table"));

package/src/entries/desc-list.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/desc-list: the desc-list and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("desc-list"));

package/src/entries/divider.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/divider: the divider and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("divider"));

package/src/entries/dot.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/dot: the dot and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("dot"));

package/src/entries/drawer.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/drawer: the drawer and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("drawer"));

package/src/entries/dropdown.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/dropdown: the dropdown and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("dropdown"));

package/src/entries/empty-state.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/empty-state: the empty-state and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("empty-state"));

package/src/entries/field-group.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/field-group: the field-group and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("field-group"));

package/src/entries/field-message.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/field-message: the field-message and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("field-message"));

package/src/entries/field.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/field: the field and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("field"));

package/src/entries/form-actions.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/form-actions: the form-actions and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("form-actions"));

package/src/entries/info-row.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/info-row: the info-row and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("info-row"));

package/src/entries/input-group.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/input-group: the input-group and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("input-group"));

package/src/entries/input.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/input: the input and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("input"));

package/src/entries/list.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/list: the list and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("list"));

package/src/entries/modal.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/modal: the modal and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("modal"));

package/src/entries/page-header.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/page-header: the page-header and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("page-header"));

package/src/entries/pagination.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/pagination: the pagination and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("pagination"));

package/src/entries/panel.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/panel: the panel and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("panel"));

package/src/entries/popover.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/popover: the popover and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("popover"));

package/src/entries/progress-circle.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/progress-circle: the progress-circle and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("progress-circle"));

package/src/entries/progress.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/progress: the progress and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("progress"));

package/src/entries/radio.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/radio: the radio and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("radio"));

package/src/entries/segmented.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/segmented: the segmented and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("segmented"));

package/src/entries/select.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/select: the select and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("select"));

package/src/entries/sidebar.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/sidebar: the sidebar and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("sidebar"));

package/src/entries/skeleton.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/skeleton: the skeleton and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("skeleton"));

package/src/entries/spinner.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/spinner: the spinner and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("spinner"));

package/src/entries/stat.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/stat: the stat and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("stat"));

package/src/entries/table.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/table: the table and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("table"));

package/src/entries/tabs.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/tabs: the tabs and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("tabs"));

package/src/entries/tag.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/tag: the tag and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("tag"));

package/src/entries/text.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/text: the text and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("text"));

package/src/entries/textarea.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/textarea: the textarea and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("textarea"));

package/src/entries/timeline.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/timeline: the timeline and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("timeline"));

package/src/entries/title.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/title: the title and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("title"));

package/src/entries/toast.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/toast: the toast and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("toast"));

package/src/entries/toggle.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/toggle: the toggle and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("toggle"));

package/src/entries/toolbar.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/toolbar: the toolbar and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("toolbar"));

package/src/entries/topbar.scss

@@ -0,0 +1,4 @@
+// @wovenui/components/topbar: the topbar and what it needs, without the bundle
+@use "../kit";
+
+@include kit.emit(kit.with-needs("topbar"));

package/src/index.scss

@@ -0,0 +1,7 @@
+// @wovenui/components: one bundled entry. Core mixins load once; components output only kit rules.
+@use "kit";
+
+// Switch components off: @use "@wovenui/components" with ($components: ("button": false))
+$components: () !default;
+
+@include kit.emit(kit.enabled($components));