@astryxdesign/core 0.4.4 → 0.4.5-canary.0472ec1

package/src/NavItem/navItemStyles.stylex.ts

@@ -72,7 +72,7 @@ export const navItemStyles = stylex.create({
     lineHeight: typeScaleVars['--text-label-leading'],
     textAlign: 'start',
     boxSizing: 'border-box',
-    ':hover': {
+    ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
       '@media (hover: hover)': {
         backgroundColor: colorVars['--color-overlay-hover'],
       },
@@ -98,7 +98,7 @@ export const navItemStyles = stylex.create({
       '@media (forced-colors: active)': 'HighlightText',
     },
     fontWeight: fontWeightVars['--font-weight-medium'],
-    ':hover': {
+    ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
       '@media (hover: hover)': {
         backgroundColor: {
           default: colorVars['--color-neutral'],

package/src/NavMenu/NavHeadingMenuItem.tsx

@@ -43,7 +43,7 @@ const styles = stylex.create({
     backgroundColor: {
       default: 'transparent',
       ':focus': colorVars['--color-overlay-hover'],
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },

package/src/NumberInput/NumberInput.doc.mjs

@@ -219,6 +219,19 @@ export const docs = {
         states: ['disabled', 'readonly'],
       },
     ],
+    derived: [
+      // `padding` in any spelling — the shorthand, `paddingBlock`, or a lone
+      // `paddingBlockStart` — is parsed by the shared container expansion and
+      // emitted as normalized per-side `--astryx-number-input-padding-*`
+      // tokens. The wrapper and the number-stepper column both read those, so
+      // the column stays flush with the field edges under a themed padding.
+      {property: 'padding', expand: 'container'},
+      // Scoped to this component's own subtree: the stepper column's outer
+      // corners follow the field radius, so a themed `number-input`
+      // borderRadius has to reach the var the column reads, not just the
+      // wrapper's own `border-radius`.
+      {property: 'borderRadius', vars: ['--_field-radius']},
+    ],
   },
   usage: {
     description:
@@ -475,6 +488,17 @@ export const docsZh = {
         states: ['disabled', 'readonly'],
       },
     ],
+    derived: [
+      // 任何写法的 `padding`（简写、`paddingBlock`，或单独的
+      // `paddingBlockStart`）都由共享的 container 展开解析，并输出为规范化的
+      // 每侧 `--astryx-number-input-padding-*` 令牌。容器与数字步进器列都读取
+      // 这些令牌，因此在主题化内边距下步进器仍与字段边缘齐平。
+      {property: 'padding', expand: 'container'},
+      // 作用域限于该组件自身的子树：步进器列的外角跟随字段圆角，因此主题化的
+      // `number-input` borderRadius 必须传到步进器读取的变量，而不只是容器
+      // 自身的 `border-radius`。
+      {property: 'borderRadius', vars: ['--_field-radius']},
+    ],
   },
   usage: {
     description:

package/src/NumberInput/NumberInput.test.tsx

@@ -15,6 +15,8 @@ import userEvent from '@testing-library/user-event';
 import {TestIcon} from '../__tests__/TestIcon';
 import {InputGroup} from '../InputGroup';
 import {NumberInput} from './NumberInput';
+import {defineTheme} from '../theme/defineTheme';
+import {generateThemeCSS} from '../theme/generateThemeRules';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 
 // FieldStatus announces status messages through the persistent useAnnounce
@@ -1745,3 +1747,139 @@ describe('NumberInput readonly theme state', () => {
     expect(root).not.toHaveAttribute('data-readonly');
   });
 });
+
+describe('NumberInput stepper padding coupling', () => {
+  function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
+    const {prose, component} = generateThemeCSS(theme);
+    return [prose, component].filter(Boolean).join('\n\n');
+  }
+
+  // The chains the wrapper and the stepper column both read. Spelled out here
+  // rather than imported so the test pins the actual token names a theme sets:
+  // if the chain is renamed or a level is dropped, this fails.
+  const BLOCK_START =
+    'var(--astryx-number-input-padding-block-start, var(--astryx-number-input-padding, var(--spacing-1)))';
+  const BLOCK_END =
+    'var(--astryx-number-input-padding-block-end, var(--astryx-number-input-padding, var(--spacing-1)))';
+
+  // jsdom re-serializes a var() chain without the spaces after its commas.
+  const noSpace = (value: string) => value.replace(/\s+/g, '');
+
+  it('reads its padding from the public number-input padding tokens', () => {
+    const {container} = render(
+      <NumberInput
+        label="Quantity"
+        value={5}
+        onChange={() => {}}
+        hasNumberSteppers
+      />,
+    );
+    const root = container.querySelector('.astryx-number-input') as HTMLElement;
+    // Read as physical properties: StyleX compiles the block-axis logical
+    // properties to `padding-top`/`padding-bottom` (identical in every
+    // horizontal writing mode). Per side, not through the shared field base's
+    // `paddingBlock` shorthand, so each edge can be cancelled on its own.
+    const wrapper = getComputedStyle(root);
+    expect(noSpace(wrapper.paddingTop)).toBe(noSpace(BLOCK_START));
+    expect(noSpace(wrapper.paddingBottom)).toBe(noSpace(BLOCK_END));
+
+    // The column cancels the wrapper's block padding by reading the same
+    // tokens — not a hardcoded default — so it stays flush when a theme
+    // changes the padding. The column is the stepper buttons' direct parent.
+    const steppers = container.querySelector(
+      'button[aria-label="Increment Quantity"]',
+    )?.parentElement as HTMLElement;
+    const column = getComputedStyle(steppers);
+    expect(noSpace(column.marginTop)).toBe(
+      noSpace(`calc(-1 * ${BLOCK_START})`),
+    );
+    expect(noSpace(column.marginBottom)).toBe(
+      noSpace(`calc(-1 * ${BLOCK_END})`),
+    );
+  });
+
+  // jsdom cannot resolve the @layer cascade, so the generated CSS is the
+  // proof. Each case is a spelling of the SAME declaration: the column has to
+  // track all of them, not just the one the component happened to name.
+  describe('a themed padding reaches the steppers in every spelling', () => {
+    it.each([
+      [
+        'the padding shorthand, two values',
+        {padding: '14px 20px'},
+        [
+          '--astryx-number-input-padding-block-start: 14px',
+          '--astryx-number-input-padding-block-end: 14px',
+          '--astryx-number-input-padding-inline: 20px',
+        ],
+      ],
+      [
+        'the padding shorthand, one value',
+        {padding: '10px'},
+        ['--astryx-number-input-padding: 10px'],
+      ],
+      [
+        'the block/inline longhands',
+        {paddingBlock: '10px', paddingInline: '20px'},
+        [
+          '--astryx-number-input-padding-block-start: 10px',
+          '--astryx-number-input-padding-block-end: 10px',
+          '--astryx-number-input-padding-inline: 20px',
+        ],
+      ],
+      [
+        'a single edge longhand',
+        {paddingBlockStart: '12px'},
+        ['--astryx-number-input-padding-block-start: 12px'],
+      ],
+      [
+        // A single var carrying "4px 12px" would make the column's
+        // calc(-1 * …) invalid and drop the margin outright; the expansion
+        // splits the two values into their own edges instead.
+        'an asymmetric block padding',
+        {paddingBlock: '4px 12px'},
+        [
+          '--astryx-number-input-padding-block-start: 4px',
+          '--astryx-number-input-padding-block-end: 12px',
+        ],
+      ],
+      [
+        // `paddingTop` is `paddingBlockStart` in every horizontal writing
+        // mode, so it normalizes onto the same tokens. The physical inline
+        // pair is deliberately not mapped — see generateThemeRules.
+        'the physical block longhands',
+        {paddingTop: '14px', paddingBottom: '6px'},
+        [
+          '--astryx-number-input-padding-block-start: 14px',
+          '--astryx-number-input-padding-block-end: 6px',
+        ],
+      ],
+    ])('%s', (_label, base, expected) => {
+      const theme = defineTheme({
+        name: 'number-input-padding-spelling-test',
+        components: {'number-input': {base}},
+      });
+      const css = generateThemeTestCSS(theme);
+      for (const declaration of expected) {
+        expect(css).toContain(declaration);
+      }
+      // The expansion consumes the padding: a raw declaration left on the
+      // wrapper is padding the column cannot see, which is the gap itself.
+      expect(css).not.toMatch(
+        /^\s*padding(-block|-inline|-top|-bottom)?(-start|-end)?:/m,
+      );
+    });
+  });
+
+  it('carries a themed border radius to the stepper column corners', () => {
+    // The column's outer corners read --_field-radius. Emitting only
+    // `border-radius` on the wrapper rounds the field and leaves the steppers
+    // at the default radius, which is visible wherever the two differ.
+    const theme = defineTheme({
+      name: 'number-input-radius-test',
+      components: {'number-input': {base: {borderRadius: '2px'}}},
+    });
+    const css = generateThemeTestCSS(theme);
+    expect(css).toContain('--_field-radius: 2px');
+    expect(css).toContain('border-radius: 2px');
+  });
+});

package/src/NumberInput/NumberInput.tsx

@@ -31,7 +31,6 @@ import {
   colorVars,
   sizeVars,
   spacingVars,
-  radiusVars,
   typographyVars,
   typeScaleVars,
   borderVars,
@@ -53,11 +52,44 @@ import {getInputARIA} from '../utils';
 import {useSize} from '../SizeContext/SizeContext';
 import {useInputContainer} from '../hooks/useInputContainer';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
+import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {useInputGroup} from '../InputGroup/InputGroupContext';
 
+// Public padding tokens for the `number-input` theme target. A theme writes an
+// ordinary `padding` (in ANY spelling — the shorthand, `paddingBlock`, or a
+// single `paddingBlockStart`) and the pipeline's `container` expansion parses
+// it and emits these normalized per-side tokens; the wrapper and the stepper
+// column both read them, so the column tracks whatever the theme sets instead
+// of assuming the default. Routing through the shared expansion rather than a
+// hand-rolled property→var mapping is what makes every spelling work: a
+// mapping only fires for the exact property name it names.
+//
+// Read order per level: `var(--astryx-…, <next level>)`, terminating at the
+// shared field defaults (NOT the container default --spacing-4, which is a
+// layout metric and would resize every themed field). Built as chained const
+// strings — no function calls — so StyleX can statically analyze them; same
+// shape as the card/section/dialog chains in Layout/container.stylex.ts.
+const FIELD_PAD_BLOCK = spacingVars['--spacing-1'];
+const FIELD_PAD_INLINE = spacingVars['--spacing-2'];
+const padBlockAll = `var(--astryx-number-input-padding, ${FIELD_PAD_BLOCK})`;
+const padInlineAll = `var(--astryx-number-input-padding, ${FIELD_PAD_INLINE})`;
+const padInline = `var(--astryx-number-input-padding-inline, ${padInlineAll})`;
+const padInlineStart = `var(--astryx-number-input-padding-inline-start, ${padInline})`;
+const padInlineEnd = `var(--astryx-number-input-padding-inline-end, ${padInline})`;
+const padBlockStart = `var(--astryx-number-input-padding-block-start, ${padBlockAll})`;
+const padBlockEnd = `var(--astryx-number-input-padding-block-end, ${padBlockAll})`;
+
 const styles = stylex.create({
   wrapper: {
     zIndex: 1,
+    // Applied per side rather than through the shared field base's
+    // `paddingBlock`/`paddingInline` shorthands, because the stepper column
+    // has to cancel the block padding edge by edge — an asymmetric
+    // `paddingBlock: 4px 12px` needs two different negative margins.
+    paddingBlockStart: padBlockStart,
+    paddingBlockEnd: padBlockEnd,
+    paddingInlineStart: padInlineStart,
+    paddingInlineEnd: padInlineEnd,
   },
   wrapperWithNumberSteppers: {
     paddingInlineEnd: 0,
@@ -101,13 +133,18 @@ const styles = stylex.create({
     flexDirection: 'column',
     flexShrink: 0,
     width: spacingVars['--spacing-4'],
-    marginBlock: `calc(-1 * ${spacingVars['--spacing-1']})`,
+    // Cancel the wrapper's block padding edge by edge so the column spans the
+    // field's full height. Reading the same tokens the wrapper applies is what
+    // keeps it flush under a themed padding — including an asymmetric one,
+    // where a single `marginBlock` would be wrong at one end.
+    marginBlockStart: `calc(-1 * ${padBlockStart})`,
+    marginBlockEnd: `calc(-1 * ${padBlockEnd})`,
     borderInlineStartWidth: borderVars['--border-width'],
     borderInlineStartStyle: 'solid',
     borderInlineStartColor: colorVars['--color-border-emphasized'],
     overflow: 'hidden',
-    borderStartEndRadius: radiusVars['--radius-element'],
-    borderEndEndRadius: radiusVars['--radius-element'],
+    borderStartEndRadius: 'var(--_field-radius)',
+    borderEndEndRadius: 'var(--_field-radius)',
   },
   numberStepperButton: {
     boxSizing: 'border-box',
@@ -124,7 +161,7 @@ const styles = stylex.create({
     backgroundColor: colorVars['--color-background-surface'],
     backgroundImage: {
       default: null,
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
       },
       ':active': `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,
@@ -559,6 +596,7 @@ export function NumberInput({
   ...rest
 }: NumberInputProps) {
   const t = useTranslator();
+  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   const size = useSize(sizeProp, 'md');
   const id = useId();
   const inputLabelID = useId();
@@ -927,7 +965,7 @@ export function NumberInput({
           value == null || !formatValue ? undefined : formattedValue
         }
         aria-describedby={ariaDescribedBy}
-        aria-required={isRequired === true ? 'true' : undefined}
+        aria-required={isEffectivelyRequired ? 'true' : undefined}
         aria-invalid={
           status?.type === 'error' || !isInputValid ? 'true' : undefined
         }

package/src/Outline/Outline.doc.mjs

@@ -166,6 +166,8 @@ import {Outline, useOutlineFromMarkdown} from '@astryxdesign/core/Outline';
 
 function MarkdownOutline({markdown}) {
   // Derives {id, label, level} items from headings in the source.
+  // The Markdown component renders the same generated ids on its
+  // headings, so outline links scroll without any extra wiring.
   const items = useOutlineFromMarkdown(markdown);
   return <Outline items={items} />;
 }

package/src/Outline/Outline.tsx

@@ -203,7 +203,7 @@ const styles = stylex.create({
     width: '100%',
     fontSize: typeScaleVars['--text-body-size'],
     lineHeight: typeScaleVars['--text-body-leading'],
-    ':hover': {
+    ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
       '@media (hover: hover)': {
         backgroundColor: colorVars['--color-overlay-hover'],
         color: colorVars['--color-text-primary'],

package/src/Outline/parseOutlineFromMarkdown.ts

@@ -2,7 +2,8 @@
 
 /**
  * @file parseOutlineFromMarkdown.ts
- * @input Uses Markdown parser internals and OutlineItem type
+ * @input Uses Markdown parser internals (parseMarkdown + heading slug
+ *   helpers) and OutlineItem type
  * @output Exports parseOutlineFromMarkdown for extracting heading outlines from Markdown
  * @position Pure utility; consumed by useOutlineFromMarkdown and public exports
  *
@@ -11,52 +12,21 @@
  * - /packages/core/src/Outline/index.ts
  */
 
-import {parseMarkdown, type InlineNode} from '../Markdown/parser';
+import {
+  parseMarkdown,
+  inlineText,
+  slugify,
+  uniqueSlug,
+} from '../Markdown/parser';
 import type {OutlineItem} from './types';
 
-function inlineText(nodes: InlineNode[]): string {
-  return nodes
-    .map(node => {
-      switch (node.type) {
-        case 'text':
-        case 'code':
-          return node.content;
-        case 'bold':
-        case 'italic':
-        case 'strikethrough':
-        case 'link':
-          return inlineText(node.children);
-        case 'image':
-          return node.alt;
-        case 'citation':
-        case 'break':
-          return '';
-      }
-    })
-    .join('');
-}
-
-function slugify(value: string): string {
-  return value
-    .trim()
-    .toLowerCase()
-    .replace(/['"]/g, '')
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '');
-}
-
-function uniqueSlug(baseSlug: string, counts: Map<string, number>): string {
-  const fallbackSlug = baseSlug || 'section';
-  const count = counts.get(fallbackSlug) ?? 0;
-  counts.set(fallbackSlug, count + 1);
-  return count === 0 ? fallbackSlug : `${fallbackSlug}-${count}`;
-}
-
 /**
  * Extract heading items from a Markdown string.
  *
  * Uses Markdown's parser so fenced code blocks, tables, lists, and inline
  * formatting are interpreted consistently with rendered Markdown output.
+ * Ids come from the parser's shared slug helpers, so they always match the
+ * `id` attributes Markdown renders on its headings.
  */
 export function parseOutlineFromMarkdown(markdown: string): OutlineItem[] {
   const counts = new Map<string, number>();

package/src/PowerSearch/PowerSearch.tsx

@@ -50,12 +50,17 @@ import {mergeRefs} from '../utils';
 import {useSize} from '../SizeContext/SizeContext';
 import {useInternalConfig} from './useInternalConfig';
 import {usePowerSearchSource} from './usePowerSearchSource';
-import {formatFilterValue} from './formatFilterValue';
+import {
+  formatFilterValue,
+  formatDateAbsoluteCompact,
+} from './formatFilterValue';
 import {PowerSearchEditPopover} from './PowerSearchEditPopover';
 import {resolveOperatorLabel} from './resolveOperatorLabel';
 import {themeProps} from '../utils/themeProps';
 import {truncateCharacters} from '../utils/characters';
 import {useTranslator} from '../i18n';
+import {useLocale} from '../i18n/useLocale';
+import type {Locale} from '../i18n/types';
 import type {
   PowerSearchConfig,
   PowerSearchFilter,
@@ -131,10 +136,12 @@ function PowerSearchTokenValue({
   operatorValue,
   filterValue,
   maxLength,
+  locale,
 }: {
   operatorValue: OperatorValue;
   filterValue: FilterValue;
   maxLength: number;
+  locale: Locale;
 }) {
   switch (filterValue.type) {
     case 'empty':
@@ -276,12 +283,10 @@ function PowerSearchTokenValue({
       );
 
     case 'date_absolute': {
-      const date = new Date(filterValue.unixSeconds * 1000);
-      const formatted = new Intl.DateTimeFormat(undefined, {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      }).format(date);
+      const formatted = formatDateAbsoluteCompact(
+        filterValue.unixSeconds,
+        locale,
+      );
       return (
         <span {...stylex.props(tokenValueStyles.value)}>
           {truncateString(formatted, maxLength)}
@@ -556,6 +561,7 @@ export function PowerSearch({
   const config = useInternalConfig(configProp);
   const searchSource = usePowerSearchSource(config);
   const t = useTranslator();
+  const locale = useLocale();
   const label = labelFromProps ?? t('@astryx.powersearch.label');
   const placeholder =
     placeholderFromProps ?? t('@astryx.powersearch.placeholder');
@@ -625,6 +631,7 @@ export function PowerSearch({
             filter.value,
             maxTokenLength,
             t,
+            locale,
             timezoneID,
           )
         : '';
@@ -644,7 +651,7 @@ export function PowerSearch({
         },
       };
     });
-  }, [filters, config, maxTokenLength, timezoneID, t]);
+  }, [filters, config, maxTokenLength, timezoneID, t, locale]);
 
   // Handle tokenizer onChange (field selected from typeahead)
   const handleTokenizerChange = useCallback(
@@ -820,6 +827,7 @@ export function PowerSearch({
             operatorValue={operator.value}
             filterValue={filter.value}
             maxLength={adjustedMaxLength}
+            locale={locale}
           />
         ) : undefined;
 
@@ -858,6 +866,7 @@ export function PowerSearch({
       config,
       configProp,
       maxTokenLength,
+      locale,
       size,
       isReadOnly,
       isDisabled,

package/src/PowerSearch/PowerSearchToken.tsx

@@ -13,6 +13,7 @@ import React from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Token} from '../Token';
 import {useTranslator} from '../i18n';
+import {useLocale} from '../i18n/useLocale';
 import {fontWeightVars} from '../theme/tokens.stylex';
 import {formatFilterValue} from './formatFilterValue';
 import {resolveOperatorLabel} from './resolveOperatorLabel';
@@ -44,6 +45,7 @@ export function PowerSearchToken({
 }: PowerSearchTokenProps) {
   const config = useInternalConfig(configProp);
   const t = useTranslator();
+  const locale = useLocale();
 
   const fieldLabel = field.label;
   const resolvedOperatorLabel = resolveOperatorLabel(operator, t);
@@ -63,6 +65,7 @@ export function PowerSearchToken({
     filter.value,
     adjustedMaxLength,
     t,
+    locale,
   );
 
   const valueContent = valueStr ? (

package/src/PowerSearch/formatFilterValue.test.ts

@@ -31,7 +31,15 @@ const fmt = (
   maxLength = 20,
   timezoneID?: string,
 ): string =>
-  formatFilterValue({} as never, operator, value, maxLength, t, timezoneID);
+  formatFilterValue(
+    {} as never,
+    operator,
+    value,
+    maxLength,
+    t,
+    'en-US',
+    timezoneID,
+  );
 
 const ELLIPSIS = '…';
 
@@ -87,8 +95,20 @@ describe('formatFilterValue', () => {
   });
 
   describe('integer / float', () => {
+    it('formats the same number differently when the locale changes', () => {
+      const args = [
+        {} as never,
+        {type: 'float'} as OperatorValue,
+        {type: 'float', value: 1234.5} as FilterValue,
+        40,
+        t,
+      ] as const;
+      expect(formatFilterValue(...args, 'en-US')).toBe('1,234.5');
+      expect(formatFilterValue(...args, 'de-DE')).toBe('1.234,5');
+    });
+
     it('formats an integer with locale grouping', () => {
-      const expected = new Intl.NumberFormat().format(1234567);
+      const expected = new Intl.NumberFormat('en-US').format(1234567);
       expect(
         fmt({type: 'integer'}, {type: 'integer', value: 1234567}, 40),
       ).toBe(expected);

package/src/PowerSearch/formatFilterValue.ts

@@ -12,7 +12,7 @@
 
 import type {OperatorValue, FilterValue, EnumItem} from './types';
 import type {InternalConfig} from './useInternalConfig';
-import type {TranslatorFn} from '../i18n';
+import type {Locale, TranslatorFn} from '../i18n';
 import {truncateCharacters} from '../utils/characters';
 
 function truncate(str: string, maxLength: number): string {
@@ -27,12 +27,16 @@ function formatEnumLabel(
   return item?.label ?? value;
 }
 
-function formatNumber(value: number, units?: string): string {
-  const formatted = new Intl.NumberFormat().format(value);
+function formatNumber(value: number, locale: Locale, units?: string): string {
+  const formatted = new Intl.NumberFormat(locale).format(value);
   return units ? `${formatted} ${units}` : formatted;
 }
 
-function formatDateAbsolute(unixSeconds: number, timezoneID?: string): string {
+export function formatDateAbsolute(
+  unixSeconds: number,
+  locale: Locale,
+  timezoneID?: string,
+): string {
   const options: Intl.DateTimeFormatOptions = {
     year: 'numeric',
     month: 'short',
@@ -41,7 +45,25 @@ function formatDateAbsolute(unixSeconds: number, timezoneID?: string): string {
     minute: '2-digit',
     ...(timezoneID ? {timeZone: timezoneID} : {}),
   };
-  return new Intl.DateTimeFormat(undefined, options).format(unixSeconds * 1000);
+  return new Intl.DateTimeFormat(locale, options).format(unixSeconds * 1000);
+}
+
+/**
+ * Compact date-only rendering (no time-of-day) for the token pill's inline
+ * value display, which has less room than the editor's full summary. Kept
+ * separate from {@link formatDateAbsolute} rather than reusing it with
+ * different options threaded through a param, since the two callers want
+ * genuinely different shapes, not a parameterization of the same one.
+ */
+export function formatDateAbsoluteCompact(
+  unixSeconds: number,
+  locale: Locale,
+): string {
+  return new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  }).format(unixSeconds * 1000);
 }
 
 function formatRelativeDate(value: string): string {
@@ -62,6 +84,7 @@ export function formatFilterValue(
   filterValue: FilterValue,
   maxLength: number,
   t: TranslatorFn,
+  locale: Locale,
   timezoneID?: string,
 ): string {
   switch (filterValue.type) {
@@ -74,12 +97,14 @@ export function formatFilterValue(
     case 'integer':
       return formatNumber(
         filterValue.value,
+        locale,
         operatorValue.type === 'integer' ? operatorValue.units : undefined,
       );
 
     case 'float':
       return formatNumber(
         filterValue.value,
+        locale,
         operatorValue.type === 'float' ? operatorValue.units : undefined,
       );
 
@@ -157,7 +182,7 @@ export function formatFilterValue(
 
     case 'date_absolute':
       return truncate(
-        formatDateAbsolute(filterValue.unixSeconds, timezoneID),
+        formatDateAbsolute(filterValue.unixSeconds, locale, timezoneID),
         maxLength,
       );
 

package/src/RadioList/RadioList.doc.mjs

@@ -11,7 +11,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-radio-list', visualProps: ['orientation', 'size']},
-      {className: 'astryx-radio-list-item'},
+      {className: 'astryx-radio-list-item', visualProps: ['size'], states: ['selected', 'disabled']},
       {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'},