@k8ordo/ui 2.0.0 → 2.1.0

package/dist/components/data-display/tree/tree.mjs

@@ -0,0 +1,151 @@
+"use client";
+import { ChevronIcon } from "../../icons/lucide.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { readWritingMode } from "../../../hooks/writing-mode/index.mjs";
+import tree_module_default from "./tree.module.mjs";
+import { clsx } from "clsx";
+import { useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/data-display/tree/tree.tsx
+const visibleItemsOf = (items, expandedIds, parentId = null) => items.flatMap((item) => [{
+	item,
+	parentId
+}, ...item.children !== void 0 && expandedIds.includes(item.id) ? visibleItemsOf(item.children, expandedIds, item.id) : []]);
+const hasChildren = (item) => item.children !== void 0 && item.children.length > 0;
+const directionOf = (key, isVertical) => {
+	return (isVertical ? {
+		ArrowLeft: "next",
+		ArrowRight: "previous",
+		ArrowDown: "expand",
+		ArrowUp: "collapse"
+	} : {
+		ArrowDown: "next",
+		ArrowUp: "previous",
+		ArrowRight: "expand",
+		ArrowLeft: "collapse"
+	})[key];
+};
+const NONE = [];
+const Tree = ({ label, items, expandedIds, defaultExpandedIds, onExpandedChange, selectedId, defaultSelectedId = null, onChange, ...rest }) => {
+	const baseId = useId();
+	const [expanded, setExpanded] = useControllableState({
+		value: expandedIds,
+		defaultValue: defaultExpandedIds ?? NONE,
+		onChange: onExpandedChange
+	});
+	const [selected, setSelected] = useControllableState({
+		value: selectedId,
+		defaultValue: defaultSelectedId,
+		onChange: (id) => {
+			if (id !== null) onChange?.(id);
+		}
+	});
+	const visible = visibleItemsOf(items, expanded);
+	const entryById = new Map(visible.map((entry) => [entry.item.id, entry]));
+	const [focusedId, setFocusedId] = useState(null);
+	const tabbableId = [focusedId, selected].find((id) => id !== null && entryById.has(id)) ?? visible[0]?.item.id;
+	const elements = useRef(/* @__PURE__ */ new Map());
+	const focus = (id) => {
+		if (id === void 0) return;
+		setFocusedId(id);
+		elements.current.get(id)?.focus();
+	};
+	const toggle = (id) => {
+		setExpanded((previous) => previous.includes(id) ? previous.filter((value) => value !== id) : [...previous, id]);
+	};
+	const typeahead = (from, character) => {
+		const lower = character.toLowerCase();
+		return [...visible.slice(from + 1), ...visible.slice(0, from + 1)].find(({ item }) => item.label.toLowerCase().startsWith(lower))?.item.id;
+	};
+	const onKeyDown = (event, entry) => {
+		const index = visible.indexOf(entry);
+		const { item } = entry;
+		const direction = directionOf(event.key, readWritingMode(event.currentTarget) === "vertical");
+		const isExpanded = expanded.includes(item.id);
+		if (direction === "next") focus(visible[index + 1]?.item.id);
+		else if (direction === "previous") focus(visible[index - 1]?.item.id);
+		else if (direction === "expand") {
+			if (!hasChildren(item)) return;
+			if (isExpanded) focus(item.children?.[0]?.id);
+			else toggle(item.id);
+		} else if (direction === "collapse") {
+			if (hasChildren(item) && isExpanded) toggle(item.id);
+			else focus(entry.parentId ?? void 0);
+		} else if (event.key === "Home") focus(visible[0]?.item.id);
+		else if (event.key === "End") focus(visible.at(-1)?.item.id);
+		else if (event.key === "Enter" || event.key === " ") setSelected(item.id);
+		else if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) focus(typeahead(index, event.key));
+		else return;
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	const renderItems = (level, depth) => level.map((item) => {
+		const entry = entryById.get(item.id);
+		const isParent = hasChildren(item);
+		const isExpanded = isParent && expanded.includes(item.id);
+		const isSelected = selected === item.id;
+		const labelId = `${baseId}-${item.id}`;
+		return /* @__PURE__ */ jsxs("li", {
+			"aria-expanded": isParent ? isExpanded : void 0,
+			"aria-labelledby": labelId,
+			"aria-selected": isSelected,
+			className: tree_module_default.item,
+			onClick: (event) => {
+				event.stopPropagation();
+				setSelected(item.id);
+				focus(item.id);
+				if (isParent) toggle(item.id);
+			},
+			onFocus: (event) => {
+				if (event.target === event.currentTarget) setFocusedId(item.id);
+			},
+			onKeyDown: (event) => {
+				if (entry !== void 0 && event.target === event.currentTarget) onKeyDown(event, entry);
+			},
+			ref: (element) => {
+				if (element === null) {
+					elements.current.delete(item.id);
+					return;
+				}
+				elements.current.set(item.id, element);
+			},
+			role: "treeitem",
+			tabIndex: item.id === tabbableId ? 0 : -1,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: clsx(tree_module_default.row, isSelected ? tree_module_default.selected : tree_module_default.unselected),
+				style: { paddingInlineStart: `${String(depth * .75 + .25)}rem` },
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: clsx(tree_module_default.chevron, !isParent && tree_module_default.leaf, isExpanded && tree_module_default.expanded),
+						children: /* @__PURE__ */ jsx(ChevronIcon, {
+							direction: "right",
+							size: "sm"
+						})
+					}),
+					item.icon === void 0 ? null : /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: tree_module_default.icon,
+						children: item.icon
+					}),
+					/* @__PURE__ */ jsx("span", {
+						id: labelId,
+						children: item.label
+					})
+				]
+			}), isExpanded && item.children !== void 0 ? /* @__PURE__ */ jsx("ul", {
+				role: "group",
+				children: renderItems(item.children, depth + 1)
+			}) : null]
+		}, item.id);
+	});
+	return /* @__PURE__ */ jsx("ul", {
+		...rest,
+		"aria-label": label,
+		className: tree_module_default.root,
+		role: "tree",
+		children: renderItems(items, 0)
+	});
+};
+//#endregion
+export { Tree };

