@mortenbrudvik/waveui 0.13.0 → 0.14.1

package/dist/lib/classNames.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"classNames.cjs","names":["buttonClassNames","compoundButtonClassNames","toggleButtonClassNames","splitButtonClassNames","menuButtonClassNames","linkClassNames","toolbarClassNames","toolbarButtonClassNames","toolbarToggleButtonClassNames","toolbarRadioButtonClassNames","toolbarRadioGroupClassNames","toolbarGroupClassNames","toolbarDividerClassNames","avatarClassNames","avatarGroupClassNames","avatarGroupItemClassNames","avatarGroupPopoverClassNames","badgeClassNames","counterBadgeClassNames","presenceBadgeClassNames","tagClassNames","tagGroupClassNames","interactionTagClassNames","interactionTagPrimaryClassNames","interactionTagSecondaryClassNames","personaClassNames","dividerClassNames","infoButtonClassNames","infoLabelClassNames","imageClassNames","listClassNames","listItemClassNames","messageBarClassNames","messageBarTitleClassNames","messageBarActionsClassNames","progressBarClassNames","spinnerClassNames","skeletonClassNames","skeletonGroupClassNames","toastClassNames","toastTitleClassNames","toastBodyClassNames","toastFooterClassNames","toasterClassNames","inputClassNames","textareaClassNames","selectClassNames","fieldClassNames","labelClassNames","checkboxClassNames","radioGroupClassNames","radioGroupItemClassNames","switchClassNames","searchBoxClassNames","sliderClassNames","spinButtonClassNames","optionClassNames","optionGroupClassNames","listboxClassNames","listboxSurfaceClassNames","comboboxClassNames","dropdownClassNames","tagPickerClassNames","tagPickerControlClassNames","tagPickerGroupClassNames","tagPickerInputClassNames","tagPickerButtonClassNames","tagPickerListClassNames","tagPickerOptionClassNames","timePickerClassNames","datePickerClassNames","calendarClassNames","swatchPickerClassNames","swatchPickerRowClassNames","colorSwatchClassNames","imageSwatchClassNames","emptySwatchClassNames","colorPickerClassNames","colorPickerHexFieldClassNames","colorPickerSwatchesClassNames","colorPickerPreviewClassNames","colorAreaClassNames","colorSliderClassNames","alphaSliderClassNames","ratingClassNames","ratingItemClassNames","ratingDisplayClassNames","cardClassNames","cardHeaderClassNames","cardPreviewClassNames","cardBodyClassNames","cardFooterClassNames","accordionClassNames","accordionItemClassNames","accordionTriggerClassNames","accordionPanelClassNames","tabListClassNames","tabListTabClassNames","tabListPanelClassNames","tabListPanelsClassNames","treeClassNames","treeItemClassNames","treeItemPersonaLayoutClassNames","carouselClassNames","carouselItemClassNames","carouselButtonClassNames","overflowClassNames","overflowItemClassNames","stackClassNames","flexClassNames","gridClassNames","breadcrumbClassNames","breadcrumbItemClassNames","menuClassNames","menuItemClassNames","menuItemCheckboxClassNames","menuItemRadioClassNames","menuItemSwitchClassNames","menuItemLinkClassNames","menuDividerClassNames","menuPopoverClassNames","menuGroupClassNames","menuGroupHeaderClassNames","menuSplitGroupClassNames","navClassNames","navCategoryClassNames","navItemClassNames","navSubItemClassNames","navSectionHeaderClassNames","navDividerClassNames","navAppItemClassNames","navAppItemStaticClassNames","navDrawerClassNames","navDrawerHeaderClassNames","navDrawerBodyClassNames","navDrawerFooterClassNames","hamburgerClassNames","paginationClassNames","stepperClassNames","stepperStepClassNames","dialogContentClassNames","dialogTitleClassNames","dialogFooterClassNames","popoverContentClassNames","tooltipClassNames","drawerClassNames","drawerTitleClassNames","drawerHeaderClassNames","drawerHeaderTitleClassNames","drawerHeaderNavigationClassNames","drawerBodyClassNames","drawerFooterClassNames","teachingPopoverClassNames","tableClassNames","tableHeaderClassNames","tableHeaderCellClassNames","tableBodyClassNames","tableRowClassNames","tableCellClassNames","dataGridClassNames","dataGridHeaderClassNames","dataGridHeaderCellClassNames","dataGridBodyClassNames","dataGridRowClassNames","dataGridCellClassNames","textClassNames","waveProviderClassNames","portalClassNames"],"sources":["../../src/lib/classNames.ts"],"sourcesContent":["/**\n * Stable class names of every public component and part. A root class sits on the element that\n * receives your `className`, and a part class on each element that a prop or slot fills or that\n * draws structure (an icon, a dismiss button, a track, a surface). Style them from your own CSS,\n * or build a typed selector from a constant (`` `.${buttonClassNames.icon}` ``). This module\n * imports nothing and holds string constants only, so a React Server Component can read it.\n *\n * - **Names.** A root is `wave-` plus the kebab-cased flat export name (`Button` → `wave-button`,\n *   `CardHeader` → `wave-card-header`); a part is the root, two underscores and the kebab-cased\n *   part key (`wave-button__icon`); a constant is the camel-cased flat name plus `ClassNames`\n *   (`cardHeaderClassNames`). WaveProvider and Portal keep their existing scope classes,\n *   `wave-root` and `wave-portal`.\n * - **Placement.** A component puts its root class first in its class list, so your `className`\n *   still wins a conflict; a slot part keeps its class when a slot object renders another element\n *   (`icon={{ as: 'img', … }}`).\n * - **Variants and nesting.** A variant also carries the classes of the component it is built on\n *   (ToggleButton's root is `wave-button wave-toggle-button`, its icon\n *   `wave-button__icon wave-toggle-button__icon`), and a public component rendered inside another\n *   also carries the parent's part class (SplitButton's halves are `wave-button` plus\n *   `wave-split-button__primary-action-button` or `wave-split-button__menu-button`).\n * - **No state classes.** State lives in `data-*` attributes and ARIA (`[data-pressed]`,\n *   `[data-disabled]`, `[aria-expanded='true']`).\n * - **Stability.** Before 1.0 no class is removed; a renamed part keeps its old class next to the\n *   new one until then.\n *\n * Not to be confused with the internal `buttonClassName()` helper of `buttonStyles.ts` (one\n * letter shorter), which returns Button's utility classes.\n */\n\n// ---------------------------------------------------------------------------\n// button\n// ---------------------------------------------------------------------------\n\n/**\n * Button: `root` on the rendered element (`<button>`, or your `as`); `icon` on the icon box.\n * Style them from your own CSS (`.wave-button`, `.wave-button__icon`). State is not a class: use\n * the `data-*` attributes (`[data-pressed]`, `[data-disabled]`).\n */\nexport const buttonClassNames = {\n  root: 'wave-button',\n  icon: 'wave-button__icon',\n} as const;\n\n/**\n * CompoundButton (also carries Button's root and icon classes): `root` on the rendered element;\n * `icon` on the icon box (Button's icon span in the icon-only layout); `contentContainer` on the\n * text column; `primaryText` on the main line; `secondaryText` on the second line.\n */\nexport const compoundButtonClassNames = {\n  root: 'wave-compound-button',\n  icon: 'wave-compound-button__icon',\n  contentContainer: 'wave-compound-button__content-container',\n  primaryText: 'wave-compound-button__primary-text',\n  secondaryText: 'wave-compound-button__secondary-text',\n} as const;\n\n/**\n * ToggleButton (also carries Button's root and icon classes): `root` on the `<button>`; `icon` on\n * Button's icon span.\n */\nexport const toggleButtonClassNames = {\n  root: 'wave-toggle-button',\n  icon: 'wave-toggle-button__icon',\n} as const;\n\n/**\n * SplitButton: `root` on the `role=\"group\"` element; `primaryActionButton` and `menuButton` on its\n * two Buttons (which also carry Button's root); `icon` on the primary half's icon span and\n * `menuIcon` on the menu half's (both also carry Button's icon class).\n */\nexport const splitButtonClassNames = {\n  root: 'wave-split-button',\n  primaryActionButton: 'wave-split-button__primary-action-button',\n  menuButton: 'wave-split-button__menu-button',\n  icon: 'wave-split-button__icon',\n  menuIcon: 'wave-split-button__menu-icon',\n} as const;\n\n/**\n * MenuButton (also carries Button's root and icon classes): `root` on the `<button>`; `icon` on\n * Button's icon span; `menuIcon` on the default chevron `<svg>`, or on the span of your\n * `menuIcon`.\n */\nexport const menuButtonClassNames = {\n  root: 'wave-menu-button',\n  icon: 'wave-menu-button__icon',\n  menuIcon: 'wave-menu-button__menu-icon',\n} as const;\n\n/** Link: `root` on the rendered element (`<a>`, or your `as`). */\nexport const linkClassNames = { root: 'wave-link' } as const;\n\n/** Toolbar: `root` on the `role=\"toolbar\"` element (your `as`, default `<div>`). */\nexport const toolbarClassNames = { root: 'wave-toolbar' } as const;\n\n/**\n * Toolbar.Button (also carries Button's root and icon classes): `root` on the rendered element;\n * `icon` on Button's icon span (the icon box of `vertical`).\n */\nexport const toolbarButtonClassNames = {\n  root: 'wave-toolbar-button',\n  icon: 'wave-toolbar-button__icon',\n} as const;\n\n/**\n * Toolbar.ToggleButton (also carries the root and icon classes of Button and ToggleButton):\n * `root` on the `<button>`; `icon` on the icon span.\n */\nexport const toolbarToggleButtonClassNames = {\n  root: 'wave-toolbar-toggle-button',\n  icon: 'wave-toolbar-toggle-button__icon',\n} as const;\n\n/**\n * Toolbar.RadioButton (also carries the root and icon classes of Button and ToggleButton):\n * `root` on the `role=\"radio\"` button; `icon` on the icon span.\n */\nexport const toolbarRadioButtonClassNames = {\n  root: 'wave-toolbar-radio-button',\n  icon: 'wave-toolbar-radio-button__icon',\n} as const;\n\n/** Toolbar.RadioGroup: `root` on the `role=\"radiogroup\"` element. */\nexport const toolbarRadioGroupClassNames = { root: 'wave-toolbar-radio-group' } as const;\n\n/** Toolbar.Group: `root` on the group element. */\nexport const toolbarGroupClassNames = { root: 'wave-toolbar-group' } as const;\n\n/** Toolbar.Divider: `root` on the `role=\"separator\"` element. */\nexport const toolbarDividerClassNames = { root: 'wave-toolbar-divider' } as const;\n\n// ---------------------------------------------------------------------------\n// data-display\n// ---------------------------------------------------------------------------\n\n/**\n * Avatar: `root` on the avatar span (with `badge`, on the outer wrapper); `visual` on the circle\n * (the root without `badge`, the inner span with it); `image` on the `<img>` (or the element of\n * your `image` slot); `icon` on the `icon` slot, else on the default person `<svg>`; `initials`\n * on the initials span; `badge` on the `badge` slot.\n */\nexport const avatarClassNames = {\n  root: 'wave-avatar',\n  visual: 'wave-avatar__visual',\n  image: 'wave-avatar__image',\n  icon: 'wave-avatar__icon',\n  initials: 'wave-avatar__initials',\n  badge: 'wave-avatar__badge',\n} as const;\n\n/**\n * AvatarGroup: `root` on the `role=\"group\"` element; `item` on the wrapper around each shown\n * member; `overflowButton` on the \"+N\" button; `surface` on its popup; `list` on the popup's\n * `<ul>`; `listItem` on each of its `<li>`.\n */\nexport const avatarGroupClassNames = {\n  root: 'wave-avatar-group',\n  item: 'wave-avatar-group__item',\n  overflowButton: 'wave-avatar-group__overflow-button',\n  pie: 'wave-avatar-group__pie',\n  surface: 'wave-avatar-group__surface',\n  list: 'wave-avatar-group__list',\n  listItem: 'wave-avatar-group__list-item',\n} as const;\n\n/**\n * AvatarGroup.Item: `root` on the avatar it renders in the group, and on the row (avatar and name)\n * it renders in the overflow list; `name` on the name text of that row.\n */\nexport const avatarGroupItemClassNames = {\n  root: 'wave-avatar-group-item',\n  name: 'wave-avatar-group-item__name',\n} as const;\n\n/** AvatarGroup.Popover: `root` on the overflow button (which also carries the group's button class). */\nexport const avatarGroupPopoverClassNames = { root: 'wave-avatar-group-popover' } as const;\n\n/** Badge: `root` on the badge span. */\nexport const badgeClassNames = { root: 'wave-badge' } as const;\n\n/**\n * CounterBadge (also carries Badge's root): `root` on the badge span (a count it does not show\n * renders no element).\n */\nexport const counterBadgeClassNames = { root: 'wave-counter-badge' } as const;\n\n/** PresenceBadge: `root` on the `role=\"img\"` span; `icon` on the status glyph `<svg>`. */\nexport const presenceBadgeClassNames = {\n  root: 'wave-presence-badge',\n  icon: 'wave-presence-badge__icon',\n} as const;\n\n/**\n * Tag: `root` on the rendered element (your `as`, default `<span>`); `media` on the element of the\n * media slot; `icon` on the icon box; `primaryText` on the content span; `secondaryText` on the\n * second line of text; `dismissButton` on the Dismiss button; `dismissIcon` on the icon inside it\n * (what `dismissIcon` renders, a merged Button's icon span, else the default `<svg>`).\n */\nexport const tagClassNames = {\n  root: 'wave-tag',\n  media: 'wave-tag__media',\n  icon: 'wave-tag__icon',\n  primaryText: 'wave-tag__primary-text',\n  secondaryText: 'wave-tag__secondary-text',\n  dismissButton: 'wave-tag__dismiss-button',\n  dismissIcon: 'wave-tag__dismiss-icon',\n} as const;\n\n/** TagGroup: `root` on the group element (the toolbar or the list). */\nexport const tagGroupClassNames = { root: 'wave-tag-group' } as const;\n\n/** InteractionTag: `root` on the element that holds its two buttons. */\nexport const interactionTagClassNames = { root: 'wave-interaction-tag' } as const;\n\n/**\n * InteractionTag.Primary: `root` on its button; `media`, `icon`, `primaryText` and\n * `secondaryText` on the slot elements.\n */\nexport const interactionTagPrimaryClassNames = {\n  root: 'wave-interaction-tag-primary',\n  media: 'wave-interaction-tag-primary__media',\n  icon: 'wave-interaction-tag-primary__icon',\n  primaryText: 'wave-interaction-tag-primary__primary-text',\n  secondaryText: 'wave-interaction-tag-primary__secondary-text',\n} as const;\n\n/**\n * InteractionTag.Secondary: `root` on its button; `dismissIcon` on the glyph inside it (the\n * default glyph, or the element that wraps the children).\n */\nexport const interactionTagSecondaryClassNames = {\n  root: 'wave-interaction-tag-secondary',\n  dismissIcon: 'wave-interaction-tag-secondary__dismiss-icon',\n} as const;\n\n/**\n * Persona: `root` on the persona element; `avatar` on the built-in Avatar (which also carries\n * Avatar's root and `visual` classes) or on your `avatar` slot; `badge` on the element that\n * places the badge; `primaryText` on the name; `secondaryText` on the second line.\n */\nexport const personaClassNames = {\n  root: 'wave-persona',\n  avatar: 'wave-persona__avatar',\n  badge: 'wave-persona__badge',\n  primaryText: 'wave-persona__primary-text',\n  secondaryText: 'wave-persona__secondary-text',\n  tertiaryText: 'wave-persona__tertiary-text',\n  quaternaryText: 'wave-persona__quaternary-text',\n} as const;\n\n/**\n * Divider: `root` on the `<hr>` of a plain horizontal divider, else on the `role=\"separator\"`\n * element (or your `as`); `line` on each of the two line elements of a labelled divider; `label`\n * on its label span.\n */\nexport const dividerClassNames = {\n  root: 'wave-divider',\n  line: 'wave-divider__line',\n  label: 'wave-divider__label',\n} as const;\n\n/**\n * InfoButton: `root` on the `<button>`; `info` on the `role=\"note\"` popup that shows your `info`\n * (Fluent's `info` slot, the popover surface); `beak` on its arrow.\n */\nexport const infoButtonClassNames = {\n  root: 'wave-info-button',\n  info: 'wave-info-button__info',\n  beak: 'wave-info-button__beak',\n} as const;\n\n/**\n * InfoLabel: `root` on the outer span; `label` on its Label (which also carries Label's root);\n * `infoButton` on its InfoButton (which also carries InfoButton's root); `info` on the popup, the\n * InfoButton's note (which also carries InfoButton's `info`).\n */\nexport const infoLabelClassNames = {\n  root: 'wave-info-label',\n  label: 'wave-info-label__label',\n  infoButton: 'wave-info-label__info-button',\n  info: 'wave-info-label__info',\n} as const;\n\n/** Image: `root` on the `<img>`. */\nexport const imageClassNames = { root: 'wave-image' } as const;\n\n/** List: `root` on the `<ul>` (the `role=\"grid\"` element of a selectable list with actions). */\nexport const listClassNames = { root: 'wave-list' } as const;\n\n/**\n * List.Item: `root` on the `<li>` (the `role=\"row\"` element of a list with actions); `content` on\n * the content element; `action` on the action cell.\n */\nexport const listItemClassNames = {\n  root: 'wave-list-item',\n  content: 'wave-list-item__content',\n  action: 'wave-list-item__action',\n} as const;\n\n// ---------------------------------------------------------------------------\n// feedback\n// ---------------------------------------------------------------------------\n\n/**\n * MessageBar: `root` on the bar; `icon` on the status icon span; `body` on the text column (it\n * holds `MessageBar.Title`); `dismissButton` on the Dismiss button; `dismissIcon` on the icon\n * inside it (what `dismiss` renders, a merged Button's icon span, else the default `<svg>`).\n */\nexport const messageBarClassNames = {\n  root: 'wave-message-bar',\n  icon: 'wave-message-bar__icon',\n  body: 'wave-message-bar__body',\n  dismissButton: 'wave-message-bar__dismiss-button',\n  dismissIcon: 'wave-message-bar__dismiss-icon',\n} as const;\n\n/** MessageBar.Title: `root` on the title span. */\nexport const messageBarTitleClassNames = { root: 'wave-message-bar-title' } as const;\n\n/** MessageBar.Actions: `root` on the element that holds the actions. */\nexport const messageBarActionsClassNames = { root: 'wave-message-bar-actions' } as const;\n\n/**\n * ProgressBar: `root` on the `role=\"progressbar\"` element (the track); `bar` on the fill; `label`\n * on the label of `showLabel` (a sibling of the root).\n */\nexport const progressBarClassNames = {\n  root: 'wave-progress-bar',\n  bar: 'wave-progress-bar__bar',\n  label: 'wave-progress-bar__label',\n} as const;\n\n/**\n * Spinner: `root` on the outer span; `spinner` on the ring; `label` on the label span (also while\n * only screen readers get it, without `labelVisible`).\n */\nexport const spinnerClassNames = {\n  root: 'wave-spinner',\n  spinner: 'wave-spinner__spinner',\n  label: 'wave-spinner__label',\n} as const;\n\n/** Skeleton: `root` on the placeholder element. */\nexport const skeletonClassNames = { root: 'wave-skeleton' } as const;\n\n/** Skeleton.Group: `root` on the group element. */\nexport const skeletonGroupClassNames = { root: 'wave-skeleton-group' } as const;\n\n/**\n * Toast: `root` on the toast; `icon` on the status icon span (or your `icon` slot); `content` on\n * the text column that holds the title, body and footer; `dismissButton` on the Dismiss button.\n */\nexport const toastClassNames = {\n  root: 'wave-toast',\n  icon: 'wave-toast__icon',\n  content: 'wave-toast__content',\n  dismissButton: 'wave-toast__dismiss-button',\n} as const;\n\n/**\n * Toast.Title: `root` on the title row (also the one the `title` prop renders); `label` on the\n * title text, which names the toast; `action` on the `action` slot at the row's end.\n */\nexport const toastTitleClassNames = {\n  root: 'wave-toast-title',\n  label: 'wave-toast-title__label',\n  action: 'wave-toast-title__action',\n} as const;\n\n/**\n * Toast.Body: `root` on the body element (also the one plain children render); `subtitle` on the\n * `subtitle` line inside it.\n */\nexport const toastBodyClassNames = {\n  root: 'wave-toast-body',\n  subtitle: 'wave-toast-body__subtitle',\n} as const;\n\n/** Toast.Footer: `root` on the row of actions. */\nexport const toastFooterClassNames = { root: 'wave-toast-footer' } as const;\n\n/**\n * Toaster: `root` on the portaled toast region; `toast` on the `role=\"group\"` container the\n * Toaster renders around each toast.\n */\nexport const toasterClassNames = {\n  root: 'wave-toaster',\n  toast: 'wave-toaster__toast',\n} as const;\n\n// ---------------------------------------------------------------------------\n// input\n// ---------------------------------------------------------------------------\n\n/**\n * Input: `root` on the `<input>`, or, with `contentBefore` or `contentAfter` content, on the\n * wrapper that draws the field; `input` on the `<input>` (also when it is the root);\n * `contentBefore` and `contentAfter` on the slot spans; `errorMessage` on the `role=\"alert\"`\n * message after the control.\n */\nexport const inputClassNames = {\n  root: 'wave-input',\n  input: 'wave-input__input',\n  contentBefore: 'wave-input__content-before',\n  contentAfter: 'wave-input__content-after',\n  errorMessage: 'wave-input__error-message',\n} as const;\n\n/** Textarea: `root` on the `<textarea>`; `errorMessage` on the message after it, as Input's. */\nexport const textareaClassNames = {\n  root: 'wave-textarea',\n  errorMessage: 'wave-textarea__error-message',\n} as const;\n\n/** Select: `root` on the `<select>`; `errorMessage` on the message after it, as Input's. */\nexport const selectClassNames = {\n  root: 'wave-select',\n  errorMessage: 'wave-select__error-message',\n} as const;\n\n/**\n * Field: `root` on the field element; `label` on the `<label>`; `required` on the asterisk;\n * `validationMessage` on the message; `validationMessageIcon` on its icon; `hint` on the hint.\n */\nexport const fieldClassNames = {\n  root: 'wave-field',\n  label: 'wave-field__label',\n  required: 'wave-field__required',\n  validationMessage: 'wave-field__validation-message',\n  validationMessageIcon: 'wave-field__validation-message-icon',\n  hint: 'wave-field__hint',\n} as const;\n\n/** Label: `root` on the `<label>`; `required` on the asterisk. */\nexport const labelClassNames = {\n  root: 'wave-label',\n  required: 'wave-label__required',\n} as const;\n\n/**\n * Checkbox: `root` on the `<label>`; `indicator` on the `role=\"checkbox\"` button (the box);\n * `label` on the label text.\n */\nexport const checkboxClassNames = {\n  root: 'wave-checkbox',\n  indicator: 'wave-checkbox__indicator',\n  label: 'wave-checkbox__label',\n} as const;\n\n/** RadioGroup: `root` on the `role=\"radiogroup\"` element. */\nexport const radioGroupClassNames = { root: 'wave-radio-group' } as const;\n\n/**\n * RadioGroup.Item: `root` on the `<label>` (where `className` lands; `ref` and the other props go\n * to the radio); `indicator` on the `role=\"radio\"` button; `label` on the label text.\n */\nexport const radioGroupItemClassNames = {\n  root: 'wave-radio-group-item',\n  indicator: 'wave-radio-group-item__indicator',\n  label: 'wave-radio-group-item__label',\n} as const;\n\n/**\n * Switch: `root` on the `<label>`; `track` on the `role=\"switch\"` button; `thumb` on its thumb;\n * `label` on the label text.\n */\nexport const switchClassNames = {\n  root: 'wave-switch',\n  track: 'wave-switch__track',\n  thumb: 'wave-switch__thumb',\n  label: 'wave-switch__label',\n} as const;\n\n/**\n * SearchBox: `root` on the element that draws the field; `contentBefore` on the span that holds\n * the search icon or your slot; `input` on the `<input type=\"search\">`; `contentAfter` on the span\n * that holds your slot; `dismissButton` on the clear button; `dismissIcon` on the icon inside it\n * (what `dismiss` renders, a merged Button's icon span, else the default `<svg>`).\n */\nexport const searchBoxClassNames = {\n  root: 'wave-search-box',\n  contentBefore: 'wave-search-box__content-before',\n  input: 'wave-search-box__input',\n  contentAfter: 'wave-search-box__content-after',\n  dismissButton: 'wave-search-box__dismiss-button',\n  dismissIcon: 'wave-search-box__dismiss-icon',\n} as const;\n\n/** Slider: `root` on the `<input type=\"range\">` (its rail and thumb are pseudo-elements). */\nexport const sliderClassNames = { root: 'wave-slider' } as const;\n\n/**\n * SpinButton: `root` on the outer element; `decrementButton` on the − button; `input` on the\n * `role=\"spinbutton\"` input; `incrementButton` on the + button.\n */\nexport const spinButtonClassNames = {\n  root: 'wave-spin-button',\n  decrementButton: 'wave-spin-button__decrement-button',\n  input: 'wave-spin-button__input',\n  incrementButton: 'wave-spin-button__increment-button',\n} as const;\n\n/**\n * Option (also Combobox.Option, Dropdown.Option and Listbox.Option): `root` on the `role=\"option\"`\n * element; `indicator` on the checkbox square of a multi-select list; `checkIcon` on the check\n * `<svg>`, or on the span of your `checkIcon` (inside the square in a multi-select list);\n * `content` on the content span.\n */\nexport const optionClassNames = {\n  root: 'wave-option',\n  indicator: 'wave-option__indicator',\n  checkIcon: 'wave-option__check-icon',\n  content: 'wave-option__content',\n} as const;\n\n/**\n * OptionGroup (also Combobox.OptionGroup, Dropdown.OptionGroup and Listbox.OptionGroup): `root`\n * on the group's entry in the list; `label` on its heading (rendered only for a `label`); `list`\n * on the `role=\"group\"` list of its options.\n */\nexport const optionGroupClassNames = {\n  root: 'wave-option-group',\n  label: 'wave-option-group__label',\n  list: 'wave-option-group__list',\n} as const;\n\n/** Listbox: `root` on the `role=\"listbox\"` list (its options carry Option's classes). */\nexport const listboxClassNames = { root: 'wave-listbox' } as const;\n\n/**\n * ListboxSurface: `root` on the portaled popup around the list, while it shows the list or the\n * empty content; `list` on the `role=\"listbox\"` list, also while it renders in place inside your\n * picker. In Combobox, Dropdown and TagPicker these elements also carry the picker's own\n * `surface` and `listbox` classes.\n */\nexport const listboxSurfaceClassNames = {\n  root: 'wave-listbox-surface',\n  list: 'wave-listbox-surface__list',\n} as const;\n\n/**\n * Combobox: `root` on the outer element; `input` on the `role=\"combobox\"` input; `clearButton` on\n * the clear button; `expandButton` on the expand button and `expandIcon` on its glyph; `listbox`\n * on the `role=\"listbox\"` list; `surface` on its portaled popup; `emptyMessage` on the\n * \"No matches\" row.\n */\nexport const comboboxClassNames = {\n  root: 'wave-combobox',\n  input: 'wave-combobox__input',\n  clearButton: 'wave-combobox__clear-button',\n  expandButton: 'wave-combobox__expand-button',\n  expandIcon: 'wave-combobox__expand-icon',\n  listbox: 'wave-combobox__listbox',\n  surface: 'wave-combobox__surface',\n  emptyMessage: 'wave-combobox__empty-message',\n} as const;\n\n/**\n * Dropdown: `root` on the outer element; `button` on the `role=\"combobox\"` button; `value` on the\n * value or placeholder span; `expandIcon` on the chevron `<svg>`; `clearButton` on the clear\n * button; `listbox` on the `role=\"listbox\"` list; `surface` on its portaled popup.\n */\nexport const dropdownClassNames = {\n  root: 'wave-dropdown',\n  button: 'wave-dropdown__button',\n  value: 'wave-dropdown__value',\n  expandIcon: 'wave-dropdown__expand-icon',\n  clearButton: 'wave-dropdown__clear-button',\n  listbox: 'wave-dropdown__listbox',\n  surface: 'wave-dropdown__surface',\n} as const;\n\n/**\n * TagPicker: `root` on the outer element; `control` on the tag area and `group` on the list of\n * tags (both deprecated, kept until 1.0 next to TagPicker.Control's and TagPicker.Group's own\n * classes); `tag` on each tag; `removeButton` on each tag's remove button; `input` on the\n * `role=\"combobox\"` input; `expandButton` on the expand button and `expandIcon` on its glyph;\n * `clearButton` on the clear button; `listbox` on the `role=\"listbox\"` list; `option` on each\n * Option it renders (which also carries Option's classes); `createOption` on the create option of\n * `allowCreate`; `overflowCount` on the \"+N\" count of the single-line layout; `surface` on the\n * portaled popup; `emptyMessage` on the \"No matches\" row.\n */\nexport const tagPickerClassNames = {\n  root: 'wave-tag-picker',\n  control: 'wave-tag-picker__control',\n  group: 'wave-tag-picker__group',\n  tag: 'wave-tag-picker__tag',\n  removeButton: 'wave-tag-picker__remove-button',\n  input: 'wave-tag-picker__input',\n  expandButton: 'wave-tag-picker__expand-button',\n  expandIcon: 'wave-tag-picker__expand-icon',\n  clearButton: 'wave-tag-picker__clear-button',\n  listbox: 'wave-tag-picker__listbox',\n  option: 'wave-tag-picker__option',\n  createOption: 'wave-tag-picker__create-option',\n  overflowCount: 'wave-tag-picker__overflow-count',\n  surface: 'wave-tag-picker__surface',\n  emptyMessage: 'wave-tag-picker__empty-message',\n} as const;\n\n/**\n * TagPicker.Control: `root` on the field that holds the tags, the trigger and the end buttons (it\n * also carries TagPicker's `control` part).\n */\nexport const tagPickerControlClassNames = { root: 'wave-tag-picker-control' } as const;\n\n/**\n * TagPicker.Group: `root` on the list of tags (also a TagGroup's root, and TagPicker's `group`\n * part).\n */\nexport const tagPickerGroupClassNames = { root: 'wave-tag-picker-group' } as const;\n\n/**\n * TagPicker.Input: `root` on the `role=\"combobox\"` input (it also carries TagPicker's `input`\n * part).\n */\nexport const tagPickerInputClassNames = { root: 'wave-tag-picker-input' } as const;\n\n/** TagPicker.Button: `root` on the `role=\"combobox\"` button. */\nexport const tagPickerButtonClassNames = { root: 'wave-tag-picker-button' } as const;\n\n/**\n * TagPicker.List: `root` on the `role=\"listbox\"` list (it also carries ListboxSurface's `list` and\n * TagPicker's `listbox` parts).\n */\nexport const tagPickerListClassNames = { root: 'wave-tag-picker-list' } as const;\n\n/**\n * TagPicker.Option (an Option variant): `root` on the option; `media` on the visual before its\n * text; `secondaryContent` on its second line.\n */\nexport const tagPickerOptionClassNames = {\n  root: 'wave-tag-picker-option',\n  media: 'wave-tag-picker-option__media',\n  secondaryContent: 'wave-tag-picker-option__secondary-content',\n} as const;\n\n/**\n * TimePicker: `root` on the outer element; `input` on the `role=\"combobox\"` input; `clearButton`\n * on the clear button; `expandButton` on the expand button and `expandIcon` on its glyph;\n * `errorMessage` on the `role=\"alert\"` message; `listbox` on the `role=\"listbox\"` list; `option`\n * on each option; `checkIcon` on each option's check column; `surface` on the portaled popup;\n * `emptyMessage` on its status row.\n */\nexport const timePickerClassNames = {\n  root: 'wave-time-picker',\n  input: 'wave-time-picker__input',\n  clearButton: 'wave-time-picker__clear-button',\n  expandButton: 'wave-time-picker__expand-button',\n  expandIcon: 'wave-time-picker__expand-icon',\n  errorMessage: 'wave-time-picker__error-message',\n  listbox: 'wave-time-picker__listbox',\n  option: 'wave-time-picker__option',\n  checkIcon: 'wave-time-picker__check-icon',\n  surface: 'wave-time-picker__surface',\n  emptyMessage: 'wave-time-picker__empty-message',\n} as const;\n\n/**\n * DatePicker: `root` on the outer element; `input` on the text input; `clearButton` on the clear\n * button; `openCalendarButton` on the calendar button; `errorMessage` on the `role=\"alert\"`\n * message; `surface` on the portaled `role=\"dialog\"` calendar; `header` on its month row;\n * `previousMonthButton` and `nextMonthButton` on the navigation buttons (by a month, and in the\n * month and year views by a year and a decade); `heading` on the `<h2>` (the month, year or\n * decade); `headingButton` on its button to the month and year views; `grid` on the calendar's\n * `role=\"grid\"` element of every view; `weekday` on each weekday header cell; `weekNumberHeader`\n * on the header cell of the week-number column and `weekNumber` on each week's row header\n * (`showWeekNumbers`); `day`, `month` and `year` on each day, month and year button; `markedDot`\n * on the dot inside a marked day's button; `footer` on the row of the footer buttons\n * (`showGoToToday`, `showCloseButton`), with `todayButton` on \"Go to today\" and `closeButton` on\n * \"Close\".\n */\nexport const datePickerClassNames = {\n  root: 'wave-date-picker',\n  input: 'wave-date-picker__input',\n  clearButton: 'wave-date-picker__clear-button',\n  openCalendarButton: 'wave-date-picker__open-calendar-button',\n  errorMessage: 'wave-date-picker__error-message',\n  surface: 'wave-date-picker__surface',\n  header: 'wave-date-picker__header',\n  previousMonthButton: 'wave-date-picker__previous-month-button',\n  heading: 'wave-date-picker__heading',\n  headingButton: 'wave-date-picker__heading-button',\n  nextMonthButton: 'wave-date-picker__next-month-button',\n  grid: 'wave-date-picker__grid',\n  weekday: 'wave-date-picker__weekday',\n  weekNumberHeader: 'wave-date-picker__week-number-header',\n  weekNumber: 'wave-date-picker__week-number',\n  day: 'wave-date-picker__day',\n  markedDot: 'wave-date-picker__marked-dot',\n  month: 'wave-date-picker__month',\n  year: 'wave-date-picker__year',\n  footer: 'wave-date-picker__footer',\n  todayButton: 'wave-date-picker__today-button',\n  closeButton: 'wave-date-picker__close-button',\n} as const;\n\n/**\n * Calendar: `root` on the `role=\"group\"` element; `header` on the row of the navigation buttons\n * and the heading; `previousButton` and `nextButton` on the navigation buttons (by a month, a\n * year or a decade); `heading` on the month, year or decade text (a `<div>`, which labels the\n * grid); `headingButton` on the heading's button to the month and year views; `grid` on the\n * `role=\"grid\"` element of every view; `weekday` on each weekday header cell; `weekNumberHeader`\n * on the header cell of the week-number column and `weekNumber` on each week's row header\n * (`showWeekNumbers`); `day`, `month` and `year` on each day, month and year button; `markedDot`\n * on the dot inside a marked day's button; `footer` on the row of the footer buttons, with\n * `todayButton` on \"Go to today\" (`showGoToToday`).\n */\nexport const calendarClassNames = {\n  root: 'wave-calendar',\n  header: 'wave-calendar__header',\n  previousButton: 'wave-calendar__previous-button',\n  heading: 'wave-calendar__heading',\n  headingButton: 'wave-calendar__heading-button',\n  nextButton: 'wave-calendar__next-button',\n  grid: 'wave-calendar__grid',\n  weekday: 'wave-calendar__weekday',\n  weekNumberHeader: 'wave-calendar__week-number-header',\n  weekNumber: 'wave-calendar__week-number',\n  day: 'wave-calendar__day',\n  markedDot: 'wave-calendar__marked-dot',\n  month: 'wave-calendar__month',\n  year: 'wave-calendar__year',\n  footer: 'wave-calendar__footer',\n  todayButton: 'wave-calendar__today-button',\n} as const;\n\n/**\n * SwatchPicker: `root` on the picker element (`role=\"radiogroup\"`, or `role=\"grid\"` in the grid\n * layout); `swatch` on the button of every swatch in it (`items`, and the `ColorSwatch`,\n * `ImageSwatch` and `EmptySwatch` children, next to their own classes).\n */\nexport const swatchPickerClassNames = {\n  root: 'wave-swatch-picker',\n  swatch: 'wave-swatch-picker__swatch',\n} as const;\n\n/**\n * SwatchPicker.Row: `root` on the row element (`role=\"row\"` in the grid layout), also on the rows\n * the picker adds around `items` and loose swatches.\n */\nexport const swatchPickerRowClassNames = { root: 'wave-swatch-picker-row' } as const;\n\n/**\n * ColorSwatch (also the swatches of SwatchPicker's `items`; carries SwatchPicker's `swatch`):\n * `root` on the swatch `<button>`, where `className` lands in every layout; `icon` on the span of\n * your `icon`.\n */\nexport const colorSwatchClassNames = {\n  root: 'wave-color-swatch',\n  icon: 'wave-color-swatch__icon',\n} as const;\n\n/** ImageSwatch (carries SwatchPicker's `swatch`): `root` on the swatch `<button>`. */\nexport const imageSwatchClassNames = { root: 'wave-image-swatch' } as const;\n\n/**\n * EmptySwatch (carries SwatchPicker's `swatch`): `root` on the `<button>`; `icon` on the span of\n * its glyph (the plus, or your `icon`).\n */\nexport const emptySwatchClassNames = {\n  root: 'wave-empty-swatch',\n  icon: 'wave-empty-swatch__icon',\n} as const;\n\n/**\n * ColorPicker: `root` on the `role=\"group\"` element; `opacityLabel` on the caption and\n * `opacityValue` on the percentage of the default layout's opacity row. Its color area and\n * sliders carry their own classes (ColorArea, ColorSlider, AlphaSlider).\n */\nexport const colorPickerClassNames = {\n  root: 'wave-color-picker',\n  opacityLabel: 'wave-color-picker__opacity-label',\n  opacityValue: 'wave-color-picker__opacity-value',\n} as const;\n\n/**\n * ColorPicker.HexField: `root` on the field's outer element; `label` on the caption; `input` on\n * the hex `<input>`; `errorMessage` on the error text.\n */\nexport const colorPickerHexFieldClassNames = {\n  root: 'wave-color-picker-hex-field',\n  label: 'wave-color-picker-hex-field__label',\n  input: 'wave-color-picker-hex-field__input',\n  errorMessage: 'wave-color-picker-hex-field__error-message',\n} as const;\n\n/**\n * ColorPicker.Swatches (also carries SwatchPicker's root): `root` on the SwatchPicker it renders;\n * its swatches keep SwatchPicker's own `swatch` class.\n */\nexport const colorPickerSwatchesClassNames = { root: 'wave-color-picker-swatches' } as const;\n\n/** ColorPicker.Preview: `root` on the preview swatch. */\nexport const colorPickerPreviewClassNames = { root: 'wave-color-picker-preview' } as const;\n\n/**\n * ColorArea: `root` on the `role=\"group\"` element; `field` on the gradient layer; `thumb` on the\n * thumb (the two range inputs are not parts).\n */\nexport const colorAreaClassNames = {\n  root: 'wave-color-area',\n  field: 'wave-color-area__field',\n  thumb: 'wave-color-area__thumb',\n} as const;\n\n/** ColorSlider: `root` on the slider element; `rail` on the gradient rail; `thumb` on the thumb. */\nexport const colorSliderClassNames = {\n  root: 'wave-color-slider',\n  rail: 'wave-color-slider__rail',\n  thumb: 'wave-color-slider__thumb',\n} as const;\n\n/** AlphaSlider: `root` on the slider element; `rail` on the rail; `thumb` on the thumb. */\nexport const alphaSliderClassNames = {\n  root: 'wave-alpha-slider',\n  rail: 'wave-alpha-slider__rail',\n  thumb: 'wave-alpha-slider__thumb',\n} as const;\n\n/**\n * Rating: `root` on the `role=\"radiogroup\"` element; `star` on each star (a RatingItem: the\n * `role=\"radio\"` button, or with `step={0.5}` the span around its two radios); `icon` on each\n * star glyph (the default `<svg>`, or the span of your `iconFilled`/`iconOutline`).\n */\nexport const ratingClassNames = {\n  root: 'wave-rating',\n  star: 'wave-rating__star',\n  icon: 'wave-rating__icon',\n} as const;\n\n/**\n * RatingItem (also Rating.Item, RatingDisplay.Item and RatingDisplayItem): `root` on the star\n * element (the `role=\"radio\"` button in a Rating, the span around its two radios with\n * `step={0.5}`, the star span in a RatingDisplay), which also carries its rating's `star` class;\n * `icon` on each glyph it draws (the default `<svg>`, or the span of an `iconFilled`/`iconOutline`\n * glyph), which also carries its rating's `icon` class.\n */\nexport const ratingItemClassNames = {\n  root: 'wave-rating-item',\n  icon: 'wave-rating-item__icon',\n} as const;\n\n/**\n * RatingDisplay: `root` on the `role=\"img\"` element; `star` on each star span (a RatingItem, and\n * the one star of `compact`); `icon` on the star glyphs; `value` on the value span; `count` on the\n * count span.\n */\nexport const ratingDisplayClassNames = {\n  root: 'wave-rating-display',\n  star: 'wave-rating-display__star',\n  icon: 'wave-rating-display__icon',\n  value: 'wave-rating-display__value',\n  count: 'wave-rating-display__count',\n} as const;\n\n// ---------------------------------------------------------------------------\n// layout\n// ---------------------------------------------------------------------------\n\n/**\n * Card: `root` on the rendered element (your `as`, default `<div>`); `checkbox` on the built-in\n * selection checkbox; `checkmark` on the corner check `<svg>` of a selected card.\n */\nexport const cardClassNames = {\n  root: 'wave-card',\n  checkbox: 'wave-card__checkbox',\n  checkmark: 'wave-card__checkmark',\n  floatingAction: 'wave-card__floating-action',\n} as const;\n\n/** Card.Header: `root` on the rendered element; `title` on the title; `subtitle` on the subtitle. */\nexport const cardHeaderClassNames = {\n  root: 'wave-card-header',\n  image: 'wave-card-header__image',\n  text: 'wave-card-header__text',\n  title: 'wave-card-header__title',\n  subtitle: 'wave-card-header__subtitle',\n  action: 'wave-card-header__action',\n} as const;\n\n/** Card.Preview: `root` on the rendered element; `logo` on the logo over its bottom start corner. */\nexport const cardPreviewClassNames = {\n  root: 'wave-card-preview',\n  logo: 'wave-card-preview__logo',\n} as const;\n\n/** Card.Body: `root` on the rendered element. */\nexport const cardBodyClassNames = { root: 'wave-card-body' } as const;\n\n/** Card.Footer: `root` on the rendered element. */\nexport const cardFooterClassNames = { root: 'wave-card-footer' } as const;\n\n/** Accordion: `root` on the accordion element. */\nexport const accordionClassNames = { root: 'wave-accordion' } as const;\n\n/** Accordion.Item: `root` on the item element. */\nexport const accordionItemClassNames = { root: 'wave-accordion-item' } as const;\n\n/**\n * Accordion.Trigger: `root` on the `<button>`; `heading` on the heading element around it (`<h1>`\n * to `<h6>`, from `headingLevel`); `expandIcon` on the chevron `<svg>`.\n */\nexport const accordionTriggerClassNames = {\n  root: 'wave-accordion-trigger',\n  heading: 'wave-accordion-trigger__heading',\n  expandIcon: 'wave-accordion-trigger__expand-icon',\n} as const;\n\n/** Accordion.Panel: `root` on the `role=\"region\"` element. */\nexport const accordionPanelClassNames = { root: 'wave-accordion-panel' } as const;\n\n/** TabList: `root` on the `role=\"tablist\"` element. */\nexport const tabListClassNames = { root: 'wave-tab-list' } as const;\n\n/** TabList.Tab: `root` on the `role=\"tab\"` button. */\nexport const tabListTabClassNames = {\n  root: 'wave-tab-list-tab',\n  icon: 'wave-tab-list-tab__icon',\n} as const;\n\n/** TabList.Panel: `root` on the `role=\"tabpanel\"` element. */\nexport const tabListPanelClassNames = { root: 'wave-tab-list-panel' } as const;\n\n/** TabList.Panels: `root` on the element around the panels. */\nexport const tabListPanelsClassNames = { root: 'wave-tab-list-panels' } as const;\n\n/** Tree: `root` on the `role=\"tree\"` element. */\nexport const treeClassNames = { root: 'wave-tree' } as const;\n\n/**\n * Tree.Item: `root` on the `role=\"treeitem\"` element; `row` on its row; `expandIcon` on the\n * chevron (or your `expandIcon`); `indicator` on the checkbox of a multi-select tree or the radio\n * of a single-select one; `icon` on the icon span; `label` on the label span; `iconAfter` on the\n * icon after the label; `aside` on the aside content; `actions` on the row's actions toolbar;\n * `group` on the `role=\"group\"` element of its nested items.\n */\nexport const treeItemClassNames = {\n  root: 'wave-tree-item',\n  row: 'wave-tree-item__row',\n  expandIcon: 'wave-tree-item__expand-icon',\n  indicator: 'wave-tree-item__indicator',\n  icon: 'wave-tree-item__icon',\n  label: 'wave-tree-item__label',\n  iconAfter: 'wave-tree-item__icon-after',\n  aside: 'wave-tree-item__aside',\n  actions: 'wave-tree-item__actions',\n  group: 'wave-tree-item__group',\n} as const;\n\n/**\n * Tree.ItemPersonaLayout: `root` on the layout span; `media` on the picture; `main` on the name;\n * `description` on the description line.\n */\nexport const treeItemPersonaLayoutClassNames = {\n  root: 'wave-tree-item-persona-layout',\n  media: 'wave-tree-item-persona-layout__media',\n  main: 'wave-tree-item-persona-layout__main',\n  description: 'wave-tree-item-persona-layout__description',\n} as const;\n\n/**\n * Carousel: `root` on the `role=\"region\"` element; `autoPlayButton` on the pause and start\n * button; `viewport` on the clipping element around the track; `track` on the moving element\n * around the slides; `slide` on each slide wrapper;\n * `previousButton` and `nextButton` on the arrow buttons; `picker` on the `role=\"group\"` of\n * picker buttons; `pickerButton` on each of them; `pickerIndicator` on each button's dot.\n */\nexport const carouselClassNames = {\n  root: 'wave-carousel',\n  autoPlayButton: 'wave-carousel__auto-play-button',\n  viewport: 'wave-carousel__viewport',\n  track: 'wave-carousel__track',\n  slide: 'wave-carousel__slide',\n  previousButton: 'wave-carousel__previous-button',\n  nextButton: 'wave-carousel__next-button',\n  picker: 'wave-carousel__picker',\n  pickerButton: 'wave-carousel__picker-button',\n  pickerIndicator: 'wave-carousel__picker-indicator',\n} as const;\n\n/** Carousel.Item: `root` on the item element; `thumbnail` on the image in its picker button. */\nexport const carouselItemClassNames = {\n  root: 'wave-carousel-item',\n  thumbnail: 'wave-carousel-item__thumbnail',\n} as const;\n\n/** Carousel.Button: `root` on the button element. */\nexport const carouselButtonClassNames = { root: 'wave-carousel-button' } as const;\n\n/**\n * Overflow: `root` on the overflow element; `overflowButton` on the element around what\n * `overflowButton` renders.\n */\nexport const overflowClassNames = {\n  root: 'wave-overflow',\n  overflowButton: 'wave-overflow__overflow-button',\n} as const;\n\n/** Overflow.Item: `root` on the item element. */\nexport const overflowItemClassNames = { root: 'wave-overflow-item' } as const;\n\n/** Stack: `root` on the rendered element. */\nexport const stackClassNames = { root: 'wave-stack' } as const;\n\n/** Flex: `root` on the rendered element. */\nexport const flexClassNames = { root: 'wave-flex' } as const;\n\n/** Grid: `root` on the rendered element. */\nexport const gridClassNames = { root: 'wave-grid' } as const;\n\n// ---------------------------------------------------------------------------\n// navigation\n// ---------------------------------------------------------------------------\n\n/**\n * Breadcrumb: `root` on the `<nav>`; `list` on its `<ol>`; `listItem` on each `<li>`; `divider`\n * on each separator `<svg>`.\n */\nexport const breadcrumbClassNames = {\n  root: 'wave-breadcrumb',\n  list: 'wave-breadcrumb__list',\n  listItem: 'wave-breadcrumb__list-item',\n  divider: 'wave-breadcrumb__divider',\n} as const;\n\n/**\n * Breadcrumb.Item: `root` on the link, button or text span it renders (or your `asChild`\n * element); `icon` on the icon span.\n */\nexport const breadcrumbItemClassNames = {\n  root: 'wave-breadcrumb-item',\n  icon: 'wave-breadcrumb-item__icon',\n} as const;\n\n/** Menu: `root` on the `role=\"menu\"` element of a static menu (a popup menu has Menu.Popover's). */\nexport const menuClassNames = { root: 'wave-menu' } as const;\n\n/**\n * Menu.Item: `root` on the `role=\"menuitem\"` element; `checkmark` on the check column; `icon` on\n * the icon span; `content` on the label span; `shortcut` on the shortcut span;\n * `submenuIndicator` on the chevron `<svg>` of a submenu trigger.\n */\nexport const menuItemClassNames = {\n  root: 'wave-menu-item',\n  checkmark: 'wave-menu-item__checkmark',\n  icon: 'wave-menu-item__icon',\n  content: 'wave-menu-item__content',\n  shortcut: 'wave-menu-item__shortcut',\n  submenuIndicator: 'wave-menu-item__submenu-indicator',\n} as const;\n\n/**\n * Menu.ItemCheckbox (also carries Menu.Item's root and matching part classes): `root` on the\n * `role=\"menuitemcheckbox\"` element; `checkmark`, `icon`, `content` and `shortcut` as on\n * Menu.Item.\n */\nexport const menuItemCheckboxClassNames = {\n  root: 'wave-menu-item-checkbox',\n  checkmark: 'wave-menu-item-checkbox__checkmark',\n  icon: 'wave-menu-item-checkbox__icon',\n  content: 'wave-menu-item-checkbox__content',\n  shortcut: 'wave-menu-item-checkbox__shortcut',\n} as const;\n\n/**\n * Menu.ItemRadio (also carries Menu.Item's root and matching part classes): `root` on the\n * `role=\"menuitemradio\"` element; `checkmark`, `icon`, `content` and `shortcut` as on Menu.Item.\n */\nexport const menuItemRadioClassNames = {\n  root: 'wave-menu-item-radio',\n  checkmark: 'wave-menu-item-radio__checkmark',\n  icon: 'wave-menu-item-radio__icon',\n  content: 'wave-menu-item-radio__content',\n  shortcut: 'wave-menu-item-radio__shortcut',\n} as const;\n\n/**\n * Menu.ItemSwitch (also carries Menu.Item's root, `icon`, `content` and `shortcut` classes):\n * `root` on the `role=\"menuitemcheckbox\"` element; `icon`, `content` and `shortcut` as on\n * Menu.Item; `track` on the switch; `thumb` on its thumb.\n */\nexport const menuItemSwitchClassNames = {\n  root: 'wave-menu-item-switch',\n  icon: 'wave-menu-item-switch__icon',\n  content: 'wave-menu-item-switch__content',\n  shortcut: 'wave-menu-item-switch__shortcut',\n  track: 'wave-menu-item-switch__track',\n  thumb: 'wave-menu-item-switch__thumb',\n} as const;\n\n/**\n * Menu.ItemLink (also carries Menu.Item's root and matching part classes): `root` on the\n * `role=\"menuitem\"` link (`<a>`, or your `as`); `icon`, `content` and `shortcut` as on Menu.Item.\n */\nexport const menuItemLinkClassNames = {\n  root: 'wave-menu-item-link',\n  icon: 'wave-menu-item-link__icon',\n  content: 'wave-menu-item-link__content',\n  shortcut: 'wave-menu-item-link__shortcut',\n} as const;\n\n/** Menu.Divider: `root` on the `role=\"separator\"` element. */\nexport const menuDividerClassNames = { root: 'wave-menu-divider' } as const;\n\n/** Menu.Popover: `root` on the portaled `role=\"menu\"` element. */\nexport const menuPopoverClassNames = { root: 'wave-menu-popover' } as const;\n\n/** Menu.Group: `root` on the `role=\"group\"` element. */\nexport const menuGroupClassNames = { root: 'wave-menu-group' } as const;\n\n/** Menu.GroupHeader: `root` on the header element. */\nexport const menuGroupHeaderClassNames = { root: 'wave-menu-group-header' } as const;\n\n/** Menu.SplitGroup: `root` on the `role=\"group\"` element. */\nexport const menuSplitGroupClassNames = { root: 'wave-menu-split-group' } as const;\n\n/** Nav: `root` on the `<nav>`; `list` on its `<ul>`. */\nexport const navClassNames = {\n  root: 'wave-nav',\n  list: 'wave-nav__list',\n} as const;\n\n/**\n * Nav.Category: `root` on its `<li>`; `button` on the toggle button; `icon` on the icon span;\n * `label` on the label span; `expandIcon` on the chevron `<svg>`; `list` on the `<ul>` of its\n * sub-items.\n */\nexport const navCategoryClassNames = {\n  root: 'wave-nav-category',\n  button: 'wave-nav-category__button',\n  icon: 'wave-nav-category__icon',\n  label: 'wave-nav-category__label',\n  expandIcon: 'wave-nav-category__expand-icon',\n  list: 'wave-nav-category__list',\n} as const;\n\n/**\n * Nav.Item: `root` on the `<a>` (with `href`) or `<button>`; `listItem` on the `<li>` around it;\n * `icon` on the icon span; `content` on the label span; `actions` on the group of its `actions`.\n */\nexport const navItemClassNames = {\n  root: 'wave-nav-item',\n  listItem: 'wave-nav-item__list-item',\n  icon: 'wave-nav-item__icon',\n  content: 'wave-nav-item__content',\n  actions: 'wave-nav-item__actions',\n} as const;\n\n/**\n * Nav.SubItem: `root` on the `<a>` or `<button>`; `listItem` on the `<li>` around it; `actions` on\n * the group of its `actions`.\n */\nexport const navSubItemClassNames = {\n  root: 'wave-nav-sub-item',\n  listItem: 'wave-nav-sub-item__list-item',\n  actions: 'wave-nav-sub-item__actions',\n} as const;\n\n/** Nav.SectionHeader: `root` on the heading element; `listItem` on the list item around it. */\nexport const navSectionHeaderClassNames = {\n  root: 'wave-nav-section-header',\n  listItem: 'wave-nav-section-header__list-item',\n} as const;\n\n/** Nav.Divider: `root` on its list item (hidden from assistive technology). */\nexport const navDividerClassNames = { root: 'wave-nav-divider' } as const;\n\n/**\n * Nav.AppItem: `root` on the `<a>` (with `href`) or `<button>`; `listItem` on the list item around\n * it; `icon` on the icon span; `content` on the label span.\n */\nexport const navAppItemClassNames = {\n  root: 'wave-nav-app-item',\n  listItem: 'wave-nav-app-item__list-item',\n  icon: 'wave-nav-app-item__icon',\n  content: 'wave-nav-app-item__content',\n} as const;\n\n/**\n * Nav.AppItemStatic: `root` on the `<div>`; `listItem` on the list item around it; `icon` on the\n * icon span; `content` on the label span.\n */\nexport const navAppItemStaticClassNames = {\n  root: 'wave-nav-app-item-static',\n  listItem: 'wave-nav-app-item-static__list-item',\n  icon: 'wave-nav-app-item-static__icon',\n  content: 'wave-nav-app-item-static__content',\n} as const;\n\n/**\n * NavDrawer (a Drawer variant: it also carries Drawer's root, and its backdrop Drawer's backdrop\n * class): `root` on the panel (the portaled `role=\"dialog\"` element of an overlay drawer, the\n * panel element of an inline one); `backdrop` on the backdrop of a modal overlay; `nav` on the\n * navigation landmark that fills the panel.\n */\nexport const navDrawerClassNames = {\n  root: 'wave-nav-drawer',\n  backdrop: 'wave-nav-drawer__backdrop',\n  nav: 'wave-nav-drawer__nav',\n} as const;\n\n/** NavDrawer.Header: `root` on the header row. */\nexport const navDrawerHeaderClassNames = { root: 'wave-nav-drawer-header' } as const;\n\n/** NavDrawer.Body: `root` on the scrolling body; `list` on its list. */\nexport const navDrawerBodyClassNames = {\n  root: 'wave-nav-drawer-body',\n  list: 'wave-nav-drawer-body__list',\n} as const;\n\n/** NavDrawer.Footer: `root` on the footer; `list` on its list. */\nexport const navDrawerFooterClassNames = {\n  root: 'wave-nav-drawer-footer',\n  list: 'wave-nav-drawer-footer__list',\n} as const;\n\n/**\n * Hamburger (a Button variant: it also carries Button's root and icon classes): `root` on the\n * `<button>`; `icon` on the icon span.\n */\nexport const hamburgerClassNames = {\n  root: 'wave-hamburger',\n  icon: 'wave-hamburger__icon',\n} as const;\n\n/**\n * Pagination: `root` on the `<nav>`; `list` on its `<ol>`; `listItem` on each `<li>`;\n * `firstButton`, `previousButton`, `pageButton`, `nextButton` and `lastButton` on its buttons;\n * `ellipsis` on each \"…\" span.\n */\nexport const paginationClassNames = {\n  root: 'wave-pagination',\n  list: 'wave-pagination__list',\n  listItem: 'wave-pagination__list-item',\n  firstButton: 'wave-pagination__first-button',\n  previousButton: 'wave-pagination__previous-button',\n  pageButton: 'wave-pagination__page-button',\n  nextButton: 'wave-pagination__next-button',\n  lastButton: 'wave-pagination__last-button',\n  ellipsis: 'wave-pagination__ellipsis',\n} as const;\n\n/** Stepper: `root` on the `role=\"group\"` element; `list` on its `<ol>`. */\nexport const stepperClassNames = {\n  root: 'wave-stepper',\n  list: 'wave-stepper__list',\n} as const;\n\n/**\n * Stepper.Step: `root` on the step's element inside its `<li>`; `listItem` on the `<li>`; `button`\n * on the `role=\"button\"` element; `indicator` on the circle; `icon` on the `icon` slot inside it;\n * `label` on the label; `description` on the description; `connector` on the line to the next\n * step.\n */\nexport const stepperStepClassNames = {\n  root: 'wave-stepper-step',\n  listItem: 'wave-stepper-step__list-item',\n  button: 'wave-stepper-step__button',\n  indicator: 'wave-stepper-step__indicator',\n  icon: 'wave-stepper-step__icon',\n  label: 'wave-stepper-step__label',\n  description: 'wave-stepper-step__description',\n  connector: 'wave-stepper-step__connector',\n} as const;\n\n// ---------------------------------------------------------------------------\n// overlays\n// ---------------------------------------------------------------------------\n\n/**\n * Dialog.Content: `root` on the surface (`role=\"dialog\"` or `\"alertdialog\"`, also while kept\n * mounted); `backdrop` on the backdrop behind it; `positioner` on the element that centres the\n * surface (the backdrop's sibling); `titleActions` on the area of header buttons in the top end\n * corner; `titleAction` on the element of the `titleAction` slot; `closeButton` on the built-in\n * Close button (which also carries Button's root); `body` on the scrolling body. The heading of\n * its `title` prop carries Dialog.Title's class.\n */\nexport const dialogContentClassNames = {\n  root: 'wave-dialog-content',\n  backdrop: 'wave-dialog-content__backdrop',\n  positioner: 'wave-dialog-content__positioner',\n  titleActions: 'wave-dialog-content__title-actions',\n  titleAction: 'wave-dialog-content__title-action',\n  closeButton: 'wave-dialog-content__close-button',\n  body: 'wave-dialog-content__body',\n} as const;\n\n/** Dialog.Title: `root` on the `<h2>`; `action` on the element of its `action` slot. */\nexport const dialogTitleClassNames = {\n  root: 'wave-dialog-title',\n  action: 'wave-dialog-title__action',\n} as const;\n\n/** Dialog.Footer: `root` on the footer element. */\nexport const dialogFooterClassNames = { root: 'wave-dialog-footer' } as const;\n\n/**\n * Popover.Content: `root` on the portaled `role=\"dialog\"` surface; `beak` on the arrow; `title`\n * on the `<h2>` of `title`.\n */\nexport const popoverContentClassNames = {\n  root: 'wave-popover-content',\n  beak: 'wave-popover-content__beak',\n  title: 'wave-popover-content__title',\n} as const;\n\n/** Tooltip: `root` on the span around your child; `content` on the portaled tooltip. */\nexport const tooltipClassNames = {\n  root: 'wave-tooltip',\n  content: 'wave-tooltip__content',\n} as const;\n\n/**\n * Drawer: `root` on the panel (the portaled `role=\"dialog\"` element of an overlay drawer, while it\n * is open or kept mounted, or the `<aside>` of an inline one); `backdrop` on the backdrop of a\n * modal or alert overlay drawer; `header` on the built-in header row (absent with a\n * Drawer.Header); `titleAction` on the element of the `titleAction` slot in that row;\n * `closeButton` on every built-in Close button (which also carries Button's root), in the built-in\n * header and in each Drawer.HeaderTitle; `body` on the scrolling body. The heading of its `title`\n * prop carries Drawer.Title's class. The panel carries `data-type`, `data-position` and\n * `data-size`; the body, the header and the footer carry `data-scroll-state`.\n */\nexport const drawerClassNames = {\n  root: 'wave-drawer',\n  backdrop: 'wave-drawer__backdrop',\n  header: 'wave-drawer__header',\n  titleAction: 'wave-drawer__title-action',\n  closeButton: 'wave-drawer__close-button',\n  body: 'wave-drawer__body',\n} as const;\n\n/**\n * Drawer.Title: `root` on its heading (an `<h2>`, or the level `headingLevel` picks); also on the\n * heading of Drawer's `title` prop.\n */\nexport const drawerTitleClassNames = { root: 'wave-drawer-title' } as const;\n\n/** Drawer.Header: `root` on the header element (it replaces the built-in header row). */\nexport const drawerHeaderClassNames = { root: 'wave-drawer-header' } as const;\n\n/**\n * Drawer.HeaderTitle: `root` on the title row; `heading` on the heading that names the drawer;\n * `action` on the element of the `action` slot. Its Close button carries Drawer's `closeButton`.\n */\nexport const drawerHeaderTitleClassNames = {\n  root: 'wave-drawer-header-title',\n  heading: 'wave-drawer-header-title__heading',\n  action: 'wave-drawer-header-title__action',\n} as const;\n\n/** Drawer.HeaderNavigation: `root` on the navigation element. */\nexport const drawerHeaderNavigationClassNames = { root: 'wave-drawer-header-navigation' } as const;\n\n/**\n * Drawer.Body: `root` on the scrolling body while a Drawer.Body gives it its props (the body also\n * carries Drawer's `body`), or on the element of a Drawer.Body rendered inside the body.\n */\nexport const drawerBodyClassNames = { root: 'wave-drawer-body' } as const;\n\n/** Drawer.Footer: `root` on the footer element. */\nexport const drawerFooterClassNames = { root: 'wave-drawer-footer' } as const;\n\n/**\n * TeachingPopover: `root` on the `role=\"dialog\"` surface; `beak` on the arrow; `closeButton`,\n * `backButton` and `nextButton` on its buttons (which also carry Button's root); `title` on the\n * `<h3>`; `body` on the step body; `footer` on the bottom row; `dot` on each step dot.\n */\nexport const teachingPopoverClassNames = {\n  root: 'wave-teaching-popover',\n  beak: 'wave-teaching-popover__beak',\n  closeButton: 'wave-teaching-popover__close-button',\n  title: 'wave-teaching-popover__title',\n  body: 'wave-teaching-popover__body',\n  footer: 'wave-teaching-popover__footer',\n  dot: 'wave-teaching-popover__dot',\n  backButton: 'wave-teaching-popover__back-button',\n  nextButton: 'wave-teaching-popover__next-button',\n} as const;\n\n// ---------------------------------------------------------------------------\n// table\n// ---------------------------------------------------------------------------\n\n/** Table: `root` on the `<table>`; `container` on the scroll wrapper around it. */\nexport const tableClassNames = {\n  root: 'wave-table',\n  container: 'wave-table__container',\n} as const;\n\n/** Table.Header (and the deprecated Table.Head): `root` on the `<thead>`. */\nexport const tableHeaderClassNames = { root: 'wave-table-header' } as const;\n\n/** Table.HeaderCell (and the deprecated Table.HeadCell): `root` on the `<th>`. */\nexport const tableHeaderCellClassNames = { root: 'wave-table-header-cell' } as const;\n\n/** Table.Body: `root` on the `<tbody>`. */\nexport const tableBodyClassNames = { root: 'wave-table-body' } as const;\n\n/** Table.Row: `root` on the `<tr>`. */\nexport const tableRowClassNames = { root: 'wave-table-row' } as const;\n\n/** Table.Cell: `root` on the `<td>`. */\nexport const tableCellClassNames = { root: 'wave-table-cell' } as const;\n\n/** DataGrid: `root` on the grid element (`role=\"grid\"`); `container` on the wrapper around it. */\nexport const dataGridClassNames = {\n  root: 'wave-data-grid',\n  container: 'wave-data-grid__container',\n} as const;\n\n/**\n * DataGrid.Header: `root` on the `<thead>`; `selectionCell` on the selection column's cell of\n * each header row; `selectAllCheckbox` on its checkbox.\n */\nexport const dataGridHeaderClassNames = {\n  root: 'wave-data-grid-header',\n  selectionCell: 'wave-data-grid-header__selection-cell',\n  selectAllCheckbox: 'wave-data-grid-header__select-all-checkbox',\n} as const;\n\n/**\n * DataGrid.HeaderCell: `root` on the `<th>`; `button` on the sort button; `sortIcon` on its\n * direction `<svg>`.\n */\nexport const dataGridHeaderCellClassNames = {\n  root: 'wave-data-grid-header-cell',\n  button: 'wave-data-grid-header-cell__button',\n  sortIcon: 'wave-data-grid-header-cell__sort-icon',\n} as const;\n\n/** DataGrid.Body: `root` on the `<tbody>`. */\nexport const dataGridBodyClassNames = { root: 'wave-data-grid-body' } as const;\n\n/**\n * DataGrid.Row: `root` on the `<tr>`; `selectionCell` on its selection cell; `selectionControl`\n * on the checkbox or radio in it.\n */\nexport const dataGridRowClassNames = {\n  root: 'wave-data-grid-row',\n  selectionCell: 'wave-data-grid-row__selection-cell',\n  selectionControl: 'wave-data-grid-row__selection-control',\n} as const;\n\n/** DataGrid.Cell: `root` on the `role=\"gridcell\"` cell. */\nexport const dataGridCellClassNames = { root: 'wave-data-grid-cell' } as const;\n\n// ---------------------------------------------------------------------------\n// typography, provider, portal\n// ---------------------------------------------------------------------------\n\n/** Text: `root` on the rendered element (your `as`, default `<span>`). */\nexport const textClassNames = { root: 'wave-text' } as const;\n\n/** WaveProvider: `root` on the themed element (the existing `wave-root` scope class). */\nexport const waveProviderClassNames = { root: 'wave-root' } as const;\n\n/**\n * Portal: `root` on the portal wrapper (the existing `wave-portal` scope class; the wrapper also\n * takes your `className`).\n */\nexport const portalClassNames = { root: 'wave-portal' } as const;\n"],"mappings":"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"}
+{"version":3,"file":"classNames.cjs","names":["buttonClassNames","compoundButtonClassNames","toggleButtonClassNames","splitButtonClassNames","menuButtonClassNames","linkClassNames","toolbarClassNames","toolbarButtonClassNames","toolbarToggleButtonClassNames","toolbarRadioButtonClassNames","toolbarRadioGroupClassNames","toolbarGroupClassNames","toolbarDividerClassNames","avatarClassNames","avatarGroupClassNames","avatarGroupItemClassNames","avatarGroupPopoverClassNames","badgeClassNames","counterBadgeClassNames","presenceBadgeClassNames","tagClassNames","tagGroupClassNames","interactionTagClassNames","interactionTagPrimaryClassNames","interactionTagSecondaryClassNames","personaClassNames","dividerClassNames","infoButtonClassNames","infoLabelClassNames","imageClassNames","listClassNames","listItemClassNames","messageBarClassNames","messageBarTitleClassNames","messageBarActionsClassNames","progressBarClassNames","spinnerClassNames","skeletonClassNames","skeletonGroupClassNames","toastClassNames","toastTitleClassNames","toastBodyClassNames","toastFooterClassNames","toasterClassNames","inputClassNames","textareaClassNames","selectClassNames","fieldClassNames","labelClassNames","checkboxClassNames","radioGroupClassNames","radioGroupItemClassNames","switchClassNames","searchBoxClassNames","sliderClassNames","spinButtonClassNames","optionClassNames","optionGroupClassNames","listboxClassNames","listboxSurfaceClassNames","comboboxClassNames","dropdownClassNames","tagPickerClassNames","tagPickerControlClassNames","tagPickerGroupClassNames","tagPickerInputClassNames","tagPickerButtonClassNames","tagPickerListClassNames","tagPickerOptionClassNames","timePickerClassNames","datePickerClassNames","calendarClassNames","swatchPickerClassNames","swatchPickerRowClassNames","colorSwatchClassNames","imageSwatchClassNames","emptySwatchClassNames","colorPickerClassNames","colorPickerHexFieldClassNames","colorPickerSwatchesClassNames","colorPickerPreviewClassNames","colorAreaClassNames","colorSliderClassNames","alphaSliderClassNames","ratingClassNames","ratingItemClassNames","ratingDisplayClassNames","cardClassNames","cardHeaderClassNames","cardPreviewClassNames","cardBodyClassNames","cardFooterClassNames","accordionClassNames","accordionItemClassNames","accordionTriggerClassNames","accordionPanelClassNames","tabListClassNames","tabListTabClassNames","tabListPanelClassNames","tabListPanelsClassNames","treeClassNames","treeItemClassNames","treeItemPersonaLayoutClassNames","carouselClassNames","carouselItemClassNames","carouselButtonClassNames","overflowClassNames","overflowItemClassNames","overflowDividerClassNames","stackClassNames","flexClassNames","gridClassNames","breadcrumbClassNames","breadcrumbItemClassNames","menuClassNames","menuItemClassNames","menuItemCheckboxClassNames","menuItemRadioClassNames","menuItemSwitchClassNames","menuItemLinkClassNames","menuDividerClassNames","menuPopoverClassNames","menuGroupClassNames","menuGroupHeaderClassNames","menuSplitGroupClassNames","navClassNames","navCategoryClassNames","navItemClassNames","navSubItemClassNames","navSectionHeaderClassNames","navDividerClassNames","navAppItemClassNames","navAppItemStaticClassNames","navDrawerClassNames","navDrawerHeaderClassNames","navDrawerBodyClassNames","navDrawerFooterClassNames","hamburgerClassNames","paginationClassNames","stepperClassNames","stepperStepClassNames","dialogContentClassNames","dialogTitleClassNames","dialogFooterClassNames","popoverContentClassNames","tooltipClassNames","drawerClassNames","drawerTitleClassNames","drawerHeaderClassNames","drawerHeaderTitleClassNames","drawerHeaderNavigationClassNames","drawerBodyClassNames","drawerFooterClassNames","teachingPopoverClassNames","teachingPopoverSurfaceClassNames","teachingPopoverHeaderClassNames","teachingPopoverTitleClassNames","teachingPopoverBodyClassNames","teachingPopoverFooterClassNames","teachingPopoverCarouselClassNames","teachingPopoverCarouselNavClassNames","teachingPopoverCarouselPageCountClassNames","teachingPopoverCarouselFooterClassNames","tableClassNames","tableHeaderClassNames","tableHeaderCellClassNames","tableBodyClassNames","tableRowClassNames","tableCellClassNames","tableSelectionCellClassNames","tableCellLayoutClassNames","tableCellActionsClassNames","dataGridClassNames","dataGridHeaderClassNames","dataGridHeaderCellClassNames","dataGridBodyClassNames","dataGridRowClassNames","dataGridCellClassNames","dataGridSelectionCellClassNames","textClassNames","waveProviderClassNames","portalClassNames"],"sources":["../../src/lib/classNames.ts"],"sourcesContent":["/**\n * Stable class names of every public component and part. A root class sits on the element that\n * receives your `className`, and a part class on each element that a prop or slot fills or that\n * draws structure (an icon, a dismiss button, a track, a surface). Style them from your own CSS,\n * or build a typed selector from a constant (`` `.${buttonClassNames.icon}` ``). This module\n * imports nothing and holds string constants only, so a React Server Component can read it.\n *\n * - **Names.** A root is `wave-` plus the kebab-cased flat export name (`Button` → `wave-button`,\n *   `CardHeader` → `wave-card-header`); a part is the root, two underscores and the kebab-cased\n *   part key (`wave-button__icon`); a constant is the camel-cased flat name plus `ClassNames`\n *   (`cardHeaderClassNames`). WaveProvider and Portal keep their existing scope classes,\n *   `wave-root` and `wave-portal`.\n * - **Placement.** A component puts its root class first in its class list, so your `className`\n *   still wins a conflict; a slot part keeps its class when a slot object renders another element\n *   (`icon={{ as: 'img', … }}`).\n * - **Variants and nesting.** A variant also carries the classes of the component it is built on\n *   (ToggleButton's root is `wave-button wave-toggle-button`, its icon\n *   `wave-button__icon wave-toggle-button__icon`), and a public component rendered inside another\n *   also carries the parent's part class (SplitButton's halves are `wave-button` plus\n *   `wave-split-button__primary-action-button` or `wave-split-button__menu-button`).\n * - **No state classes.** State lives in `data-*` attributes and ARIA (`[data-pressed]`,\n *   `[data-disabled]`, `[aria-expanded='true']`).\n * - **Stability.** Before 1.0 no class is removed; a renamed part keeps its old class next to the\n *   new one until then.\n *\n * Not to be confused with the internal `buttonClassName()` helper of `buttonStyles.ts` (one\n * letter shorter), which returns Button's utility classes.\n */\n\n// ---------------------------------------------------------------------------\n// button\n// ---------------------------------------------------------------------------\n\n/**\n * Button: `root` on the rendered element (`<button>`, or your `as`); `icon` on the icon box.\n * Style them from your own CSS (`.wave-button`, `.wave-button__icon`). State is not a class: use\n * the `data-*` attributes (`[data-pressed]`, `[data-disabled]`).\n */\nexport const buttonClassNames = {\n  root: 'wave-button',\n  icon: 'wave-button__icon',\n} as const;\n\n/**\n * CompoundButton (also carries Button's root and icon classes): `root` on the rendered element;\n * `icon` on the icon box (Button's icon span in the icon-only layout); `contentContainer` on the\n * text column; `primaryText` on the main line; `secondaryText` on the second line.\n */\nexport const compoundButtonClassNames = {\n  root: 'wave-compound-button',\n  icon: 'wave-compound-button__icon',\n  contentContainer: 'wave-compound-button__content-container',\n  primaryText: 'wave-compound-button__primary-text',\n  secondaryText: 'wave-compound-button__secondary-text',\n} as const;\n\n/**\n * ToggleButton (also carries Button's root and icon classes): `root` on the `<button>`; `icon` on\n * Button's icon span.\n */\nexport const toggleButtonClassNames = {\n  root: 'wave-toggle-button',\n  icon: 'wave-toggle-button__icon',\n} as const;\n\n/**\n * SplitButton: `root` on the `role=\"group\"` element; `primaryActionButton` and `menuButton` on its\n * two Buttons (which also carry Button's root); `icon` on the primary half's icon span and\n * `menuIcon` on the menu half's (both also carry Button's icon class).\n */\nexport const splitButtonClassNames = {\n  root: 'wave-split-button',\n  primaryActionButton: 'wave-split-button__primary-action-button',\n  menuButton: 'wave-split-button__menu-button',\n  icon: 'wave-split-button__icon',\n  menuIcon: 'wave-split-button__menu-icon',\n} as const;\n\n/**\n * MenuButton (also carries Button's root and icon classes): `root` on the `<button>`; `icon` on\n * Button's icon span; `menuIcon` on the default chevron `<svg>`, or on the span of your\n * `menuIcon`.\n */\nexport const menuButtonClassNames = {\n  root: 'wave-menu-button',\n  icon: 'wave-menu-button__icon',\n  menuIcon: 'wave-menu-button__menu-icon',\n} as const;\n\n/** Link: `root` on the rendered element (`<a>`, or your `as`). */\nexport const linkClassNames = { root: 'wave-link' } as const;\n\n/** Toolbar: `root` on the `role=\"toolbar\"` element (your `as`, default `<div>`). */\nexport const toolbarClassNames = { root: 'wave-toolbar' } as const;\n\n/**\n * Toolbar.Button (also carries Button's root and icon classes): `root` on the rendered element;\n * `icon` on Button's icon span (the icon box of `vertical`).\n */\nexport const toolbarButtonClassNames = {\n  root: 'wave-toolbar-button',\n  icon: 'wave-toolbar-button__icon',\n} as const;\n\n/**\n * Toolbar.ToggleButton (also carries the root and icon classes of Button and ToggleButton):\n * `root` on the `<button>`; `icon` on the icon span.\n */\nexport const toolbarToggleButtonClassNames = {\n  root: 'wave-toolbar-toggle-button',\n  icon: 'wave-toolbar-toggle-button__icon',\n} as const;\n\n/**\n * Toolbar.RadioButton (also carries the root and icon classes of Button and ToggleButton):\n * `root` on the `role=\"radio\"` button; `icon` on the icon span.\n */\nexport const toolbarRadioButtonClassNames = {\n  root: 'wave-toolbar-radio-button',\n  icon: 'wave-toolbar-radio-button__icon',\n} as const;\n\n/** Toolbar.RadioGroup: `root` on the `role=\"radiogroup\"` element. */\nexport const toolbarRadioGroupClassNames = { root: 'wave-toolbar-radio-group' } as const;\n\n/** Toolbar.Group: `root` on the group element. */\nexport const toolbarGroupClassNames = { root: 'wave-toolbar-group' } as const;\n\n/** Toolbar.Divider: `root` on the `role=\"separator\"` element. */\nexport const toolbarDividerClassNames = { root: 'wave-toolbar-divider' } as const;\n\n// ---------------------------------------------------------------------------\n// data-display\n// ---------------------------------------------------------------------------\n\n/**\n * Avatar: `root` on the avatar span (with `badge`, on the outer wrapper); `visual` on the circle\n * (the root without `badge`, the inner span with it); `image` on the `<img>` (or the element of\n * your `image` slot); `icon` on the `icon` slot, else on the default person `<svg>`; `initials`\n * on the initials span; `badge` on the `badge` slot.\n */\nexport const avatarClassNames = {\n  root: 'wave-avatar',\n  visual: 'wave-avatar__visual',\n  image: 'wave-avatar__image',\n  icon: 'wave-avatar__icon',\n  initials: 'wave-avatar__initials',\n  badge: 'wave-avatar__badge',\n} as const;\n\n/**\n * AvatarGroup: `root` on the `role=\"group\"` element; `item` on the wrapper around each shown\n * member; `overflowButton` on the \"+N\" button; `surface` on its popup; `list` on the popup's\n * `<ul>`; `listItem` on each of its `<li>`.\n */\nexport const avatarGroupClassNames = {\n  root: 'wave-avatar-group',\n  item: 'wave-avatar-group__item',\n  overflowButton: 'wave-avatar-group__overflow-button',\n  pie: 'wave-avatar-group__pie',\n  surface: 'wave-avatar-group__surface',\n  list: 'wave-avatar-group__list',\n  listItem: 'wave-avatar-group__list-item',\n} as const;\n\n/**\n * AvatarGroup.Item: `root` on the avatar it renders in the group, and on the row (avatar and name)\n * it renders in the overflow list; `name` on the name text of that row.\n */\nexport const avatarGroupItemClassNames = {\n  root: 'wave-avatar-group-item',\n  name: 'wave-avatar-group-item__name',\n} as const;\n\n/** AvatarGroup.Popover: `root` on the overflow button (which also carries the group's button class). */\nexport const avatarGroupPopoverClassNames = { root: 'wave-avatar-group-popover' } as const;\n\n/** Badge: `root` on the badge span. */\nexport const badgeClassNames = { root: 'wave-badge' } as const;\n\n/**\n * CounterBadge (also carries Badge's root): `root` on the badge span (a count it does not show\n * renders no element).\n */\nexport const counterBadgeClassNames = { root: 'wave-counter-badge' } as const;\n\n/** PresenceBadge: `root` on the `role=\"img\"` span; `icon` on the status glyph `<svg>`. */\nexport const presenceBadgeClassNames = {\n  root: 'wave-presence-badge',\n  icon: 'wave-presence-badge__icon',\n} as const;\n\n/**\n * Tag: `root` on the rendered element (your `as`, default `<span>`); `media` on the element of the\n * media slot; `icon` on the icon box; `primaryText` on the content span; `secondaryText` on the\n * second line of text; `dismissButton` on the Dismiss button; `dismissIcon` on the icon inside it\n * (what `dismissIcon` renders, a merged Button's icon span, else the default `<svg>`).\n */\nexport const tagClassNames = {\n  root: 'wave-tag',\n  media: 'wave-tag__media',\n  icon: 'wave-tag__icon',\n  primaryText: 'wave-tag__primary-text',\n  secondaryText: 'wave-tag__secondary-text',\n  dismissButton: 'wave-tag__dismiss-button',\n  dismissIcon: 'wave-tag__dismiss-icon',\n} as const;\n\n/** TagGroup: `root` on the group element (the toolbar or the list). */\nexport const tagGroupClassNames = { root: 'wave-tag-group' } as const;\n\n/** InteractionTag: `root` on the element that holds its two buttons. */\nexport const interactionTagClassNames = { root: 'wave-interaction-tag' } as const;\n\n/**\n * InteractionTag.Primary: `root` on its button; `media`, `icon`, `primaryText` and\n * `secondaryText` on the slot elements.\n */\nexport const interactionTagPrimaryClassNames = {\n  root: 'wave-interaction-tag-primary',\n  media: 'wave-interaction-tag-primary__media',\n  icon: 'wave-interaction-tag-primary__icon',\n  primaryText: 'wave-interaction-tag-primary__primary-text',\n  secondaryText: 'wave-interaction-tag-primary__secondary-text',\n} as const;\n\n/**\n * InteractionTag.Secondary: `root` on its button; `dismissIcon` on the glyph inside it (the\n * default glyph, or the element that wraps the children).\n */\nexport const interactionTagSecondaryClassNames = {\n  root: 'wave-interaction-tag-secondary',\n  dismissIcon: 'wave-interaction-tag-secondary__dismiss-icon',\n} as const;\n\n/**\n * Persona: `root` on the persona element; `avatar` on the built-in Avatar (which also carries\n * Avatar's root and `visual` classes) or on your `avatar` slot; `badge` on the element that\n * places the badge; `primaryText` on the name; `secondaryText` on the second line.\n */\nexport const personaClassNames = {\n  root: 'wave-persona',\n  avatar: 'wave-persona__avatar',\n  badge: 'wave-persona__badge',\n  primaryText: 'wave-persona__primary-text',\n  secondaryText: 'wave-persona__secondary-text',\n  tertiaryText: 'wave-persona__tertiary-text',\n  quaternaryText: 'wave-persona__quaternary-text',\n} as const;\n\n/**\n * Divider: `root` on the `<hr>` of a plain horizontal divider, else on the `role=\"separator\"`\n * element (or your `as`); `line` on each of the two line elements of a labelled divider; `label`\n * on its label span.\n */\nexport const dividerClassNames = {\n  root: 'wave-divider',\n  line: 'wave-divider__line',\n  label: 'wave-divider__label',\n} as const;\n\n/**\n * InfoButton: `root` on the `<button>`; `info` on the `role=\"note\"` popup that shows your `info`\n * (Fluent's `info` slot, the popover surface); `beak` on its arrow.\n */\nexport const infoButtonClassNames = {\n  root: 'wave-info-button',\n  info: 'wave-info-button__info',\n  beak: 'wave-info-button__beak',\n} as const;\n\n/**\n * InfoLabel: `root` on the outer span; `label` on its Label (which also carries Label's root);\n * `infoButton` on its InfoButton (which also carries InfoButton's root); `info` on the popup, the\n * InfoButton's note (which also carries InfoButton's `info`).\n */\nexport const infoLabelClassNames = {\n  root: 'wave-info-label',\n  label: 'wave-info-label__label',\n  infoButton: 'wave-info-label__info-button',\n  info: 'wave-info-label__info',\n} as const;\n\n/** Image: `root` on the `<img>`. */\nexport const imageClassNames = { root: 'wave-image' } as const;\n\n/** List: `root` on the `<ul>` (the `role=\"grid\"` element of a selectable list with actions). */\nexport const listClassNames = { root: 'wave-list' } as const;\n\n/**\n * List.Item: `root` on the `<li>` (the `role=\"row\"` element of a grid list); `content` on the\n * content element; `action` on the action cell; `checkmark` on the check mark element of an item\n * of a selectable list (the List's `checkmark`, or the item's own).\n */\nexport const listItemClassNames = {\n  root: 'wave-list-item',\n  content: 'wave-list-item__content',\n  action: 'wave-list-item__action',\n  checkmark: 'wave-list-item__checkmark',\n} as const;\n\n// ---------------------------------------------------------------------------\n// feedback\n// ---------------------------------------------------------------------------\n\n/**\n * MessageBar: `root` on the bar; `icon` on the status icon span; `body` on the text column (it\n * holds `MessageBar.Title`); `dismissButton` on the Dismiss button; `dismissIcon` on the icon\n * inside it (what `dismiss` renders, a merged Button's icon span, else the default `<svg>`).\n */\nexport const messageBarClassNames = {\n  root: 'wave-message-bar',\n  icon: 'wave-message-bar__icon',\n  body: 'wave-message-bar__body',\n  dismissButton: 'wave-message-bar__dismiss-button',\n  dismissIcon: 'wave-message-bar__dismiss-icon',\n} as const;\n\n/** MessageBar.Title: `root` on the title span. */\nexport const messageBarTitleClassNames = { root: 'wave-message-bar-title' } as const;\n\n/** MessageBar.Actions: `root` on the element that holds the actions. */\nexport const messageBarActionsClassNames = { root: 'wave-message-bar-actions' } as const;\n\n/**\n * ProgressBar: `root` on the `role=\"progressbar\"` element (the track); `bar` on the fill; `label`\n * on the label of `showLabel` (a sibling of the root).\n */\nexport const progressBarClassNames = {\n  root: 'wave-progress-bar',\n  bar: 'wave-progress-bar__bar',\n  label: 'wave-progress-bar__label',\n} as const;\n\n/**\n * Spinner: `root` on the outer span; `spinner` on the ring; `label` on the label span (also while\n * only screen readers get it, without `labelVisible`).\n */\nexport const spinnerClassNames = {\n  root: 'wave-spinner',\n  spinner: 'wave-spinner__spinner',\n  label: 'wave-spinner__label',\n} as const;\n\n/** Skeleton: `root` on the placeholder element. */\nexport const skeletonClassNames = { root: 'wave-skeleton' } as const;\n\n/** Skeleton.Group: `root` on the group element. */\nexport const skeletonGroupClassNames = { root: 'wave-skeleton-group' } as const;\n\n/**\n * Toast: `root` on the toast; `icon` on the status icon span (or your `icon` slot); `content` on\n * the text column that holds the title, body and footer; `dismissButton` on the Dismiss button.\n */\nexport const toastClassNames = {\n  root: 'wave-toast',\n  icon: 'wave-toast__icon',\n  content: 'wave-toast__content',\n  dismissButton: 'wave-toast__dismiss-button',\n} as const;\n\n/**\n * Toast.Title: `root` on the title row (also the one the `title` prop renders); `label` on the\n * title text, which names the toast; `action` on the `action` slot at the row's end.\n */\nexport const toastTitleClassNames = {\n  root: 'wave-toast-title',\n  label: 'wave-toast-title__label',\n  action: 'wave-toast-title__action',\n} as const;\n\n/**\n * Toast.Body: `root` on the body element (also the one plain children render); `subtitle` on the\n * `subtitle` line inside it.\n */\nexport const toastBodyClassNames = {\n  root: 'wave-toast-body',\n  subtitle: 'wave-toast-body__subtitle',\n} as const;\n\n/** Toast.Footer: `root` on the row of actions. */\nexport const toastFooterClassNames = { root: 'wave-toast-footer' } as const;\n\n/**\n * Toaster: `root` on the portaled toast region; `toast` on the `role=\"group\"` container the\n * Toaster renders around each toast.\n */\nexport const toasterClassNames = {\n  root: 'wave-toaster',\n  toast: 'wave-toaster__toast',\n} as const;\n\n// ---------------------------------------------------------------------------\n// input\n// ---------------------------------------------------------------------------\n\n/**\n * Input: `root` on the `<input>`, or, with `contentBefore` or `contentAfter` content, on the\n * wrapper that draws the field; `input` on the `<input>` (also when it is the root);\n * `contentBefore` and `contentAfter` on the slot spans; `errorMessage` on the `role=\"alert\"`\n * message after the control.\n */\nexport const inputClassNames = {\n  root: 'wave-input',\n  input: 'wave-input__input',\n  contentBefore: 'wave-input__content-before',\n  contentAfter: 'wave-input__content-after',\n  errorMessage: 'wave-input__error-message',\n} as const;\n\n/** Textarea: `root` on the `<textarea>`; `errorMessage` on the message after it, as Input's. */\nexport const textareaClassNames = {\n  root: 'wave-textarea',\n  errorMessage: 'wave-textarea__error-message',\n} as const;\n\n/** Select: `root` on the `<select>`; `errorMessage` on the message after it, as Input's. */\nexport const selectClassNames = {\n  root: 'wave-select',\n  errorMessage: 'wave-select__error-message',\n} as const;\n\n/**\n * Field: `root` on the field element; `label` on the `<label>`; `required` on the asterisk;\n * `validationMessage` on the message; `validationMessageIcon` on its icon; `hint` on the hint.\n */\nexport const fieldClassNames = {\n  root: 'wave-field',\n  label: 'wave-field__label',\n  required: 'wave-field__required',\n  validationMessage: 'wave-field__validation-message',\n  validationMessageIcon: 'wave-field__validation-message-icon',\n  hint: 'wave-field__hint',\n} as const;\n\n/** Label: `root` on the `<label>`; `required` on the asterisk. */\nexport const labelClassNames = {\n  root: 'wave-label',\n  required: 'wave-label__required',\n} as const;\n\n/**\n * Checkbox: `root` on the `<label>`; `indicator` on the `role=\"checkbox\"` button (the box);\n * `label` on the label text.\n */\nexport const checkboxClassNames = {\n  root: 'wave-checkbox',\n  indicator: 'wave-checkbox__indicator',\n  label: 'wave-checkbox__label',\n} as const;\n\n/** RadioGroup: `root` on the `role=\"radiogroup\"` element. */\nexport const radioGroupClassNames = { root: 'wave-radio-group' } as const;\n\n/**\n * RadioGroup.Item: `root` on the `<label>` (where `className` lands; `ref` and the other props go\n * to the radio); `indicator` on the `role=\"radio\"` button; `label` on the label text.\n */\nexport const radioGroupItemClassNames = {\n  root: 'wave-radio-group-item',\n  indicator: 'wave-radio-group-item__indicator',\n  label: 'wave-radio-group-item__label',\n} as const;\n\n/**\n * Switch: `root` on the `<label>`; `track` on the `role=\"switch\"` button; `thumb` on its thumb;\n * `label` on the label text.\n */\nexport const switchClassNames = {\n  root: 'wave-switch',\n  track: 'wave-switch__track',\n  thumb: 'wave-switch__thumb',\n  label: 'wave-switch__label',\n} as const;\n\n/**\n * SearchBox: `root` on the element that draws the field; `contentBefore` on the span that holds\n * the search icon or your slot; `input` on the `<input type=\"search\">`; `contentAfter` on the span\n * that holds your slot; `dismissButton` on the clear button; `dismissIcon` on the icon inside it\n * (what `dismiss` renders, a merged Button's icon span, else the default `<svg>`).\n */\nexport const searchBoxClassNames = {\n  root: 'wave-search-box',\n  contentBefore: 'wave-search-box__content-before',\n  input: 'wave-search-box__input',\n  contentAfter: 'wave-search-box__content-after',\n  dismissButton: 'wave-search-box__dismiss-button',\n  dismissIcon: 'wave-search-box__dismiss-icon',\n} as const;\n\n/** Slider: `root` on the `<input type=\"range\">` (its rail and thumb are pseudo-elements). */\nexport const sliderClassNames = { root: 'wave-slider' } as const;\n\n/**\n * SpinButton: `root` on the outer element; `decrementButton` on the − button; `input` on the\n * `role=\"spinbutton\"` input; `incrementButton` on the + button.\n */\nexport const spinButtonClassNames = {\n  root: 'wave-spin-button',\n  decrementButton: 'wave-spin-button__decrement-button',\n  input: 'wave-spin-button__input',\n  incrementButton: 'wave-spin-button__increment-button',\n} as const;\n\n/**\n * Option (also Combobox.Option, Dropdown.Option and Listbox.Option): `root` on the `role=\"option\"`\n * element; `indicator` on the checkbox square of a multi-select list; `checkIcon` on the check\n * `<svg>`, or on the span of your `checkIcon` (inside the square in a multi-select list);\n * `content` on the content span.\n */\nexport const optionClassNames = {\n  root: 'wave-option',\n  indicator: 'wave-option__indicator',\n  checkIcon: 'wave-option__check-icon',\n  content: 'wave-option__content',\n} as const;\n\n/**\n * OptionGroup (also Combobox.OptionGroup, Dropdown.OptionGroup and Listbox.OptionGroup): `root`\n * on the group's entry in the list; `label` on its heading (rendered only for a `label`); `list`\n * on the `role=\"group\"` list of its options.\n */\nexport const optionGroupClassNames = {\n  root: 'wave-option-group',\n  label: 'wave-option-group__label',\n  list: 'wave-option-group__list',\n} as const;\n\n/** Listbox: `root` on the `role=\"listbox\"` list (its options carry Option's classes). */\nexport const listboxClassNames = { root: 'wave-listbox' } as const;\n\n/**\n * ListboxSurface: `root` on the portaled popup around the list, while it shows the list or the\n * empty content; `list` on the `role=\"listbox\"` list, also while it renders in place inside your\n * picker. In Combobox, Dropdown and TagPicker these elements also carry the picker's own\n * `surface` and `listbox` classes.\n */\nexport const listboxSurfaceClassNames = {\n  root: 'wave-listbox-surface',\n  list: 'wave-listbox-surface__list',\n} as const;\n\n/**\n * Combobox: `root` on the outer element; `input` on the `role=\"combobox\"` input; `clearButton` on\n * the clear button; `expandButton` on the expand button and `expandIcon` on its glyph; `listbox`\n * on the `role=\"listbox\"` list; `surface` on its portaled popup; `emptyMessage` on the\n * \"No matches\" row.\n */\nexport const comboboxClassNames = {\n  root: 'wave-combobox',\n  input: 'wave-combobox__input',\n  clearButton: 'wave-combobox__clear-button',\n  expandButton: 'wave-combobox__expand-button',\n  expandIcon: 'wave-combobox__expand-icon',\n  listbox: 'wave-combobox__listbox',\n  surface: 'wave-combobox__surface',\n  emptyMessage: 'wave-combobox__empty-message',\n} as const;\n\n/**\n * Dropdown: `root` on the outer element; `button` on the `role=\"combobox\"` button; `value` on the\n * value or placeholder span; `expandIcon` on the chevron `<svg>`; `clearButton` on the clear\n * button; `listbox` on the `role=\"listbox\"` list; `surface` on its portaled popup.\n */\nexport const dropdownClassNames = {\n  root: 'wave-dropdown',\n  button: 'wave-dropdown__button',\n  value: 'wave-dropdown__value',\n  expandIcon: 'wave-dropdown__expand-icon',\n  clearButton: 'wave-dropdown__clear-button',\n  listbox: 'wave-dropdown__listbox',\n  surface: 'wave-dropdown__surface',\n} as const;\n\n/**\n * TagPicker: `root` on the outer element; `control` on the tag area and `group` on the list of\n * tags (both deprecated, kept until 1.0 next to TagPicker.Control's and TagPicker.Group's own\n * classes); `tag` on each tag; `removeButton` on each tag's remove button; `input` on the\n * `role=\"combobox\"` input; `expandButton` on the expand button and `expandIcon` on its glyph;\n * `clearButton` on the clear button; `listbox` on the `role=\"listbox\"` list; `option` on each\n * Option it renders (which also carries Option's classes); `createOption` on the create option of\n * `allowCreate`; `overflowCount` on the \"+N\" count of the single-line layout; `surface` on the\n * portaled popup; `emptyMessage` on the \"No matches\" row.\n */\nexport const tagPickerClassNames = {\n  root: 'wave-tag-picker',\n  control: 'wave-tag-picker__control',\n  group: 'wave-tag-picker__group',\n  tag: 'wave-tag-picker__tag',\n  removeButton: 'wave-tag-picker__remove-button',\n  input: 'wave-tag-picker__input',\n  expandButton: 'wave-tag-picker__expand-button',\n  expandIcon: 'wave-tag-picker__expand-icon',\n  clearButton: 'wave-tag-picker__clear-button',\n  listbox: 'wave-tag-picker__listbox',\n  option: 'wave-tag-picker__option',\n  createOption: 'wave-tag-picker__create-option',\n  overflowCount: 'wave-tag-picker__overflow-count',\n  surface: 'wave-tag-picker__surface',\n  emptyMessage: 'wave-tag-picker__empty-message',\n} as const;\n\n/**\n * TagPicker.Control: `root` on the field that holds the tags, the trigger and the end buttons (it\n * also carries TagPicker's `control` part).\n */\nexport const tagPickerControlClassNames = { root: 'wave-tag-picker-control' } as const;\n\n/**\n * TagPicker.Group: `root` on the list of tags (also a TagGroup's root, and TagPicker's `group`\n * part).\n */\nexport const tagPickerGroupClassNames = { root: 'wave-tag-picker-group' } as const;\n\n/**\n * TagPicker.Input: `root` on the `role=\"combobox\"` input (it also carries TagPicker's `input`\n * part).\n */\nexport const tagPickerInputClassNames = { root: 'wave-tag-picker-input' } as const;\n\n/** TagPicker.Button: `root` on the `role=\"combobox\"` button. */\nexport const tagPickerButtonClassNames = { root: 'wave-tag-picker-button' } as const;\n\n/**\n * TagPicker.List: `root` on the `role=\"listbox\"` list (it also carries ListboxSurface's `list` and\n * TagPicker's `listbox` parts).\n */\nexport const tagPickerListClassNames = { root: 'wave-tag-picker-list' } as const;\n\n/**\n * TagPicker.Option (an Option variant): `root` on the option; `media` on the visual before its\n * text; `secondaryContent` on its second line.\n */\nexport const tagPickerOptionClassNames = {\n  root: 'wave-tag-picker-option',\n  media: 'wave-tag-picker-option__media',\n  secondaryContent: 'wave-tag-picker-option__secondary-content',\n} as const;\n\n/**\n * TimePicker: `root` on the outer element; `input` on the `role=\"combobox\"` input; `clearButton`\n * on the clear button; `expandButton` on the expand button and `expandIcon` on its glyph;\n * `errorMessage` on the `role=\"alert\"` message; `listbox` on the `role=\"listbox\"` list; `option`\n * on each option; `checkIcon` on each option's check column; `surface` on the portaled popup;\n * `emptyMessage` on its status row.\n */\nexport const timePickerClassNames = {\n  root: 'wave-time-picker',\n  input: 'wave-time-picker__input',\n  clearButton: 'wave-time-picker__clear-button',\n  expandButton: 'wave-time-picker__expand-button',\n  expandIcon: 'wave-time-picker__expand-icon',\n  errorMessage: 'wave-time-picker__error-message',\n  listbox: 'wave-time-picker__listbox',\n  option: 'wave-time-picker__option',\n  checkIcon: 'wave-time-picker__check-icon',\n  surface: 'wave-time-picker__surface',\n  emptyMessage: 'wave-time-picker__empty-message',\n} as const;\n\n/**\n * DatePicker: `root` on the outer element; `input` on the text input; `clearButton` on the clear\n * button; `openCalendarButton` on the calendar button; `errorMessage` on the `role=\"alert\"`\n * message; `surface` on the portaled `role=\"dialog\"` calendar; `header` on its month row;\n * `previousMonthButton` and `nextMonthButton` on the navigation buttons (by a month, and in the\n * month and year views by a year and a decade); `heading` on the `<h2>` (the month, year or\n * decade); `headingButton` on its button to the month and year views; `grid` on the calendar's\n * `role=\"grid\"` element of every view; `weekday` on each weekday header cell; `weekNumberHeader`\n * on the header cell of the week-number column and `weekNumber` on each week's row header\n * (`showWeekNumbers`); `day`, `month` and `year` on each day, month and year button; `markedDot`\n * on the dot inside a marked day's button; `footer` on the row of the footer buttons\n * (`showGoToToday`, `showCloseButton`), with `todayButton` on \"Go to today\" and `closeButton` on\n * \"Close\".\n */\nexport const datePickerClassNames = {\n  root: 'wave-date-picker',\n  input: 'wave-date-picker__input',\n  clearButton: 'wave-date-picker__clear-button',\n  openCalendarButton: 'wave-date-picker__open-calendar-button',\n  errorMessage: 'wave-date-picker__error-message',\n  surface: 'wave-date-picker__surface',\n  header: 'wave-date-picker__header',\n  previousMonthButton: 'wave-date-picker__previous-month-button',\n  heading: 'wave-date-picker__heading',\n  headingButton: 'wave-date-picker__heading-button',\n  nextMonthButton: 'wave-date-picker__next-month-button',\n  grid: 'wave-date-picker__grid',\n  weekday: 'wave-date-picker__weekday',\n  weekNumberHeader: 'wave-date-picker__week-number-header',\n  weekNumber: 'wave-date-picker__week-number',\n  day: 'wave-date-picker__day',\n  markedDot: 'wave-date-picker__marked-dot',\n  month: 'wave-date-picker__month',\n  year: 'wave-date-picker__year',\n  footer: 'wave-date-picker__footer',\n  todayButton: 'wave-date-picker__today-button',\n  closeButton: 'wave-date-picker__close-button',\n} as const;\n\n/**\n * Calendar: `root` on the `role=\"group\"` element; `header` on the row of the navigation buttons\n * and the heading; `previousButton` and `nextButton` on the navigation buttons (by a month, a\n * year or a decade); `heading` on the month, year or decade text (a `<div>`, which labels the\n * grid); `headingButton` on the heading's button to the month and year views; `grid` on the\n * `role=\"grid\"` element of every view; `weekday` on each weekday header cell; `weekNumberHeader`\n * on the header cell of the week-number column and `weekNumber` on each week's row header\n * (`showWeekNumbers`); `day`, `month` and `year` on each day, month and year button; `markedDot`\n * on the dot inside a marked day's button; `footer` on the row of the footer buttons, with\n * `todayButton` on \"Go to today\" (`showGoToToday`).\n */\nexport const calendarClassNames = {\n  root: 'wave-calendar',\n  header: 'wave-calendar__header',\n  previousButton: 'wave-calendar__previous-button',\n  heading: 'wave-calendar__heading',\n  headingButton: 'wave-calendar__heading-button',\n  nextButton: 'wave-calendar__next-button',\n  grid: 'wave-calendar__grid',\n  weekday: 'wave-calendar__weekday',\n  weekNumberHeader: 'wave-calendar__week-number-header',\n  weekNumber: 'wave-calendar__week-number',\n  day: 'wave-calendar__day',\n  markedDot: 'wave-calendar__marked-dot',\n  month: 'wave-calendar__month',\n  year: 'wave-calendar__year',\n  footer: 'wave-calendar__footer',\n  todayButton: 'wave-calendar__today-button',\n} as const;\n\n/**\n * SwatchPicker: `root` on the picker element (`role=\"radiogroup\"`, or `role=\"grid\"` in the grid\n * layout); `swatch` on the button of every swatch in it (`items`, and the `ColorSwatch`,\n * `ImageSwatch` and `EmptySwatch` children, next to their own classes).\n */\nexport const swatchPickerClassNames = {\n  root: 'wave-swatch-picker',\n  swatch: 'wave-swatch-picker__swatch',\n} as const;\n\n/**\n * SwatchPicker.Row: `root` on the row element (`role=\"row\"` in the grid layout), also on the rows\n * the picker adds around `items` and loose swatches.\n */\nexport const swatchPickerRowClassNames = { root: 'wave-swatch-picker-row' } as const;\n\n/**\n * ColorSwatch (also the swatches of SwatchPicker's `items`; carries SwatchPicker's `swatch`):\n * `root` on the swatch `<button>`, where `className` lands in every layout; `icon` on the span of\n * your `icon`.\n */\nexport const colorSwatchClassNames = {\n  root: 'wave-color-swatch',\n  icon: 'wave-color-swatch__icon',\n} as const;\n\n/** ImageSwatch (carries SwatchPicker's `swatch`): `root` on the swatch `<button>`. */\nexport const imageSwatchClassNames = { root: 'wave-image-swatch' } as const;\n\n/**\n * EmptySwatch (carries SwatchPicker's `swatch`): `root` on the `<button>`; `icon` on the span of\n * its glyph (the plus, or your `icon`).\n */\nexport const emptySwatchClassNames = {\n  root: 'wave-empty-swatch',\n  icon: 'wave-empty-swatch__icon',\n} as const;\n\n/**\n * ColorPicker: `root` on the `role=\"group\"` element; `opacityLabel` on the caption and\n * `opacityValue` on the percentage of the default layout's opacity row. Its color area and\n * sliders carry their own classes (ColorArea, ColorSlider, AlphaSlider).\n */\nexport const colorPickerClassNames = {\n  root: 'wave-color-picker',\n  opacityLabel: 'wave-color-picker__opacity-label',\n  opacityValue: 'wave-color-picker__opacity-value',\n} as const;\n\n/**\n * ColorPicker.HexField: `root` on the field's outer element; `label` on the caption; `input` on\n * the hex `<input>`; `errorMessage` on the error text.\n */\nexport const colorPickerHexFieldClassNames = {\n  root: 'wave-color-picker-hex-field',\n  label: 'wave-color-picker-hex-field__label',\n  input: 'wave-color-picker-hex-field__input',\n  errorMessage: 'wave-color-picker-hex-field__error-message',\n} as const;\n\n/**\n * ColorPicker.Swatches (also carries SwatchPicker's root): `root` on the SwatchPicker it renders;\n * its swatches keep SwatchPicker's own `swatch` class.\n */\nexport const colorPickerSwatchesClassNames = { root: 'wave-color-picker-swatches' } as const;\n\n/** ColorPicker.Preview: `root` on the preview swatch. */\nexport const colorPickerPreviewClassNames = { root: 'wave-color-picker-preview' } as const;\n\n/**\n * ColorArea: `root` on the `role=\"group\"` element; `field` on the gradient layer; `thumb` on the\n * thumb (the two range inputs are not parts).\n */\nexport const colorAreaClassNames = {\n  root: 'wave-color-area',\n  field: 'wave-color-area__field',\n  thumb: 'wave-color-area__thumb',\n} as const;\n\n/** ColorSlider: `root` on the slider element; `rail` on the gradient rail; `thumb` on the thumb. */\nexport const colorSliderClassNames = {\n  root: 'wave-color-slider',\n  rail: 'wave-color-slider__rail',\n  thumb: 'wave-color-slider__thumb',\n} as const;\n\n/** AlphaSlider: `root` on the slider element; `rail` on the rail; `thumb` on the thumb. */\nexport const alphaSliderClassNames = {\n  root: 'wave-alpha-slider',\n  rail: 'wave-alpha-slider__rail',\n  thumb: 'wave-alpha-slider__thumb',\n} as const;\n\n/**\n * Rating: `root` on the `role=\"radiogroup\"` element; `star` on each star (a RatingItem: the\n * `role=\"radio\"` button, or with `step={0.5}` the span around its two radios); `icon` on each\n * star glyph (the default `<svg>`, or the span of your `iconFilled`/`iconOutline`).\n */\nexport const ratingClassNames = {\n  root: 'wave-rating',\n  star: 'wave-rating__star',\n  icon: 'wave-rating__icon',\n} as const;\n\n/**\n * RatingItem (also Rating.Item, RatingDisplay.Item and RatingDisplayItem): `root` on the star\n * element (the `role=\"radio\"` button in a Rating, the span around its two radios with\n * `step={0.5}`, the star span in a RatingDisplay), which also carries its rating's `star` class;\n * `icon` on each glyph it draws (the default `<svg>`, or the span of an `iconFilled`/`iconOutline`\n * glyph), which also carries its rating's `icon` class.\n */\nexport const ratingItemClassNames = {\n  root: 'wave-rating-item',\n  icon: 'wave-rating-item__icon',\n} as const;\n\n/**\n * RatingDisplay: `root` on the `role=\"img\"` element; `star` on each star span (a RatingItem, and\n * the one star of `compact`); `icon` on the star glyphs; `value` on the value span; `count` on the\n * count span.\n */\nexport const ratingDisplayClassNames = {\n  root: 'wave-rating-display',\n  star: 'wave-rating-display__star',\n  icon: 'wave-rating-display__icon',\n  value: 'wave-rating-display__value',\n  count: 'wave-rating-display__count',\n} as const;\n\n// ---------------------------------------------------------------------------\n// layout\n// ---------------------------------------------------------------------------\n\n/**\n * Card: `root` on the rendered element (your `as`, default `<div>`); `checkbox` on the built-in\n * selection checkbox; `checkmark` on the corner check `<svg>` of a selected card.\n */\nexport const cardClassNames = {\n  root: 'wave-card',\n  checkbox: 'wave-card__checkbox',\n  checkmark: 'wave-card__checkmark',\n  floatingAction: 'wave-card__floating-action',\n} as const;\n\n/** Card.Header: `root` on the rendered element; `title` on the title; `subtitle` on the subtitle. */\nexport const cardHeaderClassNames = {\n  root: 'wave-card-header',\n  image: 'wave-card-header__image',\n  text: 'wave-card-header__text',\n  title: 'wave-card-header__title',\n  subtitle: 'wave-card-header__subtitle',\n  action: 'wave-card-header__action',\n} as const;\n\n/** Card.Preview: `root` on the rendered element; `logo` on the logo over its bottom start corner. */\nexport const cardPreviewClassNames = {\n  root: 'wave-card-preview',\n  logo: 'wave-card-preview__logo',\n} as const;\n\n/** Card.Body: `root` on the rendered element. */\nexport const cardBodyClassNames = { root: 'wave-card-body' } as const;\n\n/** Card.Footer: `root` on the rendered element. */\nexport const cardFooterClassNames = { root: 'wave-card-footer' } as const;\n\n/** Accordion: `root` on the accordion element. */\nexport const accordionClassNames = { root: 'wave-accordion' } as const;\n\n/** Accordion.Item: `root` on the item element. */\nexport const accordionItemClassNames = { root: 'wave-accordion-item' } as const;\n\n/**\n * Accordion.Trigger: `root` on the `<button>`; `heading` on the heading element around it (`<h1>`\n * to `<h6>`, from `headingLevel`); `expandIcon` on the chevron `<svg>`.\n */\nexport const accordionTriggerClassNames = {\n  root: 'wave-accordion-trigger',\n  heading: 'wave-accordion-trigger__heading',\n  expandIcon: 'wave-accordion-trigger__expand-icon',\n} as const;\n\n/** Accordion.Panel: `root` on the `role=\"region\"` element. */\nexport const accordionPanelClassNames = { root: 'wave-accordion-panel' } as const;\n\n/** TabList: `root` on the `role=\"tablist\"` element. */\nexport const tabListClassNames = { root: 'wave-tab-list' } as const;\n\n/** TabList.Tab: `root` on the `role=\"tab\"` button. */\nexport const tabListTabClassNames = {\n  root: 'wave-tab-list-tab',\n  icon: 'wave-tab-list-tab__icon',\n} as const;\n\n/** TabList.Panel: `root` on the `role=\"tabpanel\"` element. */\nexport const tabListPanelClassNames = { root: 'wave-tab-list-panel' } as const;\n\n/** TabList.Panels: `root` on the element around the panels. */\nexport const tabListPanelsClassNames = { root: 'wave-tab-list-panels' } as const;\n\n/** Tree: `root` on the `role=\"tree\"` element. */\nexport const treeClassNames = { root: 'wave-tree' } as const;\n\n/**\n * Tree.Item: `root` on the `role=\"treeitem\"` element; `row` on its row; `expandIcon` on the\n * chevron (or your `expandIcon`); `indicator` on the checkbox of a multi-select tree or the radio\n * of a single-select one; `icon` on the icon span; `label` on the label span; `iconAfter` on the\n * icon after the label; `aside` on the aside content; `actions` on the row's actions toolbar;\n * `group` on the `role=\"group\"` element of its nested items.\n */\nexport const treeItemClassNames = {\n  root: 'wave-tree-item',\n  row: 'wave-tree-item__row',\n  expandIcon: 'wave-tree-item__expand-icon',\n  indicator: 'wave-tree-item__indicator',\n  icon: 'wave-tree-item__icon',\n  label: 'wave-tree-item__label',\n  iconAfter: 'wave-tree-item__icon-after',\n  aside: 'wave-tree-item__aside',\n  actions: 'wave-tree-item__actions',\n  group: 'wave-tree-item__group',\n} as const;\n\n/**\n * Tree.ItemPersonaLayout: `root` on the layout span; `media` on the picture; `main` on the name;\n * `description` on the description line.\n */\nexport const treeItemPersonaLayoutClassNames = {\n  root: 'wave-tree-item-persona-layout',\n  media: 'wave-tree-item-persona-layout__media',\n  main: 'wave-tree-item-persona-layout__main',\n  description: 'wave-tree-item-persona-layout__description',\n} as const;\n\n/**\n * Carousel: `root` on the `role=\"region\"` element; `autoPlayButton` on the pause and start\n * button; `viewport` on the clipping element around the track; `track` on the moving element\n * around the slides; `slide` on each slide wrapper;\n * `previousButton` and `nextButton` on the arrow buttons; `picker` on the `role=\"group\"` of\n * picker buttons; `pickerButton` on each of them; `pickerIndicator` on each button's dot.\n */\nexport const carouselClassNames = {\n  root: 'wave-carousel',\n  autoPlayButton: 'wave-carousel__auto-play-button',\n  viewport: 'wave-carousel__viewport',\n  track: 'wave-carousel__track',\n  slide: 'wave-carousel__slide',\n  previousButton: 'wave-carousel__previous-button',\n  nextButton: 'wave-carousel__next-button',\n  picker: 'wave-carousel__picker',\n  pickerButton: 'wave-carousel__picker-button',\n  pickerIndicator: 'wave-carousel__picker-indicator',\n} as const;\n\n/** Carousel.Item: `root` on the item element; `thumbnail` on the image in its picker button. */\nexport const carouselItemClassNames = {\n  root: 'wave-carousel-item',\n  thumbnail: 'wave-carousel-item__thumbnail',\n} as const;\n\n/** Carousel.Button: `root` on the button element. */\nexport const carouselButtonClassNames = { root: 'wave-carousel-button' } as const;\n\n/**\n * Overflow: `root` on the overflow element; `overflowButton` on the element around what\n * `overflowButton` renders.\n */\nexport const overflowClassNames = {\n  root: 'wave-overflow',\n  overflowButton: 'wave-overflow__overflow-button',\n} as const;\n\n/** Overflow.Item: `root` on the item element. */\nexport const overflowItemClassNames = { root: 'wave-overflow-item' } as const;\n\n/** Overflow.Divider: `root` on the divider element. */\nexport const overflowDividerClassNames = { root: 'wave-overflow-divider' } as const;\n\n/** Stack: `root` on the rendered element. */\nexport const stackClassNames = { root: 'wave-stack' } as const;\n\n/** Flex: `root` on the rendered element. */\nexport const flexClassNames = { root: 'wave-flex' } as const;\n\n/** Grid: `root` on the rendered element. */\nexport const gridClassNames = { root: 'wave-grid' } as const;\n\n// ---------------------------------------------------------------------------\n// navigation\n// ---------------------------------------------------------------------------\n\n/**\n * Breadcrumb: `root` on the `<nav>`; `list` on the trail's list element (its `<ol>`, or with\n * `overflow=\"auto\"` the Overflow's `role=\"list\"` element); `listItem` on each `<li>`; `divider` on\n * each separator (the default chevron `<svg>`, or the `<span>` of a custom `divider`);\n * `overflowButton` on the \"…\" `<button>` that opens the menu of the collapsed items, with\n * `maxDisplayedItems` and with `overflow=\"auto\"`. With `overflow=\"auto\"` the \"…\" list item is the\n * Overflow's button wrapper, not an `<li>`, so it carries no `listItem` class.\n */\nexport const breadcrumbClassNames = {\n  root: 'wave-breadcrumb',\n  list: 'wave-breadcrumb__list',\n  listItem: 'wave-breadcrumb__list-item',\n  divider: 'wave-breadcrumb__divider',\n  overflowButton: 'wave-breadcrumb__overflow-button',\n} as const;\n\n/**\n * Breadcrumb.Item: `root` on the link, button or text span it renders (or your `asChild`\n * element); `icon` on the icon span.\n */\nexport const breadcrumbItemClassNames = {\n  root: 'wave-breadcrumb-item',\n  icon: 'wave-breadcrumb-item__icon',\n} as const;\n\n/** Menu: `root` on the `role=\"menu\"` element of a static menu (a popup menu has Menu.Popover's). */\nexport const menuClassNames = { root: 'wave-menu' } as const;\n\n/**\n * Menu.Item: `root` on the `role=\"menuitem\"` element; `checkmark` on the check column; `icon` on\n * the icon span; `content` on the label span; `shortcut` on the shortcut span;\n * `submenuIndicator` on the chevron `<svg>` of a submenu trigger.\n */\nexport const menuItemClassNames = {\n  root: 'wave-menu-item',\n  checkmark: 'wave-menu-item__checkmark',\n  icon: 'wave-menu-item__icon',\n  content: 'wave-menu-item__content',\n  shortcut: 'wave-menu-item__shortcut',\n  submenuIndicator: 'wave-menu-item__submenu-indicator',\n} as const;\n\n/**\n * Menu.ItemCheckbox (also carries Menu.Item's root and matching part classes): `root` on the\n * `role=\"menuitemcheckbox\"` element; `checkmark`, `icon`, `content` and `shortcut` as on\n * Menu.Item.\n */\nexport const menuItemCheckboxClassNames = {\n  root: 'wave-menu-item-checkbox',\n  checkmark: 'wave-menu-item-checkbox__checkmark',\n  icon: 'wave-menu-item-checkbox__icon',\n  content: 'wave-menu-item-checkbox__content',\n  shortcut: 'wave-menu-item-checkbox__shortcut',\n} as const;\n\n/**\n * Menu.ItemRadio (also carries Menu.Item's root and matching part classes): `root` on the\n * `role=\"menuitemradio\"` element; `checkmark`, `icon`, `content` and `shortcut` as on Menu.Item.\n */\nexport const menuItemRadioClassNames = {\n  root: 'wave-menu-item-radio',\n  checkmark: 'wave-menu-item-radio__checkmark',\n  icon: 'wave-menu-item-radio__icon',\n  content: 'wave-menu-item-radio__content',\n  shortcut: 'wave-menu-item-radio__shortcut',\n} as const;\n\n/**\n * Menu.ItemSwitch (also carries Menu.Item's root, `icon`, `content` and `shortcut` classes):\n * `root` on the `role=\"menuitemcheckbox\"` element; `icon`, `content` and `shortcut` as on\n * Menu.Item; `track` on the switch; `thumb` on its thumb.\n */\nexport const menuItemSwitchClassNames = {\n  root: 'wave-menu-item-switch',\n  icon: 'wave-menu-item-switch__icon',\n  content: 'wave-menu-item-switch__content',\n  shortcut: 'wave-menu-item-switch__shortcut',\n  track: 'wave-menu-item-switch__track',\n  thumb: 'wave-menu-item-switch__thumb',\n} as const;\n\n/**\n * Menu.ItemLink (also carries Menu.Item's root and matching part classes): `root` on the\n * `role=\"menuitem\"` link (`<a>`, or your `as`); `icon`, `content` and `shortcut` as on Menu.Item.\n */\nexport const menuItemLinkClassNames = {\n  root: 'wave-menu-item-link',\n  icon: 'wave-menu-item-link__icon',\n  content: 'wave-menu-item-link__content',\n  shortcut: 'wave-menu-item-link__shortcut',\n} as const;\n\n/** Menu.Divider: `root` on the `role=\"separator\"` element. */\nexport const menuDividerClassNames = { root: 'wave-menu-divider' } as const;\n\n/** Menu.Popover: `root` on the portaled `role=\"menu\"` element. */\nexport const menuPopoverClassNames = { root: 'wave-menu-popover' } as const;\n\n/** Menu.Group: `root` on the `role=\"group\"` element. */\nexport const menuGroupClassNames = { root: 'wave-menu-group' } as const;\n\n/** Menu.GroupHeader: `root` on the header element. */\nexport const menuGroupHeaderClassNames = { root: 'wave-menu-group-header' } as const;\n\n/** Menu.SplitGroup: `root` on the `role=\"group\"` element. */\nexport const menuSplitGroupClassNames = { root: 'wave-menu-split-group' } as const;\n\n/** Nav: `root` on the `<nav>`; `list` on its `<ul>`. */\nexport const navClassNames = {\n  root: 'wave-nav',\n  list: 'wave-nav__list',\n} as const;\n\n/**\n * Nav.Category: `root` on its `<li>`; `button` on the toggle button; `icon` on the icon span;\n * `label` on the label span; `expandIcon` on the chevron `<svg>`; `list` on the `<ul>` of its\n * sub-items.\n */\nexport const navCategoryClassNames = {\n  root: 'wave-nav-category',\n  button: 'wave-nav-category__button',\n  icon: 'wave-nav-category__icon',\n  label: 'wave-nav-category__label',\n  expandIcon: 'wave-nav-category__expand-icon',\n  list: 'wave-nav-category__list',\n} as const;\n\n/**\n * Nav.Item: `root` on the `<a>` (with `href`) or `<button>`; `listItem` on the `<li>` around it;\n * `icon` on the icon span; `content` on the label span; `actions` on the group of its `actions`.\n */\nexport const navItemClassNames = {\n  root: 'wave-nav-item',\n  listItem: 'wave-nav-item__list-item',\n  icon: 'wave-nav-item__icon',\n  content: 'wave-nav-item__content',\n  actions: 'wave-nav-item__actions',\n} as const;\n\n/**\n * Nav.SubItem: `root` on the `<a>` or `<button>`; `listItem` on the `<li>` around it; `actions` on\n * the group of its `actions`.\n */\nexport const navSubItemClassNames = {\n  root: 'wave-nav-sub-item',\n  listItem: 'wave-nav-sub-item__list-item',\n  actions: 'wave-nav-sub-item__actions',\n} as const;\n\n/** Nav.SectionHeader: `root` on the heading element; `listItem` on the list item around it. */\nexport const navSectionHeaderClassNames = {\n  root: 'wave-nav-section-header',\n  listItem: 'wave-nav-section-header__list-item',\n} as const;\n\n/** Nav.Divider: `root` on its list item (hidden from assistive technology). */\nexport const navDividerClassNames = { root: 'wave-nav-divider' } as const;\n\n/**\n * Nav.AppItem: `root` on the `<a>` (with `href`) or `<button>`; `listItem` on the list item around\n * it; `icon` on the icon span; `content` on the label span.\n */\nexport const navAppItemClassNames = {\n  root: 'wave-nav-app-item',\n  listItem: 'wave-nav-app-item__list-item',\n  icon: 'wave-nav-app-item__icon',\n  content: 'wave-nav-app-item__content',\n} as const;\n\n/**\n * Nav.AppItemStatic: `root` on the `<div>`; `listItem` on the list item around it; `icon` on the\n * icon span; `content` on the label span.\n */\nexport const navAppItemStaticClassNames = {\n  root: 'wave-nav-app-item-static',\n  listItem: 'wave-nav-app-item-static__list-item',\n  icon: 'wave-nav-app-item-static__icon',\n  content: 'wave-nav-app-item-static__content',\n} as const;\n\n/**\n * NavDrawer (a Drawer variant: it also carries Drawer's root, and its backdrop Drawer's backdrop\n * class): `root` on the panel (the portaled `role=\"dialog\"` element of an overlay drawer, the\n * panel element of an inline one); `backdrop` on the backdrop of a modal overlay; `nav` on the\n * navigation landmark that fills the panel.\n */\nexport const navDrawerClassNames = {\n  root: 'wave-nav-drawer',\n  backdrop: 'wave-nav-drawer__backdrop',\n  nav: 'wave-nav-drawer__nav',\n} as const;\n\n/** NavDrawer.Header: `root` on the header row. */\nexport const navDrawerHeaderClassNames = { root: 'wave-nav-drawer-header' } as const;\n\n/** NavDrawer.Body: `root` on the scrolling body; `list` on its list. */\nexport const navDrawerBodyClassNames = {\n  root: 'wave-nav-drawer-body',\n  list: 'wave-nav-drawer-body__list',\n} as const;\n\n/** NavDrawer.Footer: `root` on the footer; `list` on its list. */\nexport const navDrawerFooterClassNames = {\n  root: 'wave-nav-drawer-footer',\n  list: 'wave-nav-drawer-footer__list',\n} as const;\n\n/**\n * Hamburger (a Button variant: it also carries Button's root and icon classes): `root` on the\n * `<button>`; `icon` on the icon span.\n */\nexport const hamburgerClassNames = {\n  root: 'wave-hamburger',\n  icon: 'wave-hamburger__icon',\n} as const;\n\n/**\n * Pagination: `root` on the `<nav>`; `list` on its `<ol>`; `listItem` on each `<li>`;\n * `firstButton`, `previousButton`, `pageButton`, `nextButton` and `lastButton` on its buttons;\n * `ellipsis` on each \"…\" span.\n */\nexport const paginationClassNames = {\n  root: 'wave-pagination',\n  list: 'wave-pagination__list',\n  listItem: 'wave-pagination__list-item',\n  firstButton: 'wave-pagination__first-button',\n  previousButton: 'wave-pagination__previous-button',\n  pageButton: 'wave-pagination__page-button',\n  nextButton: 'wave-pagination__next-button',\n  lastButton: 'wave-pagination__last-button',\n  ellipsis: 'wave-pagination__ellipsis',\n} as const;\n\n/** Stepper: `root` on the `role=\"group\"` element; `list` on its `<ol>`. */\nexport const stepperClassNames = {\n  root: 'wave-stepper',\n  list: 'wave-stepper__list',\n} as const;\n\n/**\n * Stepper.Step: `root` on the step's element inside its `<li>`; `listItem` on the `<li>`; `button`\n * on the `role=\"button\"` element; `indicator` on the circle; `icon` on the `icon` slot inside it;\n * `label` on the label; `description` on the description; `connector` on the line to the next\n * step.\n */\nexport const stepperStepClassNames = {\n  root: 'wave-stepper-step',\n  listItem: 'wave-stepper-step__list-item',\n  button: 'wave-stepper-step__button',\n  indicator: 'wave-stepper-step__indicator',\n  icon: 'wave-stepper-step__icon',\n  label: 'wave-stepper-step__label',\n  description: 'wave-stepper-step__description',\n  connector: 'wave-stepper-step__connector',\n} as const;\n\n// ---------------------------------------------------------------------------\n// overlays\n// ---------------------------------------------------------------------------\n\n/**\n * Dialog.Content: `root` on the surface (`role=\"dialog\"` or `\"alertdialog\"`, also while kept\n * mounted); `backdrop` on the backdrop behind it; `positioner` on the element that centres the\n * surface (the backdrop's sibling); `titleActions` on the area of header buttons in the top end\n * corner; `titleAction` on the element of the `titleAction` slot; `closeButton` on the built-in\n * Close button (which also carries Button's root); `body` on the scrolling body. The heading of\n * its `title` prop carries Dialog.Title's class.\n */\nexport const dialogContentClassNames = {\n  root: 'wave-dialog-content',\n  backdrop: 'wave-dialog-content__backdrop',\n  positioner: 'wave-dialog-content__positioner',\n  titleActions: 'wave-dialog-content__title-actions',\n  titleAction: 'wave-dialog-content__title-action',\n  closeButton: 'wave-dialog-content__close-button',\n  body: 'wave-dialog-content__body',\n} as const;\n\n/** Dialog.Title: `root` on the `<h2>`; `action` on the element of its `action` slot. */\nexport const dialogTitleClassNames = {\n  root: 'wave-dialog-title',\n  action: 'wave-dialog-title__action',\n} as const;\n\n/** Dialog.Footer: `root` on the footer element. */\nexport const dialogFooterClassNames = { root: 'wave-dialog-footer' } as const;\n\n/**\n * Popover.Content: `root` on the portaled `role=\"dialog\"` surface; `beak` on the arrow; `title`\n * on the `<h2>` of `title`.\n */\nexport const popoverContentClassNames = {\n  root: 'wave-popover-content',\n  beak: 'wave-popover-content__beak',\n  title: 'wave-popover-content__title',\n} as const;\n\n/** Tooltip: `root` on the span around your child; `content` on the portaled tooltip. */\nexport const tooltipClassNames = {\n  root: 'wave-tooltip',\n  content: 'wave-tooltip__content',\n} as const;\n\n/**\n * Drawer: `root` on the panel (the portaled `role=\"dialog\"` element of an overlay drawer, while it\n * is open or kept mounted, or the `<aside>` of an inline one); `backdrop` on the backdrop of a\n * modal or alert overlay drawer; `header` on the built-in header row (absent with a\n * Drawer.Header); `titleAction` on the element of the `titleAction` slot in that row;\n * `closeButton` on every built-in Close button (which also carries Button's root), in the built-in\n * header and in each Drawer.HeaderTitle; `body` on the scrolling body. The heading of its `title`\n * prop carries Drawer.Title's class. The panel carries `data-type`, `data-position` and\n * `data-size`; the body, the header and the footer carry `data-scroll-state`.\n */\nexport const drawerClassNames = {\n  root: 'wave-drawer',\n  backdrop: 'wave-drawer__backdrop',\n  header: 'wave-drawer__header',\n  titleAction: 'wave-drawer__title-action',\n  closeButton: 'wave-drawer__close-button',\n  body: 'wave-drawer__body',\n} as const;\n\n/**\n * Drawer.Title: `root` on its heading (an `<h2>`, or the level `headingLevel` picks); also on the\n * heading of Drawer's `title` prop.\n */\nexport const drawerTitleClassNames = { root: 'wave-drawer-title' } as const;\n\n/** Drawer.Header: `root` on the header element (it replaces the built-in header row). */\nexport const drawerHeaderClassNames = { root: 'wave-drawer-header' } as const;\n\n/**\n * Drawer.HeaderTitle: `root` on the title row; `heading` on the heading that names the drawer;\n * `action` on the element of the `action` slot. Its Close button carries Drawer's `closeButton`.\n */\nexport const drawerHeaderTitleClassNames = {\n  root: 'wave-drawer-header-title',\n  heading: 'wave-drawer-header-title__heading',\n  action: 'wave-drawer-header-title__action',\n} as const;\n\n/** Drawer.HeaderNavigation: `root` on the navigation element. */\nexport const drawerHeaderNavigationClassNames = { root: 'wave-drawer-header-navigation' } as const;\n\n/**\n * Drawer.Body: `root` on the scrolling body while a Drawer.Body gives it its props (the body also\n * carries Drawer's `body`), or on the element of a Drawer.Body rendered inside the body.\n */\nexport const drawerBodyClassNames = { root: 'wave-drawer-body' } as const;\n\n/** Drawer.Footer: `root` on the footer element. */\nexport const drawerFooterClassNames = { root: 'wave-drawer-footer' } as const;\n\n/**\n * TeachingPopover: `root` on the `role=\"dialog\"` surface (also when TeachingPopover.Surface\n * renders it); `beak` on the arrow; `closeButton`, `backButton` and `nextButton` on its buttons\n * (which also carry Button's root; `backButton` also on the first step's button that a\n * TeachingPopover.CarouselFooter's `initialStepText` names); `primaryButton` and `secondaryButton`\n * on the buttons that a `primaryAction` and a `secondaryAction` render in place of Next/Done and\n * Back; `title` on the step title (an `<h3>`, or the element of TeachingPopover.Title's `as`);\n * `body` on the step body; `footer` on the bottom row (TeachingPopover.Footer's, or\n * TeachingPopover.CarouselFooter's); `dot` on each decorative step dot.\n */\nexport const teachingPopoverClassNames = {\n  root: 'wave-teaching-popover',\n  beak: 'wave-teaching-popover__beak',\n  closeButton: 'wave-teaching-popover__close-button',\n  title: 'wave-teaching-popover__title',\n  body: 'wave-teaching-popover__body',\n  footer: 'wave-teaching-popover__footer',\n  dot: 'wave-teaching-popover__dot',\n  backButton: 'wave-teaching-popover__back-button',\n  nextButton: 'wave-teaching-popover__next-button',\n  primaryButton: 'wave-teaching-popover__primary-button',\n  secondaryButton: 'wave-teaching-popover__secondary-button',\n} as const;\n\n/**\n * TeachingPopover.Surface: `root` on the `role=\"dialog\"` surface it renders, which also carries\n * TeachingPopover's `root`; the content of the current step it shows without children carries\n * TeachingPopover's part classes.\n */\nexport const teachingPopoverSurfaceClassNames = { root: 'wave-teaching-popover-surface' } as const;\n\n/**\n * TeachingPopover.Header: `root` on the header element (also the one the `steps` form renders\n * around its Close button); `icon` on the element of its `icon` slot. Its Close button carries\n * TeachingPopover's `closeButton`.\n */\nexport const teachingPopoverHeaderClassNames = {\n  root: 'wave-teaching-popover-header',\n  icon: 'wave-teaching-popover-header__icon',\n} as const;\n\n/**\n * TeachingPopover.Title: `root` on the heading (also the one the `steps` form renders), which\n * also carries TeachingPopover's `title`.\n */\nexport const teachingPopoverTitleClassNames = { root: 'wave-teaching-popover-title' } as const;\n\n/**\n * TeachingPopover.Body: `root` on the body element (also the one the `steps` form renders), which\n * also carries TeachingPopover's `body`; `media` on the element of its `media` slot.\n */\nexport const teachingPopoverBodyClassNames = {\n  root: 'wave-teaching-popover-body',\n  media: 'wave-teaching-popover-body__media',\n} as const;\n\n/**\n * TeachingPopover.Footer: `root` on the footer element (also the one the `steps` form renders),\n * which also carries TeachingPopover's `footer`.\n */\nexport const teachingPopoverFooterClassNames = { root: 'wave-teaching-popover-footer' } as const;\n\n/**\n * TeachingPopover.Carousel: `root` on the element that holds the step content and the carousel\n * footer.\n */\nexport const teachingPopoverCarouselClassNames = {\n  root: 'wave-teaching-popover-carousel',\n} as const;\n\n/**\n * TeachingPopover.CarouselNav: `root` on the `role=\"group\"` element of the step buttons; `button`\n * on each step button; `indicator` on the dot inside it.\n */\nexport const teachingPopoverCarouselNavClassNames = {\n  root: 'wave-teaching-popover-carousel-nav',\n  button: 'wave-teaching-popover-carousel-nav__button',\n  indicator: 'wave-teaching-popover-carousel-nav__indicator',\n} as const;\n\n/** TeachingPopover.CarouselPageCount: `root` on the element of the visible step count. */\nexport const teachingPopoverCarouselPageCountClassNames = {\n  root: 'wave-teaching-popover-carousel-page-count',\n} as const;\n\n/**\n * TeachingPopover.CarouselFooter: `root` on the footer element, which also carries\n * TeachingPopover's `footer`. Its buttons carry TeachingPopover's button classes, and its\n * decorative step dots TeachingPopover's `dot`.\n */\nexport const teachingPopoverCarouselFooterClassNames = {\n  root: 'wave-teaching-popover-carousel-footer',\n} as const;\n\n// ---------------------------------------------------------------------------\n// table\n// ---------------------------------------------------------------------------\n\n/** Table: `root` on the `<table>`; `container` on the scroll wrapper around it. */\nexport const tableClassNames = {\n  root: 'wave-table',\n  container: 'wave-table__container',\n} as const;\n\n/** Table.Header (and the deprecated Table.Head): `root` on the `<thead>`. */\nexport const tableHeaderClassNames = { root: 'wave-table-header' } as const;\n\n/**\n * Table.HeaderCell (and the deprecated Table.HeadCell): `root` on the `<th>`; `button` on the sort\n * button of a sortable header; `sortIcon` on its direction glyph (the default arrow `<svg>`, or the\n * `<span>` of a `sortIcon` slot); `aside` on the aside `<span>`, outside the button.\n */\nexport const tableHeaderCellClassNames = {\n  root: 'wave-table-header-cell',\n  button: 'wave-table-header-cell__button',\n  sortIcon: 'wave-table-header-cell__sort-icon',\n  aside: 'wave-table-header-cell__aside',\n} as const;\n\n/** Table.Body: `root` on the `<tbody>`. */\nexport const tableBodyClassNames = { root: 'wave-table-body' } as const;\n\n/** Table.Row: `root` on the `<tr>`. */\nexport const tableRowClassNames = { root: 'wave-table-row' } as const;\n\n/** Table.Cell: `root` on the `<td>`. */\nexport const tableCellClassNames = { root: 'wave-table-cell' } as const;\n\n/** Table.SelectionCell: `root` on the `<td>`; `control` on its checkbox or radio. */\nexport const tableSelectionCellClassNames = {\n  root: 'wave-table-selection-cell',\n  control: 'wave-table-selection-cell__control',\n} as const;\n\n/**\n * Table.CellLayout: `root` on the layout element; `media` on the media `<span>`; `content` on the\n * column that holds the text; `main` on the main text; `description` on the description line.\n */\nexport const tableCellLayoutClassNames = {\n  root: 'wave-table-cell-layout',\n  media: 'wave-table-cell-layout__media',\n  content: 'wave-table-cell-layout__content',\n  main: 'wave-table-cell-layout__main',\n  description: 'wave-table-cell-layout__description',\n} as const;\n\n/** Table.CellActions: `root` on the element that holds the actions. */\nexport const tableCellActionsClassNames = { root: 'wave-table-cell-actions' } as const;\n\n/** DataGrid: `root` on the grid element (`role=\"grid\"`); `container` on the wrapper around it. */\nexport const dataGridClassNames = {\n  root: 'wave-data-grid',\n  container: 'wave-data-grid__container',\n} as const;\n\n/**\n * DataGrid.Header: `root` on the `<thead>`; `selectionCell` on the selection column's cell of\n * each header row; `selectAllCheckbox` on its checkbox.\n */\nexport const dataGridHeaderClassNames = {\n  root: 'wave-data-grid-header',\n  selectionCell: 'wave-data-grid-header__selection-cell',\n  selectAllCheckbox: 'wave-data-grid-header__select-all-checkbox',\n} as const;\n\n/**\n * DataGrid.HeaderCell: `root` on the `<th>`; `button` on the sort button; `sortIcon` on its\n * direction glyph (the default arrow `<svg>`, or the `<span>` of a `sortIcon` slot).\n */\nexport const dataGridHeaderCellClassNames = {\n  root: 'wave-data-grid-header-cell',\n  button: 'wave-data-grid-header-cell__button',\n  sortIcon: 'wave-data-grid-header-cell__sort-icon',\n} as const;\n\n/** DataGrid.Body: `root` on the `<tbody>`. */\nexport const dataGridBodyClassNames = { root: 'wave-data-grid-body' } as const;\n\n/**\n * DataGrid.Row: `root` on the `<tr>`; `selectionCell` on its selection cell; `selectionControl`\n * on the checkbox or radio in it.\n */\nexport const dataGridRowClassNames = {\n  root: 'wave-data-grid-row',\n  selectionCell: 'wave-data-grid-row__selection-cell',\n  selectionControl: 'wave-data-grid-row__selection-control',\n} as const;\n\n/** DataGrid.Cell: `root` on the `role=\"gridcell\"` cell. */\nexport const dataGridCellClassNames = { root: 'wave-data-grid-cell' } as const;\n\n/**\n * DataGrid.SelectionCell: `root` on the cell, which also carries the selection cell part of its\n * row (`dataGridRowClassNames.selectionCell`) or header (`dataGridHeaderClassNames.selectionCell`);\n * its control carries `dataGridRowClassNames.selectionControl` or\n * `dataGridHeaderClassNames.selectAllCheckbox`.\n */\nexport const dataGridSelectionCellClassNames = { root: 'wave-data-grid-selection-cell' } as const;\n\n// ---------------------------------------------------------------------------\n// typography, provider, portal\n// ---------------------------------------------------------------------------\n\n/** Text: `root` on the rendered element (your `as`, default `<span>`). */\nexport const textClassNames = { root: 'wave-text' } as const;\n\n/** WaveProvider: `root` on the themed element (the existing `wave-root` scope class). */\nexport const waveProviderClassNames = { root: 'wave-root' } as const;\n\n/**\n * Portal: `root` on the portal wrapper (the existing `wave-portal` scope class; the wrapper also\n * takes your `className`).\n */\nexport const portalClassNames = { root: 'wave-portal' } as const;\n"],"mappings":"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"}