@crisp-ui-kit/crisp 0.29.0 → 0.30.1

package/dist/cjs/components/formfield/formfield.js

@@ -37,14 +37,71 @@ exports.FormField = FormField;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const formfield_recipe_1 = require("./formfield.recipe");
+/**
+ * Tell the control what the field knows about it.
+ *
+ * FormField renders the label, the description, the error and the required
+ * marker; the control is an opaque child, so the three facts that belong ON
+ * the control have to be put there by id — the same id the label already
+ * points at with `htmlFor`.
+ *
+ * Until now none of them were. The message got an id and nobody referenced it,
+ * `aria-invalid` was never set, and the required asterisk was `aria-hidden`
+ * decoration with no `aria-required` behind it: a screen-reader user heard the
+ * label and nothing else (#251).
+ *
+ * Only what this put there is taken back, so a consumer's own
+ * `aria-describedby` survives both ways.
+ */
+function useFieldWiring({ htmlFor, messageId, invalid, required, }) {
+    React.useEffect(() => {
+        if (!htmlFor)
+            return;
+        const el = document.getElementById(htmlFor);
+        if (!el)
+            return;
+        const previous = el.getAttribute("aria-describedby");
+        if (messageId) {
+            const ids = previous ? previous.split(/\s+/) : [];
+            if (!ids.includes(messageId))
+                el.setAttribute("aria-describedby", [...ids, messageId].join(" "));
+        }
+        if (invalid)
+            el.setAttribute("aria-invalid", "true");
+        if (required)
+            el.setAttribute("aria-required", "true");
+        return () => {
+            if (messageId) {
+                const now = (el.getAttribute("aria-describedby") ?? "")
+                    .split(/\s+/)
+                    .filter((id) => id && id !== messageId);
+                if (now.length)
+                    el.setAttribute("aria-describedby", now.join(" "));
+                else
+                    el.removeAttribute("aria-describedby");
+            }
+            if (invalid)
+                el.removeAttribute("aria-invalid");
+            if (required)
+                el.removeAttribute("aria-required");
+        };
+    }, [htmlFor, messageId, invalid, required]);
+}
 /**
  * A labelled form field — measured from Attio's Settings forms. A muted label
  * above any control, with an optional description or error line below. When
- * `error` is set, it replaces the description and gets `aria-describedby` wiring.
+ * `error` is set it replaces the description; the control is given
+ * `aria-describedby`, plus `aria-invalid` and `aria-required` as they apply.
  */
 function FormField({ label, htmlFor, required, optional, description, error, children, className, ...rest }) {
     const descId = React.useId();
     const hasMsg = error != null || description != null;
+    useFieldWiring({
+        htmlFor,
+        messageId: hasMsg ? descId : undefined,
+        invalid: error != null,
+        required: !!required,
+    });
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, formfield_recipe_1.formfieldRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("label", { className: "formfield-label", htmlFor: htmlFor, children: [label, required && ((0, jsx_runtime_1.jsx)("span", { className: "formfield-required", "aria-hidden": "true", children: "*" })), optional && !required && ((0, jsx_runtime_1.jsx)("span", { className: "formfield-optional", children: optional === true ? "(optional)" : optional }))] }), children, error != null ? ((0, jsx_runtime_1.jsx)("span", { className: "formfield-error", id: hasMsg ? descId : undefined, children: error })) : description != null ? ((0, jsx_runtime_1.jsx)("span", { className: "formfield-desc", id: hasMsg ? descId : undefined, children: description })) : null] }));
 }
 FormField.displayName = "FormField";

package/dist/cjs/components/slider/slider.js

@@ -1,22 +1,105 @@
 "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.Slider = Slider;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_slider_1 = require("@seed-design/react-slider");
+const React = __importStar(require("react"));
 const slider_recipe_1 = require("./slider.recipe");
