@mortenbrudvik/waveui 0.10.0 → 0.12.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionTag.mjs","names":["useId","useId$1","React","noop","createPrimaryRegistry","count","settled","listeners","notify","listener","onChange","INERT_PRIMARY_REGISTRY","InteractionTagContext","INERT_CONTEXT","useInteractionTagContext","reportMissingContext","componentName","isKeyOf","value","table","disabledClasses","cn","dimDisabled","INTERACTION_TAG_DISABLED_CLASSES","mergedAriaDisabledClasses","INTERACTION_TAG_UNDIMMED_DISABLED_CLASSES","disabled","forcedColors","SELECTED_IN_GROUP_MESSAGE","buttonStateProps","held","MERGED_DISABLED_FOCUSABLE_PROPS","InteractionTagRoot","appearanceProp","sizeProp","shapeProp","disabledProp","selectedProp","rest","group","useTagGroupContext","rootRef","mergedRef","useMergedRefs","ref","secondaryRef","primaryTextId","primaries","size","tagSizeClasses","appearance","tagAppearanceClasses","shape","tagShapeClasses","reportedValue","useTagGroupItem","selecting","pressed","selected","look","selectedIgnored","warnOnce","dismiss","useEventCallback","toggle","listItemRole","hiddenByHost","context","role","hidden","interactionTagClassNames","className","InteractionTagPrimary","ariaPressed","tag","hold","useHeldFocus","registerPrimary","hasMedia","slotRendersContent","media","hasIcon","icon","secondary","materialiseSlotContent","secondaryText","hasSecondary","avatarBox","TAG_AVATAR_SIZE","handleClick","isOwnEvent","event","handleKeyDown","isDismissKey","secondaryButton","primaryText","interactionTagPrimaryClassNames","composeEventHandlers","onClick","onKeyDown","onFocus","onBlur","INTERACTION_TAG_BUTTON_BASE_CLASSES","INTERACTION_TAG_PRIMARY_BASE_CLASSES","tagStartInsetClasses","interactionTagPrimaryEndInsetClasses","interactionTagLookClasses","INTERACTION_TAG_PRIMARY_JOINED_CLASSES","focusRing","AvatarSizeContext","renderSlot","tagMediaClasses","tagIconClasses","TAG_TEXT_COLUMN_CLASSES","TAG_SECONDARY_TEXT_CLASSES","BUTTON_CHILD_MESSAGE","InteractionTagSecondary","ariaLabel","ariaLabelledBy","dismissLabelId","contentId","ownRef","unwrapped","unwrapButtonGlyph","children","content","glyph","hasContent","literalTextLabel","hasTextLabel","labelTarget","setLabelTarget","subscribeToContent","observeTextLabel","contentHasTextLabel","hasRenderedTextLabel","hasLabel","hasPrimary","namedByConsumer","labelledBy","joinIds","isRepeatedActivation","interactionTagSecondaryClassNames","INTERACTION_TAG_SECONDARY_BASE_CLASSES","interactionTagSecondarySizeClasses","interactionTagDividerClasses","interactionTagSecondaryShapeClasses","dismissLabel","DismissIcon","TAG_DISMISS_GLYPH_SIZE","InteractionTag"],"sources":["../../../src/components/data-display/InteractionTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { joinIds } from '../../lib/aria';\nimport { cn } from '../../lib/cn';\nimport {\n  interactionTagClassNames,\n  interactionTagPrimaryClassNames,\n  interactionTagSecondaryClassNames,\n} from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { reportMissingContext, warnOnce } from '../../lib/dev';\nimport { isOwnEvent } from '../../lib/events';\nimport { DismissIcon } from '../../lib/icons';\nimport { hasRenderedTextLabel, hasTextLabel, observeTextLabel } from '../../lib/labelInName';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { Slot } from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { TagAppearance, TagShape, TagSize } from '../../lib/types';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport {\n  MERGED_DISABLED_FOCUSABLE_PROPS,\n  mergedAriaDisabledClasses,\n  unwrapButtonGlyph,\n} from '../button/Button.slots';\nimport { AvatarSizeContext } from './Avatar.context';\nimport {\n  isDismissKey,\n  isRepeatedActivation,\n  useDismissControlFocus,\n  useHeldFocus,\n  useTagGroupContext,\n  useTagGroupItem,\n} from './TagGroup.context';\nimport {\n  INTERACTION_TAG_BUTTON_BASE_CLASSES,\n  INTERACTION_TAG_DISABLED_CLASSES,\n  INTERACTION_TAG_EXTRA_SMALL_HIT_CLASSES,\n  INTERACTION_TAG_PRIMARY_BASE_CLASSES,\n  INTERACTION_TAG_PRIMARY_JOINED_CLASSES,\n  INTERACTION_TAG_SECONDARY_BASE_CLASSES,\n  INTERACTION_TAG_SECONDARY_LABEL_CLASSES,\n  INTERACTION_TAG_SELECTED_FORCED_COLORS,\n  INTERACTION_TAG_UNDIMMED_DISABLED_CLASSES,\n  TAG_AVATAR_SIZE,\n  TAG_DISMISS_GLYPH_SIZE,\n  TAG_PRIMARY_TEXT_TWO_LINE_CLASSES,\n  TAG_SECONDARY_TEXT_CLASSES,\n  TAG_TEXT_COLUMN_CLASSES,\n  interactionTagDividerClasses,\n  interactionTagLookClasses,\n  interactionTagPrimaryEndInsetClasses,\n  interactionTagSecondaryShapeClasses,\n  interactionTagSecondarySizeClasses,\n  tagAppearanceClasses,\n  tagIconClasses,\n  tagMediaClasses,\n  tagShapeClasses,\n  tagSizeClasses,\n  tagStartInsetClasses,\n} from './tagStyles';\nimport type { TagLook } from './tagStyles';\n\n/** Props of InteractionTag: the element that holds the Primary and Secondary buttons. */\nexport interface InteractionTagProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Identifies the tag in a TagGroup: the value `onDismiss` receives and the selection holds. Give\n   * every tag of a group its own value.\n   * @default a generated id (a development warning in a group that reports values)\n   */\n  value?: string;\n  /**\n   * Colour scheme of both buttons: `filled` (a neutral fill), `outline` (a border on the surface\n   * behind it) or `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), `small` (24px) or `extra-small` (20px); an Avatar in the Primary's\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) or `rounded` (4px corners). Fluent's default is `rounded`.\n   * @default the TagGroup's `shape`, else 'circular'\n   */\n  shape?: TagShape;\n  /**\n   * Disables both buttons natively (a disabled TagGroup does too; a part's own `disabled` cannot\n   * re-enable it). A button that has focus when it is disabled keeps it, unavailable, until focus\n   * leaves it. Rendered as `data-disabled` on the root.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Outside a selecting TagGroup: draws the selected look and makes the Primary a toggle:\n   * `aria-pressed=\"true\"`, or `\"false\"` for `selected={false}`. Leave it `undefined` for an\n   * action that is not a toggle (no `aria-pressed`). Inside a selecting TagGroup (`value`,\n   * `defaultValue` or `onValueChange`) the group's `value` decides, and a defined `selected` is\n   * ignored (a development warning). Rendered as `data-selected` on the root and both buttons.\n   * Disabled wins over the selected look (`aria-pressed` and `data-selected` still render).\n   * Fluent's `selected` is a look only.\n   */\n  selected?: boolean;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Props of InteractionTag.Primary: the tag's main action (or its toggle in a selecting TagGroup). */\nexport interface InteractionTagPrimaryProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * A visual before the text (an Avatar, sized for the tag: 24, 20 or 16px, unless it sets its\n   * own `size`). Decorative (`aria-hidden`): the button is named by its text.\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. Part of the Primary's name, not of the Secondary's. A\n   * small or extra-small tag grows to 28px to fit it.\n   */\n  secondaryText?: React.ReactNode;\n  /**\n   * Disables the Primary natively; or-ed with the InteractionTag's `disabled` (it cannot\n   * re-enable a disabled tag).\n   * @default false\n   */\n  disabled?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/** Props of InteractionTag.Secondary: the tag's separate Dismiss button. */\nexport interface InteractionTagSecondaryProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Visually hidden text that names the button with the Primary's text (\"Dismiss Cherry\"). A text\n   * label in the children replaces it (\"Remove Cherry\"); an `aria-label` replaces the whole name.\n   * Localise it here. Fluent's order is the primary text, then the label (\"Cherry remove\").\n   * @default 'Dismiss'\n   */\n  dismissLabel?: string;\n  /**\n   * Disables the Secondary natively; or-ed with the InteractionTag's `disabled` (it cannot\n   * re-enable a disabled tag).\n   * @default false\n   */\n  disabled?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\n/** What an InteractionTag gives its two buttons (resolved values, never `undefined` but `pressed`). */\ninterface InteractionTagContextValue {\n  size: TagSize;\n  shape: TagShape;\n  /** The look of both buttons: the appearance, or the selected look over it. */\n  look: TagLook;\n  /** Whether the tag is disabled (its own `disabled`, or its TagGroup's). */\n  disabled: boolean;\n  /** Whether the tag is selected (`data-selected`). */\n  selected: boolean;\n  /** The Primary's `aria-pressed`: `undefined` for an action that is not a toggle. */\n  pressed: boolean | undefined;\n  /** Whether a disabled button dims itself (`false` under a host that dims the tags as a whole). */\n  dimDisabled: boolean;\n  /** The id of the Primary's text, the second half of the Secondary's name. */\n  primaryTextId: string;\n  /** Which Primaries render, so the Secondary points at the primary text only while one does. */\n  primaries: PrimaryRegistry;\n  /** The Secondary, which Delete and Backspace on the Primary click (read at key time). */\n  secondaryRef: React.RefObject<HTMLButtonElement | null> | null;\n  /**\n   * Reports the dismissal to the TagGroup (its `onDismiss(value)`), after the Secondary's\n   * `onClick`, and then removes the tag's value from the group's selection (D39).\n   */\n  dismiss: () => void;\n  /** Toggles the tag's value in a selecting TagGroup's selection (the Primary's click). */\n  toggle: () => void;\n}\n\nconst noop = () => {};\n\n/**\n * The Primaries an InteractionTag renders, read by its Secondary, whose name points at the\n * primary text only while a Primary renders it (no id reference to a missing element). Until the\n * root's first commit (the server render, hydration and the first client render) a Primary is\n * assumed, so the server HTML holds the whole name and a tag with a Primary renders once; a\n * Secondary without one drops the id after that commit, and takes it again when one mounts. An\n * external store (C-HOOKS): a Primary registers from a layout effect.\n */\ninterface PrimaryRegistry {\n  subscribe: (onChange: () => void) => () => void;\n  /** Whether the Secondary's name may point at the primary text. */\n  hasPrimary: () => boolean;\n  /** For a Primary's layout effect: returns its cleanup. */\n  register: () => () => void;\n  /** For the root's layout effect: from now on the registrations decide. */\n  settle: () => void;\n}\n\nfunction createPrimaryRegistry(): PrimaryRegistry {\n  let count = 0;\n  let settled = false;\n  const listeners = new Set<() => void>();\n  const notify = () => {\n    for (const listener of listeners) listener();\n  };\n  return {\n    subscribe: (onChange) => {\n      listeners.add(onChange);\n      return () => {\n        listeners.delete(onChange);\n      };\n    },\n    hasPrimary: () => !settled || count > 0,\n    register: () => {\n      count += 1;\n      notify();\n      return () => {\n        count -= 1;\n        notify();\n      };\n    },\n    settle: () => {\n      if (settled) return;\n      settled = true;\n      notify();\n    },\n  };\n}\n\n/** The registry of the inert context: a Primary is always assumed. */\nconst INERT_PRIMARY_REGISTRY: PrimaryRegistry = {\n  subscribe: () => noop,\n  hasPrimary: () => true,\n  register: () => noop,\n  settle: noop,\n};\n\n/** Internal: `null` outside an InteractionTag. */\nconst InteractionTagContext = React.createContext<InteractionTagContextValue | null>(null);\nInteractionTagContext.displayName = 'InteractionTagContext';\n\n/** What a part reads outside an InteractionTag in production (C-CONTEXT): an enabled, unnamed tag. */\nconst INERT_CONTEXT: InteractionTagContextValue = {\n  size: 'medium',\n  shape: 'circular',\n  look: 'filled',\n  disabled: false,\n  selected: false,\n  pressed: undefined,\n  dimDisabled: true,\n  primaryTextId: '',\n  primaries: INERT_PRIMARY_REGISTRY,\n  secondaryRef: null,\n  dismiss: () => {},\n  toggle: () => {},\n};\n\nfunction useInteractionTagContext(componentName: string): InteractionTagContextValue {\n  const context = React.useContext(InteractionTagContext);\n  if (context) return context;\n  reportMissingContext(componentName, 'InteractionTag');\n  return INERT_CONTEXT;\n}\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/** The classes of a button's disabled states: dimmed, unless the host dims the tags itself. */\nfunction disabledClasses(disabled: boolean, dimDisabled: boolean): string {\n  return cn(\n    dimDisabled\n      ? [INTERACTION_TAG_DISABLED_CLASSES, mergedAriaDisabledClasses]\n      : INTERACTION_TAG_UNDIMMED_DISABLED_CLASSES,\n    disabled && forcedColors.disabled,\n  );\n}\n\nconst SELECTED_IN_GROUP_MESSAGE =\n  \"InteractionTag: `selected` has no effect in a TagGroup that selects (`value`, `defaultValue` or `onValueChange`); the group's `value` decides.\";\n\n/**\n * The state props of a tag button: natively disabled, or, while it keeps the focus it had when it\n * was disabled, the focusable disabled state (its click blocked).\n */\nfunction buttonStateProps(disabled: boolean, held: boolean) {\n  if (!disabled) return undefined;\n  return held ? MERGED_DISABLED_FOCUSABLE_PROPS : { disabled: true };\n}\n\n// ---------------------------------------------------------------------------\n// Root\n// ---------------------------------------------------------------------------\n\n// The InteractionTag root, documented on the exported `InteractionTag` const.\nconst InteractionTagRoot = ({\n  value,\n  appearance: appearanceProp,\n  size: sizeProp,\n  shape: shapeProp,\n  disabled: disabledProp = false,\n  selected: selectedProp,\n  role,\n  hidden,\n  className,\n  children,\n  ref,\n  ...rest\n}: InteractionTagProps) => {\n  const group = useTagGroupContext();\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const mergedRef = useMergedRefs<HTMLDivElement>(rootRef, ref);\n  const secondaryRef = React.useRef<HTMLButtonElement>(null);\n  const primaryTextId = useId('interaction-tag-text');\n  // After the first commit, the Primaries that registered decide the Secondary's name (D43).\n  const [primaries] = React.useState(createPrimaryRegistry);\n  React.useLayoutEffect(() => {\n    primaries.settle();\n  }, [primaries]);\n\n  // The tag's own look, else its TagGroup's, else the default 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: the tag's own `disabled={false}` cannot re-enable it.\n  const disabled = (group?.disabled ?? false) || disabledProp;\n  const dimDisabled = group?.dimDisabled ?? true;\n\n  // In a group that reports dismissals or selects, the tag's value (else a generated id).\n  const reportedValue = useTagGroupItem(rootRef, value);\n  // In a selecting TagGroup the group's selection decides (the Primary is always a toggle there);\n  // elsewhere a boolean `selected` does, and `undefined` is an action that is no toggle.\n  const selecting = group?.selecting ?? false;\n  const pressed = selecting\n    ? (group?.isSelected(reportedValue) ?? false)\n    : typeof selectedProp === 'boolean'\n      ? selectedProp\n      : undefined;\n  const selected = pressed === true;\n  // Disabled wins over the selected look; the attributes still reflect the state.\n  const look: TagLook = selected && !disabled ? 'selected' : appearance;\n\n  const selectedIgnored = selecting && selectedProp !== undefined;\n  React.useEffect(() => {\n    if (selectedIgnored) warnOnce('InteractionTag:selected-in-group', SELECTED_IN_GROUP_MESSAGE);\n  }, [selectedIgnored]);\n\n  // The group's `onDismiss(value)`, then the value leaves the selection (D39), in one click.\n  const dismiss = useEventCallback(() => {\n    group?.dismiss(reportedValue);\n    group?.deselect(reportedValue);\n  });\n  const toggle = useEventCallback(() => {\n    group?.toggle(reportedValue);\n  });\n\n  // In a list TagGroup the root is a list item; the consumer's role wins.\n  const listItemRole = group?.mode === 'list' ? 'listitem' : 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 context = React.useMemo<InteractionTagContextValue>(\n    () => ({\n      size,\n      shape,\n      look,\n      disabled,\n      selected,\n      pressed,\n      dimDisabled,\n      primaryTextId,\n      primaries,\n      secondaryRef,\n      dismiss,\n      toggle,\n    }),\n    [\n      size,\n      shape,\n      look,\n      disabled,\n      selected,\n      pressed,\n      dimDisabled,\n      primaryTextId,\n      primaries,\n      dismiss,\n      toggle,\n    ],\n  );\n\n  return (\n    <InteractionTagContext.Provider value={context}>\n      <div\n        data-appearance={appearance}\n        data-size={size}\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        ref={mergedRef}\n        className={cn(\n          interactionTagClassNames.root,\n          'group/interaction-tag inline-flex items-stretch',\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </InteractionTagContext.Provider>\n  );\n};\nInteractionTagRoot.displayName = 'InteractionTag';\n\n// ---------------------------------------------------------------------------\n// Primary\n// ---------------------------------------------------------------------------\n\n/**\n * The main action of an {@link InteractionTag}: a `<button type=\"button\">` named by its text and\n * `secondaryText` (`media` and `icon` are decorative), with the InteractionTag's look. In a\n * selecting TagGroup it is a toggle (`aria-pressed`): a click, Enter or Space adds the tag's\n * `value` to the group's selection or removes it, after its `onClick` (whose `preventDefault()`\n * cancels the toggle). Elsewhere the InteractionTag's `selected` makes it a toggle. Either state\n * renders its `aria-pressed` over one passed here, which applies only when neither is set. Delete\n * and Backspace on it click the tag's Secondary when there is one. Its props, `ref` and\n * `className` go to the button. Flat name of `InteractionTag.Primary`, for React Server\n * Components.\n */\nexport const InteractionTagPrimary = ({\n  media,\n  icon,\n  secondaryText,\n  disabled: disabledProp = false,\n  'aria-pressed': ariaPressed,\n  className,\n  children,\n  onClick,\n  onKeyDown,\n  onFocus,\n  onBlur,\n  ref,\n  ...rest\n}: InteractionTagPrimaryProps) => {\n  const tag = useInteractionTagContext('InteractionTag.Primary');\n  const { size, look } = tag;\n  const disabled = tag.disabled || disabledProp;\n  const hold = useHeldFocus(disabled);\n  // Its text names the Secondary while it renders (D43).\n  const registerPrimary = tag.primaries.register;\n  React.useLayoutEffect(() => registerPrimary(), [registerPrimary]);\n\n  // Slots that render nothing render no element and 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  // In a selecting TagGroup a click (also Enter and Space) toggles the tag's value, after the\n  // consumer's `onClick`; never for a click from a portal opened from the Primary (C-COMPOSE).\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    if (!disabled && isOwnEvent(event)) tag.toggle();\n  };\n\n  // Delete and Backspace dismiss the tag through the Secondary's own click, so whatever cancels\n  // that click (its `onClick`'s `preventDefault()`, a disabled or held Secondary) cancels them\n  // too. Not from a portal opened from the Primary, and not while the Primary itself is held.\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled || event.target !== event.currentTarget || !isDismissKey(event)) return;\n    const secondaryButton = tag.secondaryRef?.current;\n    if (!secondaryButton || secondaryButton.disabled) return;\n    event.preventDefault();\n    secondaryButton.click();\n  };\n\n  const primaryText = (\n    <span\n      id={tag.primaryTextId || undefined}\n      className={cn(\n        interactionTagPrimaryClassNames.primaryText,\n        hasSecondary && TAG_PRIMARY_TEXT_TWO_LINE_CLASSES,\n      )}\n    >\n      {children}\n    </span>\n  );\n\n  return (\n    <button\n      type=\"button\"\n      // The tag's state (`selected`, or a selecting TagGroup's value) decides; a consumer\n      // `aria-pressed` applies only to a Primary that is no toggle of the tag's.\n      aria-pressed={tag.pressed ?? ariaPressed}\n      data-selected={tag.selected ? '' : undefined}\n      {...rest}\n      ref={ref}\n      onClick={composeEventHandlers(onClick, handleClick)}\n      // After `onClick`: a held Primary's click is blocked, the toggle included.\n      {...buttonStateProps(disabled, hold.held)}\n      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n      onFocus={composeEventHandlers(onFocus, hold.onFocus, { checkDefaultPrevented: false })}\n      onBlur={composeEventHandlers(onBlur, hold.onBlur, { checkDefaultPrevented: false })}\n      className={cn(\n        interactionTagPrimaryClassNames.root,\n        INTERACTION_TAG_BUTTON_BASE_CLASSES,\n        INTERACTION_TAG_PRIMARY_BASE_CLASSES,\n        tagSizeClasses[size],\n        tagStartInsetClasses[size][hasMedia ? 'media' : hasIcon ? 'icon' : 'text'],\n        interactionTagPrimaryEndInsetClasses[size],\n        interactionTagLookClasses[look],\n        look === 'selected' && [\n          forcedColors.selectedContainer,\n          INTERACTION_TAG_SELECTED_FORCED_COLORS,\n        ],\n        tagShapeClasses[tag.shape],\n        INTERACTION_TAG_PRIMARY_JOINED_CLASSES,\n        disabledClasses(disabled, tag.dimDisabled),\n        focusRing,\n        size === 'extra-small' && INTERACTION_TAG_EXTRA_SMALL_HIT_CLASSES,\n        className,\n      )}\n    >\n      {hasMedia && (\n        // An Avatar without its own `size` takes the tag's box.\n        <AvatarSizeContext.Provider value={avatarBox}>\n          {renderSlot(\n            media,\n            'span',\n            cn(interactionTagPrimaryClassNames.media, tagMediaClasses[size]),\n            { 'aria-hidden': true },\n          )}\n        </AvatarSizeContext.Provider>\n      )}\n      {hasIcon &&\n        renderSlot(icon, 'span', cn(interactionTagPrimaryClassNames.icon, tagIconClasses[size]), {\n          'aria-hidden': true,\n        })}\n      {hasSecondary ? (\n        <span className={TAG_TEXT_COLUMN_CLASSES}>\n          {primaryText}\n          {/* A space between the two texts in the button's name (\"Katri Designer\"), whatever a\n              name computation makes of the column; the column layout never renders it. */}{' '}\n          <span\n            className={cn(\n              interactionTagPrimaryClassNames.secondaryText,\n              TAG_SECONDARY_TEXT_CLASSES,\n            )}\n          >\n            {secondary}\n          </span>\n        </span>\n      ) : (\n        primaryText\n      )}\n    </button>\n  );\n};\nInteractionTagPrimary.displayName = 'InteractionTagPrimary';\n\n// ---------------------------------------------------------------------------\n// Secondary\n// ---------------------------------------------------------------------------\n\nconst BUTTON_CHILD_MESSAGE =\n  \"InteractionTag.Secondary: its content received a button. A button cannot contain a button: its children became the content of the Dismiss button and its props were dropped. Pass icon content, and handle the dismissal in `onClick` or in the TagGroup's `onDismiss`.\";\n\n/**\n * The separate Dismiss button of an {@link InteractionTag}: a `<button type=\"button\">` after the\n * Primary, named `dismissLabel` plus the Primary's text (\"Dismiss Cherry\"). Its children replace\n * the default dismiss glyph; a text label among them replaces `dismissLabel` in the name (\"Remove\n * Cherry\"), an `aria-label` the whole name. A button passed as its child is unwrapped (its children\n * become the content). Enter, Space, a click, Delete and Backspace call its `onClick`, then, in a\n * TagGroup, the group's `onDismiss(value)`. Its props, `ref` and `className` go to the button.\n * Flat name of `InteractionTag.Secondary`, for React Server Components.\n */\nexport const InteractionTagSecondary = ({\n  dismissLabel = 'Dismiss',\n  disabled: disabledProp = false,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  className,\n  children,\n  onClick,\n  onKeyDown,\n  onFocus,\n  onBlur,\n  ref,\n  ...rest\n}: InteractionTagSecondaryProps) => {\n  const tag = useInteractionTagContext('InteractionTag.Secondary');\n  const { size, look } = tag;\n  const disabled = tag.disabled || disabledProp;\n  const hold = useHeldFocus(disabled);\n  const dismissLabelId = useId('interaction-tag-dismiss');\n  const contentId = useId('interaction-tag-dismiss-content');\n  const ownRef = React.useRef<HTMLButtonElement>(null);\n  const mergedRef = useMergedRefs<HTMLButtonElement>(ownRef, tag.secondaryRef, ref);\n  // Unmounting while it has focus (rendered conditionally), the Secondary hands focus to its own\n  // tag's Primary; in a TagGroup, when the whole tag goes, the tag's own move applies (D35).\n  useDismissControlFocus(ownRef);\n\n  // Its children are the glyph inside the Dismiss button: a button there would nest buttons, so\n  // it is unwrapped (C-SLOTS glyph rule).\n  const { glyph, button: unwrapped } = unwrapButtonGlyph(children as Slot<'span'>);\n  React.useEffect(() => {\n    if (unwrapped) warnOnce('InteractionTag.Secondary:button-child', BUTTON_CHILD_MESSAGE);\n  }, [unwrapped]);\n  const content = materialiseSlotContent(glyph);\n  const hasContent = slotRendersContent(content);\n  const literalTextLabel = hasContent && hasTextLabel(content);\n\n  // C-SLOTS naming (WCAG 2.5.3 Label in Name): a text label in the children replaces\n  // `dismissLabel` (\"Remove Cherry\"). The literal children decide on the server and on the first\n  // 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 hasLabel = hasContent && contentHasTextLabel;\n  // The primary text joins the name while a Primary renders it.\n  const hasPrimary = React.useSyncExternalStore(\n    tag.primaries.subscribe,\n    tag.primaries.hasPrimary,\n    () => true,\n  );\n  // A consumer `aria-label` replaces the whole name; a consumer `aria-labelledby` replaces ours.\n  const namedByConsumer = ariaLabel !== undefined || ariaLabelledBy !== undefined;\n  const labelledBy = namedByConsumer\n    ? ariaLabelledBy\n    : joinIds(hasLabel ? contentId : dismissLabelId, hasPrimary ? tag.primaryTextId : undefined);\n\n  // The consumer's `onClick` first (its `preventDefault()` keeps the group from hearing of it),\n  // then the TagGroup's `onDismiss(value)`; never for a click from a portal opened inside.\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    if (isOwnEvent(event)) tag.dismiss();\n  };\n  // Delete and Backspace dismiss as Enter does: through the button's own click, so whatever\n  // cancels a click (its `onClick`'s `preventDefault()`, a held or disabled button) cancels them.\n  // A held key dismisses one tag: the browser clicks a button on every repeated Enter, which\n  // would reach the next tag's Dismiss control once focus moved there (D35).\n  const handleKeyDown = (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  return (\n    <button\n      type=\"button\"\n      data-wave-tag-dismiss=\"\"\n      data-selected={tag.selected ? '' : undefined}\n      {...rest}\n      ref={mergedRef}\n      aria-label={ariaLabel}\n      aria-labelledby={labelledBy}\n      onClick={composeEventHandlers(onClick, handleClick)}\n      {...buttonStateProps(disabled, hold.held)}\n      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n      onFocus={composeEventHandlers(onFocus, hold.onFocus, { checkDefaultPrevented: false })}\n      onBlur={composeEventHandlers(onBlur, hold.onBlur, { checkDefaultPrevented: false })}\n      className={cn(\n        interactionTagSecondaryClassNames.root,\n        INTERACTION_TAG_BUTTON_BASE_CLASSES,\n        INTERACTION_TAG_SECONDARY_BASE_CLASSES,\n        interactionTagSecondarySizeClasses[size],\n        interactionTagLookClasses[look],\n        look === 'selected' && [\n          forcedColors.selectedContainer,\n          INTERACTION_TAG_SELECTED_FORCED_COLORS,\n        ],\n        interactionTagDividerClasses[look],\n        interactionTagSecondaryShapeClasses[tag.shape],\n        disabledClasses(disabled, tag.dimDisabled),\n        focusRing,\n        size === 'extra-small' && INTERACTION_TAG_EXTRA_SMALL_HIT_CLASSES,\n        className,\n      )}\n    >\n      {!namedByConsumer && (\n        <span id={dismissLabelId} className=\"sr-only\">\n          {dismissLabel}\n        </span>\n      )}\n      {hasContent ? (\n        <span\n          id={contentId}\n          ref={setLabelTarget}\n          className={cn(\n            interactionTagSecondaryClassNames.dismissIcon,\n            'inline-flex items-center justify-center',\n            // A text label keeps clear of the divider and the tag's end; a glyph needs no room.\n            hasLabel && INTERACTION_TAG_SECONDARY_LABEL_CLASSES,\n          )}\n        >\n          {content}\n        </span>\n      ) : (\n        <DismissIcon\n          size={TAG_DISMISS_GLYPH_SIZE[size]}\n          className={interactionTagSecondaryClassNames.dismissIcon}\n        />\n      )}\n    </button>\n  );\n};\nInteractionTagSecondary.displayName = 'InteractionTagSecondary';\n\n// ---------------------------------------------------------------------------\n// Compound\n// ---------------------------------------------------------------------------\n\n/**\n * A tag with a main action and a separate Dismiss button: an element that holds two sibling\n * buttons, `InteractionTag.Primary` (the action) and `InteractionTag.Secondary` (Dismiss), never\n * one inside the other. Use it for a chip the user acts on (opens, toggles) and can also remove;\n * a `Tag` is a chip that only displays, or only dismisses.\n *\n * - **Two Tab stops**, the Primary then the Secondary. In a TagGroup toolbar both join its arrow\n *   order (Primary, Secondary, next tag).\n * - **The Secondary is named after the Primary's text**: its `dismissLabel` plus the primary\n *   text, \"Dismiss Cherry\" (never the secondary text). A text label in its children replaces\n *   `dismissLabel` (\"Remove Cherry\"); an `aria-label` replaces the whole name.\n * - **Delete and Backspace** on either button dismiss the tag through the Secondary's click (a\n *   held key dismisses once); without a Secondary they do nothing. Enter, Space and a click on the\n *   Secondary dismiss too: remove the tag in its `onClick`, or in a TagGroup's `onDismiss(value)`,\n *   which is called after it.\n * - **In a selecting TagGroup** (`value`, `defaultValue` or `onValueChange` on the group) the\n *   Primary toggles the tag's `value` in the group's selection (`aria-pressed`, the selected\n *   look), and dismissing a selected tag also removes its value from the selection.\n * - **`selected`**, outside a selecting TagGroup, draws the selected look and makes the Primary a\n *   toggle (`aria-pressed`); leave it `undefined` for an action that is not a toggle.\n * - **Look**: `size`, `appearance` and `shape`, Tag's sizes and colours (a TagGroup gives its\n *   defaults); `disabled` disables both buttons natively. The Primary takes `media` (an Avatar,\n *   sized for the tag), `icon` and `secondaryText`.\n * - Fluent's `hasSecondaryAction` is not needed: the Primary squares its end corners next to a\n *   Secondary by itself, also when the Secondary is rendered conditionally or wrapped.\n * - React Server Components cannot dot into a client module: import the flat names\n *   `InteractionTagPrimary` and `InteractionTagSecondary` there.\n * - Renders `data-appearance`, `data-size` and `data-shape`, and while set `data-selected` and\n *   `data-disabled`, on the root; `data-selected` on both buttons.\n *\n * @example\n * <InteractionTag value=\"cherry\">\n *   <InteractionTag.Primary icon={<FruitIcon />} onClick={openDetails}>\n *     Cherry\n *   </InteractionTag.Primary>\n *   <InteractionTag.Secondary onClick={() => remove('cherry')} />\n * </InteractionTag>\n */\nexport const InteractionTag = /* @__PURE__ */ Object.assign(InteractionTagRoot, {\n  Primary: InteractionTagPrimary,\n  Secondary: InteractionTagSecondary,\n});\n"],"mappings":"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"}