package/dist/components/data-display/tree/tree.module.mjs

@@ -0,0 +1,15 @@
+import './tree.css';
+//#region src/components/data-display/tree/tree.module.css
+var tree_module_default = {
+	"chevron": "bAFyoa_chevron",
+	"expanded": "bAFyoa_expanded",
+	"icon": "bAFyoa_icon",
+	"item": "bAFyoa_item",
+	"leaf": "bAFyoa_leaf",
+	"root": "bAFyoa_root",
+	"row": "bAFyoa_row",
+	"selected": "bAFyoa_selected",
+	"unselected": "bAFyoa_unselected"
+};
+//#endregion
+export { tree_module_default as default };

package/dist/components/feedback/alert/alert.css

@@ -0,0 +1,42 @@
+@layer properties, theme, base;
+
+@layer components {
+  .Lh64DG_root {
+    align-items: center;
+    gap: calc(var(--spacing) * 3);
+    border-radius: var(--radius-lg);
+    padding: calc(var(--spacing) * 4);
+    display: flex;
+  }
+
+  .Lh64DG_icon {
+    flex-shrink: 0;
+  }
+
+  .Lh64DG_body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .Lh64DG_message {
+    font-weight: var(--font-weight-bold);
+  }
+
+  .Lh64DG_inlineAction {
+    margin-left: calc(var(--spacing) * 1);
+  }
+
+  .Lh64DG_listItem:not(:last-child) {
+    margin-block-end: calc(var(--spacing) * 1);
+  }
+
+  .Lh64DG_listAction {
+    margin-top: calc(var(--spacing) * 1);
+  }
+
+  .Lh64DG_close {
+    flex-shrink: 0;
+  }
+}
+
+@layer utilities;

