@astryxdesign/core 0.1.8 → 0.1.9-canary.02ef052

package/src/PowerSearch/PowerSearch.test.tsx

@@ -16,6 +16,7 @@ import userEvent from '@testing-library/user-event';
 import {PowerSearch} from './PowerSearch';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 import type {PowerSearchConfig, PowerSearchFilter} from './types';
+import {TestIcon} from '../__tests__/TestIcon';
 
 // =============================================================================
 // Test infrastructure
@@ -157,6 +158,25 @@ describe('PowerSearch', () => {
     expect(screen.getByRole('combobox')).toHaveFocus();
   });
 
+  describe('startIcon', () => {
+    it('does not render a start icon when omitted', () => {
+      render(<PowerSearch config={config} filters={[]} onChange={() => {}} />);
+      expect(document.querySelector('svg')).not.toBeInTheDocument();
+    });
+
+    it('forwards startIcon to the internal Tokenizer', () => {
+      render(
+        <PowerSearch
+          config={config}
+          filters={[]}
+          onChange={() => {}}
+          startIcon={<TestIcon data-testid="start-icon" />}
+        />,
+      );
+      expect(screen.getByTestId('start-icon')).toBeInTheDocument();
+    });
+  });
+
   describe('paste behavior', () => {
     it('pasting a field name shows matching field suggestions', async () => {
       const user = userEvent.setup();
@@ -404,3 +424,26 @@ describe('PowerSearch', () => {
     });
   });
 });
+
+
+describe('PowerSearch statusVariant forwarding', () => {
+  it('defaults to attached (status renders with data-variant="attached")', () => {
+    const {container} = render(
+      <PowerSearch config={config} filters={[]} onChange={() => {}} status={{type: 'error', message: 'Required'}} />,
+    );
+    expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
+      'data-variant',
+      'attached',
+    );
+  });
+
+  it('forwards statusVariant="detached" to the underlying Field status', () => {
+    const {container} = render(
+      <PowerSearch config={config} filters={[]} onChange={() => {}} status={{type: 'error', message: 'Required'}} statusVariant="detached" />,
+    );
+    expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
+      'data-variant',
+      'detached',
+    );
+  });
+});

package/src/PowerSearch/PowerSearch.tsx

@@ -37,7 +37,7 @@ import {layerAnimations} from '../Layer/layerAnimations.stylex';
 import {Icon} from '../Icon';
 import type {IconType} from '../Icon';
 import type {IconName} from '../Icon/globalIconRegistry';
