@wovenui/components 0.0.0-stage → 1.0.0

package/src/components/_pagination.scss

@@ -0,0 +1,138 @@
+////
+//// @component wu-pagination
+//// Page navigation made of button links, with optional total count and page size select.
+////
+//// Use a `nav` with an `aria-label`, and give an arrow-only previous or next link an `aria-label`. Mark the current link with `aria-current="page"`.
+////
+//// Put a `wu-pagination-total` and a `wu-pagination-size` label holding a `wu-select` beside the list.
+////
+//// @since 1.0.0
+//// @needs button
+//// @js none
+//// @example html
+////   <nav class="wu-pagination" aria-label="Pagination">
+////     <ul class="wu-pagination-list">
+////       <li><a class="wu-btn wu-pagination-prev" href="/orders?page=1" aria-label="Previous page"></a></li>
+////       <li><a class="wu-btn" href="/orders?page=1">1</a></li>
+////       <li><a class="wu-btn" href="/orders?page=2" aria-current="page">2</a></li>
+////       <li><span class="wu-pagination-ellipsis">&hellip;</span></li>
+////       <li><a class="wu-btn" href="/orders?page=9">9</a></li>
+////       <li><a class="wu-btn wu-pagination-next" href="/orders?page=3" aria-label="Next page"></a></li>
+////     </ul>
+////     <span class="wu-pagination-total">Showing 11 to 20 of 86</span>
+////   </nav>
+//// @modifier sm | lg - Smaller or larger buttons and ellipsis @since 1.0.0
+//// @part wu-pagination-list - List that holds the page links @since 1.0.0
+//// @part wu-pagination-ellipsis - Gap marker between page numbers @since 1.0.0
+//// @part wu-pagination-prev - On a link: draws a back arrow that follows the reading direction @since 1.0.0
+//// @part wu-pagination-next - On a link: draws a forward arrow that follows the reading direction @since 1.0.0
+//// @part wu-pagination-total - Muted total count text @since 1.0.0
+//// @part wu-pagination-size - Label that holds a `wu-select` for the page size @since 1.0.0
+//// @state aria-current="page" - The current page: solid brand fill @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-pagination {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: woven.token(space-2) woven.token(space-4);
+}
+
+.wu-pagination-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: woven.token(space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.wu-pagination .wu-btn {
+    min-width: woven.token(control-height-md);
+    padding-inline: woven.token(space-3);
+    font-variant-numeric: tabular-nums;
+}
+
+.wu-pagination .wu-btn[aria-current="page"] {
+    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);
+    }
+}
+
+.wu-pagination-ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: woven.token(control-height-md);
+    color: woven.token(text-muted);
+    font-size: woven.token(font-size-sm);
+}
+
+.wu-pagination.sm {
+    .wu-btn,
+    .wu-pagination-ellipsis {
+        min-width: woven.token(control-height-sm);
+        min-height: woven.token(control-height-sm);
+        padding-inline: woven.token(space-2);
+        font-size: woven.token(font-size-xs);
+    }
+}
+
+.wu-pagination.lg {
+    .wu-btn,
+    .wu-pagination-ellipsis {
+        min-width: woven.token(control-height-lg);
+        min-height: woven.token(control-height-lg);
+        font-size: woven.token(font-size-md);
+    }
+}
+
+// Arrow: one corner shape, turned to point back or forward in the reading direction
+.wu-pagination-prev::before,
+.wu-pagination-next::after {
+    content: "";
+    flex: none;
+    width: 0.45em;
+    height: 0.45em;
+    border-bottom: woven.token(border-width-2) solid currentcolor;
+    border-left: woven.token(border-width-2) solid currentcolor;
+}
+
+// Points left (previous in LTR, next in RTL), then right; nudged away from the tip to look centered
+.wu-pagination-prev::before,
+.wu-pagination-next:dir(rtl)::after {
+    rotate: 45deg;
+    translate: 0.1em 0;
+}
+
+.wu-pagination-next::after,
+.wu-pagination-prev:dir(rtl)::before {
+    rotate: -135deg;
+    translate: -0.1em 0;
+}
+
+.wu-pagination-total,
+.wu-pagination-size {
+    color: woven.token(text-muted);
+    font-size: woven.token(font-size-sm);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.wu-pagination-size {
+    display: inline-flex;
+    align-items: center;
+    gap: woven.token(space-2);
+
+    > .wu-select {
+        inline-size: auto;
+    }
+}

package/src/components/_panel.scss

@@ -0,0 +1,69 @@
+////
+//// @component wu-panel
+//// Flat bordered region for grouped settings or data.
+////
+//// The card is the raised surface; the panel stays flat with a border.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <section class="wu-panel">
+////     <header class="wu-panel-header">
+////       <h2 class="wu-panel-title">Notifications</h2>
+////       <button class="wu-btn sm" type="button">Edit</button>
+////     </header>
+////     <div class="wu-panel-body">Email me about new comments.</div>
+////     <footer class="wu-panel-footer">
+////       <button class="wu-btn brand" type="button">Save</button>
+////     </footer>
+////   </section>
+//// @part wu-panel-header - Top row with a tinted background and bottom border @since 1.0.0
+//// @part wu-panel-title - Panel heading @since 1.0.0
+//// @part wu-panel-body - Content area @since 1.0.0
+//// @part wu-panel-footer - Bottom row for actions, aligned to the inline end @since 1.0.0
+//// @variable --wu-panel--Padding [1rem] - Inline padding of the header and footer, and padding of the body @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-panel {
+    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);
+}
+
+.wu-panel-header,
+.wu-panel-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: woven.token(space-2);
+    padding-block: woven.token(space-3);
+    padding-inline: var(--wu-panel--Padding, #{woven.token(space-4)});
+}
+
+.wu-panel-header {
+    justify-content: space-between;
+    border-block-end: woven.token(border-width-1) solid woven.token(border-regular);
+    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-panel-title {
+    margin: 0;
+    font-size: woven.token(font-size-sm);
+    font-weight: woven.token(font-weight-semibold);
+    line-height: woven.token(line-height-tight);
+}
+
+.wu-panel-body {
+    padding: var(--wu-panel--Padding, #{woven.token(space-4)});
+}
+
+.wu-panel-footer {
+    justify-content: flex-end;
+    border-block-start: woven.token(border-width-1) solid woven.token(border-regular);
+}

package/src/components/_popover.scss

@@ -0,0 +1,154 @@
+////
+//// @component wu-popover
+//// Small floating panel built on the native `popover` attribute.
+////
+//// Esc and click outside close it. `commandfor` with `command="toggle-popover"` works as the trigger too.
+////
+//// Opens under its trigger where anchor positioning exists, and flips when there is no room. Elsewhere it is centered in the viewport. It has no arrow.
+////
+//// Placement follows the popover own direction, so it is right in an RTL section of an LTR page.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <button class="wu-btn" type="button" popovertarget="p1">Details</button>
+////   <div class="wu-popover" id="p1" popover>
+////     <h3 class="wu-popover-title">Title</h3>
+////     <p>Short content.</p>
+////   </div>
+//// @example html
+////   <button class="wu-btn" type="button" popovertarget="p2">Delete</button>
+////   <div class="wu-popover" id="p2" popover>
+////     <p>Delete this item?</p>
+////     <div class="wu-popover-actions">
+////       <button class="wu-btn sm" type="button" popovertarget="p2" popovertargetaction="hide">Cancel</button>
+////       <button class="wu-btn danger sm" type="button" popovertarget="p2" popovertargetaction="hide">Delete</button>
+////     </div>
+////   </div>
+//// @modifier animated - Fades and scales the popover in and out, growing away from the trigger, when the user allows motion; `wu-animated` on an ancestor does the same @since 1.0.0
+//// @part wu-popover-title - Popover heading @since 1.0.0
+//// @part wu-popover-actions - Button row at the inline end, for an inline confirm @since 1.0.0
+//// @variable --wu-popover--MaxWidth [20rem] - Largest popover width @since 1.0.0
+//// @state :popover-open - Fully visible during the animated transition @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-popover {
+    inset: 0;
+    inline-size: fit-content;
+    block-size: fit-content;
+    max-inline-size: var(--wu-popover--MaxWidth, 20rem);
+    margin: auto;
+    padding-block: woven.token(space-3);
+    padding-inline: woven.token(space-4);
+    border: woven.token(border-width-1) solid woven.token(border-regular);
+    border-radius: woven.token(radius-md);
+    background: woven.token(bg-raised);
+    color: woven.token(text-regular);
+    font-size: woven.token(font-size-sm);
+    line-height: woven.token(line-height-normal);
+    box-shadow: woven.token(shadow-lg);
+    z-index: woven.token(z-popover);
+
+    > :first-child {
+        margin-block-start: 0;
+    }
+
+    > :last-child {
+        margin-block-end: 0;
+    }
+}
+
+.wu-popover-title {
+    margin-block: 0 woven.token(space-1);
+    font-size: woven.token(font-size-sm);
+    font-weight: woven.token(font-weight-semibold);
+    line-height: woven.token(line-height-tight);
+}
+
+// Buttons at the inline end, as in a dialog footer
+.wu-popover-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: woven.token(space-2);
+    margin-block-start: woven.token(space-3);
+}
+
+// Centered on the trigger; when that overflows, tries above (flip-block), then edge-aligned placements below and above
+@position-try --wu-popover-below-start {
+    inset-inline: auto;
+    inset-inline-start: anchor(self-start);
+    justify-self: normal;
+}
+
+@position-try --wu-popover-below-end {
+    inset-inline: auto;
+    inset-inline-end: anchor(self-end);
+    justify-self: normal;
+}
+
+@supports (anchor-name: --x) {
+    .wu-popover {
+        position-anchor: auto;
+        inset: auto;
+        margin: 0;
+        margin-block: woven.token(space-2);
+        inline-size: max-content;
+        max-inline-size: min(var(--wu-popover--MaxWidth, 20rem), calc(100vw - 1rem));
+        inset-block-start: anchor(end);
+
+        // A viewport-clipped box centered on the trigger: safe centering keeps it on screen in every engine
+        inset-inline: max(0px, calc(2 * anchor(center) - 100%));
+        justify-self: center;
+        position-try-fallbacks:
+            flip-block,
+            --wu-popover-below-start,
+            --wu-popover-below-end,
+            --wu-popover-below-start flip-block,
+            --wu-popover-below-end flip-block;
+    }
+}
+
+// Opt-in motion: the panel fades and scales in and out. Anchored, it also grows away from the trigger
+// through the trigger-side margin, which flip-block mirrors when the panel opens above.
+@media (prefers-reduced-motion: no-preference) {
+    .wu-popover.animated,
+    .wu-animated .wu-popover {
+        opacity: 0;
+        scale: 0.96;
+        transition:
+            opacity woven.token(duration-150) woven.token(ease-out),
+            scale woven.token(duration-150) woven.token(ease-out),
+            margin woven.token(duration-150) woven.token(ease-out),
+            display woven.token(duration-150) allow-discrete,
+            overlay woven.token(duration-150) allow-discrete;
+
+        &:popover-open {
+            opacity: 1;
+            scale: 1;
+
+            @starting-style {
+                opacity: 0;
+                scale: 0.96;
+            }
+        }
+    }
+
+    @supports (anchor-name: --x) {
+        .wu-popover.animated,
+        .wu-animated .wu-popover {
+            margin-block-start: woven.token(space-1);
+
+            &:popover-open {
+                margin-block-start: woven.token(space-2);
+
+                @starting-style {
+                    margin-block-start: woven.token(space-1);
+                }
+            }
+        }
+    }
+}

