@mortenbrudvik/waveui 0.8.0 → 0.9.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","badgeClassNames","counterBadgeClassNames","presenceBadgeClassNames","tagClassNames","personaClassNames","dividerClassNames","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","comboboxClassNames","dropdownClassNames","tagPickerClassNames","timePickerClassNames","datePickerClassNames","swatchPickerClassNames","colorPickerClassNames","colorPickerHexFieldClassNames","colorPickerSwatchesClassNames","colorPickerPreviewClassNames","colorAreaClassNames","colorSliderClassNames","alphaSliderClassNames","ratingClassNames","ratingDisplayClassNames","cardClassNames","cardHeaderClassNames","cardBodyClassNames","cardFooterClassNames","accordionClassNames","accordionItemClassNames","accordionTriggerClassNames","accordionPanelClassNames","tabListClassNames","tabListTabClassNames","tabListPanelClassNames","tabListPanelsClassNames","treeClassNames","treeItemClassNames","treeItemPersonaLayoutClassNames","carouselClassNames","carouselItemClassNames","overflowClassNames","overflowItemClassNames","stackClassNames","flexClassNames","gridClassNames","breadcrumbClassNames","breadcrumbItemClassNames","menuClassNames","menuItemClassNames","menuItemCheckboxClassNames","menuItemRadioClassNames","menuItemSwitchClassNames","menuItemLinkClassNames","menuDividerClassNames","menuPopoverClassNames","menuGroupClassNames","menuGroupHeaderClassNames","menuSplitGroupClassNames","navClassNames","navCategoryClassNames","navItemClassNames","navSubItemClassNames","paginationClassNames","stepperClassNames","stepperStepClassNames","dialogContentClassNames","dialogTitleClassNames","dialogFooterClassNames","popoverContentClassNames","tooltipClassNames","drawerClassNames","drawerTitleClassNames","teachingPopoverClassNames","tableClassNames","tableHeaderClassNames","tableHeaderCellClassNames","tableBodyClassNames","tableRowClassNames","tableCellClassNames","dataGridClassNames","dataGridHeaderClassNames","dataGridHeaderCellClassNames","dataGridBodyClassNames","dataGridRowClassNames","dataGridCellClassNames","textClassNames","waveProviderClassNames","portalClassNames"],"sources":["../../src/lib/classNames.ts"],"sourcesContent":["/**\n * Stable class names of every public component and part. A root class sits on the element that\n * receives your `className`, and a part class on each element that a prop or slot fills or that\n * draws structure (an icon, a dismiss button, a track, a surface). Style them from your own CSS,\n * or build a typed selector from a constant (`` `.${buttonClassNames.icon}` ``). This module\n * imports nothing and holds string constants only, so a React Server Component can read it.\n *\n * - **Names.** A root is `wave-` plus the kebab-cased flat export name (`Button` → `wave-button`,\n *   `CardHeader` → `wave-card-header`); a part is the root, two underscores and the kebab-cased\n *   part key (`wave-button__icon`); a constant is the camel-cased flat name plus `ClassNames`\n *   (`cardHeaderClassNames`). WaveProvider and Portal keep their existing scope classes,\n *   `wave-root` and `wave-portal`.\n * - **Placement.** A component puts its root class first in its class list, so your `className`\n *   still wins a conflict; a slot part keeps its class when a slot object renders another element\n *   (`icon={{ as: 'img', … }}`).\n * - **Variants and nesting.** A variant also carries the classes of the component it is built on\n *   (ToggleButton's root is `wave-button wave-toggle-button`, its icon\n *   `wave-button__icon wave-toggle-button__icon`), and a public component rendered inside another\n *   also carries the parent's part class (SplitButton's halves are `wave-button` plus\n *   `wave-split-button__primary-action-button` or `wave-split-button__menu-button`).\n * - **No state classes.** State lives in `data-*` attributes and ARIA (`[data-pressed]`,\n *   `[data-disabled]`, `[aria-expanded='true']`).\n * - **Stability.** Before 1.0 no class is removed; a renamed part keeps its old class next to the\n *   new one until then.\n *\n * Not to be confused with the internal `buttonClassName()` helper of `buttonStyles.ts` (one\n * letter shorter), which returns Button's utility classes.\n */\n\n// ---------------------------------------------------------------------------\n// button\n// ---------------------------------------------------------------------------\n\n/**\n * Button: `root` on the rendered element (`<button>`, or your `as`); `icon` on the icon box.\n * Style them from your own CSS (`.wave-button`, `.wave-button__icon`). State is not a class: use\n * the `data-*` attributes (`[data-pressed]`, `[data-disabled]`).\n */\nexport const buttonClassNames = {\n  root: 'wave-button',\n  icon: 'wave-button__icon',\n} as const;\n\n/**\n * CompoundButton (also carries Button's root and icon classes): `root` on the rendered element;\n * `icon` on the icon box (Button's icon span in the icon-only layout); `contentContainer` on the\n * text column; `primaryText` on the main line; `secondaryText` on the second line.\n */\nexport const compoundButtonClassNames = {\n  root: 'wave-compound-button',\n  icon: 'wave-compound-button__icon',\n  contentContainer: 'wave-compound-button__content-container',\n  primaryText: 'wave-compound-button__primary-text',\n  secondaryText: 'wave-compound-button__secondary-text',\n} as const;\n\n/**\n * ToggleButton (also carries Button's root and icon classes): `root` on the `<button>`; `icon` on\n * Button's icon span.\n */\nexport const toggleButtonClassNames = {\n  root: 'wave-toggle-button',\n  icon: 'wave-toggle-button__icon',\n} as const;\n\n/**\n * SplitButton: `root` on the `role=\"group\"` element; `primaryActionButton` and `menuButton` on its\n * two Buttons (which also carry Button's root); `icon` on the primary half's icon span and\n * `menuIcon` on the menu half's (both also carry Button's icon class).\n */\nexport const splitButtonClassNames = {\n  root: 'wave-split-button',\n  primaryActionButton: 'wave-split-button__primary-action-button',\n  menuButton: 'wave-split-button__menu-button',\n  icon: 'wave-split-button__icon',\n  menuIcon: 'wave-split-button__menu-icon',\n} as const;\n\n/**\n * MenuButton (also carries Button's root and icon classes): `root` on the `<button>`; `icon` on\n * Button's icon span; `menuIcon` on the default chevron `<svg>`, or on the span of your\n * `menuIcon`.\n */\nexport const menuButtonClassNames = {\n  root: 'wave-menu-button',\n  icon: 'wave-menu-button__icon',\n  menuIcon: 'wave-menu-button__menu-icon',\n} as const;\n\n/** Link: `root` on the rendered element (`<a>`, or your `as`). */\nexport const linkClassNames = { root: 'wave-link' } as const;\n\n/** Toolbar: `root` on the `role=\"toolbar\"` element (your `as`, default `<div>`). */\nexport const toolbarClassNames = { root: 'wave-toolbar' } as const;\n\n/**\n * Toolbar.Button (also carries Button's root and icon classes): `root` on the rendered element;\n * `icon` on Button's icon span (the icon box of `vertical`).\n */\nexport const toolbarButtonClassNames = {\n  root: 'wave-toolbar-button',\n  icon: 'wave-toolbar-button__icon',\n} as const;\n\n/**\n * Toolbar.ToggleButton (also carries the root and icon classes of Button and ToggleButton):\n * `root` on the `<button>`; `icon` on the icon span.\n */\nexport const toolbarToggleButtonClassNames = {\n  root: 'wave-toolbar-toggle-button',\n  icon: 'wave-toolbar-toggle-button__icon',\n} as const;\n\n/**\n * Toolbar.RadioButton (also carries the root and icon classes of Button and ToggleButton):\n * `root` on the `role=\"radio\"` button; `icon` on the icon span.\n */\nexport const toolbarRadioButtonClassNames = {\n  root: 'wave-toolbar-radio-button',\n  icon: 'wave-toolbar-radio-button__icon',\n} as const;\n\n/** Toolbar.RadioGroup: `root` on the `role=\"radiogroup\"` element. */\nexport const toolbarRadioGroupClassNames = { root: 'wave-toolbar-radio-group' } as const;\n\n/** Toolbar.Group: `root` on the group element. */\nexport const toolbarGroupClassNames = { root: 'wave-toolbar-group' } as const;\n\n/** Toolbar.Divider: `root` on the `role=\"separator\"` element. */\nexport const toolbarDividerClassNames = { root: 'wave-toolbar-divider' } as const;\n\n// ---------------------------------------------------------------------------\n// data-display\n// ---------------------------------------------------------------------------\n\n/**\n * Avatar: `root` on the avatar span (with `badge`, on the outer wrapper); `visual` on the circle\n * (the root without `badge`, the inner span with it); `image` on the `<img>` (or the element of\n * your `image` slot); `icon` on the `icon` slot, else on the default person `<svg>`; `initials`\n * on the initials span; `badge` on the `badge` slot.\n */\nexport const avatarClassNames = {\n  root: 'wave-avatar',\n  visual: 'wave-avatar__visual',\n  image: 'wave-avatar__image',\n  icon: 'wave-avatar__icon',\n  initials: 'wave-avatar__initials',\n  badge: 'wave-avatar__badge',\n} as const;\n\n/**\n * AvatarGroup: `root` on the `role=\"group\"` element; `item` on the wrapper around each shown\n * member; `overflowButton` on the \"+N\" button; `surface` on its popup; `list` on the popup's\n * `<ul>`; `listItem` on each of its `<li>`.\n */\nexport const avatarGroupClassNames = {\n  root: 'wave-avatar-group',\n  item: 'wave-avatar-group__item',\n  overflowButton: 'wave-avatar-group__overflow-button',\n  surface: 'wave-avatar-group__surface',\n  list: 'wave-avatar-group__list',\n  listItem: 'wave-avatar-group__list-item',\n} 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>`); `primaryText` on the content\n * span; `dismissButton` on the Dismiss button; `dismissIcon` on the icon inside it (what\n * `dismissIcon` renders, a merged Button's icon span, else the default `<svg>`).\n */\nexport const tagClassNames = {\n  root: 'wave-tag',\n  primaryText: 'wave-tag__primary-text',\n  dismissButton: 'wave-tag__dismiss-button',\n  dismissIcon: 'wave-tag__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} 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/** InfoLabel: `root` on the outer span; `infoButton` on the info button; `info` on its popup. */\nexport const infoLabelClassNames = {\n  root: 'wave-info-label',\n  infoButton: 'wave-info-label__info-button',\n  info: 'wave-info-label__info',\n} as const;\n\n/** Image: `root` on the `<img>`. */\nexport const imageClassNames = { root: 'wave-image' } as const;\n\n/** List: `root` on the `<ul>` (the `role=\"grid\"` element of a selectable list with actions). */\nexport const listClassNames = { root: 'wave-list' } as const;\n\n/**\n * List.Item: `root` on the `<li>` (the `role=\"row\"` element of a list with actions); `content` on\n * the content element; `action` on the action cell.\n */\nexport const listItemClassNames = {\n  root: 'wave-list-item',\n  content: 'wave-list-item__content',\n  action: 'wave-list-item__action',\n} as const;\n\n// ---------------------------------------------------------------------------\n// feedback\n// ---------------------------------------------------------------------------\n\n/**\n * MessageBar: `root` on the bar; `icon` on the status icon span; `body` on the text column (it\n * holds `MessageBar.Title`); `dismissButton` on the Dismiss button; `dismissIcon` on the icon\n * inside it (what `dismiss` renders, a merged Button's icon span, else the default `<svg>`).\n */\nexport const messageBarClassNames = {\n  root: 'wave-message-bar',\n  icon: 'wave-message-bar__icon',\n  body: 'wave-message-bar__body',\n  dismissButton: 'wave-message-bar__dismiss-button',\n  dismissIcon: 'wave-message-bar__dismiss-icon',\n} as const;\n\n/** MessageBar.Title: `root` on the title span. */\nexport const messageBarTitleClassNames = { root: 'wave-message-bar-title' } as const;\n\n/** MessageBar.Actions: `root` on the element that holds the actions. */\nexport const messageBarActionsClassNames = { root: 'wave-message-bar-actions' } as const;\n\n/**\n * ProgressBar: `root` on the `role=\"progressbar\"` element (the track); `bar` on the fill; `label`\n * on the label of `showLabel` (a sibling of the root).\n */\nexport const progressBarClassNames = {\n  root: 'wave-progress-bar',\n  bar: 'wave-progress-bar__bar',\n  label: 'wave-progress-bar__label',\n} as const;\n\n/**\n * Spinner: `root` on the outer span; `spinner` on the ring; `label` on the label span (also while\n * only screen readers get it, without `labelVisible`).\n */\nexport const spinnerClassNames = {\n  root: 'wave-spinner',\n  spinner: 'wave-spinner__spinner',\n  label: 'wave-spinner__label',\n} as const;\n\n/** Skeleton: `root` on the placeholder element. */\nexport const skeletonClassNames = { root: 'wave-skeleton' } as const;\n\n/** Skeleton.Group: `root` on the group element. */\nexport const skeletonGroupClassNames = { root: 'wave-skeleton-group' } as const;\n\n/**\n * Toast: `root` on the toast; `icon` on the status icon span (or your `icon` slot); `content` on\n * the text column that holds the title, body and footer; `dismissButton` on the Dismiss button.\n */\nexport const toastClassNames = {\n  root: 'wave-toast',\n  icon: 'wave-toast__icon',\n  content: 'wave-toast__content',\n  dismissButton: 'wave-toast__dismiss-button',\n} as const;\n\n/**\n * Toast.Title: `root` on the title row (also the one the `title` prop renders); `label` on the\n * title text, which names the toast; `action` on the `action` slot at the row's end.\n */\nexport const toastTitleClassNames = {\n  root: 'wave-toast-title',\n  label: 'wave-toast-title__label',\n  action: 'wave-toast-title__action',\n} as const;\n\n/**\n * Toast.Body: `root` on the body element (also the one plain children render); `subtitle` on the\n * `subtitle` line inside it.\n */\nexport const toastBodyClassNames = {\n  root: 'wave-toast-body',\n  subtitle: 'wave-toast-body__subtitle',\n} as const;\n\n/** Toast.Footer: `root` on the row of actions. */\nexport const toastFooterClassNames = { root: 'wave-toast-footer' } as const;\n\n/**\n * Toaster: `root` on the portaled toast region; `toast` on the `role=\"group\"` container the\n * Toaster renders around each toast.\n */\nexport const toasterClassNames = {\n  root: 'wave-toaster',\n  toast: 'wave-toaster__toast',\n} as const;\n\n// ---------------------------------------------------------------------------\n// input\n// ---------------------------------------------------------------------------\n\n/**\n * Input: `root` on the `<input>`, or, with `contentBefore` or `contentAfter` content, on the\n * wrapper that draws the field; `input` on the `<input>` (also when it is the root);\n * `contentBefore` and `contentAfter` on the slot spans; `errorMessage` on the `role=\"alert\"`\n * message after the control.\n */\nexport const inputClassNames = {\n  root: 'wave-input',\n  input: 'wave-input__input',\n  contentBefore: 'wave-input__content-before',\n  contentAfter: 'wave-input__content-after',\n  errorMessage: 'wave-input__error-message',\n} as const;\n\n/** Textarea: `root` on the `<textarea>`; `errorMessage` on the message after it, as Input's. */\nexport const textareaClassNames = {\n  root: 'wave-textarea',\n  errorMessage: 'wave-textarea__error-message',\n} as const;\n\n/** Select: `root` on the `<select>`; `errorMessage` on the message after it, as Input's. */\nexport const selectClassNames = {\n  root: 'wave-select',\n  errorMessage: 'wave-select__error-message',\n} as const;\n\n/**\n * Field: `root` on the field element; `label` on the `<label>`; `required` on the asterisk;\n * `validationMessage` on the message; `validationMessageIcon` on its icon; `hint` on the hint.\n */\nexport const fieldClassNames = {\n  root: 'wave-field',\n  label: 'wave-field__label',\n  required: 'wave-field__required',\n  validationMessage: 'wave-field__validation-message',\n  validationMessageIcon: 'wave-field__validation-message-icon',\n  hint: 'wave-field__hint',\n} as const;\n\n/** Label: `root` on the `<label>`; `required` on the asterisk. */\nexport const labelClassNames = {\n  root: 'wave-label',\n  required: 'wave-label__required',\n} as const;\n\n/**\n * Checkbox: `root` on the `<label>`; `indicator` on the `role=\"checkbox\"` button (the box);\n * `label` on the label text.\n */\nexport const checkboxClassNames = {\n  root: 'wave-checkbox',\n  indicator: 'wave-checkbox__indicator',\n  label: 'wave-checkbox__label',\n} as const;\n\n/** RadioGroup: `root` on the `role=\"radiogroup\"` element. */\nexport const radioGroupClassNames = { root: 'wave-radio-group' } as const;\n\n/**\n * RadioGroup.Item: `root` on the `<label>` (where `className` lands; `ref` and the other props go\n * to the radio); `indicator` on the `role=\"radio\"` button; `label` on the label text.\n */\nexport const radioGroupItemClassNames = {\n  root: 'wave-radio-group-item',\n  indicator: 'wave-radio-group-item__indicator',\n  label: 'wave-radio-group-item__label',\n} as const;\n\n/**\n * Switch: `root` on the `<label>`; `track` on the `role=\"switch\"` button; `thumb` on its thumb;\n * `label` on the label text.\n */\nexport const switchClassNames = {\n  root: 'wave-switch',\n  track: 'wave-switch__track',\n  thumb: 'wave-switch__thumb',\n  label: 'wave-switch__label',\n} as const;\n\n/**\n * SearchBox: `root` on the element that draws the field; `contentBefore` on the span that holds\n * the search icon or your slot; `input` on the `<input type=\"search\">`; `contentAfter` on the span\n * that holds your slot; `dismissButton` on the clear button; `dismissIcon` on the icon inside it\n * (what `dismiss` renders, a merged Button's icon span, else the default `<svg>`).\n */\nexport const searchBoxClassNames = {\n  root: 'wave-search-box',\n  contentBefore: 'wave-search-box__content-before',\n  input: 'wave-search-box__input',\n  contentAfter: 'wave-search-box__content-after',\n  dismissButton: 'wave-search-box__dismiss-button',\n  dismissIcon: 'wave-search-box__dismiss-icon',\n} as const;\n\n/** Slider: `root` on the `<input type=\"range\">` (its rail and thumb are pseudo-elements). */\nexport const sliderClassNames = { root: 'wave-slider' } as const;\n\n/**\n * SpinButton: `root` on the outer element; `decrementButton` on the − button; `input` on the\n * `role=\"spinbutton\"` input; `incrementButton` on the + button.\n */\nexport const spinButtonClassNames = {\n  root: 'wave-spin-button',\n  decrementButton: 'wave-spin-button__decrement-button',\n  input: 'wave-spin-button__input',\n  incrementButton: 'wave-spin-button__increment-button',\n} as const;\n\n/**\n * Option (also Combobox.Option and Dropdown.Option): `root` on the `role=\"option\"` element;\n * `checkIcon` on the check `<svg>`; `content` on the content span.\n */\nexport const optionClassNames = {\n  root: 'wave-option',\n  checkIcon: 'wave-option__check-icon',\n  content: 'wave-option__content',\n} as const;\n\n/**\n * OptionGroup (also Combobox.OptionGroup and Dropdown.OptionGroup): `root` on the group's entry\n * in the list; `label` on its heading; `list` 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/**\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; `group` on the list of tags;\n * `tag` on each tag; `removeButton` on each tag's remove button; `input` on the `role=\"combobox\"`\n * input; `listbox` on the `role=\"listbox\"` list; `option` on each Option it renders (which also\n * carries Option's classes); `surface` on the portaled popup; `emptyMessage` on the \"No matches\"\n * 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  listbox: 'wave-tag-picker__listbox',\n  option: 'wave-tag-picker__option',\n  surface: 'wave-tag-picker__surface',\n  emptyMessage: 'wave-tag-picker__empty-message',\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 month buttons; `heading` on the month\n * `<h2>`; `grid` on the calendar's `role=\"grid\"` element; `weekday` on each weekday header cell;\n * `day` on each day button.\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  nextMonthButton: 'wave-date-picker__next-month-button',\n  grid: 'wave-date-picker__grid',\n  weekday: 'wave-date-picker__weekday',\n  day: 'wave-date-picker__day',\n} as const;\n\n/** SwatchPicker: `root` on the `role=\"radiogroup\"` element; `swatch` on each `role=\"radio\"` button. */\nexport const swatchPickerClassNames = {\n  root: 'wave-swatch-picker',\n  swatch: 'wave-swatch-picker__swatch',\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 `role=\"radio\"` button; `icon`\n * on each star `<svg>`.\n */\nexport const ratingClassNames = {\n  root: 'wave-rating',\n  star: 'wave-rating__star',\n  icon: 'wave-rating__icon',\n} as const;\n\n/**\n * RatingDisplay: `root` on the `role=\"img\"` element; `star` on each star span; `icon` on the star\n * `<svg>` elements; `value` on the value span; `count` on the 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} 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  title: 'wave-card-header__title',\n  subtitle: 'wave-card-header__subtitle',\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 = { root: 'wave-tab-list-tab' } 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; `track` on the moving element 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  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. */\nexport const carouselItemClassNames = { root: 'wave-carousel-item' } as const;\n\n/**\n * Overflow: `root` on the overflow element; `overflowButton` on the element around what\n * `overflowButton` renders.\n */\nexport const overflowClassNames = {\n  root: 'wave-overflow',\n  overflowButton: 'wave-overflow__overflow-button',\n} as const;\n\n/** Overflow.Item: `root` on the item element. */\nexport const overflowItemClassNames = { root: 'wave-overflow-item' } as const;\n\n/** Stack: `root` on the rendered element. */\nexport const stackClassNames = { root: 'wave-stack' } as const;\n\n/** Flex: `root` on the rendered element. */\nexport const flexClassNames = { root: 'wave-flex' } as const;\n\n/** Grid: `root` on the rendered element. */\nexport const gridClassNames = { root: 'wave-grid' } as const;\n\n// ---------------------------------------------------------------------------\n// navigation\n// ---------------------------------------------------------------------------\n\n/**\n * Breadcrumb: `root` on the `<nav>`; `list` on its `<ol>`; `listItem` on each `<li>`; `divider`\n * on each separator `<svg>`.\n */\nexport const breadcrumbClassNames = {\n  root: 'wave-breadcrumb',\n  list: 'wave-breadcrumb__list',\n  listItem: 'wave-breadcrumb__list-item',\n  divider: 'wave-breadcrumb__divider',\n} as const;\n\n/**\n * Breadcrumb.Item: `root` on the link, button or text span it renders (or your `asChild`\n * element); `icon` on the icon span.\n */\nexport const breadcrumbItemClassNames = {\n  root: 'wave-breadcrumb-item',\n  icon: 'wave-breadcrumb-item__icon',\n} as const;\n\n/** Menu: `root` on the `role=\"menu\"` element of a static menu (a popup menu has Menu.Popover's). */\nexport const menuClassNames = { root: 'wave-menu' } as const;\n\n/**\n * Menu.Item: `root` on the `role=\"menuitem\"` element; `checkmark` on the check column; `icon` on\n * the icon span; `content` on the label span; `shortcut` on the shortcut span;\n * `submenuIndicator` on the chevron `<svg>` of a submenu trigger.\n */\nexport const menuItemClassNames = {\n  root: 'wave-menu-item',\n  checkmark: 'wave-menu-item__checkmark',\n  icon: 'wave-menu-item__icon',\n  content: 'wave-menu-item__content',\n  shortcut: 'wave-menu-item__shortcut',\n  submenuIndicator: 'wave-menu-item__submenu-indicator',\n} as const;\n\n/**\n * Menu.ItemCheckbox (also carries Menu.Item's root and matching part classes): `root` on the\n * `role=\"menuitemcheckbox\"` element; `checkmark`, `icon`, `content` and `shortcut` as on\n * Menu.Item.\n */\nexport const menuItemCheckboxClassNames = {\n  root: 'wave-menu-item-checkbox',\n  checkmark: 'wave-menu-item-checkbox__checkmark',\n  icon: 'wave-menu-item-checkbox__icon',\n  content: 'wave-menu-item-checkbox__content',\n  shortcut: 'wave-menu-item-checkbox__shortcut',\n} as const;\n\n/**\n * Menu.ItemRadio (also carries Menu.Item's root and matching part classes): `root` on the\n * `role=\"menuitemradio\"` element; `checkmark`, `icon`, `content` and `shortcut` as on Menu.Item.\n */\nexport const menuItemRadioClassNames = {\n  root: 'wave-menu-item-radio',\n  checkmark: 'wave-menu-item-radio__checkmark',\n  icon: 'wave-menu-item-radio__icon',\n  content: 'wave-menu-item-radio__content',\n  shortcut: 'wave-menu-item-radio__shortcut',\n} as const;\n\n/**\n * Menu.ItemSwitch (also carries Menu.Item's root, `icon`, `content` and `shortcut` classes):\n * `root` on the `role=\"menuitemcheckbox\"` element; `icon`, `content` and `shortcut` as on\n * Menu.Item; `track` on the switch; `thumb` on its thumb.\n */\nexport const menuItemSwitchClassNames = {\n  root: 'wave-menu-item-switch',\n  icon: 'wave-menu-item-switch__icon',\n  content: 'wave-menu-item-switch__content',\n  shortcut: 'wave-menu-item-switch__shortcut',\n  track: 'wave-menu-item-switch__track',\n  thumb: 'wave-menu-item-switch__thumb',\n} as const;\n\n/**\n * Menu.ItemLink (also carries Menu.Item's root and matching part classes): `root` on the\n * `role=\"menuitem\"` link (`<a>`, or your `as`); `icon`, `content` and `shortcut` as on Menu.Item.\n */\nexport const menuItemLinkClassNames = {\n  root: 'wave-menu-item-link',\n  icon: 'wave-menu-item-link__icon',\n  content: 'wave-menu-item-link__content',\n  shortcut: 'wave-menu-item-link__shortcut',\n} as const;\n\n/** Menu.Divider: `root` on the `role=\"separator\"` element. */\nexport const menuDividerClassNames = { root: 'wave-menu-divider' } as const;\n\n/** Menu.Popover: `root` on the portaled `role=\"menu\"` element. */\nexport const menuPopoverClassNames = { root: 'wave-menu-popover' } as const;\n\n/** Menu.Group: `root` on the `role=\"group\"` element. */\nexport const menuGroupClassNames = { root: 'wave-menu-group' } as const;\n\n/** Menu.GroupHeader: `root` on the header element. */\nexport const menuGroupHeaderClassNames = { root: 'wave-menu-group-header' } as const;\n\n/** Menu.SplitGroup: `root` on the `role=\"group\"` element. */\nexport const menuSplitGroupClassNames = { root: 'wave-menu-split-group' } as const;\n\n/** Nav: `root` on the `<nav>`; `list` on its `<ul>`. */\nexport const navClassNames = {\n  root: 'wave-nav',\n  list: 'wave-nav__list',\n} as const;\n\n/**\n * Nav.Category: `root` on its `<li>`; `button` on the toggle button; `icon` on the icon span;\n * `label` on the label span; `expandIcon` on the chevron `<svg>`; `list` on the `<ul>` of its\n * sub-items.\n */\nexport const navCategoryClassNames = {\n  root: 'wave-nav-category',\n  button: 'wave-nav-category__button',\n  icon: 'wave-nav-category__icon',\n  label: 'wave-nav-category__label',\n  expandIcon: 'wave-nav-category__expand-icon',\n  list: 'wave-nav-category__list',\n} as const;\n\n/**\n * Nav.Item: `root` on the `<a>` (with `href`) or `<button>`; `listItem` on the `<li>` around it;\n * `icon` on the icon span; `content` on the label span.\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} as const;\n\n/** Nav.SubItem: `root` on the `<a>` or `<button>`; `listItem` on the `<li>` around it. */\nexport const navSubItemClassNames = {\n  root: 'wave-nav-sub-item',\n  listItem: 'wave-nav-sub-item__list-item',\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\"`); `backdrop` on the\n * backdrop around it; `closeButton` on the built-in Close button (which also carries Button's\n * root); `body` on the scrolling body. The heading of its `title` prop carries Dialog.Title's\n * class.\n */\nexport const dialogContentClassNames = {\n  root: 'wave-dialog-content',\n  backdrop: 'wave-dialog-content__backdrop',\n  closeButton: 'wave-dialog-content__close-button',\n  body: 'wave-dialog-content__body',\n} as const;\n\n/** Dialog.Title: `root` on the `<h2>`. */\nexport const dialogTitleClassNames = { root: 'wave-dialog-title' } 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 portaled panel (`role=\"dialog\"`, while open); `backdrop` on the backdrop;\n * `header` on the header row; `closeButton` on the Close button (which also carries Button's\n * root); `body` on the scrolling body. The heading of its `title` prop carries Drawer.Title's\n * class.\n */\nexport const drawerClassNames = {\n  root: 'wave-drawer',\n  backdrop: 'wave-drawer__backdrop',\n  header: 'wave-drawer__header',\n  closeButton: 'wave-drawer__close-button',\n  body: 'wave-drawer__body',\n} as const;\n\n/** Drawer.Title: `root` on the `<h2>`. */\nexport const drawerTitleClassNames = { root: 'wave-drawer-title' } as const;\n\n/**\n * TeachingPopover: `root` on the `role=\"dialog\"` surface; `beak` on the arrow; `closeButton`,\n * `backButton` and `nextButton` on its buttons (which also carry Button's root); `title` on the\n * `<h3>`; `body` on the step body; `footer` on the bottom row; `dot` on each step dot.\n */\nexport const teachingPopoverClassNames = {\n  root: 'wave-teaching-popover',\n  beak: 'wave-teaching-popover__beak',\n  closeButton: 'wave-teaching-popover__close-button',\n  title: 'wave-teaching-popover__title',\n  body: 'wave-teaching-popover__body',\n  footer: 'wave-teaching-popover__footer',\n  dot: 'wave-teaching-popover__dot',\n  backButton: 'wave-teaching-popover__back-button',\n  nextButton: 'wave-teaching-popover__next-button',\n} as const;\n\n// ---------------------------------------------------------------------------\n// table\n// ---------------------------------------------------------------------------\n\n/** Table: `root` on the `<table>`; `container` on the scroll wrapper around it. */\nexport const tableClassNames = {\n  root: 'wave-table',\n  container: 'wave-table__container',\n} as const;\n\n/** Table.Header (and the deprecated Table.Head): `root` on the `<thead>`. */\nexport const tableHeaderClassNames = { root: 'wave-table-header' } as const;\n\n/** Table.HeaderCell (and the deprecated Table.HeadCell): `root` on the `<th>`. */\nexport const tableHeaderCellClassNames = { root: 'wave-table-header-cell' } as const;\n\n/** Table.Body: `root` on the `<tbody>`. */\nexport const tableBodyClassNames = { root: 'wave-table-body' } as const;\n\n/** Table.Row: `root` on the `<tr>`. */\nexport const tableRowClassNames = { root: 'wave-table-row' } as const;\n\n/** Table.Cell: `root` on the `<td>`. */\nexport const tableCellClassNames = { root: 'wave-table-cell' } as const;\n\n/** DataGrid: `root` on the grid element (`role=\"grid\"`); `container` on the wrapper around it. */\nexport const dataGridClassNames = {\n  root: 'wave-data-grid',\n  container: 'wave-data-grid__container',\n} as const;\n\n/**\n * DataGrid.Header: `root` on the `<thead>`; `selectionCell` on the selection column's cell of\n * each header row; `selectAllCheckbox` on its checkbox.\n */\nexport const dataGridHeaderClassNames = {\n  root: 'wave-data-grid-header',\n  selectionCell: 'wave-data-grid-header__selection-cell',\n  selectAllCheckbox: 'wave-data-grid-header__select-all-checkbox',\n} as const;\n\n/**\n * DataGrid.HeaderCell: `root` on the `<th>`; `button` on the sort button; `sortIcon` on its\n * direction `<svg>`.\n */\nexport const dataGridHeaderCellClassNames = {\n  root: 'wave-data-grid-header-cell',\n  button: 'wave-data-grid-header-cell__button',\n  sortIcon: 'wave-data-grid-header-cell__sort-icon',\n} as const;\n\n/** DataGrid.Body: `root` on the `<tbody>`. */\nexport const dataGridBodyClassNames = { root: 'wave-data-grid-body' } as const;\n\n/**\n * DataGrid.Row: `root` on the `<tr>`; `selectionCell` on its selection cell; `selectionControl`\n * on the checkbox or radio in it.\n */\nexport const dataGridRowClassNames = {\n  root: 'wave-data-grid-row',\n  selectionCell: 'wave-data-grid-row__selection-cell',\n  selectionControl: 'wave-data-grid-row__selection-control',\n} as const;\n\n/** DataGrid.Cell: `root` on the `role=\"gridcell\"` cell. */\nexport const dataGridCellClassNames = { root: 'wave-data-grid-cell' } as const;\n\n// ---------------------------------------------------------------------------\n// typography, provider, portal\n// ---------------------------------------------------------------------------\n\n/** Text: `root` on the rendered element (your `as`, default `<span>`). */\nexport const textClassNames = { root: 'wave-text' } as const;\n\n/** WaveProvider: `root` on the themed element (the existing `wave-root` scope class). */\nexport const waveProviderClassNames = { root: 'wave-root' } as const;\n\n/**\n * Portal: `root` on the portal wrapper (the existing `wave-portal` scope class; the wrapper also\n * takes your `className`).\n */\nexport const portalClassNames = { root: 'wave-portal' } as const;\n"],"mappings":"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"}
+{"version":3,"file":"classNames.mjs","names":["buttonClassNames","compoundButtonClassNames","toggleButtonClassNames","splitButtonClassNames","menuButtonClassNames","linkClassNames","toolbarClassNames","toolbarButtonClassNames","toolbarToggleButtonClassNames","toolbarRadioButtonClassNames","toolbarRadioGroupClassNames","toolbarGroupClassNames","toolbarDividerClassNames","avatarClassNames","avatarGroupClassNames","badgeClassNames","counterBadgeClassNames","presenceBadgeClassNames","tagClassNames","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","comboboxClassNames","dropdownClassNames","tagPickerClassNames","timePickerClassNames","datePickerClassNames","swatchPickerClassNames","colorPickerClassNames","colorPickerHexFieldClassNames","colorPickerSwatchesClassNames","colorPickerPreviewClassNames","colorAreaClassNames","colorSliderClassNames","alphaSliderClassNames","ratingClassNames","ratingItemClassNames","ratingDisplayClassNames","cardClassNames","cardHeaderClassNames","cardBodyClassNames","cardFooterClassNames","accordionClassNames","accordionItemClassNames","accordionTriggerClassNames","accordionPanelClassNames","tabListClassNames","tabListTabClassNames","tabListPanelClassNames","tabListPanelsClassNames","treeClassNames","treeItemClassNames","treeItemPersonaLayoutClassNames","carouselClassNames","carouselItemClassNames","overflowClassNames","overflowItemClassNames","stackClassNames","flexClassNames","gridClassNames","breadcrumbClassNames","breadcrumbItemClassNames","menuClassNames","menuItemClassNames","menuItemCheckboxClassNames","menuItemRadioClassNames","menuItemSwitchClassNames","menuItemLinkClassNames","menuDividerClassNames","menuPopoverClassNames","menuGroupClassNames","menuGroupHeaderClassNames","menuSplitGroupClassNames","navClassNames","navCategoryClassNames","navItemClassNames","navSubItemClassNames","paginationClassNames","stepperClassNames","stepperStepClassNames","dialogContentClassNames","dialogTitleClassNames","dialogFooterClassNames","popoverContentClassNames","tooltipClassNames","drawerClassNames","drawerTitleClassNames","teachingPopoverClassNames","tableClassNames","tableHeaderClassNames","tableHeaderCellClassNames","tableBodyClassNames","tableRowClassNames","tableCellClassNames","dataGridClassNames","dataGridHeaderClassNames","dataGridHeaderCellClassNames","dataGridBodyClassNames","dataGridRowClassNames","dataGridCellClassNames","textClassNames","waveProviderClassNames","portalClassNames"],"sources":["../../src/lib/classNames.ts"],"sourcesContent":["/**\n * Stable class names of every public component and part. A root class sits on the element that\n * receives your `className`, and a part class on each element that a prop or slot fills or that\n * draws structure (an icon, a dismiss button, a track, a surface). Style them from your own CSS,\n * or build a typed selector from a constant (`` `.${buttonClassNames.icon}` ``). This module\n * imports nothing and holds string constants only, so a React Server Component can read it.\n *\n * - **Names.** A root is `wave-` plus the kebab-cased flat export name (`Button` → `wave-button`,\n *   `CardHeader` → `wave-card-header`); a part is the root, two underscores and the kebab-cased\n *   part key (`wave-button__icon`); a constant is the camel-cased flat name plus `ClassNames`\n *   (`cardHeaderClassNames`). WaveProvider and Portal keep their existing scope classes,\n *   `wave-root` and `wave-portal`.\n * - **Placement.** A component puts its root class first in its class list, so your `className`\n *   still wins a conflict; a slot part keeps its class when a slot object renders another element\n *   (`icon={{ as: 'img', … }}`).\n * - **Variants and nesting.** A variant also carries the classes of the component it is built on\n *   (ToggleButton's root is `wave-button wave-toggle-button`, its icon\n *   `wave-button__icon wave-toggle-button__icon`), and a public component rendered inside another\n *   also carries the parent's part class (SplitButton's halves are `wave-button` plus\n *   `wave-split-button__primary-action-button` or `wave-split-button__menu-button`).\n * - **No state classes.** State lives in `data-*` attributes and ARIA (`[data-pressed]`,\n *   `[data-disabled]`, `[aria-expanded='true']`).\n * - **Stability.** Before 1.0 no class is removed; a renamed part keeps its old class next to the\n *   new one until then.\n *\n * Not to be confused with the internal `buttonClassName()` helper of `buttonStyles.ts` (one\n * letter shorter), which returns Button's utility classes.\n */\n\n// ---------------------------------------------------------------------------\n// button\n// ---------------------------------------------------------------------------\n\n/**\n * Button: `root` on the rendered element (`<button>`, or your `as`); `icon` on the icon box.\n * Style them from your own CSS (`.wave-button`, `.wave-button__icon`). State is not a class: use\n * the `data-*` attributes (`[data-pressed]`, `[data-disabled]`).\n */\nexport const buttonClassNames = {\n  root: 'wave-button',\n  icon: 'wave-button__icon',\n} as const;\n\n/**\n * CompoundButton (also carries Button's root and icon classes): `root` on the rendered element;\n * `icon` on the icon box (Button's icon span in the icon-only layout); `contentContainer` on the\n * text column; `primaryText` on the main line; `secondaryText` on the second line.\n */\nexport const compoundButtonClassNames = {\n  root: 'wave-compound-button',\n  icon: 'wave-compound-button__icon',\n  contentContainer: 'wave-compound-button__content-container',\n  primaryText: 'wave-compound-button__primary-text',\n  secondaryText: 'wave-compound-button__secondary-text',\n} as const;\n\n/**\n * ToggleButton (also carries Button's root and icon classes): `root` on the `<button>`; `icon` on\n * Button's icon span.\n */\nexport const toggleButtonClassNames = {\n  root: 'wave-toggle-button',\n  icon: 'wave-toggle-button__icon',\n} as const;\n\n/**\n * SplitButton: `root` on the `role=\"group\"` element; `primaryActionButton` and `menuButton` on its\n * two Buttons (which also carry Button's root); `icon` on the primary half's icon span and\n * `menuIcon` on the menu half's (both also carry Button's icon class).\n */\nexport const splitButtonClassNames = {\n  root: 'wave-split-button',\n  primaryActionButton: 'wave-split-button__primary-action-button',\n  menuButton: 'wave-split-button__menu-button',\n  icon: 'wave-split-button__icon',\n  menuIcon: 'wave-split-button__menu-icon',\n} as const;\n\n/**\n * MenuButton (also carries Button's root and icon classes): `root` on the `<button>`; `icon` on\n * Button's icon span; `menuIcon` on the default chevron `<svg>`, or on the span of your\n * `menuIcon`.\n */\nexport const menuButtonClassNames = {\n  root: 'wave-menu-button',\n  icon: 'wave-menu-button__icon',\n  menuIcon: 'wave-menu-button__menu-icon',\n} as const;\n\n/** Link: `root` on the rendered element (`<a>`, or your `as`). */\nexport const linkClassNames = { root: 'wave-link' } as const;\n\n/** Toolbar: `root` on the `role=\"toolbar\"` element (your `as`, default `<div>`). */\nexport const toolbarClassNames = { root: 'wave-toolbar' } as const;\n\n/**\n * Toolbar.Button (also carries Button's root and icon classes): `root` on the rendered element;\n * `icon` on Button's icon span (the icon box of `vertical`).\n */\nexport const toolbarButtonClassNames = {\n  root: 'wave-toolbar-button',\n  icon: 'wave-toolbar-button__icon',\n} as const;\n\n/**\n * Toolbar.ToggleButton (also carries the root and icon classes of Button and ToggleButton):\n * `root` on the `<button>`; `icon` on the icon span.\n */\nexport const toolbarToggleButtonClassNames = {\n  root: 'wave-toolbar-toggle-button',\n  icon: 'wave-toolbar-toggle-button__icon',\n} as const;\n\n/**\n * Toolbar.RadioButton (also carries the root and icon classes of Button and ToggleButton):\n * `root` on the `role=\"radio\"` button; `icon` on the icon span.\n */\nexport const toolbarRadioButtonClassNames = {\n  root: 'wave-toolbar-radio-button',\n  icon: 'wave-toolbar-radio-button__icon',\n} as const;\n\n/** Toolbar.RadioGroup: `root` on the `role=\"radiogroup\"` element. */\nexport const toolbarRadioGroupClassNames = { root: 'wave-toolbar-radio-group' } as const;\n\n/** Toolbar.Group: `root` on the group element. */\nexport const toolbarGroupClassNames = { root: 'wave-toolbar-group' } as const;\n\n/** Toolbar.Divider: `root` on the `role=\"separator\"` element. */\nexport const toolbarDividerClassNames = { root: 'wave-toolbar-divider' } as const;\n\n// ---------------------------------------------------------------------------\n// data-display\n// ---------------------------------------------------------------------------\n\n/**\n * Avatar: `root` on the avatar span (with `badge`, on the outer wrapper); `visual` on the circle\n * (the root without `badge`, the inner span with it); `image` on the `<img>` (or the element of\n * your `image` slot); `icon` on the `icon` slot, else on the default person `<svg>`; `initials`\n * on the initials span; `badge` on the `badge` slot.\n */\nexport const avatarClassNames = {\n  root: 'wave-avatar',\n  visual: 'wave-avatar__visual',\n  image: 'wave-avatar__image',\n  icon: 'wave-avatar__icon',\n  initials: 'wave-avatar__initials',\n  badge: 'wave-avatar__badge',\n} as const;\n\n/**\n * AvatarGroup: `root` on the `role=\"group\"` element; `item` on the wrapper around each shown\n * member; `overflowButton` on the \"+N\" button; `surface` on its popup; `list` on the popup's\n * `<ul>`; `listItem` on each of its `<li>`.\n */\nexport const avatarGroupClassNames = {\n  root: 'wave-avatar-group',\n  item: 'wave-avatar-group__item',\n  overflowButton: 'wave-avatar-group__overflow-button',\n  surface: 'wave-avatar-group__surface',\n  list: 'wave-avatar-group__list',\n  listItem: 'wave-avatar-group__list-item',\n} 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>`); `primaryText` on the content\n * span; `dismissButton` on the Dismiss button; `dismissIcon` on the icon inside it (what\n * `dismissIcon` renders, a merged Button's icon span, else the default `<svg>`).\n */\nexport const tagClassNames = {\n  root: 'wave-tag',\n  primaryText: 'wave-tag__primary-text',\n  dismissButton: 'wave-tag__dismiss-button',\n  dismissIcon: 'wave-tag__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} as const;\n\n/**\n * Divider: `root` on the `<hr>` of a plain horizontal divider, else on the `role=\"separator\"`\n * element (or your `as`); `line` on each of the two line elements of a labelled divider; `label`\n * on its label span.\n */\nexport const dividerClassNames = {\n  root: 'wave-divider',\n  line: 'wave-divider__line',\n  label: 'wave-divider__label',\n} as const;\n\n/**\n * InfoButton: `root` on the `<button>`; `info` on the `role=\"note\"` popup that shows your `info`\n * (Fluent's `info` slot, the popover surface); `beak` on its arrow.\n */\nexport const infoButtonClassNames = {\n  root: 'wave-info-button',\n  info: 'wave-info-button__info',\n  beak: 'wave-info-button__beak',\n} as const;\n\n/**\n * InfoLabel: `root` on the outer span; `label` on its Label (which also carries Label's root);\n * `infoButton` on its InfoButton (which also carries InfoButton's root); `info` on the popup, the\n * InfoButton's note (which also carries InfoButton's `info`).\n */\nexport const infoLabelClassNames = {\n  root: 'wave-info-label',\n  label: 'wave-info-label__label',\n  infoButton: 'wave-info-label__info-button',\n  info: 'wave-info-label__info',\n} as const;\n\n/** Image: `root` on the `<img>`. */\nexport const imageClassNames = { root: 'wave-image' } as const;\n\n/** List: `root` on the `<ul>` (the `role=\"grid\"` element of a selectable list with actions). */\nexport const listClassNames = { root: 'wave-list' } as const;\n\n/**\n * List.Item: `root` on the `<li>` (the `role=\"row\"` element of a list with actions); `content` on\n * the content element; `action` on the action cell.\n */\nexport const listItemClassNames = {\n  root: 'wave-list-item',\n  content: 'wave-list-item__content',\n  action: 'wave-list-item__action',\n} as const;\n\n// ---------------------------------------------------------------------------\n// feedback\n// ---------------------------------------------------------------------------\n\n/**\n * MessageBar: `root` on the bar; `icon` on the status icon span; `body` on the text column (it\n * holds `MessageBar.Title`); `dismissButton` on the Dismiss button; `dismissIcon` on the icon\n * inside it (what `dismiss` renders, a merged Button's icon span, else the default `<svg>`).\n */\nexport const messageBarClassNames = {\n  root: 'wave-message-bar',\n  icon: 'wave-message-bar__icon',\n  body: 'wave-message-bar__body',\n  dismissButton: 'wave-message-bar__dismiss-button',\n  dismissIcon: 'wave-message-bar__dismiss-icon',\n} as const;\n\n/** MessageBar.Title: `root` on the title span. */\nexport const messageBarTitleClassNames = { root: 'wave-message-bar-title' } as const;\n\n/** MessageBar.Actions: `root` on the element that holds the actions. */\nexport const messageBarActionsClassNames = { root: 'wave-message-bar-actions' } as const;\n\n/**\n * ProgressBar: `root` on the `role=\"progressbar\"` element (the track); `bar` on the fill; `label`\n * on the label of `showLabel` (a sibling of the root).\n */\nexport const progressBarClassNames = {\n  root: 'wave-progress-bar',\n  bar: 'wave-progress-bar__bar',\n  label: 'wave-progress-bar__label',\n} as const;\n\n/**\n * Spinner: `root` on the outer span; `spinner` on the ring; `label` on the label span (also while\n * only screen readers get it, without `labelVisible`).\n */\nexport const spinnerClassNames = {\n  root: 'wave-spinner',\n  spinner: 'wave-spinner__spinner',\n  label: 'wave-spinner__label',\n} as const;\n\n/** Skeleton: `root` on the placeholder element. */\nexport const skeletonClassNames = { root: 'wave-skeleton' } as const;\n\n/** Skeleton.Group: `root` on the group element. */\nexport const skeletonGroupClassNames = { root: 'wave-skeleton-group' } as const;\n\n/**\n * Toast: `root` on the toast; `icon` on the status icon span (or your `icon` slot); `content` on\n * the text column that holds the title, body and footer; `dismissButton` on the Dismiss button.\n */\nexport const toastClassNames = {\n  root: 'wave-toast',\n  icon: 'wave-toast__icon',\n  content: 'wave-toast__content',\n  dismissButton: 'wave-toast__dismiss-button',\n} as const;\n\n/**\n * Toast.Title: `root` on the title row (also the one the `title` prop renders); `label` on the\n * title text, which names the toast; `action` on the `action` slot at the row's end.\n */\nexport const toastTitleClassNames = {\n  root: 'wave-toast-title',\n  label: 'wave-toast-title__label',\n  action: 'wave-toast-title__action',\n} as const;\n\n/**\n * Toast.Body: `root` on the body element (also the one plain children render); `subtitle` on the\n * `subtitle` line inside it.\n */\nexport const toastBodyClassNames = {\n  root: 'wave-toast-body',\n  subtitle: 'wave-toast-body__subtitle',\n} as const;\n\n/** Toast.Footer: `root` on the row of actions. */\nexport const toastFooterClassNames = { root: 'wave-toast-footer' } as const;\n\n/**\n * Toaster: `root` on the portaled toast region; `toast` on the `role=\"group\"` container the\n * Toaster renders around each toast.\n */\nexport const toasterClassNames = {\n  root: 'wave-toaster',\n  toast: 'wave-toaster__toast',\n} as const;\n\n// ---------------------------------------------------------------------------\n// input\n// ---------------------------------------------------------------------------\n\n/**\n * Input: `root` on the `<input>`, or, with `contentBefore` or `contentAfter` content, on the\n * wrapper that draws the field; `input` on the `<input>` (also when it is the root);\n * `contentBefore` and `contentAfter` on the slot spans; `errorMessage` on the `role=\"alert\"`\n * message after the control.\n */\nexport const inputClassNames = {\n  root: 'wave-input',\n  input: 'wave-input__input',\n  contentBefore: 'wave-input__content-before',\n  contentAfter: 'wave-input__content-after',\n  errorMessage: 'wave-input__error-message',\n} as const;\n\n/** Textarea: `root` on the `<textarea>`; `errorMessage` on the message after it, as Input's. */\nexport const textareaClassNames = {\n  root: 'wave-textarea',\n  errorMessage: 'wave-textarea__error-message',\n} as const;\n\n/** Select: `root` on the `<select>`; `errorMessage` on the message after it, as Input's. */\nexport const selectClassNames = {\n  root: 'wave-select',\n  errorMessage: 'wave-select__error-message',\n} as const;\n\n/**\n * Field: `root` on the field element; `label` on the `<label>`; `required` on the asterisk;\n * `validationMessage` on the message; `validationMessageIcon` on its icon; `hint` on the hint.\n */\nexport const fieldClassNames = {\n  root: 'wave-field',\n  label: 'wave-field__label',\n  required: 'wave-field__required',\n  validationMessage: 'wave-field__validation-message',\n  validationMessageIcon: 'wave-field__validation-message-icon',\n  hint: 'wave-field__hint',\n} as const;\n\n/** Label: `root` on the `<label>`; `required` on the asterisk. */\nexport const labelClassNames = {\n  root: 'wave-label',\n  required: 'wave-label__required',\n} as const;\n\n/**\n * Checkbox: `root` on the `<label>`; `indicator` on the `role=\"checkbox\"` button (the box);\n * `label` on the label text.\n */\nexport const checkboxClassNames = {\n  root: 'wave-checkbox',\n  indicator: 'wave-checkbox__indicator',\n  label: 'wave-checkbox__label',\n} as const;\n\n/** RadioGroup: `root` on the `role=\"radiogroup\"` element. */\nexport const radioGroupClassNames = { root: 'wave-radio-group' } as const;\n\n/**\n * RadioGroup.Item: `root` on the `<label>` (where `className` lands; `ref` and the other props go\n * to the radio); `indicator` on the `role=\"radio\"` button; `label` on the label text.\n */\nexport const radioGroupItemClassNames = {\n  root: 'wave-radio-group-item',\n  indicator: 'wave-radio-group-item__indicator',\n  label: 'wave-radio-group-item__label',\n} as const;\n\n/**\n * Switch: `root` on the `<label>`; `track` on the `role=\"switch\"` button; `thumb` on its thumb;\n * `label` on the label text.\n */\nexport const switchClassNames = {\n  root: 'wave-switch',\n  track: 'wave-switch__track',\n  thumb: 'wave-switch__thumb',\n  label: 'wave-switch__label',\n} as const;\n\n/**\n * SearchBox: `root` on the element that draws the field; `contentBefore` on the span that holds\n * the search icon or your slot; `input` on the `<input type=\"search\">`; `contentAfter` on the span\n * that holds your slot; `dismissButton` on the clear button; `dismissIcon` on the icon inside it\n * (what `dismiss` renders, a merged Button's icon span, else the default `<svg>`).\n */\nexport const searchBoxClassNames = {\n  root: 'wave-search-box',\n  contentBefore: 'wave-search-box__content-before',\n  input: 'wave-search-box__input',\n  contentAfter: 'wave-search-box__content-after',\n  dismissButton: 'wave-search-box__dismiss-button',\n  dismissIcon: 'wave-search-box__dismiss-icon',\n} as const;\n\n/** Slider: `root` on the `<input type=\"range\">` (its rail and thumb are pseudo-elements). */\nexport const sliderClassNames = { root: 'wave-slider' } as const;\n\n/**\n * SpinButton: `root` on the outer element; `decrementButton` on the − button; `input` on the\n * `role=\"spinbutton\"` input; `incrementButton` on the + button.\n */\nexport const spinButtonClassNames = {\n  root: 'wave-spin-button',\n  decrementButton: 'wave-spin-button__decrement-button',\n  input: 'wave-spin-button__input',\n  incrementButton: 'wave-spin-button__increment-button',\n} as const;\n\n/**\n * Option (also Combobox.Option and Dropdown.Option): `root` on the `role=\"option\"` element;\n * `checkIcon` on the check `<svg>`; `content` on the content span.\n */\nexport const optionClassNames = {\n  root: 'wave-option',\n  checkIcon: 'wave-option__check-icon',\n  content: 'wave-option__content',\n} as const;\n\n/**\n * OptionGroup (also Combobox.OptionGroup and Dropdown.OptionGroup): `root` on the group's entry\n * in the list; `label` on its heading; `list` 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/**\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; `group` on the list of tags;\n * `tag` on each tag; `removeButton` on each tag's remove button; `input` on the `role=\"combobox\"`\n * input; `listbox` on the `role=\"listbox\"` list; `option` on each Option it renders (which also\n * carries Option's classes); `surface` on the portaled popup; `emptyMessage` on the \"No matches\"\n * 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  listbox: 'wave-tag-picker__listbox',\n  option: 'wave-tag-picker__option',\n  surface: 'wave-tag-picker__surface',\n  emptyMessage: 'wave-tag-picker__empty-message',\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 month buttons; `heading` on the month\n * `<h2>`; `grid` on the calendar's `role=\"grid\"` element; `weekday` on each weekday header cell;\n * `day` on each day button.\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  nextMonthButton: 'wave-date-picker__next-month-button',\n  grid: 'wave-date-picker__grid',\n  weekday: 'wave-date-picker__weekday',\n  day: 'wave-date-picker__day',\n} as const;\n\n/** SwatchPicker: `root` on the `role=\"radiogroup\"` element; `swatch` on each `role=\"radio\"` button. */\nexport const swatchPickerClassNames = {\n  root: 'wave-swatch-picker',\n  swatch: 'wave-swatch-picker__swatch',\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} 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  title: 'wave-card-header__title',\n  subtitle: 'wave-card-header__subtitle',\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 = { root: 'wave-tab-list-tab' } 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; `track` on the moving element 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  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. */\nexport const carouselItemClassNames = { root: 'wave-carousel-item' } as const;\n\n/**\n * Overflow: `root` on the overflow element; `overflowButton` on the element around what\n * `overflowButton` renders.\n */\nexport const overflowClassNames = {\n  root: 'wave-overflow',\n  overflowButton: 'wave-overflow__overflow-button',\n} as const;\n\n/** Overflow.Item: `root` on the item element. */\nexport const overflowItemClassNames = { root: 'wave-overflow-item' } as const;\n\n/** Stack: `root` on the rendered element. */\nexport const stackClassNames = { root: 'wave-stack' } as const;\n\n/** Flex: `root` on the rendered element. */\nexport const flexClassNames = { root: 'wave-flex' } as const;\n\n/** Grid: `root` on the rendered element. */\nexport const gridClassNames = { root: 'wave-grid' } as const;\n\n// ---------------------------------------------------------------------------\n// navigation\n// ---------------------------------------------------------------------------\n\n/**\n * Breadcrumb: `root` on the `<nav>`; `list` on its `<ol>`; `listItem` on each `<li>`; `divider`\n * on each separator `<svg>`.\n */\nexport const breadcrumbClassNames = {\n  root: 'wave-breadcrumb',\n  list: 'wave-breadcrumb__list',\n  listItem: 'wave-breadcrumb__list-item',\n  divider: 'wave-breadcrumb__divider',\n} as const;\n\n/**\n * Breadcrumb.Item: `root` on the link, button or text span it renders (or your `asChild`\n * element); `icon` on the icon span.\n */\nexport const breadcrumbItemClassNames = {\n  root: 'wave-breadcrumb-item',\n  icon: 'wave-breadcrumb-item__icon',\n} as const;\n\n/** Menu: `root` on the `role=\"menu\"` element of a static menu (a popup menu has Menu.Popover's). */\nexport const menuClassNames = { root: 'wave-menu' } as const;\n\n/**\n * Menu.Item: `root` on the `role=\"menuitem\"` element; `checkmark` on the check column; `icon` on\n * the icon span; `content` on the label span; `shortcut` on the shortcut span;\n * `submenuIndicator` on the chevron `<svg>` of a submenu trigger.\n */\nexport const menuItemClassNames = {\n  root: 'wave-menu-item',\n  checkmark: 'wave-menu-item__checkmark',\n  icon: 'wave-menu-item__icon',\n  content: 'wave-menu-item__content',\n  shortcut: 'wave-menu-item__shortcut',\n  submenuIndicator: 'wave-menu-item__submenu-indicator',\n} as const;\n\n/**\n * Menu.ItemCheckbox (also carries Menu.Item's root and matching part classes): `root` on the\n * `role=\"menuitemcheckbox\"` element; `checkmark`, `icon`, `content` and `shortcut` as on\n * Menu.Item.\n */\nexport const menuItemCheckboxClassNames = {\n  root: 'wave-menu-item-checkbox',\n  checkmark: 'wave-menu-item-checkbox__checkmark',\n  icon: 'wave-menu-item-checkbox__icon',\n  content: 'wave-menu-item-checkbox__content',\n  shortcut: 'wave-menu-item-checkbox__shortcut',\n} as const;\n\n/**\n * Menu.ItemRadio (also carries Menu.Item's root and matching part classes): `root` on the\n * `role=\"menuitemradio\"` element; `checkmark`, `icon`, `content` and `shortcut` as on Menu.Item.\n */\nexport const menuItemRadioClassNames = {\n  root: 'wave-menu-item-radio',\n  checkmark: 'wave-menu-item-radio__checkmark',\n  icon: 'wave-menu-item-radio__icon',\n  content: 'wave-menu-item-radio__content',\n  shortcut: 'wave-menu-item-radio__shortcut',\n} as const;\n\n/**\n * Menu.ItemSwitch (also carries Menu.Item's root, `icon`, `content` and `shortcut` classes):\n * `root` on the `role=\"menuitemcheckbox\"` element; `icon`, `content` and `shortcut` as on\n * Menu.Item; `track` on the switch; `thumb` on its thumb.\n */\nexport const menuItemSwitchClassNames = {\n  root: 'wave-menu-item-switch',\n  icon: 'wave-menu-item-switch__icon',\n  content: 'wave-menu-item-switch__content',\n  shortcut: 'wave-menu-item-switch__shortcut',\n  track: 'wave-menu-item-switch__track',\n  thumb: 'wave-menu-item-switch__thumb',\n} as const;\n\n/**\n * Menu.ItemLink (also carries Menu.Item's root and matching part classes): `root` on the\n * `role=\"menuitem\"` link (`<a>`, or your `as`); `icon`, `content` and `shortcut` as on Menu.Item.\n */\nexport const menuItemLinkClassNames = {\n  root: 'wave-menu-item-link',\n  icon: 'wave-menu-item-link__icon',\n  content: 'wave-menu-item-link__content',\n  shortcut: 'wave-menu-item-link__shortcut',\n} as const;\n\n/** Menu.Divider: `root` on the `role=\"separator\"` element. */\nexport const menuDividerClassNames = { root: 'wave-menu-divider' } as const;\n\n/** Menu.Popover: `root` on the portaled `role=\"menu\"` element. */\nexport const menuPopoverClassNames = { root: 'wave-menu-popover' } as const;\n\n/** Menu.Group: `root` on the `role=\"group\"` element. */\nexport const menuGroupClassNames = { root: 'wave-menu-group' } as const;\n\n/** Menu.GroupHeader: `root` on the header element. */\nexport const menuGroupHeaderClassNames = { root: 'wave-menu-group-header' } as const;\n\n/** Menu.SplitGroup: `root` on the `role=\"group\"` element. */\nexport const menuSplitGroupClassNames = { root: 'wave-menu-split-group' } as const;\n\n/** Nav: `root` on the `<nav>`; `list` on its `<ul>`. */\nexport const navClassNames = {\n  root: 'wave-nav',\n  list: 'wave-nav__list',\n} as const;\n\n/**\n * Nav.Category: `root` on its `<li>`; `button` on the toggle button; `icon` on the icon span;\n * `label` on the label span; `expandIcon` on the chevron `<svg>`; `list` on the `<ul>` of its\n * sub-items.\n */\nexport const navCategoryClassNames = {\n  root: 'wave-nav-category',\n  button: 'wave-nav-category__button',\n  icon: 'wave-nav-category__icon',\n  label: 'wave-nav-category__label',\n  expandIcon: 'wave-nav-category__expand-icon',\n  list: 'wave-nav-category__list',\n} as const;\n\n/**\n * Nav.Item: `root` on the `<a>` (with `href`) or `<button>`; `listItem` on the `<li>` around it;\n * `icon` on the icon span; `content` on the label span.\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} as const;\n\n/** Nav.SubItem: `root` on the `<a>` or `<button>`; `listItem` on the `<li>` around it. */\nexport const navSubItemClassNames = {\n  root: 'wave-nav-sub-item',\n  listItem: 'wave-nav-sub-item__list-item',\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\"`); `backdrop` on the\n * backdrop around it; `closeButton` on the built-in Close button (which also carries Button's\n * root); `body` on the scrolling body. The heading of its `title` prop carries Dialog.Title's\n * class.\n */\nexport const dialogContentClassNames = {\n  root: 'wave-dialog-content',\n  backdrop: 'wave-dialog-content__backdrop',\n  closeButton: 'wave-dialog-content__close-button',\n  body: 'wave-dialog-content__body',\n} as const;\n\n/** Dialog.Title: `root` on the `<h2>`. */\nexport const dialogTitleClassNames = { root: 'wave-dialog-title' } 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 portaled panel (`role=\"dialog\"`, while open); `backdrop` on the backdrop;\n * `header` on the header row; `closeButton` on the Close button (which also carries Button's\n * root); `body` on the scrolling body. The heading of its `title` prop carries Drawer.Title's\n * class.\n */\nexport const drawerClassNames = {\n  root: 'wave-drawer',\n  backdrop: 'wave-drawer__backdrop',\n  header: 'wave-drawer__header',\n  closeButton: 'wave-drawer__close-button',\n  body: 'wave-drawer__body',\n} as const;\n\n/** Drawer.Title: `root` on the `<h2>`. */\nexport const drawerTitleClassNames = { root: 'wave-drawer-title' } as const;\n\n/**\n * TeachingPopover: `root` on the `role=\"dialog\"` surface; `beak` on the arrow; `closeButton`,\n * `backButton` and `nextButton` on its buttons (which also carry Button's root); `title` on the\n * `<h3>`; `body` on the step body; `footer` on the bottom row; `dot` on each step dot.\n */\nexport const teachingPopoverClassNames = {\n  root: 'wave-teaching-popover',\n  beak: 'wave-teaching-popover__beak',\n  closeButton: 'wave-teaching-popover__close-button',\n  title: 'wave-teaching-popover__title',\n  body: 'wave-teaching-popover__body',\n  footer: 'wave-teaching-popover__footer',\n  dot: 'wave-teaching-popover__dot',\n  backButton: 'wave-teaching-popover__back-button',\n  nextButton: 'wave-teaching-popover__next-button',\n} as const;\n\n// ---------------------------------------------------------------------------\n// table\n// ---------------------------------------------------------------------------\n\n/** Table: `root` on the `<table>`; `container` on the scroll wrapper around it. */\nexport const tableClassNames = {\n  root: 'wave-table',\n  container: 'wave-table__container',\n} as const;\n\n/** Table.Header (and the deprecated Table.Head): `root` on the `<thead>`. */\nexport const tableHeaderClassNames = { root: 'wave-table-header' } as const;\n\n/** Table.HeaderCell (and the deprecated Table.HeadCell): `root` on the `<th>`. */\nexport const tableHeaderCellClassNames = { root: 'wave-table-header-cell' } as const;\n\n/** Table.Body: `root` on the `<tbody>`. */\nexport const tableBodyClassNames = { root: 'wave-table-body' } as const;\n\n/** Table.Row: `root` on the `<tr>`. */\nexport const tableRowClassNames = { root: 'wave-table-row' } as const;\n\n/** Table.Cell: `root` on the `<td>`. */\nexport const tableCellClassNames = { root: 'wave-table-cell' } as const;\n\n/** DataGrid: `root` on the grid element (`role=\"grid\"`); `container` on the wrapper around it. */\nexport const dataGridClassNames = {\n  root: 'wave-data-grid',\n  container: 'wave-data-grid__container',\n} as const;\n\n/**\n * DataGrid.Header: `root` on the `<thead>`; `selectionCell` on the selection column's cell of\n * each header row; `selectAllCheckbox` on its checkbox.\n */\nexport const dataGridHeaderClassNames = {\n  root: 'wave-data-grid-header',\n  selectionCell: 'wave-data-grid-header__selection-cell',\n  selectAllCheckbox: 'wave-data-grid-header__select-all-checkbox',\n} as const;\n\n/**\n * DataGrid.HeaderCell: `root` on the `<th>`; `button` on the sort button; `sortIcon` on its\n * direction `<svg>`.\n */\nexport const dataGridHeaderCellClassNames = {\n  root: 'wave-data-grid-header-cell',\n  button: 'wave-data-grid-header-cell__button',\n  sortIcon: 'wave-data-grid-header-cell__sort-icon',\n} as const;\n\n/** DataGrid.Body: `root` on the `<tbody>`. */\nexport const dataGridBodyClassNames = { root: 'wave-data-grid-body' } as const;\n\n/**\n * DataGrid.Row: `root` on the `<tr>`; `selectionCell` on its selection cell; `selectionControl`\n * on the checkbox or radio in it.\n */\nexport const dataGridRowClassNames = {\n  root: 'wave-data-grid-row',\n  selectionCell: 'wave-data-grid-row__selection-cell',\n  selectionControl: 'wave-data-grid-row__selection-control',\n} as const;\n\n/** DataGrid.Cell: `root` on the `role=\"gridcell\"` cell. */\nexport const dataGridCellClassNames = { root: 'wave-data-grid-cell' } as const;\n\n// ---------------------------------------------------------------------------\n// typography, provider, portal\n// ---------------------------------------------------------------------------\n\n/** Text: `root` on the rendered element (your `as`, default `<span>`). */\nexport const textClassNames = { root: 'wave-text' } as const;\n\n/** WaveProvider: `root` on the themed element (the existing `wave-root` scope class). */\nexport const waveProviderClassNames = { root: 'wave-root' } as const;\n\n/**\n * Portal: `root` on the portal wrapper (the existing `wave-portal` scope class; the wrapper also\n * takes your `className`).\n */\nexport const portalClassNames = { root: 'wave-portal' } as const;\n"],"mappings":"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"}

