@k8ordo/ui 2.0.0 → 2.2.0

package/dist/components/form/number-field/number-field.css

@@ -0,0 +1,122 @@
+@layer properties, theme, base;
+
+@layer components {
+  .iUg6Ca_root {
+    height: calc(var(--spacing) * 12);
+    justify-content: space-between;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    border-radius: var(--radius-xl);
+    border-width: 1px;
+    border-color: var(--color-border-base);
+    background-color: var(--color-bg-base);
+    width: 100%;
+    display: flex;
+    position: relative;
+
+    @container style(--writing: vertical) {
+      height: auto;
+      width: calc(var(--spacing) * 12);
+    }
+  }
+
+  .iUg6Ca_root:focus-within {
+    box-shadow: var(--shadow-ring-info);
+    border-color: #0000;
+    outline-style: none;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .iUg6Ca_root:has(:disabled) {
+    cursor: not-allowed;
+    border-color: var(--color-border-mute);
+    background-color: var(--color-bg-mute);
+  }
+
+  .iUg6Ca_root:has([aria-invalid="true"]) {
+    border-color: var(--color-border-error);
+  }
+
+  .iUg6Ca_input {
+    background-color: #0000;
+    flex-grow: 1;
+    width: 100%;
+    height: 100%;
+    padding-inline-start: calc(var(--spacing) * 3);
+    padding-inline-end: calc(var(--spacing) * 8);
+  }
+
+  .iUg6Ca_input:focus-visible {
+    outline-style: none;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .iUg6Ca_input:disabled, .iUg6Ca_input:read-only {
+    cursor: not-allowed;
+  }
+
+  .iUg6Ca_steppers {
+    height: 100%;
+    padding-block: var(--spacing);
+    flex-direction: column;
+    display: flex;
+    position: absolute;
+    inset-inline-end: var(--spacing);
+
+    @container style(--writing: vertical) {
+      inset-inline-end: auto;
+      bottom: var(--spacing);
+      width: 100%;
+      height: auto;
+      padding-inline: var(--spacing);
+      flex-direction: row;
+      padding-block: 0;
+    }
+  }
+
+  .iUg6Ca_step {
+    width: calc(var(--spacing) * 6);
+    border-radius: var(--radius-md);
+    color: var(--color-fg-mute);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    flex-grow: 1;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+
+    @container style(--writing: vertical) {
+      height: calc(var(--spacing) * 6);
+      width: auto;
+    }
+  }
+
+  @media (hover: hover) {
+    .iUg6Ca_step:hover {
+      background-color: var(--color-bg-mute);
+      color: var(--color-fg-base);
+    }
+  }
+
+  .iUg6Ca_step:disabled {
+    cursor: not-allowed;
+    color: var(--color-fg-mute);
+  }
+
+  @media (hover: hover) {
+    .iUg6Ca_step:hover:disabled {
+      background-color: #0000;
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/form/number-field/number-field.d.mts

@@ -2,24 +2,25 @@ import { FC, InputHTMLAttributes, Ref } from "react";
 //#region src/components/form/number-field/number-field.d.ts
 type BaseProps = {
   invalid?: boolean;
+  /** 小数の桁数。省略すると step の桁数に合わせ、step が 'any' なら丸めない */
   precision?: number;
   ref?: Ref<HTMLInputElement>;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'className' | 'style' | 'value' | 'onChange' | 'defaultValue' | 'children' | 'step' | 'min' | 'max'> & {
-  step?: number;
-  min?: number;
-  max?: number;
+  step?: number | 'any';
+  min?: number | string;
+  max?: number | string;
 };
 type ControlledProps = {
-  value: number;
-  onChange: (value: number) => void;
+  value: number | null;
+  onChange: (value: number | null) => void;
   defaultValue?: never;
 };
 type UncontrolledProps = {
-  defaultValue?: number;
+  defaultValue?: number | string;
   value?: never;
-  onChange?: (value: number) => void;
+  onChange?: (value: number | null) => void;
 };
 type Props = BaseProps & (ControlledProps | UncontrolledProps);
-declare const NumberField: FC<Props>;
+export declare const NumberField: FC<Props>;
 //#endregion
-export { NumberField };
+export {};

package/dist/components/form/number-field/number-field.mjs

@@ -1,107 +1,179 @@
 "use client";
-import { FOCUS_RING_WITHIN } from "../../_internal/focus-ring.mjs";
-import { cn } from "../../../helpers/cn.mjs";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
+import sr_only_module_default from "../../_internal/sr-only.module.mjs";
+import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
 import { chain } from "../../../helpers/chain.mjs";
 import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
-import { ChevronIcon } from "../../icons/lucide.mjs";
 import { toPrecision } from "../../../internal/to-precision.mjs";
 import { clamp } from "../../../internal/clamp.mjs";
 import { cast } from "./cast.mjs";
-import { useState } from "react";
+import number_field_module_default from "./number-field.module.mjs";
+import { useEffect, useEffectEvent, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useFormStatus } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/number-field/number-field.tsx
-const NumberField = ({ invalid = false, disabled = false, required = false, value, defaultValue, onChange, onBlur, onKeyDown, ref, step = 1, precision = 0, max = 9007199254740991, min = -9007199254740991, ...rest }) => {
-	const messages = useMessages();
+const format = (value, precision) => {
+	if (value === null) return "";
+	return precision === void 0 ? String(value) : value.toFixed(precision);
+};
+const toBound = (value, fallback) => {
+	const bound = value === void 0 || value === "" ? NaN : Number(value);
+	return Number.isFinite(bound) ? bound : fallback;
+};
+const decimalsOf = (step) => String(step).split(".")[1]?.length ?? 0;
+const rangeErrorOf = (value, min, max, messages) => {
+	if (value !== null && value < min) return messages.numberFieldRangeUnderflow.replace("{min}", String(min));
+	if (value !== null && value > max) return messages.numberFieldRangeOverflow.replace("{max}", String(max));
+	return "";
+};
+const ownRangeErrors = /* @__PURE__ */ new WeakMap();
+const applyRangeError = (input, error) => {
+	if (error !== "") input.setCustomValidity(error);
+	else if (input.validationMessage === ownRangeErrors.get(input)) input.setCustomValidity("");
+	ownRangeErrors.set(input, error);
+};
+const NumberField = ({ invalid = false, disabled = false, readOnly = false, required = false, value, defaultValue, onChange, onBlur, onKeyDown, ref, step = 1, precision: precisionProp, max: maxProp, min: minProp, onInput, ...rest }) => {
+	const messages = getMessages();
+	const inputRef = useRef(null);
+	const mergedRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);
+	const isControlled = value !== void 0;
+	const max = toBound(maxProp, Number.MAX_SAFE_INTEGER);
+	const min = toBound(minProp, Number.MIN_SAFE_INTEGER);
+	const stepSize = step === "any" ? 1 : step;
+	const precision = precisionProp ?? (step === "any" ? void 0 : decimalsOf(step));
+	const initialValue = typeof defaultValue === "string" ? cast(defaultValue, precision) : defaultValue ?? null;
 	const [currentValue, setCurrentValue] = useControllableState({
 		value,
-		defaultValue: defaultValue ?? 0,
+		defaultValue: initialValue,
 		onChange
 	});
-	const [displayValue, setDisplayValue] = useState(() => currentValue.toFixed(precision));
-	const [prevValue, setPrevValue] = useState(currentValue);
+	const reportRange = (input, text) => {
+		applyRangeError(input, rangeErrorOf(cast(text, precision), min, max, messages));
+	};
+	const [displayValue, setDisplayValue] = useState(() => format(currentValue, precision));
+	const [shownValue, setShownValue] = useState(currentValue);
 	const { pending } = useFormStatus();
-	if (currentValue !== prevValue) {
-		setDisplayValue(currentValue.toFixed(precision));
-		setPrevValue(currentValue);
+	const readOnlyResolved = readOnly || pending;
+	if (isControlled && currentValue !== shownValue) {
+		setDisplayValue(format(currentValue, precision));
+		setShownValue(currentValue);
 	}
-	const handleChange = (newValue) => {
-		setCurrentValue(newValue);
+	useLayoutEffect(() => {
+		const input = inputRef.current;
+		if (input === null) return;
+		applyRangeError(input, rangeErrorOf(cast(isControlled ? displayValue : input.value, precision), min, max, messages));
+	}, [
+		isControlled,
+		displayValue,
+		precision,
+		min,
+		max,
+		messages
+	]);
+	const handleReset = useEffectEvent(() => {
+		if (!isControlled) setCurrentValue(initialValue);
+	});
+	const handleRestored = useEffectEvent(() => {
+		const input = inputRef.current;
+		if (input !== null) reportRange(input, input.value);
+	});
+	useEffect(() => {
+		const form = inputRef.current?.form;
+		if (!form) return;
+		const listener = () => {
+			handleReset();
+			setTimeout(() => {
+				handleRestored();
+			}, 0);
+		};
+		form.addEventListener("reset", listener);
+		return () => {
+			form.removeEventListener("reset", listener);
+		};
+	}, []);
+	const commit = (input, next) => {
+		const text = format(next, precision);
+		const changed = input.value !== text;
+		if (isControlled) {
+			setDisplayValue(text);
+			setShownValue(next);
+		}
+		input.value = text;
+		setCurrentValue(next);
+		reportRange(input, text);
+		if (changed) input.dispatchEvent(new Event("input", { bubbles: true }));
+	};
+	const stepBy = (input, delta) => {
+		if (readOnlyResolved) return;
+		const current = cast(input.value, precision);
+		commit(input, current === null ? clamp(0, min, max) : clamp(toPrecision(current + delta, precision), min, max));
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative flex h-12 w-full items-center justify-between gap-2 rounded-xl border border-border-base bg-bg-base vertical:h-auto vertical:w-12", FOCUS_RING_WITHIN, "has-aria-invalid:border-border-error", "has-disabled:cursor-not-allowed has-disabled:border-border-mute has-disabled:bg-bg-mute hover:has-disabled:has-hover:bg-bg-mute"),
+		className: number_field_module_default.root,
 		children: [/* @__PURE__ */ jsx("input", {
 			autoComplete: "off",
 			autoCorrect: "off",
 			inputMode: "decimal",
 			...rest,
+			...isControlled ? {
+				value: displayValue,
+				onChange: (e) => {
+					if (e.nativeEvent instanceof InputEvent && e.nativeEvent.isComposing) return;
+					setDisplayValue(e.target.value);
+				}
+			} : { defaultValue: format(initialValue, precision) },
 			"aria-invalid": invalid,
 			"aria-required": required,
 			"aria-valuemax": max,
 			"aria-valuemin": min,
-			"aria-valuenow": currentValue,
-			className: cn("grow bg-transparent pe-8 ps-3 focus-visible:outline-hidden size-full", "disabled:cursor-not-allowed", "read-only:cursor-not-allowed"),
+			"aria-valuenow": currentValue ?? void 0,
+			className: number_field_module_default.input,
 			disabled,
-			readOnly: pending || void 0,
-			onBlur: chain(onBlur, () => {
-				const newValue = clamp(cast(displayValue, precision), min, max);
-				handleChange(newValue);
-				setDisplayValue(newValue.toFixed(precision));
+			readOnly: readOnlyResolved,
+			required,
+			onInput: chain(onInput, (e) => {
+				reportRange(e.currentTarget, e.currentTarget.value);
+			}),
+			onBlur: chain(onBlur, (e) => {
+				const parsed = cast(e.currentTarget.value, precision);
+				commit(e.currentTarget, parsed === null ? null : clamp(parsed, min, max));
 			}),
-			onChange: (e) => {
-				if (e.nativeEvent instanceof InputEvent && e.nativeEvent.isComposing) return;
-				setDisplayValue(e.target.value);
-			},
 			onKeyDown: chain(onKeyDown, (e) => {
-				if (e.key === "ArrowUp") {
-					const newValue = clamp(toPrecision(cast(displayValue, precision) + step, precision), min, max);
-					handleChange(newValue);
-					setDisplayValue(newValue.toFixed(precision));
-				}
-				if (e.key === "ArrowDown") {
-					const newValue = clamp(toPrecision(cast(displayValue, precision) - step, precision), min, max);
-					handleChange(newValue);
-					setDisplayValue(newValue.toFixed(precision));
-				}
+				if (e.key === "ArrowUp") stepBy(e.currentTarget, stepSize);
+				if (e.key === "ArrowDown") stepBy(e.currentTarget, -stepSize);
 			}),
-			pattern: "[0-9]*(.[0-9]+)?",
-			ref,
+			ref: mergedRef,
 			role: "spinbutton",
-			type: "text",
-			value: displayValue
+			type: "text"
 		}), /* @__PURE__ */ jsxs("div", {
 			"aria-hidden": "true",
-			className: "vertical:inset-e-auto vertical:bottom-1 vertical:h-auto vertical:w-full vertical:flex-row vertical:px-1 vertical:py-0 absolute inset-e-1 flex h-full flex-col py-1",
+			className: number_field_module_default.steppers,
 			children: [/* @__PURE__ */ jsxs("button", {
-				className: cn("flex w-6 grow items-center justify-center rounded-md text-fg-mute transition-colors vertical:h-6 vertical:w-auto", "hover:bg-bg-mute hover:text-fg-base", "disabled:cursor-not-allowed disabled:text-fg-mute hover:disabled:bg-transparent"),
-				disabled: disabled || pending,
+				className: number_field_module_default.step,
+				disabled: disabled || readOnlyResolved,
 				onClick: () => {
-					const newValue = clamp(toPrecision(cast(displayValue, precision) + step, precision), min, max);
-					handleChange(newValue);
-					setDisplayValue(newValue.toFixed(precision));
+					if (inputRef.current) stepBy(inputRef.current, stepSize);
 				},
 				tabIndex: -1,
 				type: "button",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "sr-only",
+					className: sr_only_module_default.srOnly,
 					children: messages.numberFieldIncrement
 				}), /* @__PURE__ */ jsx(ChevronIcon, {
 					direction: "up",
 					size: "sm"
 				})]
 			}), /* @__PURE__ */ jsxs("button", {
-				className: cn("flex w-6 grow items-center justify-center rounded-md text-fg-mute transition-colors vertical:h-6 vertical:w-auto", "hover:bg-bg-mute hover:text-fg-base", "disabled:cursor-not-allowed disabled:text-fg-mute hover:disabled:bg-transparent"),
-				disabled: disabled || pending,
+				className: number_field_module_default.step,
+				disabled: disabled || readOnlyResolved,
 				onClick: () => {
-					const newValue = clamp(toPrecision(cast(displayValue, precision) - step, precision), min, max);
-					handleChange(newValue);
-					setDisplayValue(newValue.toFixed(precision));
+					if (inputRef.current) stepBy(inputRef.current, -stepSize);
 				},
 				tabIndex: -1,
 				type: "button",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "sr-only",
+					className: sr_only_module_default.srOnly,
 					children: messages.numberFieldDecrement
 				}), /* @__PURE__ */ jsx(ChevronIcon, {
 					direction: "down",

package/dist/components/form/number-field/number-field.module.mjs

@@ -0,0 +1,10 @@
+import './number-field.css';
+//#region src/components/form/number-field/number-field.module.css
+var number_field_module_default = {
+	"input": "iUg6Ca_input",
+	"root": "iUg6Ca_root",
+	"step": "iUg6Ca_step",
+	"steppers": "iUg6Ca_steppers"
+};
+//#endregion
+export { number_field_module_default as default };

package/dist/components/form/password-input/index.mjs

@@ -1,2 +1 @@
-import { PasswordInput } from "./password-input.mjs";
-export { PasswordInput };
+export { PasswordInput } from "./password-input.mjs";

package/dist/components/form/password-input/password-input.css

@@ -0,0 +1,88 @@
+@layer properties, theme, base;
+
+@layer components {
+  .StCDRW_root {
+    border-radius: var(--radius-xl);
+    border-width: 1px;
+    border-color: var(--color-border-base);
+    background-color: var(--color-bg-base);
+    align-items: center;
+    width: 100%;
+    display: flex;
+    position: relative;
+
+    @container style(--writing: vertical) {
+      width: auto;
+      height: 100%;
+    }
+  }
+
+  .StCDRW_invalid {
+    border-color: var(--color-border-error);
+  }
+
+  .StCDRW_disabled {
+    cursor: not-allowed;
+    border-color: var(--color-border-mute);
+    background-color: var(--color-bg-mute);
+  }
+
+  .StCDRW_input {
+    width: 100%;
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    background-color: #0000;
+    flex-grow: 1;
+
+    @container style(--writing: vertical) {
+      width: auto;
+      height: 100%;
+    }
+  }
+
+  .StCDRW_input:read-only {
+    cursor: not-allowed;
+    background-color: var(--color-bg-subtle);
+  }
+
+  .StCDRW_input:focus-visible {
+    outline-style: none;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .StCDRW_input:disabled {
+    cursor: not-allowed;
+  }
+
+  .StCDRW_toggle {
+    border-radius: var(--radius-md);
+    padding: var(--spacing);
+    color: var(--color-fg-mute);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    margin-inline-end: calc(var(--spacing) * 2);
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    .StCDRW_toggle:not(.StCDRW_toggleDisabled):hover {
+      background-color: var(--color-bg-mute);
+      color: var(--color-fg-base);
+    }
+  }
+
+  .StCDRW_toggleDisabled {
+    cursor: not-allowed;
+    color: var(--color-fg-subtle);
+  }
+}
+
+@layer utilities;

package/dist/components/form/password-input/password-input.d.mts

@@ -6,6 +6,6 @@ type Props = {
   hideLabel?: string;
   ref?: Ref<HTMLInputElement>;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'style'>;
-declare const PasswordInput: FC<Props>;
+export declare const PasswordInput: FC<Props>;
 //#endregion
-export { PasswordInput };
+export {};

package/dist/components/form/password-input/password-input.mjs

@@ -1,32 +1,35 @@
 "use client";
-import { FOCUS_RING_NO_BORDER, FOCUS_RING_WITHIN } from "../../_internal/focus-ring.mjs";
-import { cn } from "../../../helpers/cn.mjs";
-import { useMessages } from "../../../i18n/context.mjs";
-import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
 import { ViewIcon, ViewOffIcon } from "../../icons/lucide.mjs";
+import password_input_module_default from "./password-input.module.mjs";
+import { clsx } from "clsx";
+import { useState } from "react";
 import { useFormStatus } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/password-input/password-input.tsx
 const PasswordInput = ({ invalid = false, autoComplete = "current-password", showLabel, hideLabel, disabled = false, readOnly, ref, ...rest }) => {
-	const messages = useMessages();
-	const { isOpen: isVisible, toggle: toggleVisible } = useDisclosure();
+	const messages = getMessages();
+	const [isVisible, setIsVisible] = useState(false);
 	const { pending } = useFormStatus();
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative flex w-full items-center rounded-xl border border-border-base bg-bg-base vertical:h-full vertical:w-auto", invalid && "border-border-error", (disabled || pending) && "cursor-not-allowed border-border-mute bg-bg-mute", FOCUS_RING_WITHIN),
+		className: clsx(password_input_module_default.root, invalid && password_input_module_default.invalid, (disabled || pending) && password_input_module_default.disabled, focus_ring_module_default.ringWithin),
 		children: [/* @__PURE__ */ jsx("input", {
 			"aria-invalid": invalid,
 			autoComplete,
-			className: cn("w-full grow bg-transparent px-3 py-2 focus-visible:outline-hidden vertical:h-full vertical:w-auto", "disabled:cursor-not-allowed", "read-only:cursor-not-allowed read-only:bg-bg-subtle"),
+			className: password_input_module_default.input,
 			disabled,
 			readOnly: pending || readOnly,
 			ref,
-			type: isVisible ? "text" : "password",
-			...rest
+			...rest,
+			type: isVisible ? "text" : "password"
 		}), /* @__PURE__ */ jsx("button", {
 			"aria-label": isVisible ? hideLabel ?? messages.passwordHide : showLabel ?? messages.passwordShow,
-			className: cn("me-2 inline-flex shrink-0 items-center justify-center rounded-md p-1 text-fg-mute transition-colors", FOCUS_RING_NO_BORDER, !disabled && !pending && "hover:bg-bg-mute hover:text-fg-base", (disabled || pending) && "cursor-not-allowed text-fg-mute/70"),
+			className: clsx(password_input_module_default.toggle, focus_ring_module_default.ringNoBorder, (disabled || pending) && password_input_module_default.toggleDisabled),
 			disabled: disabled || pending,
-			onClick: toggleVisible,
+			onClick: () => {
+				setIsVisible((current) => !current);
+			},
 			type: "button",
 			children: isVisible ? /* @__PURE__ */ jsx(ViewOffIcon, { size: "sm" }) : /* @__PURE__ */ jsx(ViewIcon, { size: "sm" })
 		})]

package/dist/components/form/password-input/password-input.module.mjs

@@ -0,0 +1,12 @@
+import './password-input.css';
+//#region src/components/form/password-input/password-input.module.css
+var password_input_module_default = {
+	"disabled": "StCDRW_disabled",
+	"input": "StCDRW_input",
+	"invalid": "StCDRW_invalid",
+	"root": "StCDRW_root",
+	"toggle": "StCDRW_toggle",
+	"toggleDisabled": "StCDRW_toggleDisabled"
+};
+//#endregion
+export { password_input_module_default as default };

package/dist/components/form/radio/index.mjs

@@ -1,2 +1 @@
-import { Radio } from "./radio.mjs";
-export { Radio };
+export { Radio } from "./radio.mjs";

package/dist/components/form/radio/radio.css

@@ -0,0 +1,89 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._8JmqZW_root {
+    cursor: pointer;
+    gap: calc(var(--spacing) * 2);
+    flex-direction: column;
+    display: flex;
+  }
+
+  ._8JmqZW_disabled {
+    cursor: not-allowed;
+  }
+
+  ._8JmqZW_option {
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    text-align: left;
+    cursor: pointer;
+    display: flex;
+  }
+
+  ._8JmqZW_optionDisabled {
+    cursor: not-allowed;
+  }
+
+  ._8JmqZW_circle {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+    border-radius: var(--radius-full);
+    border-width: 2px;
+    border-color: var(--color-border-mute);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  ._8JmqZW_circleEnabled {
+    background-color: var(--color-bg-base);
+  }
+
+  ._8JmqZW_circleDisabled {
+    background-color: var(--color-bg-mute);
+  }
+
+  ._8JmqZW_input:checked ~ ._8JmqZW_circleEnabled {
+    border-color: var(--color-border-base);
+    background-color: var(--color-primary-bg);
+  }
+
+  ._8JmqZW_invalid, ._8JmqZW_input:checked ~ ._8JmqZW_invalid {
+    border-color: var(--color-border-error);
+  }
+
+  ._8JmqZW_input:focus-visible ~ ._8JmqZW_circle {
+    box-shadow: var(--shadow-ring-info);
+    border-color: #0000;
+    outline-style: none;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  ._8JmqZW_dot {
+    width: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 2);
+    border-radius: var(--radius-full);
+    background-color: var(--color-primary-border);
+    opacity: 0;
+    transition-property: opacity;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-in-out);
+
+    @media (forced-colors: active) {
+      background-color: var(--color-system-canvas-text);
+    }
+  }
+
+  ._8JmqZW_input:checked ~ ._8JmqZW_circle > ._8JmqZW_dot {
+    opacity: 1;
+  }
+}
+
+@layer utilities;