@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/popover/cmp.popover.svelte

@@ -0,0 +1,369 @@
+<script lang="ts">import { Icon } from '../icon';
+import { isIgnored } from './popover-ignore';
+import { autoUpdate, computePosition, flip, offset as offsetMiddleware, shift, size } from '@floating-ui/dom';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+import { tick } from 'svelte';
+let { position = 'bottom-start', disabled = false, fixedPosition = false, offset = 4, boundaryMargin = 8, backdrop = false, matchWidth = false, panel = true, keepOpen = false, fillContainer = false, on, children, trigger } = $props();
+let opened = $state(false);
+let triggerEl = $state.raw(undefined);
+let contentEl = $state.raw(undefined);
+// svelte-ignore state_referenced_locally
+let resolvedPlacement = $state(position);
+let previouslyFocused = null;
+/** Imperative API — bind:this on the component to access. */
+export const open = () => {
+    if (disabled || opened) {
+        return;
+    }
+    opened = true;
+    on?.opened?.();
+};
+export const close = () => {
+    if (!opened) {
+        return;
+    }
+    opened = false;
+    on?.closed?.();
+};
+export const toggle = () => {
+    if (opened) {
+        close();
+    }
+    else {
+        open();
+    }
+};
+// Floating UI: compute + auto-update position while opened.
+$effect(() => {
+    if (!opened || !triggerEl || !contentEl) {
+        return;
+    }
+    const t = triggerEl;
+    const c = contentEl;
+    const update = async () => {
+        const middleware = [offsetMiddleware(offset), flip({ padding: boundaryMargin }), shift({ padding: boundaryMargin })];
+        if (matchWidth) {
+            middleware.push(size({
+                apply({ rects, elements }) {
+                    elements.floating.style.width = `${rects.reference.width}px`;
+                }
+            }));
+        }
+        const result = await computePosition(t, c, {
+            placement: position,
+            strategy: fixedPosition ? 'fixed' : 'absolute',
+            middleware
+        });
+        Object.assign(c.style, {
+            position: fixedPosition ? 'fixed' : 'absolute',
+            left: `${result.x}px`,
+            top: `${result.y}px`
+        });
+        resolvedPlacement = result.placement;
+    };
+    return autoUpdate(t, c, update);
+});
+const focusFirstFocusable = async () => {
+    await tick();
+    if (!contentEl) {
+        return;
+    }
+    const focusables = getFocusableElements(contentEl);
+    // preventScroll: content is positioned asynchronously by Floating UI; without this,
+    // focusing while content is still at (0,0) scrolls the page to top-left.
+    focusables[0]?.focus({ preventScroll: true });
+};
+// Focus management — capture previous, auto-focus first focusable, restore on close.
+$effect(() => {
+    if (!opened) {
+        return;
+    }
+    previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    void focusFirstFocusable();
+    return () => {
+        previouslyFocused?.focus?.();
+        previouslyFocused = null;
+    };
+});
+// Outside click + Escape + Tab focus trap — only while opened.
+$effect(() => {
+    if (!opened) {
+        return;
+    }
+    const handleOutsidePointerDown = (e) => {
+        const target = e.target;
+        if (!target) {
+            return;
+        }
+        if (triggerEl?.contains(target) || contentEl?.contains(target)) {
+            return;
+        }
+        close();
+    };
+    const handleKey = (e) => {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            close();
+            return;
+        }
+        if (e.key === 'Tab' && contentEl) {
+            const focusables = getFocusableElements(contentEl);
+            if (focusables.length === 0) {
+                return;
+            }
+            const first = focusables[0];
+            const last = focusables[focusables.length - 1];
+            const active = document.activeElement;
+            if (e.shiftKey && active === first) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && active === last) {
+                e.preventDefault();
+                first.focus();
+            }
+        }
+    };
+    window.addEventListener('pointerdown', handleOutsidePointerDown, true);
+    document.addEventListener('keydown', handleKey, true);
+    return () => {
+        window.removeEventListener('pointerdown', handleOutsidePointerDown, true);
+        document.removeEventListener('keydown', handleKey, true);
+    };
+});
+const getFocusableElements = (root) => {
+    const selector = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    return Array.from(root.querySelectorAll(selector));
+};
+const handleTriggerClick = (e) => {
+    e.stopPropagation();
+    toggle();
+};
+const handleContentClick = (e) => {
+    if (keepOpen || !contentEl) {
+        return;
+    }
+    let node = e.target;
+    while (node && node !== contentEl) {
+        if (isIgnored(node)) {
+            return;
+        }
+        node = node.parentElement;
+    }
+    close();
+};
+const handleBackdropClick = (e) => {
+    e.stopPropagation();
+    close();
+};
+</script>
+
+{#if opened && backdrop}
+  <div class="popover-backdrop" onclick={handleBackdropClick} onkeydown={() => undefined} role="none"></div>
+{/if}
+
+<div class="popover" class:popover--disabled={disabled} class:popover--fill-container={fillContainer}>
+  <button
+    bind:this={triggerEl}
+    type="button"
+    class="popover__trigger"
+    class:popover__trigger--fill={fillContainer}
+    disabled={disabled}
+    aria-haspopup="true"
+    aria-expanded={opened}
+    onclick={handleTriggerClick}>
+    {#if trigger}
+      {@render trigger()}
+    {:else}
+      <Icon src={IconChevronDown} />
+    {/if}
+  </button>
+
+  {#if opened}
+    <div
+      bind:this={contentEl}
+      class="popover__content"
+      class:popover__content--panel={panel}
+      data-placement={resolvedPlacement}
+      role="dialog"
+      tabindex="-1"
+      onclick={handleContentClick}
+      onkeydown={() => undefined}>
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<!--
+@component
+Popover — floating content anchored to a trigger element. Click trigger to open;
+click outside, Escape, or click inside content (default) to close. Use `popoverIgnore`
+action on a sub-tree to keep the popover open when clicks land inside that sub-tree.
+
+Imperative control via `bind:this` — the component exports `open()`, `close()`, `toggle()`
+methods. Import `PopoverInstance` type from the barrel for typing the ref.
+
+```svelte
+import { Popover, type PopoverInstance } from '@streamscloud/kit/ui/popover';
+let dd: PopoverInstance | undefined = $state.raw(undefined);
+
+<Popover bind:this={dd}>...</Popover>
+<button onclick={() => dd?.open()}>Open externally</button>
+```
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--popover--width` | Trigger width (the trigger fills it). `max-content` ⇒ shrink to content; set `100%` for a full-width trigger | `max-content` |
+| `--sc-kit--popover--content--background` | Content background | `var(--sc-kit--color--bg--panel)` |
+| `--sc-kit--popover--content--border-color` | Content border color | `var(--sc-kit--color--border)` |
+| `--sc-kit--popover--content--border-radius` | Content corner radius | `var(--sc-kit--radius--md)` |
+| `--sc-kit--popover--content--box-shadow` | Content shadow | `var(--sc-kit--shadow--lg)` |
+| `--sc-kit--popover--content--min-width` | Content min width | `12rem` |
+| `--sc-kit--popover--content--padding` | Content padding | `var(--sc-kit--space--1) 0` |
+| `--sc-kit--popover--content--z-index` | Content z-index | `var(--sc-kit--z-index--popover)` |
+
+Props for keeping the popover open during interaction:
+- `keepOpen` (Popover-level): block any inner click from closing — for interactive content (color pickers, emoji panels, etc.).
+- `keepOpen` (PopoverItem-level): block close only for clicks on that specific item.
+- `use:popoverIgnore={true}` action: block close for clicks anywhere in the marked sub-tree.
+-->
+
+<style>.popover-backdrop {
+  position: fixed;
+  inset: 0;
+  background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1));
+  z-index: calc(var(--sc-kit--z-index--popover) - 1);
+  animation: popover-backdrop-fade-in var(--sc-kit--duration--base) var(--sc-kit--ease--out) both;
+}
+
+.popover {
+  --_dd--width: var(--sc-kit--popover--width, max-content);
+  display: inline-flex;
+  width: var(--_dd--width);
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.popover :global([contenteditable]) {
+  user-select: text;
+}
+.popover__trigger {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  line-height: var(--sc-kit--leading--tight);
+}
+.popover__trigger:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+  border-radius: var(--sc-kit--radius--sm);
+}
+.popover__trigger:disabled {
+  cursor: default;
+}
+.popover__trigger--fill {
+  height: 100%;
+  justify-content: center;
+  border-radius: inherit;
+}
+.popover--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.popover--fill-container {
+  width: 100%;
+  height: 100%;
+}
+.popover__content {
+  --_dd--content-background: var(--sc-kit--popover--content--background, var(--sc-kit--color--bg--panel));
+  --_dd--content-border-color: var(--sc-kit--popover--content--border-color, var(--sc-kit--color--border));
+  --_dd--content-border-radius: var(--sc-kit--popover--content--border-radius, var(--sc-kit--radius--md));
+  --_dd--content-shadow: var(--sc-kit--popover--content--box-shadow, var(--sc-kit--shadow--lg));
+  --_dd--content-min-width: var(--sc-kit--popover--content--min-width, 12rem);
+  --_dd--content-padding: var(--sc-kit--popover--content--padding, var(--sc-kit--space--1) 0);
+  --_dd--content-z-index: var(--sc-kit--popover--content--z-index, var(--sc-kit--z-index--popover));
+  --_dd--anim-shift-x: 0;
+  --_dd--anim-shift-y: -4px;
+  --_dd--anim-origin-x: left;
+  --_dd--anim-origin-y: top;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--_dd--content-z-index);
+  width: max-content;
+  min-width: var(--_dd--content-min-width);
+  transform-origin: var(--_dd--anim-origin-x) var(--_dd--anim-origin-y);
+  animation: popover-appear var(--sc-kit--duration--fast) var(--sc-kit--ease--out) both;
+}
+.popover__content--panel {
+  background: var(--_dd--content-background);
+  border: 1px solid var(--_dd--content-border-color);
+  border-radius: var(--_dd--content-border-radius);
+  box-shadow: var(--_dd--content-shadow);
+  padding: var(--_dd--content-padding);
+}
+.popover__content:focus-visible {
+  outline: none;
+}
+.popover__content[data-placement=bottom] {
+  --_dd--anim-origin-x: center;
+}
+.popover__content[data-placement=bottom-end] {
+  --_dd--anim-origin-x: right;
+}
+.popover__content[data-placement^=top] {
+  --_dd--anim-shift-y: 4px;
+  --_dd--anim-origin-y: bottom;
+}
+.popover__content[data-placement=top] {
+  --_dd--anim-origin-x: center;
+}
+.popover__content[data-placement=top-end] {
+  --_dd--anim-origin-x: right;
+}
+.popover__content[data-placement^=left] {
+  --_dd--anim-shift-x: 4px;
+  --_dd--anim-shift-y: 0;
+  --_dd--anim-origin-x: right;
+  --_dd--anim-origin-y: top;
+}
+.popover__content[data-placement=left] {
+  --_dd--anim-origin-y: center;
+}
+.popover__content[data-placement=left-end] {
+  --_dd--anim-origin-y: bottom;
+}
+.popover__content[data-placement^=right] {
+  --_dd--anim-shift-x: -4px;
+  --_dd--anim-shift-y: 0;
+  --_dd--anim-origin-x: left;
+  --_dd--anim-origin-y: top;
+}
+.popover__content[data-placement=right] {
+  --_dd--anim-origin-y: center;
+}
+.popover__content[data-placement=right-end] {
+  --_dd--anim-origin-y: bottom;
+}
+
+@keyframes popover-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translate(var(--_dd--anim-shift-x), var(--_dd--anim-shift-y));
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translate(0, 0);
+  }
+}
+@keyframes popover-backdrop-fade-in {
+  from {
+    opacity: 0;
+  }
+}</style>

package/dist/ui/popover/cmp.popover.svelte.d.ts

@@ -0,0 +1,70 @@
+import { type Placement } from '@floating-ui/dom';
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Floating UI placement. @default 'bottom-start' */
+    position?: Placement;
+    disabled?: boolean;
+    /** Use `position: fixed` strategy (helpful inside overflow-clipped containers). */
+    fixedPosition?: boolean;
+    /** Distance in px between the trigger and the popover content. @default 4 */
+    offset?: number;
+    /** Padding in px from the viewport boundary before content shifts/flips. @default 8 */
+    boundaryMargin?: number;
+    /** Render a semi-transparent backdrop behind the content. */
+    backdrop?: boolean;
+    /** Make the content match the trigger element width. */
+    matchWidth?: boolean;
+    /** Apply built-in panel styling (background, shadow, border-radius). @default true */
+    panel?: boolean;
+    /** Keep the popover open on any click inside the content (useful when the content is interactive). Per-item `keepOpen` and `use:popoverIgnore` still work for fine-grained control. */
+    keepOpen?: boolean;
+    /** Make the trigger fill its parent's box: `width:100%; height:100%`, centered, `border-radius: inherit`. Use when Popover sits inside a wrapper that owns the visible click surface (icon squares, list rows, etc.). */
+    fillContainer?: boolean;
+    on?: {
+        opened?: () => void;
+        closed?: () => void;
+    };
+    children: Snippet;
+    /** Custom trigger snippet; defaults to a chevron-down icon. */
+    trigger?: Snippet;
+};
+/**
+ * Popover — floating content anchored to a trigger element. Click trigger to open;
+ * click outside, Escape, or click inside content (default) to close. Use `popoverIgnore`
+ * action on a sub-tree to keep the popover open when clicks land inside that sub-tree.
+ *
+ * Imperative control via `bind:this` — the component exports `open()`, `close()`, `toggle()`
+ * methods. Import `PopoverInstance` type from the barrel for typing the ref.
+ *
+ * ```svelte
+ * import { Popover, type PopoverInstance } from '@streamscloud/kit/ui/popover';
+ * let dd: PopoverInstance | undefined = $state.raw(undefined);
+ *
+ * <Popover bind:this={dd}>...</Popover>
+ * <button onclick={() => dd?.open()}>Open externally</button>
+ * ```
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--popover--width` | Trigger width (the trigger fills it). `max-content` ⇒ shrink to content; set `100%` for a full-width trigger | `max-content` |
+ * | `--sc-kit--popover--content--background` | Content background | `var(--sc-kit--color--bg--panel)` |
+ * | `--sc-kit--popover--content--border-color` | Content border color | `var(--sc-kit--color--border)` |
+ * | `--sc-kit--popover--content--border-radius` | Content corner radius | `var(--sc-kit--radius--md)` |
+ * | `--sc-kit--popover--content--box-shadow` | Content shadow | `var(--sc-kit--shadow--lg)` |
+ * | `--sc-kit--popover--content--min-width` | Content min width | `12rem` |
+ * | `--sc-kit--popover--content--padding` | Content padding | `var(--sc-kit--space--1) 0` |
+ * | `--sc-kit--popover--content--z-index` | Content z-index | `var(--sc-kit--z-index--popover)` |
+ *
+ * Props for keeping the popover open during interaction:
+ * - `keepOpen` (Popover-level): block any inner click from closing — for interactive content (color pickers, emoji panels, etc.).
+ * - `keepOpen` (PopoverItem-level): block close only for clicks on that specific item.
+ * - `use:popoverIgnore={true}` action: block close for clicks anywhere in the marked sub-tree.
+ */
+declare const Cmp: import("svelte").Component<Props, {
+    /** Imperative API — bind:this on the component to access. */ open: () => void;
+    close: () => void;
+    toggle: () => void;
+}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/popover/index.d.ts

@@ -0,0 +1,10 @@
+export { default as Popover } from './cmp.popover.svelte';
+export { default as PopoverItem } from './cmp.popover-item.svelte';
+export { default as HoverPopover } from './cmp.hover-popover.svelte';
+export { popoverIgnore } from './popover-ignore';
+/** Imperative API exposed via `bind:this={instance}` on `<Popover>`. */
+export type PopoverInstance = {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};

package/dist/ui/popover/index.js

@@ -0,0 +1,4 @@
+export { default as Popover } from './cmp.popover.svelte';
+export { default as PopoverItem } from './cmp.popover-item.svelte';
+export { default as HoverPopover } from './cmp.hover-popover.svelte';
+export { popoverIgnore } from './popover-ignore';

package/dist/ui/{dropdown/dropdown-ignore.d.ts → popover/popover-ignore.d.ts}

@@ -1,4 +1,4 @@
-export declare const dropdownIgnore: (node: HTMLElement, value?: boolean) => {
+export declare const popoverIgnore: (node: HTMLElement, value?: boolean) => {
     destroy(): void;
 };
 export declare const isIgnored: (node: HTMLElement) => boolean;

package/dist/ui/{dropdown/dropdown-ignore.js → popover/popover-ignore.js}

@@ -1,5 +1,5 @@
-const IGNORE_ATTRIBUTE = 'dropdownIgnore';
-export const dropdownIgnore = (node, value = true) => {
+const IGNORE_ATTRIBUTE = 'popoverIgnore';
+export const popoverIgnore = (node, value = true) => {
     node.dataset[IGNORE_ATTRIBUTE] = value.toString();
     return {
         destroy() { }

package/dist/ui/progress/cmp.progress.svelte

@@ -1,42 +1,111 @@
-<script lang="ts">let { value } = $props();
-const cssWidth = $derived(`${100 * (value <= 1 ? value : 1)}%`);
+<script lang="ts">let { value, size = 'md', color, label } = $props();
+const clamped = $derived(Math.max(0, Math.min(1, value)));
+const cssWidth = $derived(`${100 * clamped}%`);
+const percent = $derived(Math.round(100 * clamped));
 </script>
 
-<div class="progress">
-  <span class="progress__value" class:progress__value--animated={value > 0.01 && value < 0.96} style:width={cssWidth}> &nbsp; </span>
+<div
+  class="progress progress--{size}"
+  class:progress--accent={color === 'accent'}
+  class:progress--muted={color === 'muted'}
+  class:progress--success={color === 'success'}
+  class:progress--warning={color === 'warning'}
+  class:progress--danger={color === 'danger'}
+  class:progress--text={color === 'text'}
+  class:progress--on-accent={color === 'on-accent'}
+  role={label ? 'progressbar' : undefined}
+  aria-label={label}
+  aria-valuemin={label ? 0 : undefined}
+  aria-valuemax={label ? 100 : undefined}
+  aria-valuenow={label ? percent : undefined}>
+  <span class="progress__value" class:progress__value--animated={value > 0.01 && value < 0.96} style:width={cssWidth}></span>
 </div>
 
 <!--
 @component
-A horizontal progress bar that fills from left to right based on a normalized value.
+A horizontal progress bar that fills from left to right based on a normalized `value` (0–1).
+Values outside `[0, 1]` are clamped.
+
+Width is fluid (`100%`); the host controls the bar width via its parent. Override the height via the
+`size` preset or the `--sc-kit--progress--height` CSS variable.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--progress--height` | Bar height | `0.25em` |
-| `--sc-kit--progress--back-color` | Track background color | `neutral-400` |
-| `--sc-kit--progress--front-color` | Filled portion color | `white` |
-| `--sc-kit--progress--box-shadow` | Inset shadow on the track | `0 2px 3px rgba(0,0,0,0.25) inset` |
-| `--sc-kit--progress--border-radius` | Corner radius | `0` |
+| `--sc-kit--progress--height` | Bar height | per `size` preset (4 / 6 / 10 px) |
+| `--sc-kit--progress--track-color` | Track background color | `--sc-kit--color--border` |
+| `--sc-kit--progress--fill-color` | Filled-portion color | per `color` preset (accent by default) |
+| `--sc-kit--progress--track-shadow` | Inset shadow on the track | `none` |
+| `--sc-kit--progress--border-radius` | Corner radius | `--sc-kit--radius--pill` |
+| `--sc-kit--progress--transition-duration` | Width transition duration | `--sc-kit--duration--slow` |
+| `--sc-kit--progress--color-accent` | Accent preset fill | `--sc-kit--color--accent` |
+| `--sc-kit--progress--color-muted` | Muted preset fill | `--sc-kit--color--text--muted` |
+| `--sc-kit--progress--color-success` | Success preset fill | `--sc-kit--color--success` |
+| `--sc-kit--progress--color-warning` | Warning preset fill | `--sc-kit--color--warning` |
+| `--sc-kit--progress--color-danger` | Danger preset fill | `--sc-kit--color--danger` |
+| `--sc-kit--progress--color-text` | Text preset fill | `--sc-kit--color--text--primary` |
+| `--sc-kit--progress--color-on-accent` | On-accent preset fill | `--sc-kit--color--text--on-accent` |
 -->
 
 <style>.progress {
-  --_progress--height: var(--sc-kit--progress--height, 0.25em);
-  --_progress--back-color: var(--sc-kit--progress--back-color, #9ca3af);
-  --_progress--front-color: var(--sc-kit--progress--front-color, #ffffff);
-  --_progress--box-shadow: var(--sc-kit--progress--box-shadow, 0 2px 3px rgba(0, 0, 0, 0.25) inset);
-  --_progress--border-radius: var(--sc-kit--progress--border-radius, 0);
+  --_progress--color-accent: var(--sc-kit--progress--color-accent, var(--sc-kit--color--accent));
+  --_progress--color-muted: var(--sc-kit--progress--color-muted, var(--sc-kit--color--text--muted));
+  --_progress--color-success: var(--sc-kit--progress--color-success, var(--sc-kit--color--success));
+  --_progress--color-warning: var(--sc-kit--progress--color-warning, var(--sc-kit--color--warning));
+  --_progress--color-danger: var(--sc-kit--progress--color-danger, var(--sc-kit--color--danger));
+  --_progress--color-text: var(--sc-kit--progress--color-text, var(--sc-kit--color--text--primary));
+  --_progress--color-on-accent: var(--sc-kit--progress--color-on-accent, var(--sc-kit--color--text--on-accent));
+  --_progress--fill: var(--sc-kit--progress--fill-color, var(--_progress--color-accent));
+  --_progress--track: var(--sc-kit--progress--track-color, var(--sc-kit--color--border));
+  --_progress--track-shadow: var(--sc-kit--progress--track-shadow, none);
+  --_progress--radius: var(--sc-kit--progress--border-radius, var(--sc-kit--radius--pill));
+  --_progress--duration: var(--sc-kit--progress--transition-duration, var(--sc-kit--duration--slow));
+  display: block;
   width: 100%;
-  background: var(--_progress--back-color);
+  background: var(--_progress--track);
+  box-shadow: var(--_progress--track-shadow);
+  border-radius: var(--_progress--radius);
+  overflow: hidden;
+}
+.progress--sm {
+  --_progress--height: var(--sc-kit--progress--height, 4px);
+  height: var(--_progress--height);
+}
+.progress--md {
+  --_progress--height: var(--sc-kit--progress--height, 6px);
+  height: var(--_progress--height);
+}
+.progress--lg {
+  --_progress--height: var(--sc-kit--progress--height, 10px);
   height: var(--_progress--height);
-  box-shadow: var(--_progress--box-shadow);
-  border-radius: var(--_progress--border-radius);
 }
 .progress__value {
-  background: var(--_progress--front-color);
-  display: inline-block;
+  display: block;
   height: 100%;
+  background: var(--_progress--fill);
+  border-radius: inherit;
 }
 .progress__value--animated {
-  transition: width 600ms;
+  transition: width var(--_progress--duration) var(--sc-kit--ease--default);
+}
+.progress--accent {
+  --_progress--fill: var(--_progress--color-accent);
+}
+.progress--muted {
+  --_progress--fill: var(--_progress--color-muted);
+}
+.progress--success {
+  --_progress--fill: var(--_progress--color-success);
+}
+.progress--warning {
+  --_progress--fill: var(--_progress--color-warning);
+}
+.progress--danger {
+  --_progress--fill: var(--_progress--color-danger);
+}
+.progress--text {
+  --_progress--fill: var(--_progress--color-text);
+}
+.progress--on-accent {
+  --_progress--fill: var(--_progress--color-on-accent);
 }</style>

package/dist/ui/progress/cmp.progress.svelte.d.ts

@@ -1,18 +1,38 @@
+type ProgressColor = 'accent' | 'muted' | 'success' | 'warning' | 'danger' | 'text' | 'on-accent';
+type ProgressSize = 'sm' | 'md' | 'lg';
 type Props = {
     /** Completion ratio from 0 to 1 */
     value: number;
+    /** Size preset (track height 4 / 6 / 10 px). @default 'md' */
+    size?: ProgressSize;
+    /** Filled-portion color preset. Track stays semantic-neutral. Omit for the default (`accent`). */
+    color?: ProgressColor;
+    /** Optional accessible label for screen readers. Sets `role="progressbar"` + `aria-valuenow`. */
+    label?: string;
 };
 /**
- * A horizontal progress bar that fills from left to right based on a normalized value.
+ * A horizontal progress bar that fills from left to right based on a normalized `value` (0–1).
+ * Values outside `[0, 1]` are clamped.
+ *
+ * Width is fluid (`100%`); the host controls the bar width via its parent. Override the height via the
+ * `size` preset or the `--sc-kit--progress--height` CSS variable.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--progress--height` | Bar height | `0.25em` |
- * | `--sc-kit--progress--back-color` | Track background color | `neutral-400` |
- * | `--sc-kit--progress--front-color` | Filled portion color | `white` |
- * | `--sc-kit--progress--box-shadow` | Inset shadow on the track | `0 2px 3px rgba(0,0,0,0.25) inset` |
- * | `--sc-kit--progress--border-radius` | Corner radius | `0` |
+ * | `--sc-kit--progress--height` | Bar height | per `size` preset (4 / 6 / 10 px) |
+ * | `--sc-kit--progress--track-color` | Track background color | `--sc-kit--color--border` |
+ * | `--sc-kit--progress--fill-color` | Filled-portion color | per `color` preset (accent by default) |
+ * | `--sc-kit--progress--track-shadow` | Inset shadow on the track | `none` |
+ * | `--sc-kit--progress--border-radius` | Corner radius | `--sc-kit--radius--pill` |
+ * | `--sc-kit--progress--transition-duration` | Width transition duration | `--sc-kit--duration--slow` |
+ * | `--sc-kit--progress--color-accent` | Accent preset fill | `--sc-kit--color--accent` |
+ * | `--sc-kit--progress--color-muted` | Muted preset fill | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--progress--color-success` | Success preset fill | `--sc-kit--color--success` |
+ * | `--sc-kit--progress--color-warning` | Warning preset fill | `--sc-kit--color--warning` |
+ * | `--sc-kit--progress--color-danger` | Danger preset fill | `--sc-kit--color--danger` |
+ * | `--sc-kit--progress--color-text` | Text preset fill | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--progress--color-on-accent` | On-accent preset fill | `--sc-kit--color--text--on-accent` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;