package/dist/lib/styles.cjs

@@ -1,2 +1,2 @@
-var e=`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`,t=`focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring`,n=`h-8 w-full rounded border border-input bg-background px-3 text-body-1 text-foreground placeholder:text-muted-foreground`,r=`focus:outline-hidden focus:border-b-2 focus:border-b-primary`,i=`focus-within:border-b-2 focus-within:border-b-primary`,a=`border-destructive focus:border-b-destructive`,o=`border-destructive focus-within:border-b-destructive`,s=`disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100`,c=`transition motion-reduce:transition-none`,l=`forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:forced-color-adjust-none`,u={selectedLeaf:l,selectedContainer:`forced-colors:outline-2 forced-colors:outline-[Highlight] forced-colors:-outline-offset-2`,control:`forced-colors:border-[ButtonText]`,border:`forced-colors:border-[CanvasText]`,fill:`forced-colors:bg-[Highlight] forced-colors:forced-color-adjust-none`,rangeInput:`forced-colors:forced-color-adjust-none forced-colors:[&::-webkit-slider-runnable-track]:bg-[CanvasText] forced-colors:[&::-moz-range-track]:bg-[CanvasText] forced-colors:[&::-webkit-slider-thumb]:bg-[Highlight] forced-colors:[&::-webkit-slider-thumb]:border-[Canvas] forced-colors:[&::-moz-range-thumb]:bg-[Highlight] forced-colors:[&::-moz-range-thumb]:border-[Canvas] forced-colors:disabled:[&::-webkit-slider-runnable-track]:bg-[GrayText] forced-colors:disabled:[&::-moz-range-track]:bg-[GrayText] forced-colors:disabled:[&::-webkit-slider-thumb]:bg-[GrayText] forced-colors:disabled:[&::-moz-range-thumb]:bg-[GrayText] forced-colors:focus-visible:outline-[Highlight]`,ringArc:`forced-colors:forced-color-adjust-none forced-colors:border-[Canvas] forced-colors:border-t-[Highlight]`,disabled:`forced-colors:text-[GrayText] forced-colors:border-[GrayText]`,selected:l};exports.disabledStyles=s,exports.focusRing=e,exports.focusRingInset=t,exports.forcedColors=u,exports.inputBase=n,exports.inputFocus=r,exports.inputFocusWithin=i,exports.inputInvalid=a,exports.inputInvalidWithin=o,exports.motionSafeTransition=c;
+var e=`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`,t=`focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring`,n={small:`h-6`,medium:`h-8`,large:`h-10`},r={small:`text-caption-1`,medium:`text-body-1`,large:`text-body-2`},i={small:`px-2`,medium:`px-3`,large:`px-4`},a={outline:`rounded border border-input border-b-stroke-accessible bg-background`,underline:`rounded-none border-0 border-b border-b-stroke-accessible bg-transparent forced-colors:border-[ButtonText]`,"filled-darker":`rounded border border-input-filled-stroke bg-input-filled-darker forced-colors:border-[ButtonText]`,"filled-lighter":`rounded border border-input-filled-stroke bg-input-filled-lighter forced-colors:border-[ButtonText]`},o=`before:absolute before:-inset-0.5`,s=`focus:outline-hidden focus:border-b-2 focus:border-b-primary`,c=`focus-within:border-b-2 focus-within:border-b-primary`,l=`border-destructive`,u=`border-destructive`,d=`disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100`,f=`transition motion-reduce:transition-none`,p=`forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:forced-color-adjust-none`,m={selectedLeaf:p,selectedContainer:`forced-colors:outline-2 forced-colors:outline-[Highlight] forced-colors:-outline-offset-2`,control:`forced-colors:border-[ButtonText]`,border:`forced-colors:border-[CanvasText]`,fill:`forced-colors:bg-[Highlight] forced-colors:forced-color-adjust-none`,rangeInput:`forced-colors:forced-color-adjust-none forced-colors:[&::-webkit-slider-runnable-track]:bg-[CanvasText] forced-colors:[&::-moz-range-track]:bg-[CanvasText] forced-colors:[&::-webkit-slider-thumb]:bg-[Highlight] forced-colors:[&::-webkit-slider-thumb]:border-[Canvas] forced-colors:[&::-moz-range-thumb]:bg-[Highlight] forced-colors:[&::-moz-range-thumb]:border-[Canvas] forced-colors:disabled:[&::-webkit-slider-runnable-track]:bg-[GrayText] forced-colors:disabled:[&::-moz-range-track]:bg-[GrayText] forced-colors:disabled:[&::-webkit-slider-thumb]:bg-[GrayText] forced-colors:disabled:[&::-moz-range-thumb]:bg-[GrayText] forced-colors:focus-visible:outline-[Highlight]`,ringArc:`forced-colors:forced-color-adjust-none forced-colors:border-[Canvas] forced-colors:border-t-[Highlight]`,disabled:`forced-colors:text-[GrayText] forced-colors:border-[GrayText]`,selected:p};exports.disabledStyles=d,exports.focusRing=e,exports.focusRingInset=t,exports.forcedColors=m,exports.hitAreaLayer=o,exports.inputAppearanceClasses=a,exports.inputFocus=s,exports.inputFocusWithin=c,exports.inputHeightClasses=n,exports.inputInvalid=l,exports.inputInvalidWithin=u,exports.inputPaddingClasses=i,exports.inputTextClasses=r,exports.motionSafeTransition=f;
 //# sourceMappingURL=styles.cjs.map