package/dist/components/feedback/alert/alert.d.mts

@@ -1,7 +1,7 @@
 import { Status } from "../../../types/variables.mjs";
 import { FC, HTMLAttributes, ReactNode } from "react";
 //#region src/components/feedback/alert/alert.d.ts
-type AlertAction = {
+export type AlertAction = {
   label: string;
   renderItem: (props: {
     children: ReactNode;
@@ -14,6 +14,5 @@ type Props = {
   onClose?: () => void;
   closeLabel?: string;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role' | 'className' | 'style'>;
-declare const Alert: FC<Props>;
-//#endregion
-export { Alert, AlertAction };
+export declare const Alert: FC<Props>;
+//#endregion

package/dist/components/feedback/alert/alert.mjs

@@ -1,61 +1,58 @@
-"use client";
-import { cn } from "../../../helpers/cn.mjs";
-import { useMessages } from "../../../i18n/context.mjs";
-import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
+import sr_only_module_default from "../../_internal/sr-only.module.mjs";
 import { AlertIcon, CloseIcon } from "../../icons/lucide.mjs";
+import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import high_contrast_module_default from "../../_internal/high-contrast.module.mjs";
+import { STATUS_ICON, STATUS_MESSAGE_KEY, STATUS_SURFACE } from "../../_internal/status-tone.mjs";
+import alert_module_default from "./alert.module.mjs";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/feedback/alert/alert.tsx
-const STATUS_MESSAGE_KEY = {
-	success: "alertSuccess",
-	info: "alertInfo",
-	warning: "alertWarning",
-	error: "alertError"
-};
 const Alert = ({ tone, message, action, onClose, closeLabel, ...rest }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const actionNode = action ? action.renderItem({ children: action.label }) : null;
 	const inlineAction = action ? /* @__PURE__ */ jsx("span", {
-		className: "ml-1",
+		className: alert_module_default.inlineAction,
 		children: actionNode
 	}) : null;
 	let messageContent;
 	if (Array.isArray(message) && message.length > 1) {
-		const list = /* @__PURE__ */ jsx("ul", {
-			className: "space-y-1",
-			children: message.map((msg) => /* @__PURE__ */ jsx("li", { children: msg }, msg))
-		});
+		const list = /* @__PURE__ */ jsx("ul", { children: message.map((msg) => /* @__PURE__ */ jsx("li", {
+			className: alert_module_default.listItem,
+			children: msg
+		}, msg)) });
 		messageContent = action ? /* @__PURE__ */ jsxs("div", { children: [list, /* @__PURE__ */ jsx("div", {
-			className: "mt-1",
+			className: alert_module_default.listAction,
 			children: actionNode
 		})] }) : list;
 	} else {
 		const text = Array.isArray(message) ? message[0] : message;
 		messageContent = /* @__PURE__ */ jsxs("p", {
-			className: "font-bold",
+			className: alert_module_default.message,
 			children: [text, inlineAction]
 		});
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
-		className: cn("flex items-center gap-3 rounded-lg p-4", tone === "success" && "bg-bg-success", tone === "info" && "bg-bg-info", tone === "warning" && "bg-bg-warning", tone === "error" && "bg-bg-error"),
+		className: clsx(alert_module_default.root, high_contrast_module_default.edge, STATUS_SURFACE[tone]),
 		role: tone === "error" || tone === "warning" ? "alert" : "status",
 		children: [
 			/* @__PURE__ */ jsxs("span", {
-				className: cn("shrink-0", tone === "success" && "text-fg-success", tone === "info" && "text-fg-info", tone === "warning" && "text-fg-warning", tone === "error" && "text-fg-error"),
+				className: clsx(alert_module_default.icon, STATUS_ICON[tone]),
 				children: [/* @__PURE__ */ jsx(AlertIcon, {
 					size: "md",
 					status: tone
 				}), /* @__PURE__ */ jsx("span", {
-					className: "sr-only",
+					className: sr_only_module_default.srOnly,
 					children: messages[STATUS_MESSAGE_KEY[tone]]
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "min-w-0 flex-1",
+				className: alert_module_default.body,
 				children: messageContent
 			}),
 			onClose ? /* @__PURE__ */ jsx("span", {
-				className: "shrink-0",
+				className: alert_module_default.close,
 				children: /* @__PURE__ */ jsx(IconButton, {
 					label: closeLabel ?? messages.close,
 					onClick: onClose,

package/dist/components/feedback/alert/alert.module.mjs

@@ -0,0 +1,14 @@
+import './alert.css';
+//#region src/components/feedback/alert/alert.module.css
+var alert_module_default = {
+	"body": "Lh64DG_body",
+	"close": "Lh64DG_close",
+	"icon": "Lh64DG_icon",
+	"inlineAction": "Lh64DG_inlineAction",
+	"listAction": "Lh64DG_listAction",
+	"listItem": "Lh64DG_listItem",
+	"message": "Lh64DG_message",
+	"root": "Lh64DG_root"
+};
+//#endregion
+export { alert_module_default as default };

package/dist/components/feedback/callout/callout.css

@@ -0,0 +1,38 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._5Dg1eq_root {
+    align-items: flex-start;
+    gap: calc(var(--spacing) * 3);
+    border-radius: var(--radius-lg);
+    padding: calc(var(--spacing) * 4);
+    display: flex;
+  }
+
+  ._5Dg1eq_icon {
+    flex-shrink: 0;
+    align-items: center;
+    height: 1lh;
+    display: flex;
+  }
+
+  ._5Dg1eq_body {
+    gap: calc(var(--spacing) * 1);
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+  }
+
+  ._5Dg1eq_label {
+    font-weight: var(--font-weight-bold);
+  }
+
+  ._5Dg1eq_content {
+    gap: calc(var(--spacing) * 2);
+    flex-direction: column;
+    display: flex;
+  }
+}
+
+@layer utilities;

package/dist/components/feedback/callout/callout.d.mts

@@ -0,0 +1,10 @@
+import { Status } from "../../../types/variables.mjs";
+import { FC, HTMLAttributes, ReactNode } from "react";
+//#region src/components/feedback/callout/callout.d.ts
+type Props = {
+  tone: Status;
+  label?: string;
+  children: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'className' | 'style'>;
+export declare const Callout: FC<Props>;
+//#endregion

package/dist/components/feedback/callout/callout.mjs

@@ -0,0 +1,38 @@
+import { getMessages } from "../../../i18n/current.mjs";
+import sr_only_module_default from "../../_internal/sr-only.module.mjs";
+import { AlertIcon } from "../../icons/lucide.mjs";
+import high_contrast_module_default from "../../_internal/high-contrast.module.mjs";
+import { STATUS_ICON, STATUS_MESSAGE_KEY, STATUS_SURFACE } from "../../_internal/status-tone.mjs";
+import callout_module_default from "./callout.module.mjs";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/feedback/callout/callout.tsx
+const Callout = ({ tone, label, children, ...rest }) => {
+	const messages = getMessages();
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		className: clsx(callout_module_default.root, high_contrast_module_default.edge, STATUS_SURFACE[tone]),
+		role: "note",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: clsx(callout_module_default.icon, STATUS_ICON[tone]),
+			children: [/* @__PURE__ */ jsx(AlertIcon, {
+				size: "md",
+				status: tone
+			}), /* @__PURE__ */ jsx("span", {
+				className: sr_only_module_default.srOnly,
+				children: messages[STATUS_MESSAGE_KEY[tone]]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: callout_module_default.body,
+			children: [label === void 0 ? null : /* @__PURE__ */ jsx("p", {
+				className: callout_module_default.label,
+				children: label
+			}), /* @__PURE__ */ jsx("div", {
+				className: callout_module_default.content,
+				children
+			})]
+		})]
+	});
+};
+//#endregion
+export { Callout };

package/dist/components/feedback/callout/callout.module.mjs

@@ -0,0 +1,11 @@
+import './callout.css';
+//#region src/components/feedback/callout/callout.module.css
+var callout_module_default = {
+	"body": "_5Dg1eq_body",
+	"content": "_5Dg1eq_content",
+	"icon": "_5Dg1eq_icon",
+	"label": "_5Dg1eq_label",
+	"root": "_5Dg1eq_root"
+};
+//#endregion
+export { callout_module_default as default };

package/dist/components/feedback/callout/index.d.mts

@@ -0,0 +1,2 @@
+import { Callout } from "./callout.mjs";
+export { Callout };

package/dist/components/feedback/callout/index.mjs

@@ -0,0 +1,2 @@
+import { Callout } from "./callout.mjs";
+export { Callout };

package/dist/components/feedback/empty-state/empty-state.css

@@ -0,0 +1,36 @@
+@layer properties, theme, base;
+
+@layer components {
+  .NUUTcq_root {
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 10);
+    text-align: center;
+    flex-direction: column;
+    align-items: center;
+    display: flex;
+  }
+
+  .NUUTcq_icon {
+    margin-bottom: calc(var(--spacing) * 4);
+    color: var(--color-fg-subtle);
+  }
+
+  .NUUTcq_title {
+    color: var(--color-fg-base);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .NUUTcq_description {
+    margin-top: calc(var(--spacing) * 2);
+    max-width: 65ch;
+    color: var(--color-fg-mute);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-relaxed);
+  }
+
+  .NUUTcq_action {
+    margin-top: calc(var(--spacing) * 6);
+  }
+}
+
+@layer utilities;

package/dist/components/feedback/empty-state/empty-state.d.mts

@@ -0,0 +1,10 @@
+import { FC, HTMLAttributes, ReactNode } from "react";
+//#region src/components/feedback/empty-state/empty-state.d.ts
+type Props = {
+  title: string;
+  description?: ReactNode;
+  icon?: ReactNode;
+  action?: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style' | 'title'>;
+export declare const EmptyState: FC<Props>;
+//#endregion

package/dist/components/feedback/empty-state/empty-state.mjs

@@ -0,0 +1,27 @@
+import empty_state_module_default from "./empty-state.module.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/feedback/empty-state/empty-state.tsx
+const EmptyState = ({ title, description, icon, action, ...rest }) => /* @__PURE__ */ jsxs("div", {
+	...rest,
+	className: empty_state_module_default.root,
+	children: [
+		icon === void 0 ? null : /* @__PURE__ */ jsx("div", {
+			className: empty_state_module_default.icon,
+			children: icon
+		}),
+		/* @__PURE__ */ jsx("p", {
+			className: empty_state_module_default.title,
+			children: title
+		}),
+		description === void 0 ? null : /* @__PURE__ */ jsx("div", {
+			className: empty_state_module_default.description,
+			children: description
+		}),
+		action === void 0 ? null : /* @__PURE__ */ jsx("div", {
+			className: empty_state_module_default.action,
+			children: action
+		})
+	]
+});
+//#endregion
+export { EmptyState };

package/dist/components/feedback/empty-state/empty-state.module.mjs

@@ -0,0 +1,11 @@
+import './empty-state.css';
+//#region src/components/feedback/empty-state/empty-state.module.css
+var empty_state_module_default = {
+	"action": "NUUTcq_action",
+	"description": "NUUTcq_description",
+	"icon": "NUUTcq_icon",
+	"root": "NUUTcq_root",
+	"title": "NUUTcq_title"
+};
+//#endregion
+export { empty_state_module_default as default };

package/dist/components/feedback/empty-state/index.d.mts

@@ -0,0 +1,2 @@
+import { EmptyState } from "./empty-state.mjs";
+export { EmptyState };

package/dist/components/feedback/empty-state/index.mjs

@@ -0,0 +1,2 @@
+import { EmptyState } from "./empty-state.mjs";
+export { EmptyState };

package/dist/components/feedback/progress/progress.css

@@ -0,0 +1,78 @@
+@layer properties, theme, base;
+
+@layer components {
+  .YyzTwG_track {
+    border-radius: var(--radius-full);
+    background-color: var(--color-bg-emphasize);
+    block-size: calc(var(--spacing) * 4);
+    inline-size: 100%;
+
+    @container style(--writing: vertical) {
+      inline-size: calc(var(--spacing) * 48);
+    }
+  }
+
+  .YyzTwG_indeterminateTrack {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .YyzTwG_fill {
+    border-radius: var(--radius-full);
+    background-color: var(--color-primary-bg);
+    block-size: 100%;
+    inline-size: var(--progress-fill);
+    transition-property: inline-size;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-in-out);
+
+    @media (forced-colors: active) {
+      background-color: var(--color-system-highlight);
+    }
+  }
+
+  .YyzTwG_indeterminate {
+    border-radius: var(--radius-full);
+    background-color: var(--color-primary-bg);
+    position: absolute;
+    inset-block: 0;
+
+    @media (prefers-reduced-motion: no-preference) {
+      inline-size: 40%;
+      animation-name: YyzTwG_slide;
+      animation-duration: 1.4s;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      animation-name: YyzTwG_pulse;
+      animation-duration: var(--duration-pulse);
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+      inset-inline: 0;
+    }
+
+    @media (forced-colors: active) {
+      background-color: var(--color-system-highlight);
+    }
+  }
+
+  @keyframes YyzTwG_slide {
+    from {
+      inset-inline-start: -40%;
+    }
+
+    to {
+      inset-inline-start: 100%;
+    }
+  }
+
+  @keyframes YyzTwG_pulse {
+    50% {
+      opacity: .4;
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/feedback/progress/progress.d.mts

@@ -1,11 +1,11 @@
 import { FC, HTMLAttributes } from "react";
 //#region src/components/feedback/progress/progress.d.ts
 type Props = {
-  value: number;
-  max: number;
+  /** 省略すると、進み具合が分からない表示（indeterminate）になる。 */
+  value?: number;
+  max?: number;
   min?: number;
   label?: string;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'>;
-declare const Progress: FC<Props>;
-//#endregion
-export { Progress };
+export declare const Progress: FC<Props>;
+//#endregion

package/dist/components/feedback/progress/progress.mjs

@@ -1,18 +1,32 @@
+import { getMessages } from "../../../i18n/current.mjs";
+import high_contrast_module_default from "../../_internal/high-contrast.module.mjs";
 import { toPrecision } from "../../../internal/to-precision.mjs";
+import progress_module_default from "./progress.module.mjs";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/feedback/progress/progress.tsx
-const Progress = ({ value, max, min = 0, label, ...rest }) => {
+const Progress = ({ value, max = 100, min = 0, label, ...rest }) => {
+	const messages = getMessages();
+	if (value === void 0) return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: clsx(progress_module_default.track, progress_module_default.indeterminateTrack, high_contrast_module_default.edge),
+		children: /* @__PURE__ */ jsx("div", {
+			"aria-label": label ?? messages.loading,
+			className: progress_module_default.indeterminate,
+			role: "progressbar"
+		})
+	});
 	const percentage = toPrecision((value - min) / (max - min) * 100);
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
-		className: "bg-bg-emphasize vertical:inline-48 rounded-full block-4 inline-full",
+		className: clsx(progress_module_default.track, high_contrast_module_default.edge),
 		style: { "--progress-fill": `${percentage.toString()}%` },
 		children: /* @__PURE__ */ jsx("div", {
 			"aria-label": label ?? `${percentage.toString()}%`,
 			"aria-valuemax": max,
 			"aria-valuemin": min,
 			"aria-valuenow": value,
-			className: "bg-primary-bg rounded-full transition-[inline-size] block-full inline-(--progress-fill)",
+			className: progress_module_default.fill,
 			role: "progressbar"
 		})
 	});