@base-ui/react 1.7.0 → 1.8.0

package/checkbox-group/CheckboxGroup.js

@@ -8,8 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.CheckboxGroup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useControlled = require("@base-ui/utils/useControlled");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _empty = require("@base-ui/utils/empty");
+var _areArraysEqual = require("@base-ui/utils/areArraysEqual");
 var _useBaseUiId = require("../internals/useBaseUiId");
 var _useRenderElement = require("../internals/useRenderElement");
 var _CheckboxGroupContext = require("./CheckboxGroupContext");
@@ -17,11 +19,11 @@ var _useFieldValidation = require("../field/root/useFieldValidation");
 var _FieldRootContext = require("../internals/field-root-context/FieldRootContext");
 var _useRegisterFieldControl = require("../internals/field-register-control/useRegisterFieldControl");
 var _LabelableContext = require("../internals/labelable-provider/LabelableContext");
+var _useLabelableId = require("../internals/labelable-provider/useLabelableId");
 var _constants = require("../internals/field-constants/constants");
 var _useCheckboxGroupParent = require("./useCheckboxGroupParent");
 var _FormContext = require("../internals/form-context/FormContext");
 var _useValueChanged = require("../internals/useValueChanged");
-var _areArraysEqual = require("../internals/areArraysEqual");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Provides a shared state to a series of checkboxes.
@@ -52,6 +54,7 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/React.forwardRef(func
   } = (0, _FieldRootContext.useFieldRootContext)();
   const {
     labelId,
+    registerControlId,
     getDescriptionProps
   } = (0, _LabelableContext.useLabelableContext)();
   const {
@@ -60,10 +63,7 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/React.forwardRef(func
   } = (0, _FormContext.useFormContext)();
   const disabled = fieldDisabled || disabledProp;
   const defaultValue = defaultValueProp ?? _empty.EMPTY_ARRAY;
-
-  // A controlled value can still be `undefined` at runtime even though `useControlled`'s
-  // generic return type says otherwise. Keep the fallback to prevent group consumers from crashing.
-  const [value = _empty.EMPTY_ARRAY, setValueUnwrapped] = (0, _useControlled.useControlled)({
+  const [value, setValueUnwrapped] = (0, _useControlled.useControlled)({
     controlled: externalValue,
     default: defaultValue,
     name: 'CheckboxGroup',
@@ -81,6 +81,12 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/React.forwardRef(func
     value,
     onValueChange: setValue
   });
+
+  // The group is the field's control and takes its name from `aria-labelledby`, so `Field.Label`
+  // must not point `htmlFor` at one arbitrary checkbox inside the group.
+  (0, _useLabelableId.useLabelableId)({
+    id: null
+  });
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   const getInputControl = validation.getInputControl;
   const controlRef = React.useMemo(() => ({
@@ -102,12 +108,14 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/React.forwardRef(func
     return value.filter(inputValue => successfulValues.has(inputValue));
   });
   (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, id, value, getFormValue, !!fieldName && !disabled, fieldName);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    setFilled(value.length > 0);
+  }, [value, setFilled]);
   (0, _useValueChanged.useValueChanged)(value, () => {
     if (fieldName) {
       clearErrors(fieldName);
     }
     const initialValue = Array.isArray(validityData.initialValue) ? validityData.initialValue : _empty.EMPTY_ARRAY;
-    setFilled(value.length > 0);
     setDirty(!(0, _areArraysEqual.areArraysEqual)(value, initialValue));
     validation.change(value);
   });
@@ -121,8 +129,9 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/React.forwardRef(func
     setValue,
     parent,
     disabled,
-    validation
-  }), [allValues, value, setValue, parent, disabled, validation]);
+    validation,
+    registerControlId
+  }), [allValues, value, setValue, parent, disabled, validation, registerControlId]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,

package/checkbox-group/CheckboxGroup.mjs