package/dist/lib/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","names":["focusRing","focusRingInset","inputBase","inputFocus","inputFocusWithin","inputInvalid","inputInvalidWithin","disabledStyles","motionSafeTransition","selectedLeaf","forcedColors"],"sources":["../../src/lib/styles.ts"],"sourcesContent":["/**\n * Shared class-string recipes. They are plain literals so Tailwind's scanner (`@source ../lib`)\n * generates every utility; compose them with `cn()` before the consumer's `className`.\n */\n\n/** Focus-visible ring for focusable controls (C-FOCUS). */\nexport const focusRing =\n  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring';\n\n/** Focus-visible ring drawn inside the element: cells, rows, list and menu items. */\nexport const focusRingInset =\n  'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring';\n\n/** Ring on a container while any descendant has focus. */\nexport const focusWithinRing =\n  'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring';\n\n/** Base look of text-entry controls (Input, Textarea, Select, picker inputs). */\nexport const inputBase =\n  'h-8 w-full rounded border border-input bg-background px-3 text-body-1 text-foreground placeholder:text-muted-foreground';\n\n/**\n * Focus indicator of text-entry controls: a 2px primary bottom border. `focus:outline-hidden`\n * removes the outline while focused but — unlike `outline-none` — keeps a visible outline in\n * forced-colors mode, where the border colour change is not perceivable. (Scoped to `:focus` so\n * unfocused inputs do not show that outline in forced colors.)\n */\nexport const inputFocus = 'focus:outline-hidden focus:border-b-2 focus:border-b-primary';\n\n/**\n * Wrapper form of {@link inputFocus} for inputs rendered inside a styled wrapper (slots,\n * SearchBox, TagPicker). Put `focus:outline-hidden` on the inner control.\n */\nexport const inputFocusWithin = 'focus-within:border-b-2 focus-within:border-b-primary';\n\n/**\n * Invalid look of a text-entry control (Input, Select, Textarea, SearchBox, SpinButton, Combobox,\n * Dropdown, the picker inputs): the destructive border, kept on the bottom stroke while focused.\n * Apply it when the control's resolved `aria-invalid` is `true` (its own error state, the\n * consumer's `aria-invalid` or the surrounding Field's), after {@link inputBase} and\n * {@link inputFocus} in `cn()` so it replaces their border colours.\n */\nexport const inputInvalid = 'border-destructive focus:border-b-destructive';\n\n/**\n * Wrapper form of {@link inputInvalid} for a control drawn by a styled wrapper around the\n * focusable input (Input with slots, SpinButton), placed after {@link inputFocusWithin}.\n */\nexport const inputInvalidWithin = 'border-destructive focus-within:border-b-destructive';\n\n/**\n * Disabled look for native `disabled` and `aria-disabled` (C-DISABLED) controls. An\n * `aria-disabled` control that keeps keyboard focus (a self-disabling Pagination or Carousel\n * button) goes back to full opacity while it shows its focus ring, which `opacity` would dim below\n * 3:1, as a `disabledFocusable` button does.\n */\nexport const disabledStyles =\n  'disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100';\n\n/** Colour-transition recipe that is switched off for reduced motion (C-MOTION). */\nexport const motionSafeTransition = 'transition motion-reduce:transition-none';\n\nconst selectedLeaf =\n  'forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:forced-color-adjust-none';\n\n/**\n * Forced-colors (Windows High Contrast) recipes, built from system colours.\n */\nexport const forcedColors = {\n  /**\n   * Selected/checked state of a **leaf indicator** — Switch thumb, check glyph, radio dot,\n   * progress fill, selected day cell. Opts the element out of forced colours so the Highlight\n   * fill shows. Never use it on containers: `forced-color-adjust` is inherited and would opt\n   * every descendant (text, icons) of a row/option/card out of forced colours too.\n   */\n  selectedLeaf,\n  /**\n   * Selected state of a **container** — options, rows, cards, tabs. A Highlight outline as the\n   * non-colour indicator; the browser keeps system colours for the content.\n   */\n  selectedContainer:\n    'forced-colors:outline-2 forced-colors:outline-[Highlight] forced-colors:-outline-offset-2',\n  /** Border of a control (Switch track, Checkbox box, Radio circle). */\n  control: 'forced-colors:border-[ButtonText]',\n  /** Border of a non-interactive surface (tracks, separators). */\n  border: 'forced-colors:border-[CanvasText]',\n  /**\n   * Fill of a **leaf indicator drawn with its own background** that must stay visible in forced\n   * colors, where author backgrounds become Canvas: a step dot or connector, a pager dot, a\n   * progress segment. Paints `Highlight` and opts the element out of forced colors\n   * (`forced-color-adjust` is inherited: leaf elements only, as with `selectedLeaf`).\n   *\n   * It only colors the element's own background, so it cannot reach an indicator drawn by a\n   * pseudo-element or a border: use `rangeInput` for a native range input (Slider) and `ringArc`\n   * for a border-drawn ring (Spinner).\n   */\n  fill: 'forced-colors:bg-[Highlight] forced-colors:forced-color-adjust-none',\n  /**\n   * A native `<input type=\"range\">` drawn through its track and thumb pseudo-elements (Slider):\n   * put it on the input, after the normal-mode classes. It opts the input out of forced colors\n   * and, because the pseudo-elements inherit that opt-out, gives every part the input paints a\n   * system color: the rail `CanvasText`, the thumb `Highlight` with a `Canvas` edge, rail and\n   * thumb `GrayText` while disabled, and the focus-visible outline `Highlight` (the opt-out would\n   * otherwise keep the author ring color). Covers the Blink/WebKit (`::-webkit-slider-*`) and\n   * Firefox (`::-moz-range-*`) parts.\n   */\n  rangeInput:\n    'forced-colors:forced-color-adjust-none forced-colors:[&::-webkit-slider-runnable-track]:bg-[CanvasText] forced-colors:[&::-moz-range-track]:bg-[CanvasText] forced-colors:[&::-webkit-slider-thumb]:bg-[Highlight] forced-colors:[&::-webkit-slider-thumb]:border-[Canvas] forced-colors:[&::-moz-range-thumb]:bg-[Highlight] forced-colors:[&::-moz-range-thumb]:border-[Canvas] forced-colors:disabled:[&::-webkit-slider-runnable-track]:bg-[GrayText] forced-colors:disabled:[&::-moz-range-track]:bg-[GrayText] forced-colors:disabled:[&::-webkit-slider-thumb]:bg-[GrayText] forced-colors:disabled:[&::-moz-range-thumb]:bg-[GrayText] forced-colors:focus-visible:outline-[Highlight]',\n  /**\n   * Arc of a **ring drawn with borders** whose top side is the arc (Spinner): put it on the ring,\n   * after its border classes. Forced colors would give all four sides the same system color, so\n   * the arc would disappear into the track. It opts the ring out of forced colors, hides the\n   * track in `Canvas` and draws the arc in `Highlight`. Leaf elements only, as with `fill`.\n   */\n  ringArc:\n    'forced-colors:forced-color-adjust-none forced-colors:border-[Canvas] forced-colors:border-t-[Highlight]',\n  /** Disabled text and borders. */\n  disabled: 'forced-colors:text-[GrayText] forced-colors:border-[GrayText]',\n  /**\n   * @deprecated Ambiguous: use `selectedLeaf` for leaf indicators or `selectedContainer` for\n   * containers. Kept as an alias of `selectedLeaf`.\n   */\n  selected: selectedLeaf,\n} as const;\n"],"mappings":"AAMA,IAAaA,EACX,oFAGWC,EACX,qFAOWC,EACX,0HAQWC,EAAa,+DAMbC,EAAmB,wDASnBC,EAAe,gDAMfC,EAAqB,uDAQrBC,EACX,oJAGWC,EAAuB,2CAE9BC,EACJ,yGAKWC,EAAe,CAO1B,eAKA,kBACE,4FAEF,QAAS,oCAET,OAAQ,oCAWR,KAAM,sEAUN,WACE,iqBAOF,QACE,0GAEF,SAAU,gEAKV,SAAUD,CACZ"}
+{"version":3,"file":"styles.cjs","names":["focusRing","focusRingInset","inputHeightClasses","inputTextClasses","inputPaddingClasses","inputAppearanceClasses","hitAreaLayer","inputFocus","inputFocusWithin","inputInvalid","inputInvalidWithin","disabledStyles","motionSafeTransition","selectedLeaf","forcedColors"],"sources":["../../src/lib/styles.ts"],"sourcesContent":["/**\n * Shared class-string recipes. They are plain literals so Tailwind's scanner (`@source ../lib`)\n * generates every utility; compose them with `cn()` before the consumer's `className`.\n */\nimport type { CoreSize, InputAppearance } from './types';\n\n/** Focus-visible ring for focusable controls (C-FOCUS). */\nexport const focusRing =\n  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring';\n\n/** Focus-visible ring drawn inside the element: cells, rows, list and menu items. */\nexport const focusRingInset =\n  'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring';\n\n/** Ring on a container while any descendant has focus. */\nexport const focusWithinRing =\n  'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring';\n\n/**\n * Base look of text-entry controls (Input, Textarea, Select, picker inputs).\n * @deprecated Compose inputHeightClasses, inputTextClasses, inputPaddingClasses and\n * inputAppearanceClasses.\n */\nexport const inputBase =\n  'h-8 w-full rounded border border-input bg-background px-3 text-body-1 text-foreground placeholder:text-muted-foreground';\n\n/** Height of a text control or picker per size: 24, 32 or 40px. */\nexport const inputHeightClasses: Readonly<Record<CoreSize, string>> = {\n  small: 'h-6',\n  medium: 'h-8',\n  large: 'h-10',\n};\n\n/** Type ramp of a text control or picker per size. */\nexport const inputTextClasses: Readonly<Record<CoreSize, string>> = {\n  small: 'text-caption-1',\n  medium: 'text-body-1',\n  large: 'text-body-2',\n};\n\n/** Horizontal padding of a text control drawn on its own element, per size: 8, 12 or 16px. */\nexport const inputPaddingClasses: Readonly<Record<CoreSize, string>> = {\n  small: 'px-2',\n  medium: 'px-3',\n  large: 'px-4',\n};\n\n/**\n * Fill, strokes and corners of each appearance, for a field drawn on its own element or on a\n * wrapper. Compose the focus and invalid recipes after it: they recolor the borders the appearance\n * draws. The filled appearances have a transparent stroke (a visible one in the high-contrast\n * theme). In forced colors, the filled appearances and the one with only a bottom stroke draw their\n * border in the system's button text color, so every appearance keeps a visible boundary.\n */\nexport const inputAppearanceClasses: Readonly<Record<InputAppearance, string>> = {\n  outline: 'rounded border border-input border-b-stroke-accessible bg-background',\n  underline:\n    'rounded-none border-0 border-b border-b-stroke-accessible bg-transparent forced-colors:border-[ButtonText]',\n  'filled-darker':\n    'rounded border border-input-filled-stroke bg-input-filled-darker forced-colors:border-[ButtonText]',\n  'filled-lighter':\n    'rounded border border-input-filled-stroke bg-input-filled-lighter forced-colors:border-[ButtonText]',\n};\n\n/**\n * Extends a 20px control's pointer target to 24px (WCAG 2.5.8): a transparent layer 2px beyond\n * each edge. The element must be positioned: the picker buttons already are, and any other element\n * sets its own position (the recipe sets none, because cn() would then replace the position of a\n * picker button).\n */\nexport const hitAreaLayer = 'before:absolute before:-inset-0.5';\n\n/**\n * Focus indicator of text-entry controls: a 2px primary bottom border. `focus:outline-hidden`\n * removes the outline while focused but — unlike `outline-none` — keeps a visible outline in\n * forced-colors mode, where the border colour change is not perceivable. (Scoped to `:focus` so\n * unfocused inputs do not show that outline in forced colors.)\n */\nexport const inputFocus = 'focus:outline-hidden focus:border-b-2 focus:border-b-primary';\n\n/**\n * Wrapper form of {@link inputFocus} for inputs rendered inside a styled wrapper (slots,\n * SearchBox, TagPicker). Put `focus:outline-hidden` on the inner control.\n */\nexport const inputFocusWithin = 'focus-within:border-b-2 focus-within:border-b-primary';\n\n/**\n * Invalid look of a text-entry control (Input, Select, Textarea, SearchBox, SpinButton, Combobox,\n * Dropdown, the picker inputs), for every appearance: the destructive color on every border the\n * appearance draws. Apply it when the control's resolved `aria-invalid` is `true`, after the\n * appearance and {@link inputFocus} in `cn()`: while the control is focused, the focus recipe\n * colors the 2px bottom border and the other borders stay destructive.\n */\nexport const inputInvalid = 'border-destructive';\n\n/**\n * Wrapper form of {@link inputInvalid} for a control drawn by a styled wrapper around the\n * focusable input (Input with slots, SearchBox, SpinButton, TagPicker), placed after\n * {@link inputFocusWithin}.\n */\nexport const inputInvalidWithin = 'border-destructive';\n\n/**\n * Disabled look for native `disabled` and `aria-disabled` (C-DISABLED) controls. An\n * `aria-disabled` control that keeps keyboard focus (a self-disabling Pagination or Carousel\n * button) goes back to full opacity while it shows its focus ring, which `opacity` would dim below\n * 3:1, as a `disabledFocusable` button does.\n */\nexport const disabledStyles =\n  'disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100';\n\n/** Colour-transition recipe that is switched off for reduced motion (C-MOTION). */\nexport const motionSafeTransition = 'transition motion-reduce:transition-none';\n\nconst selectedLeaf =\n  'forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:forced-color-adjust-none';\n\n/**\n * Forced-colors (Windows High Contrast) recipes, built from system colours.\n */\nexport const forcedColors = {\n  /**\n   * Selected/checked state of a **leaf indicator** — Switch thumb, check glyph, radio dot,\n   * progress fill, selected day cell. Opts the element out of forced colours so the Highlight\n   * fill shows. Never use it on containers: `forced-color-adjust` is inherited and would opt\n   * every descendant (text, icons) of a row/option/card out of forced colours too.\n   */\n  selectedLeaf,\n  /**\n   * Selected state of a **container** — options, rows, cards, tabs. A Highlight outline as the\n   * non-colour indicator; the browser keeps system colours for the content.\n   */\n  selectedContainer:\n    'forced-colors:outline-2 forced-colors:outline-[Highlight] forced-colors:-outline-offset-2',\n  /** Border of a control (Switch track, Checkbox box, Radio circle). */\n  control: 'forced-colors:border-[ButtonText]',\n  /** Border of a non-interactive surface (tracks, separators). */\n  border: 'forced-colors:border-[CanvasText]',\n  /**\n   * Fill of a **leaf indicator drawn with its own background** that must stay visible in forced\n   * colors, where author backgrounds become Canvas: a step dot or connector, a pager dot, a\n   * progress segment. Paints `Highlight` and opts the element out of forced colors\n   * (`forced-color-adjust` is inherited: leaf elements only, as with `selectedLeaf`).\n   *\n   * It only colors the element's own background, so it cannot reach an indicator drawn by a\n   * pseudo-element or a border: use `rangeInput` for a native range input (Slider) and `ringArc`\n   * for a border-drawn ring (Spinner).\n   */\n  fill: 'forced-colors:bg-[Highlight] forced-colors:forced-color-adjust-none',\n  /**\n   * A native `<input type=\"range\">` drawn through its track and thumb pseudo-elements (Slider):\n   * put it on the input, after the normal-mode classes. It opts the input out of forced colors\n   * and, because the pseudo-elements inherit that opt-out, gives every part the input paints a\n   * system color: the rail `CanvasText`, the thumb `Highlight` with a `Canvas` edge, rail and\n   * thumb `GrayText` while disabled, and the focus-visible outline `Highlight` (the opt-out would\n   * otherwise keep the author ring color). Covers the Blink/WebKit (`::-webkit-slider-*`) and\n   * Firefox (`::-moz-range-*`) parts.\n   */\n  rangeInput:\n    'forced-colors:forced-color-adjust-none forced-colors:[&::-webkit-slider-runnable-track]:bg-[CanvasText] forced-colors:[&::-moz-range-track]:bg-[CanvasText] forced-colors:[&::-webkit-slider-thumb]:bg-[Highlight] forced-colors:[&::-webkit-slider-thumb]:border-[Canvas] forced-colors:[&::-moz-range-thumb]:bg-[Highlight] forced-colors:[&::-moz-range-thumb]:border-[Canvas] forced-colors:disabled:[&::-webkit-slider-runnable-track]:bg-[GrayText] forced-colors:disabled:[&::-moz-range-track]:bg-[GrayText] forced-colors:disabled:[&::-webkit-slider-thumb]:bg-[GrayText] forced-colors:disabled:[&::-moz-range-thumb]:bg-[GrayText] forced-colors:focus-visible:outline-[Highlight]',\n  /**\n   * Arc of a **ring drawn with borders** whose top side is the arc (Spinner): put it on the ring,\n   * after its border classes. Forced colors would give all four sides the same system color, so\n   * the arc would disappear into the track. It opts the ring out of forced colors, hides the\n   * track in `Canvas` and draws the arc in `Highlight`. Leaf elements only, as with `fill`.\n   */\n  ringArc:\n    'forced-colors:forced-color-adjust-none forced-colors:border-[Canvas] forced-colors:border-t-[Highlight]',\n  /** Disabled text and borders. */\n  disabled: 'forced-colors:text-[GrayText] forced-colors:border-[GrayText]',\n  /**\n   * @deprecated Ambiguous: use `selectedLeaf` for leaf indicators or `selectedContainer` for\n   * containers. Kept as an alias of `selectedLeaf`.\n   */\n  selected: selectedLeaf,\n} as const;\n"],"mappings":"AAOA,IAAaA,EACX,oFAGWC,EACX,qFAeWC,EAAyD,CACpE,MAAO,MACP,OAAQ,MACR,MAAO,MACT,EAGaC,EAAuD,CAClE,MAAO,iBACP,OAAQ,cACR,MAAO,aACT,EAGaC,EAA0D,CACrE,MAAO,OACP,OAAQ,OACR,MAAO,MACT,EASaC,EAAoE,CAC/E,QAAS,uEACT,UACE,6GACF,gBACE,qGACF,iBACE,qGACJ,EAQaC,EAAe,oCAQfC,EAAa,+DAMbC,EAAmB,wDASnBC,EAAe,qBAOfC,EAAqB,qBAQrBC,EACX,oJAGWC,EAAuB,2CAE9BC,EACJ,yGAKWC,EAAe,CAO1B,eAKA,kBACE,4FAEF,QAAS,oCAET,OAAQ,oCAWR,KAAM,sEAUN,WACE,iqBAOF,QACE,0GAEF,SAAU,gEAKV,SAAUD,CACZ"}

