@astryxdesign/core 0.7.7-canary.e629e7d → 0.7.7-canary.e68774f

package/dist/PowerSearch/PowerSearch.d.ts.map

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

package/dist/PowerSearch/PowerSearch.js

@@ -20,6 +20,7 @@ import { TokenizerClearAllMessageContext } from "../Tokenizer/TokenizerClearAllM
 import { TokenizerItemRemovableContext } from "../Tokenizer/TokenizerItemRemovableContext.js";
 import { TypeaheadItem } from "../Typeahead/TypeaheadItem.js";
 import { Token } from "../Token/index.js";
+import { TokenNamingContext } from "../Token/TokenNamingContext.js";
 import { Avatar } from "../Avatar/index.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import { Icon } from "../Icon/index.js";
@@ -41,7 +42,7 @@ import { useLocale } from "../i18n/useLocale.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
 import english from "../i18n/generated-english/PowerSearch/PowerSearch.generated.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 registerEnglishFallback(english);
 // =============================================================================
 // Icon mapping for typeahead entries
@@ -90,45 +91,25 @@ function truncateString(value, limit) {
 function getEnumLabel(values, value) {
   return values.find(v => v.value === value)?.label ?? value;
 }
-function PowerSearchTokenValue({
-  operatorValue,
-  filterValue,
-  maxLength,
-  locale
-}) {
+
+/**
+ * The visible text of a filter token's value. The token renders it, and the
+ * token's remove button and editor dialog are named by the same text.
+ */
+function tokenValueText(operatorValue, filterValue, maxLength, locale) {
   switch (filterValue.type) {
     case 'empty':
       return null;
     case 'string':
-      return /*#__PURE__*/_jsx("span", {
-        ...{
-          className: "x1lvx875"
-        },
-        children: truncateString(filterValue.value, maxLength)
-      });
+      return truncateString(filterValue.value, maxLength);
     case 'integer':
     case 'float':
-      return /*#__PURE__*/_jsx("span", {
-        ...{
-          className: "x1lvx875"
-        },
-        children: filterValue.value
-      });
+      return String(filterValue.value);
     case 'enum':
       if (operatorValue.type === 'enum') {
-        return /*#__PURE__*/_jsx("span", {
-          ...{
-            className: "x1lvx875"
-          },
-          children: truncateString(getEnumLabel(operatorValue.values, filterValue.value), maxLength)
-        });
+        return truncateString(getEnumLabel(operatorValue.values, filterValue.value), maxLength);
       }
-      return /*#__PURE__*/_jsx("span", {
-        ...{
-          className: "x1lvx875"
-        },
-        children: truncateString(filterValue.value, maxLength)
-      });
+      return truncateString(filterValue.value, maxLength);
     case 'string_list':
       {
         const items = filterValue.value;
@@ -136,28 +117,13 @@ function PowerSearchTokenValue({
           return null;
         }
         if (items.length === 1) {
-          return /*#__PURE__*/_jsx("span", {
-            ...{
-              className: "x1lvx875"
-            },
-            children: truncateString(items[0], maxLength)
-          });
+          return truncateString(items[0], maxLength);
         }
         const totalLength = items.reduce((sum, s) => sum + s.length, 0);
         if (totalLength > maxLength) {
-          return /*#__PURE__*/_jsxs("span", {
-            ...{
-              className: "x1lvx875"
-            },
-            children: [items.length, " items"]
-          });
+          return `${items.length} items`;
         }
-        return /*#__PURE__*/_jsx("span", {
-          ...{
-            className: "x1lvx875"
-          },
-          children: items.join(', ')
-        });
+        return items.join(', ');
       }
     case 'enum_list':
       {
@@ -168,43 +134,18 @@ function PowerSearchTokenValue({
         if (operatorValue.type === 'enum_list') {
           const labels = items.map(v => getEnumLabel(operatorValue.values, v));
           if (labels.length === 1) {
-            return /*#__PURE__*/_jsx("span", {
-              ...{
-                className: "x1lvx875"
-              },
-              children: truncateString(labels[0], maxLength)
-            });
+            return truncateString(labels[0], maxLength);
           }
           const totalLength = labels.reduce((sum, s) => sum + s.length, 0);
           if (totalLength > maxLength) {
-            return /*#__PURE__*/_jsxs("span", {
-              ...{
-                className: "x1lvx875"
-              },
-              children: [labels.length, " items"]
-            });
+            return `${labels.length} items`;
           }
-          return /*#__PURE__*/_jsx("span", {
-            ...{
-              className: "x1lvx875"
-            },
-            children: labels.join(', ')
-          });
+          return labels.join(', ');
         }
         if (items.length === 1) {
-          return /*#__PURE__*/_jsx("span", {
-            ...{
-              className: "x1lvx875"
-            },
-            children: truncateString(items[0], maxLength)
-          });
+          return truncateString(items[0], maxLength);
         }
-        return /*#__PURE__*/_jsxs("span", {
-          ...{
-            className: "x1lvx875"
-          },
-          children: [items.length, " items"]
-        });
+        return `${items.length} items`;
       }
     case 'entity_list':
       {
@@ -213,89 +154,46 @@ function PowerSearchTokenValue({
           return null;
         }
         if (entities.length === 1) {
-          return /*#__PURE__*/_jsx("span", {
-            ...{
-              className: "x1lvx875"
-            },
-            children: truncateString(entities[0].label, maxLength)
-          });
+          return truncateString(entities[0].label, maxLength);
         }
         const totalLength = entities.reduce((sum, e) => sum + e.label.length, 0);
         if (totalLength > maxLength) {
-          return /*#__PURE__*/_jsxs("span", {
-            ...{
-              className: "x1lvx875"
-            },
-            children: [entities.length, " items"]
-          });
+          return `${entities.length} items`;
         }
-        return /*#__PURE__*/_jsx("span", {
-          ...{
-            className: "x1lvx875"
-          },
-          children: entities.map(e => e.label).join(', ')
-        });
+        return entities.map(e => e.label).join(', ');
       }
     case 'time':
-      return /*#__PURE__*/_jsx("span", {
-        ...{
-          className: "x1lvx875"
-        },
-        children: filterValue.value
-      });
+      return filterValue.value;
     case 'date_absolute':
-      {
-        const formatted = formatDateAbsoluteCompact(filterValue.unixSeconds, locale);
-        return /*#__PURE__*/_jsx("span", {
-          ...{
-            className: "x1lvx875"
-          },
-          children: truncateString(formatted, maxLength)
-        });
-      }
+      return truncateString(formatDateAbsoluteCompact(filterValue.unixSeconds, locale), maxLength);
     case 'date_relative':
-      return /*#__PURE__*/_jsx("span", {
-        ...{
-          className: "x1lvx875"
-        },
-        children: truncateString(filterValue.value, maxLength)
-      });
+      return truncateString(filterValue.value, maxLength);
     case 'date_range':
-      return /*#__PURE__*/_jsx("span", {
-        ...{
-          className: "x1lvx875"
-        },
-        children: "date range"
-      });
+      return 'date range';
     case 'custom':
       if (operatorValue.type === 'custom') {
-        return /*#__PURE__*/_jsx("span", {
-          ...{
-            className: "x1lvx875"
-          },
-          children: truncateString(operatorValue.getString(filterValue.value), maxLength)
-        });
+        return truncateString(operatorValue.getString(filterValue.value), maxLength);
       }
-      return /*#__PURE__*/_jsx("span", {
-        ...{
-          className: "x1lvx875"
-        },
-        children: filterValue.value
-      });
+      return filterValue.value;
     case 'nested':
       {
         const count = filterValue.value.length;
-        return /*#__PURE__*/_jsx("span", {
-          ...{
-            className: "x1lvx875"
-          },
-          children: count === 1 ? '1 filter' : `${count} filters`
-        });
+        return count === 1 ? '1 filter' : `${count} filters`;
       }
     default:
       return null;
   }
 }
+function PowerSearchTokenValue({
+  text
+}) {
+  return /*#__PURE__*/_jsx("span", {
+    ...{
+      className: "x1lvx875"
+    },
+    children: text
+  });
+}
 
 // =============================================================================
 // Types
@@ -309,6 +207,14 @@ function PowerSearchTokenValue({
 // Component
 // =============================================================================
 
+/**
+ * Whether a press on a token with this operator commits the filter instead of
+ * opening its editor: an `empty` operator with no `empty` Editor override.
+ */
+function commitsWithoutEditor(operator, componentOverrides) {
+  return operator?.value.type === 'empty' && componentOverrides?.empty?.Editor == null;
+}
+
 /**
  * Structured filter bar where each token represents a filter (field + operator + value).
  *
@@ -423,6 +329,28 @@ export function PowerSearch({
     type: 'idle'
   });
 
+  // A default filter token's visible text: its label (field and operator)
+  // and its value. The token's remove button and editor dialog are named by
+  // the same text.
+  const tokenText = useCallback(filter => {
+    const field = config.getField(filter.field);
+    const operator = config.getOperator(filter.field, filter.operator);
+    const fieldLabel = field?.label ?? '';
+    const operatorLabel = operator ? resolveOperatorLabel(operator, t) : '';
+    const label = `${fieldLabel}: ${operatorLabel}`.trim();
+    const value = operator ? tokenValueText(operator.value, filter.value, Math.max(maxTokenLength - fieldLabel.length - operatorLabel.length, 10), locale) : null;
+    return {
+      label,
+      value,
+      full: value != null ? `${label} ${value}` : label
+    };
+  }, [config, maxTokenLength, t, locale]);
+  // The built-in token being edited. A token from a `components` override
+  // names itself, so its editor keeps the plain popover.
+  const editedFilter = popoverState.type === 'editing' ? filters[popoverState.filterIndex] : undefined;
+  const editedOperator = editedFilter != null ? config.getOperator(editedFilter.field, editedFilter.operator) : undefined;
+  const editedBuiltInFilter = editedOperator == null || componentOverrides?.[editedOperator.value.type]?.Token == null ? editedFilter : undefined;
+
   // Layer for positioning the edit popover anchored to the tokenizer
   const handleLayerHide = useCallback(() => {
     setPopoverStateRaw({
@@ -434,9 +362,13 @@ export function PowerSearch({
     hasLightDismiss: true,
     hasCloseButton: false,
     hasAutoFocus: false,
-    // The popup's own listbox/menu content is the exposed semantics; focus
-    // stays on the tokenizer input, so a modal dialog wrapper is incorrect.
-    role: 'none'
+    // Adding: the popup's own listbox/menu content is the exposed semantics,
+    // and focus stays on the tokenizer input, so a dialog wrapper is
+    // incorrect. Editing a token: focus moves into the editor's controls, so
+    // the editor is a non-modal dialog named by the token's visible text.
+    role: editedBuiltInFilter != null ? 'dialog' : 'none',
+    isModal: false,
+    dialogLabel: editedBuiltInFilter != null ? tokenText(editedBuiltInFilter).full : undefined
   });
 
   // Wrapper that manages layer visibility and tokenizer focus alongside state
@@ -567,7 +499,7 @@ export function PowerSearch({
     // edit: commit it as that editor's save would, the way adding one does,
     // instead of opening it. A consumer's `empty` Editor override still opens.
     const operator = config.getOperator(filter.field, filter.operator);
-    if (operator?.value.type === 'empty' && componentOverrides?.empty?.Editor == null) {
+    if (commitsWithoutEditor(operator, componentOverrides)) {
       const newFilters = [...filters];
       newFilters[index] = {
         field: filter.field,
@@ -652,13 +584,14 @@ export function PowerSearch({
     // Default token rendering
     const fieldLabel = field?.label ?? '';
     const operatorLabel = operator ? resolveOperatorLabel(operator, t) : '';
-    const tokenLabel = `${fieldLabel}: ${operatorLabel}`.trim();
-    const adjustedMaxLength = Math.max(maxTokenLength - fieldLabel.length - operatorLabel.length, 10);
-    const valueContent = operator && filter ? /*#__PURE__*/_jsx(PowerSearchTokenValue, {
-      operatorValue: operator.value,
-      filterValue: filter.value,
-      maxLength: adjustedMaxLength,
-      locale: locale
+    const text = filter != null ? tokenText(filter) : {
+      label: `${fieldLabel}: ${operatorLabel}`.trim(),
+      value: null
+    };
+    const tokenLabel = text.label;
+    const fullText = text.value != null ? `${text.label} ${text.value}` : text.label;
+    const valueContent = text.value != null ? /*#__PURE__*/_jsx(PowerSearchTokenValue, {
+      text: text.value
     }) : undefined;
 
     // Show entity photo as token icon for single-entity filters
@@ -671,24 +604,38 @@ export function PowerSearch({
         size: 16
       });
     }
-    return /*#__PURE__*/_jsx(Token, {
-      label: tokenLabel,
-      size: size,
-      icon: tokenIcon,
-      endContent: valueContent,
-      onMouseDown: handleClick ? e => {
-        // Keep a token press from entering Tokenizer's input-focus
-        // redirect. Click still edits/removes; Tab entry is unchanged.
-        e.preventDefault();
-      } : undefined,
-      onClick: handleClick ? e => {
-        e.stopPropagation();
-        handleClick();
-      } : undefined,
-      onRemove: handleRemove,
-      isDisabled: isDisabled
+
+    // A token that opens its editor says that it opens a dialog, and the
+    // naming context names it by all its visible text.
+    const editorProps = handleClick != null && !commitsWithoutEditor(operator, componentOverrides) ? {
+      'aria-haspopup': 'dialog',
+      'aria-expanded': popoverState.type === 'editing' && popoverState.filterIndex === filterIndex
+    } : null;
+    return /*#__PURE__*/_jsx(TokenNamingContext, {
+      value: {
+        actionName: fullText,
+        removeName: fullText
+      },
+      children: /*#__PURE__*/_jsx(Token, {
+        label: tokenLabel,
+        size: size,
+        icon: tokenIcon,
+        ...editorProps,
+        endContent: valueContent,
+        onMouseDown: handleClick ? e => {
+          // Keep a token press from entering Tokenizer's input-focus
+          // redirect. Click still edits/removes; Tab entry is unchanged.
+          e.preventDefault();
+        } : undefined,
+        onClick: handleClick ? e => {
+          e.stopPropagation();
+          handleClick();
+        } : undefined,
+        onRemove: handleRemove,
+        isDisabled: isDisabled
+      })
     });
-  }, [filters, config, configProp, maxTokenLength, locale, size, isReadOnly, isDisabled, handleTokenClick, componentOverrides, t]);
+  }, [filters, config, configProp, maxTokenLength, size, isReadOnly, isDisabled, handleTokenClick, componentOverrides, t, popoverState, tokenText]);
 
   // Custom typeahead item renderer — adds field icon and description
   const renderItem = useCallback(item => {

package/dist/Token/Token.d.ts

@@ -12,7 +12,7 @@
  * - /apps/storybook/stories/Token.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/Token/ (showcase blocks)
  */
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps.js';
 import type { TokenColorMap } from './index.js';
 /**
@@ -95,7 +95,7 @@ export interface TokenProps extends BaseProps<HTMLElement> {
  * <Token label="Link" href="/path" />
  * ```
  */
-export declare function Token({ label, size, color, icon, isDisabled, onRemove, onClick, href, description, endContent, isLabelHidden, xstyle, className, style, 'data-testid': testId, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ref, ...rest }: TokenProps): import("react").JSX.Element;
+export declare function Token({ label, size, color, icon, isDisabled, onRemove, onClick, href, description, endContent, isLabelHidden, xstyle, className, style, 'data-testid': testId, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-haspopup': ariaHasPopup, 'aria-expanded': ariaExpanded, ref, ...rest }: TokenProps): import("react").JSX.Element;
 export declare namespace Token {
     var displayName: string;
 }

package/dist/Token/Token.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/Token/Token.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAc3C;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,WAAW,CAAC;IACxD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA6JD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,KAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAqB,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,GAAG,EACH,GAAG,IAAI,EACR,EAAE,UAAU,+BAwQZ;yBA5Re,KAAK"}
+{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/Token/Token.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAiB1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAe3C;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,WAAW,CAAC;IACxD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA6JD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,KAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAqB,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,eAAe,EAAE,YAAY,EAC7B,GAAG,EACH,GAAG,IAAI,EACR,EAAE,UAAU,+BA8QZ;yBApSe,KAAK"}

package/dist/Token/Token.js

@@ -16,6 +16,7 @@
  * - /apps/storybook/stories/Token.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/Token/ (showcase blocks)
  */
+import { use } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, sizeVars, durationVars, easeVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
@@ -29,6 +30,7 @@ import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { usePressFeedback } from "../hooks/usePressFeedback.js";
 import { disabledInteractionProps } from "../utils/disabledInteraction.js";
+import { TokenNamingContext } from "./TokenNamingContext.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
 import english from "../i18n/generated-english/Token/Token.generated.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -216,6 +218,8 @@ export function Token({
   'data-testid': testId,
   'aria-labelledby': ariaLabelledBy,
   'aria-describedby': ariaDescribedBy,
+  'aria-haspopup': ariaHasPopup,
+  'aria-expanded': ariaExpanded,
   ref,
   ...rest
 }) {
@@ -230,6 +234,7 @@ export function Token({
     onClick,
     isDisabled
   });
+  const naming = use(TokenNamingContext);
 
   // When role is 'button' via context (no explicit onClick), treat as
   // if onClick was provided — the popover attaches its own handler.
@@ -237,7 +242,7 @@ export function Token({
   const removeButton = onRemove != null && /*#__PURE__*/_jsx("button", {
     type: "button",
     "aria-label": t('@astryx.token.remove', {
-      label
+      label: naming?.removeName ?? label
     }),
     onClick: e => {
       e.stopPropagation();
@@ -268,12 +273,14 @@ export function Token({
     }), endContent, removeButton]
   });
 
-  // Naming inputs reach the element that owns the token's action: the inner
-  // button of a clickable token, otherwise the root
+  // Naming and popup inputs reach the element that owns the token's action:
+  // the inner button of a clickable token, otherwise the root
   // (architecture:public-component-api INV5).
   const labellingProps = {
     'aria-labelledby': ariaLabelledBy,
-    'aria-describedby': ariaDescribedBy
+    'aria-describedby': ariaDescribedBy,
+    'aria-haspopup': ariaHasPopup,
+    'aria-expanded': ariaExpanded
   };
   const sharedProps = {
     'data-testid': testId,
@@ -398,6 +405,7 @@ export function Token({
       children: [icon, /*#__PURE__*/_jsx("button", {
         type: "button",
         onClick: effectiveOnClick,
+        "aria-label": ariaLabelledBy == null ? naming?.actionName : undefined,
         ...labellingProps,
         "aria-disabled": isDisabled || undefined,
         ...(isDisabled ? disabledInteractionProps() : null),

package/dist/Token/TokenNamingContext.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Names for a Token whose visible text runs past its label. PowerSearch
+ * provides them: its tokens show the value as `endContent`.
+ *
+ * - `actionName` names a clickable token's inner button in place of `label`.
+ * - `removeName` names the remove button in place of `label`. The remove word
+ *   still comes from the catalog, so each locale keeps its word order.
+ */
+export interface TokenNaming {
+    actionName?: string;
+    removeName?: string;
+}
+export declare const TokenNamingContext: import("react").Context<TokenNaming | null>;
+//# sourceMappingURL=TokenNamingContext.d.ts.map

package/dist/Token/TokenNamingContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenNamingContext.d.ts","sourceRoot":"","sources":["../../src/Token/TokenNamingContext.ts"],"names":[],"mappings":"AAaA;;;;;;;GAOG;AACH,MAAM,WAAW,WAAW;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,6CAA0C,CAAC"}

package/dist/Token/TokenNamingContext.js

@@ -0,0 +1,23 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file TokenNamingContext.ts
+ * @input Naming parts from a caller whose token value renders outside its label
+ * @output Internal context: the names of a token's action and remove button
+ * @position Internal to Core; not exported from the Token entry point
+ */
+import { createContext } from 'react';
+
+/**
+ * Names for a Token whose visible text runs past its label. PowerSearch
+ * provides them: its tokens show the value as `endContent`.
+ *
+ * - `actionName` names a clickable token's inner button in place of `label`.
+ * - `removeName` names the remove button in place of `label`. The remove word
+ *   still comes from the catalog, so each locale keeps its word order.
+ */
+
+export const TokenNamingContext = /*#__PURE__*/createContext(null);
+TokenNamingContext.displayName = 'TokenNamingContext';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.7-canary.e629e7d",
+  "version": "0.7.7-canary.e68774f",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -865,9 +865,9 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.7-canary.e629e7d",
-    "@astryxdesign/cli": "0.7.7-canary.e629e7d",
-    "@astryxdesign/interaction-harness": "0.7.7-canary.e629e7d",
+    "@astryxdesign/a11y-spec": "0.7.7-canary.e68774f",
+    "@astryxdesign/cli": "0.7.7-canary.e68774f",
+    "@astryxdesign/interaction-harness": "0.7.7-canary.e68774f",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/PowerSearch/PowerSearch.tsx

@@ -34,6 +34,7 @@ import {TokenizerClearAllMessageContext} from '../Tokenizer/TokenizerClearAllMes
 import {TokenizerItemRemovableContext} from '../Tokenizer/TokenizerItemRemovableContext';
 import {TypeaheadItem} from '../Typeahead/TypeaheadItem';
 import {Token} from '../Token';
+import {TokenNamingContext} from '../Token/TokenNamingContext';
 import {Avatar} from '../Avatar';
 import {layerAnimations} from '../Layer/layerAnimations.stylex';
 import {Icon} from '../Icon';
@@ -75,6 +76,7 @@ import type {
   OperatorValue,
   EnumItem,
   PowerSearchComponents,
+  PowerSearchOperator,
 } from './types';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
@@ -158,52 +160,35 @@ function getEnumLabel(values: ReadonlyArray<EnumItem>, value: string): string {
   return values.find(v => v.value === value)?.label ?? value;
 }
 
-function PowerSearchTokenValue({
-  operatorValue,
-  filterValue,
-  maxLength,
-  locale,
-}: {
-  operatorValue: OperatorValue;
-  filterValue: FilterValue;
-  maxLength: number;
-  locale: Locale;
-}) {
+/**
+ * The visible text of a filter token's value. The token renders it, and the
+ * token's remove button and editor dialog are named by the same text.
+ */
+function tokenValueText(
+  operatorValue: OperatorValue,
+  filterValue: FilterValue,
+  maxLength: number,
+  locale: Locale,
+): string | null {
   switch (filterValue.type) {
     case 'empty':
       return null;
 
     case 'string':
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {truncateString(filterValue.value, maxLength)}
-        </span>
-      );
+      return truncateString(filterValue.value, maxLength);
 
     case 'integer':
     case 'float':
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {filterValue.value}
-        </span>
-      );
+      return String(filterValue.value);
 
     case 'enum':
       if (operatorValue.type === 'enum') {
-        return (
-          <span {...stylex.props(tokenValueStyles.value)}>
-            {truncateString(
-              getEnumLabel(operatorValue.values, filterValue.value),
-              maxLength,
-            )}
-          </span>
+        return truncateString(
+          getEnumLabel(operatorValue.values, filterValue.value),
+          maxLength,
         );
       }
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {truncateString(filterValue.value, maxLength)}
-        </span>
-      );
+      return truncateString(filterValue.value, maxLength);
 
     case 'string_list': {
       const items = filterValue.value;
@@ -211,25 +196,13 @@ function PowerSearchTokenValue({
         return null;
       }
       if (items.length === 1) {
-        return (
-          <span {...stylex.props(tokenValueStyles.value)}>
-            {truncateString(items[0], maxLength)}
-          </span>
-        );
+        return truncateString(items[0], maxLength);
       }
       const totalLength = items.reduce((sum, s) => sum + s.length, 0);
       if (totalLength > maxLength) {
-        return (
-          <span {...stylex.props(tokenValueStyles.value)}>
-            {items.length} items
-          </span>
-        );
+        return `${items.length} items`;
       }
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {items.join(', ')}
-        </span>
-      );
+      return items.join(', ');
     }
 
     case 'enum_list': {
@@ -240,38 +213,18 @@ function PowerSearchTokenValue({
       if (operatorValue.type === 'enum_list') {
         const labels = items.map(v => getEnumLabel(operatorValue.values, v));
         if (labels.length === 1) {
-          return (
-            <span {...stylex.props(tokenValueStyles.value)}>
-              {truncateString(labels[0], maxLength)}
-            </span>
-          );
+          return truncateString(labels[0], maxLength);
         }
         const totalLength = labels.reduce((sum, s) => sum + s.length, 0);
         if (totalLength > maxLength) {
-          return (
-            <span {...stylex.props(tokenValueStyles.value)}>
-              {labels.length} items
-            </span>
-          );
+          return `${labels.length} items`;
         }
-        return (
-          <span {...stylex.props(tokenValueStyles.value)}>
-            {labels.join(', ')}
-          </span>
-        );
+        return labels.join(', ');
       }
       if (items.length === 1) {
-        return (
-          <span {...stylex.props(tokenValueStyles.value)}>
-            {truncateString(items[0], maxLength)}
-          </span>
-        );
+        return truncateString(items[0], maxLength);
       }
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {items.length} items
-        </span>
-      );
+      return `${items.length} items`;
     }
 
     case 'entity_list': {
@@ -280,80 +233,42 @@ function PowerSearchTokenValue({
         return null;
       }
       if (entities.length === 1) {
-        return (
-          <span {...stylex.props(tokenValueStyles.value)}>
-            {truncateString(entities[0].label, maxLength)}
-          </span>
-        );
+        return truncateString(entities[0].label, maxLength);
       }
       const totalLength = entities.reduce((sum, e) => sum + e.label.length, 0);
       if (totalLength > maxLength) {
-        return (
-          <span {...stylex.props(tokenValueStyles.value)}>
-            {entities.length} items
-          </span>
-        );
+        return `${entities.length} items`;
       }
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {entities.map(e => e.label).join(', ')}
-        </span>
-      );
+      return entities.map(e => e.label).join(', ');
     }
 
     case 'time':
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {filterValue.value}
-        </span>
-      );
+      return filterValue.value;
 
-    case 'date_absolute': {
-      const formatted = formatDateAbsoluteCompact(
-        filterValue.unixSeconds,
-        locale,
+    case 'date_absolute':
+      return truncateString(
+        formatDateAbsoluteCompact(filterValue.unixSeconds, locale),
+        maxLength,
       );
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {truncateString(formatted, maxLength)}
-        </span>
-      );
-    }
 
     case 'date_relative':
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {truncateString(filterValue.value, maxLength)}
-        </span>
-      );
+      return truncateString(filterValue.value, maxLength);
 
     case 'date_range':
-      return <span {...stylex.props(tokenValueStyles.value)}>date range</span>;
+      return 'date range';
 
     case 'custom':
       if (operatorValue.type === 'custom') {
-        return (
-          <span {...stylex.props(tokenValueStyles.value)}>
-            {truncateString(
-              operatorValue.getString(filterValue.value),
-              maxLength,
-            )}
-          </span>
+        return truncateString(
+          operatorValue.getString(filterValue.value),
+          maxLength,
         );
       }
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {filterValue.value}
-        </span>
-      );
+      return filterValue.value;
 
     case 'nested': {
       const count = filterValue.value.length;
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {count === 1 ? '1 filter' : `${count} filters`}
-        </span>
-      );
+      return count === 1 ? '1 filter' : `${count} filters`;
     }
 
     default:
@@ -361,6 +276,10 @@ function PowerSearchTokenValue({
   }
 }
 
+function PowerSearchTokenValue({text}: {text: string}) {
+  return <span {...stylex.props(tokenValueStyles.value)}>{text}</span>;
+}
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -491,6 +410,20 @@ type PopoverState =
 // Component
 // =============================================================================
 
+/**
+ * Whether a press on a token with this operator commits the filter instead of
+ * opening its editor: an `empty` operator with no `empty` Editor override.
+ */
+function commitsWithoutEditor(
+  operator: PowerSearchOperator | undefined,
+  componentOverrides: PowerSearchComponents | undefined,
+): boolean {
+  return (
+    operator?.value.type === 'empty' &&
+    componentOverrides?.empty?.Editor == null
+  );
+}
+
 /**
  * Structured filter bar where each token represents a filter (field + operator + value).
  *
@@ -608,6 +541,47 @@ export function PowerSearch({
     type: 'idle',
   });
 
+  // A default filter token's visible text: its label (field and operator)
+  // and its value. The token's remove button and editor dialog are named by
+  // the same text.
+  const tokenText = useCallback(
+    (filter: PowerSearchFilter) => {
+      const field = config.getField(filter.field);
+      const operator = config.getOperator(filter.field, filter.operator);
+      const fieldLabel = field?.label ?? '';
+      const operatorLabel = operator ? resolveOperatorLabel(operator, t) : '';
+      const label = `${fieldLabel}: ${operatorLabel}`.trim();
+      const value = operator
+        ? tokenValueText(
+            operator.value,
+            filter.value,
+            Math.max(
+              maxTokenLength - fieldLabel.length - operatorLabel.length,
+              10,
+            ),
+            locale,
+          )
+        : null;
+      return {label, value, full: value != null ? `${label} ${value}` : label};
+    },
+    [config, maxTokenLength, t, locale],
+  );
+  // The built-in token being edited. A token from a `components` override
+  // names itself, so its editor keeps the plain popover.
+  const editedFilter =
+    popoverState.type === 'editing'
+      ? filters[popoverState.filterIndex]
+      : undefined;
+  const editedOperator =
+    editedFilter != null
+      ? config.getOperator(editedFilter.field, editedFilter.operator)
+      : undefined;
+  const editedBuiltInFilter =
+    editedOperator == null ||
+    componentOverrides?.[editedOperator.value.type]?.Token == null
+      ? editedFilter
+      : undefined;
+
   // Layer for positioning the edit popover anchored to the tokenizer
   const handleLayerHide = useCallback(() => {
     setPopoverStateRaw({type: 'idle'});
@@ -618,9 +592,16 @@ export function PowerSearch({
     hasLightDismiss: true,
     hasCloseButton: false,
     hasAutoFocus: false,
-    // The popup's own listbox/menu content is the exposed semantics; focus
-    // stays on the tokenizer input, so a modal dialog wrapper is incorrect.
-    role: 'none',
+    // Adding: the popup's own listbox/menu content is the exposed semantics,
+    // and focus stays on the tokenizer input, so a dialog wrapper is
+    // incorrect. Editing a token: focus moves into the editor's controls, so
+    // the editor is a non-modal dialog named by the token's visible text.
+    role: editedBuiltInFilter != null ? 'dialog' : 'none',
+    isModal: false,
+    dialogLabel:
+      editedBuiltInFilter != null
+        ? tokenText(editedBuiltInFilter).full
+        : undefined,
   });
 
   // Wrapper that manages layer visibility and tokenizer focus alongside state
@@ -789,10 +770,7 @@ export function PowerSearch({
       // edit: commit it as that editor's save would, the way adding one does,
       // instead of opening it. A consumer's `empty` Editor override still opens.
       const operator = config.getOperator(filter.field, filter.operator);
-      if (
-        operator?.value.type === 'empty' &&
-        componentOverrides?.empty?.Editor == null
-      ) {
+      if (commitsWithoutEditor(operator, componentOverrides)) {
         const newFilters = [...filters];
         newFilters[index] = {
           field: filter.field,
@@ -897,20 +875,16 @@ export function PowerSearch({
       // Default token rendering
       const fieldLabel = field?.label ?? '';
       const operatorLabel = operator ? resolveOperatorLabel(operator, t) : '';
-      const tokenLabel = `${fieldLabel}: ${operatorLabel}`.trim();
-      const adjustedMaxLength = Math.max(
-        maxTokenLength - fieldLabel.length - operatorLabel.length,
-        10,
-      );
-
+      const text =
+        filter != null
+          ? tokenText(filter)
+          : {label: `${fieldLabel}: ${operatorLabel}`.trim(), value: null};
+      const tokenLabel = text.label;
+      const fullText =
+        text.value != null ? `${text.label} ${text.value}` : text.label;
       const valueContent =
-        operator && filter ? (
-          <PowerSearchTokenValue
-            operatorValue={operator.value}
-            filterValue={filter.value}
-            maxLength={adjustedMaxLength}
-            locale={locale}
-          />
+        text.value != null ? (
+          <PowerSearchTokenValue text={text.value} />
         ) : undefined;
 
       // Show entity photo as token icon for single-entity filters
@@ -924,32 +898,49 @@ export function PowerSearch({
         tokenIcon = <Avatar src={entity.photo} name={entity.label} size={16} />;
       }
 
+      // A token that opens its editor says that it opens a dialog, and the
+      // naming context names it by all its visible text.
+      const editorProps =
+        handleClick != null &&
+        !commitsWithoutEditor(operator, componentOverrides)
+          ? {
+              'aria-haspopup': 'dialog' as const,
+              'aria-expanded':
+                popoverState.type === 'editing' &&
+                popoverState.filterIndex === filterIndex,
+            }
+          : null;
+
       return (
-        <Token
-          label={tokenLabel}
-          size={size}
-          icon={tokenIcon}
-          endContent={valueContent}
-          onMouseDown={
-            handleClick
-              ? e => {
-                  // Keep a token press from entering Tokenizer's input-focus
-                  // redirect. Click still edits/removes; Tab entry is unchanged.
-                  e.preventDefault();
-                }
-              : undefined
-          }
-          onClick={
-            handleClick
-              ? (e: React.MouseEvent) => {
-                  e.stopPropagation();
-                  handleClick();
-                }
-              : undefined
-          }
-          onRemove={handleRemove}
-          isDisabled={isDisabled}
-        />
+        <TokenNamingContext
+          value={{actionName: fullText, removeName: fullText}}>
+          <Token
+            label={tokenLabel}
+            size={size}
+            icon={tokenIcon}
+            {...editorProps}
+            endContent={valueContent}
+            onMouseDown={
+              handleClick
+                ? e => {
+                    // Keep a token press from entering Tokenizer's input-focus
+                    // redirect. Click still edits/removes; Tab entry is unchanged.
+                    e.preventDefault();
+                  }
+                : undefined
+            }
+            onClick={
+              handleClick
+                ? (e: React.MouseEvent) => {
+                    e.stopPropagation();
+                    handleClick();
+                  }
+                : undefined
+            }
+            onRemove={handleRemove}
+            isDisabled={isDisabled}
+          />
+        </TokenNamingContext>
       );
     },
     [
@@ -957,13 +948,14 @@ export function PowerSearch({
       config,
       configProp,
       maxTokenLength,
-      locale,
       size,
       isReadOnly,
       isDisabled,
       handleTokenClick,
       componentOverrides,
       t,
+      popoverState,
+      tokenText,
     ],
   );
 

package/src/Token/Token.tsx

@@ -17,7 +17,7 @@
  * - /packages/cli/assets/templates/blocks/components/Token/ (showcase blocks)
  */
 
-import type {ReactNode} from 'react';
+import {use, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {
   colorVars,
@@ -41,6 +41,7 @@ import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
 import type {TokenColorMap} from './index';
 import {disabledInteractionProps} from '../utils/disabledInteraction';
+import {TokenNamingContext} from './TokenNamingContext';
 import {
   registerEnglishFallback,
   useComponentTranslator,
@@ -309,6 +310,8 @@ export function Token({
   'data-testid': testId,
   'aria-labelledby': ariaLabelledBy,
   'aria-describedby': ariaDescribedBy,
+  'aria-haspopup': ariaHasPopup,
+  'aria-expanded': ariaExpanded,
   ref,
   ...rest
 }: TokenProps) {
@@ -319,6 +322,7 @@ export function Token({
   const t = useComponentTranslator();
   const LinkComponent = useLinkComponent();
   const role = useInteractiveRole({href, onClick, isDisabled});
+  const naming = use(TokenNamingContext);
 
   // When role is 'button' via context (no explicit onClick), treat as
   // if onClick was provided — the popover attaches its own handler.
@@ -327,7 +331,9 @@ export function Token({
   const removeButton = onRemove != null && (
     <button
       type="button"
-      aria-label={t('@astryx.token.remove', {label})}
+      aria-label={t('@astryx.token.remove', {
+        label: naming?.removeName ?? label,
+      })}
       onClick={e => {
         e.stopPropagation();
         onRemove(e);
@@ -352,12 +358,14 @@ export function Token({
     </>
   );
 
-  // Naming inputs reach the element that owns the token's action: the inner
-  // button of a clickable token, otherwise the root
+  // Naming and popup inputs reach the element that owns the token's action:
+  // the inner button of a clickable token, otherwise the root
   // (architecture:public-component-api INV5).
   const labellingProps = {
     'aria-labelledby': ariaLabelledBy,
     'aria-describedby': ariaDescribedBy,
+    'aria-haspopup': ariaHasPopup,
+    'aria-expanded': ariaExpanded,
   };
 
   const sharedProps = {
@@ -532,6 +540,7 @@ export function Token({
         <button
           type="button"
           onClick={effectiveOnClick}
+          aria-label={ariaLabelledBy == null ? naming?.actionName : undefined}
           {...labellingProps}
           aria-disabled={isDisabled || undefined}
           {...(isDisabled ? disabledInteractionProps() : null)}

package/src/Token/TokenNamingContext.ts

@@ -0,0 +1,28 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file TokenNamingContext.ts
+ * @input Naming parts from a caller whose token value renders outside its label
+ * @output Internal context: the names of a token's action and remove button
+ * @position Internal to Core; not exported from the Token entry point
+ */
+
+import {createContext} from 'react';
+
+/**
+ * Names for a Token whose visible text runs past its label. PowerSearch
+ * provides them: its tokens show the value as `endContent`.
+ *
+ * - `actionName` names a clickable token's inner button in place of `label`.
+ * - `removeName` names the remove button in place of `label`. The remove word
+ *   still comes from the catalog, so each locale keeps its word order.
+ */
+export interface TokenNaming {
+  actionName?: string;
+  removeName?: string;
+}
+
+export const TokenNamingContext = createContext<TokenNaming | null>(null);
+TokenNamingContext.displayName = 'TokenNamingContext';