entasis 0.11.0 → 0.12.0

package/dist/components/PopupMenu/popupMenu.props.d.ts

@@ -1,13 +1,20 @@
 import type { PopoverProps } from '../Popover/popover.props.js';
 import type { MenuProps } from '../Menu/menu.props.js';
+import type { PopupMenuRoot } from './popupMenu.context.js';
 import type { PopupMenuThemeProps } from './popupMenu.theme.js';
 export type PopupMenuProps = Omit<PopoverProps, 'children' | 'theme'> & {
     /**
-     * Menu props including items array and theme.
+     * Menu props including the items array, theme and the search field (`filter`). Left out,
+     * `focusOnMount` follows how the menu opened: the first row (the last for ArrowUp) after a
+     * keyboard open, the menu itself after a pointer open, nothing after a hover open.
      */
     menu: MenuProps;
     /**
-     * Whether to close the menu when a menu item is clicked.
+     * Whether choosing a menu item (a button or link without `data-menu-keep-open="true"`)
+     * closes the menu. Choosing an item inside a submenu closes every open submenu and the menu
+     * together; a floating menu then returns focus to its trigger (a mobile sheet hands focus back
+     * through its Dialog). Submenus follow this setting. A PopupMenu placed in another menu's
+     * header, footer or trigger is a menu of its own and keeps its own setting.
      * @default true
      */
     closeOnItemClick?: boolean;
@@ -16,3 +23,23 @@ export type PopupMenuProps = Omit<PopoverProps, 'children' | 'theme'> & {
      */
     theme?: PopupMenuThemeProps & PopoverProps['theme'];
 };
+/**
+ * PopupMenu props plus the tree wiring MenuFloating passes to the submenus it renders.
+ * Deliberately absent from the package's public exports: a consumer's PopupMenu is always the
+ * root of its own menu tree.
+ */
+export type PopupMenuInternalProps = PopupMenuProps & {
+    /** The menu tree this PopupMenu opens from as a submenu; its root then decides for this level. */
+    submenuOf?: PopupMenuRoot;
+    /**
+     * This PopupMenu is a submenu level of the Menu that renders it, even when no tree hosts that
+     * Menu (an inline Menu): ArrowLeft leaves the level and a mobile sheet shows a back control.
+     */
+    isSubmenu?: boolean;
+    /**
+     * Whether the browser's own context menu may open over this menu's panels (and its submenus').
+     * A ContextMenu turns it off, so a right-click on the open menu does not show a second menu.
+     * @default true
+     */
+    nativeMenu?: boolean;
+};

package/dist/components/Progress/Progress.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+	import Slot from '../Slot/Slot.svelte';
+	import type { ProgressProps, ProgressValueState } from './progress.props.js';
+	import { useProgressTheme } from './progress.theme.js';
+	import { useDefaultColor } from '../Theme/theme.state.svelte.js';
+	import { useI18n } from '../../i18n/context.svelte.js';
+	import { clampRange, rangeAriaAttributes, resolveRangeValue } from '../../utils/range.js';
+	import { presence } from '../../utils/stateAttributes.js';
+
+	let {
+		ref = $bindable(),
+		class: className,
+		color,
+		size = 'normal',
+		density = 'normal',
+		value = 0,
+		min = 0,
+		max = 100,
+		format,
+		getAriaValueText,
+		locale: localeProp,
+		showValue = false,
+		label,
+		valueLabel,
+		theme,
+		...attachments
+	}: ProgressProps = $props();
+	const t = $derived(useI18n());
+
+	const id = $props.id();
+	const labelId = `${id}-label`;
+
+	const classes = $derived(useProgressTheme(theme));
+	const resolvedColor = $derived(useDefaultColor(color));
+	const locale = $derived(localeProp ?? t.locale);
+
+	// `null` (or a non-finite number) is indeterminate. Otherwise the value is clamped into
+	// [min, max], and the fill, the ARIA values and the text all follow that one clamped value.
+	const rangeOptions = $derived({
+		value,
+		min,
+		max,
+		format,
+		locale,
+		indeterminateText: t.progressIndeterminate,
+		getAriaValueText:
+			getAriaValueText &&
+			((formattedValue: string, rawValue: number | null) =>
+				getAriaValueText({
+					value: rawValue === null ? null : clampRange(rawValue, min, max),
+					formattedValue,
+					min,
+					max
+				}))
+	});
+	const range = $derived(resolveRangeValue(rangeOptions));
+	const aria = $derived(rangeAriaAttributes(rangeOptions));
+	const indeterminate = $derived(range.status === 'indeterminate');
+	const valueState: ProgressValueState = $derived({
+		value: range.value,
+		formattedValue: range.formatted,
+		percent: range.percent,
+		status: range.status
+	});
+	// Always present as text, so NVDA reads the bar's name (nvaccess/nvda#13904). The visible
+	// value text covers it, except while indeterminate when that text is empty.
+	const valueText = $derived(aria['aria-valuetext'] ?? range.formatted);
+	const hasLabel = $derived(!!label);
+	const hasHeader = $derived(hasLabel || showValue);
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="progress"
+	data-color={resolvedColor}
+	data-size={size}
+	data-density={density}
+	data-indeterminate={presence(indeterminate)}
+	data-progressing={presence(range.status === 'progressing')}
+	data-complete={presence(range.status === 'complete')}
+	role="progressbar"
+	aria-labelledby={hasLabel ? labelId : undefined}
+	aria-label={hasLabel ? undefined : t.progress}
+	aria-valuemin={aria['aria-valuemin']}
+	aria-valuemax={aria['aria-valuemax']}
+	aria-valuenow={aria['aria-valuenow']}
+	aria-valuetext={aria['aria-valuetext']}
+	class={classes.root({ density, className })}
+	{...attachments}
+>
+	{#if hasHeader}
+		<div data-slot="progress-header" class={classes.header()}>
+			<!-- role="presentation" keeps the label out of NVDA's way (nvaccess/nvda#16204); the
+			     bar is still named through aria-labelledby. -->
+			{#if hasLabel}
+				<Slot
+					as="span"
+					render={label}
+					class={classes.label({ size })}
+					attrs={{ id: labelId, role: 'presentation', 'data-slot': 'progress-label' }}
+				/>
+			{/if}
+			{#if showValue}
+				<Slot
+					as="span"
+					render={valueLabel}
+					payload={valueState}
+					class={classes.value({ size })}
+					attrs={{ role: 'presentation', 'data-slot': 'progress-value' }}
+				>
+					{range.formatted}
+				</Slot>
+			{/if}
+		</div>
+	{/if}
+	<div data-slot="progress-track" class={classes.track({ size })}>
+		<div
+			data-slot="progress-indicator"
+			data-indeterminate={presence(indeterminate)}
+			class={classes.indicator({ color: resolvedColor })}
+			style:width={range.percent === null ? undefined : `${range.percent}%`}
+		></div>
+	</div>
+	{#if !showValue || !range.formatted}
+		<span role="presentation" class="sr-only">{valueText}</span>
+	{/if}
+</div>
+
+<style>
+	@keyframes progress-indeterminate {
+		from {
+			inset-inline-start: -40%;
+		}
+		to {
+			inset-inline-start: 100%;
+		}
+	}
+
+	div[data-slot='progress-indicator'][data-indeterminate] {
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: -40%;
+		width: 40%;
+		animation: progress-indeterminate 1.6s ease-in-out infinite;
+	}
+
+	/* Without motion the indeterminate fill rests in the middle of the track. */
+	@media (prefers-reduced-motion: reduce) {
+		div[data-slot='progress-indicator'][data-indeterminate] {
+			animation: none;
+			inset-inline-start: 30%;
+		}
+	}
+
+	:global(html[data-entasis-reduce-motion])
+		div[data-slot='progress-indicator'][data-indeterminate] {
+		animation: none;
+		inset-inline-start: 30%;
+	}
+</style>

package/dist/components/Progress/Progress.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ProgressProps } from './progress.props.js';
+declare const Progress: import("svelte").Component<ProgressProps, {}, "ref">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/components/Progress/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Progress } from './Progress.svelte';
+export type { ProgressProps, ProgressSize, ProgressValueState } from './progress.props.js';
+export { progressTheme, setProgressTheme, useProgressTheme, type ProgressTheme, type ProgressThemeProps } from './progress.theme.js';

package/dist/components/Progress/index.js

@@ -0,0 +1,2 @@
+export { default as Progress } from './Progress.svelte';
+export { progressTheme, setProgressTheme, useProgressTheme } from './progress.theme.js';

package/dist/components/Progress/progress.mcp.d.ts

@@ -0,0 +1 @@
+export declare const progressDescription = "\n# Progress Component\n\nProgress is a linear progress bar: a track with a fill that animates when the value changes. It is determinate by default and indeterminate when the value is null. A label and the value text sit in a header above the track.\n\nUse Progress for work that is moving toward completion (uploads, imports, steps). Use Meter for a measurement on a known scale (disk usage), and ProgressCircle for a compact circular indicator.\n\n## Basic Usage\n\n```svelte\n<Progress value={45} label=\"Uploading\" showValue />\n```\n\n## Props\n\n- **value**: number | null (default: 0)\n  - Progress between min and max. Values outside the range are clamped. null is indeterminate: aria-valuenow is dropped, data-indeterminate is set and the fill slides along the track.\n- **min**: number (default: 0)\n  - Value at which the track is empty (aria-valuemin).\n- **max**: number (default: 100)\n  - Value at which the track is full (aria-valuemax). data-complete is set once the clamped value reaches it.\n- **format**: Intl.NumberFormatOptions\n  - Formats the clamped value for the value text (for example { style: 'unit', unit: 'megabyte' }). Without it the text is the percentage of the range.\n- **getAriaValueText**: (payload: { value, formattedValue, min, max }) => string\n  - Overrides aria-valuetext. value is null while indeterminate.\n- **locale**: Intl.LocalesArgument\n  - Locale of the value text (default: the I18n locale, so French reads \"45 %\").\n- **label**: string | Snippet\n  - Visible label in the header. It names the bar; without one the bar is named \"Progress\" from the i18n catalog.\n- **showValue**: boolean (default: false)\n  - Shows the value text on the trailing side of the header. It is always announced; this only makes it visible.\n- **valueLabel**: Snippet<[{ value, formattedValue, percent, status }]>\n  - Replaces the visible value text. status is 'indeterminate' | 'progressing' | 'complete'.\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - Track thickness and text size.\n- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal')\n  - Whitespace between the header and the track.\n- **color**: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'neutral' (default: the Theme default color)\n  - Semantic color of the fill.\n- **ref**: HTMLElement | null (bindable)\n  - Reference to the root element.\n- **class**: string\n  - Additional classes for the root element.\n- **theme**: ProgressThemeProps\n  - Per-instance theme overrides.\n\n## Structure\n\n```\n<Progress>              role=\"progressbar\"\n\t<Header>            only with a label or showValue\n\t\t<Label />\n\t\t<Value />\n\t</Header>\n\t<Track>\n\t\t<Indicator />\n\t</Track>\n</Progress>\n```\n\n## Examples\n\n```svelte\n<Progress value={72} color=\"success\" />\n<Progress value={null} label=\"Loading\" />\n<Progress value={3} max={5} label=\"Files\" showValue format={{ style: 'decimal' }} />\n<Progress value={30} min={20} max={40} label=\"Temperature\" size=\"large\" density=\"comfortable\" />\n```\n\n### Custom value text\n\n```svelte\n<Progress value={2048} max={4096} label=\"Download\" showValue format={{ style: 'unit', unit: 'megabyte' }}>\n\t{#snippet valueLabel({ formattedValue, status })}\n\t\t{status === 'complete' ? 'Done' : formattedValue}\n\t{/snippet}\n</Progress>\n```\n\n## Accessibility\n\n- The root is `role=\"progressbar\"` with `aria-valuemin`, `aria-valuemax`, `aria-valuenow` (the clamped value, omitted while indeterminate) and `aria-valuetext` (the formatted value; \"Indeterminate progress\" from the i18n catalog while indeterminate).\n- A visible `label` names the bar through `aria-labelledby` and is presentational, so NVDA reads the name; without a label the bar is named from the catalog.\n- The value text is always present as text inside the bar (visually hidden unless `showValue` draws it; an indeterminate bar has no visible value, so the hidden text stays), because NVDA ignores the name of a progressbar with no text content.\n- The fill's slide animation stops under reduced motion (OS setting or the Theme reduceMotion override).\n\n## Styling Hooks\n\n- **data-indeterminate**, **data-progressing**, **data-complete** on the root (and data-indeterminate on the indicator)\n- **data-color**, **data-size**, **data-density** on the root\n- data-slot values: progress, progress-header, progress-label, progress-value, progress-track, progress-indicator\n\n## Theme Parts\n\n- **root** (density): column layout of header and track\n- **header**: label and value row\n- **label** (size): label text\n- **value** (size): visible value text\n- **track** (size): background track\n- **indicator** (color): the fill\n";

package/dist/components/Progress/progress.mcp.js

@@ -0,0 +1,101 @@
+export const progressDescription = `
+# Progress Component
+
+Progress is a linear progress bar: a track with a fill that animates when the value changes. It is determinate by default and indeterminate when the value is null. A label and the value text sit in a header above the track.
+
+Use Progress for work that is moving toward completion (uploads, imports, steps). Use Meter for a measurement on a known scale (disk usage), and ProgressCircle for a compact circular indicator.
+
+## Basic Usage
+
+\`\`\`svelte
+<Progress value={45} label="Uploading" showValue />
+\`\`\`
+
+## Props
+
+- **value**: number | null (default: 0)
+  - Progress between min and max. Values outside the range are clamped. null is indeterminate: aria-valuenow is dropped, data-indeterminate is set and the fill slides along the track.
+- **min**: number (default: 0)
+  - Value at which the track is empty (aria-valuemin).
+- **max**: number (default: 100)
+  - Value at which the track is full (aria-valuemax). data-complete is set once the clamped value reaches it.
+- **format**: Intl.NumberFormatOptions
+  - Formats the clamped value for the value text (for example { style: 'unit', unit: 'megabyte' }). Without it the text is the percentage of the range.
+- **getAriaValueText**: (payload: { value, formattedValue, min, max }) => string
+  - Overrides aria-valuetext. value is null while indeterminate.
+- **locale**: Intl.LocalesArgument
+  - Locale of the value text (default: the I18n locale, so French reads "45 %").
+- **label**: string | Snippet
+  - Visible label in the header. It names the bar; without one the bar is named "Progress" from the i18n catalog.
+- **showValue**: boolean (default: false)
+  - Shows the value text on the trailing side of the header. It is always announced; this only makes it visible.
+- **valueLabel**: Snippet<[{ value, formattedValue, percent, status }]>
+  - Replaces the visible value text. status is 'indeterminate' | 'progressing' | 'complete'.
+- **size**: 'small' | 'normal' | 'large' (default: 'normal')
+  - Track thickness and text size.
+- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal')
+  - Whitespace between the header and the track.
+- **color**: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'neutral' (default: the Theme default color)
+  - Semantic color of the fill.
+- **ref**: HTMLElement | null (bindable)
+  - Reference to the root element.
+- **class**: string
+  - Additional classes for the root element.
+- **theme**: ProgressThemeProps
+  - Per-instance theme overrides.
+
+## Structure
+
+\`\`\`
+<Progress>              role="progressbar"
+	<Header>            only with a label or showValue
+		<Label />
+		<Value />
+	</Header>
+	<Track>
+		<Indicator />
+	</Track>
+</Progress>
+\`\`\`
+
+## Examples
+
+\`\`\`svelte
+<Progress value={72} color="success" />
+<Progress value={null} label="Loading" />
+<Progress value={3} max={5} label="Files" showValue format={{ style: 'decimal' }} />
+<Progress value={30} min={20} max={40} label="Temperature" size="large" density="comfortable" />
+\`\`\`
+
+### Custom value text
+
+\`\`\`svelte
+<Progress value={2048} max={4096} label="Download" showValue format={{ style: 'unit', unit: 'megabyte' }}>
+	{#snippet valueLabel({ formattedValue, status })}
+		{status === 'complete' ? 'Done' : formattedValue}
+	{/snippet}
+</Progress>
+\`\`\`
+
+## Accessibility
+
+- The root is \`role="progressbar"\` with \`aria-valuemin\`, \`aria-valuemax\`, \`aria-valuenow\` (the clamped value, omitted while indeterminate) and \`aria-valuetext\` (the formatted value; "Indeterminate progress" from the i18n catalog while indeterminate).
+- A visible \`label\` names the bar through \`aria-labelledby\` and is presentational, so NVDA reads the name; without a label the bar is named from the catalog.
+- The value text is always present as text inside the bar (visually hidden unless \`showValue\` draws it; an indeterminate bar has no visible value, so the hidden text stays), because NVDA ignores the name of a progressbar with no text content.
+- The fill's slide animation stops under reduced motion (OS setting or the Theme reduceMotion override).
+
+## Styling Hooks
+
+- **data-indeterminate**, **data-progressing**, **data-complete** on the root (and data-indeterminate on the indicator)
+- **data-color**, **data-size**, **data-density** on the root
+- data-slot values: progress, progress-header, progress-label, progress-value, progress-track, progress-indicator
+
+## Theme Parts
+
+- **root** (density): column layout of header and track
+- **header**: label and value row
+- **label** (size): label text
+- **value** (size): visible value text
+- **track** (size): background track
+- **indicator** (color): the fill
+`;

package/dist/components/Progress/progress.props.d.ts

@@ -0,0 +1,79 @@
+import type { Colors, Density, Sizes } from '../../types/index.js';
+import type { WithAttachments } from '../../types/props.js';
+import type { Slot, WithSlot } from '../Slot/slot.js';
+import type { ProgressThemeProps } from './progress.theme.js';
+/** What `valueLabel` receives to draw the value text itself. */
+export type ProgressValueState = {
+    /** The value clamped into `[min, max]`, or `null` while indeterminate. */
+    value: number | null;
+    /** The formatted value text, `''` while indeterminate. */
+    formattedValue: string;
+    /** The clamped value as a 0–100 share of the range, or `null` while indeterminate. */
+    percent: number | null;
+    status: 'indeterminate' | 'progressing' | 'complete';
+};
+export type ProgressSize = Sizes;
+type ProgressBaseProps = {
+    /** Bindable reference to the root progress element. */
+    ref?: HTMLElement | null;
+    /** CSS classes applied to the root element. */
+    class?: string;
+    /** Theme color token applied to the fill. Defaults to the Theme default color. */
+    color?: Colors;
+    /** Semantic geometry scale: track thickness and text size. */
+    size?: ProgressSize;
+    /** Whitespace between the header (label and value) and the track. */
+    density?: Density;
+    /**
+     * Progress between `min` and `max`; it is clamped into that range. `null` is indeterminate:
+     * `aria-valuenow` is dropped, `data-indeterminate` is set and the fill slides along the track.
+     * `data-complete` is set once the clamped value reaches `max`.
+     *
+     * @readonly-value Progress draws reported progress it never edits.
+     * @default 0
+     */
+    value?: number | null;
+    /**
+     * Value at which the track is empty, reported as `aria-valuemin`.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Value at which the track is full, reported as `aria-valuemax`.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * `Intl.NumberFormat` options for the value text (`{ style: 'unit', unit: 'megabyte' }`),
+     * applied to the clamped value. Without it, the text is the percentage of the range.
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * Overrides `aria-valuetext`. Receives the clamped value (`null` while indeterminate), its
+     * formatted text and the range bounds.
+     */
+    getAriaValueText?: (payload: {
+        value: number | null;
+        formattedValue: string;
+        min: number;
+        max: number;
+    }) => string;
+    /** Locale of the value text. Defaults to the I18n locale. */
+    locale?: Intl.LocalesArgument;
+    /**
+     * Shows the value text on the trailing side of the header. It is always announced; this only
+     * makes it visible.
+     * @default false
+     */
+    showValue?: boolean;
+    /** Theme overrides for the root, header, label, value, track, and indicator parts. */
+    theme?: ProgressThemeProps;
+};
+export type ProgressProps = WithAttachments<WithSlot<ProgressBaseProps & {
+    /**
+     * Visible label in the header. It names the progress bar; without one the bar is named
+     * from the i18n catalog ("Progress").
+     */
+    label?: Slot;
+}, 'valueLabel', ProgressValueState>>;
+export {};

package/dist/components/Progress/progress.props.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Progress/progress.theme.d.ts

@@ -0,0 +1,129 @@
+import { type InferComponentTheme } from '../../utils/cva/index.js';
+export declare const progressTheme: {
+    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    header: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    label: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    value: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    track: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    indicator: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        color: {
+            primary: string;
+            secondary: string;
+            danger: string;
+            success: string;
+            warning: string;
+            info: string;
+            neutral: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+};
+export type ProgressTheme = typeof progressTheme;
+export type ProgressThemeProps = InferComponentTheme<ProgressTheme>;
+export declare const setProgressTheme: (theme: InferComponentTheme<{
+    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    header: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    label: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    value: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    track: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    indicator: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        color: {
+            primary: string;
+            secondary: string;
+            danger: string;
+            success: string;
+            warning: string;
+            info: string;
+            neutral: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+}>) => void;
+export declare const useProgressTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
+    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    header: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    label: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    value: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    track: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    indicator: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        color: {
+            primary: string;
+            secondary: string;
+            danger: string;
+            success: string;
+            warning: string;
+            info: string;
+            neutral: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+}>;

package/dist/components/Progress/progress.theme.js

@@ -0,0 +1,83 @@
+import { cva, setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
+const defaultProgressRoot = cva({
+    base: 'relative flex w-full flex-col',
+    variants: {
+        density: {
+            compact: 'gap-xs',
+            normal: 'gap-sm',
+            comfortable: 'gap-md'
+        }
+    },
+    defaultVariants: {
+        density: 'normal'
+    }
+});
+const defaultProgressHeader = cva({
+    base: 'flex w-full items-center justify-between gap-md'
+});
+const defaultProgressLabel = cva({
+    base: 'min-w-0 text-neutral/70',
+    variants: {
+        size: {
+            small: 'text-xs',
+            normal: 'text-sm',
+            large: 'text-base'
+        }
+    },
+    defaultVariants: {
+        size: 'normal'
+    }
+});
+const defaultProgressValue = cva({
+    base: 'ms-auto shrink-0 font-medium tabular-nums text-neutral/70',
+    variants: {
+        size: {
+            small: 'text-xs',
+            normal: 'text-sm',
+            large: 'text-base'
+        }
+    },
+    defaultVariants: {
+        size: 'normal'
+    }
+});
+const defaultProgressTrack = cva({
+    base: 'relative block w-full overflow-hidden rounded-full bg-neutral/20',
+    variants: {
+        size: {
+            small: 'h-1',
+            normal: 'h-2',
+            large: 'h-3'
+        }
+    },
+    defaultVariants: {
+        size: 'normal'
+    }
+});
+const defaultProgressIndicator = cva({
+    base: 'block h-full rounded-full transition-[width] duration-slower ease-standard motion-reduce:transition-none [html[data-entasis-reduce-motion]_&]:transition-none',
+    variants: {
+        color: {
+            primary: 'bg-primary',
+            secondary: 'bg-secondary',
+            danger: 'bg-danger',
+            success: 'bg-success',
+            warning: 'bg-warning',
+            info: 'bg-info',
+            neutral: 'bg-neutral'
+        }
+    },
+    defaultVariants: {
+        color: 'neutral'
+    }
+});
+export const progressTheme = {
+    root: defaultProgressRoot,
+    header: defaultProgressHeader,
+    label: defaultProgressLabel,
+    value: defaultProgressValue,
+    track: defaultProgressTrack,
+    indicator: defaultProgressIndicator
+};
+export const setProgressTheme = setComponentTheme('progress');
+export const useProgressTheme = useComponentTheme('progress', progressTheme);