-/** Reads the thumb count from the engine rather than re-deriving it from props. */
-function Thumbs() {
+const defaultThumbLabel = (index, count) => count === 2 ? (index === 0 ? "minimum" : "maximum") : String(index + 1);
+/**
+ * The name for each thumb.
+ *
+ * The thumbs are what carry `role="slider"`, and they are rendered by the
+ * engine, so a name put on the crisp root — an `aria-label` prop, or a
+ * FormField's `<label for>` — reached nothing at all (#248). The root is a
+ * plain `<div>`: it has no role to name.
+ *
+ * Both sources are threaded down. Text (`aria-label`) is composed directly;
+ * an id reference (`aria-labelledby`, or the label found for the root's own
+ * id) is concatenated with a hidden span per thumb, because that is how ARIA
+ * builds a name out of parts without inventing a second copy of the label.
+ */
+function Thumbs({ ariaLabel, labelledBy, thumbLabel, idBase, }) {
     const { values } = (0, react_slider_1.useSliderContext)();
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: values.map((_, i) => ((0, jsx_runtime_1.jsx)(react_slider_1.SliderThumb
-        // biome-ignore lint/suspicious/noArrayIndexKey: thumbs are positional — the index IS the identity the engine addresses them by
-        , { thumbIndex: i, className: "slider-thumb" }, i))) }));
+    const count = values.length;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: values.map((_, i) => {
+            const suffix = count > 1 ? thumbLabel(i, count) : undefined;
+            const suffixId = `${idBase}-thumb-${i}`;
+            return ((0, jsx_runtime_1.jsxs)(React.Fragment
+            // biome-ignore lint/suspicious/noArrayIndexKey: thumbs are positional — the index IS the identity the engine addresses them by
+            , { children: [suffix && labelledBy && !ariaLabel && ((0, jsx_runtime_1.jsx)("span", { id: suffixId, className: "slider-thumblabel", children: suffix })), (0, jsx_runtime_1.jsx)(react_slider_1.SliderThumb, { thumbIndex: i, className: "slider-thumb", "aria-label": ariaLabel
+                            ? suffix
+                                ? `${ariaLabel} ${suffix}`
+                                : ariaLabel
+                            : undefined, "aria-labelledby": !ariaLabel && labelledBy
+                            ? suffix
+                                ? `${labelledBy} ${suffixId}`
+                                : labelledBy
+                            : undefined })] }, i));
+        }) }));
 }
 /**
  * A range input, driven by seed-design's headless engine so the keyboard model,
  * the pointer maths and multi-thumb constraints are theirs by construction.
  * Pass one value for a simple slider, two for a range.
  */
-function Slider({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_slider_1.SliderRoot, { ...props, className: (0, slider_recipe_1.sliderRecipe)({ className }), children: (0, jsx_runtime_1.jsxs)("span", { className: "slider-control", children: [(0, jsx_runtime_1.jsx)("span", { className: "slider-track", children: (0, jsx_runtime_1.jsx)(react_slider_1.SliderRange, { className: "slider-range" }) }), (0, jsx_runtime_1.jsx)(Thumbs, {})] }) }));
+function Slider({ className, thumbLabel = defaultThumbLabel, ...props }) {
+    const rootRef = React.useRef(null);
+    const generatedId = React.useId();
+    const idBase = props.id ?? generatedId;
+    const ariaLabel = props["aria-label"];
+    const labelledByProp = props["aria-labelledby"];
+    // A `<label for>` on the root cannot name a div, and the thumbs are what
+    // need the name, so the label is resolved from the DOM and threaded down.
+    // State rather than a mutation: the thumbs take props, so the name belongs
+    // in the render rather than being written over it afterwards.
+    const [foundLabelId, setFoundLabelId] = React.useState();
+    React.useEffect(() => {
+        if (ariaLabel || labelledByProp)
+            return;
+        const el = rootRef.current;
+        if (!el?.id)
+            return;
+        const label = el.ownerDocument.querySelector(`label[for="${CSS.escape(el.id)}"]`);
+        if (!label)
+            return;
+        if (!label.id)
+            label.id = `${el.id}-label`;
+        setFoundLabelId(label.id);
+    }, [ariaLabel, labelledByProp]);
+    return ((0, jsx_runtime_1.jsx)(react_slider_1.SliderRoot, { ref: rootRef, ...props, className: (0, slider_recipe_1.sliderRecipe)({ className }), children: (0, jsx_runtime_1.jsxs)("span", { className: "slider-control", children: [(0, jsx_runtime_1.jsx)("span", { className: "slider-track", children: (0, jsx_runtime_1.jsx)(react_slider_1.SliderRange, { className: "slider-range" }) }), (0, jsx_runtime_1.jsx)(Thumbs, { ariaLabel: ariaLabel, labelledBy: labelledByProp ?? foundLabelId, thumbLabel: thumbLabel, idBase: idBase })] }) }));
 }

