@mortenbrudvik/waveui 0.14.0 → 0.15.0

package/dist/lib/classNames.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"classNames.mjs","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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"}
+{"version":3,"file":"classNames.mjs","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","messageBarGroupClassNames","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 * MessageBarGroup: `root` on the element that stacks the bars; `item` on the element around each\n * bar (the element its enter and exit run on).\n */\nexport const messageBarGroupClassNames = {\n  root: 'wave-message-bar-group',\n  item: 'wave-message-bar-group__item',\n} 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; `toastContent` on the element inside each container, its\n * only child, which holds the toast's status text and content (0.15).\n */\nexport const toasterClassNames = {\n  root: 'wave-toaster',\n  toast: 'wave-toaster__toast',\n  toastContent: 'wave-toaster__toast-content',\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/**\n * Accordion.Panel: `root` on the `role=\"region\"` element; `collapse` on the element around it\n * (the element that opens and closes the region's space, 0.15).\n */\nexport const accordionPanelClassNames = {\n  root: 'wave-accordion-panel',\n  collapse: 'wave-accordion-panel__collapse',\n} 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; `collapse` on the element around\n * that group (the element that opens and closes the group's space, 0.15).\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  collapse: 'wave-tree-item__collapse',\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>` (or on the span of your\n * `expandIcon`); `list` on the `<ul>` of its sub-items; `collapse` on the element around that\n * list (the element that opens and closes the list's space, 0.15).\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  collapse: 'wave-nav-category__collapse',\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, and its collapse element Drawer's collapse class): `root` on the panel (the portaled\n * `role=\"dialog\"` element of an overlay drawer, the panel element of an inline one); `backdrop` on\n * the backdrop of a modal overlay; `collapse` on the element around an inline drawer's panel;\n * `nav` on the navigation landmark that fills the panel.\n */\nexport const navDrawerClassNames = {\n  root: 'wave-nav-drawer',\n  backdrop: 'wave-nav-drawer__backdrop',\n  collapse: 'wave-nav-drawer__collapse',\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; `collapse` on the element around an inline drawer's panel (its\n * only child), which carries the presence phases and the motion of an inline drawer; `header` on\n * the built-in header row (absent with a Drawer.Header); `titleAction` on the element of the\n * `titleAction` slot in that row; `closeButton` on every built-in Close button (which also\n * carries Button's root), in the built-in header and in each Drawer.HeaderTitle; `body` on the\n * scrolling body. The heading of its `title` prop carries Drawer.Title's class. The panel carries\n * `data-type`, `data-position` and `data-size`; the body, the header and the footer carry\n * `data-scroll-state`.\n */\nexport const drawerClassNames = {\n  root: 'wave-drawer',\n  backdrop: 'wave-drawer__backdrop',\n  collapse: 'wave-drawer__collapse',\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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"}

package/dist/lib/motion.cjs

