@astryxdesign/core 0.4.4 → 0.4.5-canary.1fdecb1

package/src/Selector/Selector.tsx

@@ -71,7 +71,9 @@ import {
 } from './utils';
 import {useCombobox, useSelectedItemOffset} from './hooks';
 import {useTypeahead} from '../hooks/useTypeahead';
+import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {SelectorOption} from './SelectorOption';
+import {SelectorRowLayoutContext} from './SelectorRowLayoutContext';
 import {getInputARIA, isImeKeyEvent, mergeProps} from '../utils';
 import {useSize} from '../SizeContext/SizeContext';
 import type {BaseProps} from '../BaseProps';
@@ -100,7 +102,13 @@ const styles = stylex.create({
       default: typeScaleVars['--text-label-size'],
       '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-label-size']})`,
     },
-    lineHeight: typeScaleVars['--text-label-leading'],
+    // A FIXED line box, not the ratio: the trigger's padding is derived from
+    // one line being `--spacing-5` tall, and a ratio makes the line box track
+    // the font — which the coarse-pointer bump above (and any theme that
+    // changes `--font-size-base`) then moves, taking the control off its size
+    // token. The glyphs still grow for touch; only the box they sit in is
+    // pinned. Item's own rows set their line heights and are unaffected.
+    lineHeight: spacingVars['--spacing-5'],
     color: colorVars['--color-text-primary'],
     cursor: 'pointer',
   },
@@ -141,6 +149,43 @@ const styles = stylex.create({
     whiteSpace: 'nowrap',
     textAlign: 'start',
   },
+  // Inside an InputGroup the group's own height is the row, and the trigger
+  // takes it: `height: 100%` from `groupStyles.inGroup` can only govern if the
+  // trigger stops asserting a floor of its own — otherwise a control sized
+  // above its group (`<InputGroup size="md"><Selector size="lg">`) grows the
+  // row it was supposed to sit in. The padding goes with it: the row is
+  // already the size token, and the value box is centred in it.
+  triggerInGroup: {
+    minHeight: 0,
+    paddingBlock: 0,
+  },
+  // Wrapper for `renderValue` output. Takes the free width and clips
+  // horizontally so a long value ellipsizes rather than widening the trigger;
+  // vertically the content sizes the control, which the size styles below
+  // handle.
+  triggerValue: {
+    flexGrow: 1,
+    minWidth: 0,
+    overflow: 'hidden',
+    textAlign: 'start',
+  },
+  // Inside an InputGroup the row height is the group's, so the trigger clamps
+  // its own value box to that row rather than asking the value to fit it: any
+  // node is cut off at the row's edge instead of bleeding through the border
+  // over whatever sits above and below the group. The rows the system draws
+  // itself never reach the cut — the row-layout context folds them onto one
+  // line first (SelectorRowLayoutContext).
+  //
+  // The clamp is a percentage, not the size token, because a group can be a
+  // different size than the control inside it; the row is whatever the group
+  // made it. That needs a definite height to resolve against, which is what
+  // stretching the button provides.
+  triggerButtonInGroup: {
+    alignSelf: 'stretch',
+  },
+  triggerValueInGroup: {
+    maxHeight: '100%',
+  },
   // Only what Icon does not already provide: `size="sm"` gives the 16px box
   // and `color` the token, but the glyph still must not shrink inside the flex
   // trigger.
@@ -327,15 +372,31 @@ const styles = stylex.create({
   },
 });
 
+// The trigger is sized by PADDING, not by a fixed height, so it is the size
+// token plus one text line for each extra line the value uses: 28/32/36 for
+// one line, 48/52/56 for two. The token and a text line are both multiples of
+// 4, so every trigger lands on the 4px rhythm and lines up with the Buttons
+// and inputs beside it. No prop picks the height — the content does, and it
+// can only land on the grid.
+//
+// `--spacing-5` is one line here because `triggerContainer` pins its
+// line-height to exactly that; the two must stay in step, which is why both
+// read the same token rather than one hardcoding 20px.
+const linePad = (token: string) =>
+  `calc((${token} - ${spacingVars['--spacing-5']} - 2 * ${borderVars['--border-width']}) / 2)`;
+
 const sizeStyles = stylex.create({
   sm: {
-    height: sizeVars['--size-element-sm'],
+    minHeight: sizeVars['--size-element-sm'],
+    paddingBlock: linePad(sizeVars['--size-element-sm']),
   },
   md: {
-    height: sizeVars['--size-element-md'],
+    minHeight: sizeVars['--size-element-md'],
+    paddingBlock: linePad(sizeVars['--size-element-md']),
   },
   lg: {
-    height: sizeVars['--size-element-lg'],
+    minHeight: sizeVars['--size-element-lg'],
+    paddingBlock: linePad(sizeVars['--size-element-lg']),
   },
 });
 
@@ -516,7 +577,8 @@ interface SelectorPropsBase<
   labelTooltip?: string;
 
   /**
-   * Icon displayed at the start of the selector trigger.
+   * Icon displayed at the start of the selector trigger. Takes precedence over
+   * the selected option's own `icon`, which the trigger otherwise renders.
    */
   startIcon?: ReactNode | IconType;
 
@@ -526,6 +588,31 @@ interface SelectorPropsBase<
    */
   renderOption?: (option: SelectorOptionData) => ReactNode;
 
+  /**
+   * Custom render function for the selected option inside the closed trigger.
+   * Only called when something is selected; the placeholder is unaffected.
+   *
+   * Passing this does not change the trigger's height — what it draws does. A
+   * one-line value measures exactly the `size` token, so the control still
+   * lines up with the Buttons and inputs beside it; each further line of
+   * content adds one text line. Inside an `InputGroup` the group owns the row
+   * height: the trigger clamps its value box to that row, so a `SelectorOption`
+   * folds onto one line and ellipsizes, and anything taller than the row is cut
+   * off at it rather than bleeding over the rows above and below.
+   *
+   * @example
+   * ```
+   * renderValue={option => (
+   *   <SelectorOption
+   *     icon={option.icon}
+   *     label={option.label}
+   *     description={option.description}
+   *   />
+   * )}
+   * ```
+   */
+  renderValue?: (option: SelectorOptionData) => ReactNode;
+
   /**
    * Which edge of the option row carries the selected mark. `start` reserves a
    * mark column ahead of every label so they stay aligned, the way a native
@@ -613,7 +700,11 @@ export type SelectorProps<T extends SelectorOptionType = SelectorOptionType> =
  */
 function DefaultOption({option}: {option: SelectorOptionData}) {
   return (
-    <SelectorOption icon={option.icon} label={option.label ?? option.value} />
+    <SelectorOption
+      icon={option.icon}
+      label={option.label ?? option.value}
+      description={option.description}
+    />
   );
 }
 
@@ -686,6 +777,7 @@ export function Selector<T extends SelectorOptionType>(
     startIcon,
     htmlName,
     renderOption,
+    renderValue,
     indicatorPosition = 'end',
     hasSearch = false,
     searchPlaceholder: searchPlaceholderFromProps,
@@ -699,6 +791,7 @@ export function Selector<T extends SelectorOptionType>(
     hasClear: hasClearProp,
     ...rest
   } = props as SelectorPropsClearable<T>;
+  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   const placeholder = placeholderFromProps ?? t('@astryx.selector.placeholder');
   const searchPlaceholder =
     searchPlaceholderFromProps ?? t('@astryx.selector.searchPlaceholder');
@@ -1164,12 +1257,27 @@ export function Selector<T extends SelectorOptionType>(
           aria-disabled={item.disabled}
           onClick={() => onItemSelect(item)}
           onMouseEnter={() => onItemMouseEnter(item, flatIndex)}
-          {...stylex.props(
-            styles.item,
-            itemSizeStyles[size],
-            isHighlighted && styles.itemHighlighted,
-            isSelected && styles.itemSelected,
-            item.disabled && styles.itemDisabled,
+          {...mergeProps(
+            // Stable theme target on the option row itself, mirroring
+            // `multi-selector-option`: it carries the row's size and runtime
+            // state so a theme can express "selected option at large" or
+            // restyle a given row density without structural selectors. The
+            // row's padding is split across a base and a per-size override (the
+            // default `md` trims the block axis), so `size` is what a theme
+            // needs to reach it. Named `-option-row` because `selector-option`
+            // is the public SelectorOption content primitive, not this row.
+            themeProps('selector-option-row', {
+              size,
+              selected: isSelected ? 'selected' : null,
+              disabled: item.disabled ? 'disabled' : null,
+            }),
+            stylex.props(
+              styles.item,
+              itemSizeStyles[size],
+              isHighlighted && styles.itemHighlighted,
+              isSelected && styles.itemSelected,
+              item.disabled && styles.itemDisabled,
+            ),
           )}>
           {content}
         </div>
@@ -1279,6 +1387,40 @@ export function Selector<T extends SelectorOptionType>(
   const showStatusTooltip =
     status != null && effectiveStatusVariant === 'tooltip' && !!status.message;
 
+  // Two lines cannot fit inside an InputGroup: the group pins the row height,
+  // and the trigger clamps its value box to one line so nothing bleeds through
+  // its border (styles.triggerValueInGroup). The clamp holds for any node; the
+  // context is what lets the rows the system draws itself reflow into that one
+  // line — label and description side by side — instead of being cut off at
+  // it. Outside a group the caller's own row decides, and the trigger's
+  // padding sizes it to whatever that draws.
+  const rowLayout = inputGroup ? 'inline' : 'stacked';
+
+  // What the closed trigger shows for the current selection: the option's icon
+  // and label. `startIcon` wins over the option's own icon so a caller who
+  // pins a field icon does not get two.
+  const valueContent =
+    selectedItem && renderValue ? (
+      <SelectorRowLayoutContext value={rowLayout}>
+        <span
+          {...stylex.props(
+            styles.triggerValue,
+            inputGroup && styles.triggerValueInGroup,
+          )}>
+          {renderValue(selectedItem)}
+        </span>
+      </SelectorRowLayoutContext>
+    ) : (
+      <>
+        {!startIcon &&
+          selectedItem?.icon != null &&
+          renderIconSlot(selectedItem.icon, {size: 'sm', color: 'secondary'})}
+        <span {...stylex.props(styles.triggerLabel)}>
+          {selectedItem?.label ?? placeholder}
+        </span>
+      </>
+    );
+
   const selectorContent = (
     <>
       <div
@@ -1316,6 +1458,7 @@ export function Selector<T extends SelectorOptionType>(
               !isDisabled &&
               inputStatusHoverShadowStyles[status.type],
             variant !== 'ghost' && inputGroup && groupStyles.inGroup,
+            inputGroup && styles.triggerInGroup,
             xstyle,
           ),
           className,
@@ -1345,7 +1488,7 @@ export function Selector<T extends SelectorOptionType>(
           }
           aria-describedby={ariaDescribedBy}
           aria-labelledby={ariaLabelledBy}
-          aria-required={isRequired ? 'true' : undefined}
+          aria-required={isEffectivelyRequired ? 'true' : undefined}
           aria-invalid={status?.type === 'error' ? 'true' : undefined}
           aria-busy={isBusy || undefined}
           // With a disabledMessage the trigger keeps focusability via
@@ -1355,10 +1498,11 @@ export function Selector<T extends SelectorOptionType>(
           aria-disabled={showsDisabledMessage ? 'true' : undefined}
           onKeyDown={handleTriggerKeyDown}
           tabIndex={isDisabled && !showsDisabledMessage ? -1 : 0}
-          {...stylex.props(styles.trigger)}>
-          <span {...stylex.props(styles.triggerLabel)}>
-            {selectedItem?.label ?? placeholder}
-          </span>
+          {...stylex.props(
+            styles.trigger,
+            inputGroup && styles.triggerButtonInGroup,
+          )}>
+          {valueContent}
         </button>
         {htmlName != null && (
           <input

package/src/Selector/SelectorOption.doc.mjs

@@ -27,6 +27,13 @@ export const docs = {
       type: 'ReactNode',
       description: 'Secondary description text displayed below the label.',
     },
+    {
+      name: 'layout',
+      type: "'stacked' | 'inline'",
+      description:
+        "How the label and description sit together. 'stacked' puts the description on its own line; 'inline' keeps both on one line so the row fits a fixed-height host. Inside a Selector trigger the trigger's padding sizes itself to whichever layout you pick, so both land on the 4px rhythm; an InputGroup pins the row height and forces 'inline'.",
+      default: "'stacked'",
+    },
     {
       name: 'endContent',
       type: 'ReactNode',

package/src/Selector/SelectorOption.tsx

@@ -13,6 +13,7 @@ import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
 import {renderIconSlot, type IconType} from '../Icon';
 import {Item} from '../Item';
+import {useSelectorRowLayout} from './SelectorRowLayoutContext';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
 
@@ -40,6 +41,20 @@ export interface SelectorOptionProps {
    */
   description?: ReactNode;
 
+  /**
+   * How the label and description sit together. `stacked` puts the
+   * description on its own line below the label; `inline` keeps both on one
+   * line, with the description ellipsizing first.
+   *
+   * In a Selector trigger this is the caller's choice and the trigger sizes
+   * itself to it — one line at the size token, two lines exactly one text line
+   * taller. Inside an `InputGroup` the row height is pinned by the group, so
+   * `inline` is forced.
+   *
+   * @default 'stacked'
+   */
+  layout?: 'stacked' | 'inline';
+
   /**
    * Additional content to render after the label/description.
    */
@@ -95,11 +110,16 @@ export function SelectorOption({
   icon,
   label,
   description,
+  layout,
   endContent,
   xstyle,
   className,
   style,
 }: SelectorOptionProps) {
+  // A height-pinned host (the trigger inside an InputGroup) overrides the
+  // caller's choice: the row physically cannot be two lines there.
+  const enforcedLayout = useSelectorRowLayout();
+
   return (
     <Item
       startContent={
@@ -109,6 +129,7 @@ export function SelectorOption({
       }
       label={label}
       description={description}
+      layout={enforcedLayout === 'inline' ? 'inline' : layout}
       endContent={endContent}
       xstyle={[embeddedStyles.root, xstyle]}
       {...mergeProps(themeProps('selector-option'), {className, style})}

package/src/Selector/SelectorRowLayoutContext.ts

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file SelectorRowLayoutContext.ts
+ * @input React createContext/use
+ * @output Exports the row-layout context and useSelectorRowLayout hook
+ * @position Internal to the Selector module; read by SelectorOption
+ *
+ * The trigger inside an InputGroup is height-pinned by the group, so its value
+ * box is clamped to one line and anything taller is cut off at the fold. This
+ * context is how the rows the system draws itself avoid being cut: they reflow
+ * label and description onto that one line instead. The geometry does not
+ * depend on it — a node that ignores this context still cannot grow the row.
+ */
+
+import {createContext, use} from 'react';
+
+export type SelectorRowLayout = 'stacked' | 'inline';
+
+export const SelectorRowLayoutContext =
+  createContext<SelectorRowLayout>('stacked');
+SelectorRowLayoutContext.displayName = 'SelectorRowLayoutContext';
+
+/**
+ * The row layout a host imposes on the options it renders. `stacked` outside
+ * any height-pinned host.
+ */
+export function useSelectorRowLayout(): SelectorRowLayout {
+  return use(SelectorRowLayoutContext);
+}

package/src/Selector/types.ts

@@ -14,7 +14,10 @@ import type {IconType} from '../Icon';
  */
 export type SelectorOptionData = {
   value: string;
+  // Kept a string, not ReactNode: search filtering and type-ahead both
+  // lowercase this to match keystrokes.
   label?: string;
+  description?: ReactNode;
   disabled?: boolean;
   icon?: ReactNode | IconType;
 };
@@ -40,7 +43,4 @@ export type SelectorSection = {
  * Can be a plain string, option data object, divider, or section.
  */
 export type SelectorOptionType =
-  | string
-  | SelectorOptionData
-  | SelectorDivider
-  | SelectorSection;
+  string | SelectorOptionData | SelectorDivider | SelectorSection;

package/src/Slider/Slider.tsx

@@ -189,6 +189,16 @@ const styles = stylex.create({
   trackContainerVertical: {
     width: THUMB_SIZE,
     height: 160,
+    // Same tap target, rotated: the vertical track is the thing you press, and
+    // it is only THUMB_SIZE (20px) wide. `minBlockSize` above floors the
+    // horizontal track's short axis; here the short axis is the inline one
+    // (the block size is already 160px), so floor that instead. The rail,
+    // fill, marks and thumb all center on the inline 50%, so they stay put;
+    // only the invisible tappable area grows. Desktop is unchanged.
+    minInlineSize: {
+      default: null,
+      '@media (pointer: coarse)': '24px',
+    },
     flexDirection: 'column',
     justifyContent: 'center',
     cursor: 'pointer',

package/src/Stack/Stack.doc.mjs

@@ -46,12 +46,36 @@ export const docs = {
           description:
             'Inline (horizontal) padding. Overrides padding on the inline axis when both are set.',
         },
+        {
+          name: 'paddingInlineStart',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Inline-start padding, using the spacing scale (left in LTR, right in RTL). Overrides paddingInline and padding on that edge only.',
+        },
+        {
+          name: 'paddingInlineEnd',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Inline-end padding, using the spacing scale (right in LTR, left in RTL). Overrides paddingInline and padding on that edge only.',
+        },
         {
           name: 'paddingBlock',
           type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Block (vertical) padding. Overrides padding on the block axis when both are set.',
         },
+        {
+          name: 'paddingBlockStart',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Block-start (top) padding, using the spacing scale. Overrides paddingBlock and padding on that edge only.',
+        },
+        {
+          name: 'paddingBlockEnd',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Block-end (bottom) padding, using the spacing scale. Overrides paddingBlock and padding on that edge only.',
+        },
         {
           name: 'isScrollable',
           type: 'boolean',
@@ -150,12 +174,36 @@ export const docs = {
           description:
             'Inline (horizontal) padding, using the spacing scale. Overrides padding on the inline axis when both are set.',
         },
+        {
+          name: 'paddingInlineStart',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Inline-start padding, using the spacing scale (left in LTR, right in RTL). Overrides paddingInline and padding on that edge only.',
+        },
+        {
+          name: 'paddingInlineEnd',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Inline-end padding, using the spacing scale (right in LTR, left in RTL). Overrides paddingInline and padding on that edge only.',
+        },
         {
           name: 'paddingBlock',
           type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Block (vertical) padding, using the spacing scale. Overrides padding on the block axis when both are set.',
         },
+        {
+          name: 'paddingBlockStart',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Block-start (top) padding, using the spacing scale. Overrides paddingBlock and padding on that edge only.',
+        },
+        {
+          name: 'paddingBlockEnd',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Block-end (bottom) padding, using the spacing scale. Overrides paddingBlock and padding on that edge only.',
+        },
         {
           name: 'isScrollable',
           type: 'boolean',
@@ -253,12 +301,36 @@ export const docs = {
           description:
             'Inline (horizontal) padding, using the spacing scale. Overrides padding on the inline axis when both are set.',
         },
+        {
+          name: 'paddingInlineStart',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Inline-start padding, using the spacing scale (left in LTR, right in RTL). Overrides paddingInline and padding on that edge only.',
+        },
+        {
+          name: 'paddingInlineEnd',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Inline-end padding, using the spacing scale (right in LTR, left in RTL). Overrides paddingInline and padding on that edge only.',
+        },
         {
           name: 'paddingBlock',
           type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Block (vertical) padding, using the spacing scale. Overrides padding on the block axis when both are set.',
         },
+        {
+          name: 'paddingBlockStart',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Block-start (top) padding, using the spacing scale. Overrides paddingBlock and padding on that edge only.',
+        },
+        {
+          name: 'paddingBlockEnd',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Block-end (bottom) padding, using the spacing scale. Overrides paddingBlock and padding on that edge only.',
+        },
         {
           name: 'isScrollable',
           type: 'boolean',