@astryxdesign/core 0.1.2 → 0.1.3

package/dist/Field/FieldLabel.d.ts

@@ -20,9 +20,28 @@ export interface FieldLabelProps extends BaseProps<HTMLLabelElement> {
      */
     label: string;
     /**
-     * ID of the input element this label is for.
+     * ID of the input element this label points AT (rendered as `htmlFor` on the
+     * label). This is *not* the id of the label element itself — see
+     * `labelID` for that.
      */
     inputID: string;
+    /**
+     * The `id` applied TO the label element itself (not the element it points
+     * at — that's `inputID`). A grouping control (e.g. `role="radiogroup"`) can
+     * reference this via `aria-labelledby` to take the label as its accessible
+     * name.
+     */
+    labelID?: string;
+    /**
+     * When true, the field wraps a *group* of controls (e.g. a radiogroup)
+     * rather than a single input. In that case the label is rendered as a
+     * `<span>` instead of a `<label>` — a `<label>` semantically names one form
+     * control and can't be associated with a group, so it must not be a literal
+     * label element. The group takes the label as its name via
+     * `labelID` + `aria-labelledby`.
+     * @default false
+     */
+    isGroupLabel?: boolean;
     /**
      * Whether to visually hide the label and description (still accessible
      * to screen readers). When hidden, the entire label group is rendered
@@ -76,7 +95,7 @@ export interface FieldLabelProps extends BaseProps<HTMLLabelElement> {
  * <FieldLabel label="Search" inputID={inputId} isLabelHidden />
  * ```
  */
-export declare function FieldLabel({ label, inputID, isLabelHidden, isDisabled, isOptional, isRequired, labelIcon, labelTooltip, description, descriptionID, ref, }: FieldLabelProps): import("react").JSX.Element;
+export declare function FieldLabel({ label, inputID, labelID, isGroupLabel, isLabelHidden, isDisabled, isOptional, isRequired, labelIcon, labelTooltip, description, descriptionID, ref, }: FieldLabelProps): import("react").JSX.Element;
 export declare namespace FieldLabel {
     var displayName: string;
 }

package/dist/Field/FieldLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAgD5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,GAAG,GACJ,EAAE,eAAe,+BAuCjB;yBAnDe,UAAU"}
+{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAkD5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,GAAG,GACJ,EAAE,eAAe,+BAsDjB;yBApEe,UAAU"}

package/dist/Field/FieldLabel.js

@@ -36,6 +36,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 export function FieldLabel({
   label,
   inputID,
+  labelID,
+  isGroupLabel = false,
   isLabelHidden = false,
   isDisabled = false,
   isOptional = false,
@@ -47,44 +49,57 @@ export function FieldLabel({
   ref
 }) {
   const statusText = isOptional ? 'Optional' : isRequired ? 'Required' : null;
+
+  // A group label (e.g. for a radiogroup) must not be a literal `<label>`
+  // element: a `<label>` semantically names a single form control and can't be
+  // associated with a group. Render it as a `<span>` instead, keeping all the
+  // label styling and slots. The group references it via `aria-labelledby`.
+  const LabelElement = isGroupLabel ? 'span' : 'label';
+  const labelContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [labelIcon && renderIconSlot(labelIcon, {
+      size: 'sm',
+      color: 'inherit'
+    }), label, statusText && /*#__PURE__*/_jsxs("span", {
+      ...{
+        className: "x1sodnla x141an7d x1ltkj2j xv1l7n4"
+      },
+      children: [/*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        children: " \u2219 "
+      }), statusText]
+    }), labelTooltip && /*#__PURE__*/_jsx(Tooltip, {
+      content: labelTooltip,
+      placement: "above",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "info",
+        size: "sm",
+        color: "inherit"
+      })
+    })]
+  });
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs("label", {
+    children: [/*#__PURE__*/_jsx(LabelElement, {
       ref: ref,
-      htmlFor: inputID,
+      id: labelID
+      // `htmlFor` only applies to a real `<label>` associating with a single
+      // control; a group label (span) has no `htmlFor`.
+      ,
+      htmlFor: isGroupLabel ? undefined : inputID,
       ...mergeProps(themeProps('field-label'), {
         0: {
-          className: "x78zum5 x6s0dn4 xzye2dw x9ynric xcr08ib x1e4wzip xv1l7n4 x1ypdohk"
+          className: "x78zum5 x6s0dn4 xzye2dw x9ynric xcr08ib x1kq96og x1e4wzip xv1l7n4 x1ypdohk"
         },
         2: {
-          className: "x78zum5 x6s0dn4 xzye2dw x9ynric xcr08ib x1e4wzip xnbbluu x1h6gzvc"
+          className: "x78zum5 x6s0dn4 xzye2dw x9ynric xcr08ib x1kq96og x1e4wzip xnbbluu x1h6gzvc"
         },
         1: {
-          className: "x78zum5 x6s0dn4 xzye2dw x9ynric xcr08ib x1e4wzip xv1l7n4 x1ypdohk xng3xce xzpqnlu xjm9jq1 xu96u03 xkdpibf xb3r6kr x1717udv x47corl x10l6tqk x13vifvy x87ps6o xuxw1ft x1i1rx1s"
+          className: "x78zum5 x6s0dn4 xzye2dw x9ynric xcr08ib x1kq96og x1e4wzip xv1l7n4 x1ypdohk xng3xce xzpqnlu xjm9jq1 xu96u03 xkdpibf xb3r6kr x1717udv x47corl x10l6tqk x13vifvy x87ps6o xuxw1ft x1i1rx1s"
         },
         3: {
-          className: "x78zum5 x6s0dn4 xzye2dw x9ynric xcr08ib x1e4wzip xnbbluu x1h6gzvc xng3xce xzpqnlu xjm9jq1 xu96u03 xkdpibf xb3r6kr x1717udv x47corl x10l6tqk x13vifvy x87ps6o xuxw1ft x1i1rx1s"
+          className: "x78zum5 x6s0dn4 xzye2dw x9ynric xcr08ib x1kq96og x1e4wzip xnbbluu x1h6gzvc xng3xce xzpqnlu xjm9jq1 xu96u03 xkdpibf xb3r6kr x1717udv x47corl x10l6tqk x13vifvy x87ps6o xuxw1ft x1i1rx1s"
         }
       }[!!isDisabled << 1 | !!isLabelHidden << 0]),
-      children: [labelIcon && renderIconSlot(labelIcon, {
-        size: 'sm',
-        color: 'inherit'
-      }), label, statusText && /*#__PURE__*/_jsxs("span", {
-        ...{
-          className: "x1sodnla x141an7d xv1l7n4"
-        },
-        children: [/*#__PURE__*/_jsx("span", {
-          "aria-hidden": "true",
-          children: " \u2219 "
-        }), statusText]
-      }), labelTooltip && /*#__PURE__*/_jsx(Tooltip, {
-        content: labelTooltip,
-        placement: "above",
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: "info",
-          size: "sm",
-          color: "inherit"
-        })
-      })]
+      children: labelContent
     }), description && /*#__PURE__*/_jsx("span", {
       id: descriptionID,
       ...{

package/dist/FileInput/FileInput.d.ts

@@ -51,6 +51,27 @@ export interface FileInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * Explains why the input is disabled. When set together with `isDisabled`,
+     * the file input shows a tooltip with this text on hover and keyboard focus,
+     * and its trigger stays focusable (via `aria-disabled`) so the reason is
+     * discoverable by keyboard and assistive technology. Opening the file picker
+     * stays blocked.
+     *
+     * Use this instead of wrapping a disabled input in `Tooltip` — disabled
+     * controls don't emit the pointer events an external tooltip needs.
+     *
+     * @example
+     * ```
+     * <FileInput
+     *   label="Resume"
+     *   value={file}
+     *   isDisabled
+     *   disabledMessage="Uploads are locked until your profile is verified"
+     * />
+     * ```
+     */
+    disabledMessage?: string;
     /**
      * Whether the input is required.
      * @default false
@@ -105,7 +126,7 @@ export interface FileInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
  * <FileInput label="Resume" value={file} onChange={setFile} accept=".pdf" />
  * ```
  */
-export declare function FileInput({ label, isLabelHidden, value, onChange, changeAction, accept, isMultiple, maxSize, maxFiles, isDisabled, isRequired, isLoading, status: statusProp, description, placeholder, mode, isOptional, labelTooltip, width, xstyle, className, style, ref, ...rest }: FileInputProps): import("react").JSX.Element;
+export declare function FileInput({ label, isLabelHidden, value, onChange, changeAction, accept, isMultiple, maxSize, maxFiles, isDisabled, disabledMessage, isRequired, isLoading, status: statusProp, description, placeholder, mode, isOptional, labelTooltip, width, xstyle, className, style, ref, ...rest }: FileInputProps): import("react").JSX.Element;
 export declare namespace FileInput {
     var displayName: string;
 }

package/dist/FileInput/FileInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAEjB,MAAM,UAAU,CAAC;AAIlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAyN9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BA4ThB;yBArVe,SAAS"}
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAEjB,MAAM,UAAU,CAAC;AAMlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAyN9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BA4WhB;yBAtYe,SAAS"}

package/dist/FileInput/FileInput.js

@@ -22,6 +22,8 @@ import { colorVars, sizeVars, spacingVars, radiusVars, typographyVars, typeScale
 import { Field, InputClearButton } from "../Field/index.js";
 import { Icon } from "../Icon/index.js";
 import { Spinner } from "../Spinner/index.js";
+import { useAnnounce } from "../hooks/useAnnounce.js";
+import { useTooltip } from "../Tooltip/index.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -175,6 +177,7 @@ export function FileInput({
   maxSize,
   maxFiles,
   isDisabled = false,
+  disabledMessage,
   isRequired = false,
   isLoading = false,
   status: statusProp,
@@ -198,6 +201,23 @@ export function FileInput({
   const [isDragOver, setIsDragOver] = useState(false);
   const [validationError, setValidationError] = useState(null);
   const [, startTransition] = useTransition();
+
+  // Announce successful file selection to screen readers via a persistent
+  // live region (forms-17). The component's own role="status" region only
+  // carries validation errors, so a successful attach was previously silent.
+  const announce = useAnnounce();
+
+  // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
+  // tooltip listeners attach to the role="button" trigger (which already
+  // exists) and the trigger stays perceivable via aria-disabled instead of the
+  // native disabled attribute. Opening the picker is blocked by the isDisabled
+  // guards in handleClick / handleKeyDown / handleFiles.
+  const showsDisabledMessage = isDisabled && !!disabledMessage;
+  const disabledMessageTooltip = useTooltip({
+    placement: 'above',
+    focusTrigger: 'always',
+    isEnabled: showsDisabledMessage
+  });
   const status = statusProp ?? (validationError ? {
     type: 'error',
     message: validationError
@@ -212,7 +232,7 @@ export function FileInput({
     error: 'error',
     success: 'success'
   };
-  const ariaDescribedBy = [description ? descriptionID : null, status?.message ? statusMessageID : null].filter(Boolean).join(' ') || undefined;
+  const ariaDescribedBy = [description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined;
   const defaultPlaceholder = isMultiple ? 'Choose files' : 'Choose file';
   const displayPlaceholder = placeholder ?? defaultPlaceholder;
   const handleFiles = useCallback(fileList => {
@@ -234,12 +254,19 @@ export function FileInput({
     }
     const result = isMultiple ? valid : valid[0];
     onChange(result);
+
+    // Announce the successful selection politely. Validation errors are
+    // handled by the role="status" region below, so only announce the
+    // attach here (do not double-announce errors).
+    if (errors.length === 0) {
+      announce(valid.length === 1 ? `1 file selected: ${valid[0].name}` : `${valid.length} files selected`);
+    }
     if (changeAction) {
       startTransition(async () => {
         await changeAction(result);
       });
     }
-  }, [accept, isDisabled, isMultiple, maxFiles, maxSize, onChange, changeAction, startTransition]);
+  }, [accept, isDisabled, isMultiple, maxFiles, maxSize, onChange, changeAction, startTransition, announce]);
   const handleInputChange = useCallback(e => {
     const fileList = Array.from(e.target.files ?? []);
     handleFiles(fileList);
@@ -392,12 +419,30 @@ export function FileInput({
     labelTooltip: labelTooltip,
     width: width,
     children: [/*#__PURE__*/_jsxs("div", {
-      role: "button",
-      tabIndex: isDisabled ? -1 : 0,
+      ref: el => {
+        // Anchor + hover/focus listeners for the disabled-message tooltip.
+        // Handlers are gated internally by isEnabled, and anchor names
+        // compose, so attaching unconditionally is safe.
+        disabledMessageTooltip.ref(el);
+      },
+      role: "button"
+      // With a disabledMessage the trigger keeps focusability via
+      // aria-disabled so the reason is focus-discoverable; opening the picker
+      // is still blocked by the isDisabled guards in the handlers.
+      ,
+      tabIndex: isDisabled && !showsDisabledMessage ? -1 : 0,
+      "aria-disabled": showsDisabledMessage ? 'true' : undefined,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       "aria-label": label,
-      "aria-busy": isLoading || undefined,
+      "aria-busy": isLoading || undefined
+      // These describe the operable control, so they belong on the focusable
+      // role="button" wrapper — not the hidden tabIndex={-1} file input the
+      // user never focuses (forms-6).
+      ,
+      "aria-describedby": ariaDescribedBy,
+      "aria-required": isRequired ? 'true' : undefined,
+      "aria-invalid": status?.type === 'error' ? 'true' : undefined,
       ...dragDropProps,
       ...mergeProps(themeProps('file-input', {
         mode,
@@ -411,10 +456,11 @@ export function FileInput({
         accept: accept,
         multiple: isMultiple,
         disabled: isDisabled,
-        onChange: handleInputChange,
-        "aria-describedby": ariaDescribedBy,
-        "aria-required": isRequired ? 'true' : undefined,
-        "aria-invalid": status?.type === 'error' ? 'true' : undefined,
+        onChange: handleInputChange
+        // The visually-hidden native input is never focused (tabIndex={-1});
+        // its describedby/required/invalid live on the role="button" wrapper.
+        ,
+        "aria-hidden": "true",
         tabIndex: -1,
         ...{
           className: "x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr xzpqnlu xuxw1ft xc342km"
@@ -431,7 +477,7 @@ export function FileInput({
         className: "x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr xzpqnlu xuxw1ft xc342km"
       },
       children: validationError
-    })]
+    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }
 FileInput.displayName = 'FileInput';

package/dist/Grid/Grid.d.ts

@@ -64,6 +64,16 @@ export interface GridProps extends BaseProps<HTMLDivElement> {
      * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
      */
     height?: SizeValue;
+    /**
+     * Maximum width of the grid container.
+     * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
+     */
+    maxWidth?: SizeValue;
+    /**
+     * Minimum height of the grid container.
+     * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
+     */
+    minHeight?: SizeValue;
     /**
      * Spacing between all grid items (both row and column).
      * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
@@ -126,7 +136,7 @@ export interface GridProps extends BaseProps<HTMLDivElement> {
  * </Grid>
  * ```
  */
-export declare function Grid({ columns, minChildWidth, rowHeight, width, height, gap, rowGap, columnGap, align, justify, xstyle, className, style, children, ref, ...props }: GridProps): import("react").JSX.Element;
+export declare function Grid({ columns, minChildWidth, rowHeight, width, height, maxWidth, minHeight, gap, rowGap, columnGap, align, justify, xstyle, className, style, children, ref, ...props }: GridProps): import("react").JSX.Element;
 export declare namespace Grid {
     var displayName: string;
 }

package/dist/Grid/Grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C;;GAEG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEnE;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,WAAW,GACnB,MAAM,GACN;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB,CAAC;AAEN,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8LD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,aAAiB,EACjB,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAmFX;yBApGe,IAAI"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C;;GAEG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEnE;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,WAAW,GACnB,MAAM,GACN;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB,CAAC;AAEN,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2MD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,aAAiB,EACjB,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA2FX;yBA9Ge,IAAI"}

package/dist/Grid/Grid.js

@@ -43,6 +43,26 @@ const baseStyles = {
     $$css: true
   }
 };
+
+// Dynamic track values compile to CSS variables + a class-level declaration
+// (grid-template-columns: var(--x)) instead of a raw inline style, so
+// consumer `xstyle` overrides — including ones inside @media queries — can
+// still win. A raw inline `grid-template-columns` would beat any class.
+const _temp = {
+  kJBjZk: "xhij9v2",
+  "$$css": true
+};
+const dynamicStyles = {
+  templateColumns: value => [{
+    kumcoG: value != null ? "xqketvx" : value,
+    $$css: true
+  }, {
+    "--x-gridTemplateColumns": value != null ? value : undefined
+  }],
+  autoRows: value => [_temp, {
+    "--x-gridAutoRows": `${value}px` != null ? `${value}px` : undefined
+  }]
+};
 const alignStyles = {
   start: {
     kGNEyG: "x7a106z",
@@ -272,6 +292,8 @@ export function Grid({
   rowHeight,
   width,
   height,
+  maxWidth,
+  minHeight,
   gap,
   rowGap,
   columnGap,
@@ -311,17 +333,21 @@ export function Grid({
     gridTemplateColumns = '1fr';
   }
 
-  // Build inline style for dynamic values
+  // Build inline style for dynamic values. Track templates go through
+  // dynamicStyles (CSS-var indirection) so xstyle/@media overrides work;
+  // width/height stay inline as explicit caller-set dimensions.
   const inlineStyle = {
-    gridTemplateColumns,
-    ...(rowHeight != null && {
-      gridAutoRows: `${rowHeight}px`
-    }),
     ...(width != null && {
       width: typeof width === 'number' ? `${width}px` : width
     }),
     ...(height != null && {
       height: typeof height === 'number' ? `${height}px` : height
+    }),
+    ...(maxWidth != null && {
+      maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth
+    }),
+    ...(minHeight != null && {
+      minHeight: typeof minHeight === 'number' ? `${minHeight}px` : minHeight
     })
   };
 
@@ -334,7 +360,7 @@ export function Grid({
       gap,
       align,
       justify
-    }), stylex.props(baseStyles.grid, gap != null && gapStyles[gap], rowGap != null && rowGapStyles[rowGap], columnGap != null && columnGapStyles[columnGap], align != null && alignStyles[align], justify != null && justifyStyles[justify], xstyle), className, {
+    }), stylex.props(baseStyles.grid, dynamicStyles.templateColumns(gridTemplateColumns), rowHeight != null && dynamicStyles.autoRows(rowHeight), gap != null && gapStyles[gap], rowGap != null && rowGapStyles[rowGap], columnGap != null && columnGapStyles[columnGap], align != null && alignStyles[align], justify != null && justifyStyles[justify], xstyle), className, {
       ...style,
       ...inlineStyle
     }),

package/dist/InputGroup/InputGroup.d.ts

@@ -1,10 +1,11 @@
 /**
  * @file InputGroup.tsx
- * @input Uses React, StyleX, theme tokens, InputGroupContext
- * @output Exports InputGroup component
+ * @input Uses React, StyleX, theme tokens, InputGroupContext, Field
+ * @output Exports InputGroup component with group label/description ARIA wiring
  * @position Groups input with prefix/suffix addons; consumed by index.ts
  *
- * Children (TextInput, NumberInput) consume the InputGroup context
+ * Children (TextInput, NumberInput, TimeInput, DateInput, Typeahead,
+ * Selector, MultiSelector) consume the InputGroup context
  * to remove their own border/radius so the group container provides
  * the unified border treatment.
  *

package/dist/InputGroup/InputGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAQ,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAGjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA0BhD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,eAAe,+BAuDjB;yBAxEe,UAAU"}
+{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAQ,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAGjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA0BhD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,eAAe,+BAwEjB;yBAzFe,UAAU"}

package/dist/InputGroup/InputGroup.js

@@ -4,11 +4,12 @@
 
 /**
  * @file InputGroup.tsx
- * @input Uses React, StyleX, theme tokens, InputGroupContext
- * @output Exports InputGroup component
+ * @input Uses React, StyleX, theme tokens, InputGroupContext, Field
+ * @output Exports InputGroup component with group label/description ARIA wiring
  * @position Groups input with prefix/suffix addons; consumed by index.ts
  *
- * Children (TextInput, NumberInput) consume the InputGroup context
+ * Children (TextInput, NumberInput, TimeInput, DateInput, Typeahead,
+ * Selector, MultiSelector) consume the InputGroup context
  * to remove their own border/radius so the group container provides
  * the unified border treatment.
  *
@@ -88,10 +89,15 @@ export function InputGroup({
 }) {
   const size = useSize(sizeProp, 'md');
   const inputId = useId();
+  const labelID = useId();
+  const descriptionID = useId();
   const statusMessageId = useId();
+  const describedByIDs = [description ? descriptionID : null, status?.message ? statusMessageId : null].filter(Boolean).join(' ') || undefined;
   const contextValue = useMemo(() => ({
-    isInGroup: true
-  }), []);
+    isInGroup: true,
+    labelID,
+    describedByIDs
+  }), [labelID, describedByIDs]);
   return /*#__PURE__*/_jsx(InputGroupContext, {
     value: contextValue,
     children: /*#__PURE__*/_jsx(SizeProvider, {
@@ -101,6 +107,9 @@ export function InputGroup({
         isLabelHidden: isLabelHidden,
         description: description,
         inputID: inputId,
+        labelID: labelID,
+        descriptionID: description ? descriptionID : undefined,
+        isGroupLabel: true,
         isOptional: isOptional,
         isRequired: isRequired,
         isDisabled: isDisabled,
@@ -114,7 +123,8 @@ export function InputGroup({
         children: /*#__PURE__*/_jsx("div", {
           ref: ref,
           role: "group",
-          "aria-label": label,
+          "aria-labelledby": labelID,
+          "aria-describedby": describedByIDs,
           "data-testid": testId,
           ...rest,
           ...mergeProps(themeProps('input-group', {

package/dist/InputGroup/InputGroupContext.d.ts

@@ -1,5 +1,9 @@
 export interface InputGroupContextValue {
     isInGroup: true;
+    /** ID of the group label element, for aria-labelledby composition. */
+    labelID: string;
+    /** IDs of helper/status text owned by the group, for aria-describedby composition. */
+    describedByIDs?: string;
 }
 export declare const InputGroupContext: import("react").Context<InputGroupContextValue | null>;
 /**

package/dist/InputGroup/InputGroupContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroupContext.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroupContext.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,IAAI,CAAC;CACjB;AAED,eAAO,MAAM,iBAAiB,wDACsB,CAAC;AAGrD;;;GAGG;AACH,wBAAgB,aAAa,IAAI,sBAAsB,GAAG,IAAI,CAE7D"}
+{"version":3,"file":"InputGroupContext.d.ts","sourceRoot":"","sources":["../../src/InputGroup/InputGroupContext.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,IAAI,CAAC;IAChB,sEAAsE;IACtE,OAAO,EAAE,MAAM,CAAC;IAChB,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,iBAAiB,wDAE7B,CAAC;AAGF;;;GAGG;AACH,wBAAgB,aAAa,IAAI,sBAAsB,GAAG,IAAI,CAE7D"}

package/dist/InputGroup/InputGroupContext.js

@@ -4,9 +4,9 @@
 
 /**
  * @file InputGroupContext.ts
- * @input None (pure context definition)
+ * @input React createContext/use
  * @output Exports InputGroup context and useInputGroup hook
- * @position Shared context; consumed by input components for group-aware styling
+ * @position Shared context; consumed by input components for group-aware styling and ARIA associations
  */
 import { createContext, use } from 'react';
 export const InputGroupContext = /*#__PURE__*/createContext(null);

package/dist/InputGroup/groupStyles.d.ts

@@ -2,7 +2,7 @@
  * @file groupStyles.ts
  * @input Uses StyleX, theme tokens
  * @output Exports shared group-aware styles for input components
- * @position Shared styles consumed by TextInput, NumberInput when inside an InputGroup
+ * @position Shared styles consumed by InputGroup-compatible controls
  */
 import * as stylex from '@stylexjs/stylex';
 export declare const groupStyles: Readonly<{

package/dist/InputGroup/groupStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"groupStyles.d.ts","sourceRoot":"","sources":["../../src/InputGroup/groupStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;EA6BtB,CAAC"}
+{"version":3,"file":"groupStyles.d.ts","sourceRoot":"","sources":["../../src/InputGroup/groupStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;EAmCtB,CAAC"}

package/dist/InputGroup/groupStyles.js

@@ -4,7 +4,7 @@
  * @file groupStyles.ts
  * @input Uses StyleX, theme tokens
  * @output Exports shared group-aware styles for input components
- * @position Shared styles consumed by TextInput, NumberInput when inside an InputGroup
+ * @position Shared styles consumed by InputGroup-compatible controls
  */
 
 import * as stylex from '@stylexjs/stylex';
@@ -18,8 +18,8 @@ export const groupStyles = {
     keTefX: "xd10s4z x1pwwqoy",
     krdFHd: "x15mokao x8eehn2",
     kVL7Gh: "xbiv7yw x1xrp5p4",
-    kfmiAY: "x1ga7v0g x11xp8u1",
-    kT0f0o: "x16uus16 x747jw7",
+    kfmiAY: "x1ga7v0g x11xp8u1 xpufgd0 x1ir7nn6",
+    kT0f0o: "x16uus16 x747jw7 xxd14kb x1vej5at",
     kXnDq0: "x1rm9qnc",
     $$css: true
   }

package/dist/InputGroup/index.d.ts

@@ -9,4 +9,5 @@ export type { InputGroupProps, InputGroupSize } from './InputGroup';
 export { InputGroupText } from './InputGroupText';
 export type { InputGroupTextProps } from './InputGroupText';
 export { useInputGroup } from './InputGroupContext';
+export type { InputGroupContextValue } from './InputGroupContext';
 //# sourceMappingURL=index.d.ts.map

package/dist/InputGroup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InputGroup/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EAAC,eAAe,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAElE,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAE1D,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InputGroup/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EAAC,eAAe,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAElE,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAE1D,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC"}

package/dist/Kbd/Kbd.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/Kbd/Kbd.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiG5C,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,GAAG,CAAC,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,QAAQ,qBA2B3E;yBA3Be,GAAG"}
+{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/Kbd/Kbd.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4H5C,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,GAAG,CAAC,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,QAAQ,qBAgC3E;yBAhCe,GAAG"}

package/dist/Kbd/Kbd.js

@@ -66,6 +66,32 @@ function getKeyDisplay(key, isMac) {
   }
   return KEY_DISPLAY[key] ?? key.toUpperCase();
 }
+
+/**
+ * Spoken-word labels for screen readers. The visual `KEY_DISPLAY` uses glyphs
+ * (⌘, ⇧, ↵, …) that assistive tech cannot announce meaningfully, so the
+ * accessible name for the shortcut is built from these words instead.
+ */
+const KEY_LABEL = {
+  ctrl: 'Control',
+  alt: 'Alt',
+  shift: 'Shift',
+  enter: 'Enter',
+  backspace: 'Backspace',
+  escape: 'Escape',
+  tab: 'Tab',
+  up: 'Up arrow',
+  down: 'Down arrow',
+  left: 'Left arrow',
+  right: 'Right arrow',
+  plus: 'Plus'
+};
+function getKeyLabel(key, isMac) {
+  if (key === 'mod') {
+    return isMac ? 'Command' : 'Control';
+  }
+  return KEY_LABEL[key] ?? key.toUpperCase();
+}
 function subscribeToPlatformChanges() {
   return () => {};
 }
@@ -115,12 +141,18 @@ export function Kbd({
 }) {
   const isMac = useSyncExternalStore(subscribeToPlatformChanges, detectMac, getServerPlatformSnapshot);
   const parts = keys.split('+').map(key => key.trim().toLowerCase());
+
+  // Screen-reader name: the joined spoken labels (e.g. "Command + K"), since
+  // the visual glyphs below are announced meaninglessly by assistive tech.
+  const accessibleName = parts.map(key => getKeyLabel(key, isMac)).join(' + ');
   return /*#__PURE__*/_jsx("span", {
     ref: ref,
+    role: "img",
+    "aria-label": accessibleName,
     ...rest,
     ...mergeProps(themeProps('kbd'), stylex.props(styles.wrapper, xstyle), className, style),
-    "aria-hidden": "true",
     children: parts.map(key => /*#__PURE__*/_jsx("kbd", {
+      "aria-hidden": "true",
       ...{
         className: "x3nfvp2 x6s0dn4 xl56j7k x16asifk x1grt7ep x7a5moj xx3sua9 x17x4s8c xlxy82 x1q0q8m5 xib2hle xv1l7n4 x9ynric x141an7d x1e4wzip x1ltkj2j x87ps6o"
       },