@aloudata/aloudata-design 3.0.27 → 3.1.1

package/dist/Checkbox/index.js

@@ -1,11 +1,12 @@
 import { cn } from "../lib/utils.js";
 import DisabledContext from "../ConfigProvider/DisabledContext.js";
+import { getSemanticOwnerAriaProps } from "../_utils/formControlSemanticOwner.js";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Checkbox/index.tsx
 var CheckboxGroupContext = createContext(null);
 function Checkbox(props) {
-	const { className, disabled: customDisabled, alert, bold, size, checked: controlledChecked, defaultChecked, indeterminate, onChange, onClick, autoFocus, children, value, name, style, "data-testid": dataTestid, "aria-label": ariaLabel } = props;
+	const { className, disabled: customDisabled, alert, bold, size, checked: controlledChecked, defaultChecked, indeterminate, onChange, onClick, autoFocus, children, value, name, required, style, "data-testid": dataTestid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-disabled": ariaDisabled } = props;
 	const disabled = useContext(DisabledContext);
 	const group = useContext(CheckboxGroupContext);
 	const isGroupCheckbox = group !== null && value !== void 0;
@@ -45,13 +46,29 @@ function Checkbox(props) {
 		className: cn("ald-checkbox-wrapper ald-checkbox tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-2 tw-leading-5", mergedDisabled && "tw-cursor-default", size === "small" && "ald-checkbox-small", !mergedDisabled && "[&:hover_.ald-checkbox-inner]:tw-border-2 [&:hover_.ald-checkbox-inner]:tw-border-[var(--border-brand-strong)]", !mergedDisabled && checked && "[&:hover_.ald-checkbox-inner]:tw-border-[var(--action-ghost-normal)] [&:hover_.ald-checkbox-inner]:tw-bg-[var(--action-primary-hover)]", className),
 		style,
 		children: [/* @__PURE__ */ jsxs("span", {
-			className: cn("ald-checkbox-inner tw-relative tw-box-border tw-flex tw-size-4 tw-min-h-4 tw-min-w-4 tw-items-center tw-justify-center tw-rounded-r-50 tw-border-2 tw-border-solid tw-transition-all tw-duration-200", checked && "ald-checkbox-checked", checked && !mergedDisabled && "tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]", checked && mergedDisabled && "tw-border-[var(--content-disabled)] tw-bg-[var(--content-disabled)]", !checked && !indeterminate && mergedDisabled && "tw-border-[var(--content-disabled)] tw-bg-[var(--background-neutral-on-subtle)]", !checked && !indeterminate && !mergedDisabled && !alert && "tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-default)]", !checked && !indeterminate && !mergedDisabled && alert && "tw-border-[var(--border-negative-strong)] tw-bg-[var(--background-default)]", indeterminate && !checked && "ald-checkbox-indeterminate", indeterminate && !checked && !mergedDisabled && "tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]", indeterminate && !checked && mergedDisabled && "tw-border-[var(--content-disabled)] tw-bg-[var(--content-disabled)]"),
+			className: cn("ald-checkbox-inner tw-relative tw-box-border tw-flex tw-size-4 tw-min-h-4 tw-min-w-4 tw-items-center tw-justify-center tw-rounded-r-50 tw-border-2 tw-border-solid tw-transition-colors tw-duration-200", !mergedDisabled && [
+				"has-[input:focus-visible]:tw-shadow-[0_0_0_2px_var(--focus-ring)]",
+				"forced-colors:has-[input:focus-visible]:tw-outline",
+				"forced-colors:has-[input:focus-visible]:tw-outline-2",
+				"forced-colors:has-[input:focus-visible]:tw-outline-offset-2",
+				"forced-colors:has-[input:focus-visible]:tw-outline-[Highlight]"
+			], checked && "ald-checkbox-checked", checked && !mergedDisabled && "tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]", checked && mergedDisabled && "tw-border-[var(--content-disabled)] tw-bg-[var(--content-disabled)]", !checked && !indeterminate && mergedDisabled && "tw-border-[var(--content-disabled)] tw-bg-[var(--background-neutral-on-subtle)]", !checked && !indeterminate && !mergedDisabled && !alert && "tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-default)]", !checked && !indeterminate && !mergedDisabled && alert && "tw-border-[var(--border-negative-strong)] tw-bg-[var(--background-default)]", indeterminate && !checked && "ald-checkbox-indeterminate", indeterminate && !checked && !mergedDisabled && "tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]", indeterminate && !checked && mergedDisabled && "tw-border-[var(--content-disabled)] tw-bg-[var(--content-disabled)]"),
 			children: [/* @__PURE__ */ jsx("input", {
 				ref: inputRef,
 				type: "checkbox",
 				className: "tw-absolute tw-inset-0 tw-m-0 tw-cursor-pointer tw-opacity-0 disabled:tw-cursor-default",
 				checked: !!checked,
 				disabled: mergedDisabled,
+				required,
+				"aria-checked": indeterminate ? "mixed" : void 0,
+				...getSemanticOwnerAriaProps({
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledBy,
+					"aria-describedby": ariaDescribedBy,
+					"aria-invalid": ariaInvalid,
+					"aria-required": ariaRequired,
+					"aria-disabled": ariaDisabled
+				}),
 				onChange: handleChange,
 				autoFocus,
 				name: group?.name ?? name,
@@ -64,13 +81,13 @@ function Checkbox(props) {
 				}
 			})]
 		}), children && /* @__PURE__ */ jsx("span", {
-			className: cn("ald-checkbox-label tw-inline-flex tw-select-none tw-items-center tw-gap-1 tw-text-[var(--content-primary)] [&_svg]:tw-inline-block [&_svg]:tw-shrink-0", size === "small" ? "tw-text-xs" : "tw-text-sm", bold && "tw-font-medium", mergedDisabled && "tw-cursor-default tw-text-[var(--content-disabled)]"),
+			className: cn("ald-checkbox-label tw-inline-flex tw-select-none tw-items-center tw-gap-1 tw-text-[var(--content-primary)] [&_svg]:tw-inline-block [&_svg]:tw-shrink-0", "tw-text-typography-label", bold && "tw-font-medium", mergedDisabled && "tw-cursor-default tw-text-[var(--content-disabled)]"),
 			children
 		})]
 	});
 }
 function CheckboxGroup(props) {
-	const { className, disabled: customDisabled, size, options, value: controlledValue, defaultValue, onChange, direction, name, children, style } = props;
+	const { className, disabled: customDisabled, size, options, value: controlledValue, defaultValue, onChange, direction, name, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy } = props;
 	const disabled = useContext(DisabledContext);
 	const mergedDisabled = customDisabled ?? disabled;
 	const isControlled = "value" in props;
@@ -100,6 +117,10 @@ function CheckboxGroup(props) {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("ald-checkbox-group tw-flex tw-flex-wrap tw-gap-3", direction === "vertical" && "ald-checkbox-group-vertical tw-flex-col", size === "small" && "ald-checkbox-group-small", className),
 		style,
+		role: "group",
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-describedby": ariaDescribedBy,
 		children: /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, {
 			value: {
 				value,

package/dist/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport { cn } from '../lib/utils';\nimport {\n  CheckboxChangeEvent,\n  CheckboxValueType,\n  ICheckboxGroupProps,\n  ICheckboxProps,\n} from './type';\n\nexport type { CheckboxChangeEvent, CheckboxValueType };\nexport type { CheckboxOptionType } from './type';\nexport type { ICheckboxProps, ICheckboxGroupProps };\n\ninterface CheckboxGroupContextValue {\n  value: CheckboxValueType[];\n  disabled?: boolean;\n  name?: string;\n  toggleOption: (value: CheckboxValueType, checked: boolean) => void;\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(\n  null,\n);\n\nfunction Checkbox(props: ICheckboxProps) {\n  const {\n    className,\n    disabled: customDisabled,\n    alert,\n    bold,\n    size,\n    checked: controlledChecked,\n    defaultChecked,\n    indeterminate,\n    onChange,\n    onClick,\n    autoFocus,\n    children,\n    value,\n    name,\n    style,\n    'data-testid': dataTestid,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const disabled = useContext(DisabledContext);\n  const group = useContext(CheckboxGroupContext);\n  const isGroupCheckbox = group !== null && value !== undefined;\n  const mergedDisabled = group?.disabled || customDisabled || disabled;\n\n  const isControlled = isGroupCheckbox || 'checked' in props;\n  const [innerChecked, setInnerChecked] = useState(defaultChecked ?? false);\n  const checked = isGroupCheckbox\n    ? group.value.includes(value)\n    : isControlled\n    ? controlledChecked\n    : innerChecked;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = !!indeterminate;\n    }\n  }, [indeterminate]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (mergedDisabled) return;\n    const newChecked = e.target.checked;\n    if (isGroupCheckbox) {\n      group.toggleOption(value, newChecked);\n    } else if (!isControlled) {\n      setInnerChecked(newChecked);\n    }\n    onChange?.({\n      target: { checked: newChecked, value },\n      nativeEvent: e.nativeEvent,\n    });\n  };\n\n  const handleLabelClick = (e: React.MouseEvent) => {\n    if (mergedDisabled) return;\n    if (onClick) {\n      // Table row selection uses onClick — prevent label from also toggling input\n      e.preventDefault();\n      e.stopPropagation();\n      onClick(e);\n    }\n  };\n\n  return (\n    <label\n      onClick={handleLabelClick}\n      data-testid={dataTestid}\n      aria-label={ariaLabel}\n      className={cn(\n        'ald-checkbox-wrapper ald-checkbox tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-2 tw-leading-5',\n        mergedDisabled && 'tw-cursor-default',\n        size === 'small' && 'ald-checkbox-small',\n        !mergedDisabled &&\n          '[&:hover_.ald-checkbox-inner]:tw-border-2 [&:hover_.ald-checkbox-inner]:tw-border-[var(--border-brand-strong)]',\n        !mergedDisabled &&\n          checked &&\n          '[&:hover_.ald-checkbox-inner]:tw-border-[var(--action-ghost-normal)] [&:hover_.ald-checkbox-inner]:tw-bg-[var(--action-primary-hover)]',\n        className,\n      )}\n      style={style}\n    >\n      <span\n        className={cn(\n          'ald-checkbox-inner tw-relative tw-box-border tw-flex tw-size-4 tw-min-h-4 tw-min-w-4 tw-items-center tw-justify-center tw-rounded-r-50 tw-border-2 tw-border-solid tw-transition-all tw-duration-200',\n          checked && 'ald-checkbox-checked',\n          checked &&\n            !mergedDisabled &&\n            'tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]',\n          checked &&\n            mergedDisabled &&\n            'tw-border-[var(--content-disabled)] tw-bg-[var(--content-disabled)]',\n          !checked &&\n            !indeterminate &&\n            mergedDisabled &&\n            'tw-border-[var(--content-disabled)] tw-bg-[var(--background-neutral-on-subtle)]',\n          !checked &&\n            !indeterminate &&\n            !mergedDisabled &&\n            !alert &&\n            'tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-default)]',\n          !checked &&\n            !indeterminate &&\n            !mergedDisabled &&\n            alert &&\n            'tw-border-[var(--border-negative-strong)] tw-bg-[var(--background-default)]',\n          indeterminate && !checked && 'ald-checkbox-indeterminate',\n          indeterminate &&\n            !checked &&\n            !mergedDisabled &&\n            'tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]',\n          indeterminate &&\n            !checked &&\n            mergedDisabled &&\n            'tw-border-[var(--content-disabled)] tw-bg-[var(--content-disabled)]',\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          className=\"tw-absolute tw-inset-0 tw-m-0 tw-cursor-pointer tw-opacity-0 disabled:tw-cursor-default\"\n          checked={!!checked}\n          disabled={mergedDisabled}\n          onChange={handleChange}\n          autoFocus={autoFocus}\n          name={group?.name ?? name}\n          value={value as string}\n        />\n        {(checked || (indeterminate && !checked)) && (\n          <span\n            className=\"tw-absolute tw-inset-0 tw-bg-center tw-bg-no-repeat\"\n            style={{\n              backgroundImage:\n                indeterminate && !checked\n                  ? 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJWZWN0b3IgMSAoU3Ryb2tlKSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjc1IDFDMC43NSAwLjU4NTc4NiAxLjA4NTc5IDAuMjUgMS41IDAuMjVIOC41QzguOTE0MjEgMC4yNSA5LjI1IDAuNTg1Nzg2IDkuMjUgMUM5LjI1IDEuNDE0MjEgOC45MTQyMSAxLjc1IDguNSAxLjc1SDEuNUMxLjA4NTc5IDEuNzUgMC43NSAxLjQxNDIxIDAuNzUgMVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\")'\n                  : 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuNTMwMzMgMC45Njk2N0M5LjgyMzIyIDEuMjYyNTYgOS44MjMyMiAxLjczNzQ0IDkuNTMwMzMgMi4wMzAzM0w0LjUzMDMzIDcuMDMwMzNDNC4yMzc0NCA3LjMyMzIyIDMuNzYyNTYgNy4zMjMyMiAzLjQ2OTY3IDcuMDMwMzNMMC45Njk2NyA0LjUzMDMzQzAuNjc2Nzc3IDQuMjM3NDQgMC42NzY3NzcgMy43NjI1NiAwLjk2OTY3IDMuNDY5NjdDMS4yNjI1NiAzLjE3Njc4IDEuNzM3NDQgMy4xNzY3OCAyLjAzMDMzIDMuNDY5NjdMNCA1LjQzOTM0TDguNDY5NjcgMC45Njk2N0M4Ljc2MjU2IDAuNjc2Nzc3IDkuMjM3NDQgMC42NzY3NzcgOS41MzAzMyAwLjk2OTY3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==\")',\n              backgroundSize:\n                indeterminate && !checked ? '10px 2px' : '10px 8px',\n            }}\n          />\n        )}\n      </span>\n      {children && (\n        <span\n          className={cn(\n            'ald-checkbox-label tw-inline-flex tw-select-none tw-items-center tw-gap-1 tw-text-[var(--content-primary)] [&_svg]:tw-inline-block [&_svg]:tw-shrink-0',\n            size === 'small' ? 'tw-text-xs' : 'tw-text-sm',\n            bold && 'tw-font-medium',\n            mergedDisabled &&\n              'tw-cursor-default tw-text-[var(--content-disabled)]',\n          )}\n        >\n          {children}\n        </span>\n      )}\n    </label>\n  );\n}\n\nfunction CheckboxGroup(props: ICheckboxGroupProps) {\n  const {\n    className,\n    disabled: customDisabled,\n    size,\n    options,\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    direction,\n    name,\n    children,\n    style,\n  } = props;\n\n  const disabled = useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n\n  const isControlled = 'value' in props;\n  const [innerValue, setInnerValue] = useState<CheckboxValueType[]>(\n    defaultValue ?? [],\n  );\n  const value = isControlled ? controlledValue ?? [] : innerValue;\n\n  const handleGroupChange = (\n    itemValue: CheckboxValueType,\n    itemChecked: boolean,\n  ) => {\n    const newValue = itemChecked\n      ? [...value, itemValue]\n      : value.filter((v) => v !== itemValue);\n    if (!isControlled) {\n      setInnerValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  const renderOptions = () => {\n    if (!options) return children;\n    return options.map((opt) => {\n      const optObj =\n        typeof opt === 'object' ? opt : { label: String(opt), value: opt };\n      return (\n        <Checkbox\n          key={String(optObj.value)}\n          value={optObj.value}\n          disabled={optObj.disabled}\n          size={size}\n          onChange={optObj.onChange}\n        >\n          {optObj.label}\n        </Checkbox>\n      );\n    });\n  };\n\n  return (\n    <div\n      className={cn(\n        'ald-checkbox-group tw-flex tw-flex-wrap tw-gap-3',\n        direction === 'vertical' && 'ald-checkbox-group-vertical tw-flex-col',\n        size === 'small' && 'ald-checkbox-group-small',\n        className,\n      )}\n      style={style}\n    >\n      <CheckboxGroupContext.Provider\n        value={{\n          value,\n          disabled: mergedDisabled,\n          name,\n          toggleOption: handleGroupChange,\n        }}\n      >\n        {renderOptions()}\n      </CheckboxGroupContext.Provider>\n    </div>\n  );\n}\n\nCheckbox.Group = CheckboxGroup;\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport { getSemanticOwnerAriaProps } from '../_utils/formControlSemanticOwner';\nimport { cn } from '../lib/utils';\nimport {\n  CheckboxChangeEvent,\n  CheckboxValueType,\n  ICheckboxGroupProps,\n  ICheckboxProps,\n} from './type';\n\nexport type { CheckboxChangeEvent, CheckboxValueType };\nexport type { CheckboxOptionType } from './type';\nexport type { ICheckboxProps, ICheckboxGroupProps };\n\ninterface CheckboxGroupContextValue {\n  value: CheckboxValueType[];\n  disabled?: boolean;\n  name?: string;\n  toggleOption: (value: CheckboxValueType, checked: boolean) => void;\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(\n  null,\n);\n\nfunction Checkbox(props: ICheckboxProps) {\n  const {\n    className,\n    disabled: customDisabled,\n    alert,\n    bold,\n    size,\n    checked: controlledChecked,\n    defaultChecked,\n    indeterminate,\n    onChange,\n    onClick,\n    autoFocus,\n    children,\n    value,\n    name,\n    required,\n    style,\n    'data-testid': dataTestid,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    'aria-disabled': ariaDisabled,\n  } = props;\n\n  const disabled = useContext(DisabledContext);\n  const group = useContext(CheckboxGroupContext);\n  const isGroupCheckbox = group !== null && value !== undefined;\n  const mergedDisabled = group?.disabled || customDisabled || disabled;\n\n  const isControlled = isGroupCheckbox || 'checked' in props;\n  const [innerChecked, setInnerChecked] = useState(defaultChecked ?? false);\n  const checked = isGroupCheckbox\n    ? group.value.includes(value)\n    : isControlled\n    ? controlledChecked\n    : innerChecked;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = !!indeterminate;\n    }\n  }, [indeterminate]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (mergedDisabled) return;\n    const newChecked = e.target.checked;\n    if (isGroupCheckbox) {\n      group.toggleOption(value, newChecked);\n    } else if (!isControlled) {\n      setInnerChecked(newChecked);\n    }\n    onChange?.({\n      target: { checked: newChecked, value },\n      nativeEvent: e.nativeEvent,\n    });\n  };\n\n  const handleLabelClick = (e: React.MouseEvent) => {\n    if (mergedDisabled) return;\n    if (onClick) {\n      // Table row selection uses onClick — prevent label from also toggling input\n      e.preventDefault();\n      e.stopPropagation();\n      onClick(e);\n    }\n  };\n\n  return (\n    <label\n      onClick={handleLabelClick}\n      data-testid={dataTestid}\n      aria-label={ariaLabel}\n      className={cn(\n        'ald-checkbox-wrapper ald-checkbox tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-2 tw-leading-5',\n        mergedDisabled && 'tw-cursor-default',\n        size === 'small' && 'ald-checkbox-small',\n        !mergedDisabled &&\n          '[&:hover_.ald-checkbox-inner]:tw-border-2 [&:hover_.ald-checkbox-inner]:tw-border-[var(--border-brand-strong)]',\n        !mergedDisabled &&\n          checked &&\n          '[&:hover_.ald-checkbox-inner]:tw-border-[var(--action-ghost-normal)] [&:hover_.ald-checkbox-inner]:tw-bg-[var(--action-primary-hover)]',\n        className,\n      )}\n      style={style}\n    >\n      <span\n        className={cn(\n          'ald-checkbox-inner tw-relative tw-box-border tw-flex tw-size-4 tw-min-h-4 tw-min-w-4 tw-items-center tw-justify-center tw-rounded-r-50 tw-border-2 tw-border-solid tw-transition-colors tw-duration-200',\n          // The native input owns focus and its visual control owns the\n          // Focus State Layer. Checked, indeterminate, and alert styling\n          // remain independent control states.\n          !mergedDisabled && [\n            'has-[input:focus-visible]:tw-shadow-[0_0_0_2px_var(--focus-ring)]',\n            'forced-colors:has-[input:focus-visible]:tw-outline',\n            'forced-colors:has-[input:focus-visible]:tw-outline-2',\n            'forced-colors:has-[input:focus-visible]:tw-outline-offset-2',\n            'forced-colors:has-[input:focus-visible]:tw-outline-[Highlight]',\n          ],\n          checked && 'ald-checkbox-checked',\n          checked &&\n            !mergedDisabled &&\n            'tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]',\n          checked &&\n            mergedDisabled &&\n            'tw-border-[var(--content-disabled)] tw-bg-[var(--content-disabled)]',\n          !checked &&\n            !indeterminate &&\n            mergedDisabled &&\n            'tw-border-[var(--content-disabled)] tw-bg-[var(--background-neutral-on-subtle)]',\n          !checked &&\n            !indeterminate &&\n            !mergedDisabled &&\n            !alert &&\n            'tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-default)]',\n          !checked &&\n            !indeterminate &&\n            !mergedDisabled &&\n            alert &&\n            'tw-border-[var(--border-negative-strong)] tw-bg-[var(--background-default)]',\n          indeterminate && !checked && 'ald-checkbox-indeterminate',\n          indeterminate &&\n            !checked &&\n            !mergedDisabled &&\n            'tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]',\n          indeterminate &&\n            !checked &&\n            mergedDisabled &&\n            'tw-border-[var(--content-disabled)] tw-bg-[var(--content-disabled)]',\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          className=\"tw-absolute tw-inset-0 tw-m-0 tw-cursor-pointer tw-opacity-0 disabled:tw-cursor-default\"\n          checked={!!checked}\n          disabled={mergedDisabled}\n          required={required}\n          aria-checked={indeterminate ? 'mixed' : undefined}\n          {...getSemanticOwnerAriaProps({\n            'aria-label': ariaLabel,\n            'aria-labelledby': ariaLabelledBy,\n            'aria-describedby': ariaDescribedBy,\n            'aria-invalid': ariaInvalid,\n            'aria-required': ariaRequired,\n            'aria-disabled': ariaDisabled,\n          })}\n          onChange={handleChange}\n          autoFocus={autoFocus}\n          name={group?.name ?? name}\n          value={value as string}\n        />\n        {(checked || (indeterminate && !checked)) && (\n          <span\n            className=\"tw-absolute tw-inset-0 tw-bg-center tw-bg-no-repeat\"\n            style={{\n              backgroundImage:\n                indeterminate && !checked\n                  ? 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJWZWN0b3IgMSAoU3Ryb2tlKSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjc1IDFDMC43NSAwLjU4NTc4NiAxLjA4NTc5IDAuMjUgMS41IDAuMjVIOC41QzguOTE0MjEgMC4yNSA5LjI1IDAuNTg1Nzg2IDkuMjUgMUM5LjI1IDEuNDE0MjEgOC45MTQyMSAxLjc1IDguNSAxLjc1SDEuNUMxLjA4NTc5IDEuNzUgMC43NSAxLjQxNDIxIDAuNzUgMVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\")'\n                  : 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuNTMwMzMgMC45Njk2N0M5LjgyMzIyIDEuMjYyNTYgOS44MjMyMiAxLjczNzQ0IDkuNTMwMzMgMi4wMzAzM0w0LjUzMDMzIDcuMDMwMzNDNC4yMzc0NCA3LjMyMzIyIDMuNzYyNTYgNy4zMjMyMiAzLjQ2OTY3IDcuMDMwMzNMMC45Njk2NyA0LjUzMDMzQzAuNjc2Nzc3IDQuMjM3NDQgMC42NzY3NzcgMy43NjI1NiAwLjk2OTY3IDMuNDY5NjdDMS4yNjI1NiAzLjE3Njc4IDEuNzM3NDQgMy4xNzY3OCAyLjAzMDMzIDMuNDY5NjdMNCA1LjQzOTM0TDguNDY5NjcgMC45Njk2N0M4Ljc2MjU2IDAuNjc2Nzc3IDkuMjM3NDQgMC42NzY3NzcgOS41MzAzMyAwLjk2OTY3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==\")',\n              backgroundSize:\n                indeterminate && !checked ? '10px 2px' : '10px 8px',\n            }}\n          />\n        )}\n      </span>\n      {children && (\n        <span\n          className={cn(\n            'ald-checkbox-label tw-inline-flex tw-select-none tw-items-center tw-gap-1 tw-text-[var(--content-primary)] [&_svg]:tw-inline-block [&_svg]:tw-shrink-0',\n            'tw-text-typography-label',\n            bold && 'tw-font-medium',\n            mergedDisabled &&\n              'tw-cursor-default tw-text-[var(--content-disabled)]',\n          )}\n        >\n          {children}\n        </span>\n      )}\n    </label>\n  );\n}\n\nfunction CheckboxGroup(props: ICheckboxGroupProps) {\n  const {\n    className,\n    disabled: customDisabled,\n    size,\n    options,\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    direction,\n    name,\n    children,\n    style,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n  } = props;\n\n  const disabled = useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n\n  const isControlled = 'value' in props;\n  const [innerValue, setInnerValue] = useState<CheckboxValueType[]>(\n    defaultValue ?? [],\n  );\n  const value = isControlled ? controlledValue ?? [] : innerValue;\n\n  const handleGroupChange = (\n    itemValue: CheckboxValueType,\n    itemChecked: boolean,\n  ) => {\n    const newValue = itemChecked\n      ? [...value, itemValue]\n      : value.filter((v) => v !== itemValue);\n    if (!isControlled) {\n      setInnerValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  const renderOptions = () => {\n    if (!options) return children;\n    return options.map((opt) => {\n      const optObj =\n        typeof opt === 'object' ? opt : { label: String(opt), value: opt };\n      return (\n        <Checkbox\n          key={String(optObj.value)}\n          value={optObj.value}\n          disabled={optObj.disabled}\n          size={size}\n          onChange={optObj.onChange}\n        >\n          {optObj.label}\n        </Checkbox>\n      );\n    });\n  };\n\n  return (\n    <div\n      className={cn(\n        'ald-checkbox-group tw-flex tw-flex-wrap tw-gap-3',\n        direction === 'vertical' && 'ald-checkbox-group-vertical tw-flex-col',\n        size === 'small' && 'ald-checkbox-group-small',\n        className,\n      )}\n      style={style}\n      role=\"group\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n    >\n      <CheckboxGroupContext.Provider\n        value={{\n          value,\n          disabled: mergedDisabled,\n          name,\n          toggleOption: handleGroupChange,\n        }}\n      >\n        {renderOptions()}\n      </CheckboxGroupContext.Provider>\n    </div>\n  );\n}\n\nCheckbox.Group = CheckboxGroup;\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/Checkbox/type.d.ts

@@ -35,10 +35,15 @@ export interface ICheckboxProps {
     children?: React.ReactNode;
     value?: CheckboxValueType;
     name?: string;
+    required?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
+    'aria-disabled'?: React.AriaAttributes['aria-disabled'];
     /** 透传到根 label 元素的 data-testid，用于自动化测试定位 */
     'data-testid'?: string;
-    /** 透传到根 label 元素的 aria-label，用于可访问性与自动化测试定位 */
-    'aria-label'?: string;
 }
 export interface ICheckboxGroupProps {
     defaultValue?: Array<CheckboxValueType>;
@@ -52,4 +57,7 @@ export interface ICheckboxGroupProps {
     style?: React.CSSProperties;
     size?: TSize;
     children?: React.ReactNode;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
 }

package/dist/Collapse/index.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/utils.js";
 import Memo from "../Icon/components/ArrowRightLightLine.js";
-import React, { useContext, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useContext, useEffect, useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/Collapse/index.tsx
 var CollapseContext = React.createContext(null);
 var normalizeKeys = (keys) => {
@@ -110,8 +110,13 @@ Panel.__COLLAPSE_PANEL = true;
 var CollapsePanelView = React.forwardRef((props, ref) => {
 	const { header, isActive, onToggle, disabled, extra, className, style, children, forceRender, expandIcon, expandIconPosition = "start", bordered, size = "middle", collapsible = "header" } = props;
 	const contentRef = useRef(null);
+	const triggerId = useId();
+	const headerId = useId();
+	const contentId = useId();
 	const [rendered, setRendered] = useState(isActive || !!forceRender);
-	if (isActive && !rendered) setRendered(true);
+	useEffect(() => {
+		if (isActive || forceRender) setRendered(true);
+	}, [forceRender, isActive]);
 	const handleTransitionEnd = () => {
 		if (!isActive && !forceRender) setRendered(false);
 	};
@@ -121,37 +126,78 @@ var CollapsePanelView = React.forwardRef((props, ref) => {
 	});
 	const iconElement = /* @__PURE__ */ jsx("span", {
 		className: "ald-collapse-expand-icon ant-collapse-expand-icon tw-flex tw-items-center",
+		"aria-hidden": "true",
 		style: {
 			transform: isActive ? "rotate(90deg)" : "rotate(0deg)",
 			transition: "transform 200ms"
 		},
-		onClick: disabled || collapsible !== "icon" ? void 0 : (e) => {
-			e.stopPropagation();
-			onToggle();
-		},
 		children: iconNode
 	});
+	const triggerProps = {
+		type: "button",
+		id: triggerId,
+		"aria-expanded": isActive,
+		"aria-controls": contentId,
+		disabled,
+		onClick: onToggle
+	};
+	const headerText = /* @__PURE__ */ jsx("span", {
+		className: "ald-collapse-header-text ant-collapse-header-text tw-flex-1 tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--content-primary)]",
+		children: header
+	});
+	const headerTrigger = collapsible === "disabled" ? /* @__PURE__ */ jsxs("div", {
+		id: triggerId,
+		className: "tw-flex tw-flex-1 tw-items-center tw-gap-2",
+		"aria-disabled": "true",
+		children: [
+			expandIconPosition === "start" && iconElement,
+			headerText,
+			expandIconPosition === "end" && iconElement
+		]
+	}) : collapsible === "icon" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+		expandIconPosition === "start" && /* @__PURE__ */ jsx("button", {
+			...triggerProps,
+			className: "tw-flex tw-cursor-pointer tw-items-center tw-border-0 tw-bg-transparent tw-p-0",
+			"aria-labelledby": headerId,
+			children: iconElement
+		}),
+		/* @__PURE__ */ jsx("span", {
+			id: headerId,
+			className: "ald-collapse-header-text ant-collapse-header-text tw-flex-1 tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--content-primary)]",
+			children: header
+		}),
+		expandIconPosition === "end" && /* @__PURE__ */ jsx("button", {
+			...triggerProps,
+			className: "tw-flex tw-cursor-pointer tw-items-center tw-border-0 tw-bg-transparent tw-p-0",
+			"aria-labelledby": headerId,
+			children: iconElement
+		})
+	] }) : /* @__PURE__ */ jsxs("button", {
+		...triggerProps,
+		className: "tw-flex tw-flex-1 tw-items-center tw-gap-2 tw-border-0 tw-bg-transparent tw-p-0 tw-text-left",
+		children: [
+			expandIconPosition === "start" && iconElement,
+			headerText,
+			expandIconPosition === "end" && iconElement
+		]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cn("ald-collapse-item ant-collapse-item tw-w-full", isActive && "ald-collapse-item-active", disabled && "tw-pointer-events-none tw-opacity-50", `ald-collapse-item-${size}`, className),
 		style,
+		"aria-disabled": disabled || collapsible === "disabled" || void 0,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn("ald-collapse-header ant-collapse-header tw-flex tw-items-center tw-gap-2 tw-p-3", !disabled && collapsible !== "icon" && "tw-cursor-pointer"),
-			onClick: disabled || collapsible === "icon" ? void 0 : onToggle,
-			children: [
-				expandIconPosition === "start" && iconElement,
-				/* @__PURE__ */ jsx("span", {
-					className: "ald-collapse-header-text ant-collapse-header-text tw-flex-1 tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--content-primary)]",
-					children: header
-				}),
-				extra && /* @__PURE__ */ jsx("span", {
-					className: "ald-collapse-extra ant-collapse-extra",
-					onClick: (e) => e.stopPropagation(),
-					children: extra
-				}),
-				expandIconPosition === "end" && iconElement
-			]
+			className: cn("ald-collapse-header ant-collapse-header tw-flex tw-items-center tw-gap-2 tw-p-3", !disabled && collapsible !== "icon" && collapsible !== "disabled" && "tw-cursor-pointer"),
+			children: [headerTrigger, extra && /* @__PURE__ */ jsx("span", {
+				className: "ald-collapse-extra ant-collapse-extra",
+				onClick: (e) => e.stopPropagation(),
+				children: extra
+			})]
 		}), /* @__PURE__ */ jsx("div", {
+			id: contentId,
+			role: "region",
+			"aria-labelledby": triggerId,
+			"aria-hidden": !isActive,
 			className: "tw-grid tw-transition-[grid-template-rows] tw-duration-200",
 			style: { gridTemplateRows: isActive ? "1fr" : "0fr" },
 			onTransitionEnd: handleTransitionEnd,

package/dist/Collapse/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Collapse/index.tsx"],"sourcesContent":["import React, { useContext, useRef, useState } from 'react';\nimport { ArrowRightLightLine } from '../Icon';\nimport { cn } from '../lib/utils';\n\n/**\n * Compound Components 模式：Collapse 通过 Context 注入受控状态 + 视觉配置，\n * Panel 始终自渲染（header + 折叠交互），靠 `panelKey` 与父协调 activeKey /\n * accordion。设计对齐 Radix / Mantine：Item 自渲染，靠声明式 value 与 Root 通信。\n *\n * 这里不再做\"扫描 children 提 Panel props 再替换渲染\"的 hack——后者无法穿透\n * forwardRef / 业务包装组件边界，是 ald v3 升级回归\"包装 Panel 丢 header\"的根因。\n */\ninterface CollapseContextValue {\n  // 视觉配置\n  expandIcon?: (props: { isActive: boolean }) => React.ReactNode;\n  expandIconPosition: 'start' | 'end';\n  bordered: boolean;\n  size: 'large' | 'middle' | 'small';\n  collapsible?: 'header' | 'icon' | 'disabled';\n  // 受控状态协调\n  activeKeys: string[];\n  toggleKey: (key: string) => void;\n}\n\nconst CollapseContext = React.createContext<CollapseContextValue | null>(null);\n\nexport interface CollapsePanelProps {\n  /**\n   * 与父 Collapse 协调 activeKey / accordion 的 key。\n   * 不提供时 Panel 走内部 state（视觉一致但不参与父协调）。\n   * Radix Accordion 等同 prop 名是 `value`；这里沿用 `panelKey` 与已有\n   * `Collapse items[].key` 命名一致，迁移成本最低。\n   */\n  panelKey?: string;\n  header?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  extra?: React.ReactNode;\n  forceRender?: boolean;\n  collapsible?: 'header' | 'icon' | 'disabled';\n  showArrow?: boolean;\n}\n\nexport interface CollapseProps {\n  activeKey?: string | string[];\n  defaultActiveKey?: string | string[];\n  accordion?: boolean;\n  onChange?: (key: string | string[]) => void;\n  className?: string;\n  style?: React.CSSProperties;\n  bordered?: boolean;\n  expandIconPosition?: 'start' | 'end' | 'left' | 'right';\n  expandIcon?: (props: { isActive: boolean }) => React.ReactNode;\n  ghost?: boolean;\n  size?: 'large' | 'middle' | 'small';\n  collapsible?: 'header' | 'icon' | 'disabled';\n  children?: React.ReactNode;\n  items?: Array<{\n    key: string;\n    label: React.ReactNode;\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    extra?: React.ReactNode;\n    disabled?: boolean;\n    collapsible?: 'header' | 'icon' | 'disabled';\n    forceRender?: boolean;\n  }>;\n}\n\nconst normalizeKeys = (keys: string | string[] | undefined): string[] => {\n  if (!keys) return [];\n  return Array.isArray(keys) ? keys : [keys];\n};\n\nconst Collapse = (props: CollapseProps) => {\n  const {\n    defaultActiveKey = [],\n    activeKey: controlledActiveKey,\n    accordion,\n    onChange,\n    className,\n    style,\n    bordered = true,\n    ghost,\n    size = 'middle',\n    collapsible,\n    expandIconPosition,\n    expandIcon,\n    items: itemsProp,\n    children,\n  } = props;\n\n  const resolvedPosition =\n    expandIconPosition === 'left'\n      ? 'start'\n      : expandIconPosition === 'right'\n      ? 'end'\n      : expandIconPosition ?? 'start';\n\n  const [internalActiveKey, setInternalActiveKey] = useState<string[]>(\n    normalizeKeys(defaultActiveKey),\n  );\n\n  const activeKeys =\n    controlledActiveKey !== undefined\n      ? normalizeKeys(controlledActiveKey)\n      : internalActiveKey;\n\n  const toggleKey = (key: string) => {\n    let newKeys: string[];\n    if (accordion) {\n      newKeys = activeKeys.includes(key) ? [] : [key];\n    } else {\n      newKeys = activeKeys.includes(key)\n        ? activeKeys.filter((k) => k !== key)\n        : [...activeKeys, key];\n    }\n    if (controlledActiveKey === undefined) {\n      setInternalActiveKey(newKeys);\n    }\n    onChange?.(accordion ? newKeys[0] || '' : newKeys);\n  };\n\n  const contextValue: CollapseContextValue = {\n    expandIcon,\n    expandIconPosition: resolvedPosition,\n    bordered: bordered && !ghost,\n    size,\n    collapsible,\n    activeKeys,\n    toggleKey,\n  };\n\n  /**\n   * children 路径：向后兼容老用法 `<Collapse><Collapse.Panel key=\"1\" ...>`\n   * ——React `key` 是保留字不会进 Panel props，所以把它读出来 cloneElement\n   * 注入到 `panelKey` 上（只对直接子元素生效；包装组件需要业务侧自己透传）。\n   */\n  const enhancedChildren = React.Children.map(children, (child) => {\n    if (!React.isValidElement<CollapsePanelProps>(child)) return child;\n    if ((child.type as any)?.__COLLAPSE_PANEL !== true) return child;\n    if (child.props.panelKey !== undefined) return child;\n    if (child.key === null || child.key === undefined) return child;\n    return React.cloneElement(child, { panelKey: String(child.key) });\n  });\n\n  return (\n    <CollapseContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n          // 相邻 .ald-collapse-item 用 CSS 兄弟选择器画分隔线，避免在 React 树里\n          // 注入 <div .ald-collapse-divider /> 节点——后者在\"业务包装 Panel\"场景\n          // 需要 Collapse 知道子元素拓扑，与 Compound Components 解耦原则冲突。\n          'ald-collapse ant-collapse tw-flex tw-flex-col tw-items-stretch tw-overflow-hidden tw-rounded-r-75 [&>.ald-collapse-item+.ald-collapse-item]:tw-border-0 [&>.ald-collapse-item+.ald-collapse-item]:tw-border-t [&>.ald-collapse-item+.ald-collapse-item]:tw-border-solid [&>.ald-collapse-item+.ald-collapse-item]:tw-border-[var(--border-default)]',\n          !ghost && !bordered && 'tw-bg-[var(--background-neutral-subtle)]',\n          !ghost &&\n            bordered &&\n            'tw-border tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-neutral-subtle)]',\n          `ald-collapse-${size}`,\n          className,\n        )}\n        style={style}\n      >\n        {itemsProp && itemsProp.length > 0\n          ? itemsProp.map((item) => (\n              <Panel\n                key={item.key}\n                panelKey={item.key}\n                header={item.label}\n                disabled={item.disabled}\n                collapsible={item.collapsible ?? collapsible}\n                extra={item.extra}\n                className={item.className}\n                style={item.style}\n                forceRender={item.forceRender}\n              >\n                {item.children}\n              </Panel>\n            ))\n          : enhancedChildren}\n      </div>\n    </CollapseContext.Provider>\n  );\n};\n\n/**\n * Panel —— 始终自渲染。\n *\n * - 在 `<Collapse>` 内（ctx 存在）+ 提供 `panelKey`：受控渲染（参与父 activeKey\n *   / accordion 协调），点击调 `ctx.toggleKey`，`isActive` 来自 `ctx.activeKeys`。\n * - 在 `<Collapse>` 内（ctx 存在）+ 未提供 `panelKey`：自渲染 + 独立 state，视觉\n *   配置仍来自 ctx，但与父受控状态隔离（业务包装组件没透传 panelKey 时的退化）。\n * - `<Collapse>` 外使用（ctx 不存在）：完全自给自足，视觉配置走默认值。\n *\n * 用 forwardRef 转发 ref 到 `.ald-collapse-item` root div——业务侧包装组件常\n * 需要拿到 panel 容器引用做滚动定位等，向后兼容旧版本 Panel 暴露的 ref API。\n */\nconst Panel = React.forwardRef<HTMLDivElement, CollapsePanelProps>(\n  (props, ref) => {\n    const ctx = useContext(CollapseContext);\n    const {\n      panelKey,\n      header,\n      children,\n      className,\n      style,\n      extra,\n      disabled,\n      collapsible,\n      forceRender,\n    } = props;\n\n    const isControlled = ctx !== null && panelKey !== undefined;\n\n    const [internalActive, setInternalActive] = useState(false);\n\n    const isActive = isControlled\n      ? ctx!.activeKeys.includes(panelKey!)\n      : internalActive;\n\n    const onToggle = () => {\n      if (isControlled) {\n        ctx!.toggleKey(panelKey!);\n      } else {\n        setInternalActive((v) => !v);\n      }\n    };\n\n    const expandIcon = ctx?.expandIcon;\n    const expandIconPosition = ctx?.expandIconPosition ?? 'start';\n    const bordered = ctx?.bordered ?? true;\n    const size = ctx?.size ?? 'middle';\n    const mergedCollapsible = collapsible ?? ctx?.collapsible;\n\n    return (\n      <CollapsePanelView\n        ref={ref}\n        header={header}\n        isActive={isActive}\n        onToggle={onToggle}\n        disabled={disabled || mergedCollapsible === 'disabled'}\n        extra={extra}\n        className={className}\n        style={style}\n        forceRender={forceRender}\n        expandIcon={expandIcon}\n        expandIconPosition={expandIconPosition}\n        bordered={bordered}\n        size={size}\n        collapsible={mergedCollapsible}\n      >\n        {children}\n      </CollapsePanelView>\n    );\n  },\n);\n\n(Panel as any).__COLLAPSE_PANEL = true;\n\ninterface CollapsePanelViewProps {\n  header: React.ReactNode;\n  isActive: boolean;\n  onToggle: () => void;\n  disabled?: boolean;\n  extra?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  forceRender?: boolean;\n  expandIcon?: (props: { isActive: boolean }) => React.ReactNode;\n  expandIconPosition?: 'start' | 'end';\n  bordered?: boolean;\n  size?: 'large' | 'middle' | 'small';\n  collapsible?: 'header' | 'icon' | 'disabled';\n}\n\n/** 哑视图组件，承担 DOM 结构 + 折叠动画；不持有受控状态，ref 转发到 root div。 */\nconst CollapsePanelView = React.forwardRef<\n  HTMLDivElement,\n  CollapsePanelViewProps\n>((props, ref) => {\n  const {\n    header,\n    isActive,\n    onToggle,\n    disabled,\n    extra,\n    className,\n    style,\n    children,\n    forceRender,\n    expandIcon,\n    expandIconPosition = 'start',\n    bordered,\n    size = 'middle',\n    collapsible = 'header',\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [rendered, setRendered] = useState(isActive || !!forceRender);\n\n  if (isActive && !rendered) {\n    setRendered(true);\n  }\n\n  const handleTransitionEnd = () => {\n    if (!isActive && !forceRender) {\n      setRendered(false);\n    }\n  };\n\n  const iconNode = expandIcon ? (\n    expandIcon({ isActive })\n  ) : (\n    <ArrowRightLightLine size={20} color=\"var(--content-secondary)\" />\n  );\n\n  const iconElement = (\n    <span\n      className=\"ald-collapse-expand-icon ant-collapse-expand-icon tw-flex tw-items-center\"\n      style={{\n        transform: isActive ? 'rotate(90deg)' : 'rotate(0deg)',\n        transition: 'transform 200ms',\n      }}\n      onClick={\n        disabled || collapsible !== 'icon'\n          ? undefined\n          : (e) => {\n              e.stopPropagation();\n              onToggle();\n            }\n      }\n    >\n      {iconNode}\n    </span>\n  );\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'ald-collapse-item ant-collapse-item tw-w-full',\n        isActive && 'ald-collapse-item-active',\n        disabled && 'tw-pointer-events-none tw-opacity-50',\n        `ald-collapse-item-${size}`,\n        className,\n      )}\n      style={style}\n    >\n      <div\n        className={cn(\n          'ald-collapse-header ant-collapse-header tw-flex tw-items-center tw-gap-2 tw-p-3',\n          !disabled && collapsible !== 'icon' && 'tw-cursor-pointer',\n        )}\n        onClick={disabled || collapsible === 'icon' ? undefined : onToggle}\n      >\n        {expandIconPosition === 'start' && iconElement}\n        <span className=\"ald-collapse-header-text ant-collapse-header-text tw-flex-1 tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--content-primary)]\">\n          {header}\n        </span>\n        {extra && (\n          // extra 区域里常放 Switch / Button 等交互控件，点击不该冒泡触发 panel\n          // 切展开/收起。antd Collapse 也是同样行为；不强制消费方在每个 extra\n          // 控件上自己写 stopPropagation。\n          <span\n            className=\"ald-collapse-extra ant-collapse-extra\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            {extra}\n          </span>\n        )}\n        {expandIconPosition === 'end' && iconElement}\n      </div>\n      <div\n        className=\"tw-grid tw-transition-[grid-template-rows] tw-duration-200\"\n        style={{ gridTemplateRows: isActive ? '1fr' : '0fr' }}\n        onTransitionEnd={handleTransitionEnd}\n      >\n        <div className=\"tw-overflow-hidden\">\n          {rendered && (\n            <div\n              ref={contentRef}\n              className={cn(\n                'ald-collapse-content ant-collapse-content tw-flex tw-flex-col tw-items-stretch tw-gap-2.5 tw-self-stretch',\n                bordered\n                  ? 'tw-bg-[var(--background-default)] tw-p-4'\n                  : 'tw-px-4 tw-pb-4 tw-pt-0',\n              )}\n            >\n              {children}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nCollapse.Panel = Panel;\n\nexport default Collapse;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Collapse/index.tsx"],"sourcesContent":["import React, { useContext, useEffect, useId, useRef, useState } from 'react';\nimport { ArrowRightLightLine } from '../Icon';\nimport { cn } from '../lib/utils';\n\n/**\n * Compound Components 模式：Collapse 通过 Context 注入受控状态 + 视觉配置，\n * Panel 始终自渲染（header + 折叠交互），靠 `panelKey` 与父协调 activeKey /\n * accordion。设计对齐 Radix / Mantine：Item 自渲染，靠声明式 value 与 Root 通信。\n *\n * 这里不再做\"扫描 children 提 Panel props 再替换渲染\"的 hack——后者无法穿透\n * forwardRef / 业务包装组件边界，是 ald v3 升级回归\"包装 Panel 丢 header\"的根因。\n */\ninterface CollapseContextValue {\n  // 视觉配置\n  expandIcon?: (props: { isActive: boolean }) => React.ReactNode;\n  expandIconPosition: 'start' | 'end';\n  bordered: boolean;\n  size: 'large' | 'middle' | 'small';\n  collapsible?: 'header' | 'icon' | 'disabled';\n  // 受控状态协调\n  activeKeys: string[];\n  toggleKey: (key: string) => void;\n}\n\nconst CollapseContext = React.createContext<CollapseContextValue | null>(null);\n\nexport interface CollapsePanelProps {\n  /**\n   * 与父 Collapse 协调 activeKey / accordion 的 key。\n   * 不提供时 Panel 走内部 state（视觉一致但不参与父协调）。\n   * Radix Accordion 等同 prop 名是 `value`；这里沿用 `panelKey` 与已有\n   * `Collapse items[].key` 命名一致，迁移成本最低。\n   */\n  panelKey?: string;\n  header?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  extra?: React.ReactNode;\n  forceRender?: boolean;\n  collapsible?: 'header' | 'icon' | 'disabled';\n  showArrow?: boolean;\n}\n\nexport interface CollapseProps {\n  activeKey?: string | string[];\n  defaultActiveKey?: string | string[];\n  accordion?: boolean;\n  onChange?: (key: string | string[]) => void;\n  className?: string;\n  style?: React.CSSProperties;\n  bordered?: boolean;\n  expandIconPosition?: 'start' | 'end' | 'left' | 'right';\n  expandIcon?: (props: { isActive: boolean }) => React.ReactNode;\n  ghost?: boolean;\n  size?: 'large' | 'middle' | 'small';\n  collapsible?: 'header' | 'icon' | 'disabled';\n  children?: React.ReactNode;\n  items?: Array<{\n    key: string;\n    label: React.ReactNode;\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    extra?: React.ReactNode;\n    disabled?: boolean;\n    collapsible?: 'header' | 'icon' | 'disabled';\n    forceRender?: boolean;\n  }>;\n}\n\nconst normalizeKeys = (keys: string | string[] | undefined): string[] => {\n  if (!keys) return [];\n  return Array.isArray(keys) ? keys : [keys];\n};\n\nconst Collapse = (props: CollapseProps) => {\n  const {\n    defaultActiveKey = [],\n    activeKey: controlledActiveKey,\n    accordion,\n    onChange,\n    className,\n    style,\n    bordered = true,\n    ghost,\n    size = 'middle',\n    collapsible,\n    expandIconPosition,\n    expandIcon,\n    items: itemsProp,\n    children,\n  } = props;\n\n  const resolvedPosition =\n    expandIconPosition === 'left'\n      ? 'start'\n      : expandIconPosition === 'right'\n      ? 'end'\n      : expandIconPosition ?? 'start';\n\n  const [internalActiveKey, setInternalActiveKey] = useState<string[]>(\n    normalizeKeys(defaultActiveKey),\n  );\n\n  const activeKeys =\n    controlledActiveKey !== undefined\n      ? normalizeKeys(controlledActiveKey)\n      : internalActiveKey;\n\n  const toggleKey = (key: string) => {\n    let newKeys: string[];\n    if (accordion) {\n      newKeys = activeKeys.includes(key) ? [] : [key];\n    } else {\n      newKeys = activeKeys.includes(key)\n        ? activeKeys.filter((k) => k !== key)\n        : [...activeKeys, key];\n    }\n    if (controlledActiveKey === undefined) {\n      setInternalActiveKey(newKeys);\n    }\n    onChange?.(accordion ? newKeys[0] || '' : newKeys);\n  };\n\n  const contextValue: CollapseContextValue = {\n    expandIcon,\n    expandIconPosition: resolvedPosition,\n    bordered: bordered && !ghost,\n    size,\n    collapsible,\n    activeKeys,\n    toggleKey,\n  };\n\n  /**\n   * children 路径：向后兼容老用法 `<Collapse><Collapse.Panel key=\"1\" ...>`\n   * ——React `key` 是保留字不会进 Panel props，所以把它读出来 cloneElement\n   * 注入到 `panelKey` 上（只对直接子元素生效；包装组件需要业务侧自己透传）。\n   */\n  const enhancedChildren = React.Children.map(children, (child) => {\n    if (!React.isValidElement<CollapsePanelProps>(child)) return child;\n    if ((child.type as any)?.__COLLAPSE_PANEL !== true) return child;\n    if (child.props.panelKey !== undefined) return child;\n    if (child.key === null || child.key === undefined) return child;\n    return React.cloneElement(child, { panelKey: String(child.key) });\n  });\n\n  return (\n    <CollapseContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n          // 相邻 .ald-collapse-item 用 CSS 兄弟选择器画分隔线，避免在 React 树里\n          // 注入 <div .ald-collapse-divider /> 节点——后者在\"业务包装 Panel\"场景\n          // 需要 Collapse 知道子元素拓扑，与 Compound Components 解耦原则冲突。\n          'ald-collapse ant-collapse tw-flex tw-flex-col tw-items-stretch tw-overflow-hidden tw-rounded-r-75 [&>.ald-collapse-item+.ald-collapse-item]:tw-border-0 [&>.ald-collapse-item+.ald-collapse-item]:tw-border-t [&>.ald-collapse-item+.ald-collapse-item]:tw-border-solid [&>.ald-collapse-item+.ald-collapse-item]:tw-border-[var(--border-default)]',\n          !ghost && !bordered && 'tw-bg-[var(--background-neutral-subtle)]',\n          !ghost &&\n            bordered &&\n            'tw-border tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-neutral-subtle)]',\n          `ald-collapse-${size}`,\n          className,\n        )}\n        style={style}\n      >\n        {itemsProp && itemsProp.length > 0\n          ? itemsProp.map((item) => (\n              <Panel\n                key={item.key}\n                panelKey={item.key}\n                header={item.label}\n                disabled={item.disabled}\n                collapsible={item.collapsible ?? collapsible}\n                extra={item.extra}\n                className={item.className}\n                style={item.style}\n                forceRender={item.forceRender}\n              >\n                {item.children}\n              </Panel>\n            ))\n          : enhancedChildren}\n      </div>\n    </CollapseContext.Provider>\n  );\n};\n\n/**\n * Panel —— 始终自渲染。\n *\n * - 在 `<Collapse>` 内（ctx 存在）+ 提供 `panelKey`：受控渲染（参与父 activeKey\n *   / accordion 协调），点击调 `ctx.toggleKey`，`isActive` 来自 `ctx.activeKeys`。\n * - 在 `<Collapse>` 内（ctx 存在）+ 未提供 `panelKey`：自渲染 + 独立 state，视觉\n *   配置仍来自 ctx，但与父受控状态隔离（业务包装组件没透传 panelKey 时的退化）。\n * - `<Collapse>` 外使用（ctx 不存在）：完全自给自足，视觉配置走默认值。\n *\n * 用 forwardRef 转发 ref 到 `.ald-collapse-item` root div——业务侧包装组件常\n * 需要拿到 panel 容器引用做滚动定位等，向后兼容旧版本 Panel 暴露的 ref API。\n */\nconst Panel = React.forwardRef<HTMLDivElement, CollapsePanelProps>(\n  (props, ref) => {\n    const ctx = useContext(CollapseContext);\n    const {\n      panelKey,\n      header,\n      children,\n      className,\n      style,\n      extra,\n      disabled,\n      collapsible,\n      forceRender,\n    } = props;\n\n    const isControlled = ctx !== null && panelKey !== undefined;\n\n    const [internalActive, setInternalActive] = useState(false);\n\n    const isActive = isControlled\n      ? ctx!.activeKeys.includes(panelKey!)\n      : internalActive;\n\n    const onToggle = () => {\n      if (isControlled) {\n        ctx!.toggleKey(panelKey!);\n      } else {\n        setInternalActive((v) => !v);\n      }\n    };\n\n    const expandIcon = ctx?.expandIcon;\n    const expandIconPosition = ctx?.expandIconPosition ?? 'start';\n    const bordered = ctx?.bordered ?? true;\n    const size = ctx?.size ?? 'middle';\n    const mergedCollapsible = collapsible ?? ctx?.collapsible;\n\n    return (\n      <CollapsePanelView\n        ref={ref}\n        header={header}\n        isActive={isActive}\n        onToggle={onToggle}\n        disabled={disabled || mergedCollapsible === 'disabled'}\n        extra={extra}\n        className={className}\n        style={style}\n        forceRender={forceRender}\n        expandIcon={expandIcon}\n        expandIconPosition={expandIconPosition}\n        bordered={bordered}\n        size={size}\n        collapsible={mergedCollapsible}\n      >\n        {children}\n      </CollapsePanelView>\n    );\n  },\n);\n\n(Panel as any).__COLLAPSE_PANEL = true;\n\ninterface CollapsePanelViewProps {\n  header: React.ReactNode;\n  isActive: boolean;\n  onToggle: () => void;\n  disabled?: boolean;\n  extra?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  forceRender?: boolean;\n  expandIcon?: (props: { isActive: boolean }) => React.ReactNode;\n  expandIconPosition?: 'start' | 'end';\n  bordered?: boolean;\n  size?: 'large' | 'middle' | 'small';\n  collapsible?: 'header' | 'icon' | 'disabled';\n}\n\n/** 哑视图组件，承担 DOM 结构 + 折叠动画；不持有受控状态，ref 转发到 root div。 */\nconst CollapsePanelView = React.forwardRef<\n  HTMLDivElement,\n  CollapsePanelViewProps\n>((props, ref) => {\n  const {\n    header,\n    isActive,\n    onToggle,\n    disabled,\n    extra,\n    className,\n    style,\n    children,\n    forceRender,\n    expandIcon,\n    expandIconPosition = 'start',\n    bordered,\n    size = 'middle',\n    collapsible = 'header',\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const triggerId = useId();\n  const headerId = useId();\n  const contentId = useId();\n  const [rendered, setRendered] = useState(isActive || !!forceRender);\n\n  useEffect(() => {\n    if (isActive || forceRender) {\n      setRendered(true);\n    }\n  }, [forceRender, isActive]);\n\n  const handleTransitionEnd = () => {\n    if (!isActive && !forceRender) {\n      setRendered(false);\n    }\n  };\n\n  const iconNode = expandIcon ? (\n    expandIcon({ isActive })\n  ) : (\n    <ArrowRightLightLine size={20} color=\"var(--content-secondary)\" />\n  );\n\n  const iconElement = (\n    <span\n      className=\"ald-collapse-expand-icon ant-collapse-expand-icon tw-flex tw-items-center\"\n      aria-hidden=\"true\"\n      style={{\n        transform: isActive ? 'rotate(90deg)' : 'rotate(0deg)',\n        transition: 'transform 200ms',\n      }}\n    >\n      {iconNode}\n    </span>\n  );\n\n  const triggerProps = {\n    type: 'button' as const,\n    id: triggerId,\n    'aria-expanded': isActive,\n    'aria-controls': contentId,\n    disabled,\n    onClick: onToggle,\n  };\n\n  const headerText = (\n    <span className=\"ald-collapse-header-text ant-collapse-header-text tw-flex-1 tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--content-primary)]\">\n      {header}\n    </span>\n  );\n\n  const headerTrigger =\n    collapsible === 'disabled' ? (\n      <div\n        id={triggerId}\n        className=\"tw-flex tw-flex-1 tw-items-center tw-gap-2\"\n        aria-disabled=\"true\"\n      >\n        {expandIconPosition === 'start' && iconElement}\n        {headerText}\n        {expandIconPosition === 'end' && iconElement}\n      </div>\n    ) : collapsible === 'icon' ? (\n      <>\n        {expandIconPosition === 'start' && (\n          <button\n            {...triggerProps}\n            className=\"tw-flex tw-cursor-pointer tw-items-center tw-border-0 tw-bg-transparent tw-p-0\"\n            aria-labelledby={headerId}\n          >\n            {iconElement}\n          </button>\n        )}\n        <span\n          id={headerId}\n          className=\"ald-collapse-header-text ant-collapse-header-text tw-flex-1 tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--content-primary)]\"\n        >\n          {header}\n        </span>\n        {expandIconPosition === 'end' && (\n          <button\n            {...triggerProps}\n            className=\"tw-flex tw-cursor-pointer tw-items-center tw-border-0 tw-bg-transparent tw-p-0\"\n            aria-labelledby={headerId}\n          >\n            {iconElement}\n          </button>\n        )}\n      </>\n    ) : (\n      <button\n        {...triggerProps}\n        className=\"tw-flex tw-flex-1 tw-items-center tw-gap-2 tw-border-0 tw-bg-transparent tw-p-0 tw-text-left\"\n      >\n        {expandIconPosition === 'start' && iconElement}\n        {headerText}\n        {expandIconPosition === 'end' && iconElement}\n      </button>\n    );\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'ald-collapse-item ant-collapse-item tw-w-full',\n        isActive && 'ald-collapse-item-active',\n        disabled && 'tw-pointer-events-none tw-opacity-50',\n        `ald-collapse-item-${size}`,\n        className,\n      )}\n      style={style}\n      aria-disabled={disabled || collapsible === 'disabled' || undefined}\n    >\n      <div\n        className={cn(\n          'ald-collapse-header ant-collapse-header tw-flex tw-items-center tw-gap-2 tw-p-3',\n          !disabled &&\n            collapsible !== 'icon' &&\n            collapsible !== 'disabled' &&\n            'tw-cursor-pointer',\n        )}\n      >\n        {headerTrigger}\n        {extra && (\n          // extra 区域里常放 Switch / Button 等交互控件，点击不该冒泡触发 panel\n          // 切展开/收起。antd Collapse 也是同样行为；不强制消费方在每个 extra\n          // 控件上自己写 stopPropagation。\n          <span\n            className=\"ald-collapse-extra ant-collapse-extra\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            {extra}\n          </span>\n        )}\n      </div>\n      <div\n        id={contentId}\n        role=\"region\"\n        aria-labelledby={triggerId}\n        aria-hidden={!isActive}\n        className=\"tw-grid tw-transition-[grid-template-rows] tw-duration-200\"\n        style={{ gridTemplateRows: isActive ? '1fr' : '0fr' }}\n        onTransitionEnd={handleTransitionEnd}\n      >\n        <div className=\"tw-overflow-hidden\">\n          {rendered && (\n            <div\n              ref={contentRef}\n              className={cn(\n                'ald-collapse-content ant-collapse-content tw-flex tw-flex-col tw-items-stretch tw-gap-2.5 tw-self-stretch',\n                bordered\n                  ? 'tw-bg-[var(--background-default)] tw-p-4'\n                  : 'tw-px-4 tw-pb-4 tw-pt-0',\n              )}\n            >\n              {children}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nCollapse.Panel = Panel;\n\nexport default Collapse;\n"],"mappings":"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"}

package/dist/ColorPicker/index.js

@@ -5,7 +5,7 @@ import { LocaleContext, getTranslator } from "../locale/default.js";
 import { colors, specialColors } from "./constant.js";
 /* empty css             */
 import ColorPicker$1 from "./ComplexColorPicker/index.js";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ColorPicker/index.tsx
 function getLocalRecentColors(localStorageKey) {
@@ -26,6 +26,15 @@ function ColorPicker({ className, value, icon, onChange, defaultColor = colors[0
 	const [recentColors, setRecentColors] = useState([]);
 	const overlayRef = useRef(null);
 	const wrapRef = useRef(null);
+	const triggerRef = useRef(null);
+	const swatchRefs = useRef({});
+	const triggerId = `ald-color-picker-trigger-${useId().replace(/:/g, "")}`;
+	const popupId = `ald-color-picker-popup-${useId().replace(/:/g, "")}`;
+	const swatchOrder = Array.from(new Set([
+		defaultColor,
+		...colors,
+		...recentColors
+	]));
 	useEffect(() => {
 		setRecentColors(getLocalRecentColors(localStorageKey));
 	}, [localStorageKey]);
@@ -36,76 +45,115 @@ function ColorPicker({ className, value, icon, onChange, defaultColor = colors[0
 		setLocalRecentColors(localStorageKey, newRecentColors);
 		onChange?.(color);
 		setOpen(false);
+		window.setTimeout(() => triggerRef.current?.focus(), 0);
 	};
 	useEffect(() => {
 		const handleClick = (e) => {
-			if (wrapRef.current?.contains(e.target)) return setOpen(!open);
-			if (!overlayRef.current?.contains(e.target)) return setOpen(false);
+			if (!wrapRef.current?.contains(e.target) && !overlayRef.current?.contains(e.target)) return setOpen(false);
 		};
 		document.addEventListener("click", handleClick);
 		return () => {
 			document.removeEventListener("click", handleClick);
 		};
-	}, [open]);
+	}, []);
+	useEffect(() => {
+		if (!open) return;
+		const selectedIndex = Math.max(0, swatchOrder.indexOf(value ?? defaultColor));
+		window.setTimeout(() => {
+			swatchRefs.current[swatchOrder[selectedIndex]]?.focus();
+		}, 0);
+	}, [
+		defaultColor,
+		open,
+		swatchOrder,
+		value
+	]);
+	useEffect(() => {
+		triggerRef.current?.setAttribute("aria-expanded", String(open));
+		triggerRef.current?.setAttribute("aria-controls", popupId);
+	}, [open, popupId]);
+	const renderSwatch = (color, label) => {
+		const selected = color === value;
+		const index = swatchOrder.indexOf(color);
+		const selectedIndex = Math.max(0, swatchOrder.indexOf(value ?? defaultColor));
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			id: `${popupId}-swatch-${encodeURIComponent(color)}`,
+			ref: (node) => {
+				swatchRefs.current[color] = node;
+			},
+			role: "radio",
+			"aria-label": label,
+			"aria-checked": selected,
+			tabIndex: index === selectedIndex ? 0 : -1,
+			disabled,
+			className: cn("tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)] tw-bg-transparent tw-p-0", { "tw-border-[var(--border-neutral-strong)]": selected }),
+			onClick: () => {
+				if (!selected) onColorSelect(color);
+			},
+			onKeyDown: (event) => {
+				if (event.key === "Escape") {
+					event.preventDefault();
+					setOpen(false);
+					triggerRef.current?.focus();
+					return;
+				}
+				if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+					event.preventDefault();
+					swatchRefs.current[swatchOrder[(index + 1) % swatchOrder.length]]?.focus();
+					return;
+				}
+				if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+					event.preventDefault();
+					swatchRefs.current[swatchOrder[(index - 1 + swatchOrder.length) % swatchOrder.length]]?.focus();
+					return;
+				}
+				if (event.key === "Home" || event.key === "End") {
+					event.preventDefault();
+					swatchRefs.current[swatchOrder[event.key === "Home" ? 0 : swatchOrder.length - 1]]?.focus();
+				}
+			},
+			style: { borderColor: selected ? "var(--border-neutral-strong)" : specialColors.includes(color) ? "var(--border-neutral-subtle)" : color },
+			children: /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("tw-block tw-h-full tw-w-full", { "tw-m-px tw-h-[17px] tw-w-[17px]": selected }),
+				style: { backgroundColor: color }
+			})
+		}, `${label}-${color}`);
+	};
 	const overlay = /* @__PURE__ */ jsxs("div", {
+		id: popupId,
+		role: "radiogroup",
+		"aria-label": t.ColorPicker.standardColor,
 		className: "tw-relative tw-box-border tw-w-[253px] tw-rounded-sm tw-bg-[var(--background-default)] tw-p-[8px_7px]",
 		ref: overlayRef,
+		onKeyDown: (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				setOpen(false);
+				triggerRef.current?.focus();
+			}
+		},
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "tw-flex tw-items-center tw-text-xs",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: cn("tw-mr-2 tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)]", { "tw-border-[var(--border-neutral-strong)]": defaultColor === value }),
-					onClick: () => {
-						if (disabled) return;
-						if (defaultColor === value) return;
-						onColorSelect(defaultColor);
-					},
-					children: /* @__PURE__ */ jsx("div", {
-						className: "tw-size-full",
-						style: { backgroundColor: defaultColor }
-					})
+					className: "tw-mr-2",
+					children: renderSwatch(defaultColor, t.ColorPicker.default)
 				}), t.ColorPicker.default]
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "tw-mt-1.5 tw-text-xs",
 				children: [/* @__PURE__ */ jsx("p", { children: t.ColorPicker.standardColor }), /* @__PURE__ */ jsx("div", {
 					className: "tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-evenly tw-gap-[4px_2px] tw-text-[0px]",
-					children: colors.map((color) => {
-						const isSelected = color === value;
-						return /* @__PURE__ */ jsx("div", {
-							className: cn("tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)]", { "tw-border-[var(--border-neutral-strong)]": isSelected }),
-							onClick: () => {
-								if (color === value) return;
-								onColorSelect(color);
-							},
-							style: { borderColor: isSelected ? "var(--border-neutral-strong)" : specialColors.includes(color) ? "var(--border-neutral-subtle)" : color },
-							children: /* @__PURE__ */ jsx("div", {
-								className: cn("tw-h-full tw-w-full", { "tw-m-px tw-h-[17px] tw-w-[17px]": isSelected }),
-								style: { backgroundColor: color }
-							})
-						}, color);
-					})
+					children: colors.map((color) => renderSwatch(color, color))
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "tw-mt-1.5 tw-text-xs",
 				children: [/* @__PURE__ */ jsx("p", { children: t.ColorPicker.recentlyUsed }), /* @__PURE__ */ jsx("div", {
 					className: "tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-start tw-gap-[4px_2px] tw-text-[0px]",
-					children: recentColors.map((color) => {
-						const isSelected = color === value;
-						return /* @__PURE__ */ jsx("div", {
-							className: cn("tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)]", { "tw-border-[var(--border-neutral-strong)]": isSelected }),
-							onClick: () => {
-								if (color === value) return;
-								onColorSelect(color);
-							},
-							style: { borderColor: isSelected ? "var(--border-neutral-strong)" : specialColors.includes(color) ? "var(--border-neutral-subtle)" : color },
-							children: /* @__PURE__ */ jsx("div", {
-								className: cn("tw-h-full tw-w-full", { "tw-m-px tw-h-[17px] tw-w-[17px]": isSelected }),
-								style: { backgroundColor: color }
-							})
-						}, color);
-					})
+					children: recentColors.map((color) => renderSwatch(color, color))
 				})]
 			})
 		]
@@ -116,13 +164,20 @@ function ColorPicker({ className, value, icon, onChange, defaultColor = colors[0
 		children: /* @__PURE__ */ jsx(Dropdown, {
 			trigger: "click",
 			open,
+			onOpenChange: setOpen,
 			disabled,
 			placement: "bottom-start",
 			overlayClassName: "ald-color-picker-overlay-wrapper",
 			dropdownRender: () => {
 				return overlay;
 			},
-			children: /* @__PURE__ */ jsxs("div", {
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				id: triggerId,
+				ref: triggerRef,
+				"aria-label": t.ColorPicker.default,
+				"aria-controls": popupId,
+				"aria-expanded": open,
 				className: cn("ald-color-picker-wrapper", "tw-flex tw-flex-row tw-items-center tw-justify-between tw-gap-1 tw-h-7 tw-px-2.5 tw-py-1.5 tw-bg-[var(--background-default)] tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-box-border tw-cursor-pointer tw-rounded tw-text-[var(--content-primary)] tw-transition-[border] tw-duration-500 tw-ease-in-out", {
 					"tw-border-[var(--border-brand-subtle)]": open && bordered !== false,
 					"tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-on-subtle)]": disabled,
@@ -131,7 +186,18 @@ function ColorPicker({ className, value, icon, onChange, defaultColor = colors[0
 					"hover:tw-border-[var(--action-ghost-normal)]": bordered === false
 				}),
 				onClick: (e) => {
-					if (disabled) e.stopPropagation();
+					if (disabled) {
+						e.stopPropagation();
+						return;
+					}
+					setOpen((current) => !current);
+				},
+				onKeyDown: (event) => {
+					if (disabled) return;
+					if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+						event.preventDefault();
+						setOpen(true);
+					}
 				},
 				children: [icon ? /* @__PURE__ */ jsxs("div", {
 					className: "tw-relative -tw-top-px",