@mortenbrudvik/waveui 0.12.0 → 0.13.0

package/dist/components/data-display/Tag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.mjs","names":["useId","useId$1","React","BUTTON_ONLY_KEYS","HANDLER_KEY","NAME_KEYS","noop","withoutName","result","ignoredName","key","value","props","iconClassName","isPlainObject","proto","defaultDismissContent","DismissIcon","glyphSize","resolveDismissSlot","slotRendersContent","slot","tagClassNames","elementType","getElementType","Button","markup","elementProps","isWaveButton","slotProps","BUTTON_OWN_PROP_KEYS","icon","buttonProps","iconNode","renderSlot","cn","ownContent","materialiseSlotContent","children","placeButtonIcon","hasTextLabel","asWaveButton","isButtonObject","contentProps","ownProps","hasButtonIcon","slotWrapsDefaultContent","NATIVE_DISABLED_ELEMENTS","NATIVE_VALUE_ELEMENTS","NATIVELY_DISABLED_PROPS","isKeyOf","table","blockRootClick","event","TagDismissButton","dismissLabelId","dismissTextId","slotRef","ownRef","mergedRef","useMergedRefs","buttonRef","labelTarget","setLabelTarget","subscribeToContent","observeTextLabel","onChange","contentHasTextLabel","hasRenderedTextLabel","literalTextLabel","namedByContent","contentMayName","hold","useHeldFocus","disabled","stateProps","MERGED_DISABLED_FOCUSABLE_PROPS","disabledFocusable","named","dismissName","contentId","composeEventHandlers","dismissLabel","content","NO_LIST_ITEM_ROLE_ELEMENTS","NESTED_IN_BUTTON_MESSAGE","NESTED_IN_LINK_MESSAGE","LIST_ITEM_MESSAGE","isInListItem","element","root","Tag","appearanceProp","sizeProp","shapeProp","disabledProp","dismissibleProp","rest","Component","as","group","useTagGroupContext","host","TagHostContext","rootRef","ref","primaryTextRef","dismissButtonRef","size","tagSizeClasses","appearance","tagAppearanceClasses","shape","tagShapeClasses","dismissible","look","selected","dimDisabled","reportedValue","useTagGroupItem","isLinkRoot","linkDisabled","isButtonRoot","rootHold","buttonRootHeld","slotButtonProps","dismissIcon","TAG_DISMISS_GLYPH_SIZE","warning","warnOnce","warnDeprecated","dismissPropsIgnored","onDismiss","isDev","hasWarned","inList","hasMedia","media","hasIcon","secondary","secondaryText","hasSecondary","avatarBox","TAG_AVATAR_SIZE","takesNative","elements","listItemRole","hiddenByHost","handleClick","isOwnEvent","onClick","handleRootKeyDown","useEventCallback","text","button","isDismissKey","ownButtonProps","TAG_DISMISS_BASE_CLASSES","tagDismissSizeClasses","tagDismissStateClasses","focusRing","tagDismissRingClasses","isRepeatedActivation","dismissButtonProps","mergeProps","primaryText","role","hidden","TAG_ROOT_BASE_CLASSES","tagStartInsetClasses","tagEndInsetClasses","TAG_SELECTED_CLASSES","forcedColors","className","onKeyDown","onFocus","onBlur","AvatarSizeContext","tagMediaClasses","tagIconClasses","TAG_TEXT_COLUMN_CLASSES","TAG_SECONDARY_TEXT_CLASSES"],"sources":["../../../src/components/data-display/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { tagClassNames } from '../../lib/classNames';\nimport { hasWarned, isDev, warnDeprecated, warnOnce } from '../../lib/dev';\nimport { mergeProps } from '../../lib/mergeProps';\nimport { getElementType } from '../../lib/children';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { isEditableTarget, isOwnEvent } from '../../lib/events';\nimport {\n  materialiseSlotContent,\n  renderSlot,\n  slotRendersContent,\n  slotWrapsDefaultContent,\n} from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport { DismissIcon } from '../../lib/icons';\nimport { hasRenderedTextLabel, hasTextLabel, observeTextLabel } from '../../lib/labelInName';\nimport type { Slot, SlotObject } from '../../lib/slot';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { TagAppearance, TagShape, TagSize } from '../../lib/types';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { Button } from '../button/Button';\nimport {\n  BUTTON_OWN_PROP_KEYS,\n  MERGED_DISABLED_FOCUSABLE_PROPS,\n  mergedAriaDisabledClasses,\n  placeButtonIcon,\n} from '../button/Button.slots';\nimport { AvatarSizeContext } from './Avatar.context';\nimport {\n  TAG_GROUP_SELECTOR,\n  TagHostContext,\n  isDismissKey,\n  isRepeatedActivation,\n  useDismissControlFocus,\n  useHeldFocus,\n  useTagGroupContext,\n  useTagGroupItem,\n} from './TagGroup.context';\nimport {\n  TAG_AVATAR_SIZE,\n  TAG_DISABLED_DIM_CLASSES,\n  TAG_DISMISS_BASE_CLASSES,\n  TAG_DISMISS_GLYPH_SIZE,\n  TAG_DISMISS_SELECTED_RING_CLASSES,\n  TAG_PRIMARY_TEXT_TWO_LINE_CLASSES,\n  TAG_ROOT_BASE_CLASSES,\n  TAG_SECONDARY_TEXT_CLASSES,\n  TAG_SELECTED_CLASSES,\n  TAG_TEXT_COLUMN_CLASSES,\n  tagAppearanceClasses,\n  tagDismissRingClasses,\n  tagDismissSizeClasses,\n  tagDismissStateClasses,\n  tagEndInsetClasses,\n  tagIconClasses,\n  tagMediaClasses,\n  tagShapeClasses,\n  tagSizeClasses,\n  tagStartInsetClasses,\n} from './tagStyles';\nimport type { TagLook } from './tagStyles';\n\n/**\n * The Tag's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`, default `span`). The own props shadow\n * the element's attributes of the same names: `TagProps<'button'>['value']` is a `string`.\n */\nexport interface TagOwnProps {\n  /**\n   * Colour scheme: `filled` (a neutral fill), `outline` (a border on the surface behind it) or\n   * `brand` (a light brand tint that follows the brand ramp).\n   * @default the TagGroup's `appearance`, else 'filled'\n   */\n  appearance?: TagAppearance;\n  /**\n   * `medium` (28px tall, the 0.10 look), `small` (24px) or `extra-small` (20px); an Avatar in\n   * `media` is 24, 20 or 16px. Fluent's medium tag is 32px.\n   * @default the TagGroup's `size`, else 'medium'\n   */\n  size?: TagSize;\n  /**\n   * `circular` (a pill, the 0.10 look) or `rounded` (4px corners). Fluent's default is `rounded`.\n   * @default the TagGroup's `shape`, else 'circular'\n   */\n  shape?: TagShape;\n  /**\n   * Dims the tag and disables its Dismiss button natively (no `onDismiss`, out of the Tab\n   * order), whatever `dismissIcon` passes. A disabled TagGroup disables every tag. A Dismiss\n   * button that has focus when the tag is disabled keeps it, unavailable, until focus leaves it.\n   * Rendered as `data-disabled`. With `as=\"a\"` the link is disabled too: `aria-disabled=\"true\"`,\n   * `role=\"link\"`, no `href` (out of the Tab order) and no click; a link that has focus keeps it,\n   * and its `href`, until focus leaves it. With another `as`, an element that takes a native\n   * `disabled` (a `<button>`) or a component receives `disabled`; a `<button>` that has focus\n   * when it is disabled keeps it, unavailable (`aria-disabled`, no click), until focus leaves it.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Draws the selected look (the brand fill) and sets `data-selected`. A Tag is not interactive,\n   * so the state is not announced: for a tag the user selects, use `InteractionTag` (its\n   * `InteractionTag.Primary` is a toggle button). Disabled wins over the selected look.\n   * @default false\n   */\n  selected?: boolean;\n  /**\n   * Identifies the tag in a TagGroup: the value its `onDismiss` receives (without one, a generated\n   * id). Give every tag of a group its own value. Renders nothing on the default `<span>`; with\n   * `as`, an element that takes a native `value` (a `<button>`, an `<li>`) still receives it.\n   */\n  value?: string;\n  /**\n   * A visual before the text, usually an `Avatar`, which takes the tag's size (24, 20 or 16px)\n   * unless it sets its own `size`. Not interactive. It is not hidden from assistive technology:\n   * pass `decorative` to an Avatar whose name repeats the tag's text. Use `media` or `icon`, not\n   * both.\n   */\n  media?: Slot<'span'>;\n  /** A decorative icon before the text (`aria-hidden`), in a 20, 16 or 12px box. */\n  icon?: Slot<'span'>;\n  /**\n   * A second, smaller line under the text (`secondaryText=\"Designer\"`). It is not part of the\n   * Dismiss button's name. A small or extra-small tag grows to 28px to fit it.\n   */\n  secondaryText?: React.ReactNode;\n  /**\n   * Whether the tag renders a Dismiss button. `onDismiss` and `dismissIcon` take effect only with\n   * it (a development warning says so when they are passed without it). `dismissible={false}`\n   * opts a tag out of a dismissible TagGroup. A Dismiss button cannot sit inside a link or a\n   * button: a dismissible tag rendered as one holds it inside (a development warning). For a\n   * dismissible link chip, put the link in the content,\n   * `<Tag dismissible><a href=\"/topics/react\">React</a></Tag>`; for an action with a separate\n   * Dismiss button, use `InteractionTag`. Fluent's dismissible Tag is a single button that\n   * dismisses when it is activated.\n   * @default the TagGroup's `dismissible`, else `false`\n   */\n  dismissible?: boolean;\n  /**\n   * Called when the Dismiss button is activated: a click, Enter, Space, Delete or Backspace (a\n   * held key dismisses once). Passing it does not render the button: set `dismissible` too. In a\n   * TagGroup the group's `onDismiss(value)` is called after it, and focus moves to the next tag\n   * when the tag is removed. A standalone Tag cannot keep focus once you remove it: move focus\n   * yourself (see \"Focus after dismissal\" on {@link Tag}). Fluent's Tag dismisses on Delete and\n   * Backspace only inside a TagGroup.\n   */\n  onDismiss?: () => void;\n  /**\n   * Content of the dismiss button (an icon). The Tag always renders its own dismiss\n   * `<button type=\"button\">`, wired to `onDismiss` and named by `dismissLabel` plus the tag's text\n   * (its children; not `media`, `icon` or `secondaryText`); this slot only replaces the icon\n   * inside it.\n   *\n   * A `<button>` element or a Wave `Button` passed here is not nested (a button cannot contain a\n   * button): its props are merged into the dismiss button (its `onClick` runs first and can call\n   * `preventDefault()` to skip `onDismiss`) and a development warning recommends icon content.\n   * A Wave `Button`'s own props are not attributes: its `icon` becomes decorative content before\n   * its children (after them with `iconPosition=\"after\"`), `disabledFocusable` makes the dismiss\n   * button unavailable but focusable as on the Button (`onDismiss` is not called), and\n   * `appearance` and `size` are ignored.\n   * A slot object with button props (`type`, `disabled`, event handlers, `as: 'button'` or\n   * `as: Button`) is the deprecated 0.4 button-object form: its props (`className`, `id`,\n   * `aria-*`, handlers, …) are merged onto the dismiss button, except its content (`children`,\n   * `dangerouslySetInnerHTML`, rendered inside the button) and the naming attributes (see below);\n   * for `as: Button`, the Button's own props apply as for a `Button` element — pass icon content\n   * and use `onDismiss` instead.\n   * The `aria-*` attributes of an icon slot object also go to the dismiss button, because the icon\n   * is `aria-hidden`.\n   *\n   * The dismiss button's name is `dismissLabel` plus the tag's text (\"Dismiss Cherry\"):\n   * `aria-label` and `aria-labelledby` on the slot are ignored (development warning). Icon\n   * content is decorative (`aria-hidden`). The children of a merged `<button>`/`Button` (or its\n   * `dangerouslySetInnerHTML` markup) are rendered as is inside the dismiss button, next to the\n   * decorative `icon` of a Wave `Button`: when they render a text label (at least two letters or\n   * digits outside `aria-hidden`/`hidden` content, text from components such as translations\n   * included), that text replaces `dismissLabel` in the name, so the name contains the visible\n   * label (WCAG 2.5.3): `<button>Remove</button>` or\n   * `<Button icon={<CloseIcon />}>Remove</Button>` on \"Cherry\" is named \"Remove Cherry\". An icon or\n   * a lone character (`x`, `×`) keeps \"Dismiss Cherry\". Text hidden only with CSS still counts as\n   * the label.\n   *\n   * When the slot renders no content (`[]`, `<></>`, a childless merged button, a slot object\n   * without `children`), the default dismiss icon is shown; a slot object then styles it, e.g.\n   * `{ className: 'text-error' }`. A slot object that renders a component or a void element\n   * (`{ as: CloseIcon }`, `{ as: 'img', src, alt: '' }`) or sets `dangerouslySetInnerHTML` is the\n   * icon itself: no default icon is added. Only takes effect with `dismissible`.\n   */\n  dismissIcon?: Slot<'span'> | SlotObject<'button'>;\n  /**\n   * Visually hidden text that names the dismiss button together with the tag's text (its\n   * children; not `media`, `icon` or `secondaryText`; `aria-labelledby`), e.g. \"Dismiss Cherry\".\n   * Localise it here. A text label rendered by a merged `<button>` slot replaces it (see\n   * `dismissIcon`). TagPicker names the Dismiss buttons of the tags it renders itself with its\n   * `labels.remove`.\n   * @default 'Dismiss'\n   */\n  dismissLabel?: string;\n}\n\n/**\n * Props of {@link Tag} rendered as `C` (default `'span'`). `TagProps` without a type argument is\n * the 0.4 name.\n */\nexport type TagProps<C extends React.ElementType = 'span'> = PolymorphicProps<C, TagOwnProps>;\n\n/** The props the implementation reads, for any `as` (the public typing is `PolymorphicComponent`). */\ntype TagImplProps = TagOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\ntype UnknownProps = Record<string, unknown>;\n\n/** Attributes that only make sense on the dismiss `<button>` itself. */\nconst BUTTON_ONLY_KEYS: ReadonlySet<string> = new Set([\n  'type',\n  'disabled',\n  'autoFocus',\n  'form',\n  'formAction',\n  'formEncType',\n  'formMethod',\n  'formNoValidate',\n  'formTarget',\n  'name',\n  'value',\n]);\n\nconst HANDLER_KEY = /^on[A-Z]/;\n\n/**\n * Naming attributes a slot cannot set: the Tag names its dismiss button itself\n * (`aria-labelledby` = `dismissLabel` + tag content, data-display#10), so these are dropped.\n */\nconst NAME_KEYS: ReadonlySet<string> = new Set(['aria-label', 'aria-labelledby']);\n\n/** The props of a merged `<button>` or Wave `Button` that the Tag reads itself. */\ninterface WaveButtonSlotProps extends UnknownProps {\n  icon?: Slot<'span'>;\n  iconPosition?: unknown;\n  disabledFocusable?: unknown;\n  children?: React.ReactNode;\n  dangerouslySetInnerHTML?: React.HTMLAttributes<HTMLElement>['dangerouslySetInnerHTML'];\n}\n\ninterface ResolvedDismissSlot {\n  /** Props merged onto the wired dismiss button (`null`: none). */\n  buttonProps: UnknownProps | null;\n  /** What renders inside the dismiss button. */\n  content: React.ReactNode;\n  /** Which development warning the slot needs. */\n  warning: 'button-element' | 'button-object' | null;\n  /** Whether the slot passed `aria-label`/`aria-labelledby`, which the Tag ignores. */\n  ignoredName: boolean;\n  /**\n   * `true` when the content is rendered as is (a merged `<button>`/`Button`), so a text label in it\n   * replaces `dismissLabel` in the name (C-SLOTS naming, WCAG 2.5.3); `false` when the content is\n   * decorative (`aria-hidden`).\n   */\n  contentMayName: boolean;\n  /**\n   * Whether the literal content contains a text label: the name for the server render and the\n   * first client render. After mount the rendered content decides.\n   */\n  literalTextLabel: boolean;\n  /**\n   * Whether a merged Wave `Button` set `disabledFocusable`: the dismiss button is then unavailable\n   * but focusable, as the Button would be.\n   */\n  disabledFocusable: boolean;\n}\n\nconst noop = () => {};\n\n/** `props` without the naming attributes, and whether any was set. */\nfunction withoutName(props: UnknownProps): { props: UnknownProps; ignoredName: boolean } {\n  const result: UnknownProps = {};\n  let ignoredName = false;\n  for (const [key, value] of Object.entries(props)) {\n    if (NAME_KEYS.has(key)) {\n      if (value !== undefined) ignoredName = true;\n    } else {\n      result[key] = value;\n    }\n  }\n  return { props: result, ignoredName };\n}\n\nconst iconClassName = 'inline-flex items-center justify-center';\n\nfunction isPlainObject(value: unknown): value is UnknownProps {\n  if (typeof value !== 'object' || value === null) return false;\n  if (React.isValidElement(value) || Symbol.iterator in value) return false;\n  const proto: unknown = Object.getPrototypeOf(value);\n  return proto === null || proto === Object.prototype;\n}\n\n/**\n * The decorative default dismiss glyph (12px, 10px at `extra-small`). It carries the dismiss icon\n * part class when it is the dismiss button's own content, not when the element of a slot object\n * wraps it.\n */\nfunction defaultDismissContent(glyphSize: number, className?: string): React.ReactNode {\n  return <DismissIcon size={glyphSize} className={className} />;\n}\n\n/**\n * Splits the dismissIcon slot into dismiss-button props and icon content (C-SLOTS). The icon\n * content is `aria-hidden`, so no attribute that means something to assistive technology stays on\n * it: button-form props go to the dismiss button, and so do the `aria-*` attributes of an icon slot\n * object; the naming attributes are dropped (see {@link NAME_KEYS}).\n *\n * Content that renders nothing (`[]`, `<></>`, a childless merged button, a slot object without\n * `children`) shows the default icon, so the dismiss button is never an empty, invisible Tab stop.\n *\n * @param glyphSize The size (px) of the default glyph, by the tag's size.\n */\nfunction resolveDismissSlot(\n  slot: TagOwnProps['dismissIcon'],\n  glyphSize: number,\n): ResolvedDismissSlot {\n  if (!slotRendersContent(slot)) {\n    return {\n      buttonProps: null,\n      content: defaultDismissContent(glyphSize, tagClassNames.dismissIcon),\n      warning: null,\n      ignoredName: false,\n      contentMayName: false,\n      literalTextLabel: false,\n      disabledFocusable: false,\n    };\n  }\n\n  // A `<button>` or a Wave `Button` (also one written in a Server Component, whose type arrives as\n  // a lazy reference) is merged into the dismiss button. Its content is rendered as is, after the\n  // Button's icon, which is decorative (as in MessageBar and SearchBox); its text label names it.\n  const elementType = getElementType(slot as React.ReactNode);\n  if (\n    React.isValidElement<WaveButtonSlotProps>(slot) &&\n    (elementType === 'button' || elementType === Button)\n  ) {\n    const { children, dangerouslySetInnerHTML: markup, ...elementProps } = slot.props;\n    const isWaveButton = elementType === Button;\n    let slotProps: UnknownProps = elementProps;\n    if (isWaveButton) {\n      // Wave Button's own props are not attributes: `icon`, `iconPosition` and\n      // `disabledFocusable` are applied here, the others (`appearance`, `size`) are dropped.\n      slotProps = {};\n      for (const [key, value] of Object.entries(elementProps)) {\n        if (!BUTTON_OWN_PROP_KEYS.has(key)) slotProps[key] = value;\n      }\n    }\n    const icon = isWaveButton ? elementProps.icon : undefined;\n    const { props: buttonProps, ignoredName } = withoutName(slotProps);\n    const iconNode = slotRendersContent(icon)\n      ? renderSlot(icon, 'span', cn(tagClassNames.dismissIcon, iconClassName), {\n          'aria-hidden': true,\n        })\n      : null;\n    // A generator is read once by the check; its items are what renders (and names the button).\n    // Markup of the merged button (`dangerouslySetInnerHTML`) is its content as well: the dismiss\n    // button holds its own name text, so the markup renders in a span inside it.\n    const ownContent =\n      markup != null ? (\n        <span className={iconClassName} dangerouslySetInnerHTML={markup} />\n      ) : (\n        materialiseSlotContent(children)\n      );\n    return {\n      buttonProps,\n      content:\n        iconNode || slotRendersContent(ownContent)\n          ? placeButtonIcon(iconNode, ownContent, isWaveButton && elementProps.iconPosition)\n          : defaultDismissContent(glyphSize, tagClassNames.dismissIcon),\n      warning: 'button-element',\n      ignoredName,\n      contentMayName: true,\n      literalTextLabel: hasTextLabel(ownContent),\n      disabledFocusable: isWaveButton && Boolean(elementProps.disabledFocusable),\n    };\n  }\n\n  if (isPlainObject(slot)) {\n    // 0.4 rendered the whole object as the dismiss element, so an object with button props\n    // describes the button: everything but its content goes to the dismiss button. `as: Button`\n    // is that form too (a button cannot contain a button); its icon becomes decorative content.\n    const asWaveButton = slot.as === Button;\n    const isButtonObject =\n      slot.as === 'button' ||\n      asWaveButton ||\n      Object.keys(slot).some((key) => BUTTON_ONLY_KEYS.has(key) || HANDLER_KEY.test(key));\n    const buttonProps: UnknownProps = {};\n    const contentProps: UnknownProps = {};\n    // Wave Button's own props are not attributes: `icon`, `iconPosition` and `disabledFocusable`\n    // are applied below, the others (`appearance`, `size`) are dropped.\n    const ownProps: UnknownProps = {};\n    let ignoredName = false;\n    for (const [key, value] of Object.entries(slot)) {\n      if (key === 'as') {\n        if (value !== 'button' && !asWaveButton) contentProps.as = value;\n      } else if (asWaveButton && BUTTON_OWN_PROP_KEYS.has(key)) {\n        ownProps[key] = value;\n      } else if (NAME_KEYS.has(key)) {\n        if (value !== undefined) ignoredName = true;\n      } else if (key === 'children' || key === 'dangerouslySetInnerHTML') {\n        // Content, also in the button-object form: the dismiss button holds its own name text.\n        contentProps[key] = value;\n      } else if (isButtonObject || (key.startsWith('aria-') && key !== 'aria-hidden')) {\n        buttonProps[key] = value;\n      } else {\n        contentProps[key] = value;\n      }\n    }\n    // An object without content styles the default icon, e.g. `{ className: 'text-error' }` (as in\n    // MessageBar and SearchBox); a Wave Button's icon comes before the content (after it with\n    // `iconPosition=\"after\"`).\n    // The dismiss icon part is the merged Button's icon element when there is one, else the\n    // element this slot object renders (a default glyph inside it stays without the part class).\n    const hasButtonIcon = slotRendersContent(ownProps.icon);\n    if (hasButtonIcon) {\n      contentProps.children = placeButtonIcon(\n        renderSlot(\n          ownProps.icon as Slot<'span'>,\n          'span',\n          cn(tagClassNames.dismissIcon, iconClassName),\n        ),\n        materialiseSlotContent(contentProps.children),\n        ownProps.iconPosition,\n      );\n    } else if (slotWrapsDefaultContent(contentProps.as ?? 'span', contentProps)) {\n      contentProps.children = defaultDismissContent(glyphSize);\n    }\n    return {\n      buttonProps: isButtonObject || Object.keys(buttonProps).length > 0 ? buttonProps : null,\n      content: renderSlot(\n        contentProps as SlotObject<'span'>,\n        'span',\n        cn(!hasButtonIcon && tagClassNames.dismissIcon, iconClassName),\n        { 'aria-hidden': true },\n      ),\n      warning: isButtonObject ? 'button-object' : null,\n      ignoredName,\n      contentMayName: false,\n      literalTextLabel: false,\n      disabledFocusable: Boolean(ownProps.disabledFocusable),\n    };\n  }\n\n  return {\n    buttonProps: null,\n    content: renderSlot(\n      slot as Slot<'span'>,\n      'span',\n      cn(tagClassNames.dismissIcon, iconClassName),\n      {\n        'aria-hidden': true,\n      },\n    ),\n    warning: null,\n    ignoredName: false,\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: false,\n  };\n}\n\n/** Elements that take a native `disabled`: a Tag rendered as one of them receives `disabled`. */\nconst NATIVE_DISABLED_ELEMENTS: ReadonlySet<string> = new Set([\n  'button',\n  'fieldset',\n  'input',\n  'optgroup',\n  'option',\n  'select',\n  'textarea',\n]);\n\n/** Elements that take a native `value`: a Tag rendered as one of them receives `value`. */\nconst NATIVE_VALUE_ELEMENTS: ReadonlySet<string> = new Set([\n  'button',\n  'data',\n  'input',\n  'li',\n  'meter',\n  'option',\n  'progress',\n  'select',\n  'textarea',\n]);\n\n/**\n * Spread last on the Dismiss button of a disabled tag: the native `disabled`, whatever a merged\n * slot passed (a merged `disabledFocusable`, `disabled={false}`), without the attributes of the\n * focusable disabled state.\n */\nconst NATIVELY_DISABLED_PROPS = {\n  disabled: true,\n  'aria-disabled': undefined,\n  'data-disabled': undefined,\n  'data-disabled-focusable': undefined,\n};\n\ntype FocusHandler = (event: React.FocusEvent<HTMLElement>) => void;\n\n/** Whether `value` is a key of `table` (an untyped value outside a union falls back). */\nfunction isKeyOf<K extends string>(\n  value: unknown,\n  table: Readonly<Record<K, unknown>>,\n): value is K {\n  return typeof value === 'string' && Object.hasOwn(table, value);\n}\n\n/**\n * Prevents and stops the click of a disabled link root, or of a held button root, as a natively\n * disabled control's.\n */\nfunction blockRootClick(event: React.MouseEvent<HTMLElement>) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\n/** Props of {@link TagDismissButton}. */\ninterface TagDismissButtonProps {\n  /** The button's own props merged with the props of a merged slot. */\n  buttonProps: UnknownProps;\n  /** What renders inside the button: the default glyph, the slot's icon or a merged button's content. */\n  content: React.ReactNode;\n  /** Whether a text label in `content` names the button (the content of a merged button). */\n  contentMayName: boolean;\n  /** Whether the literal `content` holds a text label: the server render and the first render. */\n  literalTextLabel: boolean;\n  /** Whether a merged Wave `Button` set `disabledFocusable`. */\n  disabledFocusable: boolean;\n  /** The tag's effective `disabled`. */\n  disabled: boolean;\n  /** The visually hidden first half of the name. */\n  dismissLabel: string;\n  /** The id of the tag's primary text, the second half of the name. */\n  contentId: string;\n  /** A host's whole name for the button (`TagHostContext`): `aria-label` alone. */\n  dismissName: string | undefined;\n  /** Receives the button, so the tag's root can click it (Delete on a link in the tag's text). */\n  buttonRef: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * The tag's Dismiss button (internal): named by `dismissLabel`, or a merged button's text label,\n * plus the tag's text; natively disabled with its tag, and kept focusable while it has focus.\n */\nfunction TagDismissButton({\n  buttonProps,\n  content,\n  contentMayName,\n  literalTextLabel,\n  disabledFocusable,\n  disabled,\n  dismissLabel,\n  contentId,\n  dismissName,\n  buttonRef,\n}: TagDismissButtonProps) {\n  const dismissLabelId = useId('tag-dismiss');\n  const dismissTextId = useId('tag-dismiss-text');\n  const { ref: slotRef, ...ownProps } = buttonProps;\n  const ownRef = React.useRef<HTMLButtonElement>(null);\n  const mergedRef = useMergedRefs(ownRef, buttonRef, slotRef as React.Ref<HTMLButtonElement>);\n  // Unmounting while it has focus (`dismissible` turning `false`), the button hands focus to its\n  // tag's own control (a link in the text), else, in a TagGroup, to the next tag (D35).\n  useDismissControlFocus(ownRef);\n\n  // C-SLOTS naming (WCAG 2.5.3 Label in Name): the rendered text label of a merged button replaces\n  // `dismissLabel` in the name (\"Remove Cherry\"). The literal content decides on the server and on\n  // the first render; after mount, the rendered content does (text from components, later changes).\n  const [labelTarget, setLabelTarget] = React.useState<HTMLSpanElement | null>(null);\n  const subscribeToContent = React.useCallback(\n    (onChange: () => void) => (labelTarget ? observeTextLabel(labelTarget, onChange) : noop),\n    [labelTarget],\n  );\n  const contentHasTextLabel = React.useSyncExternalStore(\n    subscribeToContent,\n    () => (labelTarget ? hasRenderedTextLabel(labelTarget) : literalTextLabel),\n    () => literalTextLabel,\n  );\n  const namedByContent = contentMayName && contentHasTextLabel;\n\n  // A disabled tag disables its button natively (spread last, so no merged slot re-enables it);\n  // a button that has focus when its tag is disabled keeps it, unavailable, until focus leaves\n  // it (the browser would drop focus to the page). Otherwise a merged `disabledFocusable` Button\n  // makes it unavailable but focusable (it wins over `disabled` and `onDismiss`).\n  const hold = useHeldFocus(disabled);\n  const stateProps = disabled\n    ? hold.held\n      ? MERGED_DISABLED_FOCUSABLE_PROPS\n      : NATIVELY_DISABLED_PROPS\n    : disabledFocusable\n      ? MERGED_DISABLED_FOCUSABLE_PROPS\n      : undefined;\n\n  // A host's name (TagPicker's `labels.remove`) is the whole name: no hidden label text joins the\n  // tag's own text content.\n  const named = dismissName !== undefined;\n  return (\n    <button\n      {...ownProps}\n      ref={mergedRef}\n      type={(ownProps.type as 'button' | 'submit' | 'reset' | undefined) ?? 'button'}\n      {...stateProps}\n      aria-label={named ? dismissName : undefined}\n      aria-labelledby={\n        named ? undefined : `${namedByContent ? dismissTextId : dismissLabelId} ${contentId}`\n      }\n      onFocus={composeEventHandlers(ownProps.onFocus as FocusHandler | undefined, hold.onFocus, {\n        checkDefaultPrevented: false,\n      })}\n      onBlur={composeEventHandlers(ownProps.onBlur as FocusHandler | undefined, hold.onBlur, {\n        checkDefaultPrevented: false,\n      })}\n    >\n      {!named && (\n        <span id={dismissLabelId} className=\"sr-only\">\n          {dismissLabel}\n        </span>\n      )}\n      {contentMayName ? (\n        // The merged button's own content, rendered as is: its text label can name the button.\n        // `gap-[inherit]` keeps a gap set on the button between the content items.\n        <span\n          id={dismissTextId}\n          ref={setLabelTarget}\n          className=\"inline-flex items-center justify-center gap-[inherit]\"\n        >\n          {content}\n        </span>\n      ) : (\n        content\n      )}\n    </button>\n  );\n}\nTagDismissButton.displayName = 'TagDismissButton';\n\n/** Elements that never take the `listitem` role in a list TagGroup: interactive, or a list item already. */\nconst NO_LIST_ITEM_ROLE_ELEMENTS: ReadonlySet<string> = new Set([\n  'a',\n  'button',\n  'input',\n  'select',\n  'textarea',\n  'li',\n]);\n\n/** `Tag:nested-button` for a dismissible tag whose element is a button. */\nconst NESTED_IN_BUTTON_MESSAGE =\n  'Tag: `as=\"button\"` with `dismissible` puts the Dismiss button inside a button. Use InteractionTag instead: `InteractionTag.Primary` for the action, `InteractionTag.Secondary` for Dismiss.';\n\n/** `Tag:nested-button` for a dismissible tag whose element is a link. */\nconst NESTED_IN_LINK_MESSAGE =\n  'Tag: a dismissible tag rendered as a link (`as=\"a\"` or a link component) puts the Dismiss button inside the link. Put the link in the tag\\'s content: `<Tag dismissible><a href>…</a></Tag>`.';\n\nconst LIST_ITEM_MESSAGE =\n  'TagGroup: a tag in a `role=\"list\"` group is not a list item (its element is a link, a button or a component). Put a link in the tag\\'s content (`<Tag><a href>…</a></Tag>`), or wrap the tag in an element with `role=\"listitem\"`.';\n\n/**\n * Whether a tag root in a list TagGroup is a list item: it has the role, or an element between it\n * and the group root has it (a wrapping `<li>` or `role=\"listitem\"` element), as the list requires\n * of its children.\n */\nfunction isInListItem(root: HTMLElement): boolean {\n  for (\n    let element: HTMLElement | null = root;\n    element && !element.matches(TAG_GROUP_SELECTOR);\n    element = element.parentElement\n  ) {\n    if (element.getAttribute('role') === 'listitem' || element.localName === 'li') return true;\n  }\n  return false;\n}\n\n/**\n * A compact label (a \"chip\") for a keyword, category or filter, optionally dismissible.\n *\n * - The dismiss button is a real `<button type=\"button\">` wired to `onDismiss`. Its accessible\n *   name is `dismissLabel` plus the tag's text (its children; not `media`, `icon` or\n *   `secondaryText`): \"Dismiss Cherry\", so a row of tags has distinguishable dismiss buttons.\n *   Enter, Space, Delete and Backspace on it dismiss the tag (a held key dismisses once), and so do\n *   Delete and Backspace on a link in the tag's text.\n * - `dismissIcon` replaces only the icon inside that button (see {@link TagOwnProps.dismissIcon}).\n * - The look: `appearance` (`filled`, `outline` or `brand`), `size` (28, 24 or 20px tall),\n *   `shape` (`circular` or `rounded`) and the look-only `selected`, rendered as `data-appearance`,\n *   `data-size`, `data-shape` and `data-selected`. `disabled` dims the tag and disables its\n *   dismiss button natively (`data-disabled`).\n * - Slots before and under the text: `media` (an Avatar, sized for the tag), a decorative `icon`\n *   and a second line, `secondaryText`.\n * - In a TagGroup, a tag takes the group's `size`, `appearance`, `shape` and `dismissible` unless\n *   it sets its own, is disabled with the group, reports its dismissal to the group's\n *   `onDismiss(value)`, and is a list item in a `role=\"list\"` group.\n * - Polymorphic: `as=\"a\"` renders a link chip with anchor props type-checked. A dismissible link\n *   chip puts the link in the content, `<Tag dismissible><a href>…</a></Tag>`: a dismiss button\n *   cannot sit inside a link.\n *\n * **Focus after dismissal.** A tag cannot keep focus once you remove it. In a TagGroup, focus\n * moves to the next tag for you (else the previous one, else the group's `fallbackFocusRef`). For\n * a standalone tag, move focus to the next tag's dismiss button, else the previous one, else a\n * nearby control, then remove the tag: the neighbour stays mounted, so you can focus it in\n * `onDismiss` before removing the tag.\n *\n * @example\n * <Tag>React</Tag>\n * <Tag appearance=\"brand\" size=\"small\">Beta</Tag>\n * <Tag dismissible onDismiss={() => remove('cherry')}>Cherry</Tag>\n * <Tag media={<Avatar name=\"Katri Athokas\" />} secondaryText=\"Designer\">Katri</Tag>\n * <Tag dismissible dismissLabel=\"Remove\" dismissIcon={<CloseIcon />}>Cherry</Tag>\n */\nexport const Tag: PolymorphicComponent<'span', TagOwnProps> = (props) => {\n  const {\n    as,\n    appearance: appearanceProp,\n    size: sizeProp,\n    shape: shapeProp,\n    disabled: disabledProp,\n    selected = false,\n    value,\n    media,\n    icon,\n    secondaryText,\n    dismissible: dismissibleProp,\n    onDismiss,\n    dismissIcon,\n    dismissLabel = 'Dismiss',\n    className,\n    children,\n    role,\n    hidden,\n    onClick,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    ref,\n    ...rest\n  } = props as TagImplProps;\n  const Component: React.ElementType = as ?? 'span';\n  const contentId = useId('tag-content');\n  const group = useTagGroupContext();\n  const host = React.useContext(TagHostContext);\n  const rootRef = React.useRef<HTMLElement>(null);\n  const mergedRef = useMergedRefs<HTMLElement>(rootRef, ref);\n  const primaryTextRef = React.useRef<HTMLSpanElement>(null);\n  const dismissButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  // The tag's own look, else its TagGroup's, else the 0.10 look.\n  const size: TagSize = isKeyOf(sizeProp, tagSizeClasses) ? sizeProp : (group?.size ?? 'medium');\n  const appearance: TagAppearance = isKeyOf(appearanceProp, tagAppearanceClasses)\n    ? appearanceProp\n    : (group?.appearance ?? 'filled');\n  const shape: TagShape = isKeyOf(shapeProp, tagShapeClasses)\n    ? shapeProp\n    : (group?.shape ?? 'circular');\n  // A disabled group disables every tag: a tag's own `disabled={false}` cannot re-enable it.\n  const disabled = (group?.disabled ?? false) || disabledProp === true;\n  const dismissible = dismissibleProp ?? group?.dismissible ?? false;\n  // Disabled wins over the selected look; both attributes still reflect the props.\n  const look: TagLook = selected && !disabled ? 'selected' : appearance;\n  // A host that dims the area holding its tags (TagPicker's disabled control) dims them once.\n  const dimDisabled = group?.dimDisabled ?? true;\n\n  const reportedValue = useTagGroupItem(rootRef, value, {\n    reported: dismissible && (group?.reportsDismissals ?? false),\n  });\n\n  // A link root is disabled as Nav.Item's link is: `aria-disabled`, `role=\"link\"` and no `href`,\n  // so it leaves the Tab order. One that has focus when it is disabled keeps its `href`, and\n  // focus, until focus leaves it; so does a button root, which is natively disabled otherwise\n  // (the browser would drop its focus to the page).\n  const isLinkRoot = Component === 'a';\n  const linkDisabled = isLinkRoot && disabled;\n  const isButtonRoot = Component === 'button';\n  const rootHold = useHeldFocus((isLinkRoot || isButtonRoot) && disabled);\n  const buttonRootHeld = isButtonRoot && rootHold.held;\n\n  const {\n    buttonProps: slotButtonProps,\n    content,\n    warning,\n    ignoredName,\n    contentMayName,\n    literalTextLabel,\n    disabledFocusable,\n  } = resolveDismissSlot(dismissible ? dismissIcon : undefined, TAG_DISMISS_GLYPH_SIZE[size]);\n\n  React.useEffect(() => {\n    if (warning === 'button-element') {\n      warnOnce(\n        'Tag:dismissIcon-button',\n        'Tag: `dismissIcon` received a button. Its props were merged into the built-in dismiss button (a button cannot contain another button), which is named by its text label (or `dismissLabel`) and the tag content. Pass icon content instead, e.g. `dismissIcon={<CloseIcon />}`, and handle the dismissal in `onDismiss`.',\n      );\n    } else if (warning === 'button-object') {\n      warnDeprecated(\n        'Tag',\n        'dismissIcon={{ onClick, type, disabled, … }} (button props on the slot object)',\n        'onDismiss and icon content in dismissIcon',\n        'Its props are merged onto the built-in dismiss button, which is named by `dismissLabel` and the tag content.',\n      );\n    }\n  }, [warning]);\n\n  // `onDismiss`/`dismissIcon` alone render no dismiss button (unlike MessageBar's `onDismiss`).\n  // An explicit `dismissible={false}` is a deliberate state, and a dismissible TagGroup makes the\n  // tag dismissible, so only a missing flag warns.\n  const dismissPropsIgnored =\n    dismissibleProp === undefined &&\n    !(group?.dismissible ?? false) &&\n    (onDismiss !== undefined || dismissIcon !== undefined);\n  React.useEffect(() => {\n    if (dismissPropsIgnored) {\n      warnOnce(\n        'Tag:dismiss-without-dismissible',\n        'Tag: `onDismiss` and `dismissIcon` take effect only with `dismissible`; no dismiss button was rendered. Add `dismissible` to render it.',\n      );\n    }\n  }, [dismissPropsIgnored]);\n\n  React.useEffect(() => {\n    if (ignoredName) {\n      warnOnce(\n        'Tag:dismissIcon-name',\n        'Tag: `aria-label`/`aria-labelledby` on `dismissIcon` are ignored. The dismiss button is named by `dismissLabel` (default \"Dismiss\") and the tag content, e.g. \"Dismiss Cherry\"; set `dismissLabel` to change or localise it.',\n      );\n    }\n  }, [ignoredName]);\n\n  // A Dismiss button inside a link or a button is interactive content inside interactive content\n  // (and joins the link's name): the rendered element decides, so a link or button component\n  // counts too. The 0.10 DOM still renders.\n  React.useEffect(() => {\n    if (!dismissible || !isDev || hasWarned('Tag:nested-button')) return;\n    const element = rootRef.current?.localName;\n    if (element === 'button') warnOnce('Tag:nested-button', NESTED_IN_BUTTON_MESSAGE);\n    else if (element === 'a') warnOnce('Tag:nested-button', NESTED_IN_LINK_MESSAGE);\n  });\n\n  // A list's children must be list items (axe `aria-required-children`): a tag whose element\n  // takes no `listitem` role (a link, a button, a component) needs a wrapping list item.\n  const inList = group?.mode === 'list';\n  React.useEffect(() => {\n    if (!inList || !isDev || hasWarned('TagGroup:list-item')) return;\n    const root = rootRef.current;\n    if (root && !isInListItem(root)) warnOnce('TagGroup:list-item', LIST_ITEM_MESSAGE);\n  });\n\n  // Slots that render nothing (`''`, `[]`, `<></>`, an empty generator) render no element and\n  // take no room.\n  const hasMedia = slotRendersContent(media);\n  const hasIcon = slotRendersContent(icon);\n  const secondary = materialiseSlotContent(secondaryText);\n  const hasSecondary = slotRendersContent(secondary);\n  const avatarBox = React.useMemo(() => ({ size: TAG_AVATAR_SIZE[size] }), [size]);\n\n  // `disabled` and `value` are Tag props: they reach only an element that takes them natively,\n  // or a component, never the default span or an anchor.\n  const takesNative = (elements: ReadonlySet<string>) =>\n    typeof Component !== 'string' || elements.has(Component);\n  const elementProps: UnknownProps = {};\n  if (takesNative(NATIVE_DISABLED_ELEMENTS) && (disabled || disabledProp !== undefined)) {\n    elementProps.disabled = disabled && !buttonRootHeld;\n  }\n  if (buttonRootHeld) {\n    // The focusable disabled state, its click blocked below (D25).\n    elementProps['aria-disabled'] = true;\n    elementProps['data-disabled-focusable'] = '';\n  }\n  if (value !== undefined && takesNative(NATIVE_VALUE_ELEMENTS)) elementProps.value = value;\n  if (linkDisabled) {\n    elementProps['aria-disabled'] = true;\n    if (rootHold.held) {\n      elementProps['data-disabled-focusable'] = '';\n    } else {\n      elementProps.href = undefined;\n      elementProps.role = 'link';\n    }\n  }\n\n  // In a list TagGroup the root is a list item, unless its element is interactive or a list item\n  // already, or a component; the consumer's role wins.\n  const listItemRole =\n    inList && typeof Component === 'string' && !NO_LIST_ITEM_ROLE_ELEMENTS.has(Component)\n      ? 'listitem'\n      : undefined;\n  // A host hides the tags it counts instead of showing them (TagPicker's `overflow=\"count\"`).\n  const hiddenByHost = value !== undefined && (group?.hiddenValues?.has(value) ?? false);\n\n  const handleClick =\n    linkDisabled || buttonRootHeld\n      ? (event: React.MouseEvent<HTMLElement>) => {\n          // A click from a portal opened inside the tag is not the root's (C-COMPOSE).\n          if (isOwnEvent(event)) blockRootClick(event);\n          else onClick?.(event);\n        }\n      : onClick;\n\n  // Delete and Backspace on a focused element in the tag's text (a link chip's link) dismiss the\n  // tag through its Dismiss button's click, which a disabled or held button blocks; never from an\n  // editable field (its Backspace edits), the Dismiss button's own keys or a portal opened inside.\n  const handleRootKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    const text = primaryTextRef.current;\n    const button = dismissButtonRef.current;\n    if (!text || !button || !isDismissKey(event)) return;\n    if (!text.contains(event.target as Node) || isEditableTarget(event.target)) return;\n    event.preventDefault();\n    button.click();\n  });\n\n  const ownButtonProps: UnknownProps = {\n    type: 'button',\n    'data-wave-tag-dismiss': '',\n    className: cn(\n      tagClassNames.dismissButton,\n      TAG_DISMISS_BASE_CLASSES,\n      tagDismissSizeClasses[size],\n      // A disabled tag dims itself, so its button dims nothing more and has no hover.\n      !disabled && ['disabled:opacity-50', mergedAriaDisabledClasses, tagDismissStateClasses[look]],\n      focusRing,\n      tagDismissRingClasses[size],\n      look === 'selected' && TAG_DISMISS_SELECTED_RING_CLASSES,\n      host?.dismissButtonClassName,\n    ),\n    // Delete and Backspace dismiss as Enter does: through the button's own click, so whatever\n    // cancels a click (a merged slot's `preventDefault()`, a held or disabled button) cancels\n    // them too. A held key dismisses one tag: the browser clicks a button on every repeated\n    // Enter, which would reach the next tag's Dismiss button once focus moved there (D35).\n    onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (event.target !== event.currentTarget) return;\n      if (isRepeatedActivation(event)) {\n        event.preventDefault();\n        return;\n      }\n      if (!isDismissKey(event)) return;\n      event.preventDefault();\n      event.currentTarget.click();\n    },\n  };\n  if (onDismiss || group) {\n    // The tag's own `onDismiss` first, then the group's `onDismiss(value)`, in the same click.\n    ownButtonProps.onClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      if (!isOwnEvent(event)) return;\n      onDismiss?.();\n      group?.dismiss(reportedValue);\n    };\n  }\n  const dismissButtonProps = slotButtonProps\n    ? mergeProps(ownButtonProps, slotButtonProps)\n    : ownButtonProps;\n\n  const primaryText = (\n    <span\n      id={contentId}\n      ref={primaryTextRef}\n      className={cn(\n        tagClassNames.primaryText,\n        'inline-flex items-center gap-1',\n        hasSecondary && TAG_PRIMARY_TEXT_TWO_LINE_CLASSES,\n      )}\n    >\n      {children}\n    </span>\n  );\n\n  return (\n    <Component\n      data-size={size}\n      data-appearance={appearance}\n      data-shape={shape}\n      data-selected={selected ? '' : undefined}\n      data-disabled={disabled ? '' : undefined}\n      data-wave-tag-item=\"\"\n      role={role ?? listItemRole}\n      hidden={hiddenByHost || hidden}\n      {...rest}\n      {...elementProps}\n      ref={mergedRef}\n      className={cn(\n        tagClassNames.root,\n        TAG_ROOT_BASE_CLASSES,\n        tagSizeClasses[size],\n        tagStartInsetClasses[size][hasMedia ? 'media' : hasIcon ? 'icon' : 'text'],\n        tagEndInsetClasses[size][dismissible ? 'dismiss' : 'text'],\n        look === 'selected'\n          ? [TAG_SELECTED_CLASSES, forcedColors.selectedContainer]\n          : tagAppearanceClasses[appearance],\n        disabled && [dimDisabled && TAG_DISABLED_DIM_CLASSES, forcedColors.disabled],\n        tagShapeClasses[shape],\n        className,\n      )}\n      onClick={handleClick}\n      onKeyDown={composeEventHandlers(onKeyDown, handleRootKeyDown)}\n      onFocus={composeEventHandlers(onFocus, rootHold.onFocus, { checkDefaultPrevented: false })}\n      onBlur={composeEventHandlers(onBlur, rootHold.onBlur, { checkDefaultPrevented: false })}\n    >\n      {hasMedia && (\n        // An Avatar without its own `size` takes the tag's box; one in `children` keeps its size.\n        <AvatarSizeContext.Provider value={avatarBox}>\n          {renderSlot(media, 'span', cn(tagClassNames.media, tagMediaClasses[size]))}\n        </AvatarSizeContext.Provider>\n      )}\n      {hasIcon &&\n        renderSlot(icon, 'span', cn(tagClassNames.icon, tagIconClasses[size]), {\n          'aria-hidden': true,\n        })}\n      {hasSecondary ? (\n        <span className={TAG_TEXT_COLUMN_CLASSES}>\n          {primaryText}\n          <span className={cn(tagClassNames.secondaryText, TAG_SECONDARY_TEXT_CLASSES)}>\n            {secondary}\n          </span>\n        </span>\n      ) : (\n        primaryText\n      )}\n      {dismissible && (\n        <TagDismissButton\n          buttonProps={dismissButtonProps}\n          content={content}\n          contentMayName={contentMayName}\n          literalTextLabel={literalTextLabel}\n          disabledFocusable={disabledFocusable}\n          disabled={disabled}\n          dismissLabel={dismissLabel}\n          contentId={contentId}\n          dismissName={host?.dismissName}\n          buttonRef={dismissButtonRef}\n        />\n      )}\n    </Component>\n  );\n};\n\nTag.displayName = 'Tag';\n"],"mappings":"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"}
+{"version":3,"file":"Tag.mjs","names":["useId","useId$1","React","BUTTON_ONLY_KEYS","HANDLER_KEY","NAME_KEYS","noop","withoutName","result","ignoredName","key","value","props","iconClassName","isPlainObject","proto","defaultDismissContent","DismissIcon","glyphSize","resolveDismissSlot","slotRendersContent","slot","tagClassNames","elementType","getElementType","Button","markup","elementProps","isWaveButton","slotProps","BUTTON_OWN_PROP_KEYS","icon","buttonProps","iconNode","renderSlot","cn","ownContent","materialiseSlotContent","children","placeButtonIcon","hasTextLabel","asWaveButton","isButtonObject","contentProps","ownProps","hasButtonIcon","slotWrapsDefaultContent","NATIVE_DISABLED_ELEMENTS","NATIVE_VALUE_ELEMENTS","NATIVELY_DISABLED_PROPS","isKeyOf","table","blockRootClick","event","TagDismissButton","dismissLabelId","dismissTextId","slotRef","ownRef","mergedRef","useMergedRefs","buttonRef","labelTarget","setLabelTarget","subscribeToContent","observeTextLabel","onChange","contentHasTextLabel","hasRenderedTextLabel","literalTextLabel","namedByContent","contentMayName","hold","useHeldFocus","disabled","stateProps","MERGED_DISABLED_FOCUSABLE_PROPS","disabledFocusable","named","dismissName","contentId","composeEventHandlers","dismissLabel","content","NO_LIST_ITEM_ROLE_ELEMENTS","NESTED_IN_BUTTON_MESSAGE","NESTED_IN_LINK_MESSAGE","LIST_ITEM_MESSAGE","isInListItem","element","root","Tag","appearanceProp","sizeProp","shapeProp","disabledProp","dismissibleProp","rest","Component","as","group","useTagGroupContext","host","TagHostContext","rootRef","ref","primaryTextRef","dismissButtonRef","size","tagSizeClasses","appearance","tagAppearanceClasses","shape","tagShapeClasses","dismissible","look","selected","dimDisabled","reportedValue","useTagGroupItem","isLinkRoot","linkDisabled","isButtonRoot","rootHold","buttonRootHeld","slotButtonProps","dismissIcon","TAG_DISMISS_GLYPH_SIZE","warning","warnOnce","warnDeprecated","dismissPropsIgnored","onDismiss","isDev","hasWarned","inList","hasMedia","media","hasIcon","secondary","secondaryText","hasSecondary","avatarBox","TAG_AVATAR_SIZE","takesNative","elements","listItemRole","hiddenByHost","handleClick","isOwnEvent","onClick","handleRootKeyDown","useEventCallback","text","button","isDismissKey","ownButtonProps","TAG_DISMISS_BASE_CLASSES","tagDismissSizeClasses","tagDismissStateClasses","focusRing","tagDismissRingClasses","isRepeatedActivation","dismissButtonProps","mergeProps","primaryText","role","hidden","TAG_ROOT_BASE_CLASSES","tagStartInsetClasses","tagEndInsetClasses","TAG_SELECTED_CLASSES","forcedColors","className","onKeyDown","onFocus","onBlur","AvatarSizeContext","tagMediaClasses","tagIconClasses","TAG_TEXT_COLUMN_CLASSES","TAG_SECONDARY_TEXT_CLASSES"],"sources":["../../../src/components/data-display/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { tagClassNames } from '../../lib/classNames';\nimport { hasWarned, isDev, warnDeprecated, warnOnce } from '../../lib/dev';\nimport { mergeProps } from '../../lib/mergeProps';\nimport { getElementType } from '../../lib/children';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { isEditableTarget, isOwnEvent } from '../../lib/events';\nimport {\n  materialiseSlotContent,\n  renderSlot,\n  slotRendersContent,\n  slotWrapsDefaultContent,\n} from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport { DismissIcon } from '../../lib/icons';\nimport { hasRenderedTextLabel, hasTextLabel, observeTextLabel } from '../../lib/labelInName';\nimport type { Slot, SlotObject } from '../../lib/slot';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { TagAppearance, TagShape, TagSize } from '../../lib/types';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { Button } from '../button/Button';\nimport {\n  BUTTON_OWN_PROP_KEYS,\n  MERGED_DISABLED_FOCUSABLE_PROPS,\n  mergedAriaDisabledClasses,\n  placeButtonIcon,\n} from '../button/Button.slots';\nimport { AvatarSizeContext } from './Avatar.context';\nimport {\n  TAG_GROUP_SELECTOR,\n  TagHostContext,\n  isDismissKey,\n  isRepeatedActivation,\n  useDismissControlFocus,\n  useHeldFocus,\n  useTagGroupContext,\n  useTagGroupItem,\n} from './TagGroup.context';\nimport {\n  TAG_AVATAR_SIZE,\n  TAG_DISABLED_DIM_CLASSES,\n  TAG_DISMISS_BASE_CLASSES,\n  TAG_DISMISS_GLYPH_SIZE,\n  TAG_DISMISS_SELECTED_RING_CLASSES,\n  TAG_PRIMARY_TEXT_TWO_LINE_CLASSES,\n  TAG_ROOT_BASE_CLASSES,\n  TAG_SECONDARY_TEXT_CLASSES,\n  TAG_SELECTED_CLASSES,\n  TAG_TEXT_COLUMN_CLASSES,\n  tagAppearanceClasses,\n  tagDismissRingClasses,\n  tagDismissSizeClasses,\n  tagDismissStateClasses,\n  tagEndInsetClasses,\n  tagIconClasses,\n  tagMediaClasses,\n  tagShapeClasses,\n  tagSizeClasses,\n  tagStartInsetClasses,\n} from './tagStyles';\nimport type { TagLook } from './tagStyles';\n\n/**\n * The Tag's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`, default `span`). The own props shadow\n * the element's attributes of the same names: `TagProps<'button'>['value']` is a `string`.\n */\nexport interface TagOwnProps {\n  /**\n   * Colour scheme: `filled` (a neutral fill), `outline` (a border on the surface behind it) or\n   * `brand` (a light brand tint that follows the brand ramp).\n   * @default the TagGroup's `appearance`, else 'filled'\n   */\n  appearance?: TagAppearance;\n  /**\n   * `medium` (28px tall, the 0.10 look), `small` (24px) or `extra-small` (20px); an Avatar in\n   * `media` is 24, 20 or 16px. Fluent's medium tag is 32px.\n   * @default the TagGroup's `size`, else 'medium'\n   */\n  size?: TagSize;\n  /**\n   * `circular` (a pill, the 0.10 look) or `rounded` (4px corners). Fluent's default is `rounded`.\n   * @default the TagGroup's `shape`, else 'circular'\n   */\n  shape?: TagShape;\n  /**\n   * Dims the tag and disables its Dismiss button natively (no `onDismiss`, out of the Tab\n   * order), whatever `dismissIcon` passes. A disabled TagGroup disables every tag. A Dismiss\n   * button that has focus when the tag is disabled keeps it, unavailable, until focus leaves it.\n   * Rendered as `data-disabled`. With `as=\"a\"` the link is disabled too: `aria-disabled=\"true\"`,\n   * `role=\"link\"`, no `href` (out of the Tab order) and no click; a link that has focus keeps it,\n   * and its `href`, until focus leaves it. With another `as`, an element that takes a native\n   * `disabled` (a `<button>`) or a component receives `disabled`; a `<button>` that has focus\n   * when it is disabled keeps it, unavailable (`aria-disabled`, no click), until focus leaves it.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Draws the selected look (the brand fill) and sets `data-selected`. A Tag is not interactive,\n   * so the state is not announced: for a tag the user selects, use `InteractionTag` (its\n   * `InteractionTag.Primary` is a toggle button). Disabled wins over the selected look.\n   * @default false\n   */\n  selected?: boolean;\n  /**\n   * Identifies the tag in a TagGroup: the value its `onDismiss` receives (without one, a generated\n   * id). Give every tag of a group its own value. Renders nothing on the default `<span>`; with\n   * `as`, an element that takes a native `value` (a `<button>`, an `<li>`) still receives it.\n   */\n  value?: string;\n  /**\n   * A visual before the text, usually an `Avatar`, which takes the tag's size (24, 20 or 16px)\n   * unless it sets its own `size`. Not interactive. It is not hidden from assistive technology:\n   * pass `decorative` to an Avatar whose name repeats the tag's text. Use `media` or `icon`, not\n   * both.\n   */\n  media?: Slot<'span'>;\n  /** A decorative icon before the text (`aria-hidden`), in a 20, 16 or 12px box. */\n  icon?: Slot<'span'>;\n  /**\n   * A second, smaller line under the text (`secondaryText=\"Designer\"`). It is not part of the\n   * Dismiss button's name. A small or extra-small tag grows to 28px to fit it.\n   */\n  secondaryText?: React.ReactNode;\n  /**\n   * Whether the tag renders a Dismiss button. `onDismiss` and `dismissIcon` take effect only with\n   * it (a development warning says so when they are passed without it). `dismissible={false}`\n   * opts a tag out of a dismissible TagGroup. A Dismiss button cannot sit inside a link or a\n   * button: a dismissible tag rendered as one holds it inside (a development warning). For a\n   * dismissible link chip, put the link in the content,\n   * `<Tag dismissible><a href=\"/topics/react\">React</a></Tag>`; for an action with a separate\n   * Dismiss button, use `InteractionTag`. Fluent's dismissible Tag is a single button that\n   * dismisses when it is activated.\n   * @default the TagGroup's `dismissible`, else `false`\n   */\n  dismissible?: boolean;\n  /**\n   * Called when the Dismiss button is activated: a click, Enter, Space, Delete or Backspace (a\n   * held key dismisses once). Passing it does not render the button: set `dismissible` too. In a\n   * TagGroup the group's `onDismiss(value)` is called after it, and focus moves to the next tag\n   * when the tag is removed. A standalone Tag cannot keep focus once you remove it: move focus\n   * yourself (see \"Focus after dismissal\" on {@link Tag}). Fluent's Tag dismisses on Delete and\n   * Backspace only inside a TagGroup.\n   */\n  onDismiss?: () => void;\n  /**\n   * Content of the dismiss button (an icon). The Tag always renders its own dismiss\n   * `<button type=\"button\">`, wired to `onDismiss` and named by `dismissLabel` plus the tag's text\n   * (its children; not `media`, `icon` or `secondaryText`); this slot only replaces the icon\n   * inside it.\n   *\n   * A `<button>` element or a Wave `Button` passed here is not nested (a button cannot contain a\n   * button): its props are merged into the dismiss button (its `onClick` runs first and can call\n   * `preventDefault()` to skip `onDismiss`) and a development warning recommends icon content.\n   * A Wave `Button`'s own props are not attributes: its `icon` becomes decorative content before\n   * its children (after them with `iconPosition=\"after\"`), `disabledFocusable` makes the dismiss\n   * button unavailable but focusable as on the Button (`onDismiss` is not called), and\n   * `appearance` and `size` are ignored.\n   * A slot object with button props (`type`, `disabled`, event handlers, `as: 'button'` or\n   * `as: Button`) is the deprecated 0.4 button-object form: its props (`className`, `id`,\n   * `aria-*`, handlers, …) are merged onto the dismiss button, except its content (`children`,\n   * `dangerouslySetInnerHTML`, rendered inside the button) and the naming attributes (see below);\n   * for `as: Button`, the Button's own props apply as for a `Button` element — pass icon content\n   * and use `onDismiss` instead.\n   * The `aria-*` attributes of an icon slot object also go to the dismiss button, because the icon\n   * is `aria-hidden`.\n   *\n   * The dismiss button's name is `dismissLabel` plus the tag's text (\"Dismiss Cherry\"):\n   * `aria-label` and `aria-labelledby` on the slot are ignored (development warning). Icon\n   * content is decorative (`aria-hidden`). The children of a merged `<button>`/`Button` (or its\n   * `dangerouslySetInnerHTML` markup) are rendered as is inside the dismiss button, next to the\n   * decorative `icon` of a Wave `Button`: when they render a text label (at least two letters or\n   * digits outside `aria-hidden`/`hidden` content, text from components such as translations\n   * included), that text replaces `dismissLabel` in the name, so the name contains the visible\n   * label (WCAG 2.5.3): `<button>Remove</button>` or\n   * `<Button icon={<CloseIcon />}>Remove</Button>` on \"Cherry\" is named \"Remove Cherry\". An icon or\n   * a lone character (`x`, `×`) keeps \"Dismiss Cherry\". Text hidden only with CSS still counts as\n   * the label.\n   *\n   * When the slot renders no content (`[]`, `<></>`, a childless merged button, a slot object\n   * without `children`), the default dismiss icon is shown; a slot object then styles it, e.g.\n   * `{ className: 'text-error' }`. A slot object that renders a component or a void element\n   * (`{ as: CloseIcon }`, `{ as: 'img', src, alt: '' }`) or sets `dangerouslySetInnerHTML` is the\n   * icon itself: no default icon is added. Only takes effect with `dismissible`.\n   */\n  dismissIcon?: Slot<'span'> | SlotObject<'button'>;\n  /**\n   * Visually hidden text that names the dismiss button together with the tag's text (its\n   * children; not `media`, `icon` or `secondaryText`; `aria-labelledby`), e.g. \"Dismiss Cherry\".\n   * Localise it here. A text label rendered by a merged `<button>` slot replaces it (see\n   * `dismissIcon`). TagPicker names the Dismiss buttons of the tags it renders itself with its\n   * `labels.remove`.\n   * @default 'Dismiss'\n   */\n  dismissLabel?: string;\n}\n\n/**\n * Props of {@link Tag} rendered as `C` (default `'span'`). `TagProps` without a type argument is\n * the 0.4 name.\n */\nexport type TagProps<C extends React.ElementType = 'span'> = PolymorphicProps<C, TagOwnProps>;\n\n/** The props the implementation reads, for any `as` (the public typing is `PolymorphicComponent`). */\ntype TagImplProps = TagOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\ntype UnknownProps = Record<string, unknown>;\n\n/** Attributes that only make sense on the dismiss `<button>` itself. */\nconst BUTTON_ONLY_KEYS: ReadonlySet<string> = new Set([\n  'type',\n  'disabled',\n  'autoFocus',\n  'form',\n  'formAction',\n  'formEncType',\n  'formMethod',\n  'formNoValidate',\n  'formTarget',\n  'name',\n  'value',\n]);\n\nconst HANDLER_KEY = /^on[A-Z]/;\n\n/**\n * Naming attributes a slot cannot set: the Tag names its dismiss button itself\n * (`aria-labelledby` = `dismissLabel` + tag content, data-display#10), so these are dropped.\n */\nconst NAME_KEYS: ReadonlySet<string> = new Set(['aria-label', 'aria-labelledby']);\n\n/** The props of a merged `<button>` or Wave `Button` that the Tag reads itself. */\ninterface WaveButtonSlotProps extends UnknownProps {\n  icon?: Slot<'span'>;\n  iconPosition?: unknown;\n  disabledFocusable?: unknown;\n  children?: React.ReactNode;\n  dangerouslySetInnerHTML?: React.HTMLAttributes<HTMLElement>['dangerouslySetInnerHTML'];\n}\n\ninterface ResolvedDismissSlot {\n  /** Props merged onto the wired dismiss button (`null`: none). */\n  buttonProps: UnknownProps | null;\n  /** What renders inside the dismiss button. */\n  content: React.ReactNode;\n  /** Which development warning the slot needs. */\n  warning: 'button-element' | 'button-object' | null;\n  /** Whether the slot passed `aria-label`/`aria-labelledby`, which the Tag ignores. */\n  ignoredName: boolean;\n  /**\n   * `true` when the content is rendered as is (a merged `<button>`/`Button`), so a text label in it\n   * replaces `dismissLabel` in the name (C-SLOTS naming, WCAG 2.5.3); `false` when the content is\n   * decorative (`aria-hidden`).\n   */\n  contentMayName: boolean;\n  /**\n   * Whether the literal content contains a text label: the name for the server render and the\n   * first client render. After mount the rendered content decides.\n   */\n  literalTextLabel: boolean;\n  /**\n   * Whether a merged Wave `Button` set `disabledFocusable`: the dismiss button is then unavailable\n   * but focusable, as the Button would be.\n   */\n  disabledFocusable: boolean;\n}\n\nconst noop = () => {};\n\n/** `props` without the naming attributes, and whether any was set. */\nfunction withoutName(props: UnknownProps): { props: UnknownProps; ignoredName: boolean } {\n  const result: UnknownProps = {};\n  let ignoredName = false;\n  for (const [key, value] of Object.entries(props)) {\n    if (NAME_KEYS.has(key)) {\n      if (value !== undefined) ignoredName = true;\n    } else {\n      result[key] = value;\n    }\n  }\n  return { props: result, ignoredName };\n}\n\nconst iconClassName = 'inline-flex items-center justify-center';\n\nfunction isPlainObject(value: unknown): value is UnknownProps {\n  if (typeof value !== 'object' || value === null) return false;\n  if (React.isValidElement(value) || Symbol.iterator in value) return false;\n  const proto: unknown = Object.getPrototypeOf(value);\n  return proto === null || proto === Object.prototype;\n}\n\n/**\n * The decorative default dismiss glyph (12px, 10px at `extra-small`). It carries the dismiss icon\n * part class when it is the dismiss button's own content, not when the element of a slot object\n * wraps it.\n */\nfunction defaultDismissContent(glyphSize: number, className?: string): React.ReactNode {\n  return <DismissIcon size={glyphSize} className={className} />;\n}\n\n/**\n * Splits the dismissIcon slot into dismiss-button props and icon content (C-SLOTS). The icon\n * content is `aria-hidden`, so no attribute that means something to assistive technology stays on\n * it: button-form props go to the dismiss button, and so do the `aria-*` attributes of an icon slot\n * object; the naming attributes are dropped (see {@link NAME_KEYS}).\n *\n * Content that renders nothing (`[]`, `<></>`, a childless merged button, a slot object without\n * `children`) shows the default icon, so the dismiss button is never an empty, invisible Tab stop.\n *\n * @param glyphSize The size (px) of the default glyph, by the tag's size.\n */\nfunction resolveDismissSlot(\n  slot: TagOwnProps['dismissIcon'],\n  glyphSize: number,\n): ResolvedDismissSlot {\n  if (!slotRendersContent(slot)) {\n    return {\n      buttonProps: null,\n      content: defaultDismissContent(glyphSize, tagClassNames.dismissIcon),\n      warning: null,\n      ignoredName: false,\n      contentMayName: false,\n      literalTextLabel: false,\n      disabledFocusable: false,\n    };\n  }\n\n  // A `<button>` or a Wave `Button` (also one written in a Server Component, whose type arrives as\n  // a lazy reference) is merged into the dismiss button. Its content is rendered as is, after the\n  // Button's icon, which is decorative (as in MessageBar and SearchBox); its text label names it.\n  const elementType = getElementType(slot as React.ReactNode);\n  if (\n    React.isValidElement<WaveButtonSlotProps>(slot) &&\n    (elementType === 'button' || elementType === Button)\n  ) {\n    const { children, dangerouslySetInnerHTML: markup, ...elementProps } = slot.props;\n    const isWaveButton = elementType === Button;\n    let slotProps: UnknownProps = elementProps;\n    if (isWaveButton) {\n      // Wave Button's own props are not attributes: `icon`, `iconPosition` and\n      // `disabledFocusable` are applied here, the others (`appearance`, `size`) are dropped.\n      slotProps = {};\n      for (const [key, value] of Object.entries(elementProps)) {\n        if (!BUTTON_OWN_PROP_KEYS.has(key)) slotProps[key] = value;\n      }\n    }\n    const icon = isWaveButton ? elementProps.icon : undefined;\n    const { props: buttonProps, ignoredName } = withoutName(slotProps);\n    const iconNode = slotRendersContent(icon)\n      ? renderSlot(icon, 'span', cn(tagClassNames.dismissIcon, iconClassName), {\n          'aria-hidden': true,\n        })\n      : null;\n    // A generator is read once by the check; its items are what renders (and names the button).\n    // Markup of the merged button (`dangerouslySetInnerHTML`) is its content as well: the dismiss\n    // button holds its own name text, so the markup renders in a span inside it.\n    const ownContent =\n      markup != null ? (\n        <span className={iconClassName} dangerouslySetInnerHTML={markup} />\n      ) : (\n        materialiseSlotContent(children)\n      );\n    return {\n      buttonProps,\n      content:\n        iconNode || slotRendersContent(ownContent)\n          ? placeButtonIcon(iconNode, ownContent, isWaveButton && elementProps.iconPosition)\n          : defaultDismissContent(glyphSize, tagClassNames.dismissIcon),\n      warning: 'button-element',\n      ignoredName,\n      contentMayName: true,\n      literalTextLabel: hasTextLabel(ownContent),\n      disabledFocusable: isWaveButton && Boolean(elementProps.disabledFocusable),\n    };\n  }\n\n  if (isPlainObject(slot)) {\n    // 0.4 rendered the whole object as the dismiss element, so an object with button props\n    // describes the button: everything but its content goes to the dismiss button. `as: Button`\n    // is that form too (a button cannot contain a button); its icon becomes decorative content.\n    const asWaveButton = slot.as === Button;\n    const isButtonObject =\n      slot.as === 'button' ||\n      asWaveButton ||\n      Object.keys(slot).some((key) => BUTTON_ONLY_KEYS.has(key) || HANDLER_KEY.test(key));\n    const buttonProps: UnknownProps = {};\n    const contentProps: UnknownProps = {};\n    // Wave Button's own props are not attributes: `icon`, `iconPosition` and `disabledFocusable`\n    // are applied below, the others (`appearance`, `size`) are dropped.\n    const ownProps: UnknownProps = {};\n    let ignoredName = false;\n    for (const [key, value] of Object.entries(slot)) {\n      if (key === 'as') {\n        if (value !== 'button' && !asWaveButton) contentProps.as = value;\n      } else if (asWaveButton && BUTTON_OWN_PROP_KEYS.has(key)) {\n        ownProps[key] = value;\n      } else if (NAME_KEYS.has(key)) {\n        if (value !== undefined) ignoredName = true;\n      } else if (key === 'children' || key === 'dangerouslySetInnerHTML') {\n        // Content, also in the button-object form: the dismiss button holds its own name text.\n        contentProps[key] = value;\n      } else if (isButtonObject || (key.startsWith('aria-') && key !== 'aria-hidden')) {\n        buttonProps[key] = value;\n      } else {\n        contentProps[key] = value;\n      }\n    }\n    // An object without content styles the default icon, e.g. `{ className: 'text-error' }` (as in\n    // MessageBar and SearchBox); a Wave Button's icon comes before the content (after it with\n    // `iconPosition=\"after\"`).\n    // The dismiss icon part is the merged Button's icon element when there is one, else the\n    // element this slot object renders (a default glyph inside it stays without the part class).\n    const hasButtonIcon = slotRendersContent(ownProps.icon);\n    if (hasButtonIcon) {\n      contentProps.children = placeButtonIcon(\n        renderSlot(\n          ownProps.icon as Slot<'span'>,\n          'span',\n          cn(tagClassNames.dismissIcon, iconClassName),\n        ),\n        materialiseSlotContent(contentProps.children),\n        ownProps.iconPosition,\n      );\n    } else if (slotWrapsDefaultContent(contentProps.as ?? 'span', contentProps)) {\n      contentProps.children = defaultDismissContent(glyphSize);\n    }\n    return {\n      buttonProps: isButtonObject || Object.keys(buttonProps).length > 0 ? buttonProps : null,\n      content: renderSlot(\n        contentProps as SlotObject<'span'>,\n        'span',\n        cn(!hasButtonIcon && tagClassNames.dismissIcon, iconClassName),\n        { 'aria-hidden': true },\n      ),\n      warning: isButtonObject ? 'button-object' : null,\n      ignoredName,\n      contentMayName: false,\n      literalTextLabel: false,\n      disabledFocusable: Boolean(ownProps.disabledFocusable),\n    };\n  }\n\n  return {\n    buttonProps: null,\n    content: renderSlot(\n      slot as Slot<'span'>,\n      'span',\n      cn(tagClassNames.dismissIcon, iconClassName),\n      {\n        'aria-hidden': true,\n      },\n    ),\n    warning: null,\n    ignoredName: false,\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: false,\n  };\n}\n\n/** Elements that take a native `disabled`: a Tag rendered as one of them receives `disabled`. */\nconst NATIVE_DISABLED_ELEMENTS: ReadonlySet<string> = new Set([\n  'button',\n  'fieldset',\n  'input',\n  'optgroup',\n  'option',\n  'select',\n  'textarea',\n]);\n\n/** Elements that take a native `value`: a Tag rendered as one of them receives `value`. */\nconst NATIVE_VALUE_ELEMENTS: ReadonlySet<string> = new Set([\n  'button',\n  'data',\n  'input',\n  'li',\n  'meter',\n  'option',\n  'progress',\n  'select',\n  'textarea',\n]);\n\n/**\n * Spread last on the Dismiss button of a disabled tag: the native `disabled`, whatever a merged\n * slot passed (a merged `disabledFocusable`, `disabled={false}`), without the attributes of the\n * focusable disabled state.\n */\nconst NATIVELY_DISABLED_PROPS = {\n  disabled: true,\n  'aria-disabled': undefined,\n  'data-disabled': undefined,\n  'data-disabled-focusable': undefined,\n};\n\ntype FocusHandler = (event: React.FocusEvent<HTMLElement>) => void;\n\n/** Whether `value` is a key of `table` (an untyped value outside a union falls back). */\nfunction isKeyOf<K extends string>(\n  value: unknown,\n  table: Readonly<Record<K, unknown>>,\n): value is K {\n  return typeof value === 'string' && Object.hasOwn(table, value);\n}\n\n/**\n * Prevents and stops the click of a disabled link root, or of a held button root, as a natively\n * disabled control's.\n */\nfunction blockRootClick(event: React.MouseEvent<HTMLElement>) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\n/** Props of {@link TagDismissButton}. */\ninterface TagDismissButtonProps {\n  /** The button's own props merged with the props of a merged slot. */\n  buttonProps: UnknownProps;\n  /** What renders inside the button: the default glyph, the slot's icon or a merged button's content. */\n  content: React.ReactNode;\n  /** Whether a text label in `content` names the button (the content of a merged button). */\n  contentMayName: boolean;\n  /** Whether the literal `content` holds a text label: the server render and the first render. */\n  literalTextLabel: boolean;\n  /** Whether a merged Wave `Button` set `disabledFocusable`. */\n  disabledFocusable: boolean;\n  /** The tag's effective `disabled`. */\n  disabled: boolean;\n  /** The visually hidden first half of the name. */\n  dismissLabel: string;\n  /** The id of the tag's primary text, the second half of the name. */\n  contentId: string;\n  /** A host's whole name for the button (`TagHostContext`): `aria-label` alone. */\n  dismissName: string | undefined;\n  /** Receives the button, so the tag's root can click it (Delete on a link in the tag's text). */\n  buttonRef: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * The tag's Dismiss button (internal): named by `dismissLabel`, or a merged button's text label,\n * plus the tag's text; natively disabled with its tag, and kept focusable while it has focus.\n */\nfunction TagDismissButton({\n  buttonProps,\n  content,\n  contentMayName,\n  literalTextLabel,\n  disabledFocusable,\n  disabled,\n  dismissLabel,\n  contentId,\n  dismissName,\n  buttonRef,\n}: TagDismissButtonProps) {\n  const dismissLabelId = useId('tag-dismiss');\n  const dismissTextId = useId('tag-dismiss-text');\n  const { ref: slotRef, ...ownProps } = buttonProps;\n  const ownRef = React.useRef<HTMLButtonElement>(null);\n  const mergedRef = useMergedRefs(ownRef, buttonRef, slotRef as React.Ref<HTMLButtonElement>);\n  // Unmounting while it has focus (`dismissible` turning `false`), the button hands focus to its\n  // tag's own control (a link in the text), else, in a TagGroup, to the next tag (D35).\n  useDismissControlFocus(ownRef);\n\n  // C-SLOTS naming (WCAG 2.5.3 Label in Name): the rendered text label of a merged button replaces\n  // `dismissLabel` in the name (\"Remove Cherry\"). The literal content decides on the server and on\n  // the first render; after mount, the rendered content does (text from components, later changes).\n  const [labelTarget, setLabelTarget] = React.useState<HTMLSpanElement | null>(null);\n  const subscribeToContent = React.useCallback(\n    (onChange: () => void) => (labelTarget ? observeTextLabel(labelTarget, onChange) : noop),\n    [labelTarget],\n  );\n  const contentHasTextLabel = React.useSyncExternalStore(\n    subscribeToContent,\n    () => (labelTarget ? hasRenderedTextLabel(labelTarget) : literalTextLabel),\n    () => literalTextLabel,\n  );\n  const namedByContent = contentMayName && contentHasTextLabel;\n\n  // A disabled tag disables its button natively (spread last, so no merged slot re-enables it);\n  // a button that has focus when its tag is disabled keeps it, unavailable, until focus leaves\n  // it (the browser would drop focus to the page). Otherwise a merged `disabledFocusable` Button\n  // makes it unavailable but focusable (it wins over `disabled` and `onDismiss`).\n  const hold = useHeldFocus(disabled);\n  const stateProps = disabled\n    ? hold.held\n      ? MERGED_DISABLED_FOCUSABLE_PROPS\n      : NATIVELY_DISABLED_PROPS\n    : disabledFocusable\n      ? MERGED_DISABLED_FOCUSABLE_PROPS\n      : undefined;\n\n  // A host's name (TagPicker's `labels.remove`) is the whole name: no hidden label text joins the\n  // tag's own text content.\n  const named = dismissName !== undefined;\n  return (\n    <button\n      {...ownProps}\n      ref={mergedRef}\n      type={(ownProps.type as 'button' | 'submit' | 'reset' | undefined) ?? 'button'}\n      {...stateProps}\n      aria-label={named ? dismissName : undefined}\n      aria-labelledby={\n        named ? undefined : `${namedByContent ? dismissTextId : dismissLabelId} ${contentId}`\n      }\n      onFocus={composeEventHandlers(ownProps.onFocus as FocusHandler | undefined, hold.onFocus, {\n        checkDefaultPrevented: false,\n      })}\n      onBlur={composeEventHandlers(ownProps.onBlur as FocusHandler | undefined, hold.onBlur, {\n        checkDefaultPrevented: false,\n      })}\n    >\n      {!named && (\n        <span id={dismissLabelId} className=\"sr-only\">\n          {dismissLabel}\n        </span>\n      )}\n      {contentMayName ? (\n        // The merged button's own content, rendered as is: its text label can name the button.\n        // `gap-[inherit]` keeps a gap set on the button between the content items.\n        <span\n          id={dismissTextId}\n          ref={setLabelTarget}\n          className=\"inline-flex items-center justify-center gap-[inherit]\"\n        >\n          {content}\n        </span>\n      ) : (\n        content\n      )}\n    </button>\n  );\n}\nTagDismissButton.displayName = 'TagDismissButton';\n\n/** Elements that never take the `listitem` role in a list TagGroup: interactive, or a list item already. */\nconst NO_LIST_ITEM_ROLE_ELEMENTS: ReadonlySet<string> = new Set([\n  'a',\n  'button',\n  'input',\n  'select',\n  'textarea',\n  'li',\n]);\n\n/** `Tag:nested-button` for a dismissible tag whose element is a button. */\nconst NESTED_IN_BUTTON_MESSAGE =\n  'Tag: `as=\"button\"` with `dismissible` puts the Dismiss button inside a button. Use InteractionTag instead: `InteractionTag.Primary` for the action, `InteractionTag.Secondary` for Dismiss.';\n\n/** `Tag:nested-button` for a dismissible tag whose element is a link. */\nconst NESTED_IN_LINK_MESSAGE =\n  'Tag: a dismissible tag rendered as a link (`as=\"a\"` or a link component) puts the Dismiss button inside the link. Put the link in the tag\\'s content: `<Tag dismissible><a href>…</a></Tag>`.';\n\nconst LIST_ITEM_MESSAGE =\n  'TagGroup: a tag in a `role=\"list\"` group is not a list item (its element is a link, a button or a component). Put a link in the tag\\'s content (`<Tag><a href>…</a></Tag>`), or wrap the tag in an element with `role=\"listitem\"`.';\n\n/**\n * Whether a tag root in a list TagGroup is a list item: it has the role, or an element between it\n * and the group root has it (a wrapping `<li>` or `role=\"listitem\"` element), as the list requires\n * of its children.\n */\nfunction isInListItem(root: HTMLElement): boolean {\n  for (\n    let element: HTMLElement | null = root;\n    element && !element.matches(TAG_GROUP_SELECTOR);\n    element = element.parentElement\n  ) {\n    if (element.getAttribute('role') === 'listitem' || element.localName === 'li') return true;\n  }\n  return false;\n}\n\n/**\n * A compact label (a \"chip\") for a keyword, category or filter, optionally dismissible.\n *\n * - The dismiss button is a real `<button type=\"button\">` wired to `onDismiss`. Its accessible\n *   name is `dismissLabel` plus the tag's text (its children; not `media`, `icon` or\n *   `secondaryText`): \"Dismiss Cherry\", so a row of tags has distinguishable dismiss buttons.\n *   Enter, Space, Delete and Backspace on it dismiss the tag (a held key dismisses once), and so do\n *   Delete and Backspace on a link in the tag's text.\n * - `dismissIcon` replaces only the icon inside that button (see {@link TagOwnProps.dismissIcon}).\n * - The look: `appearance` (`filled`, `outline` or `brand`), `size` (28, 24 or 20px tall),\n *   `shape` (`circular` or `rounded`) and the look-only `selected`, rendered as `data-appearance`,\n *   `data-size`, `data-shape` and `data-selected`. `disabled` dims the tag and disables its\n *   dismiss button natively (`data-disabled`).\n * - Slots before and under the text: `media` (an Avatar, sized for the tag), a decorative `icon`\n *   and a second line, `secondaryText`.\n * - In a TagGroup, a tag takes the group's `size`, `appearance`, `shape` and `dismissible` unless\n *   it sets its own, is disabled with the group, reports its dismissal to the group's\n *   `onDismiss(value)`, and is a list item in a `role=\"list\"` group.\n * - Polymorphic: `as=\"a\"` renders a link chip with anchor props type-checked. A dismissible link\n *   chip puts the link in the content, `<Tag dismissible><a href>…</a></Tag>`: a dismiss button\n *   cannot sit inside a link.\n *\n * **Focus after dismissal.** A tag cannot keep focus once you remove it. In a TagGroup, focus\n * moves to the next tag for you (else the previous one, else the group's `fallbackFocusRef`). For\n * a standalone tag, move focus to the next tag's dismiss button, else the previous one, else a\n * nearby control, then remove the tag: the neighbour stays mounted, so you can focus it in\n * `onDismiss` before removing the tag.\n *\n * @example\n * <Tag>React</Tag>\n * <Tag appearance=\"brand\" size=\"small\">Beta</Tag>\n * <Tag dismissible onDismiss={() => remove('cherry')}>Cherry</Tag>\n * <Tag media={<Avatar name=\"Katri Athokas\" />} secondaryText=\"Designer\">Katri</Tag>\n * <Tag dismissible dismissLabel=\"Remove\" dismissIcon={<CloseIcon />}>Cherry</Tag>\n */\nexport const Tag: PolymorphicComponent<'span', TagOwnProps> = (props) => {\n  const {\n    as,\n    appearance: appearanceProp,\n    size: sizeProp,\n    shape: shapeProp,\n    disabled: disabledProp,\n    selected = false,\n    value,\n    media,\n    icon,\n    secondaryText,\n    dismissible: dismissibleProp,\n    onDismiss,\n    dismissIcon,\n    dismissLabel = 'Dismiss',\n    className,\n    children,\n    role,\n    hidden,\n    onClick,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    ref,\n    ...rest\n  } = props as TagImplProps;\n  const Component: React.ElementType = as ?? 'span';\n  const contentId = useId('tag-content');\n  const group = useTagGroupContext();\n  const host = React.useContext(TagHostContext);\n  const rootRef = React.useRef<HTMLElement>(null);\n  const mergedRef = useMergedRefs<HTMLElement>(rootRef, ref);\n  const primaryTextRef = React.useRef<HTMLSpanElement>(null);\n  const dismissButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  // The tag's own look, else its TagGroup's, else the 0.10 look.\n  const size: TagSize = isKeyOf(sizeProp, tagSizeClasses) ? sizeProp : (group?.size ?? 'medium');\n  const appearance: TagAppearance = isKeyOf(appearanceProp, tagAppearanceClasses)\n    ? appearanceProp\n    : (group?.appearance ?? 'filled');\n  const shape: TagShape = isKeyOf(shapeProp, tagShapeClasses)\n    ? shapeProp\n    : (group?.shape ?? 'circular');\n  // A disabled group disables every tag: a tag's own `disabled={false}` cannot re-enable it.\n  const disabled = (group?.disabled ?? false) || disabledProp === true;\n  const dismissible = dismissibleProp ?? group?.dismissible ?? false;\n  // Disabled wins over the selected look; both attributes still reflect the props.\n  const look: TagLook = selected && !disabled ? 'selected' : appearance;\n  // A host that dims the area holding its tags (TagPicker's disabled control) dims them once.\n  const dimDisabled = group?.dimDisabled ?? true;\n\n  const reportedValue = useTagGroupItem(rootRef, value, {\n    reported: dismissible && (group?.reportsDismissals ?? false),\n  });\n\n  // A link root is disabled as Nav.Item's link is: `aria-disabled`, `role=\"link\"` and no `href`,\n  // so it leaves the Tab order. One that has focus when it is disabled keeps its `href`, and\n  // focus, until focus leaves it; so does a button root, which is natively disabled otherwise\n  // (the browser would drop its focus to the page).\n  const isLinkRoot = Component === 'a';\n  const linkDisabled = isLinkRoot && disabled;\n  const isButtonRoot = Component === 'button';\n  const rootHold = useHeldFocus((isLinkRoot || isButtonRoot) && disabled);\n  const buttonRootHeld = isButtonRoot && rootHold.held;\n\n  const {\n    buttonProps: slotButtonProps,\n    content,\n    warning,\n    ignoredName,\n    contentMayName,\n    literalTextLabel,\n    disabledFocusable,\n  } = resolveDismissSlot(dismissible ? dismissIcon : undefined, TAG_DISMISS_GLYPH_SIZE[size]);\n\n  React.useEffect(() => {\n    if (warning === 'button-element') {\n      warnOnce(\n        'Tag:dismissIcon-button',\n        'Tag: `dismissIcon` received a button. Its props were merged into the built-in dismiss button (a button cannot contain another button), which is named by its text label (or `dismissLabel`) and the tag content. Pass icon content instead, e.g. `dismissIcon={<CloseIcon />}`, and handle the dismissal in `onDismiss`.',\n      );\n    } else if (warning === 'button-object') {\n      warnDeprecated(\n        'Tag',\n        'dismissIcon={{ onClick, type, disabled, … }} (button props on the slot object)',\n        'onDismiss and icon content in dismissIcon',\n        'Its props are merged onto the built-in dismiss button, which is named by `dismissLabel` and the tag content.',\n      );\n    }\n  }, [warning]);\n\n  // `onDismiss`/`dismissIcon` alone render no dismiss button (unlike MessageBar's `onDismiss`).\n  // An explicit `dismissible={false}` is a deliberate state, and a dismissible TagGroup makes the\n  // tag dismissible, so only a missing flag warns.\n  const dismissPropsIgnored =\n    dismissibleProp === undefined &&\n    !(group?.dismissible ?? false) &&\n    (onDismiss !== undefined || dismissIcon !== undefined);\n  React.useEffect(() => {\n    if (dismissPropsIgnored) {\n      warnOnce(\n        'Tag:dismiss-without-dismissible',\n        'Tag: `onDismiss` and `dismissIcon` take effect only with `dismissible`; no dismiss button was rendered. Add `dismissible` to render it.',\n      );\n    }\n  }, [dismissPropsIgnored]);\n\n  React.useEffect(() => {\n    if (ignoredName) {\n      warnOnce(\n        'Tag:dismissIcon-name',\n        'Tag: `aria-label`/`aria-labelledby` on `dismissIcon` are ignored. The dismiss button is named by `dismissLabel` (default \"Dismiss\") and the tag content, e.g. \"Dismiss Cherry\"; set `dismissLabel` to change or localise it.',\n      );\n    }\n  }, [ignoredName]);\n\n  // A Dismiss button inside a link or a button is interactive content inside interactive content\n  // (and joins the link's name): the rendered element decides, so a link or button component\n  // counts too. The 0.10 DOM still renders.\n  React.useEffect(() => {\n    if (!dismissible || !isDev || hasWarned('Tag:nested-button')) return;\n    const element = rootRef.current?.localName;\n    if (element === 'button') warnOnce('Tag:nested-button', NESTED_IN_BUTTON_MESSAGE);\n    else if (element === 'a') warnOnce('Tag:nested-button', NESTED_IN_LINK_MESSAGE);\n  });\n\n  // A list's children must be list items (axe `aria-required-children`): a tag whose element\n  // takes no `listitem` role (a link, a button, a component) needs a wrapping list item.\n  const inList = group?.mode === 'list';\n  React.useEffect(() => {\n    if (!inList || !isDev || hasWarned('TagGroup:list-item')) return;\n    const root = rootRef.current;\n    if (root && !isInListItem(root)) warnOnce('TagGroup:list-item', LIST_ITEM_MESSAGE);\n  });\n\n  // Slots that render nothing (`''`, `[]`, `<></>`, an empty generator) render no element and\n  // take no room.\n  const hasMedia = slotRendersContent(media);\n  const hasIcon = slotRendersContent(icon);\n  const secondary = materialiseSlotContent(secondaryText);\n  const hasSecondary = slotRendersContent(secondary);\n  const avatarBox = React.useMemo(\n    () => ({\n      size: TAG_AVATAR_SIZE[size],\n      shape: shape === 'rounded' ? ('square' as const) : ('circular' as const),\n    }),\n    [size, shape],\n  );\n\n  // `disabled` and `value` are Tag props: they reach only an element that takes them natively,\n  // or a component, never the default span or an anchor.\n  const takesNative = (elements: ReadonlySet<string>) =>\n    typeof Component !== 'string' || elements.has(Component);\n  const elementProps: UnknownProps = {};\n  if (takesNative(NATIVE_DISABLED_ELEMENTS) && (disabled || disabledProp !== undefined)) {\n    elementProps.disabled = disabled && !buttonRootHeld;\n  }\n  if (buttonRootHeld) {\n    // The focusable disabled state, its click blocked below (D25).\n    elementProps['aria-disabled'] = true;\n    elementProps['data-disabled-focusable'] = '';\n  }\n  if (value !== undefined && takesNative(NATIVE_VALUE_ELEMENTS)) elementProps.value = value;\n  if (linkDisabled) {\n    elementProps['aria-disabled'] = true;\n    if (rootHold.held) {\n      elementProps['data-disabled-focusable'] = '';\n    } else {\n      elementProps.href = undefined;\n      elementProps.role = 'link';\n    }\n  }\n\n  // In a list TagGroup the root is a list item, unless its element is interactive or a list item\n  // already, or a component; the consumer's role wins.\n  const listItemRole =\n    inList && typeof Component === 'string' && !NO_LIST_ITEM_ROLE_ELEMENTS.has(Component)\n      ? 'listitem'\n      : undefined;\n  // A host hides the tags it counts instead of showing them (TagPicker's `overflow=\"count\"`).\n  const hiddenByHost = value !== undefined && (group?.hiddenValues?.has(value) ?? false);\n\n  const handleClick =\n    linkDisabled || buttonRootHeld\n      ? (event: React.MouseEvent<HTMLElement>) => {\n          // A click from a portal opened inside the tag is not the root's (C-COMPOSE).\n          if (isOwnEvent(event)) blockRootClick(event);\n          else onClick?.(event);\n        }\n      : onClick;\n\n  // Delete and Backspace on a focused element in the tag's text (a link chip's link) dismiss the\n  // tag through its Dismiss button's click, which a disabled or held button blocks; never from an\n  // editable field (its Backspace edits), the Dismiss button's own keys or a portal opened inside.\n  const handleRootKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    const text = primaryTextRef.current;\n    const button = dismissButtonRef.current;\n    if (!text || !button || !isDismissKey(event)) return;\n    if (!text.contains(event.target as Node) || isEditableTarget(event.target)) return;\n    event.preventDefault();\n    button.click();\n  });\n\n  const ownButtonProps: UnknownProps = {\n    type: 'button',\n    'data-wave-tag-dismiss': '',\n    className: cn(\n      tagClassNames.dismissButton,\n      TAG_DISMISS_BASE_CLASSES,\n      tagDismissSizeClasses[size],\n      // A disabled tag dims itself, so its button dims nothing more and has no hover.\n      !disabled && ['disabled:opacity-50', mergedAriaDisabledClasses, tagDismissStateClasses[look]],\n      focusRing,\n      tagDismissRingClasses[size],\n      look === 'selected' && TAG_DISMISS_SELECTED_RING_CLASSES,\n      host?.dismissButtonClassName,\n    ),\n    // Delete and Backspace dismiss as Enter does: through the button's own click, so whatever\n    // cancels a click (a merged slot's `preventDefault()`, a held or disabled button) cancels\n    // them too. A held key dismisses one tag: the browser clicks a button on every repeated\n    // Enter, which would reach the next tag's Dismiss button once focus moved there (D35).\n    onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (event.target !== event.currentTarget) return;\n      if (isRepeatedActivation(event)) {\n        event.preventDefault();\n        return;\n      }\n      if (!isDismissKey(event)) return;\n      event.preventDefault();\n      event.currentTarget.click();\n    },\n  };\n  if (onDismiss || group) {\n    // The tag's own `onDismiss` first, then the group's `onDismiss(value)`, in the same click.\n    ownButtonProps.onClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      if (!isOwnEvent(event)) return;\n      onDismiss?.();\n      group?.dismiss(reportedValue);\n    };\n  }\n  const dismissButtonProps = slotButtonProps\n    ? mergeProps(ownButtonProps, slotButtonProps)\n    : ownButtonProps;\n\n  const primaryText = (\n    <span\n      id={contentId}\n      ref={primaryTextRef}\n      className={cn(\n        tagClassNames.primaryText,\n        'inline-flex items-center gap-1',\n        hasSecondary && TAG_PRIMARY_TEXT_TWO_LINE_CLASSES,\n      )}\n    >\n      {children}\n    </span>\n  );\n\n  return (\n    <Component\n      data-size={size}\n      data-appearance={appearance}\n      data-shape={shape}\n      data-selected={selected ? '' : undefined}\n      data-disabled={disabled ? '' : undefined}\n      data-wave-tag-item=\"\"\n      role={role ?? listItemRole}\n      hidden={hiddenByHost || hidden}\n      {...rest}\n      {...elementProps}\n      ref={mergedRef}\n      className={cn(\n        tagClassNames.root,\n        TAG_ROOT_BASE_CLASSES,\n        tagSizeClasses[size],\n        tagStartInsetClasses[size][hasMedia ? 'media' : hasIcon ? 'icon' : 'text'],\n        tagEndInsetClasses[size][dismissible ? 'dismiss' : 'text'],\n        look === 'selected'\n          ? [TAG_SELECTED_CLASSES, forcedColors.selectedContainer]\n          : tagAppearanceClasses[appearance],\n        disabled && [dimDisabled && TAG_DISABLED_DIM_CLASSES, forcedColors.disabled],\n        tagShapeClasses[shape],\n        className,\n      )}\n      onClick={handleClick}\n      onKeyDown={composeEventHandlers(onKeyDown, handleRootKeyDown)}\n      onFocus={composeEventHandlers(onFocus, rootHold.onFocus, { checkDefaultPrevented: false })}\n      onBlur={composeEventHandlers(onBlur, rootHold.onBlur, { checkDefaultPrevented: false })}\n    >\n      {hasMedia && (\n        // An Avatar without its own `size` takes the tag's box; one in `children` keeps its size.\n        <AvatarSizeContext.Provider value={avatarBox}>\n          {renderSlot(media, 'span', cn(tagClassNames.media, tagMediaClasses[size]))}\n        </AvatarSizeContext.Provider>\n      )}\n      {hasIcon &&\n        renderSlot(icon, 'span', cn(tagClassNames.icon, tagIconClasses[size]), {\n          'aria-hidden': true,\n        })}\n      {hasSecondary ? (\n        <span className={TAG_TEXT_COLUMN_CLASSES}>\n          {primaryText}\n          <span className={cn(tagClassNames.secondaryText, TAG_SECONDARY_TEXT_CLASSES)}>\n            {secondary}\n          </span>\n        </span>\n      ) : (\n        primaryText\n      )}\n      {dismissible && (\n        <TagDismissButton\n          buttonProps={dismissButtonProps}\n          content={content}\n          contentMayName={contentMayName}\n          literalTextLabel={literalTextLabel}\n          disabledFocusable={disabledFocusable}\n          disabled={disabled}\n          dismissLabel={dismissLabel}\n          contentId={contentId}\n          dismissName={host?.dismissName}\n          buttonRef={dismissButtonRef}\n        />\n      )}\n    </Component>\n  );\n};\n\nTag.displayName = 'Tag';\n"],"mappings":"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"}

package/dist/components/layout/Card.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../lib/classNames.cjs"),o=require("../../hooks/useEventCallback.cjs"),s=require("../../hooks/useId.cjs"),c=require("../../lib/focus.cjs"),l=require("../../hooks/useMergedRefs.cjs"),u=require("../../lib/styles.cjs"),d=require("../../lib/icons.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=`button, a[href], input, select, textarea, label, summary, [role="button"], [tabindex]`,h=1;function g(e,t){let n=e.target;if(!n||typeof n.nodeType!=`number`||!t.contains(n))return!0;if(n.nodeType!==h)return!1;let r=n.closest(m);return r!==null&&r!==t&&t.contains(r)}var _=`Card:nested-interactive`,v=f.createContext(null),y=e=>{let{as:r,selected:m,onSelect:h,selectionControl:y=`card`,selectLabel:b,className:x,children:S,ref:C,onClick:w,onKeyDown:T,onKeyUp:E,onBlur:D,...O}=e,k=r??`div`,A=h!==void 0,j=A&&y===`checkbox`,M=A&&!j,N=k===`button`,P=s.useId(`card-title`),F=f.useRef(null),I=l.useMergedRefs(C,F);f.useEffect(()=>{let e=F.current;n.isDev&&e&&A&&(M&&!n.hasWarned(_)&&c.getTabbableElements(e).length>0&&n.warnOnce(_,'Card: a selectable card (`onSelect`) is a button and must not contain focusable elements (buttons, links, inputs). Use `selectionControl="checkbox"` for cards with interactive content.'),j&&!b&&!e.ownerDocument.getElementById(P)&&n.warnOnce(`Card:checkbox-name`,"Card: the selection checkbox has no accessible name. Render a `Card.Header` with a `title`, or pass `selectLabel`."))});let L=f.useRef(!1),R=o.useEventCallback(e=>{L.current=e}),z=o.useEventCallback(()=>{let e=L.current;return L.current=!1,e}),B=i.composeEventHandlers(w,e=>{A&&!g(e,e.currentTarget)&&h()}),V=M&&!N,H=i.composeEventHandlers(T,e=>{V&&(e.key===`Enter`||e.key===` `)&&(g(e,e.currentTarget)||(e.preventDefault(),e.key===` `?R(!0):e.repeat||h?.()))}),U=i.composeEventHandlers(E,e=>{V&&e.key===` `&&(!z()||e.defaultPrevented||g(e,e.currentTarget)||(e.preventDefault(),h?.()))},{checkDefaultPrevented:!1}),W=i.composeEventHandlers(D,()=>{V&&R(!1)},{checkDefaultPrevented:!1}),G={};return M&&(N?G.type=`button`:(G.role=`button`,G.tabIndex=0),m!==void 0&&(G[`aria-pressed`]=m)),(0,p.jsx)(v.Provider,{value:j?P:null,children:(0,p.jsxs)(k,{...G,...O,ref:I,"data-selected":m?``:void 0,className:t.cn(a.cardClassNames.root,`overflow-hidden rounded-md border border-border bg-card shadow-4`,(A||m!==void 0)&&`relative`,m&&t.cn(`border-primary bg-selected text-selected-foreground ring-1 ring-inset ring-primary`,u.forcedColors.selectedContainer),A&&`cursor-pointer`,M&&`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`,x),onClick:B,onKeyDown:H,onKeyUp:U,onBlur:W,children:[j&&(0,p.jsx)(`input`,{type:`checkbox`,checked:m??!1,onChange:()=>h(),"aria-label":b,"aria-labelledby":b?void 0:P,className:t.cn(a.cardClassNames.checkbox,`absolute end-3 top-3 m-0 size-4 cursor-pointer accent-primary`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`)}),m&&!j&&(0,p.jsx)(d.CheckIcon,{size:12,className:t.cn(a.cardClassNames.checkmark,`absolute end-2 top-2 text-primary`)}),S]})})};y.displayName=`Card`;var b=e=>{let{as:n,title:i,subtitle:o,className:s,children:c,ref:l,...u}=e,d=n??`div`,m=f.useContext(v),h=r.slotRendersContent(i),g=r.slotRendersContent(o);return(0,p.jsxs)(d,{ref:l,className:t.cn(a.cardHeaderClassNames.root,`p-4`,m&&`pe-10`,s),...u,children:[h&&(0,p.jsx)(`div`,{id:m??void 0,className:t.cn(a.cardHeaderClassNames.title,`text-subtitle-1`),children:r.materialiseSlotContent(i)}),g&&(0,p.jsx)(`div`,{className:t.cn(a.cardHeaderClassNames.subtitle,`text-caption-1 text-muted-foreground`),children:r.materialiseSlotContent(o)}),c]})};b.displayName=`CardHeader`;var x=e=>{let{as:n,className:r,ref:i,...o}=e;return(0,p.jsx)(n??`div`,{ref:i,className:t.cn(a.cardBodyClassNames.root,`p-4 pt-0`,r),...o})};x.displayName=`CardBody`;var S=e=>{let{as:n,className:r,ref:i,...o}=e;return(0,p.jsx)(n??`div`,{ref:i,className:t.cn(a.cardFooterClassNames.root,`flex justify-end gap-2 p-4 pt-0`,r),...o})};S.displayName=`CardFooter`;var C=Object.assign(y,{Header:b,Body:x,Footer:S});exports.Card=C,exports.CardBody=x,exports.CardFooter=S,exports.CardHeader=b;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../lib/classNames.cjs"),o=require("../../hooks/useEventCallback.cjs"),s=require("../../hooks/useId.cjs"),c=require("../../lib/focus.cjs"),l=require("../../hooks/useMergedRefs.cjs"),u=require("../../lib/styles.cjs"),d=require("../../lib/icons.cjs"),f=require("./Card.context.cjs"),p=require("./Card.preview.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var g=`button, a[href], input, select, textarea, label, summary, [role="button"], [tabindex]`,_=1;function v(e,t){let n=e.target;if(!n||typeof n.nodeType!=`number`||!t.contains(n))return!0;if(n.nodeType!==_)return!1;let r=n.closest(g);return r!==null&&r!==t&&t.contains(r)}var y=`Card:nested-interactive`,b=m.createContext(null),x={filled:{surface:`border border-border bg-card shadow-4`,interactive:`not-disabled:not-aria-disabled:hover:shadow-8`},"filled-alternative":{surface:`border border-transparent bg-muted`,interactive:`not-disabled:not-aria-disabled:hover:bg-muted-hover not-disabled:not-aria-disabled:active:bg-muted-pressed`},outline:{surface:`border border-border bg-transparent`,interactive:`not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed`},subtle:{surface:`border border-transparent bg-transparent`,interactive:`not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed`}},S={small:`[--wave-card-padding:0.75rem]`,medium:`[--wave-card-padding:1rem]`,large:`[--wave-card-padding:1.25rem]`},C=e=>{let{as:p,selected:g,onSelect:_,selectionControl:C=`card`,selectLabel:w,checkbox:T,floatingAction:E,appearance:D=`filled`,size:O=`medium`,orientation:k=`vertical`,className:A,children:j,ref:M,onClick:N,onKeyDown:P,onKeyUp:F,onBlur:I,...L}=e,R=p??`div`,z=_!==void 0,B=z&&C===`checkbox`,V=z&&!B,H=E!==void 0&&r.slotRendersContent(E),U=T===null||T===!1,W=m.isValidElement(T)?T:null,G=B&&!U&&W===null,K=typeof T==`object`&&T&&!m.isValidElement(T)&&!Array.isArray(T)?T:void 0,ee=m.useMemo(()=>({checkboxAtStart:G&&H,floatingAction:H}),[G,H]),q=R===`button`,J=s.useId(`card-title`),Y=m.useRef(null),te=l.useMergedRefs(M,Y);m.useEffect(()=>{let e=Y.current;n.isDev&&e&&z&&(V&&!n.hasWarned(y)&&c.getTabbableElements(e).length>0&&n.warnOnce(y,'Card: a selectable card (`onSelect`) is a button and must not contain focusable elements (buttons, links, inputs). Use `selectionControl="checkbox"` for cards with interactive content.'),G&&!w&&!e.ownerDocument.getElementById(J)&&n.warnOnce(`Card:checkbox-name`,"Card: the selection checkbox has no accessible name. Render a `Card.Header` with a `title`, or pass `selectLabel`."))});let X=m.useRef(!1),Z=o.useEventCallback(e=>{X.current=e}),ne=o.useEventCallback(()=>{let e=X.current;return X.current=!1,e}),re=i.composeEventHandlers(N,e=>{z&&!v(e,e.currentTarget)&&_()}),Q=V&&!q,ie=i.composeEventHandlers(P,e=>{Q&&(e.key===`Enter`||e.key===` `)&&(v(e,e.currentTarget)||(e.preventDefault(),e.key===` `?Z(!0):e.repeat||_?.()))}),ae=i.composeEventHandlers(F,e=>{Q&&e.key===` `&&(!ne()||e.defaultPrevented||v(e,e.currentTarget)||(e.preventDefault(),_?.()))},{checkDefaultPrevented:!1}),oe=i.composeEventHandlers(I,()=>{Q&&Z(!1)},{checkDefaultPrevented:!1}),$={};return V&&(q?$.type=`button`:($.role=`button`,$.tabIndex=0),g!==void 0&&($[`aria-pressed`]=g)),(0,h.jsx)(b.Provider,{value:B?J:null,children:(0,h.jsx)(f.CardCornersContext.Provider,{value:ee,children:(0,h.jsx)(f.CardOrientationContext.Provider,{value:k,children:(0,h.jsxs)(R,{...$,...L,ref:te,"data-selected":g?``:void 0,"data-appearance":D,"data-size":O,"data-orientation":k,className:t.cn(a.cardClassNames.root,`overflow-hidden rounded-md`,x[D].surface,S[O],k===`horizontal`&&`flex flex-row`,(z||g!==void 0||H)&&`relative`,g&&t.cn(`border-primary bg-selected text-selected-foreground ring-1 ring-inset ring-primary`,u.forcedColors.selectedContainer),z&&`cursor-pointer`,z&&!g&&x[D].interactive,V&&`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`,A),onClick:re,onKeyDown:ie,onKeyUp:ae,onBlur:oe,children:[G&&(0,h.jsx)(`input`,{...K,type:`checkbox`,checked:g??!1,onChange:i.composeEventHandlers(K?.onChange,()=>_()),"aria-label":K?.[`aria-label`]??w,"aria-labelledby":K?.[`aria-label`]??w?void 0:K?.[`aria-labelledby`]??J,className:t.cn(a.cardClassNames.checkbox,`absolute top-3 m-0 size-4 cursor-pointer accent-primary`,H?`start-3`:`end-3`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`,K?.className)}),B&&W,H&&r.renderSlot(E,`span`,t.cn(a.cardClassNames.floatingAction,`absolute end-3 top-3 inline-flex`)),g&&!B&&(0,h.jsx)(d.CheckIcon,{size:12,className:t.cn(a.cardClassNames.checkmark,`absolute end-2 top-2 text-primary`)}),j]})})})})};C.displayName=`Card`;var w=e=>{let{as:n,title:i,subtitle:o,image:s,action:c,className:l,children:u,ref:d,...p}=e,g=n??`div`,_=m.useContext(b),v=r.slotRendersContent(i),y=r.slotRendersContent(o),x=s!==void 0&&r.slotRendersContent(s),S=c!==void 0&&r.slotRendersContent(c),C=m.useContext(f.CardCornersContext),w=(0,h.jsxs)(h.Fragment,{children:[v&&(0,h.jsx)(`div`,{id:_??void 0,className:t.cn(a.cardHeaderClassNames.title,`text-subtitle-1`),children:r.materialiseSlotContent(i)}),y&&(0,h.jsx)(`div`,{className:t.cn(a.cardHeaderClassNames.subtitle,`text-caption-1 text-muted-foreground`),children:r.materialiseSlotContent(o)}),u]});return(0,h.jsxs)(g,{ref:d,className:t.cn(a.cardHeaderClassNames.root,`p-[var(--wave-card-padding,1rem)]`,(_&&!C.checkboxAtStart||C.floatingAction)&&`pe-10`,C.checkboxAtStart&&`ps-10`,(x||S)&&t.cn(`grid items-center gap-x-3`,x&&S?`grid-cols-[auto_1fr_auto]`:x?`grid-cols-[auto_1fr]`:`grid-cols-[1fr_auto]`),l),...p,children:[x&&r.renderSlot(s,`span`,t.cn(a.cardHeaderClassNames.image,`inline-flex shrink-0 items-center`)),x||S?(0,h.jsx)(`div`,{className:a.cardHeaderClassNames.text,children:w}):w,S&&r.renderSlot(c,`span`,t.cn(a.cardHeaderClassNames.action,`inline-flex shrink-0 items-center`))]})};w.displayName=`CardHeader`;var T=e=>{let{as:n,className:r,ref:i,...o}=e;return(0,h.jsx)(n??`div`,{ref:i,className:t.cn(a.cardBodyClassNames.root,`p-[var(--wave-card-padding,1rem)] pt-0`,r),...o})};T.displayName=`CardBody`;var E=e=>{let{as:n,className:r,ref:i,...o}=e;return(0,h.jsx)(n??`div`,{ref:i,className:t.cn(a.cardFooterClassNames.root,`flex justify-end gap-2 p-[var(--wave-card-padding,1rem)] pt-0`,r),...o})};E.displayName=`CardFooter`;var D=Object.assign(C,{Header:w,Preview:p.CardPreview,Body:T,Footer:E});exports.Card=D,exports.CardBody=T,exports.CardFooter=E,exports.CardHeader=w,exports.CardPreview=p.CardPreview;
 //# sourceMappingURL=Card.cjs.map

