iryx-ui 0.20.0 → 0.22.0

package/dist/component-names.d.ts

@@ -3,7 +3,7 @@
  * Consumed by the Vue plugin (global registration) and the Nuxt module
  * (auto-imports). Keep in sync with `src/components/index.ts`.
  */
-export declare const componentNames: readonly ["Accordion", "Alert", "App", "AppShell", "AspectRatio", "AuthProviders", "Avatar", "AvatarGroup", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Calendar", "Card", "ChartLegend", "Checkbox", "ColorPicker", "Combobox", "Collapsible", "CommandPalette", "Container", "ConfirmDialog", "ContextMenu", "DateField", "DatePicker", "DateRangePicker", "Dialog", "DonutChart", "Drawer", "DropdownMenu", "Editable", "EmptyState", "FileUpload", "Form", "FormField", "HoverCard", "Icon", "Input", "Kbd", "Label", "LineChart", "NavigationMenu", "NumberInput", "Menubar", "PageHeader", "Pagination", "PasswordInput", "PinInput", "Popover", "Progress", "RadioGroup", "Rating", "ScrollArea", "ScrollFade", "Select", "Separator", "Sidebar", "SignaturePad", "Skeleton", "Slider", "Sparkline", "Splitter", "Stat", "Stepper", "Switch", "Table", "Tabs", "TagsInput", "Textarea", "Toaster", "Toggle", "ToggleGroup", "TimeField", "Timeline", "Toolbar", "Tooltip", "Tree"];
+export declare const componentNames: readonly ["Accordion", "Alert", "App", "AppShell", "AspectRatio", "AuthProviders", "Avatar", "AvatarGroup", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Calendar", "Card", "Carousel", "ChartLegend", "Checkbox", "ColorPicker", "Combobox", "Collapsible", "CommandPalette", "Container", "ConfirmDialog", "ContextMenu", "DateField", "DatePicker", "DateRangePicker", "Dialog", "DonutChart", "Drawer", "DropdownMenu", "Editable", "EmptyState", "FileUpload", "Form", "FormField", "HoverCard", "Icon", "Input", "Kbd", "Label", "LineChart", "NavigationMenu", "NumberInput", "Menubar", "PageHeader", "Pagination", "PasswordInput", "PinInput", "Popover", "Progress", "RadioGroup", "Rating", "ScrollArea", "ScrollFade", "Select", "Separator", "Sidebar", "SignaturePad", "Skeleton", "Slider", "Sparkline", "Splitter", "Stat", "Stepper", "Switch", "Table", "Tabs", "TagsInput", "Textarea", "Toaster", "Toggle", "ToggleGroup", "TimeField", "Timeline", "Toolbar", "Tooltip", "Tree"];
 export type ComponentName = (typeof componentNames)[number];
 /**
  * Names of every block exported from `iryx-ui/marketing`.

package/dist/component-names.js

@@ -1,5 +1,5 @@
 //#region src/component-names.ts
-var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.AuthProviders.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Calendar.Card.ChartLegend.Checkbox.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ContextMenu.DateField.DatePicker.DateRangePicker.Dialog.DonutChart.Drawer.DropdownMenu.Editable.EmptyState.FileUpload.Form.FormField.HoverCard.Icon.Input.Kbd.Label.LineChart.NavigationMenu.NumberInput.Menubar.PageHeader.Pagination.PasswordInput.PinInput.Popover.Progress.RadioGroup.Rating.ScrollArea.ScrollFade.Select.Separator.Sidebar.SignaturePad.Skeleton.Slider.Sparkline.Splitter.Stat.Stepper.Switch.Table.Tabs.TagsInput.Textarea.Toaster.Toggle.ToggleGroup.TimeField.Timeline.Toolbar.Tooltip.Tree".split("."), t = [
+var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.AuthProviders.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Calendar.Card.Carousel.ChartLegend.Checkbox.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ContextMenu.DateField.DatePicker.DateRangePicker.Dialog.DonutChart.Drawer.DropdownMenu.Editable.EmptyState.FileUpload.Form.FormField.HoverCard.Icon.Input.Kbd.Label.LineChart.NavigationMenu.NumberInput.Menubar.PageHeader.Pagination.PasswordInput.PinInput.Popover.Progress.RadioGroup.Rating.ScrollArea.ScrollFade.Select.Separator.Sidebar.SignaturePad.Skeleton.Slider.Sparkline.Splitter.Stat.Stepper.Switch.Table.Tabs.TagsInput.Textarea.Toaster.Toggle.ToggleGroup.TimeField.Timeline.Toolbar.Tooltip.Tree".split("."), t = [
 	"BrowserFrame",
 	"FeatureCard",
 	"Hero",

package/dist/components/Carousel.js

@@ -0,0 +1,5 @@
+import e from "./Carousel.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/Carousel.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/Carousel.vue.d.ts

@@ -0,0 +1,74 @@
+import type { ClassValue } from '../class-value';
+export interface CarouselProps<Item = unknown> {
+    /** What to lay out. Each one is rendered through the default slot. */
+    items?: Item[];
+    /**
+     * How many fit across, at the widest. Below `sm` it is always one, and
+     * `'auto'` leaves the width to the slide's own content.
+     */
+    perView?: 1 | 2 | 3 | 4 | 'auto';
+    gap?: 'none' | 'sm' | 'md' | 'lg';
+    /** Show the previous and next buttons. */
+    arrows?: boolean;
+    /**
+     * Let a mouse drag the track. Touch and trackpad pan it natively either way.
+     */
+    draggable?: boolean;
+    /**
+     * How far a drag has to travel before it moves on, as a fraction of a slide.
+     * A quarter by default: enough that a nudge does not count, little enough
+     * that the track goes where it was pushed. `1` demands a whole slide.
+     */
+    dragThreshold?: number;
+    /** Show the row of dots under the track. */
+    dots?: boolean;
+    /**
+     * Accessible name for the carousel — "Customer stories", "Screenshots".
+     * A carousel with no name is a scroll region a screen reader cannot place.
+     */
+    label?: string;
+    /** Accessible names for the buttons — override for non-English sites. */
+    previousLabel?: string;
+    nextLabel?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: ClassValue;
+    /** Override classes per element, e.g. `{ dot: 'size-3' }`. */
+    ui?: {
+        root?: string;
+        track?: string;
+        item?: string;
+        viewport?: string;
+        control?: string;
+        dots?: string;
+        dot?: string;
+    };
+}
+declare const __VLS_export: <Item>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(CarouselProps<Item> & {
+        active?: number;
+    }) & {
+        "onUpdate:active"?: ((value: number) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            item: Item;
+            index: number;
+            active: boolean;
+        }) => any;
+    };
+    emit: (event: "update:active", value: number) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/Carousel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,220 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import n from "./Button.js";
+import { useScrollEdges as r } from "../composables/scroll-fade.js";
+import { carouselTheme as i } from "../theme/carousel.js";
+import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeModels as f, nextTick as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, openBlock as _, ref as v, renderList as y, renderSlot as b, unref as x, useModel as S, watch as C, withCtx as w, withModifiers as ee } from "vue";
+import { ArrowLeft01Icon as te, ArrowRight01Icon as ne } from "@hugeicons/core-free-icons";
+//#region src/components/Carousel.vue?vue&type=script&setup=true&lang.ts
+var T = ["aria-label"], E = ["aria-label"], D = ["aria-label", "data-state"], O = [
+	"aria-label",
+	"aria-current",
+	"data-state",
+	"onClick"
+], k = /*@__PURE__*/ d({
+	__name: "Carousel",
+	props: /*@__PURE__*/ f({
+		items: {},
+		perView: { default: 1 },
+		gap: {},
+		arrows: {
+			type: Boolean,
+			default: void 0
+		},
+		draggable: {
+			type: Boolean,
+			default: void 0
+		},
+		dragThreshold: { default: .25 },
+		dots: {
+			type: Boolean,
+			default: void 0
+		},
+		label: { default: "Carousel" },
+		previousLabel: { default: "Previous" },
+		nextLabel: { default: "Next" },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
+		ui: {}
+	}, {
+		active: { default: 0 },
+		activeModifiers: {}
+	}),
+	emits: ["update:active"],
+	setup(d) {
+		let f = d, k = S(d, "active"), A = e(), j = o(() => f.unstyled ?? A.unstyled), M = o(() => i({ gap: f.gap }));
+		function N(e, t) {
+			return j.value ? [f.ui?.[e], t] : M.value[e]({ class: [f.ui?.[e], t] });
+		}
+		let P = v(), { atStart: re, atEnd: ie, overflowing: ae } = r(P, v("horizontal")), oe = o(() => ({
+			none: 0,
+			sm: .5,
+			md: 1,
+			lg: 1.5
+		})[f.gap ?? "md"]);
+		function F(e) {
+			let t = oe.value * (e - 1) / e;
+			return `calc(${100 / e}% - ${t}rem)`;
+		}
+		let I = o(() => {
+			if (f.perView !== "auto") return {
+				"--iryx-carousel-item": F(f.perView),
+				"--iryx-carousel-item-sm": F(Math.min(f.perView, 2))
+			};
+		}), L = o(() => f.items?.length ?? 0), R = v(), z = o(() => R.value ?? Math.max(L.value, 1)), B;
+		function V() {
+			let e = P.value;
+			if (!e) return;
+			if (!e.clientWidth) {
+				R.value = void 0;
+				return;
+			}
+			let t = e.scrollWidth - e.clientWidth + 1, n = [...e.children].filter((n) => n.offsetLeft - e.offsetLeft <= t).length;
+			R.value = Math.max(n, 1);
+		}
+		C(P, (e) => {
+			if (B?.disconnect(), B = void 0, e && (V(), !(typeof ResizeObserver > "u"))) {
+				B = new ResizeObserver(V), B.observe(e);
+				for (let t of e.children) B.observe(t);
+			}
+		}, { immediate: !0 }), C(L, () => p(V)), g(() => B?.disconnect());
+		let H = v(), U;
+		function W(e) {
+			let t = P.value, n = t?.children[e];
+			!t || !n || (H.value = e, k.value = e, t.scrollTo({ left: n.offsetLeft - t.offsetLeft }), clearTimeout(U), U = setTimeout(() => H.value = void 0, 1e3));
+		}
+		function G(e) {
+			W(Math.min(Math.max(k.value + e, 0), z.value - 1));
+		}
+		function K() {
+			let e = P.value;
+			if (!e) return k.value;
+			let t = [...e.children], n = e.scrollLeft + e.offsetLeft;
+			return t.reduce((e, r, i) => Math.abs(r.offsetLeft - n) < Math.abs(t[e].offsetLeft - n) ? i : e, 0);
+		}
+		C(k, (e) => {
+			H.value === void 0 && e !== K() && W(e);
+		});
+		function se() {
+			if (!P.value) return;
+			V();
+			let e = Math.min(K(), z.value - 1);
+			if (H.value !== void 0) {
+				e === H.value && (H.value = void 0, clearTimeout(U));
+				return;
+			}
+			k.value = e;
+		}
+		let q = v(!1), J = 0, Y = 0, X = 0, Z = 0;
+		function ce(e) {
+			let t = P.value;
+			!(f.draggable ?? !0) || e.pointerType === "touch" || !t || (q.value = !0, Z = 0, J = e.clientX, Y = t.scrollLeft, X = k.value, t.setPointerCapture(e.pointerId), t.style.scrollBehavior = "auto");
+		}
+		function Q(e) {
+			let t = [...e.children], n = (t[1]?.offsetLeft ?? 0) - (t[0]?.offsetLeft ?? 0);
+			if (n <= 0) return k.value;
+			let r = (e.scrollLeft - Y) / n, i = Math.trunc(r), a = Math.abs(r - i) >= Math.min(Math.max(f.dragThreshold, 0), 1) ? Math.sign(r) : 0;
+			return Math.min(Math.max(X + i + a, 0), z.value - 1);
+		}
+		function le(e) {
+			let t = P.value;
+			if (!q.value || !t) return;
+			let n = e.clientX - J;
+			Z = Math.max(Z, Math.abs(n)), t.scrollLeft = Y - n;
+		}
+		function $(e) {
+			let t = P.value;
+			if (!q.value || !t) return;
+			q.value = !1, t.releasePointerCapture(e.pointerId), t.style.scrollBehavior = "";
+			let n = Q(t);
+			p(() => W(n));
+		}
+		function ue(e) {
+			Z > 4 && (e.preventDefault(), e.stopPropagation(), Z = 0);
+		}
+		function de(e) {
+			e.key === "ArrowRight" ? (e.preventDefault(), G(1)) : e.key === "ArrowLeft" && (e.preventDefault(), G(-1));
+		}
+		let fe = o(() => (f.arrows ?? !0) && ae.value), pe = o(() => (f.dots ?? !0) && z.value > 1);
+		return (e, r) => (_(), c("div", {
+			role: "group",
+			"aria-roledescription": "carousel",
+			"aria-label": f.label,
+			class: m(N("root", f.class))
+		}, [l("div", { class: m(N("viewport")) }, [l("div", {
+			ref_key: "track",
+			ref: P,
+			tabindex: "0",
+			role: "group",
+			"aria-label": f.label,
+			class: m(N("track", q.value ? "snap-none scroll-auto cursor-grabbing select-none" : f.draggable ?? !0 ? "cursor-grab" : void 0)),
+			onScroll: se,
+			onKeydown: de,
+			onPointerdown: ce,
+			onPointermove: le,
+			onPointerup: $,
+			onPointercancel: $,
+			onClickCapture: ue,
+			onDragstart: r[0] ||= ee(() => {}, ["prevent"])
+		}, [(_(!0), c(a, null, y(f.items, (t, n) => (_(), c("div", {
+			key: n,
+			role: "group",
+			"aria-roledescription": "slide",
+			"aria-label": `${n + 1} of ${L.value}`,
+			"data-state": n === k.value ? "active" : "inactive",
+			style: h(I.value),
+			class: m(N("item", f.perView === "auto" ? "w-auto" : "w-full sm:w-[var(--iryx-carousel-item-sm)] lg:w-[var(--iryx-carousel-item)]"))
+		}, [b(e.$slots, "default", {
+			item: t,
+			index: n,
+			active: n === k.value
+		})], 14, D))), 128))], 42, E), fe.value ? (_(), c(a, { key: 0 }, [l("div", { class: m(N("control", "left-2")) }, [u(n, {
+			variant: "outline",
+			size: "sm",
+			square: "",
+			"aria-label": f.previousLabel,
+			disabled: x(re),
+			onClick: r[1] ||= (e) => G(-1)
+		}, {
+			default: w(() => [u(t, {
+				icon: x(te),
+				"data-icon": ""
+			}, null, 8, ["icon"])]),
+			_: 1
+		}, 8, ["aria-label", "disabled"])], 2), l("div", { class: m(N("control", "right-2")) }, [u(n, {
+			variant: "outline",
+			size: "sm",
+			square: "",
+			"aria-label": f.nextLabel,
+			disabled: x(ie),
+			onClick: r[2] ||= (e) => G(1)
+		}, {
+			default: w(() => [u(t, {
+				icon: x(ne),
+				"data-icon": ""
+			}, null, 8, ["icon"])]),
+			_: 1
+		}, 8, ["aria-label", "disabled"])], 2)], 64)) : s("", !0)], 2), pe.value ? (_(), c("div", {
+			key: 0,
+			class: m(N("dots"))
+		}, [(_(!0), c(a, null, y(z.value, (e, t) => (_(), c("button", {
+			key: t,
+			type: "button",
+			"aria-label": `Go to slide ${t + 1}`,
+			"aria-current": t === k.value,
+			"data-state": t === k.value ? "active" : "inactive",
+			class: m(N("dot")),
+			onClick: (e) => W(t)
+		}, null, 10, O))), 128))], 2)) : s("", !0)], 10, T));
+	}
+});
+//#endregion
+export { k as default };