@@ -0,0 +1,2 @@
+var e=`transition-[opacity,scale] duration-wave-gentle ease-wave-decelerate-mid data-[presence=exiting]:duration-wave-normal data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=entering]:starting:scale-85 data-[presence=exiting]:opacity-0 data-[presence=exiting]:scale-85`,t=`transition-opacity duration-wave-gentle ease-wave-easy-ease data-[presence=exiting]:duration-wave-normal motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0`,n={start:`transition-[opacity,translate] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[presence=entering]:starting:-translate-x-full data-[presence=exiting]:-translate-x-full wave-rtl:data-[presence=entering]:starting:translate-x-full wave-rtl:data-[presence=exiting]:translate-x-full`,end:`transition-[opacity,translate] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[presence=entering]:starting:translate-x-full data-[presence=exiting]:translate-x-full wave-rtl:data-[presence=entering]:starting:-translate-x-full wave-rtl:data-[presence=exiting]:-translate-x-full`,left:`transition-[opacity,translate] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[presence=entering]:starting:-translate-x-full data-[presence=exiting]:-translate-x-full`,right:`transition-[opacity,translate] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[presence=entering]:starting:translate-x-full data-[presence=exiting]:translate-x-full`,bottom:`transition-[opacity,translate] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[presence=entering]:starting:translate-y-full data-[presence=exiting]:translate-y-full`},r={small:`duration-wave-gentle`,medium:`duration-wave-slow`,large:`duration-wave-slower`,full:`duration-wave-ultra-slow`},i={small:`transition-opacity duration-wave-gentle ease-wave-linear motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0`,medium:`transition-opacity duration-wave-slow ease-wave-linear motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0`,large:`transition-opacity duration-wave-slower ease-wave-linear motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0`,full:`transition-opacity duration-wave-ultra-slow ease-wave-linear motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0`},a={start:`grid shrink-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] justify-items-end justify-end overflow-hidden data-[presence=entered]:contents not-data-[presence=entered]:*:max-w-none`,end:`grid shrink-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] justify-items-start overflow-hidden data-[presence=entered]:contents not-data-[presence=entered]:*:max-w-none`,left:`grid shrink-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] [justify-items:right] [justify-content:right] overflow-hidden data-[presence=entered]:contents not-data-[presence=entered]:*:max-w-none`,right:`grid shrink-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] [justify-items:left] [justify-content:left] overflow-hidden data-[presence=entered]:contents not-data-[presence=entered]:*:max-w-none`,bottom:`grid shrink-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] items-start overflow-hidden data-[presence=entered]:contents not-data-[presence=entered]:*:max-h-none`},o={width:`transition-[grid-template-columns,opacity] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:grid-cols-[minmax(0,0fr)] data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:grid-cols-[minmax(0,0fr)] data-[presence=exiting]:opacity-0`,height:`transition-[grid-template-rows,opacity] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:grid-rows-[minmax(0,0fr)] data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:grid-rows-[minmax(0,0fr)] data-[presence=exiting]:opacity-0`},s=`transition-[opacity,translate] duration-wave-normal ease-wave-decelerate-mid data-[presence=exiting]:duration-wave-faster data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[side=top]:data-[presence=entering]:starting:translate-y-1 data-[side=top]:data-[presence=exiting]:translate-y-1 data-[side=bottom]:data-[presence=entering]:starting:-translate-y-1 data-[side=bottom]:data-[presence=exiting]:-translate-y-1 data-[side=left]:data-[presence=entering]:starting:translate-x-1 data-[side=left]:data-[presence=exiting]:translate-x-1 data-[side=right]:data-[presence=entering]:starting:-translate-x-1 data-[side=right]:data-[presence=exiting]:-translate-x-1`,c=`transition-opacity duration-wave-faster ease-wave-easy-ease motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0`,l=`grid grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] items-start overflow-hidden data-[presence=entered]:contents`,u=`transition-[grid-template-rows,opacity] duration-wave-normal ease-wave-easy-ease-max motion-reduce:transition-none data-[presence=entering]:starting:grid-rows-[minmax(0,0fr)] data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:grid-rows-[minmax(0,0fr)] data-[presence=exiting]:opacity-0`,d=`transition-transform duration-wave-fast ease-wave-easy-ease motion-reduce:transition-none`,f=`*:transition *:duration-wave-fast *:ease-wave-easy-ease motion-reduce:*:transition-none`,p=`grid grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] not-data-[presence=entered]:overflow-hidden`,m={top:`transition-[grid-template-rows,margin-bottom,opacity,translate] duration-wave-gentle ease-wave-decelerate-mid data-[presence=exiting]:duration-wave-normal data-[presence=exiting]:ease-wave-easy-ease data-[presence=exiting]:[transition-delay:var(--wave-duration-normal),var(--wave-duration-normal),0s,0s] motion-reduce:transition-none data-[presence=entering]:starting:grid-rows-[minmax(0,0fr)] data-[presence=entering]:starting:-mb-2 data-[presence=entering]:starting:opacity-0 data-[presence=entering]:starting:-translate-y-2 data-[presence=exiting]:grid-rows-[minmax(0,0fr)] data-[presence=exiting]:-mb-2 data-[presence=exiting]:opacity-0`,bottom:`transition-[grid-template-rows,margin-bottom,opacity,translate] duration-wave-gentle ease-wave-decelerate-mid data-[presence=exiting]:duration-wave-normal data-[presence=exiting]:ease-wave-easy-ease data-[presence=exiting]:[transition-delay:var(--wave-duration-normal),var(--wave-duration-normal),0s,0s] motion-reduce:transition-none data-[presence=entering]:starting:grid-rows-[minmax(0,0fr)] data-[presence=entering]:starting:-mb-2 data-[presence=entering]:starting:opacity-0 data-[presence=entering]:starting:translate-y-2 data-[presence=exiting]:grid-rows-[minmax(0,0fr)] data-[presence=exiting]:-mb-2 data-[presence=exiting]:opacity-0`},h=`grid grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] items-end content-end overflow-hidden data-[presence=entered]:contents`,g=`transition-[grid-template-rows,margin-bottom,opacity] duration-wave-gentle ease-wave-linear motion-reduce:transition-none data-[presence=exiting]:grid-rows-[minmax(0,0fr)] data-[presence=exiting]:-mb-2 data-[presence=exiting]:opacity-0`,_=`data-[presence=entering]:starting:grid-rows-[minmax(0,0fr)] data-[presence=entering]:starting:-mb-2 data-[presence=entering]:starting:opacity-0`,v=`transition-transform duration-wave-slow ease-wave-easy-ease motion-reduce:transition-none`,y=`transition-opacity duration-wave-slow ease-wave-easy-ease motion-reduce:transition-none`,b=`after:transition-[translate,scale] after:duration-wave-slow after:ease-wave-decelerate-max motion-reduce:after:transition-none`,x=`w-2/5 animate-wave-indeterminate wave-rtl:animate-wave-indeterminate-rtl motion-reduce:w-full motion-reduce:translate-x-0 motion-reduce:animate-wave-pulse wave-rtl:motion-reduce:animate-wave-pulse`,S=`[presence=`;function C(e){return typeof e==`string`?e:e.className}function w(e,t){return e===void 0&&(t?.includes(S)??!1)}function T(e,t,n,r){return e===null?``:e===void 0?n===`none`||w(e,r)?``:t:C(e)}exports.carouselFadeMotion=y,exports.carouselSlideMotion=v,exports.collapseMotion=u,exports.collapseStructure=l,exports.dialogBackdropMotion=t,exports.dialogMotion=e,exports.drawerBackdropMotion=i,exports.drawerDurations=r,exports.drawerMotion=n,exports.expandIconMotion=d,exports.inlineDrawerMotion=o,exports.inlineDrawerStructure=a,exports.messageBarGroupEnterMotion=_,exports.messageBarGroupExitMotion=g,exports.messageBarGroupItemStructure=h,exports.navActionsRevealMotion=f,exports.popupMotion=s,exports.progressIndeterminateMotion=x,exports.resolveMotion=T,exports.tabIndicatorMotion=b,exports.toastMotion=m,exports.toastStructure=p,exports.tooltipMotion=c,exports.usesLegacyMotion=w;
+//# sourceMappingURL=motion.cjs.map