package/dist/lib/styles.mjs

@@ -1,6 +1,23 @@
 //#region src/lib/styles.ts
-var e = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", t = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring", n = "h-8 w-full rounded border border-input bg-background px-3 text-body-1 text-foreground placeholder:text-muted-foreground", r = "focus:outline-hidden focus:border-b-2 focus:border-b-primary", i = "focus-within:border-b-2 focus-within:border-b-primary", a = "border-destructive focus:border-b-destructive", o = "border-destructive focus-within:border-b-destructive", s = "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100", c = "transition motion-reduce:transition-none", l = "forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:forced-color-adjust-none", u = {
-	selectedLeaf: l,
+var e = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", t = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring", n = {
+	small: "h-6",
+	medium: "h-8",
+	large: "h-10"
+}, r = {
+	small: "text-caption-1",
+	medium: "text-body-1",
+	large: "text-body-2"
+}, i = {
+	small: "px-2",
+	medium: "px-3",
+	large: "px-4"
+}, a = {
+	outline: "rounded border border-input border-b-stroke-accessible bg-background",
+	underline: "rounded-none border-0 border-b border-b-stroke-accessible bg-transparent forced-colors:border-[ButtonText]",
+	"filled-darker": "rounded border border-input-filled-stroke bg-input-filled-darker forced-colors:border-[ButtonText]",
+	"filled-lighter": "rounded border border-input-filled-stroke bg-input-filled-lighter forced-colors:border-[ButtonText]"
+}, o = "before:absolute before:-inset-0.5", s = "focus:outline-hidden focus:border-b-2 focus:border-b-primary", c = "focus-within:border-b-2 focus-within:border-b-primary", l = "border-destructive", u = "border-destructive", d = "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100", f = "transition motion-reduce:transition-none", p = "forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:forced-color-adjust-none", m = {
+	selectedLeaf: p,
 	selectedContainer: "forced-colors:outline-2 forced-colors:outline-[Highlight] forced-colors:-outline-offset-2",
 	control: "forced-colors:border-[ButtonText]",
 	border: "forced-colors:border-[CanvasText]",
@@ -8,9 +25,9 @@ var e = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:ou
 	rangeInput: "forced-colors:forced-color-adjust-none forced-colors:[&::-webkit-slider-runnable-track]:bg-[CanvasText] forced-colors:[&::-moz-range-track]:bg-[CanvasText] forced-colors:[&::-webkit-slider-thumb]:bg-[Highlight] forced-colors:[&::-webkit-slider-thumb]:border-[Canvas] forced-colors:[&::-moz-range-thumb]:bg-[Highlight] forced-colors:[&::-moz-range-thumb]:border-[Canvas] forced-colors:disabled:[&::-webkit-slider-runnable-track]:bg-[GrayText] forced-colors:disabled:[&::-moz-range-track]:bg-[GrayText] forced-colors:disabled:[&::-webkit-slider-thumb]:bg-[GrayText] forced-colors:disabled:[&::-moz-range-thumb]:bg-[GrayText] forced-colors:focus-visible:outline-[Highlight]",
 	ringArc: "forced-colors:forced-color-adjust-none forced-colors:border-[Canvas] forced-colors:border-t-[Highlight]",
 	disabled: "forced-colors:text-[GrayText] forced-colors:border-[GrayText]",
-	selected: l
+	selected: p
 };
 //#endregion
-export { s as disabledStyles, e as focusRing, t as focusRingInset, u as forcedColors, n as inputBase, r as inputFocus, i as inputFocusWithin, a as inputInvalid, o as inputInvalidWithin, c as motionSafeTransition };
+export { d as disabledStyles, e as focusRing, t as focusRingInset, m as forcedColors, o as hitAreaLayer, a as inputAppearanceClasses, s as inputFocus, c as inputFocusWithin, n as inputHeightClasses, l as inputInvalid, u as inputInvalidWithin, i as inputPaddingClasses, r as inputTextClasses, f as motionSafeTransition };
 
 //# sourceMappingURL=styles.mjs.map

package/dist/lib/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","names":["focusRing","focusRingInset","inputBase","inputFocus","inputFocusWithin","inputInvalid","inputInvalidWithin","disabledStyles","motionSafeTransition","selectedLeaf","forcedColors"],"sources":["../../src/lib/styles.ts"],"sourcesContent":["/**\n * Shared class-string recipes. They are plain literals so Tailwind's scanner (`@source ../lib`)\n * generates every utility; compose them with `cn()` before the consumer's `className`.\n */\n\n/** Focus-visible ring for focusable controls (C-FOCUS). */\nexport const focusRing =\n  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring';\n\n/** Focus-visible ring drawn inside the element: cells, rows, list and menu items. */\nexport const focusRingInset =\n  'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring';\n\n/** Ring on a container while any descendant has focus. */\nexport const focusWithinRing =\n  'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring';\n\n/** Base look of text-entry controls (Input, Textarea, Select, picker inputs). */\nexport const inputBase =\n  'h-8 w-full rounded border border-input bg-background px-3 text-body-1 text-foreground placeholder:text-muted-foreground';\n\n/**\n * Focus indicator of text-entry controls: a 2px primary bottom border. `focus:outline-hidden`\n * removes the outline while focused but — unlike `outline-none` — keeps a visible outline in\n * forced-colors mode, where the border colour change is not perceivable. (Scoped to `:focus` so\n * unfocused inputs do not show that outline in forced colors.)\n */\nexport const inputFocus = 'focus:outline-hidden focus:border-b-2 focus:border-b-primary';\n\n/**\n * Wrapper form of {@link inputFocus} for inputs rendered inside a styled wrapper (slots,\n * SearchBox, TagPicker). Put `focus:outline-hidden` on the inner control.\n */\nexport const inputFocusWithin = 'focus-within:border-b-2 focus-within:border-b-primary';\n\n/**\n * Invalid look of a text-entry control (Input, Select, Textarea, SearchBox, SpinButton, Combobox,\n * Dropdown, the picker inputs): the destructive border, kept on the bottom stroke while focused.\n * Apply it when the control's resolved `aria-invalid` is `true` (its own error state, the\n * consumer's `aria-invalid` or the surrounding Field's), after {@link inputBase} and\n * {@link inputFocus} in `cn()` so it replaces their border colours.\n */\nexport const inputInvalid = 'border-destructive focus:border-b-destructive';\n\n/**\n * Wrapper form of {@link inputInvalid} for a control drawn by a styled wrapper around the\n * focusable input (Input with slots, SpinButton), placed after {@link inputFocusWithin}.\n */\nexport const inputInvalidWithin = 'border-destructive focus-within:border-b-destructive';\n\n/**\n * Disabled look for native `disabled` and `aria-disabled` (C-DISABLED) controls. An\n * `aria-disabled` control that keeps keyboard focus (a self-disabling Pagination or Carousel\n * button) goes back to full opacity while it shows its focus ring, which `opacity` would dim below\n * 3:1, as a `disabledFocusable` button does.\n */\nexport const disabledStyles =\n  'disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100';\n\n/** Colour-transition recipe that is switched off for reduced motion (C-MOTION). */\nexport const motionSafeTransition = 'transition motion-reduce:transition-none';\n\nconst selectedLeaf =\n  'forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:forced-color-adjust-none';\n\n/**\n * Forced-colors (Windows High Contrast) recipes, built from system colours.\n */\nexport const forcedColors = {\n  /**\n   * Selected/checked state of a **leaf indicator** — Switch thumb, check glyph, radio dot,\n   * progress fill, selected day cell. Opts the element out of forced colours so the Highlight\n   * fill shows. Never use it on containers: `forced-color-adjust` is inherited and would opt\n   * every descendant (text, icons) of a row/option/card out of forced colours too.\n   */\n  selectedLeaf,\n  /**\n   * Selected state of a **container** — options, rows, cards, tabs. A Highlight outline as the\n   * non-colour indicator; the browser keeps system colours for the content.\n   */\n  selectedContainer:\n    'forced-colors:outline-2 forced-colors:outline-[Highlight] forced-colors:-outline-offset-2',\n  /** Border of a control (Switch track, Checkbox box, Radio circle). */\n  control: 'forced-colors:border-[ButtonText]',\n  /** Border of a non-interactive surface (tracks, separators). */\n  border: 'forced-colors:border-[CanvasText]',\n  /**\n   * Fill of a **leaf indicator drawn with its own background** that must stay visible in forced\n   * colors, where author backgrounds become Canvas: a step dot or connector, a pager dot, a\n   * progress segment. Paints `Highlight` and opts the element out of forced colors\n   * (`forced-color-adjust` is inherited: leaf elements only, as with `selectedLeaf`).\n   *\n   * It only colors the element's own background, so it cannot reach an indicator drawn by a\n   * pseudo-element or a border: use `rangeInput` for a native range input (Slider) and `ringArc`\n   * for a border-drawn ring (Spinner).\n   */\n  fill: 'forced-colors:bg-[Highlight] forced-colors:forced-color-adjust-none',\n  /**\n   * A native `<input type=\"range\">` drawn through its track and thumb pseudo-elements (Slider):\n   * put it on the input, after the normal-mode classes. It opts the input out of forced colors\n   * and, because the pseudo-elements inherit that opt-out, gives every part the input paints a\n   * system color: the rail `CanvasText`, the thumb `Highlight` with a `Canvas` edge, rail and\n   * thumb `GrayText` while disabled, and the focus-visible outline `Highlight` (the opt-out would\n   * otherwise keep the author ring color). Covers the Blink/WebKit (`::-webkit-slider-*`) and\n   * Firefox (`::-moz-range-*`) parts.\n   */\n  rangeInput:\n    'forced-colors:forced-color-adjust-none forced-colors:[&::-webkit-slider-runnable-track]:bg-[CanvasText] forced-colors:[&::-moz-range-track]:bg-[CanvasText] forced-colors:[&::-webkit-slider-thumb]:bg-[Highlight] forced-colors:[&::-webkit-slider-thumb]:border-[Canvas] forced-colors:[&::-moz-range-thumb]:bg-[Highlight] forced-colors:[&::-moz-range-thumb]:border-[Canvas] forced-colors:disabled:[&::-webkit-slider-runnable-track]:bg-[GrayText] forced-colors:disabled:[&::-moz-range-track]:bg-[GrayText] forced-colors:disabled:[&::-webkit-slider-thumb]:bg-[GrayText] forced-colors:disabled:[&::-moz-range-thumb]:bg-[GrayText] forced-colors:focus-visible:outline-[Highlight]',\n  /**\n   * Arc of a **ring drawn with borders** whose top side is the arc (Spinner): put it on the ring,\n   * after its border classes. Forced colors would give all four sides the same system color, so\n   * the arc would disappear into the track. It opts the ring out of forced colors, hides the\n   * track in `Canvas` and draws the arc in `Highlight`. Leaf elements only, as with `fill`.\n   */\n  ringArc:\n    'forced-colors:forced-color-adjust-none forced-colors:border-[Canvas] forced-colors:border-t-[Highlight]',\n  /** Disabled text and borders. */\n  disabled: 'forced-colors:text-[GrayText] forced-colors:border-[GrayText]',\n  /**\n   * @deprecated Ambiguous: use `selectedLeaf` for leaf indicators or `selectedContainer` for\n   * containers. Kept as an alias of `selectedLeaf`.\n   */\n  selected: selectedLeaf,\n} as const;\n"],"mappings":";AAMA,IAAaA,IACX,qFAGWC,IACX,sFAOWC,IACX,2HAQWC,IAAa,gEAMbC,IAAmB,yDASnBC,IAAe,iDAMfC,IAAqB,wDAQrBC,IACX,qJAGWC,IAAuB,4CAE9BC,IACJ,0GAKWC,IAAe;CAO1B;CAKA,mBACE;CAEF,SAAS;CAET,QAAQ;CAWR,MAAM;CAUN,YACE;CAOF,SACE;CAEF,UAAU;CAKV,UAAUD;AACZ"}
+{"version":3,"file":"styles.mjs","names":["focusRing","focusRingInset","inputHeightClasses","inputTextClasses","inputPaddingClasses","inputAppearanceClasses","hitAreaLayer","inputFocus","inputFocusWithin","inputInvalid","inputInvalidWithin","disabledStyles","motionSafeTransition","selectedLeaf","forcedColors"],"sources":["../../src/lib/styles.ts"],"sourcesContent":["/**\n * Shared class-string recipes. They are plain literals so Tailwind's scanner (`@source ../lib`)\n * generates every utility; compose them with `cn()` before the consumer's `className`.\n */\nimport type { CoreSize, InputAppearance } from './types';\n\n/** Focus-visible ring for focusable controls (C-FOCUS). */\nexport const focusRing =\n  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring';\n\n/** Focus-visible ring drawn inside the element: cells, rows, list and menu items. */\nexport const focusRingInset =\n  'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring';\n\n/** Ring on a container while any descendant has focus. */\nexport const focusWithinRing =\n  'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring';\n\n/**\n * Base look of text-entry controls (Input, Textarea, Select, picker inputs).\n * @deprecated Compose inputHeightClasses, inputTextClasses, inputPaddingClasses and\n * inputAppearanceClasses.\n */\nexport const inputBase =\n  'h-8 w-full rounded border border-input bg-background px-3 text-body-1 text-foreground placeholder:text-muted-foreground';\n\n/** Height of a text control or picker per size: 24, 32 or 40px. */\nexport const inputHeightClasses: Readonly<Record<CoreSize, string>> = {\n  small: 'h-6',\n  medium: 'h-8',\n  large: 'h-10',\n};\n\n/** Type ramp of a text control or picker per size. */\nexport const inputTextClasses: Readonly<Record<CoreSize, string>> = {\n  small: 'text-caption-1',\n  medium: 'text-body-1',\n  large: 'text-body-2',\n};\n\n/** Horizontal padding of a text control drawn on its own element, per size: 8, 12 or 16px. */\nexport const inputPaddingClasses: Readonly<Record<CoreSize, string>> = {\n  small: 'px-2',\n  medium: 'px-3',\n  large: 'px-4',\n};\n\n/**\n * Fill, strokes and corners of each appearance, for a field drawn on its own element or on a\n * wrapper. Compose the focus and invalid recipes after it: they recolor the borders the appearance\n * draws. The filled appearances have a transparent stroke (a visible one in the high-contrast\n * theme). In forced colors, the filled appearances and the one with only a bottom stroke draw their\n * border in the system's button text color, so every appearance keeps a visible boundary.\n */\nexport const inputAppearanceClasses: Readonly<Record<InputAppearance, string>> = {\n  outline: 'rounded border border-input border-b-stroke-accessible bg-background',\n  underline:\n    'rounded-none border-0 border-b border-b-stroke-accessible bg-transparent forced-colors:border-[ButtonText]',\n  'filled-darker':\n    'rounded border border-input-filled-stroke bg-input-filled-darker forced-colors:border-[ButtonText]',\n  'filled-lighter':\n    'rounded border border-input-filled-stroke bg-input-filled-lighter forced-colors:border-[ButtonText]',\n};\n\n/**\n * Extends a 20px control's pointer target to 24px (WCAG 2.5.8): a transparent layer 2px beyond\n * each edge. The element must be positioned: the picker buttons already are, and any other element\n * sets its own position (the recipe sets none, because cn() would then replace the position of a\n * picker button).\n */\nexport const hitAreaLayer = 'before:absolute before:-inset-0.5';\n\n/**\n * Focus indicator of text-entry controls: a 2px primary bottom border. `focus:outline-hidden`\n * removes the outline while focused but — unlike `outline-none` — keeps a visible outline in\n * forced-colors mode, where the border colour change is not perceivable. (Scoped to `:focus` so\n * unfocused inputs do not show that outline in forced colors.)\n */\nexport const inputFocus = 'focus:outline-hidden focus:border-b-2 focus:border-b-primary';\n\n/**\n * Wrapper form of {@link inputFocus} for inputs rendered inside a styled wrapper (slots,\n * SearchBox, TagPicker). Put `focus:outline-hidden` on the inner control.\n */\nexport const inputFocusWithin = 'focus-within:border-b-2 focus-within:border-b-primary';\n\n/**\n * Invalid look of a text-entry control (Input, Select, Textarea, SearchBox, SpinButton, Combobox,\n * Dropdown, the picker inputs), for every appearance: the destructive color on every border the\n * appearance draws. Apply it when the control's resolved `aria-invalid` is `true`, after the\n * appearance and {@link inputFocus} in `cn()`: while the control is focused, the focus recipe\n * colors the 2px bottom border and the other borders stay destructive.\n */\nexport const inputInvalid = 'border-destructive';\n\n/**\n * Wrapper form of {@link inputInvalid} for a control drawn by a styled wrapper around the\n * focusable input (Input with slots, SearchBox, SpinButton, TagPicker), placed after\n * {@link inputFocusWithin}.\n */\nexport const inputInvalidWithin = 'border-destructive';\n\n/**\n * Disabled look for native `disabled` and `aria-disabled` (C-DISABLED) controls. An\n * `aria-disabled` control that keeps keyboard focus (a self-disabling Pagination or Carousel\n * button) goes back to full opacity while it shows its focus ring, which `opacity` would dim below\n * 3:1, as a `disabledFocusable` button does.\n */\nexport const disabledStyles =\n  'disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100';\n\n/** Colour-transition recipe that is switched off for reduced motion (C-MOTION). */\nexport const motionSafeTransition = 'transition motion-reduce:transition-none';\n\nconst selectedLeaf =\n  'forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:forced-color-adjust-none';\n\n/**\n * Forced-colors (Windows High Contrast) recipes, built from system colours.\n */\nexport const forcedColors = {\n  /**\n   * Selected/checked state of a **leaf indicator** — Switch thumb, check glyph, radio dot,\n   * progress fill, selected day cell. Opts the element out of forced colours so the Highlight\n   * fill shows. Never use it on containers: `forced-color-adjust` is inherited and would opt\n   * every descendant (text, icons) of a row/option/card out of forced colours too.\n   */\n  selectedLeaf,\n  /**\n   * Selected state of a **container** — options, rows, cards, tabs. A Highlight outline as the\n   * non-colour indicator; the browser keeps system colours for the content.\n   */\n  selectedContainer:\n    'forced-colors:outline-2 forced-colors:outline-[Highlight] forced-colors:-outline-offset-2',\n  /** Border of a control (Switch track, Checkbox box, Radio circle). */\n  control: 'forced-colors:border-[ButtonText]',\n  /** Border of a non-interactive surface (tracks, separators). */\n  border: 'forced-colors:border-[CanvasText]',\n  /**\n   * Fill of a **leaf indicator drawn with its own background** that must stay visible in forced\n   * colors, where author backgrounds become Canvas: a step dot or connector, a pager dot, a\n   * progress segment. Paints `Highlight` and opts the element out of forced colors\n   * (`forced-color-adjust` is inherited: leaf elements only, as with `selectedLeaf`).\n   *\n   * It only colors the element's own background, so it cannot reach an indicator drawn by a\n   * pseudo-element or a border: use `rangeInput` for a native range input (Slider) and `ringArc`\n   * for a border-drawn ring (Spinner).\n   */\n  fill: 'forced-colors:bg-[Highlight] forced-colors:forced-color-adjust-none',\n  /**\n   * A native `<input type=\"range\">` drawn through its track and thumb pseudo-elements (Slider):\n   * put it on the input, after the normal-mode classes. It opts the input out of forced colors\n   * and, because the pseudo-elements inherit that opt-out, gives every part the input paints a\n   * system color: the rail `CanvasText`, the thumb `Highlight` with a `Canvas` edge, rail and\n   * thumb `GrayText` while disabled, and the focus-visible outline `Highlight` (the opt-out would\n   * otherwise keep the author ring color). Covers the Blink/WebKit (`::-webkit-slider-*`) and\n   * Firefox (`::-moz-range-*`) parts.\n   */\n  rangeInput:\n    'forced-colors:forced-color-adjust-none forced-colors:[&::-webkit-slider-runnable-track]:bg-[CanvasText] forced-colors:[&::-moz-range-track]:bg-[CanvasText] forced-colors:[&::-webkit-slider-thumb]:bg-[Highlight] forced-colors:[&::-webkit-slider-thumb]:border-[Canvas] forced-colors:[&::-moz-range-thumb]:bg-[Highlight] forced-colors:[&::-moz-range-thumb]:border-[Canvas] forced-colors:disabled:[&::-webkit-slider-runnable-track]:bg-[GrayText] forced-colors:disabled:[&::-moz-range-track]:bg-[GrayText] forced-colors:disabled:[&::-webkit-slider-thumb]:bg-[GrayText] forced-colors:disabled:[&::-moz-range-thumb]:bg-[GrayText] forced-colors:focus-visible:outline-[Highlight]',\n  /**\n   * Arc of a **ring drawn with borders** whose top side is the arc (Spinner): put it on the ring,\n   * after its border classes. Forced colors would give all four sides the same system color, so\n   * the arc would disappear into the track. It opts the ring out of forced colors, hides the\n   * track in `Canvas` and draws the arc in `Highlight`. Leaf elements only, as with `fill`.\n   */\n  ringArc:\n    'forced-colors:forced-color-adjust-none forced-colors:border-[Canvas] forced-colors:border-t-[Highlight]',\n  /** Disabled text and borders. */\n  disabled: 'forced-colors:text-[GrayText] forced-colors:border-[GrayText]',\n  /**\n   * @deprecated Ambiguous: use `selectedLeaf` for leaf indicators or `selectedContainer` for\n   * containers. Kept as an alias of `selectedLeaf`.\n   */\n  selected: selectedLeaf,\n} as const;\n"],"mappings":";AAOA,IAAaA,IACX,qFAGWC,IACX,sFAeWC,IAAyD;CACpE,OAAO;CACP,QAAQ;CACR,OAAO;AACT,GAGaC,IAAuD;CAClE,OAAO;CACP,QAAQ;CACR,OAAO;AACT,GAGaC,IAA0D;CACrE,OAAO;CACP,QAAQ;CACR,OAAO;AACT,GASaC,IAAoE;CAC/E,SAAS;CACT,WACE;CACF,iBACE;CACF,kBACE;AACJ,GAQaC,IAAe,qCAQfC,IAAa,gEAMbC,IAAmB,yDASnBC,IAAe,sBAOfC,IAAqB,sBAQrBC,IACX,qJAGWC,IAAuB,4CAE9BC,IACJ,0GAKWC,IAAe;CAO1B;CAKA,mBACE;CAEF,SAAS;CAET,QAAQ;CAWR,MAAM;CAUN,YACE;CAOF,SACE;CAEF,UAAU;CAKV,UAAUD;AACZ"}