package/dist/components/Checkbox.vue.d.ts

@@ -1,10 +1,19 @@
 import type { CheckboxRootProps } from 'reka-ui';
 import type { ClassValue } from '../class-value';
+import type { IconLike } from '../composables/icon';
 export interface CheckboxProps extends CheckboxRootProps {
     /** Text shown beside the box. Also makes the text clickable. */
     label?: string;
     /** Secondary text under the label. */
     description?: string;
+    /**
+     * How the control is drawn. `checkbox` is a box beside its label, `card`
+     * makes the whole bordered surface the control, and `tile` centres an icon
+     * above the label.
+     */
+    variant?: 'checkbox' | 'card' | 'tile';
+    /** Shown above the label by the `tile` variant, ignored by the others. */
+    icon?: IconLike;
     size?: 'sm' | 'md' | 'lg';
     id?: string;
     /** Mark as failing validation. Taken from the enclosing `IFormField` when omitted. */
@@ -16,21 +25,29 @@ export interface CheckboxProps extends CheckboxRootProps {
     ui?: {
         wrapper?: string;
         root?: string;
+        mark?: string;
+        icon?: string;
         indicator?: string;
         content?: string;
         label?: string;
         description?: string;
     };
 }
-declare var __VLS_13: {}, __VLS_31: {}, __VLS_33: {}, __VLS_48: {};
+declare var __VLS_14: {}, __VLS_31: {}, __VLS_33: {}, __VLS_47: {}, __VLS_65: {}, __VLS_67: {}, __VLS_82: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_14) => any;
 } & {
     label?: (props: typeof __VLS_31) => any;
 } & {
     description?: (props: typeof __VLS_33) => any;
 } & {
-    default?: (props: typeof __VLS_48) => any;
+    default?: (props: typeof __VLS_47) => any;
+} & {
+    label?: (props: typeof __VLS_65) => any;
+} & {
+    description?: (props: typeof __VLS_67) => any;
+} & {
+    default?: (props: typeof __VLS_82) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<CheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean | "indeterminate") => any;