package/dist/lib/motion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.cjs","names":["dialogMotion","dialogBackdropMotion","drawerMotion","drawerDurations","drawerBackdropMotion","inlineDrawerStructure","inlineDrawerMotion","popupMotion","tooltipMotion","collapseStructure","collapseMotion","expandIconMotion","navActionsRevealMotion","toastStructure","toastMotion","messageBarGroupItemStructure","messageBarGroupExitMotion","messageBarGroupEnterMotion","carouselSlideMotion","carouselFadeMotion","tabIndicatorMotion","progressIndeterminateMotion","PRESENCE_VARIANT","slotClassName","slot","usesLegacyMotion","legacyClassName","resolveMotion","preference","recipe"],"sources":["../../src/lib/motion.ts"],"sourcesContent":["import type { MotionPreference, MotionSlot, SurfaceSize } from './types';\n\n/**\n * The motion of Wave's animated parts, in one server-safe module that imports nothing at run\n * time (types only), so a Server Component and the build's Node checks can reach it.\n *\n * Every recipe is one plain string literal per value, never a concatenation, a template or a call:\n * components compose the strings at run time, and the build reads each literal whole. A recipe\n * keys its classes on the presence core's phases (the enter's start gated on the entering phase,\n * the exit on the exiting phase), times them with Wave's duration and curve tokens, lists the\n * properties it moves and switches its transition off under reduced motion. This comment\n * describes each recipe in words and never writes a class: the CSS build reads every word of this\n * file.\n *\n * - `dialogMotion`, the Dialog surface: opacity and scale. It enters from transparent at 85% of its\n *   size over the gentle duration (250 ms) with the mid decelerating curve, and exits back to the\n *   same over the normal duration (200 ms) with the min accelerating curve.\n * - `dialogBackdropMotion`, the Dialog backdrop: opacity only, with the easy-ease curve. It fades in\n *   over the gentle duration and out over the normal duration, the surface's exit, so the backdrop\n *   never outlasts the surface (the presence core waits only for the surface).\n * - `drawerMotion`, the overlay panel of Drawer and NavDrawer, per edge: opacity and translate. It\n *   enters from transparent and moved out by its whole width (its whole height at the bottom)\n *   beyond its edge, with the mid decelerating curve, and exits back there with the min\n *   accelerating curve. The start and end edges follow the text direction (a right-to-left\n *   counterpart on the same value), the left and right edges do not mirror. It holds no duration:\n *   the panel adds its size's from `drawerDurations`.\n * - `drawerDurations`, the duration of an overlay panel per size, the same both ways: the gentle\n *   duration (250 ms) when small, the slow one (300 ms) when medium, the slower one (400 ms) when\n *   large and the ultra-slow one (500 ms) when full.\n * - `drawerBackdropMotion`, the overlay drawer's backdrop per size: opacity only, with the linear\n *   curve and its size's duration both ways, so it ends with the panel.\n * - `inlineDrawerStructure`, the element around an inline drawer's panel, per edge (not motion: it\n *   is on the element whatever its motion slot holds). While the drawer is open the element\n *   renders no box of its own, so the panel lays out in the page as it did before the element\n *   existed; while it enters or exits, the element is a clipping grid of one track on the panel's\n *   axis (columns at a side, rows at the bottom) whose minimum is zero, so the track can get\n *   smaller than the panel, padding and borders included, and it keeps its size in a flex row. The\n *   panel sits against the inner edge of that track (the end at the start edge, the start at the\n *   end edge, the physical right and left at the left and right edges, the top at the bottom\n *   edge), so it reads as sliding out to its own edge, and the track sits on that same side of the\n *   element: while the collapse is partly open, the grid gives its track only that fraction of\n *   the element, and a track left at the element's start would leave an empty strip between the\n *   visible panel and the page wherever the panel aligns to the end. While the element is not\n *   entered it also lifts the panel's own maximum on that axis (its width at a side, its height at\n *   the bottom): that maximum is a percentage, which inside the grid would follow the track and\n *   squeeze the panel's content as the track narrows, where the track should only clip the panel.\n *   Entered, the maximum applies again against the page, as before. Its track on the other axis\n *   (the row at a side, the column at the bottom) has a minimum of zero too and stays whole, so\n *   the panel fills the element on that axis as it fills its place once entered, rather than\n *   growing there to its content's own size.\n * - `inlineDrawerMotion`, the motion of that element per axis: its track and its opacity. It\n *   enters from an empty, transparent track with the mid decelerating curve and exits back to one\n *   with the min accelerating curve, so the space the panel takes in the layout opens and closes\n *   while the panel keeps its size. It holds no duration: the element adds its size's from\n *   `drawerDurations`.\n * - `popupMotion`, a positioned popup (Popover.Content, Menu.Popover and its submenus, the\n *   InfoButton note and the TeachingPopover surface): opacity and translate. It enters from\n *   transparent and moved 4px toward its anchor, on the axis of the side it opened on (the\n *   resolved physical side the surface renders as `data-side`: a popup below its anchor starts\n *   4px higher, one to its right 4px further left), over the normal duration (200 ms) with the mid\n *   decelerating curve, and exits back there over the faster duration (100 ms) with the min\n *   accelerating curve. It lists the properties it moves and never the one floating-ui places the\n *   popup with, so the popup never glides from its last position; a popup that renders no side (a\n *   TeachingPopover rendered in place, without a target) only fades.\n * - `tooltipMotion`, the Tooltip surface: opacity only. It fades in from transparent and back out\n *   over the faster duration (100 ms) with the easy-ease curve, both ways, and does not slide. Like\n *   the popups, it never lists the property floating-ui places the surface with.\n * - `collapseStructure`, the element around the part a disclosure opens and closes (Accordion's\n *   region, a Tree group, a Nav category's list; not motion: it is on the element whatever its\n *   motion slot holds). While the part is open the element renders no box of its own, so the part\n *   lays out in its parent as it did before the element existed; while it enters or exits, the\n *   element is a clipping grid of one row track whose minimum is zero, so the track can get\n *   smaller than the part, padding and borders included. The part sits at the top of that track\n *   at its own height rather than stretched to it: the track only clips the part, so a part that\n *   scrolls shows no scroll bar and keeps its line breaks, and its background and border cover\n *   all of its visible part (while the collapse is partly open, the grid gives its track only that\n *   fraction of the element, so a stretched part would be shorter than what the element shows).\n *   Its one column has a minimum of zero too and fills the element, so the part keeps the width it\n *   has once entered: a column sized by its content would grow to the part's longest unbreakable\n *   line (a long link, a label that does not wrap), and the part would be wider, its end side\n *   clipped and its lines broken anew, for as long as it moves.\n * - `collapseMotion`, the motion of that element: its row track and its opacity. It enters from\n *   an empty, transparent track and exits back to one over the normal duration (200 ms) with the\n *   max easy-ease curve, both ways, so the space the part takes opens and closes while the content\n *   keeps its width.\n * - `expandIconMotion`, the expand icon of a Nav category (its default chevron, or the span of a\n *   custom glyph): the transition of its transform over the fast duration (150 ms) with the\n *   easy-ease curve, both ways, so the chevron's half turn as the category opens and closes is\n *   animated. The turn itself is state, not motion: without this recipe the chevron still turns,\n *   at once.\n * - `navActionsRevealMotion`, the group of a Nav item's actions: the default transition on each\n *   of its direct children (so a button child keeps its colour transition, and its opacity fades)\n *   over the fast duration (150 ms) with the easy-ease curve, so an action fades in as its row is\n *   hovered or takes focus, and out again. It replaces any transition list of the children's own.\n * - `toastStructure`, the container of each toast of a Toaster (not motion: it is on the element\n *   whatever its motion slot holds): a grid of one cell around the one element that holds the\n *   toast's content, both of whose tracks have a minimum of zero. The row track can so get\n *   smaller than that content, and the column keeps the content to the container's width (a\n *   column sized by its content would grow to the content's longest unbreakable line, such as a\n *   long link, past the region's width). Unlike the elements of the disclosures it always has a\n *   box of its own (it takes focus); it clips what it holds while it enters or exits, and no\n *   longer once it is shown.\n * - `toastMotion`, the motion of that container per edge of the stack (the top or bottom edge its\n *   position names): its row track, its bottom margin, its opacity and translate. It enters over\n *   the gentle duration (250 ms) with the mid decelerating curve, all together: the track opens\n *   from empty, the margin returns from minus the region's 8px gap, and the toast fades in from\n *   transparent while it slides 8px in from beyond the stack's edge (from below at the bottom,\n *   from above at the top). It exits over the normal duration (200 ms) with the easy-ease curve:\n *   the toast fades out in place first, then the track and the margin close after a delay of the\n *   same normal duration, so the toasts around it glide together once it has faded. The margin\n *   makes up for the gap the region keeps after each toast, so nothing moves when the exited\n *   container unmounts. Under reduced motion nothing is transitioned, so the delay goes too.\n * - `messageBarGroupItemStructure`, the element around each bar of a MessageBarGroup (not motion:\n *   it is on the element whatever its motion slot holds). While the bar is shown the element\n *   renders no box of its own, so the bar is an item of the group's stack as it would be without\n *   the element; while it enters or exits, the element is a clipping grid of one row track whose\n *   minimum is zero. The bar sits at the bottom of that track at its own height, and the track at\n *   the bottom of the element: while the collapse is partly open the grid gives its track only\n *   that fraction of the element, so a track left at the top would leave an empty strip under\n *   the visible part of the bar. So the element always shows the bottom of the bar, which reads\n *   as sliding down into the space as it opens. Its one column has a minimum of zero too and fills\n *   the element, so the bar keeps the width it has once shown.\n * - `messageBarGroupExitMotion`, the default motion of that element: its row track, its bottom\n *   margin and its opacity, over the gentle duration (250 ms) with the linear curve. It exits by\n *   closing the track to empty while the margin goes to minus the group's 8px gap and the bar\n *   fades out, so the bars after it glide up together and nothing moves when the exited element\n *   unmounts.\n * - `messageBarGroupEnterMotion`, the enter a MessageBarGroup adds after the exit with its `both`\n *   animation: an added bar starts from an empty track, minus the gap and transparent, and opens\n *   on the exit's transition (250 ms, linear). It holds no transition of its own.\n * - `carouselSlideMotion`, the track of a Carousel that slides: the transition of its transform\n *   (the inline translation that shows the current page) over the slow duration (300 ms) with the\n *   easy-ease curve, so the track glides to the new page. It keys on no phase: the carousel drops\n *   it while the track follows a drag, so the track stays under the pointer, and a carousel's\n *   `motionDuration` other than 300 ms replaces the duration with an inline one.\n * - `carouselFadeMotion`, each slide of a Carousel that fades: the transition of its opacity over\n *   the slow duration (300 ms) with the easy-ease curve, so the slide that leaves fades out while\n *   the one that comes fades in, in the same place. It keys on no phase either (the carousel hides\n *   the inactive slides by their opacity), and `motionDuration` replaces its duration the same way.\n * - `tabIndicatorMotion`, the line of the selected tab of a TabList with the underline look (drawn\n *   by the tab's after pseudo-element, not by the tab itself): the transition of its translate\n *   and scale over the slow duration (300 ms) with the max decelerating curve, so the line slides\n *   and stretches from the tab selected before to the new one. It keys on no phase: for one frame\n *   after the selection moves, the TabList gives the new tab the line's start (the offset and the\n *   size ratio of the previous tab, measured in physical pixels) as two custom properties without\n *   this recipe, then clears them and adds it, so the line glides back to its own tab. Under\n *   reduced motion the line's transition is off, and the TabList writes no start either.\n * - `progressIndeterminateMotion`, the fill of an indeterminate ProgressBar (0.14's own list,\n *   unchanged): a fill two fifths of the track wide that sweeps across it with Wave's indeterminate\n *   keyframes, mirrored by the right-to-left counterpart on the same value. Under reduced motion\n *   it becomes a full-width fill that pulses in place instead, in either direction.\n *\n * The resolver below picks the classes of a part: its motion slot, the provider's preference and\n * the className rule of the parts that keep 0.14's own motion.\n */\n\n/** The Dialog surface's default motion: scale and fade, 250 ms in and 200 ms out. */\nexport const dialogMotion =\n  'transition-[opacity,scale] duration-wave-gentle ease-wave-decelerate-mid data-[presence=exiting]:duration-wave-normal data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=entering]:starting:scale-85 data-[presence=exiting]:opacity-0 data-[presence=exiting]:scale-85';\n\n/** The Dialog backdrop's default motion: a fade, 250 ms in and 200 ms out (the surface's exit). */\nexport const dialogBackdropMotion =\n  'transition-opacity duration-wave-gentle ease-wave-easy-ease data-[presence=exiting]:duration-wave-normal motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0';\n\n/**\n * An edge a drawer is attached to (Drawer's `DrawerPosition`, which lives in a client component\n * module that this module does not import).\n */\ntype DrawerEdge = 'start' | 'end' | 'left' | 'right' | 'bottom';\n\n/**\n * The overlay drawer panel's default motion per edge: a slide from beyond its edge and a fade,\n * timed by `drawerDurations` (composed at run time).\n */\nexport const drawerMotion: Readonly<Record<DrawerEdge, string>> = {\n  start:\n    'transition-[opacity,translate] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[presence=entering]:starting:-translate-x-full data-[presence=exiting]:-translate-x-full wave-rtl:data-[presence=entering]:starting:translate-x-full wave-rtl:data-[presence=exiting]:translate-x-full',\n  end: 'transition-[opacity,translate] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[presence=entering]:starting:translate-x-full data-[presence=exiting]:translate-x-full wave-rtl:data-[presence=entering]:starting:-translate-x-full wave-rtl:data-[presence=exiting]:-translate-x-full',\n  left: 'transition-[opacity,translate] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[presence=entering]:starting:-translate-x-full data-[presence=exiting]:-translate-x-full', // wave-allow-physical: left and right drawers do not mirror\n  right:\n    'transition-[opacity,translate] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[presence=entering]:starting:translate-x-full data-[presence=exiting]:translate-x-full', // wave-allow-physical: left and right drawers do not mirror\n  bottom:\n    'transition-[opacity,translate] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[presence=entering]:starting:translate-y-full data-[presence=exiting]:translate-y-full',\n};\n\n/** The overlay drawer panel's duration per size: 250, 300, 400 and 500 ms, both ways. */\nexport const drawerDurations: Readonly<Record<SurfaceSize, string>> = {\n  small: 'duration-wave-gentle',\n  medium: 'duration-wave-slow',\n  large: 'duration-wave-slower',\n  full: 'duration-wave-ultra-slow',\n};\n\n/** The overlay drawer backdrop's default motion per size: a linear fade over its size's duration. */\nexport const drawerBackdropMotion: Readonly<Record<SurfaceSize, string>> = {\n  small:\n    'transition-opacity duration-wave-gentle ease-wave-linear motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0',\n  medium:\n    'transition-opacity duration-wave-slow ease-wave-linear motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0',\n  large:\n    'transition-opacity duration-wave-slower ease-wave-linear motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0',\n  full: 'transition-opacity duration-wave-ultra-slow ease-wave-linear motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0',\n};\n\n/**\n * The structure of the element around an inline drawer's panel, per edge: no box while open, a\n * clipping one-track grid on the panel's axis while it enters or exits, the panel and the track\n * against its inner edge (so no empty strip opens next to the page), the panel without its\n * percentage maximum on that axis (so it is clipped, not squeezed), and a whole track with a zero\n * minimum on the other axis (so the panel fills the element there, as once entered).\n */\nexport const inlineDrawerStructure: Readonly<Record<DrawerEdge, string>> = {\n  start:\n    'grid shrink-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] justify-items-end justify-end overflow-hidden data-[presence=entered]:contents not-data-[presence=entered]:*:max-w-none',\n  end: 'grid shrink-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] justify-items-start overflow-hidden data-[presence=entered]:contents not-data-[presence=entered]:*:max-w-none',\n  left: 'grid shrink-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] [justify-items:right] [justify-content:right] overflow-hidden data-[presence=entered]:contents not-data-[presence=entered]:*:max-w-none', // wave-allow-physical: the consumer asked for the physical left edge\n  right:\n    'grid shrink-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] [justify-items:left] [justify-content:left] overflow-hidden data-[presence=entered]:contents not-data-[presence=entered]:*:max-w-none', // wave-allow-physical: the consumer asked for the physical right edge\n  bottom:\n    'grid shrink-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] items-start overflow-hidden data-[presence=entered]:contents not-data-[presence=entered]:*:max-h-none',\n};\n\n/**\n * The inline drawer's default motion per axis, on the element around its panel: the track opens\n * from zero and closes back with a fade, timed by `drawerDurations` (composed at run time).\n */\nexport const inlineDrawerMotion: Readonly<Record<'width' | 'height', string>> = {\n  width:\n    'transition-[grid-template-columns,opacity] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:grid-cols-[minmax(0,0fr)] data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:grid-cols-[minmax(0,0fr)] data-[presence=exiting]:opacity-0',\n  height:\n    'transition-[grid-template-rows,opacity] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:grid-rows-[minmax(0,0fr)] data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:grid-rows-[minmax(0,0fr)] data-[presence=exiting]:opacity-0',\n};\n\n/**\n * The default motion of a positioned popup (Popover.Content, Menu.Popover and its submenus, the\n * InfoButton note and the TeachingPopover surface): a fade and a 4px slide away from its anchor,\n * by the side it opened on, 200 ms in and 100 ms out; only the fade without a side.\n */\nexport const popupMotion =\n  'transition-[opacity,translate] duration-wave-normal ease-wave-decelerate-mid data-[presence=exiting]:duration-wave-faster data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[side=top]:data-[presence=entering]:starting:translate-y-1 data-[side=top]:data-[presence=exiting]:translate-y-1 data-[side=bottom]:data-[presence=entering]:starting:-translate-y-1 data-[side=bottom]:data-[presence=exiting]:-translate-y-1 data-[side=left]:data-[presence=entering]:starting:translate-x-1 data-[side=left]:data-[presence=exiting]:translate-x-1 data-[side=right]:data-[presence=entering]:starting:-translate-x-1 data-[side=right]:data-[presence=exiting]:-translate-x-1'; // wave-allow-physical: data-side is the resolved physical side\n\n/** The Tooltip surface's default motion: a fade, 100 ms both ways, without a slide. */\nexport const tooltipMotion =\n  'transition-opacity duration-wave-faster ease-wave-easy-ease motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0';\n\n/**\n * The structure of the element around a disclosure's collapsing part (Accordion's region, a Tree\n * group, a Nav category's list): no box while open, a clipping one-track grid of rows while it\n * enters or exits, with the part at the top of the track at its own height (clipped, not\n * squeezed) and in a whole column with a zero minimum (the width it has once entered).\n */\nexport const collapseStructure =\n  'grid grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] items-start overflow-hidden data-[presence=entered]:contents';\n\n/**\n * A disclosure's default collapse, on the element around its part: the row track opens from zero\n * and closes back with a fade, 200 ms both ways.\n */\nexport const collapseMotion =\n  'transition-[grid-template-rows,opacity] duration-wave-normal ease-wave-easy-ease-max motion-reduce:transition-none data-[presence=entering]:starting:grid-rows-[minmax(0,0fr)] data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:grid-rows-[minmax(0,0fr)] data-[presence=exiting]:opacity-0';\n\n/** The default motion of a Nav category's expand icon: its turn is animated, 150 ms both ways. */\nexport const expandIconMotion =\n  'transition-transform duration-wave-fast ease-wave-easy-ease motion-reduce:transition-none';\n\n/**\n * The default reveal of a Nav item's actions, on their group: each action fades in and out as\n * its row is hovered or takes focus, 150 ms both ways.\n */\nexport const navActionsRevealMotion =\n  '*:transition *:duration-wave-fast *:ease-wave-easy-ease motion-reduce:*:transition-none';\n\n/**\n * The structure of a toast's container: a one-cell grid around the toast's content element, its\n * tracks with a zero minimum (the content keeps the container's width), clipping it while the\n * container enters or exits.\n */\nexport const toastStructure =\n  'grid grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] not-data-[presence=entered]:overflow-hidden';\n\n/**\n * A toast container's default motion per edge of its stack: it opens, fades in and slides from\n * that edge together, 250 ms; it fades out over 200 ms, then closes over 200 ms more.\n */\nexport const toastMotion: Readonly<Record<'top' | 'bottom', string>> = {\n  top: 'transition-[grid-template-rows,margin-bottom,opacity,translate] duration-wave-gentle ease-wave-decelerate-mid data-[presence=exiting]:duration-wave-normal data-[presence=exiting]:ease-wave-easy-ease data-[presence=exiting]:[transition-delay:var(--wave-duration-normal),var(--wave-duration-normal),0s,0s] motion-reduce:transition-none data-[presence=entering]:starting:grid-rows-[minmax(0,0fr)] data-[presence=entering]:starting:-mb-2 data-[presence=entering]:starting:opacity-0 data-[presence=entering]:starting:-translate-y-2 data-[presence=exiting]:grid-rows-[minmax(0,0fr)] data-[presence=exiting]:-mb-2 data-[presence=exiting]:opacity-0',\n  bottom:\n    'transition-[grid-template-rows,margin-bottom,opacity,translate] duration-wave-gentle ease-wave-decelerate-mid data-[presence=exiting]:duration-wave-normal data-[presence=exiting]:ease-wave-easy-ease data-[presence=exiting]:[transition-delay:var(--wave-duration-normal),var(--wave-duration-normal),0s,0s] motion-reduce:transition-none data-[presence=entering]:starting:grid-rows-[minmax(0,0fr)] data-[presence=entering]:starting:-mb-2 data-[presence=entering]:starting:opacity-0 data-[presence=entering]:starting:translate-y-2 data-[presence=exiting]:grid-rows-[minmax(0,0fr)] data-[presence=exiting]:-mb-2 data-[presence=exiting]:opacity-0',\n};\n\n/**\n * The structure of the element around each bar of a MessageBarGroup: no box while the bar is\n * shown, a clipping one-track grid of rows while it enters or exits, with the bar at the bottom\n * of the track at its own height and the track at the bottom of the element (so no empty strip\n * opens under the bar), in a whole column with a zero minimum (the width it has once shown).\n */\nexport const messageBarGroupItemStructure =\n  'grid grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] items-end content-end overflow-hidden data-[presence=entered]:contents';\n\n/**\n * A MessageBarGroup bar's default exit, on the element around it: its row track and its bottom\n * margin close while it fades out, 250 ms.\n */\nexport const messageBarGroupExitMotion =\n  'transition-[grid-template-rows,margin-bottom,opacity] duration-wave-gentle ease-wave-linear motion-reduce:transition-none data-[presence=exiting]:grid-rows-[minmax(0,0fr)] data-[presence=exiting]:-mb-2 data-[presence=exiting]:opacity-0';\n\n/**\n * The enter a MessageBarGroup adds to the exit with `animate=\"both\"`: an added bar's row track and\n * bottom margin open from closed while it fades in, on the exit's transition.\n */\nexport const messageBarGroupEnterMotion =\n  'data-[presence=entering]:starting:grid-rows-[minmax(0,0fr)] data-[presence=entering]:starting:-mb-2 data-[presence=entering]:starting:opacity-0';\n\n/** A sliding Carousel track's motion: its transform glides to the new page, 300 ms. */\nexport const carouselSlideMotion =\n  'transition-transform duration-wave-slow ease-wave-easy-ease motion-reduce:transition-none';\n\n/** A fading Carousel slide's motion: it fades in or out in place, 300 ms. */\nexport const carouselFadeMotion =\n  'transition-opacity duration-wave-slow ease-wave-easy-ease motion-reduce:transition-none';\n\n/**\n * The default slide of a TabList's selection line, on the selected tab's after pseudo-element: it\n * moves and stretches from the tab selected before, 300 ms.\n */\nexport const tabIndicatorMotion =\n  'after:transition-[translate,scale] after:duration-wave-slow after:ease-wave-decelerate-max motion-reduce:after:transition-none';\n\n/**\n * An indeterminate ProgressBar fill's default motion: it sweeps across the track, mirrored in\n * right-to-left, and pulses at full width under reduced motion.\n */\nexport const progressIndeterminateMotion =\n  'w-2/5 animate-wave-indeterminate wave-rtl:animate-wave-indeterminate-rtl motion-reduce:w-full motion-reduce:translate-x-0 motion-reduce:animate-wave-pulse wave-rtl:motion-reduce:animate-wave-pulse';\n\n/** The text of a class list that marks a presence variant written for 0.14's own motion. */\nconst PRESENCE_VARIANT = '[presence=';\n\nfunction slotClassName(slot: MotionSlot): string {\n  return typeof slot === 'string' ? slot : slot.className;\n}\n\n/**\n * Whether a part keeps 0.14's own motion: no slot, and a `className` that holds a presence\n * variant, which the consumer wrote to animate the surface themselves. That `className` then\n * turns the default motion off, as it did before the default existed.\n *\n * @param slot - The part's `motion` prop.\n * @param legacyClassName - The part's `className`; omit it for a part without that rule.\n */\nexport function usesLegacyMotion(\n  slot: MotionSlot | null | undefined,\n  legacyClassName?: string,\n): boolean {\n  return slot === undefined && (legacyClassName?.includes(PRESENCE_VARIANT) ?? false);\n}\n\n/**\n * The motion classes of an animated part: `null` none; a string or `{ className }` the\n * consumer's classes; `undefined` none under the provider's `'none'`, else `recipe`.\n * `legacyClassName` (the parts that keep 0.14's behaviour): a value containing a presence variant\n * gives no default motion.\n *\n * @param slot - The part's `motion` prop: `undefined` the default, `null` none, a value replaces it.\n * @param recipe - The part's default motion classes.\n * @param preference - The `motion` of the nearest `WaveProvider`.\n * @param legacyClassName - The part's `className`, for the parts that keep 0.14's behaviour.\n */\nexport function resolveMotion(\n  slot: MotionSlot | null | undefined,\n  recipe: string,\n  preference: MotionPreference,\n  legacyClassName?: string,\n): string {\n  if (slot === null) return '';\n  if (slot !== undefined) return slotClassName(slot);\n  if (preference === 'none') return '';\n  if (usesLegacyMotion(slot, legacyClassName)) return '';\n  return recipe;\n}\n"],"mappings":"AA6JA,IAAaA,EACX,iWAGWC,EACX,uNAYWC,EAAqD,CAChE,MACE,maACF,IAAK,maACL,KAAM,qTACN,MACE,mTACF,OACE,kTACJ,EAGaC,EAAyD,CACpE,MAAO,uBACP,OAAQ,qBACR,MAAO,uBACP,KAAM,0BACR,EAGaC,EAA8D,CACzE,MACE,uKACF,OACE,qKACF,MACE,uKACF,KAAM,0KACR,EASaC,EAA8D,CACzE,MACE,4LACF,IAAK,kLACL,KAAM,4MACN,MACE,0MACF,OACE,yKACJ,EAMaC,EAAmE,CAC9E,MACE,iVACF,OACE,6UACJ,EAOaC,EACX,iwBAGWC,EACX,0KAQWC,EACX,wHAMWC,EACX,iTAGWC,EACX,4FAMWC,EACX,0FAOWC,EACX,uGAMWC,EAA0D,CACrE,IAAK,moBACL,OACE,ioBACJ,EAQaC,EACX,kIAMWC,EACX,8OAMWC,EACX,kJAGWC,EACX,4FAGWC,EACX,0FAMWC,EACX,iIAMWC,EACX,uMAGIC,EAAmB,aAEzB,SAASC,EAAc,EAA0B,CAC/C,OAAO,OAAOC,GAAS,SAAWA,EAAOA,EAAK,SAChD,CAUA,SAAgBC,EACd,EACA,EACS,CACT,OAAOD,IAAS,IAAA,KAAcE,GAAiB,SAASJ,CAAgB,GAAK,GAC/E,CAaA,SAAgBK,EACd,EACA,EACA,EACA,EACQ,CAKR,OAJIH,IAAS,KAAa,GACtBA,IAAS,IAAA,GACTI,IAAe,QACfH,EAAiBD,EAAME,CAAe,EAAU,GAC7CG,EAHwBN,EAAcC,CAAI,CAInD"}

package/dist/lib/motion.mjs

@@ -0,0 +1,43 @@
+//#region src/lib/motion.ts
+var e = "transition-[opacity,scale] duration-wave-gentle ease-wave-decelerate-mid data-[presence=exiting]:duration-wave-normal data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=entering]:starting:scale-85 data-[presence=exiting]:opacity-0 data-[presence=exiting]:scale-85", t = "transition-opacity duration-wave-gentle ease-wave-easy-ease data-[presence=exiting]:duration-wave-normal motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0", n = {
+	start: "transition-[opacity,translate] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[presence=entering]:starting:-translate-x-full data-[presence=exiting]:-translate-x-full wave-rtl:data-[presence=entering]:starting:translate-x-full wave-rtl:data-[presence=exiting]:translate-x-full",
+	end: "transition-[opacity,translate] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[presence=entering]:starting:translate-x-full data-[presence=exiting]:translate-x-full wave-rtl:data-[presence=entering]:starting:-translate-x-full wave-rtl:data-[presence=exiting]:-translate-x-full",
+	left: "transition-[opacity,translate] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[presence=entering]:starting:-translate-x-full data-[presence=exiting]:-translate-x-full",
+	right: "transition-[opacity,translate] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[presence=entering]:starting:translate-x-full data-[presence=exiting]:translate-x-full",
+	bottom: "transition-[opacity,translate] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[presence=entering]:starting:translate-y-full data-[presence=exiting]:translate-y-full"
+}, r = {
+	small: "duration-wave-gentle",
+	medium: "duration-wave-slow",
+	large: "duration-wave-slower",
+	full: "duration-wave-ultra-slow"
+}, i = {
+	small: "transition-opacity duration-wave-gentle ease-wave-linear motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0",
+	medium: "transition-opacity duration-wave-slow ease-wave-linear motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0",
+	large: "transition-opacity duration-wave-slower ease-wave-linear motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0",
+	full: "transition-opacity duration-wave-ultra-slow ease-wave-linear motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0"
+}, a = {
+	start: "grid shrink-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] justify-items-end justify-end overflow-hidden data-[presence=entered]:contents not-data-[presence=entered]:*:max-w-none",
+	end: "grid shrink-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] justify-items-start overflow-hidden data-[presence=entered]:contents not-data-[presence=entered]:*:max-w-none",
+	left: "grid shrink-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] [justify-items:right] [justify-content:right] overflow-hidden data-[presence=entered]:contents not-data-[presence=entered]:*:max-w-none",
+	right: "grid shrink-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] [justify-items:left] [justify-content:left] overflow-hidden data-[presence=entered]:contents not-data-[presence=entered]:*:max-w-none",
+	bottom: "grid shrink-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] items-start overflow-hidden data-[presence=entered]:contents not-data-[presence=entered]:*:max-h-none"
+}, o = {
+	width: "transition-[grid-template-columns,opacity] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:grid-cols-[minmax(0,0fr)] data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:grid-cols-[minmax(0,0fr)] data-[presence=exiting]:opacity-0",
+	height: "transition-[grid-template-rows,opacity] ease-wave-decelerate-mid data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:grid-rows-[minmax(0,0fr)] data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:grid-rows-[minmax(0,0fr)] data-[presence=exiting]:opacity-0"
+}, s = "transition-[opacity,translate] duration-wave-normal ease-wave-decelerate-mid data-[presence=exiting]:duration-wave-faster data-[presence=exiting]:ease-wave-accelerate-min motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0 data-[side=top]:data-[presence=entering]:starting:translate-y-1 data-[side=top]:data-[presence=exiting]:translate-y-1 data-[side=bottom]:data-[presence=entering]:starting:-translate-y-1 data-[side=bottom]:data-[presence=exiting]:-translate-y-1 data-[side=left]:data-[presence=entering]:starting:translate-x-1 data-[side=left]:data-[presence=exiting]:translate-x-1 data-[side=right]:data-[presence=entering]:starting:-translate-x-1 data-[side=right]:data-[presence=exiting]:-translate-x-1", c = "transition-opacity duration-wave-faster ease-wave-easy-ease motion-reduce:transition-none data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:opacity-0", l = "grid grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] items-start overflow-hidden data-[presence=entered]:contents", u = "transition-[grid-template-rows,opacity] duration-wave-normal ease-wave-easy-ease-max motion-reduce:transition-none data-[presence=entering]:starting:grid-rows-[minmax(0,0fr)] data-[presence=entering]:starting:opacity-0 data-[presence=exiting]:grid-rows-[minmax(0,0fr)] data-[presence=exiting]:opacity-0", d = "transition-transform duration-wave-fast ease-wave-easy-ease motion-reduce:transition-none", f = "*:transition *:duration-wave-fast *:ease-wave-easy-ease motion-reduce:*:transition-none", p = "grid grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] not-data-[presence=entered]:overflow-hidden", m = {
+	top: "transition-[grid-template-rows,margin-bottom,opacity,translate] duration-wave-gentle ease-wave-decelerate-mid data-[presence=exiting]:duration-wave-normal data-[presence=exiting]:ease-wave-easy-ease data-[presence=exiting]:[transition-delay:var(--wave-duration-normal),var(--wave-duration-normal),0s,0s] motion-reduce:transition-none data-[presence=entering]:starting:grid-rows-[minmax(0,0fr)] data-[presence=entering]:starting:-mb-2 data-[presence=entering]:starting:opacity-0 data-[presence=entering]:starting:-translate-y-2 data-[presence=exiting]:grid-rows-[minmax(0,0fr)] data-[presence=exiting]:-mb-2 data-[presence=exiting]:opacity-0",
+	bottom: "transition-[grid-template-rows,margin-bottom,opacity,translate] duration-wave-gentle ease-wave-decelerate-mid data-[presence=exiting]:duration-wave-normal data-[presence=exiting]:ease-wave-easy-ease data-[presence=exiting]:[transition-delay:var(--wave-duration-normal),var(--wave-duration-normal),0s,0s] motion-reduce:transition-none data-[presence=entering]:starting:grid-rows-[minmax(0,0fr)] data-[presence=entering]:starting:-mb-2 data-[presence=entering]:starting:opacity-0 data-[presence=entering]:starting:translate-y-2 data-[presence=exiting]:grid-rows-[minmax(0,0fr)] data-[presence=exiting]:-mb-2 data-[presence=exiting]:opacity-0"
+}, h = "grid grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] items-end content-end overflow-hidden data-[presence=entered]:contents", g = "transition-[grid-template-rows,margin-bottom,opacity] duration-wave-gentle ease-wave-linear motion-reduce:transition-none data-[presence=exiting]:grid-rows-[minmax(0,0fr)] data-[presence=exiting]:-mb-2 data-[presence=exiting]:opacity-0", _ = "data-[presence=entering]:starting:grid-rows-[minmax(0,0fr)] data-[presence=entering]:starting:-mb-2 data-[presence=entering]:starting:opacity-0", v = "transition-transform duration-wave-slow ease-wave-easy-ease motion-reduce:transition-none", y = "transition-opacity duration-wave-slow ease-wave-easy-ease motion-reduce:transition-none", b = "after:transition-[translate,scale] after:duration-wave-slow after:ease-wave-decelerate-max motion-reduce:after:transition-none", x = "w-2/5 animate-wave-indeterminate wave-rtl:animate-wave-indeterminate-rtl motion-reduce:w-full motion-reduce:translate-x-0 motion-reduce:animate-wave-pulse wave-rtl:motion-reduce:animate-wave-pulse", S = "[presence=";
+function C(e) {
+	return typeof e == "string" ? e : e.className;
+}
+function w(e, t) {
+	return e === void 0 && (t?.includes(S) ?? !1);
+}
+function T(e, t, n, r) {
+	return e === null ? "" : e === void 0 ? n === "none" || w(e, r) ? "" : t : C(e);
+}
+//#endregion
+export { y as carouselFadeMotion, v as carouselSlideMotion, u as collapseMotion, l as collapseStructure, t as dialogBackdropMotion, e as dialogMotion, i as drawerBackdropMotion, r as drawerDurations, n as drawerMotion, d as expandIconMotion, o as inlineDrawerMotion, a as inlineDrawerStructure, _ as messageBarGroupEnterMotion, g as messageBarGroupExitMotion, h as messageBarGroupItemStructure, f as navActionsRevealMotion, s as popupMotion, x as progressIndeterminateMotion, T as resolveMotion, b as tabIndicatorMotion, m as toastMotion, p as toastStructure, c as tooltipMotion, w as usesLegacyMotion };
+
+//# sourceMappingURL=motion.mjs.map