package/dist/components/layout/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","names":["React","useId","useMergedRefs","isDev","hasWarned","getTabbableElements","useEventCallback","composeEventHandlers","cn","cardClassNames","forcedColors","CheckIcon","slotRendersContent","cardHeaderClassNames","materialiseSlotContent","cardBodyClassNames","cardFooterClassNames","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useEventCallback","require_useId","require_focus","require_useMergedRefs","require_styles","require_icons","react","react_jsx_runtime","INTERACTIVE_SELECTOR","ELEMENT_NODE","isForeignEvent","target","event","root","control","NESTED_INTERACTIVE_WARNING","CardTitleIdContext","CardRoot","rest","props","Component","as","selectable","onSelect","checkboxMode","selectionControl","cardMode","nativeButton","titleId","rootRef","mergedRef","ref","selectLabel","spaceArmedRef","setSpaceArmed","armed","takeSpaceArmed","handleClick","onClick","keyboardActivation","handleKeyDown","onKeyDown","handleKeyUp","onKeyUp","handleBlur","onBlur","defaults","selected","className","children","CardHeader","hasTitle","title","hasSubtitle","subtitle","CardBody","CardFooter","Card"],"sources":["../../../src/components/layout/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  cardBodyClassNames,\n  cardClassNames,\n  cardFooterClassNames,\n  cardHeaderClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { hasWarned, isDev, warnOnce } from '../../lib/dev';\nimport { getTabbableElements } from '../../lib/focus';\nimport { CheckIcon } from '../../lib/icons';\nimport { materialiseSlotContent, slotRendersContent } from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\n\n/**\n * Elements whose own events a selectable card ignores: a click or key press that starts inside a\n * nested control belongs to that control, never to the card (layout#35). A `<label>` counts too:\n * its click already activates the control it labels.\n */\nconst INTERACTIVE_SELECTOR =\n  'button, a[href], input, select, textarea, label, summary, [role=\"button\"], [tabindex]';\n\n/** `Node.ELEMENT_NODE`, spelled out so no realm's `Node` global is read. */\nconst ELEMENT_NODE = 1;\n\n/**\n * Whether the card must ignore `event`: it started outside the card's DOM, or inside an\n * interactive element nested in `root` (the card itself, which carries `role=\"button\"`/`tabindex`\n * in the default mode, does not count).\n *\n * React events bubble through portals along the component tree, so a menu, popover or dialog\n * opened from inside the card (e.g. a footer overflow menu) reaches the card's handlers although\n * its DOM lives elsewhere. Such a target is not a DOM descendant of the card and never selects it.\n *\n * The target is duck typed (`nodeType`) rather than checked with `instanceof`, so a card rendered\n * into another realm's document (an iframe, or a popout window reached through `createPortal`)\n * still selects: its nodes are not instances of the main realm's `Node`/`Element`.\n */\nfunction isForeignEvent(event: React.SyntheticEvent, root: Element): boolean {\n  const target = event.target as Partial<Node> | null;\n  if (!target || typeof target.nodeType !== 'number' || !root.contains(target as Node)) {\n    return true;\n  }\n  if (target.nodeType !== ELEMENT_NODE) return false;\n  const control = (target as Element).closest(INTERACTIVE_SELECTOR);\n  return control !== null && control !== root && root.contains(control);\n}\n\n/** Warn-once key of the \"selectable card contains tabbable elements\" diagnostic. */\nconst NESTED_INTERACTIVE_WARNING = 'Card:nested-interactive';\n\n/**\n * The id of the header title that names the built-in checkbox of a `selectionControl=\"checkbox\"`\n * card; `null` everywhere else (other cards, and a `Card.Header` rendered on its own, which does\n * not require a Card). A string, never an object, so the provider value needs no memoisation.\n */\nconst CardTitleIdContext = React.createContext<string | null>(null);\n\n/**\n * The Card's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`).\n */\nexport interface CardOwnProps {\n  /**\n   * Whether the card is selected. Shown with the selected colors plus non-color cues: a 2px primary\n   * border (a 1px border plus an inset 1px ring), a Highlight outline in forced-colors mode, and a\n   * check glyph (with `selectionControl=\"checkbox\"` the checked checkbox instead).\n   *\n   * The state reaches assistive technology only on a selectable card (`onSelect`): as\n   * `aria-pressed` (default mode) or as the built-in checkbox's checked state. Without `onSelect`,\n   * `selected` is a visual state only (the glyph is decorative); state it in the content if it\n   * matters to screen-reader users, or make the card selectable.\n   */\n  selected?: boolean;\n  /**\n   * Makes the card selectable: called when the card is activated by a click, Enter (on key down)\n   * or Space (on key up, like a native button) in the default mode, or when its built-in checkbox\n   * changes (`selectionControl=\"checkbox\"`). Clicks and key presses that start inside a nested\n   * interactive element (a button, link, input or any element with `tabindex`), or in content\n   * portaled out of the card (a menu, popover or dialog opened from it), are ignored, so a footer\n   * action never selects the card.\n   */\n  onSelect?: () => void;\n  /**\n   * How a selectable card (`onSelect`) exposes its selection:\n   * - `'card'` (default): the card itself is the control — `role=\"button\"`, a tab stop, Enter and\n   *   Space activation and `aria-pressed={selected}` when `selected` is defined. Use it only for\n   *   cards **without** interactive content: a button inside a `role=\"button\"` card is invalid\n   *   (axe `nested-interactive`), and a development warning points here. A button's children are\n   *   presentational, so the card's content is flattened into its name: a heading (e.g.\n   *   `<Card.Header as=\"h3\">`), list or other structure inside it is not exposed and cannot be\n   *   reached by heading navigation (no warning covers this). Keep such cards short.\n   * - `'checkbox'`: the card is not a widget; a built-in native checkbox (top end corner) carries\n   *   `selected` and is named by the `Card.Header` title (or `selectLabel`). Pointer clicks on\n   *   non-interactive card areas still toggle it. Use it for cards with actions, and for cards\n   *   whose headings or other structure must stay navigable.\n   * @default 'card'\n   */\n  selectionControl?: 'card' | 'checkbox';\n  /**\n   * Accessible name of the built-in checkbox (`selectionControl=\"checkbox\"`). Defaults to the\n   * `Card.Header` title, which the checkbox references with `aria-labelledby`.\n   */\n  selectLabel?: string;\n}\n\n/**\n * Props of {@link Card} rendered as `C` (default `'div'`). `CardProps` without a type argument is\n * the 0.4 name: the props of a Card rendered as a `<div>`, including `ref`.\n */\nexport type CardProps<C extends React.ElementType = 'div'> = PolymorphicProps<C, CardOwnProps>;\n\n/** The props the implementation reads, for any `as` (the public typing is `PolymorphicComponent`). */\ntype CardImplProps = CardOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n    type?: string;\n  };\n\n// The Card root, documented on the exported `Card` const.\nconst CardRoot: PolymorphicComponent<'div', CardOwnProps> = (props) => {\n  const {\n    as,\n    selected,\n    onSelect,\n    selectionControl = 'card',\n    selectLabel,\n    className,\n    children,\n    ref,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n    ...rest\n  } = props as CardImplProps;\n\n  const Component: React.ElementType = as ?? 'div';\n  const selectable = onSelect !== undefined;\n  const checkboxMode = selectable && selectionControl === 'checkbox';\n  const cardMode = selectable && !checkboxMode;\n  /** A native `<button>` already has the role, tab stop and keyboard activation. */\n  const nativeButton = Component === 'button';\n\n  const titleId = useId('card-title');\n  const rootRef = React.useRef<HTMLElement | null>(null);\n  const mergedRef = useMergedRefs<HTMLElement>(ref, rootRef);\n\n  // Development diagnostics (C-DEV): read the mounted DOM after every commit (content can change\n  // without prop changes), warn once. Once a key has warned, its DOM scan is skipped.\n  React.useEffect(() => {\n    const root = rootRef.current;\n    if (!isDev || !root || !selectable) return;\n    if (\n      cardMode &&\n      !hasWarned(NESTED_INTERACTIVE_WARNING) &&\n      getTabbableElements(root).length > 0\n    ) {\n      warnOnce(\n        NESTED_INTERACTIVE_WARNING,\n        'Card: a selectable card (`onSelect`) is a button and must not contain focusable elements (buttons, links, inputs). Use `selectionControl=\"checkbox\"` for cards with interactive content.',\n      );\n    }\n    if (checkboxMode && !selectLabel && !root.ownerDocument.getElementById(titleId)) {\n      warnOnce(\n        'Card:checkbox-name',\n        'Card: the selection checkbox has no accessible name. Render a `Card.Header` with a `title`, or pass `selectLabel`.',\n      );\n    }\n  });\n\n  /**\n   * Set by an unprevented Space keydown on the card; Space selects on the following keyup only\n   * while it is set (like a native button and P01's Button: a keyup alone never selects, and\n   * moving focus away in between cancels). The ref is only touched from event handlers, through\n   * these two stable callbacks (C-HOOKS).\n   */\n  const spaceArmedRef = React.useRef(false);\n  /** Arms (or disarms) Space activation. */\n  const setSpaceArmed = useEventCallback((armed: boolean) => {\n    spaceArmedRef.current = armed;\n  });\n  /** Reads and clears the Space arm. */\n  const takeSpaceArmed = useEventCallback(() => {\n    const armed = spaceArmedRef.current;\n    spaceArmedRef.current = false;\n    return armed;\n  });\n\n  const handleClick = composeEventHandlers<React.MouseEvent<HTMLElement>>(onClick, (event) => {\n    if (!selectable || isForeignEvent(event, event.currentTarget)) return;\n    onSelect();\n  });\n\n  /** Keyboard activation applies to a `role=\"button\"` card (a native `<button>` has its own). */\n  const keyboardActivation = cardMode && !nativeButton;\n\n  const handleKeyDown = composeEventHandlers<React.KeyboardEvent<HTMLElement>>(\n    onKeyDown,\n    (event) => {\n      if (!keyboardActivation) return;\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n      if (isForeignEvent(event, event.currentTarget)) return;\n      // Space would scroll the page: prevent it now, select on keyup. Enter selects on keydown; a\n      // held Enter does not toggle repeatedly.\n      event.preventDefault();\n      if (event.key === ' ') setSpaceArmed(true);\n      else if (!event.repeat) onSelect?.();\n    },\n  );\n\n  const handleKeyUp = composeEventHandlers<React.KeyboardEvent<HTMLElement>>(\n    onKeyUp,\n    (event) => {\n      if (!keyboardActivation || event.key !== ' ') return;\n      // Always consume the arm, also when the consumer prevented this keyup.\n      const armed = takeSpaceArmed();\n      if (!armed || event.defaultPrevented || isForeignEvent(event, event.currentTarget)) return;\n      event.preventDefault();\n      onSelect?.();\n    },\n    { checkDefaultPrevented: false },\n  );\n\n  // Moving focus away between Space keydown and keyup cancels the activation (native behavior).\n  const handleBlur = composeEventHandlers<React.FocusEvent<HTMLElement>>(\n    onBlur,\n    () => {\n      if (keyboardActivation) setSpaceArmed(false);\n    },\n    { checkDefaultPrevented: false },\n  );\n\n  /** Defaults the consumer may override (C-COMPOSE: before `{...rest}`). */\n  const defaults: Record<string, unknown> = {};\n  if (cardMode) {\n    if (nativeButton) {\n      defaults.type = 'button';\n    } else {\n      defaults.role = 'button';\n      defaults.tabIndex = 0;\n    }\n    if (selected !== undefined) defaults['aria-pressed'] = selected;\n  }\n\n  return (\n    <CardTitleIdContext.Provider value={checkboxMode ? titleId : null}>\n      <Component\n        {...defaults}\n        {...rest}\n        ref={mergedRef}\n        data-selected={selected ? '' : undefined}\n        className={cn(\n          cardClassNames.root,\n          'overflow-hidden rounded-md border border-border bg-card shadow-4',\n          // Positions the check glyph / checkbox; plain cards keep their 0.4 positioning.\n          (selectable || selected !== undefined) && 'relative',\n          selected &&\n            cn(\n              'border-primary bg-selected text-selected-foreground ring-1 ring-inset ring-primary',\n              forcedColors.selectedContainer,\n            ),\n          selectable && 'cursor-pointer',\n          cardMode && focusRing,\n          className,\n        )}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onBlur={handleBlur}\n      >\n        {checkboxMode && (\n          <input\n            type=\"checkbox\"\n            checked={selected ?? false}\n            onChange={() => onSelect()}\n            aria-label={selectLabel}\n            aria-labelledby={selectLabel ? undefined : titleId}\n            className={cn(\n              cardClassNames.checkbox,\n              'absolute end-3 top-3 m-0 size-4 cursor-pointer accent-primary',\n              focusRing,\n            )}\n          />\n        )}\n        {selected && !checkboxMode && (\n          <CheckIcon\n            size={12}\n            className={cn(cardClassNames.checkmark, 'absolute end-2 top-2 text-primary')}\n          />\n        )}\n        {children}\n      </Component>\n    </CardTitleIdContext.Provider>\n  );\n};\nCardRoot.displayName = 'Card';\n\n/** The Card.Header's own props (component-specific props only). */\nexport interface CardHeaderOwnProps {\n  /**\n   * Title content displayed in the card header. It also names a selectable card's built-in\n   * checkbox (`selectionControl=\"checkbox\"`). Content that renders nothing (`''`, `[]`, a list of\n   * nothing) renders no title element; `0` is content.\n   */\n  title?: React.ReactNode;\n  /** Subtitle content displayed below the title (none when it renders nothing, as `title`). */\n  subtitle?: React.ReactNode;\n}\n\n/** Props of {@link CardHeader} rendered as `C` (default `'div'`), including `ref`. */\nexport type CardHeaderProps<C extends React.ElementType = 'div'> = PolymorphicProps<\n  C,\n  CardHeaderOwnProps\n>;\n\ntype CardHeaderImplProps = CardHeaderOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'title'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\n/**\n * The header of a {@link Card}: a title and an optional subtitle, followed by any children.\n * Flat export for React Server Components (`Card.Header` in client files).\n */\nexport const CardHeader: PolymorphicComponent<'div', CardHeaderOwnProps> = (props) => {\n  const { as, title, subtitle, className, children, ref, ...rest } = props as CardHeaderImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  /** Set only inside a `selectionControl=\"checkbox\"` card: the title names its checkbox. */\n  const titleId = React.useContext(CardTitleIdContext);\n  // A title or subtitle that renders nothing (`''`, `[]`, a list of nothing) gets no element, so a\n  // checkbox card with such a title warns about its missing name; `0` is content.\n  const hasTitle = slotRendersContent(title);\n  const hasSubtitle = slotRendersContent(subtitle);\n  return (\n    // In a checkbox card the header keeps clear of the checkbox in the top end corner.\n    <Component\n      ref={ref}\n      className={cn(cardHeaderClassNames.root, 'p-4', titleId && 'pe-10', className)}\n      {...rest}\n    >\n      {hasTitle && (\n        <div\n          id={titleId ?? undefined}\n          className={cn(cardHeaderClassNames.title, 'text-subtitle-1')}\n        >\n          {materialiseSlotContent(title)}\n        </div>\n      )}\n      {hasSubtitle && (\n        <div className={cn(cardHeaderClassNames.subtitle, 'text-caption-1 text-muted-foreground')}>\n          {materialiseSlotContent(subtitle)}\n        </div>\n      )}\n      {children}\n    </Component>\n  );\n};\nCardHeader.displayName = 'CardHeader';\n\n/** The Card.Body's own props: none besides the element's (component-specific props only). */\nexport type CardBodyOwnProps = Record<never, never>;\n\n/** Props of {@link CardBody} rendered as `C` (default `'div'`), including `ref`. */\nexport type CardBodyProps<C extends React.ElementType = 'div'> = PolymorphicProps<\n  C,\n  CardBodyOwnProps\n>;\n\ntype CardSectionImplProps = React.HTMLAttributes<HTMLElement> & {\n  as?: React.ElementType;\n  ref?: React.Ref<HTMLElement>;\n};\n\n/**\n * The main content of a {@link Card}. Flat export for React Server Components (`Card.Body` in\n * client files).\n */\nexport const CardBody: PolymorphicComponent<'div', CardBodyOwnProps> = (props) => {\n  const { as, className, ref, ...rest } = props as CardSectionImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  return (\n    <Component ref={ref} className={cn(cardBodyClassNames.root, 'p-4 pt-0', className)} {...rest} />\n  );\n};\nCardBody.displayName = 'CardBody';\n\n/** The Card.Footer's own props: none besides the element's (component-specific props only). */\nexport type CardFooterOwnProps = Record<never, never>;\n\n/** Props of {@link CardFooter} rendered as `C` (default `'div'`), including `ref`. */\nexport type CardFooterProps<C extends React.ElementType = 'div'> = PolymorphicProps<\n  C,\n  CardFooterOwnProps\n>;\n\n/**\n * The action row of a {@link Card} (end-aligned). A selectable card with actions here needs\n * `selectionControl=\"checkbox\"`. Flat export for React Server Components (`Card.Footer` in client\n * files).\n */\nexport const CardFooter: PolymorphicComponent<'div', CardFooterOwnProps> = (props) => {\n  const { as, className, ref, ...rest } = props as CardSectionImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      className={cn(cardFooterClassNames.root, 'flex justify-end gap-2 p-4 pt-0', className)}\n      {...rest}\n    />\n  );\n};\nCardFooter.displayName = 'CardFooter';\n\n/**\n * A surface that groups related content, with `Card.Header`, `Card.Body` and `Card.Footer`.\n *\n * **Selectable cards** (`onSelect`) come in two patterns:\n * - A card without interactive content is itself the control (`selectionControl=\"card\"`, the\n *   default): it is a `role=\"button\"` tab stop activated by click, Enter (key down) or Space (key\n *   up, cancelled by moving focus away first), with `aria-pressed` reflecting `selected`. Its\n *   content becomes the button's name, so headings and other structure inside it are flattened.\n * - A card that contains buttons or links, or headings that must stay navigable, uses\n *   `selectionControl=\"checkbox\"`: a built-in checkbox named by the header title carries the\n *   selection, and the card's actions and structure stay separate from it.\n *\n * In both modes events that start inside a nested interactive element, or in content portaled out\n * of the card, are ignored. `onClick`, `onKeyDown` and `onKeyUp` are composed with the built-in\n * selection (call `event.preventDefault()` to skip it). A `selected` card without `onSelect` shows\n * the selected look only; its state is not exposed to assistive technology.\n *\n * React Server Components cannot dot into a client module: import the flat names `CardHeader`,\n * `CardBody` and `CardFooter` there; `Card.Header` etc. work in client files.\n *\n * @example\n * <Card onSelect={toggle} selected={selected}>\n *   <Card.Header title=\"Pro plan\" subtitle=\"Billed monthly\" />\n * </Card>\n *\n * <Card onSelect={toggle} selected={selected} selectionControl=\"checkbox\">\n *   <Card.Header title=\"Pro plan\" />\n *   <Card.Footer><Button>Details</Button></Card.Footer>\n * </Card>\n */\nexport const Card = /* @__PURE__ */ Object.assign(CardRoot, {\n  Header: CardHeader,\n  Body: CardBody,\n  Footer: CardFooter,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Card.cjs","names":["React","slotRendersContent","useId","useMergedRefs","isDev","hasWarned","getTabbableElements","useEventCallback","composeEventHandlers","CardCornersContext","CardOrientationContext","cn","cardClassNames","forcedColors","renderSlot","CheckIcon","_Fragment","cardHeaderClassNames","materialiseSlotContent","cardBodyClassNames","cardFooterClassNames","CardPreview","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useEventCallback","require_useId","require_focus","require_useMergedRefs","require_styles","require_icons","require_Card_context","require_Card_preview","react","react_jsx_runtime","INTERACTIVE_SELECTOR","ELEMENT_NODE","isForeignEvent","target","event","root","control","NESTED_INTERACTIVE_WARNING","CardTitleIdContext","cardAppearanceClasses","cardSizeClasses","CardRoot","rest","props","Component","as","selectable","onSelect","checkboxMode","selectionControl","cardMode","hasFloatingAction","floatingAction","checkboxHidden","checkbox","checkboxElement","builtInCheckbox","checkboxProps","corners","nativeButton","titleId","rootRef","mergedRef","ref","selectLabel","spaceArmedRef","setSpaceArmed","armed","takeSpaceArmed","handleClick","onClick","keyboardActivation","handleKeyDown","onKeyDown","handleKeyUp","onKeyUp","handleBlur","onBlur","defaults","selected","orientation","appearance","size","className","children","CardHeader","hasTitle","title","hasSubtitle","subtitle","hasImage","image","hasAction","action","text","CardBody","CardFooter","Card"],"sources":["../../../src/components/layout/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  cardBodyClassNames,\n  cardClassNames,\n  cardFooterClassNames,\n  cardHeaderClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { hasWarned, isDev, warnOnce } from '../../lib/dev';\nimport { getTabbableElements } from '../../lib/focus';\nimport { CheckIcon } from '../../lib/icons';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { CoreSize, Orientation, Slot } from '../../lib/types';\nimport { CardCornersContext, CardOrientationContext } from './Card.context';\nimport { CardPreview } from './Card.preview';\n\nexport { CardPreview };\nexport type { CardPreviewOwnProps, CardPreviewProps } from './Card.preview';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\n\n/**\n * Elements whose own events a selectable card ignores: a click or key press that starts inside a\n * nested control belongs to that control, never to the card (layout#35). A `<label>` counts too:\n * its click already activates the control it labels.\n */\nconst INTERACTIVE_SELECTOR =\n  'button, a[href], input, select, textarea, label, summary, [role=\"button\"], [tabindex]';\n\n/** `Node.ELEMENT_NODE`, spelled out so no realm's `Node` global is read. */\nconst ELEMENT_NODE = 1;\n\n/**\n * Whether the card must ignore `event`: it started outside the card's DOM, or inside an\n * interactive element nested in `root` (the card itself, which carries `role=\"button\"`/`tabindex`\n * in the default mode, does not count).\n *\n * React events bubble through portals along the component tree, so a menu, popover or dialog\n * opened from inside the card (e.g. a footer overflow menu) reaches the card's handlers although\n * its DOM lives elsewhere. Such a target is not a DOM descendant of the card and never selects it.\n *\n * The target is duck typed (`nodeType`) rather than checked with `instanceof`, so a card rendered\n * into another realm's document (an iframe, or a popout window reached through `createPortal`)\n * still selects: its nodes are not instances of the main realm's `Node`/`Element`.\n */\nfunction isForeignEvent(event: React.SyntheticEvent, root: Element): boolean {\n  const target = event.target as Partial<Node> | null;\n  if (!target || typeof target.nodeType !== 'number' || !root.contains(target as Node)) {\n    return true;\n  }\n  if (target.nodeType !== ELEMENT_NODE) return false;\n  const control = (target as Element).closest(INTERACTIVE_SELECTOR);\n  return control !== null && control !== root && root.contains(control);\n}\n\n/** Warn-once key of the \"selectable card contains tabbable elements\" diagnostic. */\nconst NESTED_INTERACTIVE_WARNING = 'Card:nested-interactive';\n\n/**\n * The id of the header title that names the built-in checkbox of a `selectionControl=\"checkbox\"`\n * card; `null` everywhere else (other cards, and a `Card.Header` rendered on its own, which does\n * not require a Card). A string, never an object, so the provider value needs no memoisation.\n */\nconst CardTitleIdContext = React.createContext<string | null>(null);\n\n/** The look of a Card: a filled surface with a shadow, a muted fill, an outline, or no surface. */\nexport type CardAppearance = 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n/**\n * Surface, border and shadow of a card per appearance, and the hover and pressed fills of a\n * selectable one (`filled` lifts its shadow instead of changing its fill). Literal strings only.\n */\nconst cardAppearanceClasses: Readonly<\n  Record<CardAppearance, { surface: string; interactive: string }>\n> = {\n  filled: {\n    surface: 'border border-border bg-card shadow-4',\n    interactive: 'not-disabled:not-aria-disabled:hover:shadow-8',\n  },\n  'filled-alternative': {\n    surface: 'border border-transparent bg-muted',\n    interactive:\n      'not-disabled:not-aria-disabled:hover:bg-muted-hover not-disabled:not-aria-disabled:active:bg-muted-pressed',\n  },\n  outline: {\n    surface: 'border border-border bg-transparent',\n    interactive:\n      'not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed',\n  },\n  subtle: {\n    surface: 'border border-transparent bg-transparent',\n    interactive:\n      'not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed',\n  },\n};\n\n/** The padding the parts of a card read (`--wave-card-padding`), per size. */\nconst cardSizeClasses: Readonly<Record<CoreSize, string>> = {\n  small: '[--wave-card-padding:0.75rem]',\n  medium: '[--wave-card-padding:1rem]',\n  large: '[--wave-card-padding:1.25rem]',\n};\n\n/**\n * The Card's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`).\n */\nexport interface CardOwnProps {\n  /**\n   * Look of the card: `filled` (a surface with a border and a shadow), `filled-alternative` (a\n   * muted fill), `outline` (a border only) or `subtle` (no surface until hovered or selected). A\n   * selectable card gets a hover and pressed look for its appearance; the selected look is the\n   * same in every appearance.\n   * @default 'filled'\n   */\n  appearance?: CardAppearance;\n  /**\n   * Padding of the card's parts: `small` 0.75rem, `medium` 1rem, `large` 1.25rem.\n   * @default 'medium'\n   */\n  size?: CoreSize;\n  /**\n   * Layout of the card's parts: `vertical` stacks them, `horizontal` puts them in a row (put the\n   * text parts in one wrapper element to keep them stacked beside a `Card.Preview`).\n   * @default 'vertical'\n   */\n  orientation?: Orientation;\n  /**\n   * Whether the card is selected. Shown with the selected colors plus non-color cues: a 2px primary\n   * border (a 1px border plus an inset 1px ring), a Highlight outline in forced-colors mode, and a\n   * check glyph (with `selectionControl=\"checkbox\"` the checked checkbox instead).\n   *\n   * The state reaches assistive technology only on a selectable card (`onSelect`): as\n   * `aria-pressed` (default mode) or as the built-in checkbox's checked state. Without `onSelect`,\n   * `selected` is a visual state only (the glyph is decorative); state it in the content if it\n   * matters to screen-reader users, or make the card selectable.\n   */\n  selected?: boolean;\n  /**\n   * Makes the card selectable: called when the card is activated by a click, Enter (on key down)\n   * or Space (on key up, like a native button) in the default mode, or when its built-in checkbox\n   * changes (`selectionControl=\"checkbox\"`). Clicks and key presses that start inside a nested\n   * interactive element (a button, link, input or any element with `tabindex`), or in content\n   * portaled out of the card (a menu, popover or dialog opened from it), are ignored, so a footer\n   * action never selects the card.\n   */\n  onSelect?: () => void;\n  /**\n   * How a selectable card (`onSelect`) exposes its selection:\n   * - `'card'` (default): the card itself is the control — `role=\"button\"`, a tab stop, Enter and\n   *   Space activation and `aria-pressed={selected}` when `selected` is defined. Use it only for\n   *   cards **without** interactive content: a button inside a `role=\"button\"` card is invalid\n   *   (axe `nested-interactive`), and a development warning points here. A button's children are\n   *   presentational, so the card's content is flattened into its name: a heading (e.g.\n   *   `<Card.Header as=\"h3\">`), list or other structure inside it is not exposed and cannot be\n   *   reached by heading navigation (no warning covers this). Keep such cards short.\n   * - `'checkbox'`: the card is not a widget; a built-in native checkbox (top end corner) carries\n   *   `selected` and is named by the `Card.Header` title (or `selectLabel`). Pointer clicks on\n   *   non-interactive card areas still toggle it. Use it for cards with actions, and for cards\n   *   whose headings or other structure must stay navigable.\n   * @default 'card'\n   */\n  selectionControl?: 'card' | 'checkbox';\n  /**\n   * Accessible name of the built-in checkbox (`selectionControl=\"checkbox\"`). Defaults to the\n   * `Card.Header` title, which the checkbox references with `aria-labelledby`.\n   */\n  selectLabel?: string;\n  /**\n   * The built-in checkbox of `selectionControl=\"checkbox\"`: an object of `<input>` attributes is\n   * merged onto it (a class, `aria-describedby`, `name`; its type, checked state and change\n   * handling stay the card's), an element replaces it (give that control its own name and call\n   * `onSelect` from it), and `null` or `false` removes it, for a control you render elsewhere.\n   * Ignored with the default `selectionControl`.\n   */\n  checkbox?: Slot<'input'>;\n  /**\n   * An action over the top end corner of the card (a menu button, say). A card with one is\n   * positioned; with `selectionControl=\"checkbox\"` the built-in checkbox then moves to the top\n   * start corner. Content that renders nothing renders no element.\n   */\n  floatingAction?: Slot<'span'>;\n}\n\n/**\n * Props of {@link Card} rendered as `C` (default `'div'`). `CardProps` without a type argument is\n * the 0.4 name: the props of a Card rendered as a `<div>`, including `ref`.\n */\nexport type CardProps<C extends React.ElementType = 'div'> = PolymorphicProps<C, CardOwnProps>;\n\n/** The props the implementation reads, for any `as` (the public typing is `PolymorphicComponent`). */\ntype CardImplProps = CardOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n    type?: string;\n  };\n\n// The Card root, documented on the exported `Card` const.\nconst CardRoot: PolymorphicComponent<'div', CardOwnProps> = (props) => {\n  const {\n    as,\n    selected,\n    onSelect,\n    selectionControl = 'card',\n    selectLabel,\n    checkbox,\n    floatingAction,\n    appearance = 'filled',\n    size = 'medium',\n    orientation = 'vertical',\n    className,\n    children,\n    ref,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n    ...rest\n  } = props as CardImplProps;\n\n  const Component: React.ElementType = as ?? 'div';\n  const selectable = onSelect !== undefined;\n  const checkboxMode = selectable && selectionControl === 'checkbox';\n  const cardMode = selectable && !checkboxMode;\n  const hasFloatingAction = floatingAction !== undefined && slotRendersContent(floatingAction);\n  // The built-in checkbox: not with `checkbox={null | false}` (the consumer renders the control)\n  // nor with an element (it replaces it); an object is merged onto it.\n  const checkboxHidden = checkbox === null || checkbox === false;\n  const checkboxElement = React.isValidElement(checkbox) ? checkbox : null;\n  const builtInCheckbox = checkboxMode && !checkboxHidden && checkboxElement === null;\n  const checkboxProps =\n    typeof checkbox === 'object' &&\n    checkbox !== null &&\n    !React.isValidElement(checkbox) &&\n    !Array.isArray(checkbox)\n      ? (checkbox as React.InputHTMLAttributes<HTMLInputElement>)\n      : undefined;\n  const corners = React.useMemo(\n    () => ({\n      checkboxAtStart: builtInCheckbox && hasFloatingAction,\n      floatingAction: hasFloatingAction,\n    }),\n    [builtInCheckbox, hasFloatingAction],\n  );\n  /** A native `<button>` already has the role, tab stop and keyboard activation. */\n  const nativeButton = Component === 'button';\n\n  const titleId = useId('card-title');\n  const rootRef = React.useRef<HTMLElement | null>(null);\n  const mergedRef = useMergedRefs<HTMLElement>(ref, rootRef);\n\n  // Development diagnostics (C-DEV): read the mounted DOM after every commit (content can change\n  // without prop changes), warn once. Once a key has warned, its DOM scan is skipped.\n  React.useEffect(() => {\n    const root = rootRef.current;\n    if (!isDev || !root || !selectable) return;\n    if (\n      cardMode &&\n      !hasWarned(NESTED_INTERACTIVE_WARNING) &&\n      getTabbableElements(root).length > 0\n    ) {\n      warnOnce(\n        NESTED_INTERACTIVE_WARNING,\n        'Card: a selectable card (`onSelect`) is a button and must not contain focusable elements (buttons, links, inputs). Use `selectionControl=\"checkbox\"` for cards with interactive content.',\n      );\n    }\n    if (builtInCheckbox && !selectLabel && !root.ownerDocument.getElementById(titleId)) {\n      warnOnce(\n        'Card:checkbox-name',\n        'Card: the selection checkbox has no accessible name. Render a `Card.Header` with a `title`, or pass `selectLabel`.',\n      );\n    }\n  });\n\n  /**\n   * Set by an unprevented Space keydown on the card; Space selects on the following keyup only\n   * while it is set (like a native button and P01's Button: a keyup alone never selects, and\n   * moving focus away in between cancels). The ref is only touched from event handlers, through\n   * these two stable callbacks (C-HOOKS).\n   */\n  const spaceArmedRef = React.useRef(false);\n  /** Arms (or disarms) Space activation. */\n  const setSpaceArmed = useEventCallback((armed: boolean) => {\n    spaceArmedRef.current = armed;\n  });\n  /** Reads and clears the Space arm. */\n  const takeSpaceArmed = useEventCallback(() => {\n    const armed = spaceArmedRef.current;\n    spaceArmedRef.current = false;\n    return armed;\n  });\n\n  const handleClick = composeEventHandlers<React.MouseEvent<HTMLElement>>(onClick, (event) => {\n    if (!selectable || isForeignEvent(event, event.currentTarget)) return;\n    onSelect();\n  });\n\n  /** Keyboard activation applies to a `role=\"button\"` card (a native `<button>` has its own). */\n  const keyboardActivation = cardMode && !nativeButton;\n\n  const handleKeyDown = composeEventHandlers<React.KeyboardEvent<HTMLElement>>(\n    onKeyDown,\n    (event) => {\n      if (!keyboardActivation) return;\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n      if (isForeignEvent(event, event.currentTarget)) return;\n      // Space would scroll the page: prevent it now, select on keyup. Enter selects on keydown; a\n      // held Enter does not toggle repeatedly.\n      event.preventDefault();\n      if (event.key === ' ') setSpaceArmed(true);\n      else if (!event.repeat) onSelect?.();\n    },\n  );\n\n  const handleKeyUp = composeEventHandlers<React.KeyboardEvent<HTMLElement>>(\n    onKeyUp,\n    (event) => {\n      if (!keyboardActivation || event.key !== ' ') return;\n      // Always consume the arm, also when the consumer prevented this keyup.\n      const armed = takeSpaceArmed();\n      if (!armed || event.defaultPrevented || isForeignEvent(event, event.currentTarget)) return;\n      event.preventDefault();\n      onSelect?.();\n    },\n    { checkDefaultPrevented: false },\n  );\n\n  // Moving focus away between Space keydown and keyup cancels the activation (native behavior).\n  const handleBlur = composeEventHandlers<React.FocusEvent<HTMLElement>>(\n    onBlur,\n    () => {\n      if (keyboardActivation) setSpaceArmed(false);\n    },\n    { checkDefaultPrevented: false },\n  );\n\n  /** Defaults the consumer may override (C-COMPOSE: before `{...rest}`). */\n  const defaults: Record<string, unknown> = {};\n  if (cardMode) {\n    if (nativeButton) {\n      defaults.type = 'button';\n    } else {\n      defaults.role = 'button';\n      defaults.tabIndex = 0;\n    }\n    if (selected !== undefined) defaults['aria-pressed'] = selected;\n  }\n\n  return (\n    <CardTitleIdContext.Provider value={checkboxMode ? titleId : null}>\n      <CardCornersContext.Provider value={corners}>\n        <CardOrientationContext.Provider value={orientation}>\n          <Component\n            {...defaults}\n            {...rest}\n            ref={mergedRef}\n            data-selected={selected ? '' : undefined}\n            data-appearance={appearance}\n            data-size={size}\n            data-orientation={orientation}\n            className={cn(\n              cardClassNames.root,\n              'overflow-hidden rounded-md',\n              cardAppearanceClasses[appearance].surface,\n              cardSizeClasses[size],\n              orientation === 'horizontal' && 'flex flex-row',\n              // Positions the check glyph / checkbox; plain cards keep their 0.4 positioning.\n              (selectable || selected !== undefined || hasFloatingAction) && 'relative',\n              selected &&\n                cn(\n                  'border-primary bg-selected text-selected-foreground ring-1 ring-inset ring-primary',\n                  forcedColors.selectedContainer,\n                ),\n              selectable && 'cursor-pointer',\n              selectable && !selected && cardAppearanceClasses[appearance].interactive,\n              cardMode && focusRing,\n              className,\n            )}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            onKeyUp={handleKeyUp}\n            onBlur={handleBlur}\n          >\n            {builtInCheckbox && (\n              <input\n                {...checkboxProps}\n                type=\"checkbox\"\n                checked={selected ?? false}\n                onChange={composeEventHandlers(checkboxProps?.onChange, () => onSelect())}\n                aria-label={checkboxProps?.['aria-label'] ?? selectLabel}\n                aria-labelledby={\n                  (checkboxProps?.['aria-label'] ?? selectLabel)\n                    ? undefined\n                    : (checkboxProps?.['aria-labelledby'] ?? titleId)\n                }\n                className={cn(\n                  cardClassNames.checkbox,\n                  'absolute top-3 m-0 size-4 cursor-pointer accent-primary',\n                  hasFloatingAction ? 'start-3' : 'end-3',\n                  focusRing,\n                  checkboxProps?.className,\n                )}\n              />\n            )}\n            {checkboxMode && checkboxElement}\n            {hasFloatingAction &&\n              renderSlot(\n                floatingAction,\n                'span',\n                cn(cardClassNames.floatingAction, 'absolute end-3 top-3 inline-flex'),\n              )}\n            {selected && !checkboxMode && (\n              <CheckIcon\n                size={12}\n                className={cn(cardClassNames.checkmark, 'absolute end-2 top-2 text-primary')}\n              />\n            )}\n            {children}\n          </Component>\n        </CardOrientationContext.Provider>\n      </CardCornersContext.Provider>\n    </CardTitleIdContext.Provider>\n  );\n};\nCardRoot.displayName = 'Card';\n\n/** The Card.Header's own props (component-specific props only). */\nexport interface CardHeaderOwnProps {\n  /**\n   * Title content displayed in the card header. It also names a selectable card's built-in\n   * checkbox (`selectionControl=\"checkbox\"`). Content that renders nothing (`''`, `[]`, a list of\n   * nothing) renders no title element; `0` is content.\n   */\n  title?: React.ReactNode;\n  /** Subtitle content displayed below the title (none when it renders nothing, as `title`). */\n  subtitle?: React.ReactNode;\n  /**\n   * An image beside the text, at the start: an `Avatar`, an icon, a logo. A value that renders\n   * nothing renders no element.\n   */\n  image?: Slot<'span'>;\n  /**\n   * An action beside the text, at the end: a menu button, say. A value that renders nothing\n   * renders no element.\n   */\n  action?: Slot<'span'>;\n}\n\n/** Props of {@link CardHeader} rendered as `C` (default `'div'`), including `ref`. */\nexport type CardHeaderProps<C extends React.ElementType = 'div'> = PolymorphicProps<\n  C,\n  CardHeaderOwnProps\n>;\n\ntype CardHeaderImplProps = CardHeaderOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'title'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\n/**\n * The header of a {@link Card}: a title and an optional subtitle, followed by any children.\n * Flat export for React Server Components (`Card.Header` in client files).\n */\nexport const CardHeader: PolymorphicComponent<'div', CardHeaderOwnProps> = (props) => {\n  const { as, title, subtitle, image, action, className, children, ref, ...rest } =\n    props as CardHeaderImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  /** Set only inside a `selectionControl=\"checkbox\"` card: the title names its checkbox. */\n  const titleId = React.useContext(CardTitleIdContext);\n  // A title or subtitle that renders nothing (`''`, `[]`, a list of nothing) gets no element, so a\n  // checkbox card with such a title warns about its missing name; `0` is content.\n  const hasTitle = slotRendersContent(title);\n  const hasSubtitle = slotRendersContent(subtitle);\n  const hasImage = image !== undefined && slotRendersContent(image);\n  const hasAction = action !== undefined && slotRendersContent(action);\n  const corners = React.useContext(CardCornersContext);\n  const text = (\n    <>\n      {hasTitle && (\n        <div\n          id={titleId ?? undefined}\n          className={cn(cardHeaderClassNames.title, 'text-subtitle-1')}\n        >\n          {materialiseSlotContent(title)}\n        </div>\n      )}\n      {hasSubtitle && (\n        <div className={cn(cardHeaderClassNames.subtitle, 'text-caption-1 text-muted-foreground')}>\n          {materialiseSlotContent(subtitle)}\n        </div>\n      )}\n      {children}\n    </>\n  );\n  return (\n    // In a checkbox card the header keeps clear of the checkbox in the top end corner.\n    <Component\n      ref={ref}\n      className={cn(\n        cardHeaderClassNames.root,\n        'p-[var(--wave-card-padding,1rem)]',\n        ((titleId && !corners.checkboxAtStart) || corners.floatingAction) && 'pe-10',\n        corners.checkboxAtStart && 'ps-10',\n        (hasImage || hasAction) &&\n          cn(\n            'grid items-center gap-x-3',\n            hasImage && hasAction\n              ? 'grid-cols-[auto_1fr_auto]'\n              : hasImage\n                ? 'grid-cols-[auto_1fr]'\n                : 'grid-cols-[1fr_auto]',\n          ),\n        className,\n      )}\n      {...rest}\n    >\n      {hasImage &&\n        renderSlot(\n          image,\n          'span',\n          cn(cardHeaderClassNames.image, 'inline-flex shrink-0 items-center'),\n        )}\n      {hasImage || hasAction ? <div className={cardHeaderClassNames.text}>{text}</div> : text}\n      {hasAction &&\n        renderSlot(\n          action,\n          'span',\n          cn(cardHeaderClassNames.action, 'inline-flex shrink-0 items-center'),\n        )}\n    </Component>\n  );\n};\nCardHeader.displayName = 'CardHeader';\n\n/** The Card.Body's own props: none besides the element's (component-specific props only). */\nexport type CardBodyOwnProps = Record<never, never>;\n\n/** Props of {@link CardBody} rendered as `C` (default `'div'`), including `ref`. */\nexport type CardBodyProps<C extends React.ElementType = 'div'> = PolymorphicProps<\n  C,\n  CardBodyOwnProps\n>;\n\ntype CardSectionImplProps = React.HTMLAttributes<HTMLElement> & {\n  as?: React.ElementType;\n  ref?: React.Ref<HTMLElement>;\n};\n\n/**\n * The main content of a {@link Card}. Flat export for React Server Components (`Card.Body` in\n * client files).\n */\nexport const CardBody: PolymorphicComponent<'div', CardBodyOwnProps> = (props) => {\n  const { as, className, ref, ...rest } = props as CardSectionImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      className={cn(cardBodyClassNames.root, 'p-[var(--wave-card-padding,1rem)] pt-0', className)}\n      {...rest}\n    />\n  );\n};\nCardBody.displayName = 'CardBody';\n\n/** The Card.Footer's own props: none besides the element's (component-specific props only). */\nexport type CardFooterOwnProps = Record<never, never>;\n\n/** Props of {@link CardFooter} rendered as `C` (default `'div'`), including `ref`. */\nexport type CardFooterProps<C extends React.ElementType = 'div'> = PolymorphicProps<\n  C,\n  CardFooterOwnProps\n>;\n\n/**\n * The action row of a {@link Card} (end-aligned). A selectable card with actions here needs\n * `selectionControl=\"checkbox\"`. Flat export for React Server Components (`Card.Footer` in client\n * files).\n */\nexport const CardFooter: PolymorphicComponent<'div', CardFooterOwnProps> = (props) => {\n  const { as, className, ref, ...rest } = props as CardSectionImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      className={cn(\n        cardFooterClassNames.root,\n        'flex justify-end gap-2 p-[var(--wave-card-padding,1rem)] pt-0',\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\nCardFooter.displayName = 'CardFooter';\n\n/**\n * A surface that groups related content, with `Card.Header`, `Card.Preview`, `Card.Body` and\n * `Card.Footer`.\n *\n * **Selectable cards** (`onSelect`) come in two patterns:\n * - A card without interactive content is itself the control (`selectionControl=\"card\"`, the\n *   default): it is a `role=\"button\"` tab stop activated by click, Enter (key down) or Space (key\n *   up, cancelled by moving focus away first), with `aria-pressed` reflecting `selected`. Its\n *   content becomes the button's name, so headings and other structure inside it are flattened.\n * - A card that contains buttons or links, or headings that must stay navigable, uses\n *   `selectionControl=\"checkbox\"`: a built-in checkbox named by the header title carries the\n *   selection, and the card's actions and structure stay separate from it.\n *\n * In both modes events that start inside a nested interactive element, or in content portaled out\n * of the card, are ignored. `onClick`, `onKeyDown` and `onKeyUp` are composed with the built-in\n * selection (call `event.preventDefault()` to skip it). A `selected` card without `onSelect` shows\n * the selected look only; its state is not exposed to assistive technology.\n *\n * React Server Components cannot dot into a client module: import the flat names `CardHeader`,\n * `CardPreview`, `CardBody` and `CardFooter` there; `Card.Header` etc. work in client files.\n *\n * @example\n * <Card onSelect={toggle} selected={selected}>\n *   <Card.Header title=\"Pro plan\" subtitle=\"Billed monthly\" />\n * </Card>\n *\n * <Card onSelect={toggle} selected={selected} selectionControl=\"checkbox\">\n *   <Card.Header title=\"Pro plan\" />\n *   <Card.Footer><Button>Details</Button></Card.Footer>\n * </Card>\n */\nexport const Card = /* @__PURE__ */ Object.assign(CardRoot, {\n  Header: CardHeader,\n  Preview: CardPreview,\n  Body: CardBody,\n  Footer: CardFooter,\n});\n"],"mappings":"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"}

