@astryxdesign/core 0.3.0 → 0.4.0

package/src/ProgressBar/ProgressBar.tsx

@@ -122,8 +122,12 @@ export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
   /**
    * Target marks drawn on the track at fixed points in the same `0..max`
    * scale as `value` — e.g. a goal line. Marks stay visible whether progress
-   * is below or past them. Each mark's required `label` names it for assistive
-   * tech and is revealed via a `Tooltip` on hover/focus. Ignored when
+   * is below or past them, and take their color from what they sit on: a mark
+   * inside the filled area uses the fill variant's on-color (on-accent,
+   * on-warning, on-error, …), while a mark still out on the bare track uses
+   * `--color-text-primary` (`--color-text-secondary` on a disabled bar, which
+   * dims everything it draws). Each mark's required `label` names it for
+   * assistive tech and is revealed via a `Tooltip` on hover/focus. Ignored when
    * `isIndeterminate` is true.
    */
   marks?: ReadonlyArray<ProgressBarMark>;
@@ -257,20 +261,27 @@ const styles = stylex.create({
   },
   // A mark is a vertical tick centered on the track, a child of the
   // `role="progressbar"` element (unchanged DOM). The track no longer clips, so
-  // its height — 8px by default, directly overridable via the `progressbar-mark`
-  // theme target — may exceed the bar and overhang; the centering translate
-  // keeps any overhang symmetric. Positioned horizontally via `insetInlineStart`;
-  // the translate mirrors under RTL.
+  // its height — 8px by default — may exceed the bar and overhang; the centering
+  // translate keeps any overhang symmetric. Positioned horizontally via
+  // `insetInlineStart`; the translate mirrors under RTL.
+  //
+  // The dimensions read private vars rather than being plain declarations: a
+  // theme writes `width`/`height` on the `progressbar-mark` target as usual and
+  // the derived-var registry emits them as these vars instead of as competing
+  // properties. Nothing else declares them, so the theme value lands whatever
+  // the consumer's cascade looks like — a source-build app that compiles StyleX
+  // without `useCSSLayers` leaves the atomics unlayered, where they outrank
+  // every rule in `@layer astryx-theme` and made sizing the mark impossible
+  // without `!important`.
+  //
+  // The tick's color is not set here: it depends on what the mark sits on, so
+  // it comes from `markOnFillStyles[variant]` (mark inside the filled area) or
+  // `markOnTrackStyles.track` (mark out on the bare track).
   mark: {
     position: 'absolute',
     top: '50%',
-    width: 2,
-    height: 8,
-    // Defaults to text-primary. Directly overridable via the `progressbar-mark`
-    // theme target — a theme can set `backgroundColor`, `width`, and `height`
-    // (e.g. a taller "flag" tick that overhangs the bar, or per-variant
-    // contrast) with `defineTheme`; no dedicated CSS vars needed.
-    backgroundColor: colorVars['--color-text-primary'],
+    width: 'var(--_progressbar-mark-width, 2px)',
+    height: 'var(--_progressbar-mark-height, 8px)',
     outline: {
       default: 'none',
       ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
@@ -307,6 +318,64 @@ const variantStyles = stylex.create({
   },
 });
 
+// A mark sitting inside the filled area is drawn *on* the bar, so it takes the
+// on-color that pairs with the fill's own variant color — the same pairing
+// Badge uses for solid semantic backgrounds.
+//
+// `neutral` and `disabled` both fill with the muted `--color-text-disabled`
+// gray, which carries no semantic weight and has no dedicated on-token, so
+// they fall back to a plain foreground. They pick different ones: a `neutral`
+// bar is live, so its mark keeps the full-contrast `--color-text-primary` a
+// mark uses out on the track; a `disabled` bar is deliberately low-emphasis —
+// its own label and value text drop to muted colors — so its mark steps down
+// to `--color-text-secondary` rather than becoming the loudest thing on a
+// grayed-out component.
+const markOnFillStyles = stylex.create({
+  accent: {
+    backgroundColor: colorVars['--color-on-accent'],
+  },
+  success: {
+    backgroundColor: colorVars['--color-on-success'],
+  },
+  warning: {
+    backgroundColor: colorVars['--color-on-warning'],
+  },
+  error: {
+    backgroundColor: colorVars['--color-on-error'],
+  },
+  neutral: {
+    backgroundColor: colorVars['--color-text-primary'],
+  },
+  disabled: {
+    backgroundColor: colorVars['--color-text-secondary'],
+  },
+});
+
+// A mark out on the bare track is a foreground tick over the muted track
+// background, so it takes `--color-text-primary`.
+//
+// The obvious candidate was `--color-border-emphasized` — the emphasized
+// divider color `Divider`'s `strong` variant and `Slider`'s marks use — but
+// divider tokens sit a step or two from the track on the same neutral ramp, so
+// a mark drawn in one is at or near invisible: measured against each shipped
+// theme's track it lands between 1.00:1 (theme-neutral, both modes, where the
+// track is aliased to that very token) and 2.9:1, under the 3:1 WCAG 1.4.11
+// non-text floor in 7 of 8 themes. `--color-text-secondary` still misses in
+// two. `--color-text-primary` is the one foreground guaranteed to read against
+// every surface a theme defines: 5.8:1 to 15.7:1 on the track across all
+// themes and both modes.
+const markOnTrackStyles = stylex.create({
+  track: {
+    backgroundColor: colorVars['--color-text-primary'],
+  },
+  // A disabled bar dims everything it draws, so its track marks step down to
+  // the secondary foreground for the same reason the disabled on-fill mark
+  // does — matching the muted label and value text.
+  trackDisabled: {
+    backgroundColor: colorVars['--color-text-secondary'],
+  },
+});
+
 function defaultFormatValueLabel(value: number, max: number): string {
   const pct = max > 0 ? Math.round((value / max) * 100) : 0;
   return `${pct}%`;
@@ -338,8 +407,11 @@ function defaultFormatValueLabel(value: number, max: number): string {
  * ```
  *
  * A mark's height, width, and color are directly themeable via the
- * `progressbar-mark` target — e.g. a taller "goal flag" tick that overhangs the
- * bar (centered, so the overhang is symmetric):
+ * `progressbar-mark` target. The target reflects `data-placement`
+ * (`"fill"` when the mark sits inside the filled area, `"track"` when it is
+ * still out on the bare track) and `data-variant` (the fill's variant), so a
+ * theme can style the two cases separately — e.g. a taller "goal flag" tick
+ * that overhangs the bar (centered, so the overhang is symmetric):
  *
  * @example
  * ```
@@ -387,6 +459,13 @@ export function ProgressBar({
   // Marks make no sense without a determinate value, so they are only drawn
   // in determinate mode. Non-finite mark values are dropped; the rest are
   // clamped to the track edges, matching the bar's own `clampedValue`.
+  //
+  // Each mark also records whether it lands on the filled part of the bar
+  // (`isOnFill`), which decides its color: a mark inside the fill reads against
+  // the variant color, one out on the bare track reads against the track. A
+  // mark exactly at the fill's leading edge counts as on the fill — it is the
+  // "reached the target" moment — except at zero progress, where there is no
+  // fill for it to sit on.
   const resolvedMarks =
     !isIndeterminate && marks
       ? marks
@@ -394,7 +473,12 @@ export function ProgressBar({
           .map(mark => {
             const clamped = Math.min(Math.max(0, mark.value), safeMax);
             const pct = safeMax > 0 ? (clamped / safeMax) * 100 : 0;
-            return {value: mark.value, label: mark.label, pct};
+            return {
+              value: mark.value,
+              label: mark.label,
+              pct,
+              isOnFill: percentage > 0 && pct <= percentage,
+            };
           })
       : [];
 
@@ -471,21 +555,39 @@ export function ProgressBar({
         )}
         {/* Target marks — children of the progressbar element (unchanged),
             layered above the fill so they show whether progress is below or
-            past them. Each mark is labeled, so it is a focusable Tooltip
-            trigger: the label is visible on hover/focus and names the mark for
-            assistive tech via the Tooltip's aria-describedby, without adding a
-            labeled child to the progressbar's own a11y subtree. */}
+            past them. A mark's color follows what it sits on: inside the fill
+            it uses the fill variant's on-color, out on the bare track it uses
+            the emphasized divider color. Each mark is labeled, so it is a
+            focusable Tooltip trigger: the label is visible on hover/focus and
+            names the mark for assistive tech via the Tooltip's
+            aria-describedby, without adding a labeled child to the
+            progressbar's own a11y subtree. */}
         {resolvedMarks.map(mark => {
           // The tick element. It is both the Tooltip's anchor and the Suspense
           // fallback shown while the lazy Tooltip chunk loads, so the tick is
           // always visible and the label attaches once ready. The list `key`
           // lives on the mapped <Suspense>, not here.
+          //
+          // `placement` is reflected as `data-placement` (and a class) so a
+          // theme can style the two cases separately on the
+          // `progressbar-mark` target; `variant` mirrors the fill's variant
+          // for the same reason.
           const markEl = (
             <span
               tabIndex={0}
               {...mergeProps(
-                themeProps('progressbar-mark'),
-                stylex.props(styles.mark),
+                themeProps('progressbar-mark', {
+                  variant: fillVariant,
+                  placement: mark.isOnFill ? 'fill' : 'track',
+                }),
+                stylex.props(
+                  styles.mark,
+                  mark.isOnFill
+                    ? markOnFillStyles[fillVariant]
+                    : isDisabled
+                      ? markOnTrackStyles.trackDisabled
+                      : markOnTrackStyles.track,
+                ),
               )}
               style={{insetInlineStart: `${mark.pct}%`}}
             />

package/src/RadioList/RadioList.doc.mjs

@@ -12,8 +12,10 @@ export const docs = {
     targets: [
       {className: 'astryx-radio-list', visualProps: ['orientation', 'size']},
       {className: 'astryx-radio-list-item'},
-      {className: 'astryx-radio', visualProps: ['size'], states: ['checked', 'disabled']},
-      {className: 'astryx-radio-dot', visualProps: ['size']},
+      {className: 'astryx-radio-indicator', visualProps: ['size'], states: ['checked', 'disabled']},
+      {className: 'astryx-radio-indicator-dot', visualProps: ['size']},
+      {className: 'astryx-radio', visualProps: ['size'], states: ['checked', 'disabled'], deprecatedFor: 'radio-indicator'},
+      {className: 'astryx-radio-dot', visualProps: ['size'], deprecatedFor: 'radio-indicator-dot'},
     ],
   },
   description: 'Radio group container with field integration for label, description, and status.',

package/src/RadioList/RadioListItem.tsx

@@ -18,19 +18,15 @@
  * - /packages/cli/assets/templates/blocks/components/RadioList/ (showcase blocks)
  */
 
-import React, {use, useId, type ReactNode} from 'react';
+import React, {use, useId, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
-import {
-  colorVars,
-  spacingVars,
-  durationVars,
-  easeVars,
-  borderVars,
-} from '../theme/tokens.stylex';
+import {colorVars, spacingVars} from '../theme/tokens.stylex';
 import {RadioListContext} from './RadioList';
 import {mergeProps} from '../utils';
-import {radioScope} from './radio.markers.stylex';
+import {indicatorScope} from '../Indicator/indicator.markers.stylex';
+import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
+import {useIndicator} from '../Indicator';
 import {Item} from '../Item';
 import {themeProps} from '../utils/themeProps';
 
@@ -59,74 +55,9 @@ const styles = stylex.create({
   inputDisabled: {
     cursor: 'not-allowed',
   },
-  radio: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: borderVars['--border-width'],
-    borderStyle: 'solid',
-    borderRadius: '50%',
-    transitionProperty: 'background-color, border-color',
-    transitionDuration: durationVars['--duration-fast'],
-    transitionTimingFunction: easeVars['--ease-standard'],
-    boxSizing: 'border-box',
-  },
-  radioUnchecked: {
-    borderColor: {
-      default: colorVars['--color-border-emphasized'],
-      [stylex.when.ancestor(':hover', radioScope)]: {
-        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-border-emphasized']}, ${colorVars['--color-tint-hover']} 20%)`,
-      },
-    },
-    backgroundColor: {
-      default: colorVars['--color-background-surface'],
-      [stylex.when.ancestor(':hover', radioScope)]: {
-        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-background-surface']}, ${colorVars['--color-tint-hover']} 5%)`,
-      },
-    },
-  },
-  radioChecked: {
-    borderColor: {
-      default: colorVars['--color-accent'],
-      [stylex.when.ancestor(':hover', radioScope)]: {
-        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-accent']}, ${colorVars['--color-tint-hover']} 15%)`,
-      },
-    },
-    backgroundColor: {
-      default: colorVars['--color-accent'],
-      [stylex.when.ancestor(':hover', radioScope)]: {
-        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-accent']}, ${colorVars['--color-tint-hover']} 15%)`,
-      },
-    },
-  },
-  radioWrapperFocus: {
-    outline: {
-      default: 'none',
-      ':has(:focus-visible)': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: '0',
-      ':has(:focus-visible)': '2px',
-    },
-    borderRadius: '50%',
-  },
-  radioDisabled: {
-    opacity: 0.5,
-    borderColor: colorVars['--color-border'],
-  },
-  radioDisabledUnchecked: {
-    backgroundColor: colorVars['--color-background-muted'],
-  },
-  innerDot: {
-    borderRadius: '50%',
-    backgroundColor: {
-      default: colorVars['--color-on-accent'],
-      // Forced colors (Windows High Contrast) strips painted backgrounds,
-      // which would make the selected dot invisible — checked and unchecked
-      // radios would look identical. CanvasText keeps the dot perceivable on
-      // the Canvas circle fill (WCAG 1.4.11).
-      '@media (forced-colors: active)': 'CanvasText',
-    },
+  // Holds only the indicator, so the focus ring has one unambiguous target.
+  indicatorSlot: {
+    display: 'contents',
   },
   labelDisabled: {
     color: colorVars['--color-text-disabled'],
@@ -145,28 +76,6 @@ const wrapperSizeStyles = stylex.create({
   },
 });
 
-const radioSizeStyles = stylex.create({
-  sm: {
-    width: 20,
-    height: 20,
-  },
-  md: {
-    width: 24,
-    height: 24,
-  },
-});
-
-const dotSizeStyles = stylex.create({
-  sm: {
-    width: 8,
-    height: 8,
-  },
-  md: {
-    width: 10,
-    height: 10,
-  },
-});
-
 const embeddedStyles = stylex.create({
   root: {
     paddingBlock: 0,
@@ -248,14 +157,18 @@ export function RadioListItem({
     context.hasDisabledMessage && !isItemDisabled;
   const isChecked = context.value === value;
   const size = context.size;
+  // The radio visual is an indicator: a theme can restyle it through the
+  // `radio` / `radio-dot` targets or replace the component outright.
+  const RadioControl = useIndicator('radio');
+  // See CheckboxInput: the ring goes on the indicator's own element, because
+  // the native input is visually hidden and only the indicator knows its shape.
+  const indicatorRef = useRef<HTMLSpanElement>(null);
+  const {focusProps} = useIndicatorFocusRing(indicatorRef, isDisabled);
 
   const radioCircle = (
     <div
-      {...stylex.props(
-        styles.radioWrapper,
-        wrapperSizeStyles[size],
-        !isDisabled && styles.radioWrapperFocus,
-      )}>
+      {...stylex.props(styles.radioWrapper, wrapperSizeStyles[size])}
+      {...focusProps}>
       <input
         id={id}
         type="radio"
@@ -282,31 +195,13 @@ export function RadioListItem({
           isDisabled && styles.inputDisabled,
         )}
       />
-      <div
-        aria-hidden="true"
-        {...mergeProps(
-          themeProps('radio', {
-            size,
-            checked: isChecked ? 'checked' : null,
-            disabled: isDisabled ? 'disabled' : null,
-          }),
-          stylex.props(
-            styles.radio,
-            radioSizeStyles[size],
-            isChecked ? styles.radioChecked : styles.radioUnchecked,
-            isDisabled && styles.radioDisabled,
-            isDisabled && !isChecked && styles.radioDisabledUnchecked,
-          ),
-        )}>
-        {isChecked && (
-          <div
-            {...mergeProps(
-              themeProps('radio-dot', {size}),
-              stylex.props(styles.innerDot, dotSizeStyles[size]),
-            )}
-          />
-        )}
-      </div>
+      <span ref={indicatorRef} {...stylex.props(styles.indicatorSlot)}>
+        <RadioControl
+          state={isChecked ? 'checked' : 'unchecked'}
+          size={size}
+          isDisabled={isDisabled}
+        />
+      </span>
     </div>
   );
 
@@ -325,7 +220,13 @@ export function RadioListItem({
       ref={ref}
       {...mergeProps(
         themeProps('radio-list-item'),
-        stylex.props(styles.container, !isDisabled && radioScope, xstyle),
+        stylex.props(
+          styles.container,
+          // Hover reaches the radio visual through this ancestor marker rather
+          // than props, so hovering the row tints the control.
+          !isDisabled && indicatorScope,
+          xstyle,
+        ),
         className,
         style,
       )}

package/src/Resizable/ResizeHandle.tsx

@@ -34,6 +34,7 @@ import {
   radiusVars,
   spacingVars,
 } from '../theme/tokens.stylex';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {mergeProps, mergeRefs, rtlStyles} from '../utils';
 import type {ResizableProps} from './useResizable';
 import {themeProps} from '../utils/themeProps';
@@ -94,14 +95,6 @@ const styles = stylex.create({
     transitionProperty: 'background-color',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    outline: {
-      default: 'none',
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: null,
-      ':focus-visible': spacingVars['--spacing-0-5'],
-    },
   },
   // Overlay mode — absolutely positioned inside the parent panel
   // instead of being a sibling in flex flow. Used when the handle
@@ -554,7 +547,7 @@ export function ResizeHandle({
       data-resizing={isDragging || undefined}
       {...mergeProps(
         themeProps('resize-handle'),
-        stylex.props(
+        focusOutlineProps.focusVisible(
           styles.handle,
           isOverlay && styles.overlay,
           isOverlay &&

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -32,6 +32,7 @@ import type {SegmentedControlSize} from './SegmentedControlContext';
 import {mergeProps, composeEventHandlers} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
 
 export interface SegmentedControlItemProps extends BaseProps<HTMLButtonElement> {
   ref?: React.Ref<HTMLButtonElement>;
@@ -85,14 +86,6 @@ const styles = stylex.create({
     transitionProperty: 'color, background-color, box-shadow',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    outline: {
-      default: null,
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: '0',
-      ':focus-visible': '2px',
-    },
   },
   hover: {
     backgroundColor: {
@@ -240,7 +233,7 @@ export function SegmentedControlItem({
           selected: isSelected ? 'selected' : null,
           disabled: isItemDisabled ? 'disabled' : null,
         }),
-        stylex.props(
+        focusOutlineProps.focusVisible(
           styles.base,
           sizeStyles[size],
           isFill && styles.fill,

package/src/SelectableCard/SelectableCard.tsx

@@ -46,6 +46,7 @@ import type {CardVariant} from '../Card/Card';
 import {useClickableContainer} from '../hooks/useClickableContainer';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
 
 // =============================================================================
 // Styles — selection + interaction; Card handles the rest
@@ -58,13 +59,6 @@ const styles = stylex.create({
     transitionProperty: 'box-shadow, border-color',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    outlineOffset: '2px',
-  },
-  focusWithin: {
-    ':has(:focus-visible)': {
-      outline: `2px solid ${colorVars['--color-accent']}`,
-      outlineOffset: '2px',
-    },
   },
   // Hover overlay — guarded by @media (hover: hover) so touch devices
   // don't show a stuck hover state. Active/pressed state works everywhere.
@@ -361,12 +355,13 @@ export function SelectableCard({
           variant,
           selected: isSelected ? 'true' : 'false',
         }),
-        {className: classNameProp, style},
+        focusOutlineProps.focusWithin(),
+        classNameProp,
+        style,
       )}
       xstyle={
         [
           styles.interactive,
-          styles.focusWithin,
           isSelected && selectedStyleForVariant(variant),
           !isDisabled && styles.overlay,
           !isDisabled && styles.hoverOnPointer,

package/src/Selector/Selector.doc.mjs

@@ -24,10 +24,13 @@ export const docs = {
       {
         className: 'astryx-selector',
         visualProps: ['variant', 'size', 'status'],
+        states: ['disabled'],
       },
       {className: 'astryx-selector-option'},
-      {className: 'astryx-selector-clear-icon'},
+      {className: 'astryx-selector-empty-state'},
+      {className: 'astryx-selector-clear-icon', deprecatedFor: 'input-clear-icon'},
       {className: 'astryx-selector-indicator-icon', states: ['state']},
+      {className: 'astryx-selector-check'},
     ],
   },
   description: 'Dropdown selector for choosing from a list of options.',
@@ -169,7 +172,7 @@ export const docs = {
   components: [{name: 'SelectorOption'}],
   usage: {
     description:
-      'A dropdown selector for choosing a single value from a list of options. Supports labels, validation, descriptions, and required/optional states. Use it in forms and settings when presenting a moderate number of options.',
+      'A dropdown selector for choosing a single value from a list of options. Supports labels, validation, descriptions, and required/optional states. Use it in forms and settings when presenting a moderate number of options. Keyboard typeahead matches a native select: typing on the focused closed trigger selects the matching option directly, repeated presses cycle through options sharing a first letter, and spaces count as match characters ("new y" reaches "New York"). With the menu open, typing moves the highlight and Enter commits. With hasSearch, typing on the closed trigger opens the popup and seeds the search input.',
     bestPractices: [
       {
         guidance: true,
@@ -271,7 +274,7 @@ export const docs = {
 export const docsZh = {
   usage: {
     description:
-      'A dropdown selector for choosing a single value from a list of options. Supports labels, validation, descriptions, and required/optional states. Use it in forms and settings when presenting a moderate number of options.',
+      'A dropdown selector for choosing a single value from a list of options. Supports labels, validation, descriptions, and required/optional states. Use it in forms and settings when presenting a moderate number of options. Keyboard typeahead matches a native select: typing on the focused closed trigger selects the matching option directly, repeated presses cycle through options sharing a first letter, and spaces count as match characters ("new y" reaches "New York"). With the menu open, typing moves the highlight and Enter commits. With hasSearch, typing on the closed trigger opens the popup and seeds the search input.',
     bestPractices: [
       {
         guidance: true,
@@ -363,7 +366,7 @@ export const docsZh = {
 export const docsDense = {
   usage: {
     description:
-      'A dropdown selector for choosing a single value from a list of options. Supports labels, validation, descriptions, and required/optional states. Use it in forms and settings when presenting a moderate number of options.',
+      'A dropdown selector for choosing a single value from a list of options. Supports labels, validation, descriptions, and required/optional states. Use it in forms and settings when presenting a moderate number of options. Keyboard typeahead matches a native select: typing on the focused closed trigger selects the matching option directly, repeated presses cycle through options sharing a first letter, and spaces count as match characters ("new y" reaches "New York"). With the menu open, typing moves the highlight and Enter commits. With hasSearch, typing on the closed trigger opens the popup and seeds the search input.',
     bestPractices: [
       {
         guidance: true,