package/dist/components/Checkbox.vue_vue_type_script_setup_true_lang.js

@@ -2,16 +2,18 @@ import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
 import { useFormField as n } from "../composables/form.js";
 import { checkboxTheme as r } from "../theme/checkbox.js";
-import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, openBlock as m, renderSlot as h, toDisplayString as g, unref as _, withCtx as v } from "vue";
-import { MinusSignIcon as y, Tick02Icon as b } from "@hugeicons/core-free-icons";
-import { CheckboxIndicator as x, CheckboxRoot as S, Label as C, useForwardPropsEmits as w, useId as T } from "reka-ui";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, openBlock as m, renderSlot as h, toDisplayString as g, unref as _, useSlots as v, withCtx as y } from "vue";
+import { MinusSignIcon as b, Tick02Icon as x } from "@hugeicons/core-free-icons";
+import { CheckboxIndicator as S, CheckboxRoot as C, Label as w, useForwardPropsEmits as T, useId as E } from "reka-ui";
 //#region src/components/Checkbox.vue?vue&type=script&setup=true&lang.ts
-var E = ["id"], D = /*@__PURE__*/ d({
+var D = ["id"], O = ["id"], k = ["id"], A = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "Checkbox",
 	props: {
 		label: {},
 		description: {},
+		variant: {},
+		icon: {},
 		size: {},
 		id: {},
 		invalid: {
@@ -41,35 +43,80 @@ var E = ["id"], D = /*@__PURE__*/ d({
 		required: { type: Boolean }
 	},
 	emits: ["update:modelValue"],
-	setup(d, { emit: D }) {
-		let O = d, k = D, A = w(i(() => {
-			let { label: e, description: t, size: n, id: r, invalid: i, unstyled: a, class: o, ui: s, ...c } = O;
-			return c;
-		}), k), j = T(), M = n(), N = i(() => O.invalid ?? M?.invalid.value ?? !1), P = i(() => O.id ?? M?.id.value ?? j);
-		M && (M.id.value = P.value);
-		let F = i(() => !!(O.label || O.description)), I = e(), L = i(() => O.unstyled ?? I.unstyled), R = i(() => r({
-			size: O.size,
-			withText: F.value,
-			invalid: N.value
-		})), z = i(() => L.value ? O.ui?.wrapper : R.value.wrapper({ class: O.ui?.wrapper })), B = i(() => L.value ? [O.ui?.root, O.class] : R.value.root({ class: [O.ui?.root, O.class] })), V = i(() => L.value ? O.ui?.indicator : R.value.indicator({ class: O.ui?.indicator })), H = i(() => L.value ? O.ui?.content : R.value.content({ class: O.ui?.content })), U = i(() => L.value ? O.ui?.label : R.value.label({ class: O.ui?.label })), W = i(() => L.value ? O.ui?.description : R.value.description({ class: O.ui?.description }));
-		return (e, n) => F.value ? (m(), s("div", {
+	setup(d, { emit: A }) {
+		let j = d, M = A, N = T(i(() => {
+			let { label: e, description: t, variant: n, icon: r, size: i, id: a, invalid: o, unstyled: s, class: c, ui: l, ...u } = j;
+			return u;
+		}), M), P = v(), F = E(), I = n(), L = i(() => j.invalid ?? I?.invalid.value ?? !1), R = i(() => j.id ?? I?.id.value ?? F);
+		I && (I.id.value = R.value);
+		let z = i(() => !!(j.description || P.description)), B = i(() => !!(j.label || P.label || z.value)), V = i(() => z.value ? `${R.value}-description` : void 0), H = e(), U = i(() => j.unstyled ?? H.unstyled), W = i(() => (j.variant ?? "checkbox") !== "checkbox"), G = i(() => r({
+			variant: j.variant,
+			size: j.size,
+			withText: B.value,
+			invalid: L.value
+		})), K = i(() => U.value ? j.ui?.wrapper : G.value.wrapper({ class: j.ui?.wrapper })), q = i(() => U.value ? [j.ui?.root, j.class] : G.value.root({ class: [j.ui?.root, j.class] })), J = i(() => U.value ? j.ui?.indicator : G.value.indicator({ class: j.ui?.indicator })), Y = i(() => U.value ? j.ui?.content : G.value.content({ class: j.ui?.content })), X = i(() => U.value ? j.ui?.label : G.value.label({ class: j.ui?.label })), Z = i(() => U.value ? j.ui?.description : G.value.description({ class: j.ui?.description })), Q = i(() => U.value ? j.ui?.mark : G.value.mark({ class: j.ui?.mark })), $ = i(() => U.value ? j.ui?.icon : G.value.icon({ class: j.ui?.icon }));
+		return (e, n) => W.value ? (m(), a(_(C), f({
 			key: 0,
-			class: p(z.value)
-		}, [u(_(S), f({ id: P.value }, {
-			..._(A),
+			id: R.value
+		}, {
+			..._(N),
 			...e.$attrs
 		}, {
-			"aria-invalid": N.value || void 0,
-			"aria-describedby": O.description ? `${P.value}-description` : void 0,
-			class: B.value
+			"aria-invalid": L.value || void 0,
+			"aria-labelledby": `${R.value}-label`,
+			"aria-describedby": V.value,
+			class: [q.value, "group/item"]
 		}), {
-			default: v(() => [u(_(x), { class: p(V.value) }, {
-				default: v(() => [h(e.$slots, "default", {}, () => [O.modelValue === "indeterminate" ? (m(), a(t, {
+			default: y(() => [j.variant === "card" ? (m(), s("span", {
+				key: 0,
+				class: p(Q.value)
+			}, [u(_(S), { class: p(J.value) }, {
+				default: y(() => [h(e.$slots, "default", {}, () => [j.modelValue === "indeterminate" ? (m(), a(t, {
 					key: 0,
-					icon: _(y)
+					icon: _(b)
 				}, null, 8, ["icon"])) : (m(), a(t, {
 					key: 1,
+					icon: _(x)
+				}, null, 8, ["icon"]))])]),
+				_: 3
+			}, 8, ["class"])], 2)) : j.icon ? (m(), a(t, {
+				key: 1,
+				icon: j.icon,
+				"data-slot": "icon",
+				class: p($.value)
+			}, null, 8, ["icon", "class"])) : o("", !0), c("span", { class: p(Y.value) }, [c("span", {
+				id: `${R.value}-label`,
+				class: p(X.value)
+			}, [h(e.$slots, "label", {}, () => [l(g(j.label), 1)])], 10, D), z.value ? (m(), s("span", {
+				key: 0,
+				id: `${R.value}-description`,
+				class: p(Z.value)
+			}, [h(e.$slots, "description", {}, () => [l(g(j.description), 1)])], 10, O)) : o("", !0)], 2)]),
+			_: 3
+		}, 16, [
+			"id",
+			"aria-invalid",
+			"aria-labelledby",
+			"aria-describedby",
+			"class"
+		])) : B.value ? (m(), s("div", {
+			key: 1,
+			class: p(K.value)
+		}, [u(_(C), f({ id: R.value }, {
+			..._(N),
+			...e.$attrs
+		}, {
+			"aria-invalid": L.value || void 0,
+			"aria-describedby": V.value,
+			class: q.value
+		}), {
+			default: y(() => [u(_(S), { class: p(J.value) }, {
+				default: y(() => [h(e.$slots, "default", {}, () => [j.modelValue === "indeterminate" ? (m(), a(t, {
+					key: 0,
 					icon: _(b)
+				}, null, 8, ["icon"])) : (m(), a(t, {
+					key: 1,
+					icon: _(x)
 				}, null, 8, ["icon"]))])]),
 				_: 3
 			}, 8, ["class"])]),
@@ -79,33 +126,33 @@ var E = ["id"], D = /*@__PURE__*/ d({
 			"aria-invalid",
 			"aria-describedby",
 			"class"
-		]), c("div", { class: p(H.value) }, [u(_(C), {
-			for: P.value,
-			class: p(U.value)
+		]), c("div", { class: p(Y.value) }, [u(_(w), {
+			for: R.value,
+			class: p(X.value)
 		}, {
-			default: v(() => [h(e.$slots, "label", {}, () => [l(g(O.label), 1)])]),
+			default: y(() => [h(e.$slots, "label", {}, () => [l(g(j.label), 1)])]),
 			_: 3
-		}, 8, ["for", "class"]), O.description || e.$slots.description ? (m(), s("p", {
+		}, 8, ["for", "class"]), z.value ? (m(), s("p", {
 			key: 0,
-			id: `${P.value}-description`,
-			class: p(W.value)
-		}, [h(e.$slots, "description", {}, () => [l(g(O.description), 1)])], 10, E)) : o("", !0)], 2)], 2)) : (m(), a(_(S), f({
-			key: 1,
-			id: P.value
+			id: `${R.value}-description`,
+			class: p(Z.value)
+		}, [h(e.$slots, "description", {}, () => [l(g(j.description), 1)])], 10, k)) : o("", !0)], 2)], 2)) : (m(), a(_(C), f({
+			key: 2,
+			id: R.value
 		}, {
-			..._(A),
+			..._(N),
 			...e.$attrs
 		}, {
-			"aria-invalid": N.value || void 0,
-			class: B.value
+			"aria-invalid": L.value || void 0,
+			class: q.value
 		}), {
-			default: v(() => [u(_(x), { class: p(V.value) }, {
-				default: v(() => [h(e.$slots, "default", {}, () => [O.modelValue === "indeterminate" ? (m(), a(t, {
+			default: y(() => [u(_(S), { class: p(J.value) }, {
+				default: y(() => [h(e.$slots, "default", {}, () => [j.modelValue === "indeterminate" ? (m(), a(t, {
 					key: 0,
-					icon: _(y)
+					icon: _(b)
 				}, null, 8, ["icon"])) : (m(), a(t, {
 					key: 1,
-					icon: _(b)
+					icon: _(x)
 				}, null, 8, ["icon"]))])]),
 				_: 3
 			}, 8, ["class"])]),
@@ -118,4 +165,4 @@ var E = ["id"], D = /*@__PURE__*/ d({
 	}
 });
 //#endregion
-export { D as default };
+export { A as default };

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

@@ -11,6 +11,18 @@ export interface ProgressProps {
     /** Current value. `null` (or `indeterminate`) means unknown duration. */
     modelValue?: number | null;
     max?: number;
+    /**
+     * `linear` is a bar, `circle` a ring with the value in the middle. A ring
+     * ignores `segments` — a broken-up ring is a donut chart, and `IDonutChart`
+     * is the component for that.
+     */
+    shape?: 'linear' | 'circle';
+    /**
+     * How many degrees of the ring the track covers — `180` is a half circle,
+     * `270` a gauge. The arc is centred at the top, so the gap sits at the
+     * bottom. Circles only, and ignored by the bar.
+     */
+    angle?: number;
     variant?: ProgressVariant;
     /**
      * Break the bar into runs that share one track — storage by file type, a
@@ -46,17 +58,31 @@ export interface ProgressProps {
         legendItem?: string;
         legendSwatch?: string;
         legendValue?: string;
+        ring?: string;
+        ringTrack?: string;
+        ringIndicator?: string;
+        ringContent?: string;
+        ringValue?: string;
+        ringLabel?: string;
     };
 }
-declare var __VLS_1: {}, __VLS_3: {
+declare var __VLS_13: {
+    value: number | null;
+    percent: number;
+    formatted: string;
+}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {
     value: number | null;
     percent: number;
     formatted: string;
 };
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_1) => any;
+    value?: (props: typeof __VLS_13) => any;
+} & {
+    label?: (props: typeof __VLS_15) => any;
+} & {
+    label?: (props: typeof __VLS_17) => any;
 } & {
-    value?: (props: typeof __VLS_3) => any;
+    value?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ProgressProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressProps> & Readonly<{}>, {
     unstyled: boolean;