@@ -2,8 +2,10 @@
 
 import * as React from 'react';
 import { useControlled } from '@base-ui/utils/useControlled';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { EMPTY_ARRAY } from '@base-ui/utils/empty';
+import { areArraysEqual } from '@base-ui/utils/areArraysEqual';
 import { useBaseUiId } from "../internals/useBaseUiId.mjs";
 import { useRenderElement } from "../internals/useRenderElement.mjs";
 import { CheckboxGroupContext } from "./CheckboxGroupContext.mjs";
@@ -11,11 +13,11 @@ import { isEligibleInput } from "../field/root/useFieldValidation.mjs";
 import { useFieldRootContext } from "../internals/field-root-context/FieldRootContext.mjs";
 import { useRegisterFieldControl } from "../internals/field-register-control/useRegisterFieldControl.mjs";
 import { useLabelableContext } from "../internals/labelable-provider/LabelableContext.mjs";
+import { useLabelableId } from "../internals/labelable-provider/useLabelableId.mjs";
 import { fieldValidityMapping } from "../internals/field-constants/constants.mjs";
 import { useCheckboxGroupParent } from "./useCheckboxGroupParent.mjs";
 import { useFormContext } from "../internals/form-context/FormContext.mjs";
 import { useValueChanged } from "../internals/useValueChanged.mjs";
-import { areArraysEqual } from "../internals/areArraysEqual.mjs";
 
 /**
  * Provides a shared state to a series of checkboxes.
@@ -47,6 +49,7 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef(function CheckboxGrou
   } = useFieldRootContext();
   const {
     labelId,
+    registerControlId,
     getDescriptionProps
   } = useLabelableContext();
   const {
@@ -55,10 +58,7 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef(function CheckboxGrou
   } = useFormContext();
   const disabled = fieldDisabled || disabledProp;
   const defaultValue = defaultValueProp ?? EMPTY_ARRAY;
-
-  // A controlled value can still be `undefined` at runtime even though `useControlled`'s
-  // generic return type says otherwise. Keep the fallback to prevent group consumers from crashing.
-  const [value = EMPTY_ARRAY, setValueUnwrapped] = useControlled({
+  const [value, setValueUnwrapped] = useControlled({
     controlled: externalValue,
     default: defaultValue,
     name: 'CheckboxGroup',
@@ -76,6 +76,12 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef(function CheckboxGrou
     value,
     onValueChange: setValue
   });
+
+  // The group is the field's control and takes its name from `aria-labelledby`, so `Field.Label`
+  // must not point `htmlFor` at one arbitrary checkbox inside the group.
+  useLabelableId({
+    id: null
+  });
   const id = useBaseUiId(idProp);
   const getInputControl = validation.getInputControl;
   const controlRef = React.useMemo(() => ({
@@ -97,12 +103,14 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef(function CheckboxGrou
     return value.filter(inputValue => successfulValues.has(inputValue));
   });
   useRegisterFieldControl(controlRef, id, value, getFormValue, !!fieldName && !disabled, fieldName);
+  useIsoLayoutEffect(() => {
+    setFilled(value.length > 0);
+  }, [value, setFilled]);
   useValueChanged(value, () => {
     if (fieldName) {
       clearErrors(fieldName);
     }
     const initialValue = Array.isArray(validityData.initialValue) ? validityData.initialValue : EMPTY_ARRAY;
-    setFilled(value.length > 0);
     setDirty(!areArraysEqual(value, initialValue));
     validation.change(value);
   });
@@ -116,8 +124,9 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef(function CheckboxGrou
     setValue,
     parent,
     disabled,
-    validation
-  }), [allValues, value, setValue, parent, disabled, validation]);
+    validation,
+    registerControlId
+  }), [allValues, value, setValue, parent, disabled, validation, registerControlId]);
   const element = useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,

package/checkbox-group/CheckboxGroupContext.d.mts

@@ -3,6 +3,7 @@ import type { UseFieldValidationReturnValue } from "../field/root/useFieldValida
 import type { UseCheckboxGroupParentReturnValue } from "./useCheckboxGroupParent.mjs";
 import type { BaseUIChangeEventDetails } from "../internals/createBaseUIEventDetails.mjs";
 import type { BaseUIEventReasons } from "../internals/reasons.mjs";
+import type { LabelableContext } from "../internals/labelable-provider/LabelableContext.mjs";
 export interface CheckboxGroupContext {
   value: string[];
   setValue: (value: string[], eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
@@ -10,6 +11,11 @@ export interface CheckboxGroupContext {
   parent: UseCheckboxGroupParentReturnValue;
   disabled: boolean;
   validation: UseFieldValidationReturnValue;
+  /**
+   * `registerControlId` of the labelable scope the group renders in. A checkbox seeing the same
+   * function shares that scope, so the group, not the checkbox, is the field's control.
+   */
+  registerControlId: LabelableContext['registerControlId'];
 }
 export declare const CheckboxGroupContext: React.Context<CheckboxGroupContext | undefined>;
 export declare function useCheckboxGroupContext(): CheckboxGroupContext | undefined;

