@crisp-ui-kit/crisp 0.28.0 → 0.29.0

package/dist/cjs/components/multiselect/multiselect.js

@@ -65,7 +65,11 @@ function Chip({ opt }) {
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
-function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, ...rest }) {
+function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, 
+// The id belongs on the trigger, not the wrapper: `<label for>` only names a
+// LABELABLE element, so an id left on the root div meant a FormField label
+// above this control named nothing (#247). Select already did this.
+id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field) and the
     // active option is named by `aria-activedescendant`. `data-highlighted` is a
     // styling hook only -- a screen reader cannot see it.
@@ -162,7 +166,7 @@ function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, n
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, multiselect_recipe_1.multiselectRecipe)({ className }), ...rest, children: [name &&
-                value.map((v) => (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: v }, v)), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+                value.map((v) => (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: v }, v)), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)
                         onNavKeys(e);
                     else if (!open && (e.key === "ArrowDown" || e.key === "Enter")) {

package/dist/cjs/components/quantitypicker/quantitypicker.js

@@ -1,10 +1,45 @@
 "use strict";
 "use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.QuantityPicker = QuantityPicker;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_quantity_picker_1 = require("@seed-design/react-quantity-picker");
 const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const spinner_1 = require("../spinner");
 const quantitypicker_recipe_1 = require("./quantitypicker.recipe");
 /** seed's icon box per size, read from their stylesheet. */
@@ -57,6 +92,9 @@ function IncrementIcon({ size }) {
  * reverses its visible children rather than relying on CSS.
  */
 function QuantityPicker({ size = "medium", fill = false, className, name, decrementLabel = "Decrease quantity", incrementLabel = "Increase quantity", ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(react_quantity_picker_1.QuantityPickerRoot, { ...props, className: (0, quantitypicker_recipe_1.quantitypickerRecipe)({ size, fill, className }), children: [(0, jsx_runtime_1.jsx)(react_quantity_picker_1.QuantityPickerDecrementButton, { className: "quantitypicker-button", "aria-label": decrementLabel, children: (0, jsx_runtime_1.jsx)(DecrementIcon, { size: size }) }), (0, jsx_runtime_1.jsx)("span", { className: "quantitypicker-divider" }), (0, jsx_runtime_1.jsx)(Value, {}), (0, jsx_runtime_1.jsx)("span", { className: "quantitypicker-divider" }), (0, jsx_runtime_1.jsx)(react_quantity_picker_1.QuantityPickerIncrementButton, { className: "quantitypicker-button", "aria-label": incrementLabel, children: (0, jsx_runtime_1.jsx)(IncrementIcon, { size: size }) }), name ? (0, jsx_runtime_1.jsx)(react_quantity_picker_1.QuantityPickerHiddenInput, { name: name }) : null] }));
+    // A `<label for>` cannot name a div, and this root is a role="group" (#247).
+    const rootRef = React.useRef(null);
+    (0, core_1.useLabelAssociation)(rootRef);
+    return ((0, jsx_runtime_1.jsxs)(react_quantity_picker_1.QuantityPickerRoot, { ref: rootRef, ...props, className: (0, quantitypicker_recipe_1.quantitypickerRecipe)({ size, fill, className }), children: [(0, jsx_runtime_1.jsx)(react_quantity_picker_1.QuantityPickerDecrementButton, { className: "quantitypicker-button", "aria-label": decrementLabel, children: (0, jsx_runtime_1.jsx)(DecrementIcon, { size: size }) }), (0, jsx_runtime_1.jsx)("span", { className: "quantitypicker-divider" }), (0, jsx_runtime_1.jsx)(Value, {}), (0, jsx_runtime_1.jsx)("span", { className: "quantitypicker-divider" }), (0, jsx_runtime_1.jsx)(react_quantity_picker_1.QuantityPickerIncrementButton, { className: "quantitypicker-button", "aria-label": incrementLabel, children: (0, jsx_runtime_1.jsx)(IncrementIcon, { size: size }) }), name ? (0, jsx_runtime_1.jsx)(react_quantity_picker_1.QuantityPickerHiddenInput, { name: name }) : null] }));
 }
 QuantityPicker.displayName = "QuantityPicker";

package/dist/cjs/components/radiogroup/radiogroup.js

@@ -61,6 +61,9 @@ function RadioGroup({ value, defaultValue, onValueChange, variant = "default", n
     // `form.reset()` restores native controls; a group of role="radio" buttons
     // holds its answer in React, so it has to listen (#245). A controlled group
     // is left alone — the value is the consumer's.
+    // A `<label for>` cannot name a div, so a FormField above this group named
+    // nothing until now (#247).
+    (0, core_1.useLabelAssociation)(groupRef);
     (0, core_1.useFormReset)(groupRef, () => {
         if (value === undefined)
             setInternal(defaultValue);

package/dist/cjs/components/segmented/segmented.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Segmented = Segmented;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const radiogroup_1 = require("../radiogroup");
 const segmented_recipe_1 = require("./segmented.recipe");
 /**
@@ -69,6 +70,9 @@ function Segmented({ options, value, defaultValue, onValueChange, "aria-label":
     // replaces closed over its own index, so it selected a neighbour without
     // moving focus and every press after the first recomputed the same step.
     const { onKeyDown } = (0, radiogroup_1.useRadioGroupKeyboard)({ select, groupRef: rootRef });
+    // A `<label for>` cannot name a div, and this root is a role="radiogroup"
+    // (#247).
+    (0, core_1.useLabelAssociation)(rootRef);
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, segmented_recipe_1.segmentedRecipe)({ className }), ...rest, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [thumb && ((0, jsx_runtime_1.jsx)("span", { className: "segmented-thumb", "aria-hidden": "true", style: {
                     width: thumb.width,
                     transform: `translateX(${thumb.left}px)`,

package/dist/cjs/core/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.useFormReset = exports.useFocusAfterRemoval = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = void 0;
+exports.usePrefersReducedMotion = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = void 0;
 var cx_1 = require("./cx");
 Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return cx_1.cx; } });
 var define_1 = require("./define");
@@ -34,5 +34,7 @@ var use_focus_after_removal_1 = require("./use-focus-after-removal");
 Object.defineProperty(exports, "useFocusAfterRemoval", { enumerable: true, get: function () { return use_focus_after_removal_1.useFocusAfterRemoval; } });
 var use_form_reset_1 = require("./use-form-reset");
 Object.defineProperty(exports, "useFormReset", { enumerable: true, get: function () { return use_form_reset_1.useFormReset; } });
+var use_label_association_1 = require("./use-label-association");
+Object.defineProperty(exports, "useLabelAssociation", { enumerable: true, get: function () { return use_label_association_1.useLabelAssociation; } });
 var use_prefers_reduced_motion_1 = require("./use-prefers-reduced-motion");
 Object.defineProperty(exports, "usePrefersReducedMotion", { enumerable: true, get: function () { return use_prefers_reduced_motion_1.usePrefersReducedMotion; } });

package/dist/cjs/core/use-label-association.js

@@ -0,0 +1,77 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLabelAssociation = useLabelAssociation;
+const React = __importStar(require("react"));
+/**
+ * Let a `<label for=…>` name a group.
+ *
+ * `for` only associates with a LABELABLE element — button, input, select,
+ * textarea, meter, output, progress. A `role="radiogroup"` or `role="group"`
+ * is a `<div>`, so a FormField label sitting above one names nothing at all:
+ * the markup looks right, the label is clickable, and a screen reader
+ * announces "group" with no name (#247).
+ *
+ * ARIA's answer for a group is `aria-labelledby`, which is exactly what this
+ * repairs: when the element carries neither `aria-label` nor
+ * `aria-labelledby`, and a label points at its id, that label becomes its
+ * name. Done from the DOM rather than through a prop because the label is
+ * rendered by whoever wrote the markup — crisp's FormField, or a hand-written
+ * `<label>` — and neither can reach into the group's props.
+ *
+ * The label is given an id if it has none, derived from the control's own id
+ * so two groups on a page cannot collide.
+ */
+function useLabelAssociation(ref) {
+    React.useEffect(() => {
+        const el = ref.current;
+        if (!el?.id)
+            return;
+        if (el.getAttribute("aria-label") || el.getAttribute("aria-labelledby"))
+            return;
+        const label = el.ownerDocument.querySelector(`label[for="${CSS.escape(el.id)}"]`);
+        if (!label)
+            return;
+        if (!label.id)
+            label.id = `${el.id}-label`;
+        el.setAttribute("aria-labelledby", label.id);
+        return () => {
+            // only take back what this put there: a consumer who set their own
+            // aria-labelledby in the meantime keeps it
+            if (el.getAttribute("aria-labelledby") === label.id)
+                el.removeAttribute("aria-labelledby");
+        };
+    });
+}

package/dist/esm/components/multiselect/multiselect.js

@@ -29,7 +29,11 @@ function Chip({ opt }) {
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
-export function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, ...rest }) {
+export function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, 
+// The id belongs on the trigger, not the wrapper: `<label for>` only names a
+// LABELABLE element, so an id left on the root div meant a FormField label
+// above this control named nothing (#247). Select already did this.
+id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field) and the
     // active option is named by `aria-activedescendant`. `data-highlighted` is a
     // styling hook only -- a screen reader cannot see it.
@@ -126,7 +130,7 @@ export function MultiSelect({ options, value: valueProp, defaultValue, onValueCh
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
     return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ className }), ...rest, children: [name &&
-                value.map((v) => _jsx("input", { type: "hidden", name: name, value: v }, v)), _jsxs("button", { ref: triggerRef, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+                value.map((v) => _jsx("input", { type: "hidden", name: name, value: v }, v)), _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)
                         onNavKeys(e);
                     else if (!open && (e.key === "ArrowDown" || e.key === "Enter")) {

package/dist/esm/components/quantitypicker/quantitypicker.js

@@ -2,6 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { QuantityPickerDecrementButton, QuantityPickerHiddenInput, QuantityPickerIncrementButton, QuantityPickerRoot, useQuantityPickerContext, } from "@seed-design/react-quantity-picker";
 import { Minus, Plus, Trash2 } from "lucide-react";
+import * as React from "react";
+import { useLabelAssociation } from "../../core/index.js";
 import { Spinner } from "../spinner/index.js";
 import { quantitypickerRecipe } from "./quantitypicker.recipe.js";
 /** seed's icon box per size, read from their stylesheet. */
@@ -54,6 +56,9 @@ function IncrementIcon({ size }) {
  * reverses its visible children rather than relying on CSS.
  */
 export function QuantityPicker({ size = "medium", fill = false, className, name, decrementLabel = "Decrease quantity", incrementLabel = "Increase quantity", ...props }) {
-    return (_jsxs(QuantityPickerRoot, { ...props, className: quantitypickerRecipe({ size, fill, className }), children: [_jsx(QuantityPickerDecrementButton, { className: "quantitypicker-button", "aria-label": decrementLabel, children: _jsx(DecrementIcon, { size: size }) }), _jsx("span", { className: "quantitypicker-divider" }), _jsx(Value, {}), _jsx("span", { className: "quantitypicker-divider" }), _jsx(QuantityPickerIncrementButton, { className: "quantitypicker-button", "aria-label": incrementLabel, children: _jsx(IncrementIcon, { size: size }) }), name ? _jsx(QuantityPickerHiddenInput, { name: name }) : null] }));
+    // A `<label for>` cannot name a div, and this root is a role="group" (#247).
+    const rootRef = React.useRef(null);
+    useLabelAssociation(rootRef);
+    return (_jsxs(QuantityPickerRoot, { ref: rootRef, ...props, className: quantitypickerRecipe({ size, fill, className }), children: [_jsx(QuantityPickerDecrementButton, { className: "quantitypicker-button", "aria-label": decrementLabel, children: _jsx(DecrementIcon, { size: size }) }), _jsx("span", { className: "quantitypicker-divider" }), _jsx(Value, {}), _jsx("span", { className: "quantitypicker-divider" }), _jsx(QuantityPickerIncrementButton, { className: "quantitypicker-button", "aria-label": incrementLabel, children: _jsx(IncrementIcon, { size: size }) }), name ? _jsx(QuantityPickerHiddenInput, { name: name }) : null] }));
 }
 QuantityPicker.displayName = "QuantityPicker";

package/dist/esm/components/radiogroup/radiogroup.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { useFormReset } from "../../core/index.js";
+import { useFormReset, useLabelAssociation } from "../../core/index.js";
 import { radiogroupRecipe } from "./radiogroup.recipe.js";
 import { useRadioGroupKeyboard } from "./radiogroup-keyboard.js";
 const RadioContext = React.createContext(null);
@@ -24,6 +24,9 @@ export function RadioGroup({ value, defaultValue, onValueChange, variant = "defa
     // `form.reset()` restores native controls; a group of role="radio" buttons
     // holds its answer in React, so it has to listen (#245). A controlled group
     // is left alone — the value is the consumer's.
+    // A `<label for>` cannot name a div, so a FormField above this group named
+    // nothing until now (#247).
+    useLabelAssociation(groupRef);
     useFormReset(groupRef, () => {
         if (value === undefined)
             setInternal(defaultValue);

package/dist/esm/components/segmented/segmented.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useLabelAssociation } from "../../core/index.js";
 import { useRadioGroupKeyboard } from "../radiogroup/index.js";
 import { segmentedRecipe } from "./segmented.recipe.js";
 /**
@@ -33,6 +34,9 @@ export function Segmented({ options, value, defaultValue, onValueChange, "aria-l
     // replaces closed over its own index, so it selected a neighbour without
     // moving focus and every press after the first recomputed the same step.
     const { onKeyDown } = useRadioGroupKeyboard({ select, groupRef: rootRef });
+    // A `<label for>` cannot name a div, and this root is a role="radiogroup"
+    // (#247).
+    useLabelAssociation(rootRef);
     return (_jsxs("div", { ref: rootRef, className: segmentedRecipe({ className }), ...rest, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [thumb && (_jsx("span", { className: "segmented-thumb", "aria-hidden": "true", style: {
                     width: thumb.width,
                     transform: `translateX(${thumb.left}px)`,

package/dist/esm/core/index.js

@@ -8,4 +8,5 @@ export { resolveRecipe } from "./resolve.js";
 export * from "./rtl.js";
 export { useFocusAfterRemoval } from "./use-focus-after-removal.js";
 export { useFormReset } from "./use-form-reset.js";
+export { useLabelAssociation } from "./use-label-association.js";
 export { usePrefersReducedMotion } from "./use-prefers-reduced-motion.js";

package/dist/esm/core/use-label-association.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+/**
+ * Let a `<label for=…>` name a group.
+ *
+ * `for` only associates with a LABELABLE element — button, input, select,
+ * textarea, meter, output, progress. A `role="radiogroup"` or `role="group"`
+ * is a `<div>`, so a FormField label sitting above one names nothing at all:
+ * the markup looks right, the label is clickable, and a screen reader
+ * announces "group" with no name (#247).
+ *
+ * ARIA's answer for a group is `aria-labelledby`, which is exactly what this
+ * repairs: when the element carries neither `aria-label` nor
+ * `aria-labelledby`, and a label points at its id, that label becomes its
+ * name. Done from the DOM rather than through a prop because the label is
+ * rendered by whoever wrote the markup — crisp's FormField, or a hand-written
+ * `<label>` — and neither can reach into the group's props.
+ *
+ * The label is given an id if it has none, derived from the control's own id
+ * so two groups on a page cannot collide.
+ */
+export function useLabelAssociation(ref) {
+    React.useEffect(() => {
+        const el = ref.current;
+        if (!el?.id)
+            return;
+        if (el.getAttribute("aria-label") || el.getAttribute("aria-labelledby"))
+            return;
+        const label = el.ownerDocument.querySelector(`label[for="${CSS.escape(el.id)}"]`);
+        if (!label)
+            return;
+        if (!label.id)
+            label.id = `${el.id}-label`;
+        el.setAttribute("aria-labelledby", label.id);
+        return () => {
+            // only take back what this put there: a consumer who set their own
+            // aria-labelledby in the meantime keeps it
+            if (el.getAttribute("aria-labelledby") === label.id)
+                el.removeAttribute("aria-labelledby");
+        };
+    });
+}

package/dist/types/components/multiselect/multiselect.d.ts

@@ -36,7 +36,7 @@ export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "valu
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
-export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, placeholder, searchable, searchPlaceholder, emptyLabel, disabled, className, "aria-label": ariaLabel, ...rest }: MultiSelectProps): React.JSX.Element;
+export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, id, placeholder, searchable, searchPlaceholder, emptyLabel, disabled, className, "aria-label": ariaLabel, ...rest }: MultiSelectProps): React.JSX.Element;
 export declare namespace MultiSelect {
     var displayName: string;
 }

package/dist/types/components/quantitypicker/quantitypicker.d.ts

@@ -1,4 +1,5 @@
 import { type QuantityPickerRootProps } from "@seed-design/react-quantity-picker";
+import * as React from "react";
 /** seed's icon box per size, read from their stylesheet. */
 declare const ICON: {
     readonly small: 16;
@@ -36,7 +37,7 @@ export type QuantityPickerProps = QuantityPickerRootProps & {
  * Slider documents. Here it also decides child ORDER, since the engine
  * reverses its visible children rather than relying on CSS.
  */
-export declare function QuantityPicker({ size, fill, className, name, decrementLabel, incrementLabel, ...props }: QuantityPickerProps): import("react").JSX.Element;
+export declare function QuantityPicker({ size, fill, className, name, decrementLabel, incrementLabel, ...props }: QuantityPickerProps): React.JSX.Element;
 export declare namespace QuantityPicker {
     var displayName: string;
 }

package/dist/types/core/index.d.ts

@@ -9,4 +9,5 @@ export * from "./rtl";
 export type * from "./types";
 export { useFocusAfterRemoval } from "./use-focus-after-removal";
 export { useFormReset } from "./use-form-reset";
+export { useLabelAssociation } from "./use-label-association";
 export { usePrefersReducedMotion } from "./use-prefers-reduced-motion";

package/dist/types/core/use-label-association.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+/**
+ * Let a `<label for=…>` name a group.
+ *
+ * `for` only associates with a LABELABLE element — button, input, select,
+ * textarea, meter, output, progress. A `role="radiogroup"` or `role="group"`
+ * is a `<div>`, so a FormField label sitting above one names nothing at all:
+ * the markup looks right, the label is clickable, and a screen reader
+ * announces "group" with no name (#247).
+ *
+ * ARIA's answer for a group is `aria-labelledby`, which is exactly what this
+ * repairs: when the element carries neither `aria-label` nor
+ * `aria-labelledby`, and a label points at its id, that label becomes its
+ * name. Done from the DOM rather than through a prop because the label is
+ * rendered by whoever wrote the markup — crisp's FormField, or a hand-written
+ * `<label>` — and neither can reach into the group's props.
+ *
+ * The label is given an id if it has none, derived from the control's own id
+ * so two groups on a page cannot collide.
+ */
+export declare function useLabelAssociation(ref: React.RefObject<HTMLElement | null>): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",