@mortenbrudvik/waveui 0.7.0 → 0.8.0

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("../../hooks/useId.cjs"),o=require("../../lib/styles.cjs"),s=require("../button/Button.cjs"),c=require("../../lib/icons.cjs"),l=require("../../lib/mergeProps.cjs"),u=require("../button/Button.slots.cjs"),d=require("../../lib/labelInName.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=new Set([`type`,`disabled`,`autoFocus`,`form`,`formAction`,`formEncType`,`formMethod`,`formNoValidate`,`formTarget`,`name`,`value`]),h=/^on[A-Z]/,g=new Set([`aria-label`,`aria-labelledby`]),_=()=>{};function v(e){let t={},n=!1;for(let[r,i]of Object.entries(e))g.has(r)?i!==void 0&&(n=!0):t[r]=i;return{props:t,ignoredName:n}}var y=`inline-flex items-center justify-center`;function b(e){if(typeof e!=`object`||!e||f.isValidElement(e)||Symbol.iterator in e)return!1;let t=Object.getPrototypeOf(e);return t===null||t===Object.prototype}function x(){return(0,p.jsx)(c.DismissIcon,{size:12})}function S(e){if(!i.slotRendersContent(e))return{buttonProps:null,content:x(),warning:null,ignoredName:!1,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1};let t=n.getElementType(e);if(f.isValidElement(e)&&(t===`button`||t===s.Button)){let{children:n,dangerouslySetInnerHTML:r,...a}=e.props,o=t===s.Button,c=a;if(o){c={};for(let[e,t]of Object.entries(a))u.BUTTON_OWN_PROP_KEYS.has(e)||(c[e]=t)}let l=o?a.icon:void 0,{props:f,ignoredName:m}=v(c),h=i.slotRendersContent(l)?i.renderSlot(l,`span`,y,{"aria-hidden":!0}):null,g=r==null?i.materialiseSlotContent(n):(0,p.jsx)(`span`,{className:y,dangerouslySetInnerHTML:r});return{buttonProps:f,content:h||i.slotRendersContent(g)?u.placeButtonIcon(h,g,o&&a.iconPosition):x(),warning:`button-element`,ignoredName:m,contentMayName:!0,literalTextLabel:d.hasTextLabel(g),disabledFocusable:o&&!!a.disabledFocusable}}if(b(e)){let t=e.as===s.Button,n=e.as===`button`||t||Object.keys(e).some(e=>m.has(e)||h.test(e)),r={},a={},o={},c=!1;for(let[i,s]of Object.entries(e))i===`as`?s!==`button`&&!t&&(a.as=s):t&&u.BUTTON_OWN_PROP_KEYS.has(i)?o[i]=s:g.has(i)?s!==void 0&&(c=!0):i===`children`||i===`dangerouslySetInnerHTML`?a[i]=s:n||i.startsWith(`aria-`)&&i!==`aria-hidden`?r[i]=s:a[i]=s;return i.slotRendersContent(o.icon)?a.children=u.placeButtonIcon(i.renderSlot(o.icon,`span`,y),i.materialiseSlotContent(a.children),o.iconPosition):i.slotWrapsDefaultContent(a.as??`span`,a)&&(a.children=x()),{buttonProps:n||Object.keys(r).length>0?r:null,content:i.renderSlot(a,`span`,y,{"aria-hidden":!0}),warning:n?`button-object`:null,ignoredName:c,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!!o.disabledFocusable}}return{buttonProps:null,content:i.renderSlot(e,`span`,y,{"aria-hidden":!0}),warning:null,ignoredName:!1,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1}}var C=e=>{let{as:n,dismissible:i,onDismiss:s,dismissIcon:c,dismissLabel:m=`Dismiss`,className:h,children:g,ref:v,...y}=e,b=n??`span`,x=a.useId(`tag-content`),C=a.useId(`tag-dismiss`),w=a.useId(`tag-dismiss-text`),{buttonProps:T,content:E,warning:D,ignoredName:O,contentMayName:k,literalTextLabel:A,disabledFocusable:j}=S(i?c:void 0),[M,N]=f.useState(null),P=f.useCallback(e=>M?d.observeTextLabel(M,e):_,[M]),F=f.useSyncExternalStore(P,()=>M?d.hasRenderedTextLabel(M):A,()=>A),I=k&&F;f.useEffect(()=>{D===`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`."):D===`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.")},[D]);let L=i===void 0&&(s!==void 0||c!==void 0);f.useEffect(()=>{L&&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.")},[L]),f.useEffect(()=>{O&&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.')},[O]);let R={type:`button`,className:t.cn(`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`,u.mergedAriaDisabledClasses,o.focusRing),"aria-labelledby":`${I?w:C} ${x}`};s&&(R.onClick=s);let z=T?l.mergeProps(R,T):R;return(0,p.jsxs)(b,{ref:v,className:t.cn(`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`,h),...y,children:[(0,p.jsx)(`span`,{id:x,className:`inline-flex items-center gap-1`,children:g}),i&&(0,p.jsxs)(`button`,{...z,type:z.type??`button`,...j?u.MERGED_DISABLED_FOCUSABLE_PROPS:void 0,children:[(0,p.jsx)(`span`,{id:C,className:`sr-only`,children:m}),k?(0,p.jsx)(`span`,{id:w,ref:N,className:`inline-flex items-center justify-center gap-[inherit]`,children:E}):E]})]})};C.displayName=`Tag`,exports.Tag=C;
+"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;
 //# sourceMappingURL=Tag.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","names":["React","DismissIcon","slotRendersContent","getElementType","Button","BUTTON_OWN_PROP_KEYS","renderSlot","materialiseSlotContent","placeButtonIcon","hasTextLabel","slotWrapsDefaultContent","useId","observeTextLabel","hasRenderedTextLabel","cn","mergedAriaDisabledClasses","focusRing","mergeProps","MERGED_DISABLED_FOCUSABLE_PROPS","require_runtime","require_cn","require_children","require_dev","require_slot","require_useId","require_styles","require_Button","require_icons","require_mergeProps","require_Button_slots","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","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 { 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/** The decorative default dismiss glyph. */\nfunction defaultDismissContent(): React.ReactNode {\n  return <DismissIcon size={12} />;\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(),\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', iconClassName, { 'aria-hidden': true })\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(),\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    if (slotRendersContent(ownProps.icon)) {\n      contentProps.children = placeButtonIcon(\n        renderSlot(ownProps.icon as Slot<'span'>, 'span', iconClassName),\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(contentProps as SlotObject<'span'>, 'span', 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(slot as Slot<'span'>, 'span', iconClassName, { 'aria-hidden': true }),\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      '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        '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 id={contentId} className=\"inline-flex items-center gap-1\">\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":"8gBA0GA,IAAMiC,EAAwC,IAAI,IAAI,CACpD,OACA,WACA,YACA,OACA,aACA,cACA,aACA,iBACA,aACA,OACA,OACF,CAAC,EAEKC,EAAc,WAMdC,EAAiC,IAAI,IAAI,CAAC,aAAc,iBAAiB,CAAC,EAsC1EC,MAAa,CAAC,EAGpB,SAASC,EAAY,EAAoE,CACvF,IAAMC,EAAuB,CAAC,EAC1BC,EAAc,GAClB,IAAK,GAAM,CAACC,EAAKC,KAAU,OAAO,QAAQC,CAAK,EACzCP,EAAU,IAAIK,CAAG,EACfC,IAAU,IAAA,KAAW,EAAc,IAEvC,EAAOD,GAAOC,EAGlB,MAAO,CAAE,MAAOH,EAAQ,aAAY,CACtC,CAEA,IAAMK,EAAgB,0CAEtB,SAASC,EAAc,EAAuC,CAE5D,GADI,OAAOH,GAAU,WAAYA,GAC7BzC,EAAM,eAAeyC,CAAK,GAAK,OAAO,YAAYA,EAAO,MAAO,GACpE,IAAMI,EAAiB,OAAO,eAAeJ,CAAK,EAClD,OAAOI,IAAU,MAAQA,IAAU,OAAO,SAC5C,CAGA,SAASC,GAAyC,CAChD,OAAO,EAAAd,EAAA,IAAA,CAAC/B,EAAAA,YAAD,CAAa,KAAM,EAAK,CAAA,CACjC,CAWA,SAAS8C,EAAmB,EAAuD,CACjF,GAAI,CAAC7C,EAAAA,mBAAmB8C,CAAI,EAC1B,MAAO,CACL,YAAa,KACb,QAASF,EAAsB,EAC/B,QAAS,KACT,YAAa,GACb,eAAgB,GAChB,iBAAkB,GAClB,kBAAmB,EACrB,EAMF,IAAMG,EAAc9C,EAAAA,eAAe6C,CAAuB,EAC1D,GACEhD,EAAM,eAAoCgD,CAAI,IAC7CC,IAAgB,UAAYA,IAAgB7C,EAAAA,QAC7C,CACA,GAAM,CAAE,WAAU,wBAAyB8C,EAAQ,GAAGC,GAAiBH,EAAK,MACtEI,EAAeH,IAAgB7C,EAAAA,OACjCiD,EAA0BF,EAC9B,GAAIC,EAAc,CAGhB,EAAY,CAAC,EACb,IAAK,GAAM,CAACZ,EAAKC,KAAU,OAAO,QAAQU,CAAY,EAC/C9C,EAAAA,qBAAqB,IAAImC,CAAG,IAAG,EAAUA,GAAOC,EAEzD,CACA,IAAMa,EAAOF,EAAeD,EAAa,KAAO,IAAA,GAC1C,CAAE,MAAOI,EAAa,eAAgBlB,EAAYgB,CAAS,EAC3DG,EAAWtD,EAAAA,mBAAmBoD,CAAI,EACpChD,EAAAA,WAAWgD,EAAM,OAAQX,EAAe,CAAE,cAAe,EAAK,CAAC,EAC/D,KAIEc,EACJP,GAAU,KAGR3C,EAAAA,uBAAuBmD,CAAQ,GAF/B,EAAA1B,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWW,EAAe,wBAAyBO,CAAS,CAAA,EAItE,MAAO,CACL,cACA,QACEM,GAAYtD,EAAAA,mBAAmBuD,CAAU,EACrCjD,EAAAA,gBAAgBgD,EAAUC,EAAYL,GAAgBD,EAAa,YAAY,EAC/EL,EAAsB,EAC5B,QAAS,iBACT,cACA,eAAgB,GAChB,iBAAkBrC,EAAAA,aAAagD,CAAU,EACzC,kBAAmBL,GAAgB,EAAQD,EAAa,iBAC1D,CACF,CAEA,GAAIP,EAAcI,CAAI,EAAG,CAIvB,IAAMW,EAAeX,EAAK,KAAO5C,EAAAA,OAC3BwD,EACJZ,EAAK,KAAO,UACZW,GACA,OAAO,KAAKX,CAAI,CAAC,CAAC,KAAM,GAAQf,EAAiB,IAAIO,CAAG,GAAKN,EAAY,KAAKM,CAAG,CAAC,EAC9Ee,EAA4B,CAAC,EAC7BM,EAA6B,CAAC,EAG9BC,EAAyB,CAAC,EAC5BvB,EAAc,GAClB,IAAK,GAAM,CAACC,EAAKC,KAAU,OAAO,QAAQO,CAAI,EACxCR,IAAQ,KACNC,IAAU,UAAY,CAACkB,IAAc,EAAa,GAAKlB,GAClDkB,GAAgBtD,EAAAA,qBAAqB,IAAImC,CAAG,EACrD,EAASA,GAAOC,EACPN,EAAU,IAAIK,CAAG,EACtBC,IAAU,IAAA,KAAW,EAAc,IAC9BD,IAAQ,YAAcA,IAAQ,0BAEvC,EAAaA,GAAOC,EACXmB,GAAmBpB,EAAI,WAAW,OAAO,GAAKA,IAAQ,cAC/D,EAAYA,GAAOC,EAEnB,EAAaD,GAAOC,EAexB,OATIvC,EAAAA,mBAAmB4D,EAAS,IAAI,EAClC,EAAa,SAAWtD,EAAAA,gBACtBF,EAAAA,WAAWwD,EAAS,KAAsB,OAAQnB,CAAa,EAC/DpC,EAAAA,uBAAuBsD,EAAa,QAAQ,EAC5CC,EAAS,YACX,EACSpD,EAAAA,wBAAwBmD,EAAa,IAAM,OAAQA,CAAY,IACxE,EAAa,SAAWf,EAAsB,GAEzC,CACL,YAAac,GAAkB,OAAO,KAAKL,CAAW,CAAC,CAAC,OAAS,EAAIA,EAAc,KACnF,QAASjD,EAAAA,WAAWuD,EAAoC,OAAQlB,EAAe,CAC7E,cAAe,EACjB,CAAC,EACD,QAASiB,EAAiB,gBAAkB,KAC5C,cACA,eAAgB,GAChB,iBAAkB,GAClB,kBAAmB,EAAQE,EAAS,iBACtC,CACF,CAEA,MAAO,CACL,YAAa,KACb,QAASxD,EAAAA,WAAW0C,EAAsB,OAAQL,EAAe,CAAE,cAAe,EAAK,CAAC,EACxF,QAAS,KACT,YAAa,GACb,eAAgB,GAChB,iBAAkB,GAClB,kBAAmB,EACrB,CACF,CAqBA,IAAaoB,EAAkD,GAAU,CACvE,GAAM,CACJ,KACA,cACA,YACA,cACA,eAAe,UACf,YACA,WACA,MACA,GAAGC,GACDtB,EACEuB,EAA+BC,GAAM,OACrCC,EAAYxD,EAAAA,MAAM,aAAa,EAC/ByD,EAAiBzD,EAAAA,MAAM,aAAa,EACpC0D,EAAgB1D,EAAAA,MAAM,kBAAkB,EAExC,CACJ,YAAa2D,EACb,UACA,UACA,cACA,iBACA,mBACA,qBACEvB,EAAmBwB,EAAcC,EAAc,IAAA,EAAS,EAKtD,CAACC,EAAaC,GAAkB1E,EAAM,SAAiC,IAAI,EAC3E2E,EAAqB3E,EAAM,YAC9B,GAA0ByE,EAAc7D,EAAAA,iBAAiB6D,EAAaG,CAAQ,EAAIxC,EACnF,CAACqC,CAAW,CACd,EACMI,EAAsB7E,EAAM,qBAChC2E,MACOF,EAAc5D,EAAAA,qBAAqB4D,CAAW,EAAIK,MACnDA,CACR,EACMC,EAAiBC,GAAkBH,EAEzC9C,EAAM,cAAgB,CAChBkD,IAAY,iBACd3D,EAAA,SACE,yBACA,0TACF,EACS2D,IAAY,iBACrB3D,EAAA,eACE,MACA,iFACA,4CACA,8GACF,CAEJ,EAAG,CAAC2D,CAAO,CAAC,EAIZ,IAAMC,EACJX,IAAgB,IAAA,KAAcY,IAAc,IAAA,IAAaX,IAAgB,IAAA,IAC3EzC,EAAM,cAAgB,CAChBmD,GACF5D,EAAA,SACE,kCACA,yIACF,CAEJ,EAAG,CAAC4D,CAAmB,CAAC,EAExBnD,EAAM,cAAgB,CAChBQ,GACFjB,EAAA,SACE,uBACA,8NACF,CAEJ,EAAG,CAACiB,CAAW,CAAC,EAEhB,IAAM6C,EAA+B,CACnC,KAAM,SACN,UAAWtE,EAAAA,GACT,mHACA,yDACA,kDACAC,EAAAA,0BACAC,EAAAA,SACF,EACA,kBAAmB,GAAG+D,EAAiBV,EAAgBD,EAAe,GAAGD,GAC3E,EACIgB,IAAW,EAAe,QAAUA,GACxC,IAAME,EAAqBf,EACvBrD,EAAAA,WAAWmE,EAAgBd,CAAe,EAC1Cc,EAEJ,OACE,EAAApD,EAAA,KAAA,CAACiC,EAAD,CACO,MACL,UAAWnD,EAAAA,GACT,6FACAyD,EAAc,SAAW,OACzBe,CACF,EACA,GAAItB,EAPN,SAAA,EASE,EAAAhC,EAAA,IAAA,CAAC,OAAD,CAAM,GAAImC,EAAW,UAAU,iCAC5B,UACG,CAAA,EACLI,IACC,EAAAvC,EAAA,KAAA,CAAC,SAAD,CACE,GAAIqD,EACJ,KAAOA,EAAmB,MAAsD,SAGhF,GAAKE,EAAoBrE,EAAAA,gCAAkC,IAAA,GAL7D,SAAA,EAOE,EAAAc,EAAA,IAAA,CAAC,OAAD,CAAM,GAAIoC,EAAgB,UAAU,UACjC,SAAAoB,CACG,CAAA,EACLR,GAGC,EAAAhD,EAAA,IAAA,CAAC,OAAD,CACE,GAAIqC,EACJ,IAAKK,EACL,UAAU,wDAET,SAAAe,CACG,CAAA,EAENA,CAEI,CAED,CAAA,CAAA,GAEf,EAEA,EAAI,YAAc"}
+{"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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"}

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

@@ -3,17 +3,18 @@ import { cn as e } from "../../lib/cn.mjs";
 import { getElementType as t } from "../../lib/children.mjs";
 import { warnDeprecated as n, warnOnce as r } from "../../lib/dev.mjs";
 import { materialiseSlotContent as i, renderSlot as a, slotRendersContent as o, slotWrapsDefaultContent as s } from "../../lib/slot.mjs";
-import { useId as c } from "../../hooks/useId.mjs";
-import { focusRing as l } from "../../lib/styles.mjs";
-import { Button as u } from "../button/Button.mjs";
-import { DismissIcon as d } from "../../lib/icons.mjs";
-import { mergeProps as f } from "../../lib/mergeProps.mjs";
-import { BUTTON_OWN_PROP_KEYS as p, MERGED_DISABLED_FOCUSABLE_PROPS as m, mergedAriaDisabledClasses as h, placeButtonIcon as g } from "../button/Button.slots.mjs";
-import { hasRenderedTextLabel as _, hasTextLabel as v, observeTextLabel as y } from "../../lib/labelInName.mjs";
-import * as b from "react";
-import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { tagClassNames as c } from "../../lib/classNames.mjs";
+import { useId as l } from "../../hooks/useId.mjs";
+import { focusRing as u } from "../../lib/styles.mjs";
+import { Button as d } from "../button/Button.mjs";
+import { BUTTON_OWN_PROP_KEYS as f, MERGED_DISABLED_FOCUSABLE_PROPS as p, mergedAriaDisabledClasses as m, placeButtonIcon as h } from "../button/Button.slots.mjs";
+import { DismissIcon as g } from "../../lib/icons.mjs";
+import { mergeProps as _ } from "../../lib/mergeProps.mjs";
+import { hasRenderedTextLabel as v, hasTextLabel as y, observeTextLabel as b } from "../../lib/labelInName.mjs";
+import * as x from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
 //#region src/components/data-display/Tag.tsx
-var C = /* @__PURE__ */ new Set([
+var w = /* @__PURE__ */ new Set([
 	"type",
 	"disabled",
 	"autoFocus",
@@ -25,71 +26,75 @@ var C = /* @__PURE__ */ new Set([
 	"formTarget",
 	"name",
 	"value"
-]), w = /^on[A-Z]/, T = /* @__PURE__ */ new Set(["aria-label", "aria-labelledby"]), E = () => {};
-function D(e) {
+]), T = /^on[A-Z]/, E = /* @__PURE__ */ new Set(["aria-label", "aria-labelledby"]), D = () => {};
+function O(e) {
 	let t = {}, n = !1;
-	for (let [r, i] of Object.entries(e)) T.has(r) ? i !== void 0 && (n = !0) : t[r] = i;
+	for (let [r, i] of Object.entries(e)) E.has(r) ? i !== void 0 && (n = !0) : t[r] = i;
 	return {
 		props: t,
 		ignoredName: n
 	};
 }
-var O = "inline-flex items-center justify-center";
-function k(e) {
-	if (typeof e != "object" || !e || b.isValidElement(e) || Symbol.iterator in e) return !1;
+var k = "inline-flex items-center justify-center";
+function A(e) {
+	if (typeof e != "object" || !e || x.isValidElement(e) || Symbol.iterator in e) return !1;
 	let t = Object.getPrototypeOf(e);
 	return t === null || t === Object.prototype;
 }
-function A() {
-	return /* @__PURE__ */ x(d, { size: 12 });
-}
 function j(e) {
-	if (!o(e)) return {
+	return /* @__PURE__ */ S(g, {
+		size: 12,
+		className: e
+	});
+}
+function M(n) {
+	if (!o(n)) return {
 		buttonProps: null,
-		content: A(),
+		content: j(c.dismissIcon),
 		warning: null,
 		ignoredName: !1,
 		contentMayName: !1,
 		literalTextLabel: !1,
 		disabledFocusable: !1
 	};
-	let n = t(e);
-	if (b.isValidElement(e) && (n === "button" || n === u)) {
-		let { children: t, dangerouslySetInnerHTML: r, ...s } = e.props, c = n === u, l = s;
-		if (c) {
-			l = {};
-			for (let [e, t] of Object.entries(s)) p.has(e) || (l[e] = t);
+	let r = t(n);
+	if (x.isValidElement(n) && (r === "button" || r === d)) {
+		let { children: t, dangerouslySetInnerHTML: s, ...l } = n.props, u = r === d, p = l;
+		if (u) {
+			p = {};
+			for (let [e, t] of Object.entries(l)) f.has(e) || (p[e] = t);
 		}
-		let d = c ? s.icon : void 0, { props: f, ignoredName: m } = D(l), h = o(d) ? a(d, "span", O, { "aria-hidden": !0 }) : null, _ = r == null ? i(t) : /* @__PURE__ */ x("span", {
-			className: O,
-			dangerouslySetInnerHTML: r
+		let m = u ? l.icon : void 0, { props: g, ignoredName: _ } = O(p), v = o(m) ? a(m, "span", e(c.dismissIcon, k), { "aria-hidden": !0 }) : null, b = s == null ? i(t) : /* @__PURE__ */ S("span", {
+			className: k,
+			dangerouslySetInnerHTML: s
 		});
 		return {
-			buttonProps: f,
-			content: h || o(_) ? g(h, _, c && s.iconPosition) : A(),
+			buttonProps: g,
+			content: v || o(b) ? h(v, b, u && l.iconPosition) : j(c.dismissIcon),
 			warning: "button-element",
-			ignoredName: m,
+			ignoredName: _,
 			contentMayName: !0,
-			literalTextLabel: v(_),
-			disabledFocusable: c && !!s.disabledFocusable
+			literalTextLabel: y(b),
+			disabledFocusable: u && !!l.disabledFocusable
 		};
 	}
-	if (k(e)) {
-		let t = e.as === u, n = e.as === "button" || t || Object.keys(e).some((e) => C.has(e) || w.test(e)), r = {}, c = {}, l = {}, d = !1;
-		for (let [i, a] of Object.entries(e)) i === "as" ? a !== "button" && !t && (c.as = a) : t && p.has(i) ? l[i] = a : T.has(i) ? a !== void 0 && (d = !0) : i === "children" || i === "dangerouslySetInnerHTML" ? c[i] = a : n || i.startsWith("aria-") && i !== "aria-hidden" ? r[i] = a : c[i] = a;
-		return o(l.icon) ? c.children = g(a(l.icon, "span", O), i(c.children), l.iconPosition) : s(c.as ?? "span", c) && (c.children = A()), {
-			buttonProps: n || Object.keys(r).length > 0 ? r : null,
-			content: a(c, "span", O, { "aria-hidden": !0 }),
-			warning: n ? "button-object" : null,
-			ignoredName: d,
+	if (A(n)) {
+		let t = n.as === d, r = n.as === "button" || t || Object.keys(n).some((e) => w.has(e) || T.test(e)), l = {}, u = {}, p = {}, m = !1;
+		for (let [e, i] of Object.entries(n)) e === "as" ? i !== "button" && !t && (u.as = i) : t && f.has(e) ? p[e] = i : E.has(e) ? i !== void 0 && (m = !0) : e === "children" || e === "dangerouslySetInnerHTML" ? u[e] = i : r || e.startsWith("aria-") && e !== "aria-hidden" ? l[e] = i : u[e] = i;
+		let g = o(p.icon);
+		return g ? u.children = h(a(p.icon, "span", e(c.dismissIcon, k)), i(u.children), p.iconPosition) : s(u.as ?? "span", u) && (u.children = j()), {
+			buttonProps: r || Object.keys(l).length > 0 ? l : null,
+			content: a(u, "span", e(!g && c.dismissIcon, k), { "aria-hidden": !0 }),
+			warning: r ? "button-object" : null,
+			ignoredName: m,
 			contentMayName: !1,
 			literalTextLabel: !1,
-			disabledFocusable: !!l.disabledFocusable
+			disabledFocusable: !!p.disabledFocusable
 		};
 	}
 	return {
 		buttonProps: null,
-		content: a(e, "span", O, { "aria-hidden": !0 }),
+		content: a(n, "span", e(c.dismissIcon, k), { "aria-hidden": !0 }),
 		warning: null,
 		ignoredName: !1,
 		contentMayName: !1,
@@ -97,51 +102,51 @@ function j(e) {
 		disabledFocusable: !1
 	};
 }
-var M = (t) => {
-	let { as: i, dismissible: a, onDismiss: o, dismissIcon: s, dismissLabel: u = "Dismiss", className: d, children: p, ref: g, ...v } = t, C = i ?? "span", w = c("tag-content"), T = c("tag-dismiss"), D = c("tag-dismiss-text"), { buttonProps: O, content: k, warning: A, ignoredName: M, contentMayName: N, literalTextLabel: P, disabledFocusable: F } = j(a ? s : void 0), [I, L] = b.useState(null), R = b.useCallback((e) => I ? y(I, e) : E, [I]), z = b.useSyncExternalStore(R, () => I ? _(I) : P, () => P), B = N && z;
-	b.useEffect(() => {
-		A === "button-element" ? r("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`.") : A === "button-object" && n("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.");
-	}, [A]);
-	let V = a === void 0 && (o !== void 0 || s !== void 0);
-	b.useEffect(() => {
-		V && r("Tag:dismiss-without-dismissible", "Tag: `onDismiss` and `dismissIcon` take effect only with `dismissible`; no dismiss button was rendered. Add `dismissible` to render it.");
-	}, [V]), b.useEffect(() => {
-		M && r("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.");
-	}, [M]);
-	let H = {
+var N = (t) => {
+	let { as: i, dismissible: a, onDismiss: o, dismissIcon: s, dismissLabel: d = "Dismiss", className: f, children: h, ref: g, ...y } = t, w = i ?? "span", T = l("tag-content"), E = l("tag-dismiss"), O = l("tag-dismiss-text"), { buttonProps: k, content: A, warning: j, ignoredName: N, contentMayName: P, literalTextLabel: F, disabledFocusable: I } = M(a ? s : void 0), [L, R] = x.useState(null), z = x.useCallback((e) => L ? b(L, e) : D, [L]), B = x.useSyncExternalStore(z, () => L ? v(L) : F, () => F), V = P && B;
+	x.useEffect(() => {
+		j === "button-element" ? r("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`.") : j === "button-object" && n("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.");
+	}, [j]);
+	let H = a === void 0 && (o !== void 0 || s !== void 0);
+	x.useEffect(() => {
+		H && r("Tag:dismiss-without-dismissible", "Tag: `onDismiss` and `dismissIcon` take effect only with `dismissible`; no dismiss button was rendered. Add `dismissible` to render it.");
+	}, [H]), x.useEffect(() => {
+		N && r("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.");
+	}, [N]);
+	let U = {
 		type: "button",
-		className: e("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", h, l),
-		"aria-labelledby": `${B ? D : T} ${w}`
+		className: e(c.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", m, u),
+		"aria-labelledby": `${V ? O : E} ${T}`
 	};
-	o && (H.onClick = o);
-	let U = O ? f(H, O) : H;
-	return /* @__PURE__ */ S(C, {
+	o && (U.onClick = o);
+	let W = k ? _(U, k) : U;
+	return /* @__PURE__ */ C(w, {
 		ref: g,
-		className: e("inline-flex items-center gap-1 rounded-full bg-muted py-1 ps-3 text-body-1 text-foreground", a ? "pe-1.5" : "pe-3", d),
-		...v,
-		children: [/* @__PURE__ */ x("span", {
-			id: w,
-			className: "inline-flex items-center gap-1",
-			children: p
-		}), a && /* @__PURE__ */ S("button", {
-			...U,
-			type: U.type ?? "button",
-			...F ? m : void 0,
-			children: [/* @__PURE__ */ x("span", {
-				id: T,
+		className: e(c.root, "inline-flex items-center gap-1 rounded-full bg-muted py-1 ps-3 text-body-1 text-foreground", a ? "pe-1.5" : "pe-3", f),
+		...y,
+		children: [/* @__PURE__ */ S("span", {
+			id: T,
+			className: e(c.primaryText, "inline-flex items-center gap-1"),
+			children: h
+		}), a && /* @__PURE__ */ C("button", {
+			...W,
+			type: W.type ?? "button",
+			...I ? p : void 0,
+			children: [/* @__PURE__ */ S("span", {
+				id: E,
 				className: "sr-only",
-				children: u
-			}), N ? /* @__PURE__ */ x("span", {
-				id: D,
-				ref: L,
+				children: d
+			}), P ? /* @__PURE__ */ S("span", {
+				id: O,
+				ref: R,
 				className: "inline-flex items-center justify-center gap-[inherit]",
-				children: k
-			}) : k]
+				children: A
+			}) : A]
 		})]
 	});
 };
-M.displayName = "Tag";
+N.displayName = "Tag";
 //#endregion
-export { M as Tag };
+export { N as Tag };
 
 //# sourceMappingURL=Tag.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.mjs","names":["useId","useId$1","React","BUTTON_ONLY_KEYS","HANDLER_KEY","NAME_KEYS","noop","withoutName","result","ignoredName","key","value","props","iconClassName","isPlainObject","proto","defaultDismissContent","DismissIcon","resolveDismissSlot","slotRendersContent","slot","elementType","getElementType","Button","markup","elementProps","isWaveButton","slotProps","BUTTON_OWN_PROP_KEYS","icon","buttonProps","iconNode","renderSlot","ownContent","materialiseSlotContent","children","placeButtonIcon","hasTextLabel","asWaveButton","isButtonObject","contentProps","ownProps","slotWrapsDefaultContent","Tag","rest","Component","as","contentId","dismissLabelId","dismissTextId","slotButtonProps","dismissible","dismissIcon","labelTarget","setLabelTarget","subscribeToContent","observeTextLabel","onChange","contentHasTextLabel","hasRenderedTextLabel","literalTextLabel","namedByContent","contentMayName","warning","warnOnce","warnDeprecated","dismissPropsIgnored","onDismiss","ownButtonProps","cn","mergedAriaDisabledClasses","focusRing","dismissButtonProps","mergeProps","className","disabledFocusable","MERGED_DISABLED_FOCUSABLE_PROPS","dismissLabel","content"],"sources":["../../../src/components/data-display/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\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/** The decorative default dismiss glyph. */\nfunction defaultDismissContent(): React.ReactNode {\n  return <DismissIcon size={12} />;\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(),\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', iconClassName, { 'aria-hidden': true })\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(),\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    if (slotRendersContent(ownProps.icon)) {\n      contentProps.children = placeButtonIcon(\n        renderSlot(ownProps.icon as Slot<'span'>, 'span', iconClassName),\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(contentProps as SlotObject<'span'>, 'span', 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(slot as Slot<'span'>, 'span', iconClassName, { 'aria-hidden': true }),\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      '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        '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 id={contentId} className=\"inline-flex items-center gap-1\">\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.mjs","names":["useId","useId$1","React","BUTTON_ONLY_KEYS","HANDLER_KEY","NAME_KEYS","noop","withoutName","result","ignoredName","key","value","props","iconClassName","isPlainObject","proto","defaultDismissContent","DismissIcon","resolveDismissSlot","slotRendersContent","slot","tagClassNames","elementType","getElementType","Button","markup","elementProps","isWaveButton","slotProps","BUTTON_OWN_PROP_KEYS","icon","buttonProps","iconNode","renderSlot","cn","ownContent","materialiseSlotContent","children","placeButtonIcon","hasTextLabel","asWaveButton","isButtonObject","contentProps","ownProps","hasButtonIcon","slotWrapsDefaultContent","Tag","rest","Component","as","contentId","dismissLabelId","dismissTextId","slotButtonProps","dismissible","dismissIcon","labelTarget","setLabelTarget","subscribeToContent","observeTextLabel","onChange","contentHasTextLabel","hasRenderedTextLabel","literalTextLabel","namedByContent","contentMayName","warning","warnOnce","warnDeprecated","dismissPropsIgnored","onDismiss","ownButtonProps","mergedAriaDisabledClasses","focusRing","dismissButtonProps","mergeProps","className","disabledFocusable","MERGED_DISABLED_FOCUSABLE_PROPS","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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"}