package/checkbox-group/CheckboxGroupContext.d.ts

@@ -3,6 +3,7 @@ import type { UseFieldValidationReturnValue } from "../field/root/useFieldValida
 import type { UseCheckboxGroupParentReturnValue } from "./useCheckboxGroupParent.js";
 import type { BaseUIChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
 import type { BaseUIEventReasons } from "../internals/reasons.js";
+import type { LabelableContext } from "../internals/labelable-provider/LabelableContext.js";
 export interface CheckboxGroupContext {
   value: string[];
   setValue: (value: string[], eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
@@ -10,6 +11,11 @@ export interface CheckboxGroupContext {
   parent: UseCheckboxGroupParentReturnValue;
   disabled: boolean;
   validation: UseFieldValidationReturnValue;
+  /**
+   * `registerControlId` of the labelable scope the group renders in. A checkbox seeing the same
+   * function shares that scope, so the group, not the checkbox, is the field's control.
+   */
+  registerControlId: LabelableContext['registerControlId'];
 }
 export declare const CheckboxGroupContext: React.Context<CheckboxGroupContext | undefined>;
 export declare function useCheckboxGroupContext(): CheckboxGroupContext | undefined;

package/checkbox-group/CheckboxGroupDataAttributes.d.mts

@@ -1,6 +1,4 @@
-export declare enum CheckboxGroupDataAttributes {
-  /**
-   * Present when the checkbox group is disabled.
-   */
-  disabled = "data-disabled",
-}
+/**
+ * Present when the checkbox group is disabled.
+ */
+export declare const disabled = "data-disabled";

package/checkbox-group/CheckboxGroupDataAttributes.d.ts

@@ -1,6 +1,4 @@
-export declare enum CheckboxGroupDataAttributes {
-  /**
-   * Present when the checkbox group is disabled.
-   */
-  disabled = "data-disabled",
-}
+/**
+ * Present when the checkbox group is disabled.
+ */
+export declare const disabled = "data-disabled";

package/checkbox-group/CheckboxGroupDataAttributes.js

@@ -3,11 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CheckboxGroupDataAttributes = void 0;
-let CheckboxGroupDataAttributes = exports.CheckboxGroupDataAttributes = /*#__PURE__*/function (CheckboxGroupDataAttributes) {
-  /**
-   * Present when the checkbox group is disabled.
-   */
-  CheckboxGroupDataAttributes["disabled"] = "data-disabled";
-  return CheckboxGroupDataAttributes;
-}({});
+exports.disabled = void 0;
+/**
+ * Present when the checkbox group is disabled.
+ */
+const disabled = exports.disabled = 'data-disabled';

package/checkbox-group/CheckboxGroupDataAttributes.mjs

@@ -1,7 +1,4 @@
-export let CheckboxGroupDataAttributes = /*#__PURE__*/function (CheckboxGroupDataAttributes) {
-  /**
-   * Present when the checkbox group is disabled.
-   */
-  CheckboxGroupDataAttributes["disabled"] = "data-disabled";
-  return CheckboxGroupDataAttributes;
-}({});
+/**
+ * Present when the checkbox group is disabled.
+ */
+export const disabled = 'data-disabled';

package/checkbox-group/useCheckboxGroupParent.d.mts

@@ -8,13 +8,15 @@ export interface UseCheckboxGroupParentParameters {
   onValueChange?: ((value: string[], eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void) | undefined;
 }
 export interface UseCheckboxGroupParentReturnValue {
-  id: string | undefined;
   disabledStatesRef: React.RefObject<Map<string, boolean>>;
+  /**
+   * Reports the `id` of the element a child checkbox exposes.
+   */
+  registerChildId: (value: string, id: string) => () => void;
   getParentProps: () => {
-    id: string | undefined;
     indeterminate: boolean;
     checked: boolean;
-    'aria-controls': string;
+    'aria-controls': string | undefined;
     onCheckedChange: (checked: boolean, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
   };
   getChildProps: (value: string) => {

package/checkbox-group/useCheckboxGroupParent.d.ts

@@ -8,13 +8,15 @@ export interface UseCheckboxGroupParentParameters {
   onValueChange?: ((value: string[], eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void) | undefined;
 }
 export interface UseCheckboxGroupParentReturnValue {
-  id: string | undefined;
   disabledStatesRef: React.RefObject<Map<string, boolean>>;
+  /**
+   * Reports the `id` of the element a child checkbox exposes.
+   */
+  registerChildId: (value: string, id: string) => () => void;
   getParentProps: () => {
-    id: string | undefined;
     indeterminate: boolean;
     checked: boolean;
-    'aria-controls': string;
+    'aria-controls': string | undefined;
     onCheckedChange: (checked: boolean, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
   };
   getChildProps: (value: string) => {

package/checkbox-group/useCheckboxGroupParent.js

@@ -9,7 +9,6 @@ exports.useCheckboxGroupParent = useCheckboxGroupParent;
 var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _empty = require("@base-ui/utils/empty");
-var _useBaseUiId = require("../internals/useBaseUiId");
 function useCheckboxGroupParent(params) {
   const {
     allValues = _empty.EMPTY_ARRAY,
@@ -19,17 +18,46 @@ function useCheckboxGroupParent(params) {
   const uncontrolledStateRef = React.useRef(value);
   const disabledStatesRef = React.useRef(new Map());
   const [status, setStatus] = React.useState('mixed');
-  const id = (0, _useBaseUiId.useBaseUiId)();
+  // A `Map` rather than an object: checkbox values are consumer data, and a value like
+  // `constructor` would otherwise read straight off `Object.prototype`.
+  // Replace only the wrapper to rerender without cloning the growing registry.
+  const [childIdsState, setChildIdsState] = React.useState(() => ({
+    registry: new Map()
+  }));
   const checked = value.length === allValues.length;
   const indeterminate = value.length !== allValues.length && value.length > 0;
   const onValueChange = (0, _useStableCallback.useStableCallback)(onValueChangeProp);
+  const registerChildId = (0, _useStableCallback.useStableCallback)((childValue, childId) => {
+    const childIds = childIdsState.registry;
+    const ids = childIds.get(childValue);
+    if (!ids?.includes(childId)) {
+      childIds.set(childValue, ids ? ids.concat(childId) : [childId]);
+      setChildIdsState({
+        registry: childIds
+      });
+    }
+    return () => {
+      const registeredIds = childIds.get(childValue);
+      if (!registeredIds?.includes(childId)) {
+        return;
+      }
+      const nextIds = registeredIds.filter(id => id !== childId);
+      if (nextIds.length === 0) {
+        childIds.delete(childValue);
+      } else {
+        childIds.set(childValue, nextIds);
+      }
+      setChildIdsState({
+        registry: childIds
+      });
+    };
+  });
   const getParentProps = React.useCallback(() => ({
-    id,
     indeterminate,
     checked,
-    // TODO: custom `id` on child checkboxes breaks this
-    // https://github.com/mui/base-ui/issues/2691
-    'aria-controls': allValues.map(v => `${id}-${v}`).join(' '),
+    // Children report their own rendered id, so a custom `id` survives and no unmounted
+    // element is named.
+    'aria-controls': allValues.flatMap(v => childIdsState.registry.get(v) ?? _empty.EMPTY_ARRAY).join(' ') || undefined,
     onCheckedChange(_, eventDetails) {
       const uncontrolledState = uncontrolledStateRef.current;
 
@@ -62,7 +90,7 @@ function useCheckboxGroupParent(params) {
         setStatus(nextStatus);
       }
     }
-  }), [allValues, checked, id, indeterminate, onValueChange, status, value.length]);
+  }), [allValues, checked, childIdsState, indeterminate, onValueChange, status, value.length]);
   const getChildProps = React.useCallback(childValue => ({
     checked: value.includes(childValue),
     onCheckedChange(nextChecked, eventDetails) {
@@ -80,9 +108,9 @@ function useCheckboxGroupParent(params) {
     }
   }), [onValueChange, value]);
   return React.useMemo(() => ({
-    id,
     getParentProps,
     getChildProps,
+    registerChildId,
     disabledStatesRef
-  }), [id, getParentProps, getChildProps]);
+  }), [getParentProps, getChildProps, registerChildId]);
 }

package/checkbox-group/useCheckboxGroupParent.mjs

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { EMPTY_ARRAY } from '@base-ui/utils/empty';
-import { useBaseUiId } from "../internals/useBaseUiId.mjs";
 export function useCheckboxGroupParent(params) {
   const {
     allValues = EMPTY_ARRAY,
@@ -13,17 +12,46 @@ export function useCheckboxGroupParent(params) {
   const uncontrolledStateRef = React.useRef(value);
   const disabledStatesRef = React.useRef(new Map());
   const [status, setStatus] = React.useState('mixed');
-  const id = useBaseUiId();
+  // A `Map` rather than an object: checkbox values are consumer data, and a value like
+  // `constructor` would otherwise read straight off `Object.prototype`.
+  // Replace only the wrapper to rerender without cloning the growing registry.
+  const [childIdsState, setChildIdsState] = React.useState(() => ({
+    registry: new Map()
+  }));
   const checked = value.length === allValues.length;
   const indeterminate = value.length !== allValues.length && value.length > 0;
   const onValueChange = useStableCallback(onValueChangeProp);
+  const registerChildId = useStableCallback((childValue, childId) => {
+    const childIds = childIdsState.registry;
+    const ids = childIds.get(childValue);
+    if (!ids?.includes(childId)) {
+      childIds.set(childValue, ids ? ids.concat(childId) : [childId]);
+      setChildIdsState({
+        registry: childIds
+      });
+    }
+    return () => {
+      const registeredIds = childIds.get(childValue);
+      if (!registeredIds?.includes(childId)) {
+        return;
+      }
+      const nextIds = registeredIds.filter(id => id !== childId);
+      if (nextIds.length === 0) {
+        childIds.delete(childValue);
+      } else {
+        childIds.set(childValue, nextIds);
+      }
+      setChildIdsState({
+        registry: childIds
+      });
+    };
+  });
   const getParentProps = React.useCallback(() => ({
-    id,
     indeterminate,
     checked,
-    // TODO: custom `id` on child checkboxes breaks this
-    // https://github.com/mui/base-ui/issues/2691
-    'aria-controls': allValues.map(v => `${id}-${v}`).join(' '),
+    // Children report their own rendered id, so a custom `id` survives and no unmounted
+    // element is named.
+    'aria-controls': allValues.flatMap(v => childIdsState.registry.get(v) ?? EMPTY_ARRAY).join(' ') || undefined,
     onCheckedChange(_, eventDetails) {
       const uncontrolledState = uncontrolledStateRef.current;
 
@@ -56,7 +84,7 @@ export function useCheckboxGroupParent(params) {
         setStatus(nextStatus);
       }
     }
-  }), [allValues, checked, id, indeterminate, onValueChange, status, value.length]);
+  }), [allValues, checked, childIdsState, indeterminate, onValueChange, status, value.length]);
   const getChildProps = React.useCallback(childValue => ({
     checked: value.includes(childValue),
     onCheckedChange(nextChecked, eventDetails) {
@@ -74,9 +102,9 @@ export function useCheckboxGroupParent(params) {
     }
   }), [onValueChange, value]);
   return React.useMemo(() => ({
-    id,
     getParentProps,
     getChildProps,
+    registerChildId,
     disabledStatesRef
-  }), [id, getParentProps, getChildProps]);
+  }), [getParentProps, getChildProps, registerChildId]);
 }

package/collapsible/panel/CollapsiblePanel.js

@@ -14,7 +14,7 @@ var _useRenderElement = require("../../internals/useRenderElement");
 var _CollapsibleRootContext = require("../root/CollapsibleRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
 var _useCollapsiblePanel = require("./useCollapsiblePanel");
-var _CollapsiblePanelCssVars = require("./CollapsiblePanelCssVars");
+var CollapsiblePanelCssVars = _interopRequireWildcard(require("./CollapsiblePanelCssVars"));
 /**
  * A panel with the collapsible contents.
  * Renders a `<div>` element.
@@ -95,8 +95,8 @@ const CollapsiblePanel = exports.CollapsiblePanel = /*#__PURE__*/React.forwardRe
     ref,
     props: [props, {
       style: {
-        [_CollapsiblePanelCssVars.CollapsiblePanelCssVars.collapsiblePanelHeight]: height === undefined ? 'auto' : `${height}px`,
-        [_CollapsiblePanelCssVars.CollapsiblePanelCssVars.collapsiblePanelWidth]: width === undefined ? 'auto' : `${width}px`
+        [CollapsiblePanelCssVars.collapsiblePanelHeight]: height === undefined ? 'auto' : `${height}px`,
+        [CollapsiblePanelCssVars.collapsiblePanelWidth]: width === undefined ? 'auto' : `${width}px`
       }
     }, elementProps, resolvedStyle ? {
       style: resolvedStyle

package/collapsible/panel/CollapsiblePanel.mjs

@@ -8,7 +8,7 @@ import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useCollapsibleRootContext } from "../root/CollapsibleRootContext.mjs";
 import { collapsibleStateAttributesMapping } from "../root/stateAttributesMapping.mjs";
 import { useCollapsiblePanel } from "./useCollapsiblePanel.mjs";
-import { CollapsiblePanelCssVars } from "./CollapsiblePanelCssVars.mjs";
+import * as CollapsiblePanelCssVars from "./CollapsiblePanelCssVars.mjs";
 /**
  * A panel with the collapsible contents.
  * Renders a `<div>` element.

package/collapsible/panel/CollapsiblePanelCssVars.d.mts

@@ -1,12 +1,10 @@
-export declare enum CollapsiblePanelCssVars {
-  /**
-   * The collapsible panel's height.
-   * @type {number}
-   */
-  collapsiblePanelHeight = "--collapsible-panel-height",
-  /**
-   * The collapsible panel's width.
-   * @type {number}
-   */
-  collapsiblePanelWidth = "--collapsible-panel-width",
-}
+/**
+ * The collapsible panel's height.
+ * @type {number}
+ */
+export declare const collapsiblePanelHeight = "--collapsible-panel-height";
+/**
+ * The collapsible panel's width.
+ * @type {number}
+ */
+export declare const collapsiblePanelWidth = "--collapsible-panel-width";

package/collapsible/panel/CollapsiblePanelCssVars.d.ts

@@ -1,12 +1,10 @@
-export declare enum CollapsiblePanelCssVars {
-  /**
-   * The collapsible panel's height.
-   * @type {number}
-   */
-  collapsiblePanelHeight = "--collapsible-panel-height",
-  /**
-   * The collapsible panel's width.
-   * @type {number}
-   */
-  collapsiblePanelWidth = "--collapsible-panel-width",
-}
+/**
+ * The collapsible panel's height.
+ * @type {number}
+ */
+export declare const collapsiblePanelHeight = "--collapsible-panel-height";
+/**
+ * The collapsible panel's width.
+ * @type {number}
+ */
+export declare const collapsiblePanelWidth = "--collapsible-panel-width";

package/collapsible/panel/CollapsiblePanelCssVars.js

@@ -3,17 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CollapsiblePanelCssVars = void 0;
-let CollapsiblePanelCssVars = exports.CollapsiblePanelCssVars = /*#__PURE__*/function (CollapsiblePanelCssVars) {
-  /**
-   * The collapsible panel's height.
-   * @type {number}
-   */
-  CollapsiblePanelCssVars["collapsiblePanelHeight"] = "--collapsible-panel-height";
-  /**
-   * The collapsible panel's width.
-   * @type {number}
-   */
-  CollapsiblePanelCssVars["collapsiblePanelWidth"] = "--collapsible-panel-width";
-  return CollapsiblePanelCssVars;
-}({});
+exports.collapsiblePanelWidth = exports.collapsiblePanelHeight = void 0;
+/**
+ * The collapsible panel's height.
+ * @type {number}
+ */
+const collapsiblePanelHeight = exports.collapsiblePanelHeight = '--collapsible-panel-height';
+/**
+ * The collapsible panel's width.
+ * @type {number}
+ */
+const collapsiblePanelWidth = exports.collapsiblePanelWidth = '--collapsible-panel-width';

package/collapsible/panel/CollapsiblePanelCssVars.mjs

@@ -1,13 +1,10 @@
-export let CollapsiblePanelCssVars = /*#__PURE__*/function (CollapsiblePanelCssVars) {
-  /**
-   * The collapsible panel's height.
-   * @type {number}
-   */
-  CollapsiblePanelCssVars["collapsiblePanelHeight"] = "--collapsible-panel-height";
-  /**
-   * The collapsible panel's width.
-   * @type {number}
-   */
-  CollapsiblePanelCssVars["collapsiblePanelWidth"] = "--collapsible-panel-width";
-  return CollapsiblePanelCssVars;
-}({});
+/**
+ * The collapsible panel's height.
+ * @type {number}
+ */
+export const collapsiblePanelHeight = '--collapsible-panel-height';
+/**
+ * The collapsible panel's width.
+ * @type {number}
+ */
+export const collapsiblePanelWidth = '--collapsible-panel-width';

package/collapsible/panel/CollapsiblePanelDataAttributes.d.mts

@@ -1,18 +1,16 @@
-export declare enum CollapsiblePanelDataAttributes {
-  /**
-   * Present when the collapsible panel is open.
-   */
-  open = "data-open",
-  /**
-   * Present when the collapsible panel is closed.
-   */
-  closed = "data-closed",
-  /**
-   * Present when the panel begins animating in.
-   */
-  startingStyle = "data-starting-style",
-  /**
-   * Present when the panel is animating out.
-   */
-  endingStyle = "data-ending-style",
-}
+/**
+ * Present when the collapsible panel is open.
+ */
+export declare const open = "data-open";
+/**
+ * Present when the collapsible panel is closed.
+ */
+export declare const closed = "data-closed";
+/**
+ * Present when the panel begins animating in.
+ */
+export declare const startingStyle = "data-starting-style";
+/**
+ * Present when the panel is animating out.
+ */
+export declare const endingStyle = "data-ending-style";