@astryxdesign/core 0.7.2-canary.fdd384f → 0.7.2

package/dist/PowerSearch/PowerSearchValueEditor.js

@@ -59,7 +59,8 @@ function StringEditor({
   filterValue,
   onChange,
   onEnter: _onEnter,
-  maxMenuItems
+  maxMenuItems,
+  isDisabled
 }) {
   const t = useTranslator();
   const currentValue = filterValue?.type === 'string' ? filterValue.value : '';
@@ -74,6 +75,7 @@ function StringEditor({
     return /*#__PURE__*/_jsx(Typeahead, {
       label: t('@astryx.powersearch.valueEditor.value'),
       isLabelHidden: true,
+      isDisabled: isDisabled,
       searchSource: operatorValue.searchSource,
       value: selectedItem,
       onChange: item => {
@@ -97,6 +99,7 @@ function StringEditor({
   return /*#__PURE__*/_jsx(TextInput, {
     label: t('@astryx.powersearch.valueEditor.value'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     value: currentValue,
     placeholder: t('@astryx.powersearch.valueEditor.enterValuePlaceholder'),
     onChange: value => {
@@ -111,7 +114,8 @@ function StringListEditor({
   operatorValue,
   filterValue,
   onChange,
-  maxMenuItems
+  maxMenuItems,
+  isDisabled
 }) {
   const t = useTranslator();
   const currentValue = useMemo(() => {
@@ -140,6 +144,7 @@ function StringListEditor({
   return /*#__PURE__*/_jsx(Tokenizer, {
     label: t('@astryx.powersearch.valueEditor.values'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     searchSource: source,
     value: currentValue,
     onChange: items => {
@@ -212,7 +217,8 @@ function IntegerEditor({
   operatorValue,
   filterValue,
   onChange,
-  onEnter
+  onEnter,
+  isDisabled
 }) {
   const t = useTranslator();
   const currentValue = filterValue?.type === 'integer' ? filterValue.value : undefined;
@@ -227,6 +233,7 @@ function IntegerEditor({
   return /*#__PURE__*/_jsx(NumberInput, {
     label: t('@astryx.powersearch.valueEditor.value'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     value: currentValue ?? null,
     onChange: handlers.handleChange,
     onFocus: handlers.handleFocus,
@@ -244,7 +251,8 @@ function FloatEditor({
   operatorValue,
   filterValue,
   onChange,
-  onEnter
+  onEnter,
+  isDisabled
 }) {
   const t = useTranslator();
   const currentValue = filterValue?.type === 'float' ? filterValue.value : undefined;
@@ -259,6 +267,7 @@ function FloatEditor({
   return /*#__PURE__*/_jsx(NumberInput, {
     label: t('@astryx.powersearch.valueEditor.value'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     value: currentValue ?? null,
     onChange: handlers.handleChange,
     onFocus: handlers.handleFocus,
@@ -274,13 +283,15 @@ function FloatEditor({
 function TimeEditor({
   operatorValue,
   filterValue,
-  onChange
+  onChange,
+  isDisabled
 }) {
   const t = useTranslator();
   const currentValue = filterValue?.type === 'time' ? filterValue.value : undefined;
   return /*#__PURE__*/_jsx(TimeInput, {
     label: t('@astryx.powersearch.valueEditor.time'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     value: currentValue,
     onChange: value => {
       if (value != null) {
@@ -296,7 +307,8 @@ function TimeEditor({
 }
 function DateAbsoluteEditor({
   filterValue,
-  onChange
+  onChange,
+  isDisabled
 }) {
   const t = useTranslator();
   // Convert unixSeconds to ISO date string for the date input
@@ -310,6 +322,7 @@ function DateAbsoluteEditor({
   return /*#__PURE__*/_jsx(DateInput, {
     label: t('@astryx.powersearch.valueEditor.date'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     value: currentValue,
     onChange: value => {
       if (value != null) {
@@ -325,7 +338,8 @@ function DateAbsoluteEditor({
 function DateRelativeEditor({
   operatorValue,
   filterValue,
-  onChange
+  onChange,
+  isDisabled
 }) {
   const t = useTranslator();
   const currentValue = filterValue?.type === 'date_relative' ? filterValue.value : undefined;
@@ -366,6 +380,7 @@ function DateRelativeEditor({
   return /*#__PURE__*/_jsx(Selector, {
     label: t('@astryx.powersearch.valueEditor.relativeDate'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     options: options,
     value: currentValue,
     onChange: value => {
@@ -378,7 +393,8 @@ function DateRelativeEditor({
 }
 function DateRangeEditor({
   filterValue,
-  onChange
+  onChange,
+  isDisabled
 }) {
   const t = useTranslator();
   const currentValue = useMemo(() => {
@@ -425,6 +441,7 @@ function DateRangeEditor({
     children: /*#__PURE__*/_jsx(DateRangeInput, {
       label: t('@astryx.powersearch.valueEditor.dateRange'),
       isLabelHidden: true,
+      isDisabled: isDisabled,
       value: currentValue,
       onChange: handleChange,
       hasClear: false
@@ -434,7 +451,8 @@ function DateRangeEditor({
 function EnumEditor({
   operatorValue,
   filterValue,
-  onChange
+  onChange,
+  isDisabled
 }) {
   const t = useTranslator();
   const currentValue = filterValue?.type === 'enum' ? filterValue.value : undefined;
@@ -445,6 +463,7 @@ function EnumEditor({
   return /*#__PURE__*/_jsx(Selector, {
     label: t('@astryx.powersearch.valueEditor.value'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     options: options,
     value: currentValue,
     onChange: value => {
@@ -458,7 +477,8 @@ function EnumEditor({
 function EnumListEditor({
   operatorValue,
   filterValue,
-  onChange
+  onChange,
+  isDisabled
 }) {
   const t = useTranslator();
   const items = useMemo(() => enumItemsToSearchableItems(operatorValue.values), [operatorValue.values]);
@@ -478,6 +498,7 @@ function EnumListEditor({
   return /*#__PURE__*/_jsx(Tokenizer, {
     label: t('@astryx.powersearch.valueEditor.values'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     searchSource: source,
     value: currentValue,
     onChange: selectedItems => {
@@ -500,7 +521,8 @@ function EntityListEditor({
   operatorValue,
   filterValue,
   onChange,
-  maxMenuItems
+  maxMenuItems,
+  isDisabled
 }) {
   const t = useTranslator();
   const source = useMemo(() => {
@@ -529,6 +551,7 @@ function EntityListEditor({
   return /*#__PURE__*/_jsx(Tokenizer, {
     label: t('@astryx.powersearch.valueEditor.entities'),
     isLabelHidden: true,
+    isDisabled: isDisabled,
     searchSource: source,
     value: currentValue,
     onChange: items => {
@@ -594,6 +617,7 @@ export function PowerSearchValueEditor({
       return null;
     case 'string':
       return /*#__PURE__*/_jsx(StringEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange,
@@ -602,6 +626,7 @@ export function PowerSearchValueEditor({
       });
     case 'string_list':
       return /*#__PURE__*/_jsx(StringListEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange,
@@ -609,6 +634,7 @@ export function PowerSearchValueEditor({
       });
     case 'integer':
       return /*#__PURE__*/_jsx(IntegerEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange,
@@ -616,6 +642,7 @@ export function PowerSearchValueEditor({
       });
     case 'float':
       return /*#__PURE__*/_jsx(FloatEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange,
@@ -623,42 +650,49 @@ export function PowerSearchValueEditor({
       });
     case 'time':
       return /*#__PURE__*/_jsx(TimeEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange
       });
     case 'date_absolute':
       return /*#__PURE__*/_jsx(DateAbsoluteEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange
       });
     case 'date_relative':
       return /*#__PURE__*/_jsx(DateRelativeEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange
       });
     case 'date_range':
       return /*#__PURE__*/_jsx(DateRangeEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange
       });
     case 'enum':
       return /*#__PURE__*/_jsx(EnumEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange
       });
     case 'enum_list':
       return /*#__PURE__*/_jsx(EnumListEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange
       });
     case 'entity_list':
       return /*#__PURE__*/_jsx(EntityListEditor, {
+        isDisabled: isDisabled,
         operatorValue: operatorValue,
         filterValue: filterValue,
         onChange: onChange,

package/dist/SideNav/SideNavItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AA4ShF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,sCAkalB;yBApbe,WAAW"}
+{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AA4ShF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,sCAqalB;yBAvbe,WAAW"}

package/dist/SideNav/SideNavItem.js

@@ -405,7 +405,9 @@ export function SideNavItem({
         size,
         selected: isSelected ? 'selected' : null,
         disabled: isDisabled ? 'disabled' : null
-      }), focusOutlineProps.focusVisible(navItemStyles.item, interactionOverlayStyles.backgroundColor, navItemStyles[size], styles.itemCollapsed, size === 'sm' && styles.itemCollapsedSm, size === 'lg' && styles.itemCollapsedLg, isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled)),
+      }), focusOutlineProps.focusVisible(navItemStyles.item, interactionOverlayStyles.backgroundColor, navItemStyles[size], styles.itemCollapsed, size === 'sm' && styles.itemCollapsedSm, size === 'lg' && styles.itemCollapsedLg, isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled),
+      // Spread after `rest`, so keep the caller's class beside these.
+      rest.className),
       ...pressable
     };
     const collapsedAccessibleLabel = rest['aria-label'] != null && rest['aria-label'].trim() !== '' ? rest['aria-label'] : label;
@@ -512,8 +514,10 @@ export function SideNavItem({
 
   // The indent is a runtime value, so it reaches the element as an inline
   // style. These props are spread after `rest`, so fold the caller's `style`
-  // back in (caller wins) rather than letting the indent replace it.
+  // back in (caller wins) rather than letting the indent replace it, and the
+  // caller's `className` beside the row's own classes.
   const callerStyle = {
+    className: rest.className,
     style: rest.style
   };
 

package/dist/Token/Token.js

@@ -89,7 +89,7 @@ const styles = {
     kMwMTN: "x1heor9g",
     k5JduY: "x1s928wv",
     kwXMNM: "x1j6awrg",
-    kv0HGH: "x1xsm0q9",
+    kv0HGH: "xramuyw",
     $$css: true
   }
 };

package/dist/TopNav/TopNavMegaMenu.js

@@ -409,6 +409,8 @@ function DrawerMegaMenu({
       })]
     }), /*#__PURE__*/_jsx("div", {
       id: `${menuId}-items`,
+      "aria-hidden": !isExpanded,
+      inert: !isExpanded ? true : undefined,
       ...{
         0: {
           className: "xrvj5dj xihq33y xb3r6kr x6kj92 xd00j3c x1eizr8u xlr8y92"

package/dist/TopNav/TopNavMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkN5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,KAAK,EACL,KAAK,EACL,KAAW,EACX,SAAe,EACf,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,GAAG,IAAI,EACR,EAAE,eAAe,4BA4QjB;yBAzRe,UAAU"}
+{"version":3,"file":"TopNavMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkN5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,KAAK,EACL,KAAK,EACL,KAAW,EACX,SAAe,EACf,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,GAAG,IAAI,EACR,EAAE,eAAe,4BA8QjB;yBA3Re,UAAU"}

package/dist/TopNav/TopNavMenu.js

@@ -309,6 +309,8 @@ export function TopNavMenu({
         })]
       }), /*#__PURE__*/_jsx("div", {
         id: `${menuId}-items`,
+        "aria-hidden": !drawerExpanded,
+        inert: !drawerExpanded ? true : undefined,
         ...{
           0: {
             className: "xrvj5dj xihq33y xb3r6kr x6kj92 xd00j3c x1eizr8u xlr8y92"

package/dist/astryx.css

@@ -2077,7 +2077,7 @@
   .x1bev2v5[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-image:none}
   .x524tya[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-image:none}
   @starting-style{.x1sopeo2.x1sopeo2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){grid-template-rows:0fr}}
-  .x1xsm0q9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:-14px}
+  .xramuyw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:-4px}
   .xarstr8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:0}
   .xxx281p:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset:0}
   .xht581f:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:var(--_input-clear-hit-inset)}

package/dist/reset.a11y.chromium.spec.js

@@ -4,7 +4,8 @@
  * @file reset.a11y.chromium.spec.ts
  * @input packages/core/src/reset.css, alone on a blank Chromium page
  * @output Browser evidence that the reset reaches ::before, ::after,
- *   ::placeholder and the search field's cancel button
+ *   ::placeholder, the search field's cancel button and the dropdown marker
+ *   of a field with a list
  * @position reset.css integration proof. A pseudo-element inside :where() is
  *   invalid, and the forgiving list drops it without an error, so only a
  *   shipping engine shows which of the reset's rules still match.
@@ -13,6 +14,8 @@
 import * as fs from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { expect, test } from '@playwright/test';
+// @ts-expect-error -- pngjs ships no declarations; runtime support is pinned.
+import { PNG } from 'pngjs';
 const RESET_CSS = fs.readFileSync(fileURLToPath(new URL('./reset.css', import.meta.url)), 'utf8');
 
 // No Astryx CSS is loaded, so --color-text-secondary is undefined and a
@@ -149,6 +152,52 @@ test('a search field has no cancel button to clear it', async ({
   await page.mouse.click(box.x + box.width - 8, box.y + box.height / 2);
   await expect(query).toHaveValue('query');
 });
+test('the dropdown marker of a field with a list sits in its middle', async ({
+  page
+}) => {
+  // Chromium shows the marker while the pointer is over the field and draws
+  // it as a glyph set on the field's line-height, the 1.5 the reset inherits.
+  await page.evaluate(() => {
+    const field = document.createElement('input');
+    field.id = 'fruit';
+    field.setAttribute('list', 'fruits');
+    const options = document.createElement('datalist');
+    options.id = 'fruits';
+    options.append(new Option('Apple'));
+    document.body.append(field, options);
+  });
+  await page.addStyleTag({
+    content: `
+      #fruit {
+        display: block;
+        width: 240px;
+        padding: 7px 11px;
+        border: 1px solid;
+        line-height: 1.5;
+      }
+    `
+  });
+  const field = page.locator('#fruit');
+  await field.hover();
+  const png = PNG.sync.read(await field.screenshot({
+    caret: 'hide'
+  }));
+  // The marker is the only ink in the field's last 32px, inside the border.
+  const inkRows = [];
+  for (let y = 2; y < png.height - 2; y++) {
+    for (let x = png.width - 32; x < png.width - 2; x++) {
+      const offset = (y * png.width + x) * 4;
+      const luminance = (png.data[offset] + png.data[offset + 1] + png.data[offset + 2]) / 3;
+      if (luminance < 160) {
+        inkRows.push(y);
+        break;
+      }
+    }
+  }
+  expect(inkRows.length, 'the hovered field shows its marker').toBeGreaterThan(0);
+  const markerMiddle = (inkRows[0] + inkRows[inkRows.length - 1] + 1) / 2;
+  expect(Math.abs(markerMiddle - png.height / 2)).toBeLessThanOrEqual(1);
+});
 test('a later layer and an unlayered rule still override the reset', async ({
   page
 }) => {

package/docs.mjs

@@ -13,8 +13,8 @@
  * ==========================================================================
  *  AI AGENT: do NOT guess component APIs or hand-write CSS. Run:
  *      npx @astryxdesign/cli init
- *  Use the SCOPED name `@astryxdesign/cli` — bare `npx astryx` resolves to an
- *  unrelated package until the CLI is a dependency. Then, per component:
+ *  Use the SCOPED name `@astryxdesign/cli` — the unscoped `astryx` resolves to
+ *  an unrelated npm package until the CLI is a dependency. Then, per component:
  *      npx @astryxdesign/cli component <Name>
  *      npx @astryxdesign/cli component --list
  * ==========================================================================
@@ -27,8 +27,8 @@ const BANNER = `
 
      npx @astryxdesign/cli init
 
- (Use the scoped name @astryxdesign/cli. Bare \`npx astryx\` resolves to an
- unrelated package until the CLI is installed as a dependency.)
+ (Use the scoped name @astryxdesign/cli. The unscoped name astryx resolves
+ to an unrelated npm package until the CLI is installed as a dependency.)
 
  init writes the full component guide, page templates, design rules & tokens
  into your AGENTS.md / CLAUDE.md. Then, for any component:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.2-canary.fdd384f",
+  "version": "0.7.2",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -792,8 +792,6 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.2-canary.fdd384f",
-    "@astryxdesign/cli": "0.7.2-canary.fdd384f",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
@@ -804,7 +802,9 @@
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
     "@types/babel__core": "^7.20.5",
-    "tailwindcss": "^4.3.2"
+    "tailwindcss": "^4.3.2",
+    "@astryxdesign/a11y-spec": "0.0.0",
+    "@astryxdesign/cli": "0.7.2"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/scripts/agent-doc-state.mjs

@@ -107,15 +107,75 @@ export function isAstryxInitialized(targetDir = process.cwd()) {
 }
 
 /**
- * The one-line next-step both postinstall nudges print. Kept here so layer 1
- * (core) and layer 2 (cli) can never word it differently.
+ * Does an agent working in `startDir` already have the Astryx prompt in reach?
  *
- * Scoped package form (`@astryxdesign/cli`) — always resolves to us, even before
- * the CLI is installed. Bare `npx astryx` would fetch an unrelated look-alike
+ * Coding agents read the agent docs between the repository root and the folder
+ * they work in. So inside a git repository, init's block in any folder from
+ * `startDir` up to the repository root counts: a workspace package of a
+ * monorepo initialized at its root is set up. Outside a repository only
+ * `startDir` itself is checked, as {@link isAstryxInitialized} does. Both the
+ * per-command nudge and the postinstall nudges ask this.
+ *
+ * @param {string} [startDir=process.cwd()]
+ * @returns {boolean}
+ */
+export function isAstryxPromptInReach(startDir = process.cwd()) {
+  const start = path.resolve(startDir);
+  const repositoryRoot = findRepositoryRoot(start);
+  if (!repositoryRoot) return isAstryxInitialized(start);
+  for (let dir = start; ; dir = path.dirname(dir)) {
+    if (isAstryxInitialized(dir)) return true;
+    if (dir === repositoryRoot) return false;
+  }
+}
+
+/**
+ * The nearest folder at or above `start` that holds `.git` (a folder, or the
+ * file a worktree uses), or null outside a repository.
+ * @param {string} start
+ * @returns {string | null}
+ */
+function findRepositoryRoot(start) {
+  for (let dir = start; ; ) {
+    if (fs.existsSync(path.join(dir, '.git'))) return dir;
+    const parent = path.dirname(dir);
+    if (parent === dir) return null;
+    dir = parent;
+  }
+}
+
+/**
+ * The invocation the setup nudge falls back to when the CLI's picker
+ * (`getCliInvocation`) cannot be loaded. Scoped package form
+ * (`@astryxdesign/cli`) — always resolves to us, even before the CLI is
+ * installed. npx with the unscoped name would fetch an unrelated look-alike
  * package (see PR #4151).
  */
-export const SETUP_NUDGE =
-  '\nNext step: run `npx @astryxdesign/cli init` to finish setup and install the Astryx agent prompt.\n\n';
+export const SETUP_INVOCATION = 'npx @astryxdesign/cli';
+
+/**
+ * The one-line next-step every setup layer prints. Kept here so layer 1
+ * (core), layer 2 (cli postinstall) and layer 3 (each command) can never word
+ * it differently. Each layer passes the stem from the CLI's picker when it can
+ * load it.
+ *
+ * @param {string} [invocation] the CLI invocation stem, e.g. `pnpm exec astryx`
+ * @param {{before?: string | null}} [options] `before`: a command to run
+ *   first, such as the one that adds the CLI to a project that has none
+ * @returns {string}
+ */
+export function setupNudge(
+  invocation = SETUP_INVOCATION,
+  {before = null} = {},
+) {
+  const run = before
+    ? `\`${before}\`, then \`${invocation} init\``
+    : `\`${invocation} init\``;
+  return `\nNext step: run ${run} to finish setup and install the Astryx agent prompt.\n\n`;
+}
+
+/** The nudge with the fallback invocation. */
+export const SETUP_NUDGE = setupNudge();
 
 /**
  * Pure decision: should a postinstall print the setup nudge? Shared by BOTH

package/scripts/postinstall.mjs

@@ -1,7 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * @file @astryxdesign/core postinstall — nudge to run `npx @astryxdesign/cli init`.
+ * @file @astryxdesign/core postinstall — nudge to run `astryx init`, prefixed
+ * the way the project's installed CLI prints commands.
  *
  * Enforcement layer 1 of making `astryx init` foolproof: when the design system
  * is installed and the project hasn't run init yet, print a one-line next-step
@@ -19,6 +20,8 @@
  * during npx's fetch, and once set up.
  */
 
+import * as fs from 'node:fs';
+import * as path from 'node:path';
 import {fileURLToPath, pathToFileURL} from 'node:url';
 
 const HERE = fileURLToPath(import.meta.url);
@@ -37,6 +40,39 @@ async function loadContract() {
   }
 }
 
+/**
+ * The stem the project's installed CLI would print, from its picker
+ * (`getCliInvocation`). Core cannot depend on the CLI, so this looks for an
+ * installed copy from the project upward and imports the picker by path; with
+ * no CLI there, or one too old to have the picker, it returns undefined and
+ * the contract's scoped fallback is printed. At install time no integration is
+ * loaded, so this is the package-manager guess.
+ * @param {string} root
+ * @returns {Promise<string | undefined>}
+ */
+export async function cliInvocation(root) {
+  try {
+    let dir = path.resolve(root);
+    for (;;) {
+      const picker = path.join(
+        dir,
+        'node_modules/@astryxdesign/cli/foundation/env/package-manager.mjs',
+      );
+      if (fs.existsSync(picker)) {
+        const {getCliInvocation} = await import(pathToFileURL(picker).href);
+        return typeof getCliInvocation === 'function'
+          ? getCliInvocation(root)
+          : undefined;
+      }
+      const parent = path.dirname(dir);
+      if (parent === dir) return undefined;
+      dir = parent;
+    }
+  } catch {
+    return undefined;
+  }
+}
+
 async function main() {
   const contract = await loadContract();
   if (!contract) return;
@@ -45,10 +81,15 @@ async function main() {
     contract.shouldNudge({
       scriptPath: HERE,
       npmCommand: process.env.npm_command,
-      isSetUp: contract.isAstryxInitialized(root),
+      isSetUp: contract.isAstryxPromptInReach(root),
     })
   ) {
-    process.stdout.write(contract.SETUP_NUDGE);
+    const invocation = await cliInvocation(root);
+    process.stdout.write(
+      typeof contract.setupNudge === 'function'
+        ? contract.setupNudge(invocation)
+        : contract.SETUP_NUDGE,
+    );
   }
 }
 

package/src/Avatar/Avatar.tsx

@@ -387,9 +387,18 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
 /**
  * A character that can stand for a word in initials: a letter, a digit, or an
  * emoji. Punctuation and other symbols, such as `(`, `"` or `-`, cannot.
+ *
+ * Built at runtime, not written as a literal: for targets without property
+ * escapes, or when no browserslist is set, Babel's
+ * transform-unicode-property-regex rewrites a `\p{…}` literal, and the copy
+ * bundled with Next.js lacks the Unicode data it needs, so a source build fails
+ * with "Unknown property". A literal is safe once Next's bundled Babel ships
+ * that data.
  */
-const INITIAL_CHARACTER =
-  /[\p{L}\p{N}\p{Extended_Pictographic}\p{Regional_Indicator}]/u;
+const INITIAL_CHARACTER = new RegExp(
+  '[\\p{L}\\p{N}\\p{Extended_Pictographic}\\p{Regional_Indicator}]',
+  'u',
+);
 
 /**
  * The first character of a word that can stand for it in initials, skipping