themelia-react-ui 2.0.0 → 2.0.1

package/docs/consumer-skill/references/review.md

@@ -1,7 +1,7 @@
 # Composition review and checks
 
-Use after selecting owners, or when auditing a screen. Read only the relevant
-workflow/declarations; this is a review aid, not a new design system.
+Use after selecting owners, when auditing a screen, and before handing back UI
+work. Read only the relevant workflow/declarations; this is not a new design system.
 
 ## Review the task and hierarchy
 
@@ -22,7 +22,25 @@ These criteria allow different product layouts. Do not impose a universal card
 count, row-line limit or one-column form rule. Emphasis is the exception: keep
 one solid primary command per page or surface, so the next action stays obvious.
 
-## Optional source checker
+## Done means
+
+UI work is done when the source checker below reports no errors on the files you
+changed, and the app's typecheck, lint and tests then pass. Run the checker, fix
+the owner or prop each finding names, and run it again; after three rounds, stop
+and report what remains. Warnings are review findings: fix each one or keep it
+with a reason. This is the agent's completion condition, not the build's; app CI
+may stay non-blocking on warnings. The [project instructions
+block](agents-md.md) states the same condition in the app's `AGENTS.md`.
+
+Hand back five lines, so a skipped check is visible:
+
+1. Owners used for the route, its commands and each data region.
+2. Checker: run or not run, with its error and warning counts.
+3. Typecheck, lint and tests: each run or not run, and why.
+4. Kept warnings, each with file:line and its reason.
+5. States covered or missing: loading, empty, error, disabled and validation.
+
+## Source checker
 
 The package ships a read-only script, not an npm bin/global CLI. It needs the
 consumer's TypeScript development dependency and Node matching the package engine:
@@ -41,7 +59,7 @@ Errors cover unknown package entrypoints/symbols and statically detected overrid
 of protected Card/popup insets, Card badges in headerAction/headerStart rather
 than titleSuffix, control geometry/typography, fixed DisplayLabel/Badge
 roles, cross-role shell/inner radius replacements, display-copy margins, or
-attenuated shared focus rings on imported controls. Intentional nested bodies,
+redrawn focus indicators (another ring width, offset or halo strength) on imported controls. Intentional nested bodies,
 circular owners and joined-edge corner resets retain their roles. Import ownership
 follows lexical bindings, preserving locally shadowed application components. Imports of
 symbols the public index marks deprecated, nested framed subjects and repeated
@@ -61,7 +79,9 @@ semantic surface/foreground pair or a status tone. A Card title icon and an icon
 more than one MetadataList fact warn as decoration; keep a glyph only when it
 encodes state or a brand. Native `<button>` and
 `<h1>`–`<h6>` elements warn in favour of Button/TextButton and Heading, which
-own focus, loading and disabled states or margins and the heading scale.
+own focus, loading and disabled states or margins and the heading scale. A
+native button passed as a package owner's `render`, such as an Item row
+rendered as a button, is that owner's root and does not warn.
 Verified Card-owning Metric/card-grid, UsageCard and TaskCard compositions also
 participate in nested-surface and peer-gap review. Metric without its card variant,
 compact MetricGrid, flat TaskCard, ChartCard and Receipt do not establish a frame.

package/docs/consumer-skill/references/theming.md

@@ -4,7 +4,7 @@ The [design contract](design-contract.md) records which geometry changes togethe
 and which variant choices remain independent. Retheme shared responsibilities;
 avoid overriding individual components to imitate another density or inset.
 
-Use shadcn semantic surfaces/foregrounds: background, card, popover, primary, secondary, muted, accent, destructive, border, input, ring, charts and sidebar. Central success/info/warning foreground pairs express states; never overload primary or statuses as decoration. `--input` is the control boundary and keeps 3:1 against every surface (WCAG 1.4.11); `--border` is for dividers and surface edges. Keep that split when rebranding.
+Use shadcn semantic surfaces/foregrounds: background, card, popover, primary, secondary, muted, accent, destructive, border, input, ring, charts and sidebar. Central success/info/warning foreground pairs express states; never overload primary or statuses as decoration. `--input` is the one control boundary: fields, select and date triggers, checkboxes, radios, switch tracks and outline buttons all draw it, so adjoining controls read as one family. It is deliberately soft and translucent, reading the same on every surface; focus and invalid edges carry the 3:1 contrast. `--border` is for dividers and surface edges. Keep that split when rebranding.
 
 tokens.json distinguishes 23 structural roots, advanced typography/status settings, and derived utility spellings. A utility is not another public variable. Keep overrides in one stylesheet at root or ThemeScope, without copying computed CSS into JavaScript.
 
@@ -77,9 +77,13 @@ Apps using semantic utilities in their own JSX process themelia-react-ui/theme.c
 
 The package class merger recognizes token overrides only for advertised utilities and exact class spellings emitted by the library stylesheet, including their negative, important and responsive forms. A valid Tailwind alias such as `m-space-2xl` can still be absent from that stylesheet. Unshipped aliases preserve existing fallback classes; they do not receive package override semantics merely because an app's separate Tailwind build can generate them. Use the app's own merge configuration for additional app-compiled aliases.
 
-`ring` and `sidebar-ring` are focus roles tested at full strength. Preserve that
-strength and verify at least 3:1 against adjacent surfaces when overriding the
-theme; adding opacity can invalidate contrast even when the root color passes.
+`ring` and `sidebar-ring` are the focus roles. Every focused element draws one
+indicator: a 1px edge in the role at full strength (the control's own border, an
+inset edge on borderless rows, or an outline just outside link text) inside a
+soft 3px halo of the role at 50%. The edge carries the tested 3:1 contrast
+against adjacent surfaces, so keep the root color at that strength when
+overriding the theme; the halo makes focus stand out without reading as a
+heavier border.
 
 ## Extend without drift
 

package/docs/consumer-skill/references/tokens.json