-import type {InputStatus} from '../Field';
+import type {InputStatus, FieldStatusVariant} from '../Field';
 import {usePopover} from '../Popover/usePopover';
 import {useAnnounce} from '../hooks/useAnnounce';
 import {
@@ -383,6 +383,13 @@ export interface PowerSearchProps extends Omit<
   onBlur?: (e: React.FocusEvent) => void;
   /** Validation status. */
   status?: InputStatus;
+  /**
+   * How the status message is placed relative to the input.
+   * - 'attached': message overlaps directly below the input (bordered treatment)
+   * - 'detached': message floats below as a separate element with spacing
+   * @default 'attached'
+   */
+  statusVariant?: FieldStatusVariant;
   /** Max width for dropdown menu. */
   menuWidth?: number;
   /** Max display length for filter token values. @default 40 */
@@ -527,6 +534,7 @@ export function PowerSearch({
   onFocus,
   onBlur,
   status,
+  statusVariant = 'attached',
   maxTokenLength = 40,
   popoverSaveButtonLabel: popoverSaveButtonLabelFromProps,
   timezoneID,
@@ -1033,6 +1041,7 @@ export function PowerSearch({
           hasEntriesOnFocus
           debounceMs={0}
           status={status}
+          statusVariant={statusVariant}
           onFocus={onFocus}
           onBlur={onBlur}
           xstyle={xstyle}

package/src/PowerSearch/PowerSearchEditPopover.test.tsx

@@ -13,6 +13,8 @@ import {
 import {render, screen, fireEvent, act} from '@testing-library/react';
 import React, {useState} from 'react';
 import {PowerSearch} from './PowerSearch';
+import {PowerSearchEditPopover} from './PowerSearchEditPopover';
+import {useInternalConfig} from './useInternalConfig';
 import type {PowerSearchConfig, PowerSearchFilter} from './types';
 
 // =============================================================================
@@ -216,4 +218,69 @@ describe('PowerSearch', () => {
     expect(popoverText).toContain('Priority');
     expect(popoverText).toContain('equals');
   });
+
+  it('does not save/close edit popover when Enter is consumed by child listbox option selection', () => {
+    const multiConfig: PowerSearchConfig = {
+      name: 'test-multi',
+      fields: [
+        {
+          key: 'status',
+          label: 'Status',
+          operators: [
+            {
+              key: 'any_of',
+              label: 'is any of',
+              value: {
+                type: 'enum_list',
+                values: [
+                  {value: 'open', label: 'Open'},
+                  {value: 'closed', label: 'Closed'},
+                ],
+              },
+            },
+          ],
+        },
+      ],
+    };
+
+    const onSave = vi.fn();
+    const onCancel = vi.fn();
+
+    function MultiSelectHarness() {
+      const internalConfig = useInternalConfig(multiConfig);
+      return (
+        <PowerSearchEditPopover
+          config={internalConfig}
+          filter={{
+            field: 'status',
+            operator: 'any_of',
+            value: {type: 'enum_list', value: ['open']},
+          }}
+          mode="edit"
+          onSave={onSave}
+          onCancel={onCancel}
+        />
+      );
+    }
+
+    const {container} = render(<MultiSelectHarness />);
+
+    const input = container.querySelector('input');
+    expect(input).not.toBeNull();
+
+    // Fire an Enter event that has been defaultPrevented (e.g. child typeahead option selection)
+    const enterEvent = new KeyboardEvent('keydown', {
+      key: 'Enter',
+      bubbles: true,
+      cancelable: true,
+    });
+    enterEvent.preventDefault();
+
+    act(() => {
+      input?.dispatchEvent(enterEvent);
+    });
+
+    // onSave should NOT be called because the event was already consumed (defaultPrevented)
+    expect(onSave).not.toHaveBeenCalled();
+  });
 });

package/src/PowerSearch/PowerSearchEditPopover.tsx

@@ -702,7 +702,7 @@ export function PowerSearchEditPopover({
   // Handle Enter to save, Escape to cancel
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' && !isSaveDisabled) {
+      if (e.key === 'Enter' && !isSaveDisabled && !e.defaultPrevented) {
         e.preventDefault();
         handleSave();
       } else if (e.key === 'Escape' && !e.defaultPrevented) {

package/src/PowerSearch/usePowerSearchSource.ts

@@ -76,8 +76,7 @@ export function usePowerSearchSource(
 
           // Check each field+operator combo against the query
           for (const op of field.operators) {
-            const combinedLabel =
-              `${field.label} ${opLabel(op)}`.toLowerCase();
+            const combinedLabel = `${field.label} ${opLabel(op)}`.toLowerCase();
             if (combinedLabel.includes(lower)) {
               const id = `${field.key}:${op.key}`;
               if (!seen.has(id)) {

package/src/RadioList/RadioList.doc.mjs

@@ -114,6 +114,12 @@ export const docs = {
       type: 'string',
       description: 'Tooltip text for an info icon next to the label.',
     },
+    {
+      name: 'width',
+      type: 'SizeValue',
+      description:
+        'Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.',
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',

package/src/RadioList/RadioList.tsx

@@ -146,8 +146,8 @@ export interface RadioListProps extends Omit<
   status?: InputStatus;
   /**
    * The size of the radio controls.
-   * - 'sm': Compact size (18px radio, 20px wrapper)
-   * - 'md': Default size (22px radio, 24px wrapper)
+   * - 'sm': Compact size (20px radio)
+   * - 'md': Default size (24px radio)
    * @default 'md'
    */
   size?: RadioListSize;

package/src/RadioList/RadioListItem.tsx

@@ -140,12 +140,12 @@ const wrapperSizeStyles = stylex.create({
 
 const radioSizeStyles = stylex.create({
   sm: {
-    width: 18,
-    height: 18,
+    width: 20,
+    height: 20,
   },
   md: {
-    width: 22,
-    height: 22,
+    width: 24,
+    height: 24,
   },
 });
 

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -169,6 +169,7 @@ export function SegmentedControlItem({
   icon,
   isDisabled = false,
   onClick: onClickProp,
+  xstyle,
   ...rest
 }: SegmentedControlItemProps) {
   const ctx = useSegmentedControlContext();
@@ -228,6 +229,7 @@ export function SegmentedControlItem({
           isSelected && styles.selected,
           !isSelected && !isItemDisabled && styles.hover,
           isItemDisabled && styles.disabled,
+          xstyle,
         ),
       )}>
       {iconElement}

package/src/SelectableCard/SelectableCard.doc.mjs

@@ -27,6 +27,7 @@ export const docs = {
     {name: 'children', type: 'ReactNode', description: 'Card content.'},
     {name: 'padding', type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10', description: 'Inner padding.', default: '4'},
     {name: 'variant', type: "'default' | 'transparent' | 'muted' | 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow'", description: 'Background color variant.', default: "'default'"},
+    {name: 'elevation', type: "'none' | 'low' | 'med' | 'high'", description: 'Resting shadow depth. The selection ring composes on top, so a selected card keeps its shadow.', default: "'none'"},
     {name: 'width', type: 'SizeValue', description: 'Card width.'},
     {name: 'height', type: 'SizeValue', description: 'Card height.'},
     {name: 'maxWidth', type: 'SizeValue', description: 'Maximum card width.'},
@@ -71,6 +72,7 @@ export const docsDense = {
     isDisabled: 'disables card',
     padding: 'inner padding',
     variant: 'background color variant',
+    elevation: 'resting shadow depth: none|low|med|high; selection ring composes on top',
     width: 'card width',
     height: 'card height',
     maxWidth: 'max card width',

package/src/SelectableCard/SelectableCard.test.tsx

@@ -85,8 +85,7 @@ describe('SelectableCard', () => {
         label="Disabled"
         isSelected={false}
         onChange={handleChange}
-        isDisabled
-      >
+        isDisabled>
         Content
       </SelectableCard>,
     );
@@ -101,12 +100,55 @@ describe('SelectableCard', () => {
         label="Disabled"
         isSelected={false}
         onChange={handleChange}
-        isDisabled
-      >
+        isDisabled>
         <span>Content</span>
       </SelectableCard>,
     );
     fireEvent.click(screen.getByText('Content'));
     expect(handleChange).not.toHaveBeenCalled();
   });
+
+  describe('elevation', () => {
+    const noop = () => {};
+
+    it('forwards a distinct elevation class to the card for each level', () => {
+      const classFor = (elevation: 'none' | 'low' | 'med' | 'high') => {
+        const {container} = render(
+          <SelectableCard
+            label="Card"
+            isSelected={false}
+            onChange={noop}
+            elevation={elevation}>
+            Content
+          </SelectableCard>,
+        );
+        return container.firstElementChild!.className;
+      };
+      const classes = new Set([
+        classFor('none'),
+        classFor('low'),
+        classFor('med'),
+        classFor('high'),
+      ]);
+      expect(classes.size).toBe(4);
+    });
+
+    it('still varies elevation while selected (ring composes with elevation)', () => {
+      const selectedClassFor = (elevation: 'none' | 'med') => {
+        const {container} = render(
+          <SelectableCard
+            label="Card"
+            isSelected
+            onChange={noop}
+            elevation={elevation}>
+            Content
+          </SelectableCard>,
+        );
+        return container.firstElementChild!.className;
+      };
+      // A selected card at 'med' must differ from a selected card at 'none' —
+      // proving the selection ring does not clobber the elevation shadow.
+      expect(selectedClassFor('med')).not.toBe(selectedClassFor('none'));
+    });
+  });
 });

package/src/SelectableCard/SelectableCard.tsx

@@ -14,6 +14,7 @@
  * - /apps/storybook/stories/SelectableCard.stories.tsx (storybook stories)
  * - /packages/cli/templates/blocks/components/Card/SelectableCardShowcase.tsx (showcase block)
  * - /packages/cli/templates/blocks/components/Card/SelectableCardMulti.tsx (block)
+ * - /packages/cli/templates/blocks/components/Card/SelectableCardElevated.tsx (block)
  *
  * Composes Card for all visual styling. Adds selection state with
  * an inset box-shadow (zero layout jitter) and useClickableContainer
@@ -36,7 +37,7 @@ import {
 import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
 import {colorVars, durationVars, easeVars} from '../theme/tokens.stylex';
-import type {SizeValue, SpacingStep} from '../utils/types';
+import type {Elevation, SizeValue, SpacingStep} from '../utils/types';
 import {mergeProps, mergeRefs} from '../utils';
 import {Card} from '../Card/Card';
 import type {CardVariant} from '../Card/Card';
@@ -78,13 +79,13 @@ const styles = stylex.create({
       backgroundColor: 'transparent',
     },
     ':active::after': {
-      backgroundColor: 'color-mix(in srgb, currentColor 10%, transparent)',
+      backgroundColor: colorVars['--color-overlay-pressed'],
     },
   },
   hoverOnPointer: {
     '@media (hover: hover)': {
       ':hover::after': {
-        backgroundColor: 'color-mix(in srgb, currentColor 5%, transparent)',
+        backgroundColor: colorVars['--color-overlay-hover'],
       },
     },
   },
@@ -103,51 +104,54 @@ const styles = stylex.create({
     whiteSpace: 'nowrap',
     borderWidth: 0,
   },
-  // Selection indicator — inset box-shadow for the thick inner ring (zero layout
-  // jitter) plus borderColor change on the card's own border for a cohesive look.
+  // Selection indicator — an inset ring drawn via the card's --_card-ring
+  // shadow slot (zero layout jitter) plus a borderColor change on the card's
+  // own border for a cohesive look. Routing the ring through --_card-ring
+  // (rather than box-shadow directly) lets it compose with the card's
+  // elevation instead of clobbering it.
   selected: {
     borderColor: colorVars['--color-accent'],
-    boxShadow: `inset 0 0 0 2px ${colorVars['--color-accent']}`,
+    '--_card-ring': `inset 0 0 0 2px ${colorVars['--color-accent']}`,
   },
   selectedBlue: {
     borderColor: colorVars['--color-border-blue'],
-    boxShadow: `inset 0 0 0 2px ${colorVars['--color-border-blue']}`,
+    '--_card-ring': `inset 0 0 0 2px ${colorVars['--color-border-blue']}`,
   },
   selectedCyan: {
     borderColor: colorVars['--color-border-cyan'],
-    boxShadow: `inset 0 0 0 2px ${colorVars['--color-border-cyan']}`,
+    '--_card-ring': `inset 0 0 0 2px ${colorVars['--color-border-cyan']}`,
   },
   selectedGray: {
     borderColor: colorVars['--color-border-gray'],
-    boxShadow: `inset 0 0 0 2px ${colorVars['--color-border-gray']}`,
+    '--_card-ring': `inset 0 0 0 2px ${colorVars['--color-border-gray']}`,
   },
   selectedGreen: {
     borderColor: colorVars['--color-border-green'],
-    boxShadow: `inset 0 0 0 2px ${colorVars['--color-border-green']}`,
+    '--_card-ring': `inset 0 0 0 2px ${colorVars['--color-border-green']}`,
   },
   selectedOrange: {
     borderColor: colorVars['--color-border-orange'],
-    boxShadow: `inset 0 0 0 2px ${colorVars['--color-border-orange']}`,
+    '--_card-ring': `inset 0 0 0 2px ${colorVars['--color-border-orange']}`,
   },
   selectedPink: {
     borderColor: colorVars['--color-border-pink'],
-    boxShadow: `inset 0 0 0 2px ${colorVars['--color-border-pink']}`,
+    '--_card-ring': `inset 0 0 0 2px ${colorVars['--color-border-pink']}`,
   },
   selectedPurple: {
     borderColor: colorVars['--color-border-purple'],
-    boxShadow: `inset 0 0 0 2px ${colorVars['--color-border-purple']}`,
+    '--_card-ring': `inset 0 0 0 2px ${colorVars['--color-border-purple']}`,
   },
   selectedRed: {
     borderColor: colorVars['--color-border-red'],
-    boxShadow: `inset 0 0 0 2px ${colorVars['--color-border-red']}`,
+    '--_card-ring': `inset 0 0 0 2px ${colorVars['--color-border-red']}`,
   },
   selectedTeal: {
     borderColor: colorVars['--color-border-teal'],
-    boxShadow: `inset 0 0 0 2px ${colorVars['--color-border-teal']}`,
+    '--_card-ring': `inset 0 0 0 2px ${colorVars['--color-border-teal']}`,
   },
   selectedYellow: {
     borderColor: colorVars['--color-border-yellow'],
-    boxShadow: `inset 0 0 0 2px ${colorVars['--color-border-yellow']}`,
+    '--_card-ring': `inset 0 0 0 2px ${colorVars['--color-border-yellow']}`,
   },
 });
 
@@ -228,6 +232,13 @@ export interface SelectableCardProps extends Omit<BaseProps, 'onChange'> {
    */
   variant?: CardVariant;
 
+  /**
+   * Resting elevation — the shadow depth the card sits at.
+   * The selection ring composes on top, so a selected card keeps its shadow.
+   * @default 'none'
+   */
+  elevation?: Elevation;
+
   /** Width of the card. */
   width?: SizeValue;
 
@@ -278,6 +289,7 @@ export function SelectableCard({
   children,
   padding,
   variant = 'default',
+  elevation = 'none',
   width,
   height,
   maxWidth,
@@ -328,6 +340,7 @@ export function SelectableCard({
       maxWidth={maxWidth}
       padding={padding}
       variant={variant}
+      elevation={elevation}
       {...mergeProps(
         themeProps('selectable-card', {
           variant,

package/src/Selector/Selector.doc.mjs

@@ -23,6 +23,8 @@ export const docs = {
     targets: [
       {className: 'astryx-selector', visualProps: ['size', 'status']},
       {className: 'astryx-selector-option'},
+      {className: 'astryx-selector-clear-icon'},
+      {className: 'astryx-selector-indicator-icon', states: ['state']},
     ],
   },
   description: 'Dropdown selector for choosing from a list of options.',
@@ -128,12 +130,25 @@ export const docs = {
       type: "{type: 'error' | 'warning' | 'success', message?: string}",
       description: 'Validation status with an optional message.',
     },
+    {
+      name: 'statusVariant',
+      type: "'attached' | 'detached'",
+      description:
+        'How the status message is placed relative to the input. attached overlaps directly below the input (bordered treatment); detached floats below as a separate element with spacing.',
+      default: "'attached'",
+    },
     {
       name: 'renderOption',
       type: '(option: SelectorOptionData) => ReactNode',
       description:
         'Custom render function for each selectable option in the dropdown. Use this instead of JSX children; dividers and sections are rendered by the selector.',
     },
+    {
+      name: 'width',
+      type: 'SizeValue',
+      description:
+        'Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.',
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',