package/dist/cjs/components/slider/slider.recipe.js

@@ -27,6 +27,12 @@ const config = (0, core_1.defineRecipe)({
     width: 100%; min-width: 0; gap: ${tokens_1.contract.space["0.5"]};
     font-family: ${tokens_1.contract.font.sans}; user-select: none; touch-action: none;
 
+    /* the position words ("minimum"/"maximum") that ARIA concatenates onto a
+       thumb's name — read, never drawn */
+    & .slider-thumblabel {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
     & .slider-control { position: relative; height: 26px; display: flex; align-items: center; }
 
     & .slider-track {

package/dist/esm/components/formfield/formfield.js

@@ -1,14 +1,71 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { formfieldRecipe } from "./formfield.recipe.js";
+/**
+ * Tell the control what the field knows about it.
+ *
+ * FormField renders the label, the description, the error and the required
+ * marker; the control is an opaque child, so the three facts that belong ON
+ * the control have to be put there by id — the same id the label already
+ * points at with `htmlFor`.
+ *
+ * Until now none of them were. The message got an id and nobody referenced it,
+ * `aria-invalid` was never set, and the required asterisk was `aria-hidden`
+ * decoration with no `aria-required` behind it: a screen-reader user heard the
+ * label and nothing else (#251).
+ *
+ * Only what this put there is taken back, so a consumer's own
+ * `aria-describedby` survives both ways.
+ */
+function useFieldWiring({ htmlFor, messageId, invalid, required, }) {
+    React.useEffect(() => {
+        if (!htmlFor)
+            return;
+        const el = document.getElementById(htmlFor);
+        if (!el)
+            return;
+        const previous = el.getAttribute("aria-describedby");
+        if (messageId) {
+            const ids = previous ? previous.split(/\s+/) : [];
+            if (!ids.includes(messageId))
+                el.setAttribute("aria-describedby", [...ids, messageId].join(" "));
+        }
+        if (invalid)
+            el.setAttribute("aria-invalid", "true");
+        if (required)
+            el.setAttribute("aria-required", "true");
+        return () => {
+            if (messageId) {
+                const now = (el.getAttribute("aria-describedby") ?? "")
+                    .split(/\s+/)
+                    .filter((id) => id && id !== messageId);
+                if (now.length)
+                    el.setAttribute("aria-describedby", now.join(" "));
+                else
+                    el.removeAttribute("aria-describedby");
+            }
+            if (invalid)
+                el.removeAttribute("aria-invalid");
+            if (required)
+                el.removeAttribute("aria-required");
+        };
+    }, [htmlFor, messageId, invalid, required]);
+}
 /**
  * A labelled form field — measured from Attio's Settings forms. A muted label
  * above any control, with an optional description or error line below. When
- * `error` is set, it replaces the description and gets `aria-describedby` wiring.
+ * `error` is set it replaces the description; the control is given
+ * `aria-describedby`, plus `aria-invalid` and `aria-required` as they apply.
  */
 export function FormField({ label, htmlFor, required, optional, description, error, children, className, ...rest }) {
     const descId = React.useId();
     const hasMsg = error != null || description != null;
+    useFieldWiring({
+        htmlFor,
+        messageId: hasMsg ? descId : undefined,
+        invalid: error != null,
+        required: !!required,
+    });
     return (_jsxs("div", { className: formfieldRecipe({ className }), ...rest, children: [_jsxs("label", { className: "formfield-label", htmlFor: htmlFor, children: [label, required && (_jsx("span", { className: "formfield-required", "aria-hidden": "true", children: "*" })), optional && !required && (_jsx("span", { className: "formfield-optional", children: optional === true ? "(optional)" : optional }))] }), children, error != null ? (_jsx("span", { className: "formfield-error", id: hasMsg ? descId : undefined, children: error })) : description != null ? (_jsx("span", { className: "formfield-desc", id: hasMsg ? descId : undefined, children: description })) : null] }));
 }
 FormField.displayName = "FormField";

package/dist/esm/components/slider/slider.js

@@ -1,19 +1,69 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SliderRange, SliderRoot, SliderThumb, useSliderContext, } from "@seed-design/react-slider";
+import * as React from "react";
 import { sliderRecipe } from "./slider.recipe.js";
-/** Reads the thumb count from the engine rather than re-deriving it from props. */
-function Thumbs() {
+const defaultThumbLabel = (index, count) => count === 2 ? (index === 0 ? "minimum" : "maximum") : String(index + 1);
+/**
+ * The name for each thumb.
+ *
+ * The thumbs are what carry `role="slider"`, and they are rendered by the
+ * engine, so a name put on the crisp root — an `aria-label` prop, or a
+ * FormField's `<label for>` — reached nothing at all (#248). The root is a
+ * plain `<div>`: it has no role to name.
+ *
+ * Both sources are threaded down. Text (`aria-label`) is composed directly;
+ * an id reference (`aria-labelledby`, or the label found for the root's own
+ * id) is concatenated with a hidden span per thumb, because that is how ARIA
+ * builds a name out of parts without inventing a second copy of the label.
+ */
+function Thumbs({ ariaLabel, labelledBy, thumbLabel, idBase, }) {
     const { values } = useSliderContext();
-    return (_jsx(_Fragment, { children: values.map((_, i) => (_jsx(SliderThumb
-        // biome-ignore lint/suspicious/noArrayIndexKey: thumbs are positional — the index IS the identity the engine addresses them by
-        , { thumbIndex: i, className: "slider-thumb" }, i))) }));
+    const count = values.length;
+    return (_jsx(_Fragment, { children: values.map((_, i) => {
+            const suffix = count > 1 ? thumbLabel(i, count) : undefined;
+            const suffixId = `${idBase}-thumb-${i}`;
+            return (_jsxs(React.Fragment
+            // biome-ignore lint/suspicious/noArrayIndexKey: thumbs are positional — the index IS the identity the engine addresses them by
+            , { children: [suffix && labelledBy && !ariaLabel && (_jsx("span", { id: suffixId, className: "slider-thumblabel", children: suffix })), _jsx(SliderThumb, { thumbIndex: i, className: "slider-thumb", "aria-label": ariaLabel
+                            ? suffix
+                                ? `${ariaLabel} ${suffix}`
+                                : ariaLabel
+                            : undefined, "aria-labelledby": !ariaLabel && labelledBy
+                            ? suffix
+                                ? `${labelledBy} ${suffixId}`
+                                : labelledBy
+                            : undefined })] }, i));
+        }) }));
 }
 /**
  * A range input, driven by seed-design's headless engine so the keyboard model,
  * the pointer maths and multi-thumb constraints are theirs by construction.
  * Pass one value for a simple slider, two for a range.
  */
-export function Slider({ className, ...props }) {
-    return (_jsx(SliderRoot, { ...props, className: sliderRecipe({ className }), children: _jsxs("span", { className: "slider-control", children: [_jsx("span", { className: "slider-track", children: _jsx(SliderRange, { className: "slider-range" }) }), _jsx(Thumbs, {})] }) }));
+export function Slider({ className, thumbLabel = defaultThumbLabel, ...props }) {
+    const rootRef = React.useRef(null);
+    const generatedId = React.useId();
+    const idBase = props.id ?? generatedId;
+    const ariaLabel = props["aria-label"];
+    const labelledByProp = props["aria-labelledby"];
+    // A `<label for>` on the root cannot name a div, and the thumbs are what
+    // need the name, so the label is resolved from the DOM and threaded down.
+    // State rather than a mutation: the thumbs take props, so the name belongs
+    // in the render rather than being written over it afterwards.
+    const [foundLabelId, setFoundLabelId] = React.useState();
+    React.useEffect(() => {
+        if (ariaLabel || labelledByProp)
+            return;
+        const el = rootRef.current;
+        if (!el?.id)
+            return;
+        const label = el.ownerDocument.querySelector(`label[for="${CSS.escape(el.id)}"]`);
+        if (!label)
+            return;
+        if (!label.id)
+            label.id = `${el.id}-label`;
+        setFoundLabelId(label.id);
+    }, [ariaLabel, labelledByProp]);
+    return (_jsx(SliderRoot, { ref: rootRef, ...props, className: sliderRecipe({ className }), children: _jsxs("span", { className: "slider-control", children: [_jsx("span", { className: "slider-track", children: _jsx(SliderRange, { className: "slider-range" }) }), _jsx(Thumbs, { ariaLabel: ariaLabel, labelledBy: labelledByProp ?? foundLabelId, thumbLabel: thumbLabel, idBase: idBase })] }) }));
 }

package/dist/esm/components/slider/slider.recipe.js

@@ -24,6 +24,12 @@ const config = defineRecipe({
     width: 100%; min-width: 0; gap: ${c.space["0.5"]};
     font-family: ${c.font.sans}; user-select: none; touch-action: none;
 
+    /* the position words ("minimum"/"maximum") that ARIA concatenates onto a
+       thumb's name — read, never drawn */
+    & .slider-thumblabel {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
     & .slider-control { position: relative; height: 26px; display: flex; align-items: center; }
 
     & .slider-track {

package/dist/slider.css

@@ -4,6 +4,12 @@
     width: 100%; min-width: 0; gap: var(--space-0-5);
     font-family: var(--font-sans); user-select: none; touch-action: none;
 
+    /* the position words ("minimum"/"maximum") that ARIA concatenates onto a
+       thumb's name — read, never drawn */
+    & .slider-thumblabel {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
     & .slider-control { position: relative; height: 26px; display: flex; align-items: center; }
 
     & .slider-track {

package/dist/styles.css

@@ -1454,6 +1454,12 @@
     width: 100%; min-width: 0; gap: var(--space-0-5);
     font-family: var(--font-sans); user-select: none; touch-action: none;
 
+    /* the position words ("minimum"/"maximum") that ARIA concatenates onto a
+       thumb's name — read, never drawn */
+    & .slider-thumblabel {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
     & .slider-control { position: relative; height: 26px; display: flex; align-items: center; }
 
     & .slider-track {

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

@@ -21,7 +21,8 @@ export type FormFieldProps = React.ComponentPropsWithoutRef<"div"> & {
 /**
  * A labelled form field — measured from Attio's Settings forms. A muted label
  * above any control, with an optional description or error line below. When
- * `error` is set, it replaces the description and gets `aria-describedby` wiring.
+ * `error` is set it replaces the description; the control is given
+ * `aria-describedby`, plus `aria-invalid` and `aria-required` as they apply.
  */
 export declare function FormField({ label, htmlFor, required, optional, description, error, children, className, ...rest }: FormFieldProps): React.JSX.Element;
 export declare namespace FormField {

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

@@ -1,8 +1,19 @@
 import { type SliderRootProps } from "@seed-design/react-slider";
-export type SliderProps = SliderRootProps;
+import * as React from "react";
+export type SliderProps = SliderRootProps & {
+    /**
+     * What to call each thumb when there is more than one, appended to the
+     * slider's own name: "Price minimum" / "Price maximum".
+     *
+     * A formatter, not two strings, because the number of thumbs is open-ended
+     * and the words differ by language. With a single thumb it is never called —
+     * the thumb simply takes the slider's name.
+     */
+    thumbLabel?: (index: number, count: number) => string;
+};
 /**
  * A range input, driven by seed-design's headless engine so the keyboard model,
  * the pointer maths and multi-thumb constraints are theirs by construction.
  * Pass one value for a simple slider, two for a range.
  */
-export declare function Slider({ className, ...props }: SliderProps): import("react").JSX.Element;
+export declare function Slider({ className, thumbLabel, ...props }: SliderProps): React.JSX.Element;

package/package.json

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