@@ -1,6 +1,6 @@
 {
   "package": "themelia-react-ui",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "structural": [
     {
       "name": "--space-scale",

package/docs/consumer-skill/references/workflows.md

@@ -28,9 +28,23 @@ Reset/removal aborts pending uploads; the app owns transport and persistence.
 
 ## Detail and framing
 
-[AccountDetail](../examples/detail.tsx) exports `AccountDetail`, `AccountDetailProps` and `AccountDetailRecord`. Supply `account`, `onEdit(id)` and `onBack()`. Card owns the frame/header/body/footer; Name, Email, Date, Money and Value own formatting and missing-value fallbacks. `balanceMinor` uses `Money unit="minor"`; currency and date values come from the app.
-
-No optional peers are needed. The app supplies the loaded record and owns navigation, locale/provider defaults and permissions. Verify missing email/date/balance, a real minor-unit amount, Edit/Back callbacks, and the one-column mobile/two-column desktop composition in light/dark themes.
+[The detail recipe](../examples/detail.tsx) exports two owners.
+`AccountDetailPage` is the record route: Page owns the title, one status badge,
+the commands and the section tabs. `primaryAction` is Edit account,
+`secondaryActions` holds Send statement and a `destructive` Delete account that
+opens ConfirmDialog, and `header.tabs` carries Overview, Invoices with its count
+badge, and Activity. The header renders `[secondary…] [primary] [⋯]`; destructive
+and overflow commands live in the More actions menu. `AccountDetail` is the same
+facts as one framed subject for a drawer or dashboard, with Edit as its one quick
+`headerAction`. Name, Email, Date, Money and Value own formatting and
+missing-value fallbacks; `balanceMinor` uses `Money unit="minor"`.
+
+No optional peers are needed. The app supplies the loaded record, the section
+content and the delete transport, and owns navigation, locale/provider defaults
+and permissions (`visible: false` hides a command). Verify missing
+email/date/balance, a rejected delete that keeps the confirmation open, tab
+selection with keyboard arrows, the narrow layout where secondary commands
+collapse into the menu, and light/dark themes.
 
 ## Scoped directory
 
@@ -80,13 +94,15 @@ definitions; the app then chooses appropriate destination focus.
 ## Single resource page
 
 Use `Page` from `themelia-react-ui/layout/page` for the record route's identity,
-back navigation, content bounds and commands. Pass the record's main command as
-`header.primaryAction` and supporting commands as `header.secondaryActions`;
-`PageHeader` and `PageActions` remain for custom shells and toolbars.
-The [layout recipe](../examples/app-layout.tsx) demonstrates that route boundary;
-the [detail recipe](../examples/detail.tsx) demonstrates an independently framed
-record subject with MetadataList and value primitives. Decide whether the record
-needs that independent Card before nesting it under Page. Avoid repeating the
+back navigation, content bounds, commands and section tabs. Pass the record's
+main command as `header.primaryAction`, supporting commands as
+`header.secondaryActions` and sections as `header.tabs`; one status badge goes in
+`header.titleBadges`. `PageHeader` serves a custom shell; `PageActions` is
+deprecated. The [layout recipe](../examples/app-layout.tsx) demonstrates that
+route boundary; the [detail recipe](../examples/detail.tsx) demonstrates the
+record route and an independently framed subject with MetadataList and value
+primitives. Decide whether the record needs that independent Card before nesting
+it under Page. Avoid repeating the
 route heading just to frame the same facts. Page owns gutters; PageViewport owns
 scrolling only. App navigation, record loading/missing/error/retry, permissions,
 edit and delete callbacks remain application responsibilities.
@@ -94,6 +110,9 @@ edit and delete callbacks remain application responsibilities.
 Use `WorkspaceLayout` from `themelia-react-ui/layout/workspace` when independently composed record header,
 sidebar/main/rail regions are needed; inspect `features/resource` for complete
 resource coordination. A single record does not automatically need either.
+Their headers (`WorkspaceRecordHeader`, `ResourceHeader` and the resource shells)
+take the same `primaryAction` and `secondaryActions` as Page; keep their
+`actions` for non-command controls.
 Read [layout composition](composition.md#application-layouts) for boundary and
 parent-width behavior, then the exact selected declaration for its current props.
 

package/docs/consumer-skill/scripts/composition-policy.mjs

@@ -1,4 +1,4 @@
-import { surfaceParts, surfaceForwarders, paddingClass, paddingProperty, utility, attenuatedFocusRing, sharedCornerParts, displayNames, nativeDisplayNames, marginProperty, radiusProperty, replacesSharedRadius, cornerRole, addsCopyMargin } from './surface-policy.mjs';
+import { surfaceParts, surfaceForwarders, paddingClass, paddingProperty, utility, focusRingDrift, fadedText, sharedCornerParts, displayNames, nativeDisplayNames, marginProperty, radiusProperty, replacesSharedRadius, cornerRole, addsCopyMargin } from './surface-policy.mjs';
 
 const controlNames = /^(?:Base)?(?:Button|ButtonLink|IconButton)$|^(Input|InputGroup|InputGroupInput|InputGroupTextarea|Textarea|PasswordInput|Select|SelectTrigger|ComboboxInput|ComboboxInputTrigger|ComboboxTrigger)$/;
 const controlFamilies = new Set(['buttons', 'text-inputs', 'choice-inputs', 'combobox']);
@@ -200,15 +200,16 @@ export function analyzeComposition(text, { filename, index, ts }) {
     if (ts.isJsxExpression(node)) return slotBadge(node.expression);
     return false;
   };
-  // Buttons placed directly, conditionally or inside a passive row of a page
-  // header's actions region. Unknown local components are custom controls.
+  // Buttons, command rows and command menus placed directly, conditionally or
+  // inside a passive row of a page header's actions region. Unknown local
+  // components are custom controls.
   const commandButtons = expression => {
     const node = resolve(expression);
     if (!node) return false;
     if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) {
       const opening = ts.isJsxElement(node) ? node.openingElement : node;
       const owner = ownerFor(opening.tagName);
-      if (isOwner(owner, 'base/buttons', ['Button', 'TextButton', 'BaseButton', 'BaseButtonLink']) || isOwner(owner, 'base/forms', ['SubmitStateButton']) || opening.tagName.getText(source) === 'button') return true;
+      if (isOwner(owner, 'base/buttons', ['Button', 'TextButton', 'BaseButton', 'BaseButtonLink']) || isOwner(owner, 'base/forms', ['SubmitStateButton']) || isOwner(owner, 'base/action-menu', ['ActionMenu', 'ActionButtons']) || isOwner(owner, 'layout/page', ['PageActions']) || isOwner(owner, 'layout', ['PageActions']) || opening.tagName.getText(source) === 'button') return true;
       if (!/^(div|span)$/.test(opening.tagName.getText(source)) && !isOwner(owner, 'base/structure', ['Stack', 'Grid'])) return false;
       return ts.isJsxElement(node) && node.children.some(commandButtons);
     }
@@ -314,12 +315,26 @@ export function analyzeComposition(text, { filename, index, ts }) {
     if (ts.isJsxSelfClosingElement(node)) inspect(node, parents);
     ts.forEachChild(node, child => visit(child, parents));
   }
+  // A native element passed as a package owner's `render` is that owner's root, such as
+  // an Item row rendered as a button; the owner keeps its focus, hover and row anatomy.
+  const renderRoots = new Set();
+  const collectRenderRoots = expression => {
+    if (!expression) return;
+    if (ts.isJsxSelfClosingElement(expression)) renderRoots.add(expression);
+    else if (ts.isJsxElement(expression)) renderRoots.add(expression.openingElement);
+    else if (ts.isParenthesizedExpression(expression) || ts.isAsExpression(expression)) collectRenderRoots(expression.expression);
+    else if (ts.isConditionalExpression(expression)) { collectRenderRoots(expression.whenTrue); collectRenderRoots(expression.whenFalse); }
+    else if (ts.isBinaryExpression(expression)) collectRenderRoots(expression.right);
+    else if (ts.isArrowFunction(expression) && !ts.isBlock(expression.body)) collectRenderRoots(expression.body);
+  };
   function inspect(node, parents) {
     const owner = ownerFor(node.tagName);
+    const render = owner && node.attributes.properties.find(attribute => ts.isJsxAttribute(attribute) && attribute.name.getText(source) === 'render');
+    if (render?.initializer) collectRenderRoots(ts.isJsxExpression(render.initializer) ? render.initializer.expression : render.initializer);
     if (classTokens(node).some(token => rawPaletteClass.test(token))) add(node, 'raw-palette-color', 'warning', 'Raw palette colors bypass the theme and dark mode. Use semantic classes such as bg-primary, bg-muted, text-muted-foreground, border-border or a status tone (text-destructive, bg-success/10).');
     if (!owner) {
       const tag = node.tagName.getText(source);
-      if (tag === 'button') add(node, 'raw-button', 'warning', 'Use Button or TextButton from themelia-react-ui/base/buttons: they own size, focus ring, loading and disabled states.');
+      if (tag === 'button' && !renderRoots.has(node)) add(node, 'raw-button', 'warning', 'Use Button or TextButton from themelia-react-ui/base/buttons: they own size, focus ring, loading and disabled states.');
       if (/^h[1-6]$/.test(tag)) add(node, 'raw-heading', 'warning', 'Use Heading from themelia-react-ui/typography (tag for the level, size for emphasis): it resets native margins and keeps the shared heading scale.');
       const nativeProps = new Map(attributes(node));
       const modalRole = /^(?:dialog|alertdialog)$/.test(literal(nativeProps.get('role')) ?? '') || nativeProps.has('aria-modal');
@@ -354,12 +369,15 @@ export function analyzeComposition(text, { filename, index, ts }) {
     const badge = family === 'badge' && owner.symbol === 'Badge';
     for (const name of ['className', 'headerClassName', 'contentClassName', 'footerClassName', 'subHeadingClassName']) {
       if (!props.has(name)) continue;
-      const classes = classStrings(props.get(name)).flatMap(value => value.split(/\s+/)).map(utility);
+      const tokens = classStrings(props.get(name)).flatMap(value => value.split(/\s+/)).filter(Boolean);
+      const classes = tokens.map(utility);
+      const focusDrift = focusRingDrift(tokens);
       if ((anatomy || forwarder && name === 'contentClassName') && classes.some(value => paddingClass.test(value))) add(node, 'surface-padding', 'error', `${owner.symbol}: use inset/type/density and public regions; padding overrides replace owned anatomy.`);
       if (control && name === 'className' && classes.some(value => fixedControlClass.test(value))) add(node, 'control-anatomy', 'error', `${owner.symbol}: use its size/variant props; preserve shared control height, inset, corners and typography.`);
       if ((name === 'className' && (control || sharedCorners) || name === 'contentClassName' && forwarder) && classes.some(value=>replacesSharedRadius(value, control && name === 'className' ? 'inner' : cornerRole(family,owner.symbol)))) add(node,'shared-radius','error',`${owner.symbol}: outer shells use rounded-radius; controls and collection rows use bounded rounded-inner. Preserve the owning role and joined-edge resets.`);
       if (display && classes.some(addsCopyMargin)) add(node,'copy-margin','error',`${owner.symbol}: typography is margin-free; use textGap on the headed owner or gap on Stack/Grid.`);
-      if ((control || family === 'buttons' && owner.symbol === 'TextButton') && name === 'className' && classes.some(attenuatedFocusRing)) add(node, 'focus-ring-contrast', 'error', `${owner.symbol}: keep the shared ring-ring/sidebar-ring focus color at full strength; numeric opacity weakens its tested contrast.`);
+      if (display && name === 'className' && tokens.some(fadedText)) add(node,'faded-text','error',`${owner.symbol}: use its type prop (main, secondary) instead of ${[...new Set(tokens.filter(fadedText))].join(', ')}; an opacity-faded text role falls under 4.5:1.`);
+      if ((control || family === 'buttons' && owner.symbol === 'TextButton') && name === 'className' && focusDrift.length) add(node, 'focus-ring-recipe', 'error', `${owner.symbol}: keep the shared focus indicator (a ring-3 halo of ring-ring/50 around a full-strength ring edge); ${[...new Set(focusDrift)].join(', ')} redraws it.`);
       if (fixedText && name === 'className' && classes.some(value => fixedTextClass.test(value) || badge && /^rounded(?:-|$)/.test(value))) add(node, 'fixed-text-role', 'error', `${owner.symbol}: preserve its shared typography${badge ? ' and radius' : ''}; use its public variants and className for placement.`);
     }
     if (props.has('style')) for (const [name,value] of properties(props.get('style'))) {
@@ -370,7 +388,7 @@ export function analyzeComposition(text, { filename, index, ts }) {
       if (fixedText && (textStyle.test(name) || badge && /^border.*Radius$/.test(name))) add(node, 'fixed-text-role', 'error', `${owner.symbol}: ${name} replaces its shared text/radius recipe.`);
     }
     if ((isOwner(owner, 'base/cards', ['Card', 'SmartCard']) || isOwner(owner, 'base/display', ['ContentBlock'])) && props.get('icon')) add(node, 'decorative-icon', 'warning', `${owner.symbol}: a title icon is decoration unless it encodes state or a brand; let the title name the subject.`);
-    const facts = isOwner(owner, 'blocks/data-display', ['MetadataList']) ? resolve(props.get('items')) : undefined;
+    const facts = isOwner(owner, 'base/metadata-list', ['MetadataList']) || isOwner(owner, 'blocks/data-display', ['MetadataList']) ? resolve(props.get('items')) : undefined;
     if (facts && ts.isArrayLiteralExpression(facts) && facts.elements.filter(item => properties(item, false).some(([name]) => name === 'icon')).length > 1) add(node, 'decorative-icon', 'warning', 'MetadataList: an icon on every fact repeats what its label says; keep labels and drop the icons.');
     const framed = framedOwner(owner, props);
     if (isOwner(owner, 'base/cards', ['Card', 'SmartCard'])) {
@@ -380,7 +398,7 @@ export function analyzeComposition(text, { filename, index, ts }) {
       const valueHeading = contents.some(item => role(item, ['Heading']) && /[$€£¥]|\d/.test(renderedText(item.element)));
       if (valueHeading && contents.some(item => role(item, ['Text', 'DisplayLabel'])) && contents.some(item => isOwner(item.owner, 'base/badge', ['Badge']) && /[%+−-]|\d/.test(renderedText(item.element)))) add(node, 'reinvented-metric-card', 'warning', 'This label/value/change composition resembles a KPI. Compare Metric/MetricGrid from blocks/analytics or InlineStat from blocks/data-display; retain a custom subject when their metric lifecycle does not fit.');
       const factRows = contents.filter(item => isOwner(item.owner, 'base/structure', ['Stack']) && literal(item.props.get('direction')) === 'horizontal' && literal(item.props.get('justify')) === 'between' && contentElements(item.opening).filter(child => role(child, ['Text', 'DisplayLabel'])).length >= 2);
-      if (factRows.length >= 2) add(node, 'reinvented-metadata-list', 'warning', 'Repeated label/value rows resemble record facts. Compare MetadataList or InlineStat from blocks/data-display; preserve custom rows when they own distinct interactions or content.');
+      if (factRows.length >= 2) add(node, 'reinvented-metadata-list', 'warning', 'Repeated label/value rows resemble record facts. Compare MetadataList from base/metadata-list or InlineStat from blocks/data-display; preserve custom rows when they own distinct interactions or content.');
       if (contents.some(item => role(item, ['Heading']) && /^(?:no\b|nothing\b|empty\b)/i.test(renderedText(item.element))) && contents.some(item => isOwner(item.owner, 'base/structure', ['Stack']) && literal(item.props.get('align')) === 'center') && contents.some(item => isOwner(item.owner, 'base/buttons', ['Button', 'ButtonLink']))) add(node, 'reinvented-empty-state', 'warning', 'This centered empty region may fit EmptyState from blocks/data-display, with media, title, description and actions. Review the product state before choosing the complete owner.');
     }
     if (isOwner(owner, 'base/feedback', ['Empty'])) add(node, 'reinvented-empty-state', 'warning', 'Empty exposes lower-level anatomy. Compare EmptyState from blocks/data-display for a routine no-data/no-results region; keep Empty when custom anatomy is required.');
@@ -392,12 +410,24 @@ export function analyzeComposition(text, { filename, index, ts }) {
     if (framed && parents.some(parent => parent.framed)) add(node, 'nested-surface', 'warning', `${owner.symbol} is inside a framed owner. Review subject boundaries; use surface="flat" when the parent owns the frame.`);
     const header = properties(props.get('header'), false);
     const pageOwner = owner.import === `${index.package}/layout/page` || owner.import === `${index.package}/layout`;
-    const headerActions = pageOwner && owner.symbol === 'Page' ? new Map(header).get('actions') : pageOwner && owner.symbol === 'PageHeader' ? props.get('actions') : undefined;
+    // Every header owner takes role-based commands; its free-form regions hold
+    // non-command controls only.
+    const commandHeader = (pageOwner && owner.symbol === 'PageHeader') || isOwner(owner, 'base/navigation', ['PageHeading']) || isOwner(owner, 'features/resource', ['ResourceHeader', 'ResourceIndexShell', 'ResourceShowShell', 'TabbedResourceShell']) || isOwner(owner, 'layout/settings', ['SettingsShell', 'AsideNavShell']) || isOwner(owner, 'layout', ['SettingsShell', 'AsideNavShell']) || isOwner(owner, 'layout/workspace', ['WorkspaceRecordHeader']);
+    const headerActions = pageOwner && owner.symbol === 'Page' ? new Map(header).get('actions') : commandHeader ? props.get('actions') : undefined;
+    const elementSecondary = isOwner(owner, 'layout/workspace', ['WorkspaceRecordHeader']) ? props.get('secondaryActions') : undefined;
     if (pageOwner && owner.symbol === 'Page') {
       const primaries = solidPrimaryCount(ts.isJsxSelfClosingElement(node) ? node : node.parent) + (new Map(header).has('primaryAction') ? 1 : 0);
       if (primaries > 1) add(node, 'multiple-primary-commands', 'warning', `Page has ${primaries} solid primary commands. Keep one primary per page as header.primaryAction; leave other commands untoned (the neutral button) or list them in secondaryActions.`);
     }
-    if (headerActions && commandButtons(headerActions)) add(node, 'page-command-roles', 'warning', `${owner.symbol}: buttons in the header actions region choose their own emphasis, size and overflow. Pass commands as primaryAction (one) and ordered secondaryActions; keep actions for non-command controls.`);
+    if ((headerActions && commandButtons(headerActions)) || (elementSecondary && commandButtons(elementSecondary))) add(node, 'page-command-roles', 'warning', `${owner.symbol}: buttons, command rows and menus in the header actions region choose their own emphasis, order and overflow. Pass commands as primaryAction (one) and ordered secondaryActions; keep actions for non-command controls.`);
+    const headerProps = pageOwner && owner.symbol === 'Page' ? new Map(header) : pageOwner && owner.symbol === 'PageHeader' ? props : undefined;
+    if (headerProps) {
+      if (headerProps.has('titleIcon') && !headerProps.has('titleIconHref') && !headerProps.has('onTitleIconClick')) add(headerProps.get('titleIcon') ?? node, 'decorative-icon', 'warning', `${owner.symbol}: titleIcon decorates the page title; let the title name the page, or link the icon with titleIconHref.`);
+      const hasIcon = action => properties(action, false).some(([name]) => name === 'icon');
+      const secondary = resolve(headerProps.get('secondaryActions'));
+      const iconCommands = (headerProps.has('primaryAction') && hasIcon(headerProps.get('primaryAction')) ? 1 : 0) + (secondary && ts.isArrayLiteralExpression(secondary) ? secondary.elements.filter(hasIcon).length : 0);
+      if (iconCommands > 1) add(headerProps.get('secondaryActions') ?? node, 'decorative-icon', 'warning', `${owner.symbol}: ${iconCommands} page commands carry icons that repeat their labels. Keep the labels; reserve an icon for + on an add command or an external link.`);
+    }
     const title = literal(props.get('title')) ?? literal(new Map(header).get('title'));
     if (title && parents.some(parent => parent.title === title)) add(node, 'duplicate-heading', 'warning', `The heading "${title}" repeats its ancestor. Keep one route/subject title unless a distinct task warrants repetition.`);
     const structure = owner.import === `${index.package}/base/structure` && Object.hasOwn(structureDefaults, owner.symbol);

package/docs/consumer-skill/scripts/surface-policy.mjs

@@ -57,10 +57,144 @@ export function utility(token) {
   return token.slice(start).replace(/^!|!$/g, '');
 }
 
-/** Shared focus roles are contrast-tested at full strength, unlike status tints. */
-export function attenuatedFocusRing(token) {
-  const match = utility(token).match(/^ring-(?:ring|sidebar-ring)\/(?:(\d+(?:\.\d+)?|\.\d+)|\[(\d+(?:\.\d+)?|\.\d+)(%)?\])$/);
+export function variants(token) {
+  return token.slice(0, token.length - utility(token).length - (/!$/.test(token) ? 1 : 0)).replace(/!$/, '');
+}
+
+// Text and icon colours are typography roles. Opacity on a role adds a tier under
+// the tested 4.5:1, so only the sidebar keeps its one secondary tier.
+const textRole = /^text-(?:foreground|muted-foreground|card-foreground|popover-foreground|accent-foreground|secondary-foreground|primary-foreground|primary-accent|warning-accent|link-color|success|info|warning|destructive|sidebar-foreground|sidebar-accent-foreground|sidebar-primary-foreground)\/.+$/;
+export function fadedText(token) {
+  const value = utility(token);
+  return value !== 'text-sidebar-foreground/70' && textRole.test(value);
+}
+
+// Interaction fills come from one recipe owner: accent for rows, muted for toggle
+// hover, a lifted card segment and the table ladder. A neutral fill with opacity or
+// a primary tint under hover, highlight, selection, current or pressed state is a
+// second definition of that state.
+const interactionSegment = /^(?:group-|peer-)?(?:hover|focus|focus-visible|focus-within|active|data-highlighted|data-selected|data-active|data-current|data-pressed|aria-selected|aria-current|aria-pressed|aria-checked|data-\[(?:highlighted|selected|active|current|pressed|checked|state=[^\]]+)[^\]]*\])(?:\/[\w-]+)?$/;
+function variantSegments(variant) {
+  const segments = [];
+  let depth = 0, start = 0;
+  for (let i = 0; i < variant.length; i++) {
+    if ('[('.includes(variant[i])) depth++;
+    else if ('])'.includes(variant[i])) depth--;
+    else if (variant[i] === ':' && depth === 0) { segments.push(variant.slice(start, i)); start = i + 1; }
+  }
+  return segments;
+}
+export function interactionFillDrift(token) {
+  if (!variantSegments(variants(token)).some(segment => interactionSegment.test(segment))) return false;
+  const match = utility(token).match(/^bg-(muted|accent|card|background|foreground|secondary|popover|sidebar-accent|primary)\/(.+)$/);
+  return !!match && !(match[1] === 'muted' && match[2] === '50');
+}
+
+// Neutral fills have one strength per role (neutralFillRecipes in
+// src/lib/surface-recipes.ts): a wash at muted/30, a band at muted/50, a chip at
+// foreground/8, the inverse chip at background/10 and the idle marker at
+// muted-foreground/40. Opaque fills are always available; interaction states belong
+// to interaction-fill.
+const neutralTint = /^bg-(muted|muted-foreground|foreground|background|card|popover|secondary|accent|sidebar(?:-[a-z]+)*)\/(.+)$/;
+const neutralScale = new Set(['muted/30', 'muted/50', 'foreground/8', 'background/10', 'muted-foreground/40']);
+export function neutralFillDrift(token) {
+  const match = utility(token).match(neutralTint);
+  if (!match || neutralScale.has(`${match[1]}/${match[2]}`)) return false;
+  return !variantSegments(variants(token)).some(segment => interactionSegment.test(segment));
+}
+
+// Elevation takes one theme shadow per role (elevationRecipes in
+// src/lib/surface-recipes.ts): xs resting, sm card, md raised and anchored, lg lifted
+// and xl modal; shadow-none clears it. A box-shadow divider line that draws
+// var(--border) is divider mechanics, not elevation.
+export function elevationDrift(token) {
+  const value = utility(token);
+  if (!/^shadow(?:-|$)/.test(value)) return false;
+  return !/^shadow-(?:none|xs|sm|md|lg|xl)$/.test(value) && !/^shadow-\[.*var\(--border\).*\]$/.test(value);
+}
+
+// Dividers have two strengths: a surface edge draws the full border role and an
+// inner divider (one side, divide, separator) draws it at 60%. The control boundary
+// has one strength. Only src/lib/surface-recipes.ts owns other strengths (the modal
+// shell and the framed Card ring).
+export function dividerStrengthDrift(token) {
+  const match = utility(token).match(/^(?:border(?:-[trblxyse]|-bs|-be)?|divide(?:-[xy])?|ring|inset-ring|outline|bg)-(border|sidebar-border|input)\/(.+)$/);
+  return !!match && !(match[1] === 'border' && match[2] === '60');
+}
+
+// Status and emphasis tints have one scale, src/lib/tone-recipes.ts: a wash, tint,
+// edge, halo and line strength per tone, which the contrast contract tests. A
+// translucent tone spelled anywhere else is a second scale. The invalid state's
+// destructive halo belongs to the field-state and focus recipes.
+const toneTint = /^(?:bg|border(?:-[trblxyse]|-bs|-be)?|ring|inset-ring|outline|divide(?:-[xy])?)-(?:info|success|warning|destructive|primary)(?:-accent)?\/.+$/;
+export function statusTintDrift(token) {
+  return toneTint.test(utility(token)) && !/invalid|focus/.test(variants(token));
+}
+
+// State changes (colour, border and shadow) share one timing: Tailwind's default
+// 150ms transition and easing. Presence and geometry motion (enter, exit, expand,
+// slide) comes from src/lib/motion-recipes.ts. Returns the timing tokens that
+// retime a paint-only transition.
+const paintProperties = new Set(['color', 'background-color', 'background', 'border-color', 'box-shadow', 'outline-color', 'text-decoration-color', 'fill', 'stroke']);
+function paintTransition(token) {
+  const value = utility(token);
+  if (value === 'transition-colors' || value === 'transition-shadow') return true;
+  const list = value.match(/^transition-\[(.+)\]$/)?.[1];
+  return !!list && list.split(',').every(property => paintProperties.has(property.trim()));
+}
+export function stateMotionDrift(classes) {
+  const resting = classes.filter(token => variants(token) === '');
+  if (!resting.some(paintTransition) || resting.some(token => /^transition(?:-|$)/.test(utility(token)) && !paintTransition(token))) return [];
+  return resting.filter(token => /^duration-(?!150$|0$)/.test(utility(token)) || /^ease-/.test(utility(token)));
+}
+
+// Corners take a role derived from --radius: rounded-radius (outer shells) and
+// rounded-inner (controls, rows, nested bodies), plus rounded-full, rounded-none
+// and the root-derived rounded-radius-* steps. Bare rounded is a fixed 4px that
+// ignores the theme root, and the t-shirt steps are a second scale.
+export function radiusRoleDrift(token) {
+  return /^rounded(?:-(?:[trblse]|tl|tr|br|bl|ss|se|es|ee))?(?:-(?:xs|sm|md|lg|xl|2xl|3xl|4xl))?$/.test(utility(token));
+}
+
+// One stacking scale (src/lib/layer-recipes.ts): z-10 raised, z-20 sticky, z-30
+// sticky over sticky, z-40 app chrome, z-50 popups and modal layers. Local
+// ordering may also use z-0, z-[1] and z-[-1].
+export function layerScaleDrift(token) {
+  const match = utility(token).replace(/^-/, '').match(/^z-(?:(\d+)|\[(-?\d+)\])$/);
   if (!match) return false;
-  const opacity = Number(match[1] ?? match[2]);
-  return opacity < (match[1] !== undefined || match[3] ? 100 : 1);
+  if (match[2] !== undefined) return Math.abs(Number(match[2])) > 1;
+  return ![0, 10, 20, 30, 40, 50].includes(Number(match[1]));
+}
+
+// Disabled content dims once, at 50%; a child of a dimmed owner resets to 100%.
+const disabledSegment = /^(?:group-|peer-)?(?:disabled|data-disabled|aria-disabled|data-\[disabled[^\]]*\]|aria-\[disabled[^\]]*\])(?:\/[\w-]+)?$/;
+export function disabledDimmingDrift(token) {
+  if (!variantSegments(variants(token)).some(segment => disabledSegment.test(segment))) return false;
+  const match = utility(token).match(/^opacity-(\d+)$/);
+  return !!match && !['50', '100'].includes(match[1]);
+}
+
+const focusState = /focus|focused/;
+const ringWidth = /^ring(?:-\d+(?:\.\d+)?|-\[(?:\d+(?:\.\d+)?)(?:px|rem|em)\])?$/;
+
+/**
+ * Every focus indicator is one recipe: a 3px halo of the ring role at 50% around
+ * a full-strength 1px edge (the control's own `border-ring`, or `inset-ring-ring`
+ * on a borderless element). Returns the tokens that draw focus any other way:
+ * another focus ring width, an offset ring, a halo at another strength, an
+ * attenuated edge, or an unscoped ring colour that a focus-only width turns into
+ * a full-strength halo. Status tints (invalid, selected) keep their own colours.
+ */
+export function focusRingDrift(classes) {
+  const focused = token => focusState.test(variants(token));
+  const focusWidth = classes.some(token => focused(token) && ringWidth.test(utility(token)) && utility(token) !== 'ring-0');
+  return classes.filter(token => {
+    const value = utility(token);
+    if (!focused(token)) return focusWidth && variants(token) === '' && /^ring-(?:ring|sidebar-ring)$/.test(value);
+    if (/^ring-offset-/.test(value)) return true;
+    if (ringWidth.test(value)) return !/^ring-[03]$/.test(value);
+    const halo = value.match(/^ring-(?:ring|sidebar-ring)(?:\/(.+))?$/);
+    if (halo) return halo[1] !== '50';
+    return /^(?:border|inset-ring|outline)-(?:ring|sidebar-ring)\/.+$/.test(value);
+  });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "themelia-react-ui",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A composable React UI library for modern admin applications, built on Base UI and Tailwind with shadcn-compatible themes, shared design tokens, reusable layouts, blocks and workflows.",
   "publishConfig": {
     "access": "public",
@@ -99,6 +99,10 @@
       "types": "./dist/components/base/badge/index.d.ts",
       "import": "./dist/base/badge.js"
     },
+    "./base/batch-action-bar": {
+      "types": "./dist/components/base/batch-action-bar/index.d.ts",
+      "import": "./dist/base/batch-action-bar.js"
+    },
     "./base/cards": {
       "types": "./dist/components/base/cards/index.d.ts",
       "import": "./dist/base/cards.js"
@@ -163,6 +167,10 @@
       "types": "./dist/components/base/media-gallery/index.d.ts",
       "import": "./dist/base/media-gallery.js"
     },
+    "./base/metadata-list": {
+      "types": "./dist/components/base/metadata-list/index.d.ts",
+      "import": "./dist/base/metadata-list.js"
+    },
     "./base/navigation": {
       "types": "./dist/components/base/navigation/index.d.ts",
       "import": "./dist/base/navigation.js"
@@ -465,7 +473,7 @@
     "check:maps": "node scripts/test-client-boundaries.mjs --built",
     "build:docs": "node scripts/build-static-docs.mjs",
     "check:static-docs": "node scripts/check-static-docs.mjs",
-    "check:agent": "node --test scripts/test-consumer-discovery.mjs scripts/test-consumer-composition.mjs scripts/test-button-codemod.mjs scripts/test-consumer-skill-assets.mjs scripts/test-static-docs.mjs scripts/test-fixture-install.mjs && npm run check:skill",
+    "check:agent": "node --test scripts/test-consumer-discovery.mjs scripts/test-consumer-composition.mjs scripts/test-consumer-evals.mjs scripts/test-button-codemod.mjs scripts/test-consumer-skill-assets.mjs scripts/test-static-docs.mjs scripts/test-fixture-install.mjs && npm run check:skill",
     "check:release": "npm run check:all && npm run check:agent && npm run build:docs && npm run check:static-docs"
   },
   "peerDependencies": {

package/dist/accordion-CQXVcd7Q.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion-CQXVcd7Q.js","names":["Accordion","AccordionPrimitive","AccordionItem","AccordionTrigger","AccordionContent","Accordion","React","PrimitiveAccordion","PrimitiveAccordionItem","PrimitiveAccordionTrigger","PrimitiveAccordionContent","Accordion","Text","motionRecipes","Stack","DisclosurePanelElement","IconBadge","React$1","Accordion$2","props","Accordion","cn","className","AccordionItem$1","AccordionTrigger$1","children","ChevronDownIcon","AccordionContent$1","panelProps","Accordion$1","AccordionItem","AccordionTrigger","isSimpleText","AccordionContent","ACCORDION_ROOT_VARIANT_CLASS","ACCORDION_ITEM_VARIANT_CLASS","ACCORDION_TRIGGER_BASE","ACCORDION_CONTENT_PADDING","defaultSmartAccordionStrings","SmartAccordion","forwardRef","stringsProp","strings","useStrings","hasIconColumn","iconStyle","items","item","contentPadding","triggerGridClass","onValueChange","next","variant","itemClassName","triggerClassName","SmartAccordionIcon","isSimpleContent","contentClassName","content","reserveSpace","icon"],"sources":["../src/components/ui/accordion.tsx","../src/components/base/accordion/accordion.tsx","../src/components/base/accordion/accordion-variants.ts","../src/components/base/accordion/accordion.strings.ts","../src/components/base/accordion/smart-accordion.tsx"],"sourcesContent":["import { DisclosurePanelElement } from './disclosure-panel';\nimport { motionRecipes } from '../../lib/motion-recipes';\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"../../lib/utils\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"border-border accordion--component flex w-full flex-col border box-border overflow-hidden\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"border-border accordion-item--component border-b last:border-b-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"accordion-header m-0\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\"accordion-trigger--component flex w-full items-center justify-between border-0 bg-transparent outline-none cursor-pointer box-border\", className)}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon data-slot=\"accordion-trigger-icon\" className={cn(\"accordion-trigger--icon size-icon text-muted-foreground shrink-0 [[aria-expanded=true]_&]:rotate-180\", motionRecipes.chevron)} />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  render,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className={cn(\"accordion-content--component box-border text-foreground h-(--accordion-panel-height)\", motionRecipes.disclosure, className)}\n      {...props}\n      render={(panelProps, state) => <DisclosurePanelElement props={panelProps} state={state} render={render} heightVariable=\"--accordion-panel-height\" />}\n    >\n      {children}\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n\n","/**\n * Accordion — tokenized base wrapper around the shadcn/Base UI primitive.\n *\n * The internal primitive intentionally keeps shadcn's roomy defaults. This\n * public layer calibrates them for admin surfaces: radius tokens, 12px row\n * insets, density-aware vertical rhythm, quiet hover/focus treatments, and\n * matching trigger/content columns. Consumers retain the complete compound\n * API and can override any treatment with `className`.\n */\nimport * as React from 'react';\n\nimport {\n\tAccordion as PrimitiveAccordion,\n\tAccordionContent as PrimitiveAccordionContent,\n\tAccordionItem as PrimitiveAccordionItem,\n\tAccordionTrigger as PrimitiveAccordionTrigger,\n} from '../../ui/accordion';\nimport { Text } from '../../typography';\nimport { cn } from '../../../lib/utils';\n\nexport type AccordionProps = React.ComponentPropsWithoutRef<typeof PrimitiveAccordion>;\nexport type AccordionItemProps = React.ComponentPropsWithoutRef<typeof PrimitiveAccordionItem>;\nexport type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof PrimitiveAccordionTrigger>;\nexport type AccordionContentProps = React.ComponentPropsWithoutRef<typeof PrimitiveAccordionContent>;\n\nconst Accordion = React.forwardRef<React.ElementRef<typeof PrimitiveAccordion>, AccordionProps>(\n\tfunction Accordion({ className, ...props }, ref) {\n\t\treturn (\n\t\t\t<PrimitiveAccordion\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'accordion--component rounded-radius border-border bg-card',\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAccordion.displayName = 'Accordion';\n\nconst AccordionItem = React.forwardRef<React.ElementRef<typeof PrimitiveAccordionItem>, AccordionItemProps>(\n\tfunction AccordionItem({ className, ...props }, ref) {\n\t\treturn (\n\t\t\t<PrimitiveAccordionItem\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'accordion-item--component border-border',\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAccordionItem.displayName = 'AccordionItem';\n\nconst AccordionTrigger = React.forwardRef<React.ElementRef<typeof PrimitiveAccordionTrigger>, AccordionTriggerProps>(\n\tfunction AccordionTrigger({ className, children, ...props }, ref) {\n\t\tconst isSimpleText = typeof children === 'string' || typeof children === 'number' || typeof children === 'bigint';\n\t\treturn (\n\t\t\t<PrimitiveAccordionTrigger\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'accordion-trigger--component min-h-action items-center gap-space-lg px-row-x py-row-y',\n\t\t\t\t\t'text-start text-sm font-medium transition-colors hover:bg-muted/40 hover:no-underline',\n\t\t\t\t\t// Inset: the shell clips its rounded corners, so an outer ring was cut off.\n\t\t\t\t\t'focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{isSimpleText ? (\n\t\t\t\t\t<Text tag=\"span\" size=\"inherit\" weight=\"medium\" lineHeight=\"tight\" className=\"text-inherit\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</Text>\n\t\t\t\t) : children}\n\t\t\t</PrimitiveAccordionTrigger>\n\t\t);\n\t},\n);\nAccordionTrigger.displayName = 'AccordionTrigger';\n\nconst AccordionContent = React.forwardRef<React.ElementRef<typeof PrimitiveAccordionContent>, AccordionContentProps>(\n\tfunction AccordionContent({ className, children, ...props }, ref) {\n\t\tconst isSimpleText = typeof children === 'string' || typeof children === 'number' || typeof children === 'bigint';\n\t\treturn (\n\t\t\t<PrimitiveAccordionContent\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'accordion-content--component px-row-x pb-space-lg text-sm',\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{isSimpleText ? (\n\t\t\t\t\t<Text tag=\"div\" size=\"inherit\" lineHeight=\"relaxed\" className=\"text-inherit\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</Text>\n\t\t\t\t) : children}\n\t\t\t</PrimitiveAccordionContent>\n\t\t);\n\t},\n);\nAccordionContent.displayName = 'AccordionContent';\n\nexport {\n\tAccordion,\n\tAccordionItem,\n\tAccordionTrigger,\n\tAccordionContent,\n};\n","/**\n * Shared accordion-shell variant classes — used by both `SmartAccordion`\n * and any blocks surface that builds on `base/accordion` directly\n * (e.g. `blocks/onboarding/checklist`).\n *\n * Exported because two consumers already keep it in lockstep; a third\n * one will copy this exact map. Centralising means a future tweak\n * (e.g. tighten `card` items to `border-border/70`) propagates.\n *\n * Padding tokens for trigger / content live alongside so the rhythm\n * is shared too:\n *\n * - Trigger: `gap-space-lg px-row-x py-row-y` — density-driven,\n *   `<UIProvider>`\n *   override flows through.\n * - Content padding accounts for the base panel's `px-row-x`.\n *   Medallion and inline rows use shared media/spacing tokens, and\n *   no-icon rows add no extra left padding so body copy tracks the\n *   trigger text column instead of drifting.\n */\nimport type { DisclosureSurface } from '../../../lib/component-vocabulary';\n\nexport type AccordionShellVariant = DisclosureSurface;\n\nexport const ACCORDION_ROOT_VARIANT_CLASS: Record<AccordionShellVariant, string> = {\n\tcard: 'gap-space-md border-0 rounded-none bg-transparent overflow-visible',\n\tbordered: 'rounded-radius border border-border bg-card overflow-hidden',\n\tflat: 'border-0 rounded-none bg-transparent overflow-visible',\n};\n\n// The chevron and the revealed panel carry the open state; an open item is not\n// tinted into a box. Rounded items clip their trigger so its inset focus ring and\n// hover fill follow the item's corners.\nexport const ACCORDION_ITEM_VARIANT_CLASS: Record<AccordionShellVariant, string> = {\n\tcard: 'border border-border bg-card rounded-radius overflow-hidden',\n\tbordered: 'bg-transparent not-last:border-b border-border',\n\tflat: 'border-0 not-last:border-b-0 bg-transparent rounded-radius overflow-hidden',\n};\n\nexport const ACCORDION_TRIGGER_BASE =\n\t'items-center gap-space-lg px-row-x py-row-y text-start hover:no-underline';\n\n/**\n * Content-padding presets keyed off the leading-icon width. Use\n * `withMedallion` when the trigger renders a default `IconBadge`\n * plus the shared row gap so body text aligns under the title at every\n * consumer density.\n */\nexport const ACCORDION_CONTENT_PADDING = {\n\t// Composed from root tokens so a scoped density/space boundary applies (the\n\t// `--spacing-*` aliases resolve once at :root inside arbitrary values).\n\twithMedallion: 'ps-[calc(var(--row-x)*var(--space-scale)+var(--avatar)+0.75rem*var(--space-scale))] pe-row-x pt-0',\n\twithInline: 'ps-[calc(var(--row-x)*var(--space-scale)+var(--icon)*1.25+0.75rem*var(--space-scale))] pe-row-x pt-0',\n\twithoutIcon: 'px-row-x pt-0',\n} as const;\n","/**\n * Strings for `SmartAccordion`. There aren't many — Radix handles the\n * trigger ARIA states automatically, so the only library-owned copy is\n * the optional landmark label on the wrapping nav region. Consumers\n * override per-item `title` / `badge` / `content` directly via\n * `SmartAccordionItem` props (the strings live in the data, not here).\n */\nexport interface SmartAccordionStrings {\n\t/**\n\t * Sets `aria-label` on the wrapping element so screen readers can name\n\t * the accordion region. Optional — when absent, no aria-label is set.\n\t */\n\tregionAriaLabel?: string;\n}\n\nexport const defaultSmartAccordionStrings: SmartAccordionStrings = {\n\tregionAriaLabel: undefined,\n};\n","/**\n * SmartAccordion — the canonical \"icon + title + optional badge + body\"\n * accordion pattern, with three visual variants for the surface chrome\n * (`card` | `bordered` | `flat`) and three icon framings (`medallion` |\n * `inline` | `none`).\n *\n * Composes the wrapped `base/accordion` parts (rule 2 — blocks-style\n * convenience built from re-exports, not the raw shadcn primitive).\n *\n * For richer rows (multi-line metadata, custom layouts), drop down to\n * the compound API:\n *\n *     import { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n *       from '.';\n */\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconBadge } from '../display/icon-badge';\nimport { Stack } from '../structure';\nimport { Text } from '../../typography';\nimport { useStrings } from '../../../lib/strings';\nimport { cn } from '../../../lib/utils';\n\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';\nimport {\n\tACCORDION_CONTENT_PADDING,\n\tACCORDION_ITEM_VARIANT_CLASS,\n\tACCORDION_ROOT_VARIANT_CLASS,\n\tACCORDION_TRIGGER_BASE,\n} from './accordion-variants';\nimport { defaultSmartAccordionStrings } from './accordion.strings';\nimport type {\n\tSmartAccordionIconStyle,\n\tSmartAccordionProps,\n} from './accordion.types';\n\n/**\n * Bounded accordion composition for repeated icon, title, description, badge,\n * and body sections. Use the compound Accordion parts when row structure or\n * per-item presentation differs.\n */\nexport const SmartAccordion = forwardRef<HTMLDivElement, SmartAccordionProps>(function SmartAccordion({\n\titems,\n\tmultiple = false,\n\tdefaultValue,\n\tvalue,\n\tonValueChange,\n\tvariant = 'bordered',\n\ticonStyle = 'inline',\n\tclassName,\n\titemClassName,\n\ttriggerClassName,\n\tcontentClassName,\n\tstrings: stringsProp,\n}, ref) {\n\tconst strings = useStrings(defaultSmartAccordionStrings, stringsProp);\n\tconst hasIconColumn = iconStyle !== 'none' && items.some((item) => item.icon != null);\n\tconst contentPadding =\n\t\t!hasIconColumn\n\t\t\t? ACCORDION_CONTENT_PADDING.withoutIcon\n\t\t\t: iconStyle === 'medallion'\n\t\t\t? ACCORDION_CONTENT_PADDING.withMedallion\n\t\t\t: ACCORDION_CONTENT_PADDING.withInline;\n\tconst triggerGridClass = !hasIconColumn\n\t\t? 'grid-cols-[minmax(0,1fr)]'\n\t\t: 'grid-cols-[auto_minmax(0,1fr)]';\n\treturn (\n\t\t<Accordion\n\t\t\tref={ref}\n\t\t\tmultiple={multiple}\n\t\t\tdefaultValue={defaultValue}\n\t\t\tvalue={value}\n\t\t\tonValueChange={\n\t\t\t\tonValueChange\n\t\t\t\t\t? (next) => onValueChange(next as string[])\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-label={strings.regionAriaLabel}\n\t\t\tdata-variant={variant}\n\t\t\tdata-icon-style={iconStyle}\n\t\t\tclassName={cn('smart-accordion--component', ACCORDION_ROOT_VARIANT_CLASS[variant], className)}\n\t\t>\n\t\t\t{items.map((item) => (\n\t\t\t\t<AccordionItem\n\t\t\t\t\tkey={item.value}\n\t\t\t\t\tvalue={item.value}\n\t\t\t\t\tclassName={cn('smart-accordion--item', ACCORDION_ITEM_VARIANT_CLASS[variant], itemClassName)}\n\t\t\t\t>\n\t\t\t\t\t<AccordionTrigger\n\t\t\t\t\t\tclassName={cn('smart-accordion--trigger', ACCORDION_TRIGGER_BASE, triggerClassName)}\n\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className={cn('grid min-w-0 flex-1 items-center gap-x-space-lg', triggerGridClass)}>\n\t\t\t\t\t\t\t<SmartAccordionIcon\n\t\t\t\t\t\t\t\ticonStyle={iconStyle}\n\t\t\t\t\t\t\t\ticon={item.icon}\n\t\t\t\t\t\t\t\treserveSpace={hasIconColumn}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Stack render={<span />} gap=\"dense\" className=\"smart-accordion--heading flex-1\">\n\t\t\t\t\t\t\t\t<span className=\"flex min-w-0 flex-wrap items-center gap-x-space-md gap-y-space-xs\">\n\t\t\t\t\t\t\t\t\t{isSimpleContent(item.title) ? (\n\t\t\t\t\t\t\t\t\t\t<Text tag=\"span\" weight=\"semibold\" className=\"smart-accordion--title min-w-0\">\n\t\t\t\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t) : item.title}\n\t\t\t\t\t\t\t\t\t{item.badge != null && (\n\t\t\t\t\t\t\t\t\t\t<span className=\"smart-accordion--badge inline-flex shrink-0\">{item.badge}</span>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{!!item.description && (\n\t\t\t\t\t\t\t\t\tisSimpleContent(item.description) ? (\n\t\t\t\t\t\t\t\t\t\t<Text tag=\"span\" type=\"secondary\" className=\"smart-accordion--description min-w-0\">\n\t\t\t\t\t\t\t\t\t\t\t{item.description}\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t) : item.description\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AccordionTrigger>\n\t\t\t\t\t<AccordionContent\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t'smart-accordion--content',\n\t\t\t\t\t\t\tcontentPadding,\n\t\t\t\t\t\t\tcontentClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{isSimpleContent(item.content) ? (\n\t\t\t\t\t\t\t<Text tag=\"div\" type=\"secondary\" lineHeight=\"relaxed\">\n\t\t\t\t\t\t\t\t{item.content}\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : item.content}\n\t\t\t\t\t</AccordionContent>\n\t\t\t\t</AccordionItem>\n\t\t\t))}\n\t\t</Accordion>\n\t);\n});\n\nSmartAccordion.displayName = 'SmartAccordion';\n\nfunction isSimpleContent(content: ReactNode): content is string | number | bigint {\n\treturn typeof content === 'string' || typeof content === 'number' || typeof content === 'bigint';\n}\n\nfunction SmartAccordionIcon({\n\ticonStyle,\n\ticon,\n\treserveSpace,\n}: {\n\ticonStyle: SmartAccordionIconStyle;\n\ticon?: ReactNode;\n\treserveSpace: boolean;\n}) {\n\tif (iconStyle === 'none' || !reserveSpace) return null;\n\tif (!icon) {\n\t\treturn (\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'smart-accordion--icon inline-flex shrink-0',\n\t\t\t\t\ticonStyle === 'inline' ? 'size-icon-lg' : 'size-avatar',\n\t\t\t\t)}\n\t\t\t/>\n\t\t);\n\t}\n\tif (iconStyle === 'inline') {\n\t\treturn (\n\t\t\t<span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName=\"smart-accordion--icon inline-flex size-icon-lg shrink-0 self-center text-muted-foreground [&>svg]:size-icon\"\n\t\t\t>\n\t\t\t\t{icon}\n\t\t\t</span>\n\t\t);\n\t}\n\treturn (\n\t\t<IconBadge size=\"md\" tone=\"neutral\" shape=\"circle\" aria-hidden=\"true\" className=\"smart-accordion--icon self-center\">\n\t\t\t{icon}\n\t\t</IconBadge>\n\t);\n}\n"],"mappings":"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"}