@astryxdesign/core 0.1.1 → 0.1.2-canary.04e71b2

package/dist/Link/Link.js

@@ -21,6 +21,7 @@ import { colorVars, durationVars, easeVars, spacingVars, typeScaleVars } from ".
 import { Icon } from "../Icon/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { Text } from "../Text/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { useLinkComponent } from "./useLinkComponent.js";
 import { mergeProps } from "../utils/index.js";
 import { computeTargetAndRel } from "./computeTargetAndRel.js";
@@ -80,11 +81,11 @@ const styles = {
  */
 const linkColorStyles = {
   primary: {
-    kMwMTN: "x1tgivj0",
+    kMwMTN: "x1tgivj0 x4z56r7",
     $$css: true
   },
   secondary: {
-    kMwMTN: "xv1l7n4",
+    kMwMTN: "xv1l7n4 x7ruf5d",
     $$css: true
   },
   disabled: {
@@ -95,8 +96,8 @@ const linkColorStyles = {
     kMwMTN: "xv1l7n4",
     $$css: true
   },
-  active: {
-    kMwMTN: "xjse4m1",
+  accent: {
+    kMwMTN: "xjse4m1 x17qfo7y",
     $$css: true
   },
   inherit: {
@@ -117,6 +118,11 @@ const linkColorStyles = {
  * <Link href="/settings" color="secondary">Settings</Link>
  * <Link href="/privacy" hasUnderline>Privacy Policy</Link>
  * <Link label="Close dialog" href="/home"><Icon icon="x" /></Link>
+ *
+ * // Inline link inside text — inherits the surrounding type/size:
+ * <Text type="large">
+ *   Read our <Link href="/terms" type="inherit">terms</Link> first.
+ * </Text>
  * ```
  */
 export function Link({
@@ -126,6 +132,7 @@ export function Link({
   hasUnderline = false,
   isDisabled = false,
   isExternalLink = false,
+  newTabLabel = '(opens in new tab)',
   target: targetFromProps,
   onClick,
   tooltip,
@@ -133,7 +140,7 @@ export function Link({
   type = 'body',
   size,
   weight,
-  color = 'active',
+  color = 'accent',
   display = 'inline',
   maxLines = 0,
   children,
@@ -168,10 +175,14 @@ export function Link({
       display: display,
       maxLines: maxLines,
       children: children
-    }), isExternalLink && !renderAsButton && /*#__PURE__*/_jsx(Icon, {
-      icon: "externalLink",
-      size: "xsm",
-      color: "inherit"
+    }), isExternalLink && !renderAsButton && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: "externalLink",
+        size: "xsm",
+        color: "inherit"
+      }), /*#__PURE__*/_jsx(VisuallyHidden, {
+        children: newTabLabel
+      })]
     })]
   });
   let linkElement;

package/dist/Link/LinkProvider.d.ts

@@ -19,6 +19,7 @@
  * - /packages/core/src/Link/index.ts
  * - /packages/core/src/Link/Link.doc.mjs
  * - /packages/cli/templates/blocks/components/Link/ (showcase blocks)
+ * - /packages/cli/templates/blocks/components/LinkProvider/ (example blocks)
  */
 import { type ReactNode } from 'react';
 import type { LinkComponentType } from './types';

package/dist/Link/LinkProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkProvider.d.ts","sourceRoot":"","sources":["../../src/Link/LinkProvider.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;OASG;IACH,SAAS,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAC,EAAE,iBAAiB,+BAGpE;yBAHe,YAAY"}
+{"version":3,"file":"LinkProvider.d.ts","sourceRoot":"","sources":["../../src/Link/LinkProvider.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;OASG;IACH,SAAS,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAC,EAAE,iBAAiB,+BAGpE;yBAHe,YAAY"}

package/dist/Link/LinkProvider.js

@@ -23,6 +23,7 @@
  * - /packages/core/src/Link/index.ts
  * - /packages/core/src/Link/Link.doc.mjs
  * - /packages/cli/templates/blocks/components/Link/ (showcase blocks)
+ * - /packages/cli/templates/blocks/components/LinkProvider/ (example blocks)
  */
 import { useMemo } from 'react';
 import { LinkContext } from "./LinkContext.js";

package/dist/Markdown/Markdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/Markdown/Markdown.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/Markdown/Markdown.tsx"],"names":[],"mappings":"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"}

package/dist/Markdown/Markdown.js

@@ -795,7 +795,17 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
             children: paraChildren
           }, index);
         }
-        return /*#__PURE__*/_jsx("p", {
+        // Markdown paragraphs render as <div>, not <p>: inline content can
+        // include block-level nodes (images, custom inline components), and a
+        // <p> would reparent them, desyncing SSR markup from the hydrated DOM.
+        // Block spacing comes from token-based StyleX margins, so the rendered
+        // appearance is unchanged. role="paragraph" re-exposes the paragraph
+        // role in the accessibility tree (a pure ARIA hint — it does not trigger
+        // the parser's block-child reparenting) so prose semantics are preserved
+        // without the <p> composition hazard. Consumers who want a real <p>
+        // element can still pass components={{paragraph: 'p'}}.
+        return /*#__PURE__*/_jsx("div", {
+          role: "paragraph",
           ...stylex.props(spacing, contentWidthValue != null ? dynamicStyles.proseWidth(contentWidthValue) : null, contentAlign !== 'start' ? dynamicStyles.proseAlign(ALIGN_MARGIN[contentAlign]) : null, isFirst && styles.noMarginBlockStart, isLast && styles.noMarginBlockEnd),
           children: paraChildren
         }, index);
@@ -908,6 +918,11 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
       {
         const colMinWidths = computeTableColumnMinWidths(node);
         return /*#__PURE__*/_jsx("div", {
+          // Keyboard-focusable so keyboard users can scroll a horizontally
+          // overflowing GFM table.
+          tabIndex: 0,
+          role: "region",
+          "aria-label": "Table",
           ...stylex.props(styles.tableWrapper, spacing, contentWidthValue != null ? dynamicStyles.blockWidth(contentWidthValue) : null, BLOCK_ALIGN_MARGIN[contentAlign] != null ? dynamicStyles.blockAlign(BLOCK_ALIGN_MARGIN[contentAlign]) : null, isFirst && styles.noMarginBlockStart, isLast && styles.noMarginBlockEnd),
           children: /*#__PURE__*/_jsxs(Table, {
             dividers: "rows",
@@ -953,12 +968,12 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
       {
         const safeSrc = sanitizeUrl(node.src);
         if (safeSrc == null) {
-          return /*#__PURE__*/_jsxs("p", {
+          return /*#__PURE__*/_jsxs("div", {
             ...stylex.props(spacing, isFirst && styles.noMarginBlockStart, isLast && styles.noMarginBlockEnd),
             children: ["[", node.alt, "]"]
           }, index);
         }
-        return /*#__PURE__*/_jsx("p", {
+        return /*#__PURE__*/_jsx("div", {
           ...stylex.props(spacing, isFirst && styles.noMarginBlockStart, isLast && styles.noMarginBlockEnd),
           children: /*#__PURE__*/_jsx("img", {
             src: safeSrc,

package/dist/MobileNav/MobileNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0I5C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EACR,MAAM,EACN,KAAW,EACX,IAAa,EACb,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,MAAM,EACb,GAAG,GACJ,EAAE,cAAc,+BA2JhB;yBAxKe,SAAS"}
+{"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0I5C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EACR,MAAM,EACN,KAAW,EACX,IAAa,EACb,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,MAAM,EACb,GAAG,GACJ,EAAE,cAAc,+BAwKhB;yBArLe,SAAS"}

package/dist/MobileNav/MobileNav.js

@@ -233,8 +233,21 @@ export function MobileNav({
     return () => {
       if (closeTimeoutRef.current) {
         clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
       }
       document.documentElement.style.overflow = '';
+      // Close the native dialog on teardown if it's still open. Inside AppShell
+      // the drawer is mounted in an <Activity> that switches to mode="hidden"
+      // when the drawer closes; React then runs this cleanup (with a stale
+      // isOpen) instead of re-running the effect with isOpen=false, so the
+      // close branch above never fires. If we leave the <dialog> `open` here,
+      // showModal() is skipped on the next open (the dialog is already open in
+      // the hidden tree) and the drawer can never be re-opened. Closing it
+      // unconditionally on teardown keeps the native dialog state in sync so a
+      // subsequent open cleanly calls showModal() again.
+      if (dialog.open) {
+        dialog.close();
+      }
     };
   }, [isOpen, side]);
 

package/dist/MoreMenu/MoreMenu.d.ts

@@ -59,12 +59,6 @@ export interface MoreMenuProps extends Pick<BaseProps, 'xstyle' | 'className' |
      * Callback fired when the menu visibility changes.
      */
     onOpenChange?: (isOpen: boolean) => void;
-    /**
-     * Whether to auto-focus the first menu item when the menu opens.
-     * Set to `false` for inline showcases or documentation previews.
-     * @default true
-     */
-    hasAutoFocus?: boolean;
     /** Test ID for testing frameworks. */
     'data-testid'?: string;
 }
@@ -83,7 +77,7 @@ export interface MoreMenuProps extends Pick<BaseProps, 'xstyle' | 'className' |
  * />
  * ```
  */
-export declare function MoreMenu({ items, label, variant, size: sizeProp, icon, isDisabled, isMenuOpen, onOpenChange, hasAutoFocus, xstyle, className: classNameProp, style, 'data-testid': testId, ref, }: MoreMenuProps): import("react").JSX.Element;
+export declare function MoreMenu({ items, label, variant, size: sizeProp, icon, isDisabled, isMenuOpen, onOpenChange, xstyle, className: classNameProp, style, 'data-testid': testId, ref, }: MoreMenuProps): import("react").JSX.Element;
 export declare namespace MoreMenu {
     var displayName: string;
 }

package/dist/MoreMenu/MoreMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoreMenu.d.ts","sourceRoot":"","sources":["../../src/MoreMenu/MoreMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIrC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AACxD,OAAO,KAAK,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,WAAW,CAAC;AACzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;;OAGG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAsB,EACtB,OAAiB,EACjB,IAAI,EAAE,QAAQ,EACd,IAAI,EACJ,UAAkB,EAClB,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,MAAM,EACN,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,aAAa,+BA+Bf;yBA9Ce,QAAQ"}
+{"version":3,"file":"MoreMenu.d.ts","sourceRoot":"","sources":["../../src/MoreMenu/MoreMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIrC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AACxD,OAAO,KAAK,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,WAAW,CAAC;AACzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;;OAGG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAsB,EACtB,OAAiB,EACjB,IAAI,EAAE,QAAQ,EACd,IAAI,EACJ,UAAkB,EAClB,UAAU,EACV,YAAY,EACZ,MAAM,EACN,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,aAAa,+BA8Bf;yBA5Ce,QAAQ"}

package/dist/MoreMenu/MoreMenu.js

@@ -46,7 +46,6 @@ export function MoreMenu({
   isDisabled = false,
   isMenuOpen,
   onOpenChange,
-  hasAutoFocus,
   xstyle,
   className: classNameProp,
   style,
@@ -73,7 +72,6 @@ export function MoreMenu({
     },
     items: items,
     hasChevron: false,
-    hasAutoFocus: hasAutoFocus,
     "data-testid": testId
   });
 }

package/dist/MultiSelector/MultiSelector.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file MultiSelector.tsx
- * @input Uses React, StyleX, usePopover, CheckboxInput, Field, Badge, Icon
+ * @input Uses React, StyleX, usePopover, useTooltip, CheckboxInput, Field, Badge, Icon
  * @output Exports MultiSelector component
  * @position Core implementation; consumed by index.ts
  *
@@ -46,6 +46,29 @@ export interface MultiSelectorProps<T extends MultiSelectorOptionType = MultiSel
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * Explains why the selector is disabled. When set together with
+     * `isDisabled`, the selector shows a tooltip with this text on hover and
+     * keyboard focus, and the trigger stays focusable (via `aria-disabled`)
+     * so the reason is discoverable by keyboard and assistive technology.
+     * Activation stays blocked.
+     *
+     * Use this instead of wrapping a disabled selector in `Tooltip` — disabled
+     * controls don't emit the pointer events an external tooltip needs.
+     *
+     * @example
+     * ```
+     * <MultiSelector
+     *   label="Columns"
+     *   options={columns}
+     *   value={selected}
+     *   onChange={setSelected}
+     *   isDisabled
+     *   disabledMessage="Select a table first"
+     * />
+     * ```
+     */
+    disabledMessage?: string;
     /**
      * The options to display in the selector.
      * Can be strings, objects, dividers, or sections.
@@ -167,7 +190,7 @@ export interface MultiSelectorProps<T extends MultiSelectorOptionType = MultiSel
  * />
  * ```
  */
-export declare function MultiSelector<T extends MultiSelectorOptionType>({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, options, value, onChange, changeAction, isLoading, placeholder, size: sizeProp, status, labelTooltip, startIcon, hasClear, hasSelectAll, selectAllLabel, hasSearch, searchPlaceholder, triggerDisplay, maxBadges, renderOption, isDefaultOpen, 'data-testid': testId, width, xstyle, className, style, }: MultiSelectorProps<T>): React.JSX.Element;
+export declare function MultiSelector<T extends MultiSelectorOptionType>({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, options, value, onChange, changeAction, isLoading, placeholder, size: sizeProp, status, labelTooltip, startIcon, hasClear, hasSelectAll, selectAllLabel, hasSearch, searchPlaceholder, triggerDisplay, maxBadges, renderOption, isDefaultOpen, 'data-testid': testId, width, xstyle, className, style, }: MultiSelectorProps<T>): React.JSX.Element;
 export declare namespace MultiSelector {
     var displayName: string;
 }

package/dist/MultiSelector/MultiSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"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"}

package/dist/MultiSelector/MultiSelector.js

@@ -4,7 +4,7 @@
 
 /**
  * @file MultiSelector.tsx
- * @input Uses React, StyleX, usePopover, CheckboxInput, Field, Badge, Icon
+ * @input Uses React, StyleX, usePopover, useTooltip, CheckboxInput, Field, Badge, Icon
  * @output Exports MultiSelector component
  * @position Core implementation; consumed by index.ts
  *
@@ -16,6 +16,7 @@
 import React, { useCallback, useEffect, useId, useMemo, useOptimistic, useRef, useState, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { usePopover } from "../Popover/usePopover.js";
+import { useTooltip } from "../Tooltip/index.js";
 import { Icon, renderIconSlot } from "../Icon/index.js";
 import { Field, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputWrapperStyles } from "../Field/index.js";
 import { Divider } from "../Divider/index.js";
@@ -27,6 +28,7 @@ import { colorVars, sizeVars, spacingVars, radiusVars, durationVars, easeVars, t
 import { isOptionData, isDivider, isSection, normalizeOption, getSelectableOptions } from "../Selector/utils.js";
 import { useMultiCombobox } from "./hooks.js";
 import { mergeProps } from "../utils/index.js";
+import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { themeProps } from "../utils/themeProps.js";
 
@@ -174,6 +176,7 @@ export function MultiSelector({
   isOptional = false,
   isRequired = false,
   isDisabled = false,
+  disabledMessage,
   options,
   value,
   onChange,
@@ -217,12 +220,42 @@ export function MultiSelector({
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || optimisticValue !== value;
 
+  // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
+  // tooltip listeners attach to the trigger container (which already exists)
+  // and the trigger button stays perceivable via aria-disabled instead of the
+  // disabled attribute. Activation is blocked by the isDisabled guards in
+  // useMultiCombobox (onTriggerClick / onKeyDown).
+  const showsDisabledMessage = isDisabled && !!disabledMessage;
+  const disabledMessageTooltip = useTooltip({
+    placement: 'above',
+    // The container div is not naturally focusable; focusin bubbles up from
+    // the trigger button, so always attach focus listeners.
+    focusTrigger: 'always',
+    isEnabled: showsDisabledMessage
+  });
+
   // Build aria-describedby
-  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;
 
   // Flatten options for keyboard navigation
   const selectableItems = useMemo(() => getSelectableOptions(options), [options]);
 
+  // Announce selection-count changes politely (comboboxes-7 announce path).
+  // Toggling options / select-all previously produced no audible feedback.
+  const announce = useAnnounce();
+  const announceSelection = useCallback(nextValue => {
+    const total = selectableItems.length;
+    const selectableSet = new Set(selectableItems.map(item => item.value));
+    const selectedCount = nextValue.filter(v => selectableSet.has(v)).length;
+    if (selectedCount === 0) {
+      announce('Selection cleared');
+    } else if (total > 0 && selectedCount === total) {
+      announce('All selected');
+    } else {
+      announce(`${selectedCount} of ${total} selected`);
+    }
+  }, [announce, selectableItems]);
+
   // Filter items by search query
   const filteredItems = useMemo(() => {
     if (!searchQuery) {
@@ -295,7 +328,9 @@ export function MultiSelector({
     onHide: handleLayerHide,
     hasCloseButton: false,
     hasAutoFocus: false,
-    dialogLabel: `${label} options`
+    // The popup's own role="listbox" is the exposed semantics; the trigger
+    // keeps DOM focus, so wrapping it in a modal dialog would misrepresent it.
+    role: 'none'
   });
 
   // Open dropdown on mount when isDefaultOpen is true
@@ -307,27 +342,36 @@ export function MultiSelector({
   }, []);
 
   // Handle toggle
-  // Handle clear button click
-  const handleClear = useCallback(e => {
-    e.stopPropagation(); // Don't open dropdown
+  // Clear all selected values. Shared by the clear button and the keyboard
+  // Delete/Backspace path so clearing is reachable without a mouse.
+  const clearValues = useCallback(() => {
     onChange([]);
+    announceSelection([]);
     if (changeAction) {
       startTransition(async () => {
         setOptimisticValue([]);
         await changeAction([]);
       });
     }
-  }, [onChange, changeAction, startTransition, setOptimisticValue]);
+  }, [onChange, changeAction, startTransition, setOptimisticValue, announceSelection]);
+
+  // Whether there is at least one selected value (clearing is meaningful).
+  const hasValue = optimisticValue.length > 0;
+  const handleClear = useCallback(e => {
+    e.stopPropagation(); // Don't open dropdown
+    clearValues();
+  }, [clearValues]);
   const handleToggle = useCallback(itemValue => {
     const newValue = optimisticValue.includes(itemValue) ? optimisticValue.filter(v => v !== itemValue) : [...optimisticValue, itemValue];
     onChange(newValue);
+    announceSelection(newValue);
     if (changeAction) {
       startTransition(async () => {
         setOptimisticValue(newValue);
         await changeAction(newValue);
       });
     }
-  }, [optimisticValue, onChange, changeAction, startTransition, setOptimisticValue]);
+  }, [optimisticValue, onChange, changeAction, startTransition, setOptimisticValue, announceSelection]);
 
   // Select-all logic
   const enabledItems = useMemo(() => filteredItems.filter(item => !item.disabled), [filteredItems]);
@@ -351,13 +395,14 @@ export function MultiSelector({
       }
     }
     onChange(newValue);
+    announceSelection(newValue);
     if (changeAction) {
       startTransition(async () => {
         setOptimisticValue(newValue);
         await changeAction(newValue);
       });
     }
-  }, [allEnabledSelected, enabledItems, optimisticValue, onChange, changeAction, startTransition, setOptimisticValue]);
+  }, [allEnabledSelected, enabledItems, optimisticValue, onChange, changeAction, startTransition, setOptimisticValue, announceSelection]);
 
   // Route toggle: select-all sentinel → handleSelectAll, everything else → handleToggle
   const handleNavigableToggle = useCallback(itemValue => {
@@ -394,9 +439,24 @@ export function MultiSelector({
     }, [popover, hasSearch, optimisticValue]),
     onClose: popover.hide,
     onToggle: handleNavigableToggle,
+    onClear: hasClear ? clearValues : undefined,
+    hasValue,
     listboxId
   });
 
+  // Keep the highlighted option visible during keyboard navigation. The
+  // listbox is a fixed-height scroll container, so without this the virtual
+  // cursor walks off-screen once navigation passes the visible window. Mirrors
+  // CommandPaletteItem's scrollIntoView({block: 'nearest'}) behavior.
+  useEffect(() => {
+    if (!popover.isOpen || highlightedIndex < 0) {
+      return;
+    }
+    document.getElementById(getItemId(highlightedIndex))?.scrollIntoView?.({
+      block: 'nearest'
+    });
+  }, [popover.isOpen, highlightedIndex, getItemId]);
+
   // Build trigger display content
   const selectedLabels = useMemo(() => {
     return optimisticValue.map(v => {
@@ -466,16 +526,25 @@ export function MultiSelector({
       },
       children: /*#__PURE__*/_jsx("input", {
         ref: searchRef,
-        id: searchId,
-        role: "searchbox",
+        id: searchId
+        // When hasSearch is set, focus moves into this input on open, so it —
+        // not the trigger — must be the combobox reporting the highlighted
+        // option via aria-activedescendant (comboboxes-4).
+        ,
+        role: "combobox",
+        "aria-expanded": popover.isOpen,
         "aria-controls": listboxId,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
         "aria-label": "Search options",
         type: "text",
         value: searchQuery,
         onChange: e => setSearchQuery(e.target.value),
         onKeyDown: e => {
-          // Let ArrowDown/Up/Escape/Tab propagate to parent handler
-          if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Escape' || e.key === 'Tab') {
+          // Arrow keys navigate options; Enter toggles; Escape/Tab close.
+          // Space and Home/End are left to the input (type a space / move
+          // the caret), not forwarded to option navigation.
+          if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === 'Escape' || e.key === 'Tab') {
             onKeyDown(e);
           }
         },
@@ -485,7 +554,7 @@ export function MultiSelector({
         }
       })
     });
-  }, [hasSearch, searchId, listboxId, searchQuery, searchPlaceholder, onKeyDown]);
+  }, [hasSearch, searchId, listboxId, searchQuery, searchPlaceholder, onKeyDown, popover.isOpen, highlightedIndex, getItemId]);
 
   // Render an individual item (index-based)
   const renderItem = useCallback((item, flatIndex) => {
@@ -633,6 +702,10 @@ export function MultiSelector({
     children: [/*#__PURE__*/_jsxs("div", {
       ref: el => {
         popover.triggerRef(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);
       },
       onClick: onTriggerClick,
       "data-testid": testId,
@@ -646,19 +719,28 @@ export function MultiSelector({
       }), /*#__PURE__*/_jsx("button", {
         ref: triggerRef,
         id: triggerId,
-        type: "button",
-        role: "combobox",
+        type: "button"
+        // In hasSearch mode the popup's search input is the combobox (it owns
+        // focus + aria-activedescendant, comboboxes-4), so the trigger is a
+        // plain button that opens the listbox — not a second combobox.
+        ,
+        role: hasSearch ? undefined : 'combobox',
         "aria-haspopup": "listbox",
         "aria-expanded": popover.isOpen,
         "aria-controls": listboxId,
-        "aria-activedescendant": popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
+        "aria-activedescendant": !hasSearch && popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
         "aria-describedby": ariaDescribedBy,
         "aria-required": isRequired ? 'true' : undefined,
         "aria-invalid": status?.type === 'error' ? 'true' : undefined,
-        "aria-busy": isBusy || undefined,
-        disabled: isDisabled,
+        "aria-busy": isBusy || undefined
+        // With a disabledMessage the trigger keeps focusability via
+        // aria-disabled so the reason is focus-discoverable; activation is
+        // still blocked by the isDisabled guards in useMultiCombobox.
+        ,
+        disabled: isDisabled && !showsDisabledMessage,
+        "aria-disabled": showsDisabledMessage ? 'true' : undefined,
         onKeyDown: onKeyDown,
-        tabIndex: -1,
+        tabIndex: isDisabled && !showsDisabledMessage ? -1 : 0,
         ...{
           className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x1a2a7pz x1p25gnr x1wfwxd8 xh6dtrn"
         },
@@ -672,7 +754,6 @@ export function MultiSelector({
         size: "sm"
       }), hasClear && value.length > 0 && !isDisabled && /*#__PURE__*/_jsx("button", {
         type: "button",
-        tabIndex: -1,
         onClick: handleClear,
         "aria-label": `Clear all ${label}`,
         ...{
@@ -723,7 +804,7 @@ export function MultiSelector({
       placement: 'below',
       alignment: 'start',
       xstyle: styles.popover
-    })]
+    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }
 MultiSelector.displayName = 'MultiSelector';

package/dist/MultiSelector/hooks.d.ts

@@ -7,6 +7,17 @@ interface UseMultiComboboxOptions {
     onOpen: () => void;
     onClose: () => void;
     onToggle: (itemValue: string) => void;
+    /**
+     * Clear all selected values. When provided, pressing Delete or Backspace on
+     * the closed trigger clears the selection — a keyboard equivalent of the
+     * clear button (comboboxes-2). No-op when the popup is open or search is on.
+     */
+    onClear?: () => void;
+    /**
+     * Whether at least one value is selected (i.e. there is something to clear).
+     * The Delete/Backspace clear path is skipped when false.
+     */
+    hasValue?: boolean;
     listboxId: string;
 }
 interface UseMultiComboboxResult {
@@ -23,6 +34,6 @@ interface UseMultiComboboxResult {
  *
  * The caller must ensure selectableItems is in the same order as the rendered DOM.
  */
-export declare function useMultiCombobox({ selectableItems, isDisabled, isOpen, hasSearch, onOpen, onClose, onToggle, listboxId, }: UseMultiComboboxOptions): UseMultiComboboxResult;
+export declare function useMultiCombobox({ selectableItems, isDisabled, isOpen, hasSearch, onOpen, onClose, onToggle, onClear, hasValue, listboxId, }: UseMultiComboboxOptions): UseMultiComboboxResult;
 export {};
 //# sourceMappingURL=hooks.d.ts.map

package/dist/MultiSelector/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/hooks.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,SAAS,CAAC;AAErD,UAAU,uBAAuB;IAC/B,eAAe,EAAE,uBAAuB,EAAE,CAAC;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,sBAAsB;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC5C,gBAAgB,EAAE,CAAC,IAAI,EAAE,uBAAuB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1E;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,UAAkB,EAClB,MAAM,EACN,SAAiB,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,uBAAuB,GAAG,sBAAsB,CAmLlD"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/hooks.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,SAAS,CAAC;AAErD,UAAU,uBAAuB;IAC/B,eAAe,EAAE,uBAAuB,EAAE,CAAC;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,sBAAsB;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC5C,gBAAgB,EAAE,CAAC,IAAI,EAAE,uBAAuB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1E;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,UAAkB,EAClB,MAAM,EACN,SAAiB,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,SAAS,GACV,EAAE,uBAAuB,GAAG,sBAAsB,CAiMlD"}

package/dist/MultiSelector/hooks.js

@@ -26,6 +26,8 @@ export function useMultiCombobox({
   onOpen,
   onClose,
   onToggle,
+  onClear,
+  hasValue = false,
   listboxId
 }) {
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
@@ -127,6 +129,17 @@ export function useMultiCombobox({
           setHighlightedIndex(enabledIndices[enabledIndices.length - 1]);
         }
         break;
+      case 'Delete':
+      case 'Backspace':
+        // Keyboard equivalent of the clear button (comboboxes-2): clear all
+        // selected values from the closed trigger so clearing is not
+        // mouse-only. Skipped in search mode (keys edit the query) and while
+        // the popup is open (arrow navigation owns interaction).
+        if (!hasSearch && !isOpen && onClear != null && hasValue) {
+          e.preventDefault();
+          onClear();
+        }
+        break;
       default:
         // Typeahead only when search is not present
         if (!hasSearch && e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
@@ -148,7 +161,7 @@ export function useMultiCombobox({
         }
         break;
     }
-  }, [isDisabled, isOpen, onOpen, closeAndReset, selectableItems, highlightedIndex, onToggle, getEnabledIndices, typeahead, hasSearch]);
+  }, [isDisabled, isOpen, onOpen, closeAndReset, selectableItems, highlightedIndex, onToggle, getEnabledIndices, typeahead, hasSearch, onClear, hasValue]);
   return {
     highlightedIndex,
     setHighlightedIndex,