package/dist/components/data-display/Tag.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../lib/classNames.cjs"),o=require("../../hooks/useId.cjs"),s=require("../../lib/styles.cjs"),c=require("../button/Button.cjs"),l=require("../button/Button.slots.cjs"),u=require("../../lib/icons.cjs"),d=require("../../lib/mergeProps.cjs"),f=require("../../lib/labelInName.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h=new Set([`type`,`disabled`,`autoFocus`,`form`,`formAction`,`formEncType`,`formMethod`,`formNoValidate`,`formTarget`,`name`,`value`]),g=/^on[A-Z]/,_=new Set([`aria-label`,`aria-labelledby`]),v=()=>{};function y(e){let t={},n=!1;for(let[r,i]of Object.entries(e))_.has(r)?i!==void 0&&(n=!0):t[r]=i;return{props:t,ignoredName:n}}var b=`inline-flex items-center justify-center`;function x(e){if(typeof e!=`object`||!e||p.isValidElement(e)||Symbol.iterator in e)return!1;let t=Object.getPrototypeOf(e);return t===null||t===Object.prototype}function S(e){return(0,m.jsx)(u.DismissIcon,{size:12,className:e})}function C(e){if(!i.slotRendersContent(e))return{buttonProps:null,content:S(a.tagClassNames.dismissIcon),warning:null,ignoredName:!1,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1};let r=n.getElementType(e);if(p.isValidElement(e)&&(r===`button`||r===c.Button)){let{children:n,dangerouslySetInnerHTML:o,...s}=e.props,u=r===c.Button,d=s;if(u){d={};for(let[e,t]of Object.entries(s))l.BUTTON_OWN_PROP_KEYS.has(e)||(d[e]=t)}let p=u?s.icon:void 0,{props:h,ignoredName:g}=y(d),_=i.slotRendersContent(p)?i.renderSlot(p,`span`,t.cn(a.tagClassNames.dismissIcon,b),{"aria-hidden":!0}):null,v=o==null?i.materialiseSlotContent(n):(0,m.jsx)(`span`,{className:b,dangerouslySetInnerHTML:o});return{buttonProps:h,content:_||i.slotRendersContent(v)?l.placeButtonIcon(_,v,u&&s.iconPosition):S(a.tagClassNames.dismissIcon),warning:`button-element`,ignoredName:g,contentMayName:!0,literalTextLabel:f.hasTextLabel(v),disabledFocusable:u&&!!s.disabledFocusable}}if(x(e)){let n=e.as===c.Button,r=e.as===`button`||n||Object.keys(e).some(e=>h.has(e)||g.test(e)),o={},s={},u={},d=!1;for(let[t,i]of Object.entries(e))t===`as`?i!==`button`&&!n&&(s.as=i):n&&l.BUTTON_OWN_PROP_KEYS.has(t)?u[t]=i:_.has(t)?i!==void 0&&(d=!0):t===`children`||t===`dangerouslySetInnerHTML`?s[t]=i:r||t.startsWith(`aria-`)&&t!==`aria-hidden`?o[t]=i:s[t]=i;let f=i.slotRendersContent(u.icon);return f?s.children=l.placeButtonIcon(i.renderSlot(u.icon,`span`,t.cn(a.tagClassNames.dismissIcon,b)),i.materialiseSlotContent(s.children),u.iconPosition):i.slotWrapsDefaultContent(s.as??`span`,s)&&(s.children=S()),{buttonProps:r||Object.keys(o).length>0?o:null,content:i.renderSlot(s,`span`,t.cn(!f&&a.tagClassNames.dismissIcon,b),{"aria-hidden":!0}),warning:r?`button-object`:null,ignoredName:d,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!!u.disabledFocusable}}return{buttonProps:null,content:i.renderSlot(e,`span`,t.cn(a.tagClassNames.dismissIcon,b),{"aria-hidden":!0}),warning:null,ignoredName:!1,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1}}var w=e=>{let{as:n,dismissible:i,onDismiss:c,dismissIcon:u,dismissLabel:h=`Dismiss`,className:g,children:_,ref:y,...b}=e,x=n??`span`,S=o.useId(`tag-content`),w=o.useId(`tag-dismiss`),T=o.useId(`tag-dismiss-text`),{buttonProps:E,content:D,warning:O,ignoredName:k,contentMayName:A,literalTextLabel:j,disabledFocusable:M}=C(i?u:void 0),[N,P]=p.useState(null),F=p.useCallback(e=>N?f.observeTextLabel(N,e):v,[N]),I=p.useSyncExternalStore(F,()=>N?f.hasRenderedTextLabel(N):j,()=>j),L=A&&I;p.useEffect(()=>{O===`button-element`?r.warnOnce(`Tag:dismissIcon-button`,"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`."):O===`button-object`&&r.warnDeprecated(`Tag`,`dismissIcon={{ onClick, type, disabled, … }} (button props on the slot object)`,`onDismiss and icon content in dismissIcon`,"Its props are merged onto the built-in dismiss button, which is named by `dismissLabel` and the tag content.")},[O]);let R=i===void 0&&(c!==void 0||u!==void 0);p.useEffect(()=>{R&&r.warnOnce(`Tag:dismiss-without-dismissible`,"Tag: `onDismiss` and `dismissIcon` take effect only with `dismissible`; no dismiss button was rendered. Add `dismissible` to render it.")},[R]),p.useEffect(()=>{k&&r.warnOnce(`Tag:dismissIcon-name`,'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.')},[k]);let z={type:`button`,className:t.cn(a.tagClassNames.dismissButton,`inline-flex size-5 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-foreground`,`not-disabled:not-aria-disabled:hover:bg-subtle-pressed`,`disabled:cursor-not-allowed disabled:opacity-50`,l.mergedAriaDisabledClasses,s.focusRing),"aria-labelledby":`${L?T:w} ${S}`};c&&(z.onClick=c);let B=E?d.mergeProps(z,E):z;return(0,m.jsxs)(x,{ref:y,className:t.cn(a.tagClassNames.root,`inline-flex items-center gap-1 rounded-full bg-muted py-1 ps-3 text-body-1 text-foreground`,i?`pe-1.5`:`pe-3`,g),...b,children:[(0,m.jsx)(`span`,{id:S,className:t.cn(a.tagClassNames.primaryText,`inline-flex items-center gap-1`),children:_}),i&&(0,m.jsxs)(`button`,{...B,type:B.type??`button`,...M?l.MERGED_DISABLED_FOCUSABLE_PROPS:void 0,children:[(0,m.jsx)(`span`,{id:w,className:`sr-only`,children:h}),A?(0,m.jsx)(`span`,{id:T,ref:P,className:`inline-flex items-center justify-center gap-[inherit]`,children:D}):D]})]})};w.displayName=`Tag`,exports.Tag=w;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../lib/composeEventHandlers.cjs"),o=require("../../lib/classNames.cjs"),s=require("../../hooks/useEventCallback.cjs"),c=require("../../hooks/useId.cjs"),l=require("../../hooks/useMergedRefs.cjs"),u=require("../../lib/styles.cjs"),d=require("../button/Button.cjs"),f=require("../button/Button.slots.cjs"),p=require("../../lib/icons.cjs"),m=require("../../lib/mergeProps.cjs"),h=require("../../lib/labelInName.cjs"),g=require("../../lib/events.cjs"),_=require("./TagGroup.context.cjs"),v=require("./Avatar.context.cjs"),y=require("./tagStyles.cjs");let b=require("react");b=e.__toESM(b,1);let x=require("react/jsx-runtime");var S=new Set([`type`,`disabled`,`autoFocus`,`form`,`formAction`,`formEncType`,`formMethod`,`formNoValidate`,`formTarget`,`name`,`value`]),C=/^on[A-Z]/,w=new Set([`aria-label`,`aria-labelledby`]),T=()=>{};function E(e){let t={},n=!1;for(let[r,i]of Object.entries(e))w.has(r)?i!==void 0&&(n=!0):t[r]=i;return{props:t,ignoredName:n}}var D=`inline-flex items-center justify-center`;function O(e){if(typeof e!=`object`||!e||b.isValidElement(e)||Symbol.iterator in e)return!1;let t=Object.getPrototypeOf(e);return t===null||t===Object.prototype}function k(e,t){return(0,x.jsx)(p.DismissIcon,{size:e,className:t})}function A(e,r){if(!i.slotRendersContent(e))return{buttonProps:null,content:k(r,o.tagClassNames.dismissIcon),warning:null,ignoredName:!1,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1};let a=n.getElementType(e);if(b.isValidElement(e)&&(a===`button`||a===d.Button)){let{children:n,dangerouslySetInnerHTML:s,...c}=e.props,l=a===d.Button,u=c;if(l){u={};for(let[e,t]of Object.entries(c))f.BUTTON_OWN_PROP_KEYS.has(e)||(u[e]=t)}let p=l?c.icon:void 0,{props:m,ignoredName:g}=E(u),_=i.slotRendersContent(p)?i.renderSlot(p,`span`,t.cn(o.tagClassNames.dismissIcon,D),{"aria-hidden":!0}):null,v=s==null?i.materialiseSlotContent(n):(0,x.jsx)(`span`,{className:D,dangerouslySetInnerHTML:s});return{buttonProps:m,content:_||i.slotRendersContent(v)?f.placeButtonIcon(_,v,l&&c.iconPosition):k(r,o.tagClassNames.dismissIcon),warning:`button-element`,ignoredName:g,contentMayName:!0,literalTextLabel:h.hasTextLabel(v),disabledFocusable:l&&!!c.disabledFocusable}}if(O(e)){let n=e.as===d.Button,a=e.as===`button`||n||Object.keys(e).some(e=>S.has(e)||C.test(e)),s={},c={},l={},u=!1;for(let[t,r]of Object.entries(e))t===`as`?r!==`button`&&!n&&(c.as=r):n&&f.BUTTON_OWN_PROP_KEYS.has(t)?l[t]=r:w.has(t)?r!==void 0&&(u=!0):t===`children`||t===`dangerouslySetInnerHTML`?c[t]=r:a||t.startsWith(`aria-`)&&t!==`aria-hidden`?s[t]=r:c[t]=r;let p=i.slotRendersContent(l.icon);return p?c.children=f.placeButtonIcon(i.renderSlot(l.icon,`span`,t.cn(o.tagClassNames.dismissIcon,D)),i.materialiseSlotContent(c.children),l.iconPosition):i.slotWrapsDefaultContent(c.as??`span`,c)&&(c.children=k(r)),{buttonProps:a||Object.keys(s).length>0?s:null,content:i.renderSlot(c,`span`,t.cn(!p&&o.tagClassNames.dismissIcon,D),{"aria-hidden":!0}),warning:a?`button-object`:null,ignoredName:u,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!!l.disabledFocusable}}return{buttonProps:null,content:i.renderSlot(e,`span`,t.cn(o.tagClassNames.dismissIcon,D),{"aria-hidden":!0}),warning:null,ignoredName:!1,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1}}var j=new Set([`button`,`fieldset`,`input`,`optgroup`,`option`,`select`,`textarea`]),M=new Set([`button`,`data`,`input`,`li`,`meter`,`option`,`progress`,`select`,`textarea`]),ee={disabled:!0,"aria-disabled":void 0,"data-disabled":void 0,"data-disabled-focusable":void 0};function N(e,t){return typeof e==`string`&&Object.hasOwn(t,e)}function te(e){e.preventDefault(),e.stopPropagation()}function P({buttonProps:e,content:t,contentMayName:n,literalTextLabel:r,disabledFocusable:i,disabled:o,dismissLabel:s,contentId:u,dismissName:d,buttonRef:p}){let m=c.useId(`tag-dismiss`),g=c.useId(`tag-dismiss-text`),{ref:v,...y}=e,S=b.useRef(null),C=l.useMergedRefs(S,p,v);_.useDismissControlFocus(S);let[w,E]=b.useState(null),D=b.useCallback(e=>w?h.observeTextLabel(w,e):T,[w]),O=b.useSyncExternalStore(D,()=>w?h.hasRenderedTextLabel(w):r,()=>r),k=n&&O,A=_.useHeldFocus(o),j=o?A.held?f.MERGED_DISABLED_FOCUSABLE_PROPS:ee:i?f.MERGED_DISABLED_FOCUSABLE_PROPS:void 0,M=d!==void 0;return(0,x.jsxs)(`button`,{...y,ref:C,type:y.type??`button`,...j,"aria-label":M?d:void 0,"aria-labelledby":M?void 0:`${k?g:m} ${u}`,onFocus:a.composeEventHandlers(y.onFocus,A.onFocus,{checkDefaultPrevented:!1}),onBlur:a.composeEventHandlers(y.onBlur,A.onBlur,{checkDefaultPrevented:!1}),children:[!M&&(0,x.jsx)(`span`,{id:m,className:`sr-only`,children:s}),n?(0,x.jsx)(`span`,{id:g,ref:E,className:`inline-flex items-center justify-center gap-[inherit]`,children:t}):t]})}P.displayName=`TagDismissButton`;var ne=new Set([`a`,`button`,`input`,`select`,`textarea`,`li`]),re='Tag: `as="button"` with `dismissible` puts the Dismiss button inside a button. Use InteractionTag instead: `InteractionTag.Primary` for the action, `InteractionTag.Secondary` for Dismiss.',ie='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>`.',ae='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"`.';function oe(e){for(let t=e;t&&!t.matches(`[data-wave-tag-group]`);t=t.parentElement)if(t.getAttribute(`role`)===`listitem`||t.localName===`li`)return!0;return!1}var F=e=>{let{as:n,appearance:d,size:f,shape:p,disabled:h,selected:S=!1,value:C,media:w,icon:T,secondaryText:E,dismissible:D,onDismiss:O,dismissIcon:k,dismissLabel:ee=`Dismiss`,className:F,children:se,role:ce,hidden:le,onClick:ue,onFocus:de,onBlur:fe,onKeyDown:pe,ref:me,...he}=e,I=n??`span`,L=c.useId(`tag-content`),R=_.useTagGroupContext(),z=b.useContext(_.TagHostContext),B=b.useRef(null),ge=l.useMergedRefs(B,me),V=b.useRef(null),_e=b.useRef(null),H=N(f,y.tagSizeClasses)?f:R?.size??`medium`,U=N(d,y.tagAppearanceClasses)?d:R?.appearance??`filled`,ve=N(p,y.tagShapeClasses)?p:R?.shape??`circular`,W=(R?.disabled??!1)||h===!0,G=D??R?.dismissible??!1,K=S&&!W?`selected`:U,ye=R?.dimDisabled??!0,be=_.useTagGroupItem(B,C,{reported:G&&(R?.reportsDismissals??!1)}),xe=I===`a`,Se=xe&&W,Ce=I===`button`,q=_.useHeldFocus((xe||Ce)&&W),J=Ce&&q.held,{buttonProps:we,content:Te,warning:Y,ignoredName:Ee,contentMayName:De,literalTextLabel:Oe,disabledFocusable:ke}=A(G?k:void 0,y.TAG_DISMISS_GLYPH_SIZE[H]);b.useEffect(()=>{Y===`button-element`?r.warnOnce(`Tag:dismissIcon-button`,"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`."):Y===`button-object`&&r.warnDeprecated(`Tag`,`dismissIcon={{ onClick, type, disabled, … }} (button props on the slot object)`,`onDismiss and icon content in dismissIcon`,"Its props are merged onto the built-in dismiss button, which is named by `dismissLabel` and the tag content.")},[Y]);let Ae=D===void 0&&!(R?.dismissible??!1)&&(O!==void 0||k!==void 0);b.useEffect(()=>{Ae&&r.warnOnce(`Tag:dismiss-without-dismissible`,"Tag: `onDismiss` and `dismissIcon` take effect only with `dismissible`; no dismiss button was rendered. Add `dismissible` to render it.")},[Ae]),b.useEffect(()=>{Ee&&r.warnOnce(`Tag:dismissIcon-name`,'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.')},[Ee]),b.useEffect(()=>{if(!G||!r.isDev||r.hasWarned(`Tag:nested-button`))return;let e=B.current?.localName;e===`button`?r.warnOnce(`Tag:nested-button`,re):e===`a`&&r.warnOnce(`Tag:nested-button`,ie)});let je=R?.mode===`list`;b.useEffect(()=>{if(!je||!r.isDev||r.hasWarned(`TagGroup:list-item`))return;let e=B.current;e&&!oe(e)&&r.warnOnce(`TagGroup:list-item`,ae)});let Me=i.slotRendersContent(w),Ne=i.slotRendersContent(T),X=i.materialiseSlotContent(E),Pe=i.slotRendersContent(X),Fe=b.useMemo(()=>({size:y.TAG_AVATAR_SIZE[H]}),[H]),Ie=e=>typeof I!=`string`||e.has(I),Z={};Ie(j)&&(W||h!==void 0)&&(Z.disabled=W&&!J),J&&(Z[`aria-disabled`]=!0,Z[`data-disabled-focusable`]=``),C!==void 0&&Ie(M)&&(Z.value=C),Se&&(Z[`aria-disabled`]=!0,q.held?Z[`data-disabled-focusable`]=``:(Z.href=void 0,Z.role=`link`));let Le=je&&typeof I==`string`&&!ne.has(I)?`listitem`:void 0,Re=C!==void 0&&(R?.hiddenValues?.has(C)??!1),ze=Se||J?e=>{g.isOwnEvent(e)?te(e):ue?.(e)}:ue,Be=s.useEventCallback(e=>{let t=V.current,n=_e.current;t&&n&&_.isDismissKey(e)&&t.contains(e.target)&&!g.isEditableTarget(e.target)&&(e.preventDefault(),n.click())}),Q={type:`button`,"data-wave-tag-dismiss":``,className:t.cn(o.tagClassNames.dismissButton,y.TAG_DISMISS_BASE_CLASSES,y.tagDismissSizeClasses[H],!W&&[`disabled:opacity-50`,`aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100`,y.tagDismissStateClasses[K]],u.focusRing,y.tagDismissRingClasses[H],K===`selected`&&`focus-visible:outline-primary-foreground`,z?.dismissButtonClassName),onKeyDown:e=>{if(e.target===e.currentTarget){if(_.isRepeatedActivation(e)){e.preventDefault();return}_.isDismissKey(e)&&(e.preventDefault(),e.currentTarget.click())}}};(O||R)&&(Q.onClick=e=>{g.isOwnEvent(e)&&(O?.(),R?.dismiss(be))});let Ve=we?m.mergeProps(Q,we):Q,$=(0,x.jsx)(`span`,{id:L,ref:V,className:t.cn(o.tagClassNames.primaryText,`inline-flex items-center gap-1`,Pe&&`text-caption-1 leading-3.5`),children:se});return(0,x.jsxs)(I,{"data-size":H,"data-appearance":U,"data-shape":ve,"data-selected":S?``:void 0,"data-disabled":W?``:void 0,"data-wave-tag-item":``,role:ce??Le,hidden:Re||le,...he,...Z,ref:ge,className:t.cn(o.tagClassNames.root,y.TAG_ROOT_BASE_CLASSES,y.tagSizeClasses[H],y.tagStartInsetClasses[H][Me?`media`:Ne?`icon`:`text`],y.tagEndInsetClasses[H][G?`dismiss`:`text`],K===`selected`?[y.TAG_SELECTED_CLASSES,u.forcedColors.selectedContainer]:y.tagAppearanceClasses[U],W&&[ye&&`opacity-50 focus-visible:opacity-100 has-focus-visible:opacity-100`,u.forcedColors.disabled],y.tagShapeClasses[ve],F),onClick:ze,onKeyDown:a.composeEventHandlers(pe,Be),onFocus:a.composeEventHandlers(de,q.onFocus,{checkDefaultPrevented:!1}),onBlur:a.composeEventHandlers(fe,q.onBlur,{checkDefaultPrevented:!1}),children:[Me&&(0,x.jsx)(v.AvatarSizeContext.Provider,{value:Fe,children:i.renderSlot(w,`span`,t.cn(o.tagClassNames.media,y.tagMediaClasses[H]))}),Ne&&i.renderSlot(T,`span`,t.cn(o.tagClassNames.icon,y.tagIconClasses[H]),{"aria-hidden":!0}),Pe?(0,x.jsxs)(`span`,{className:y.TAG_TEXT_COLUMN_CLASSES,children:[$,(0,x.jsx)(`span`,{className:t.cn(o.tagClassNames.secondaryText,y.TAG_SECONDARY_TEXT_CLASSES),children:X})]}):$,G&&(0,x.jsx)(P,{buttonProps:Ve,content:Te,contentMayName:De,literalTextLabel:Oe,disabledFocusable:ke,disabled:W,dismissLabel:ee,contentId:L,dismissName:z?.dismissName,buttonRef:_e})]})};F.displayName=`Tag`,exports.Tag=F;
 //# sourceMappingURL=Tag.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","names":["React","DismissIcon","slotRendersContent","tagClassNames","getElementType","Button","BUTTON_OWN_PROP_KEYS","renderSlot","cn","materialiseSlotContent","placeButtonIcon","hasTextLabel","slotWrapsDefaultContent","useId","observeTextLabel","hasRenderedTextLabel","mergedAriaDisabledClasses","focusRing","mergeProps","MERGED_DISABLED_FOCUSABLE_PROPS","require_runtime","require_cn","require_children","require_dev","require_slot","require_classNames","require_useId","require_styles","require_Button","require_Button_slots","require_icons","require_mergeProps","require_labelInName","react","react_jsx_runtime","BUTTON_ONLY_KEYS","HANDLER_KEY","NAME_KEYS","noop","withoutName","result","ignoredName","key","value","props","iconClassName","isPlainObject","proto","defaultDismissContent","resolveDismissSlot","slot","elementType","markup","elementProps","isWaveButton","slotProps","icon","buttonProps","iconNode","ownContent","children","asWaveButton","isButtonObject","contentProps","ownProps","hasButtonIcon","Tag","rest","Component","as","contentId","dismissLabelId","dismissTextId","slotButtonProps","dismissible","dismissIcon","labelTarget","setLabelTarget","subscribeToContent","onChange","contentHasTextLabel","literalTextLabel","namedByContent","contentMayName","warning","dismissPropsIgnored","onDismiss","ownButtonProps","dismissButtonProps","className","disabledFocusable","dismissLabel","content"],"sources":["../../../src/components/data-display/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { tagClassNames } from '../../lib/classNames';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { mergeProps } from '../../lib/mergeProps';\nimport { getElementType } from '../../lib/children';\nimport {\n  materialiseSlotContent,\n  renderSlot,\n  slotRendersContent,\n  slotWrapsDefaultContent,\n} from '../../lib/slot';\nimport { focusRing } 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 { useId } from '../../hooks/useId';\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';\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`).\n */\nexport interface TagOwnProps {\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).\n   */\n  dismissible?: boolean;\n  /**\n   * Called when the dismiss button is activated (click, Enter or Space). Passing it does not render\n   * the dismiss button: set `dismissible` too. When it removes the tag, move focus yourself (see\n   * \"Focus after dismissal\" on {@link Tag}).\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\n   * content; this slot only replaces the icon 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 content (\"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 content\n   * (`aria-labelledby`), e.g. \"Dismiss Cherry\". Localise it here. A text label rendered by a\n   * merged `<button>` slot replaces it (see `dismissIcon`).\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. It carries the dismiss icon part class when it is the\n * dismiss button's own content, not when the element of a slot object wraps it.\n */\nfunction defaultDismissContent(className?: string): React.ReactNode {\n  return <DismissIcon size={12} 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 */\nfunction resolveDismissSlot(slot: TagOwnProps['dismissIcon']): ResolvedDismissSlot {\n  if (!slotRendersContent(slot)) {\n    return {\n      buttonProps: null,\n      content: defaultDismissContent(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(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();\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/**\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 content (\"Dismiss Cherry\"), so a row of tags has\n *   distinguishable dismiss buttons.\n * - `dismissIcon` replaces only the icon inside that button (see {@link TagOwnProps.dismissIcon}).\n * - Polymorphic: `as=\"a\"` renders a link chip with anchor props type-checked.\n *\n * **Focus after dismissal.** A tag cannot keep focus once you remove it. When `onDismiss` removes\n * the tag, move focus to the next tag's dismiss button (else the previous one, else a sensible\n * element nearby); TagGroup (planned) will do this for you. The neighbour stays mounted, so you\n * can focus it in `onDismiss` before removing the tag.\n *\n * @example\n * <Tag>React</Tag>\n * <Tag dismissible onDismiss={() => remove('cherry')}>Cherry</Tag>\n * <Tag dismissible dismissLabel=\"Remove\" dismissIcon={<CloseIcon />}>Cherry</Tag>\n */\nexport const Tag: PolymorphicComponent<'span', TagOwnProps> = (props) => {\n  const {\n    as,\n    dismissible,\n    onDismiss,\n    dismissIcon,\n    dismissLabel = 'Dismiss',\n    className,\n    children,\n    ref,\n    ...rest\n  } = props as TagImplProps;\n  const Component: React.ElementType = as ?? 'span';\n  const contentId = useId('tag-content');\n  const dismissLabelId = useId('tag-dismiss');\n  const dismissTextId = useId('tag-dismiss-text');\n\n  const {\n    buttonProps: slotButtonProps,\n    content,\n    warning,\n    ignoredName,\n    contentMayName,\n    literalTextLabel,\n    disabledFocusable,\n  } = resolveDismissSlot(dismissible ? dismissIcon : undefined);\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  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, so only a missing flag warns.\n  const dismissPropsIgnored =\n    dismissible === undefined && (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  const ownButtonProps: UnknownProps = {\n    type: 'button',\n    className: cn(\n      tagClassNames.dismissButton,\n      'inline-flex size-5 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-foreground',\n      'not-disabled:not-aria-disabled:hover:bg-subtle-pressed',\n      'disabled:cursor-not-allowed disabled:opacity-50',\n      mergedAriaDisabledClasses,\n      focusRing,\n    ),\n    'aria-labelledby': `${namedByContent ? dismissTextId : dismissLabelId} ${contentId}`,\n  };\n  if (onDismiss) ownButtonProps.onClick = onDismiss;\n  const dismissButtonProps = slotButtonProps\n    ? mergeProps(ownButtonProps, slotButtonProps)\n    : ownButtonProps;\n\n  return (\n    <Component\n      ref={ref}\n      className={cn(\n        tagClassNames.root,\n        'inline-flex items-center gap-1 rounded-full bg-muted py-1 ps-3 text-body-1 text-foreground',\n        dismissible ? 'pe-1.5' : 'pe-3',\n        className,\n      )}\n      {...rest}\n    >\n      <span\n        id={contentId}\n        className={cn(tagClassNames.primaryText, 'inline-flex items-center gap-1')}\n      >\n        {children}\n      </span>\n      {dismissible && (\n        <button\n          {...dismissButtonProps}\n          type={(dismissButtonProps.type as 'button' | 'submit' | 'reset' | undefined) ?? 'button'}\n          // A merged `disabledFocusable` Button makes the dismiss button unavailable but focusable\n          // (spread last: it wins over `disabled` and `onDismiss`).\n          {...(disabledFocusable ? MERGED_DISABLED_FOCUSABLE_PROPS : undefined)}\n        >\n          <span id={dismissLabelId} className=\"sr-only\">\n            {dismissLabel}\n          </span>\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    </Component>\n  );\n};\n\nTag.displayName = 'Tag';\n"],"mappings":"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"}