package/dist/components/layout/Card.context.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs");let t=require("react");t=e.__toESM(t,1);var n=t.createContext(`vertical`);n.displayName=`CardOrientationContext`;var r=t.createContext({checkboxAtStart:!1,floatingAction:!1});r.displayName=`CardCornersContext`,exports.CardCornersContext=r,exports.CardOrientationContext=n;
+//# sourceMappingURL=Card.context.cjs.map

package/dist/components/layout/Card.context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.context.cjs","names":["React","require_runtime","react","CardOrientationContext","CardCornersContext"],"sources":["../../../src/components/layout/Card.context.ts"],"sourcesContent":["import * as React from 'react';\nimport type { Orientation } from '../../lib/types';\n\n/*\n * What a Card gives its parts. Internal (never exported from a barrel); imports no component, so a\n * part that reads it does not import the Card.\n */\n\n/** The orientation of the enclosing Card, for `Card.Preview`; `'vertical'` outside a Card. */\nexport const CardOrientationContext = React.createContext<Orientation>('vertical');\nCardOrientationContext.displayName = 'CardOrientationContext';\n\n/** Which corners of the enclosing Card hold controls, for `Card.Header`'s padding. */\nexport interface CardCornersContextValue {\n  /** The built-in checkbox sits in the top start corner (a floating action takes the end). */\n  checkboxAtStart: boolean;\n  /** A floating action sits in the top end corner. */\n  floatingAction: boolean;\n}\n\n/** The corners of the enclosing Card; both `false` outside a Card. */\nexport const CardCornersContext = React.createContext<CardCornersContextValue>({\n  checkboxAtStart: false,\n  floatingAction: false,\n});\nCardCornersContext.displayName = 'CardCornersContext';\n"],"mappings":"6GASA,IAAaG,EAAyBH,EAAM,cAA2B,UAAU,EACjF,EAAuB,YAAc,yBAWrC,IAAaI,EAAqBJ,EAAM,cAAuC,CAC7E,gBAAiB,GACjB,eAAgB,EAClB,CAAC,EACD,EAAmB,YAAc"}