package/src/components/_progress-circle.scss

@@ -0,0 +1,123 @@
+////
+//// @component wu-progress-circle
+//// Circular progress ring that shows a percentage.
+////
+//// It is not a native element, so name the role and value: `role="progressbar"` with `aria-label`, `aria-valuenow`, `aria-valuemin` and `aria-valuemax`.
+////
+//// The value is a percentage from 0 to 100, set with `--wu-progress-circle--Value`. The ring color is `currentcolor`, so roles and `color` set it.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <div class="wu-progress-circle" role="progressbar" aria-label="Upload" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="--wu-progress-circle--Value: 72">
+////     <span class="wu-progress-circle-label">72%</span>
+////   </div>
+//// @example html
+////   <div class="wu-progress-circle success lg animated" role="progressbar" aria-label="Storage" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="--wu-progress-circle--Value: 40">
+////     <span class="wu-progress-circle-label">40%</span>
+////   </div>
+//// @modifier success | danger | warning | info - Role color for the ring @since 1.0.0
+//// @modifier sm | lg - Smaller (2.5rem) or larger (6rem) ring with a thinner or thicker band @since 1.0.0
+//// @modifier animated - The ring eases to each new value when the user allows motion; `wu-animated` on an ancestor does the same @since 1.0.0
+//// @part wu-progress-circle-label - Text centered in the ring @since 1.0.0
+//// @variable --wu-progress-circle--Value [0] - Percentage from 0 to 100; a registered property, so it can transition @since 1.0.0
+//// @variable --wu-progress-circle--Size [4rem] - Width and height of the ring @since 1.0.0
+//// @variable --wu-progress-circle--Thickness [0.5rem] - Width of the ring band @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+$roles: "success", "danger", "warning", "info";
+
+// Ring mask: transparent center, opaque band of the given thickness
+@function ring($space) {
+    $t: var(--wu-progress-circle--Thickness, #{woven.token($space)});
+    @return radial-gradient(farthest-side, transparent calc(100% - #{$t} - 0.5px), #000 calc(100% - #{$t}));
+}
+
+@property --wu-progress-circle--Value {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 0;
+}
+
+// Ring color is currentcolor; roles and `color` set it
+.wu-progress-circle {
+    position: relative;
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: var(--wu-progress-circle--Size, #{woven.token(space-16)});
+    height: var(--wu-progress-circle--Size, #{woven.token(space-16)});
+    color: woven.token(brand);
+    font-size: woven.token(font-size-sm);
+    font-variant-numeric: tabular-nums;
+    font-weight: woven.token(font-weight-semibold);
+    line-height: 1;
+    vertical-align: middle;
+
+    // Conic fill over the track, masked to a ring
+    &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: woven.token(radius-full);
+        background: conic-gradient(currentcolor calc(var(--wu-progress-circle--Value, 0) * 1%), transparent 0) woven.token(border-regular);
+        mask: ring(space-2);
+    }
+}
+
+.wu-progress-circle-label {
+    position: relative;
+    color: woven.token(text-regular);
+}
+
+@each $role in $roles {
+    .wu-progress-circle.#{$role} {
+        color: woven.token($role);
+    }
+}
+
+.wu-progress-circle.sm {
+    width: var(--wu-progress-circle--Size, #{woven.token(space-10)});
+    height: var(--wu-progress-circle--Size, #{woven.token(space-10)});
+    font-size: woven.token(font-size-xs);
+
+    &::before {
+        mask: ring(space-1);
+    }
+}
+
+.wu-progress-circle.lg {
+    width: var(--wu-progress-circle--Size, #{woven.token(space-24)});
+    height: var(--wu-progress-circle--Size, #{woven.token(space-24)});
+    font-size: woven.token(font-size-lg);
+
+    &::before {
+        mask: ring(space-3);
+    }
+}
+
+@media (forced-colors: active) {
+    .wu-progress-circle {
+        color: Highlight;
+        forced-color-adjust: none;
+
+        &::before {
+            background-color: GrayText;
+        }
+    }
+
+    .wu-progress-circle-label {
+        color: CanvasText;
+    }
+}
+
+// Opt-in motion: the ring eases to each new value
+@media (prefers-reduced-motion: no-preference) {
+    .wu-progress-circle.animated,
+    .wu-animated .wu-progress-circle {
+        transition: --wu-progress-circle--Value woven.token(duration-500) woven.token(ease-out);
+    }
+}

package/src/components/_progress.scss

@@ -0,0 +1,122 @@
+////
+//// @component wu-progress
+//// Horizontal progress bar on the native `progress` element.
+////
+//// Without a `value` attribute it is indeterminate and shows a sliding segment. Label it with a `label` element or `aria-label`.
+////
+//// The fill uses `currentcolor`, so roles and `color` set it.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <label class="wu-progress-label" for="upload"><span>Uploading</span><span>72%</span></label>
+////   <progress class="wu-progress" id="upload" value="72" max="100"></progress>
+//// @example html
+////   <progress class="wu-progress success sm" value="40" max="100" aria-label="Storage used"></progress>
+////   <progress class="wu-progress lg" aria-label="Loading"></progress>
+//// @modifier success | danger | warning | info - Role color for the fill @since 1.0.0
+//// @modifier sm | lg - Thinner (0.25rem) or thicker (0.75rem) bar @since 1.0.0
+//// @part wu-progress-label - Row above the bar for a title and a value @since 1.0.0
+//// @variable --wu-progress--Height [0.5rem] - Bar height @since 1.0.0
+//// @state :indeterminate - No value: a segment slides across the track @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+$roles: "success", "danger", "warning", "info";
+
+.wu-progress {
+    display: block;
+    width: 100%;
+    height: var(--wu-progress--Height, #{woven.token(space-2)});
+    overflow: hidden;
+    border: 0;
+    border-radius: woven.token(radius-full);
+    background-color: woven.token(border-regular);
+    color: woven.token(brand);
+    vertical-align: middle;
+    appearance: none;
+}
+
+.wu-progress::-webkit-progress-bar {
+    border-radius: inherit;
+    background: transparent;
+}
+
+.wu-progress::-webkit-progress-value {
+    border-radius: inherit;
+    background: currentcolor;
+}
+
+.wu-progress::-moz-progress-bar {
+    border-radius: inherit;
+    background: currentcolor;
+}
+
+// Indeterminate: a sliding segment on the track; the static frame keeps it centered
+.wu-progress:indeterminate {
+    background-image: linear-gradient(currentcolor, currentcolor);
+    background-position: 50% 0;
+    background-repeat: no-repeat;
+    background-size: 40% 100%;
+    animation: wu-progress-slide 1.5s ease-in-out infinite;
+
+    // The slide follows the reading direction
+    &:dir(rtl) {
+        animation-direction: reverse;
+    }
+}
+
+.wu-progress:indeterminate::-webkit-progress-value {
+    background: transparent;
+}
+
+.wu-progress:indeterminate::-moz-progress-bar {
+    background: transparent;
+}
+
+@each $role in $roles {
+    .wu-progress.#{$role} {
+        color: woven.token($role);
+    }
+}
+
+.wu-progress.sm {
+    height: var(--wu-progress--Height, #{woven.token(space-1)});
+}
+
+.wu-progress.lg {
+    height: var(--wu-progress--Height, #{woven.token(space-3)});
+}
+
+// <label class="wu-progress-label" for="id"><span>Uploading</span><span>72%</span></label>
+.wu-progress-label {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: woven.token(space-2);
+    margin-block-end: woven.token(space-1);
+    color: woven.token(text-muted);
+    font-size: woven.token(font-size-sm);
+    font-variant-numeric: tabular-nums;
+}
+
+@media (forced-colors: active) {
+    .wu-progress {
+        border: woven.token(border-width-1) solid CanvasText;
+        background-color: Canvas;
+        color: Highlight;
+        forced-color-adjust: none;
+    }
+}
+
+@keyframes wu-progress-slide {
+    from {
+        background-position: -70% 0;
+    }
+
+    to {
+        background-position: 170% 0;
+    }
+}