+{"version":3,"file":"Tag.cjs","names":["React","DismissIcon","slotRendersContent","tagClassNames","getElementType","Button","BUTTON_OWN_PROP_KEYS","renderSlot","cn","materialiseSlotContent","placeButtonIcon","hasTextLabel","slotWrapsDefaultContent","useId","useMergedRefs","observeTextLabel","hasRenderedTextLabel","useHeldFocus","MERGED_DISABLED_FOCUSABLE_PROPS","composeEventHandlers","useTagGroupContext","TagHostContext","tagSizeClasses","tagAppearanceClasses","tagShapeClasses","useTagGroupItem","TAG_DISMISS_GLYPH_SIZE","isDev","hasWarned","TAG_AVATAR_SIZE","isOwnEvent","useEventCallback","isDismissKey","isEditableTarget","TAG_DISMISS_BASE_CLASSES","tagDismissSizeClasses","tagDismissStateClasses","focusRing","tagDismissRingClasses","isRepeatedActivation","mergeProps","TAG_ROOT_BASE_CLASSES","tagStartInsetClasses","tagEndInsetClasses","TAG_SELECTED_CLASSES","forcedColors","AvatarSizeContext","tagMediaClasses","tagIconClasses","TAG_TEXT_COLUMN_CLASSES","TAG_SECONDARY_TEXT_CLASSES","require_runtime","require_cn","require_children","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useEventCallback","require_useId","require_useMergedRefs","require_styles","require_Button","require_Button_slots","require_icons","require_mergeProps","require_labelInName","require_events","require_TagGroup_context","require_Avatar_context","require_tagStyles","react","react_jsx_runtime","BUTTON_ONLY_KEYS","HANDLER_KEY","NAME_KEYS","noop","withoutName","result","ignoredName","key","value","props","iconClassName","isPlainObject","proto","defaultDismissContent","glyphSize","resolveDismissSlot","slot","elementType","markup","elementProps","isWaveButton","slotProps","icon","buttonProps","iconNode","ownContent","children","asWaveButton","isButtonObject","contentProps","ownProps","hasButtonIcon","NATIVE_DISABLED_ELEMENTS","NATIVE_VALUE_ELEMENTS","NATIVELY_DISABLED_PROPS","isKeyOf","table","blockRootClick","event","TagDismissButton","dismissLabelId","dismissTextId","slotRef","ownRef","mergedRef","buttonRef","labelTarget","setLabelTarget","subscribeToContent","onChange","contentHasTextLabel","literalTextLabel","namedByContent","contentMayName","hold","disabled","stateProps","disabledFocusable","named","dismissName","contentId","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","host","rootRef","ref","primaryTextRef","dismissButtonRef","size","appearance","shape","dismissible","look","selected","dimDisabled","reportedValue","isLinkRoot","linkDisabled","isButtonRoot","rootHold","buttonRootHeld","slotButtonProps","dismissIcon","warning","dismissPropsIgnored","onDismiss","inList","hasMedia","media","hasIcon","secondary","secondaryText","hasSecondary","avatarBox","takesNative","elements","listItemRole","hiddenByHost","handleClick","onClick","handleRootKeyDown","text","button","ownButtonProps","dismissButtonProps","primaryText","role","hidden","className","onKeyDown","onFocus","onBlur"],"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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"}