package/dist/components/layout/Card.context.mjs

@@ -0,0 +1,14 @@
+"use client";
+import * as e from "react";
+//#region src/components/layout/Card.context.ts
+var t = e.createContext("vertical");
+t.displayName = "CardOrientationContext";
+var n = e.createContext({
+	checkboxAtStart: !1,
+	floatingAction: !1
+});
+n.displayName = "CardCornersContext";
+//#endregion
+export { n as CardCornersContext, t as CardOrientationContext };
+
+//# sourceMappingURL=Card.context.mjs.map

package/dist/components/layout/Card.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.context.mjs","names":["React","CardOrientationContext","CardCornersContext"],"sources":["../../../src/components/layout/Card.context.ts"],"sourcesContent":["import * as React from 'react';\nimport type { Orientation } from '../../lib/types';\n\n/*\n * What a Card gives its parts. Internal (never exported from a barrel); imports no component, so a\n * part that reads it does not import the Card.\n */\n\n/** The orientation of the enclosing Card, for `Card.Preview`; `'vertical'` outside a Card. */\nexport const CardOrientationContext = React.createContext<Orientation>('vertical');\nCardOrientationContext.displayName = 'CardOrientationContext';\n\n/** Which corners of the enclosing Card hold controls, for `Card.Header`'s padding. */\nexport interface CardCornersContextValue {\n  /** The built-in checkbox sits in the top start corner (a floating action takes the end). */\n  checkboxAtStart: boolean;\n  /** A floating action sits in the top end corner. */\n  floatingAction: boolean;\n}\n\n/** The corners of the enclosing Card; both `false` outside a Card. */\nexport const CardCornersContext = React.createContext<CardCornersContextValue>({\n  checkboxAtStart: false,\n  floatingAction: false,\n});\nCardCornersContext.displayName = 'CardCornersContext';\n"],"mappings":";;;AASA,IAAaC,IAAyBD,EAAM,cAA2B,UAAU;AACjF,EAAuB,cAAc;AAWrC,IAAaE,IAAqBF,EAAM,cAAuC;CAC7E,iBAAiB;CACjB,gBAAgB;AAClB,CAAC;AACD,EAAmB,cAAc"}