@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.18

package/dist/docs/radio-group/styling.md

@@ -1,118 +1,233 @@
-## Styling API
+# Radio and Radio Group Styling
 
-This section documents the supported styling hooks for `<w-radio>` and `<w-radio-group>`.
+This document covers the styling API for both `<w-radio>` (individual radio buttons) and `<w-radio-group>` (the container that manages them).
 
-Use these hooks to customize appearance without relying on internal structure or selectors.
+## Quick Start
 
-Before changing the default styles, remember that doing so can result in less consistent experiences for users across the product. Prefer defaults.
+```html
+<w-radio-group label="Choose a size" name="size">
+  <w-radio value="small">Small</w-radio>
+  <w-radio value="medium">Medium</w-radio>
+  <w-radio value="large">Large</w-radio>
+</w-radio-group>
+```
 
-- Prefer **component tokens** for size, spacing, and state styling.
-- Use **parts** only for small, local tweaks.
-- Avoid relying on internal class names or selectors.
+Customize via component tokens:
 
-### Parts
+```css
+/* Style all radio groups in a section */
+.settings {
+  --w-c-radio-group-gap: 12px;
+  --w-c-radio-size: 2.4rem;
+}
+```
 
-The radio exposes a small set of parts that can be targeted for last‑mile layout or typography tweaks.
+---
 
-| Part | Targets | Typical use |
-|---|---|---|
-| `control` | radio control (circle) | minor alignment or sizing tweaks |
-| `label` | label content | typography tweaks |
+## Styling Philosophy
 
-Example:
+Before customizing, remember that changing defaults can create inconsistent experiences. Prefer the defaults.
 
+- **Component tokens** for size, spacing, color, and state styling
+- **Parts** only for small, one-off tweaks
+- Avoid relying on internal class names
+
+---
+
+## Radio Group (`<w-radio-group>`)
+
+### Parts
+
+| Part | Targets | Use Case |
+|------|---------|----------|
+| `form-control` | The `<fieldset>` wrapper | Outer container tweaks |
+| `form-control-label` | The group label element | Label typography overrides |
+| `form-control-input` | Container for radio buttons | Adjust layout/flow of radios |
+| `help-text` | Help text / error message | Style hint text |
+
+**Example:**
 ```css
-w-radio::part(label) {
-  font-weight: 600;
+w-radio-group::part(form-control-label) {
+  text-transform: uppercase;
 }
 
-w-radio::part(control) {
-  margin-top: 1px;
+w-radio-group::part(form-control-input) {
+  flex-direction: row; /* horizontal radios */
 }
 ```
 
-Parts are intended as an **escape hatch**.
-Prefer component tokens for anything state‑ or size‑related.
+### Component Tokens
 
+#### Label
 
-### Component tokens
+| Token | Purpose | Default |
+|-------|---------|---------|
+| `--w-c-radio-group-label-font-size` | Label font size | `var(--w-font-size-s)` |
+| `--w-c-radio-group-label-line-height` | Label line height | `var(--w-line-height-s)` |
+| `--w-c-radio-group-label-font-weight` | Label font weight | `700` |
+| `--w-c-radio-group-label-color` | Label text color | `var(--w-s-color-text)` |
+| `--w-c-radio-group-label-color-disabled` | Label color when disabled | `var(--w-s-color-text-disabled)` |
+| `--w-c-radio-group-label-padding-bottom` | Space below label | `16px` |
 
-Component tokens (`--w-c-radio-*`) act as inputs to the radio styling.
-They can be set directly on the component or inherited from a parent container.
+#### Optional Indicator
 
+| Token | Purpose | Default |
+|-------|---------|---------|
+| `--w-c-radio-group-optional-font-weight` | "Optional" text weight | `400` |
+| `--w-c-radio-group-optional-color` | "Optional" text color | `var(--w-s-color-text-subtle)` |
+| `--w-c-radio-group-optional-margin-inline-start` | Space before "Optional" | `0.5rem` |
+
+#### Radio Spacing
+
+| Token | Purpose | Default |
+|-------|---------|---------|
+| `--w-c-radio-group-gap` | Gap between radio buttons | `16px` |
+
+#### Help Text
+
+| Token | Purpose | Default |
+|-------|---------|---------|
+| `--w-c-radio-group-help-text-margin-block-start` | Space above help text | `16px` |
+| `--w-c-radio-group-help-text-font-size` | Help text font size | `var(--w-font-size-xs)` |
+| `--w-c-radio-group-help-text-line-height` | Help text line height | `var(--w-line-height-xs)` |
+| `--w-c-radio-group-help-text-color` | Help text color | `var(--w-s-color-text-subtle)` |
+| `--w-c-radio-group-help-text-color-disabled` | Help text color when disabled | `var(--w-s-color-text-disabled)` |
+| `--w-c-radio-group-help-text-color-error` | Help text color when invalid | `var(--w-s-color-text-negative)` |
+
+**Example:**
 ```css
-.settings-panel {
-  --w-c-radio-gap: 12px;
+w-radio-group {
+  --w-c-radio-group-gap: 12px;
+  --w-c-radio-group-label-font-weight: 600;
+  --w-c-radio-group-help-text-color: var(--w-s-color-text);
 }
 ```
 
-Defaults are defined internally; setting a token is always optional.
+---
 
+## Individual Radio (`<w-radio>`)
 
-#### Layout & size
-
-| Token | Purpose | Default |
-|---|---|---|
-| `--w-c-radio-gap` | space between control and label | `8px` |
-| `--w-c-radio-size` | width/height of the control | `2rem` |
-| `--w-c-radio-radius` | border radius of the control | `50%` |
-| `--w-c-radio-border-width` | border width | `1px` |
-| `--w-c-radio-checked-border-width` | border width when checked | `0.6rem` |
+### Parts
 
+| Part | Targets | Use Case |
+|------|---------|----------|
+| `base` | Wrapper containing control and label | Container-level adjustments |
+| `control` | Radio control (circle) | Alignment or sizing tweaks |
+| `label` | Label content | Typography overrides |
 
-#### Colors
+**Example:**
+```css
+w-radio::part(label) {
+  font-weight: 600;
+}
 
-| Token | Purpose | Default |
-|---|---|---|
-| `--w-c-radio-bg` | control background | theme default |
-| `--w-c-radio-border-color` | control border color | theme default |
-| `--w-c-radio-border-color-checked` | border color when checked | theme default |
-| `--w-c-radio-label-color` | label text color | `currentColor` |
+w-radio::part(control) {
+  margin-top: 1px;
+}
+```
 
+### Component Tokens
 
-#### Invalid state
+#### Layout & Size
 
 | Token | Purpose | Default |
-|---|---|---|
-| `--w-c-radio-border-color-invalid` | border color when invalid | theme default |
+|-------|---------|---------|
+| `--w-c-radio-gap` | Space between control and label | `8px` |
+| `--w-c-radio-size` | Width/height of control | `2rem` |
+| `--w-c-radio-radius` | Border radius | `50%` |
+| `--w-c-radio-border-width` | Border width | `1px` |
+| `--w-c-radio-checked-border-width` | Border width when checked | `0.6rem` |
+
+#### Colors
 
+| Token | Purpose | Default |
+|-------|---------|---------|
+| `--w-c-radio-bg` | Control background | `var(--w-s-color-background)` |
+| `--w-c-radio-border-color` | Control border color | `var(--w-s-color-border-strong)` |
+| `--w-c-radio-border-color-checked` | Border when checked | `var(--w-s-color-border-selected)` |
+| `--w-c-radio-border-color-invalid` | Border when invalid | `var(--w-s-color-border-negative)` |
+| `--w-c-radio-label-color` | Label text color | `currentColor` |
 
-#### Disabled state
+#### Disabled State
 
 | Token | Purpose | Default |
-|---|---|---|
-| `--w-c-radio-bg-disabled` | background when disabled | theme default |
-| `--w-c-radio-border-color-disabled` | border when disabled | theme default |
-| `--w-c-radio-label-color-disabled` | label color when disabled | theme default |
-| `--w-c-radio-cursor-disabled` | cursor when disabled | `not-allowed` |
+|-------|---------|---------|
+| `--w-c-radio-bg-disabled` | Background when disabled | `var(--w-s-color-background-disabled-subtle)` |
+| `--w-c-radio-border-color-disabled` | Border when disabled | `var(--w-s-color-border-disabled)` |
+| `--w-c-radio-label-color-disabled` | Label color when disabled | `var(--w-s-color-text-disabled)` |
+| `--w-c-radio-cursor-disabled` | Cursor when disabled | `not-allowed` |
 
 #### Typography
 
 | Token | Purpose | Default |
-|---|---|---|
-| `--w-c-radio-label-font-size` | label font size | theme default |
-| `--w-c-radio-label-line-height` | label line height | theme default |
-
+|-------|---------|---------|
+| `--w-c-radio-label-font-size` | Label font size | `var(--w-font-size-m)` |
+| `--w-c-radio-label-line-height` | Label line height | `var(--w-line-height-m)` |
 
 #### Focus
 
 | Token | Purpose | Default |
-|---|---|---|
-| `--w-c-radio-outline-width` | focus outline width | `2px` |
-| `--w-c-radio-outline-color` | focus outline color | theme default |
-| `--w-c-radio-outline-offset` | focus outline offset | theme default |
+|-------|---------|---------|
+| `--w-c-radio-outline-width` | Focus outline width | `2px` |
+| `--w-c-radio-outline-color` | Focus outline color | `var(--w-s-color-border-focus)` |
+| `--w-c-radio-outline-offset` | Focus outline offset | `var(--w-outline-offset, 1px)` |
 
 #### Interaction
 
 | Token | Purpose | Default |
-|---|---|---|
-| `--w-c-radio-cursor` | cursor in enabled state | `pointer` |
+|-------|---------|---------|
+| `--w-c-radio-cursor` | Cursor in enabled state | `pointer` |
 
 #### Motion
 
 | Token | Purpose | Default |
-|---|---|---|
-| `--w-c-radio-transition` | transition for control | `150ms cubic-bezier(0.4, 0, 0.2, 1)` |
+|-------|---------|---------|
+| `--w-c-radio-transition` | Transition for control | `border-color 150ms, border-width 150ms, background-color 150ms` |
+
+**Note:** Transitions automatically disable when `prefers-reduced-motion: reduce` is active.
+
+---
+
+## Complete Examples
+
+### Horizontal Radio Group
+
+```css
+w-radio-group::part(form-control-input) {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+```
+
+### Larger Radio Buttons
+
+```css
+w-radio {
+  --w-c-radio-size: 2.4rem;
+  --w-c-radio-checked-border-width: 0.8rem;
+}
+```
+
+### Custom Colors
+
+```css
+w-radio {
+  --w-c-radio-border-color-checked: var(--w-s-color-border-success);
+}
+```
+
+### Tighter Spacing
+
+```css
+w-radio-group {
+  --w-c-radio-group-gap: 8px;
+  --w-c-radio-group-label-padding-bottom: 8px;
+}
+```
+
+---
+
+## Architecture Note
 
-Transitions are automatically disabled when `prefers-reduced-motion: reduce` is active.
+**Radio-group uses `<fieldset>`** which is the semantic HTML element for grouping form controls. Note that `<w-checkbox-group>` currently uses `<div>` instead - this inconsistency may be addressed in a future major version to align both components on the more accessible `<fieldset>` approach.
 

package/dist/docs/snackbar/api.md

@@ -17,7 +17,7 @@ Creates a snackbar item and immediately adds it to the snackbar.
 By default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).
 
 If you include an `action` in the options the default `duration` is
-set to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter. 
+set to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.
 
 A `duration` of 10 seconds or longer forces the close button to be visible.
 

package/dist/docs/snackbar/snackbar.md

@@ -372,7 +372,7 @@ Creates a snackbar item and immediately adds it to the snackbar.
 By default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).
 
 If you include an `action` in the options the default `duration` is
-set to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter. 
+set to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.
 
 A `duration` of 10 seconds or longer forces the close button to be visible.
 

package/dist/docs/snackbar-item/api.md

@@ -4,7 +4,7 @@
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| action-placement | [`SnackbarActionPlacement`](#snackbaractionplacement) | `'inline'` | The placement of the action and close buttons. |
+| action-placement | [`SnackbarActionPlacement`](#snackbaractionplacement) | `"inline"` | The placement of the action and close buttons. |
 | close (JS only) | `close() => void` | `-` | Remove the snackbar item from the document. |
 | duration | `number` | `-` | How long the message should stay in the document before removing itself. |
 
@@ -15,7 +15,7 @@
 The placement of the action and close buttons.
 
 - Type: [`SnackbarActionPlacement`](#snackbaractionplacement)
-- Default: `'inline'`
+- Default: `"inline"`
 
 ##### close (JS only)
 

package/dist/docs/snackbar-item/snackbar-item.md

@@ -12,7 +12,7 @@ See the `create` function on `w-snackbar` for a convenience API which helps you
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| action-placement | [`SnackbarActionPlacement`](#snackbaractionplacement) | `'inline'` | The placement of the action and close buttons. |
+| action-placement | [`SnackbarActionPlacement`](#snackbaractionplacement) | `"inline"` | The placement of the action and close buttons. |
 | close (JS only) | `close() => void` | `-` | Remove the snackbar item from the document. |
 | duration | `number` | `-` | How long the message should stay in the document before removing itself. |
 
@@ -23,7 +23,7 @@ See the `create` function on `w-snackbar` for a convenience API which helps you
 The placement of the action and close buttons.
 
 - Type: [`SnackbarActionPlacement`](#snackbaractionplacement)
-- Default: `'inline'`
+- Default: `"inline"`
 
 ##### close (JS only)
 

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import type { WarpAttention } from "./packages/attention/attention.ts";
 import type { WarpBadge } from "./packages/badge/badge.ts";
 import type { WarpBox } from "./packages/box/box.ts";
 import type { WarpBreadcrumbs } from "./packages/breadcrumbs/breadcrumbs.ts";
+import type { WarpBreadcrumbItem } from "./packages/breadcrumb-item/breadcrumb-item.ts";
 import type { WarpCard } from "./packages/card/card.ts";
 import type { WarpCheckbox, WCheckbox } from "./packages/checkbox/checkbox.ts";
 import type {
@@ -856,6 +857,35 @@ Defaults to the localized "You are here" label. Set `aria-label` when the defaul
   textContent?: string | number;
 };
 
+export type WarpBreadcrumbItemProps = {
+  /** Marks this item as the current page.
+Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator. */
+  "current-page"?: WarpBreadcrumbItem["currentPage"];
+  /** Marks this item as the current page.
+Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator. */
+  currentPage?: WarpBreadcrumbItem["currentPage"];
+  /** URL for linked breadcrumb items.
+When omitted, the item renders as non-focusable text. */
+  href?: WarpBreadcrumbItem["href"];
+};
+
+export type WarpBreadcrumbItemSolidJsProps = {
+  /** Marks this item as the current page.
+Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator. */
+  "bool:current-page"?: WarpBreadcrumbItem["currentPage"];
+  /** Marks this item as the current page.
+Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator. */
+  "prop:currentPage"?: WarpBreadcrumbItem["currentPage"];
+  /** URL for linked breadcrumb items.
+When omitted, the item renders as non-focusable text. */
+  "prop:href"?: WarpBreadcrumbItem["href"];
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
 export type WarpCardProps = {
   /** Whether the card is visually selected.
 
@@ -2588,6 +2618,31 @@ export type CustomElements = {
     WarpBreadcrumbsProps & BaseProps<WarpBreadcrumbs> & BaseEvents
   >;
 
+  /**
+   * Represents one item in a `w-breadcrumbs` trail.
+   * Renders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items.
+   *
+   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `current-page`/`currentPage`: Marks this item as the current page.
+   * Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator.
+   * - `href`: URL for linked breadcrumb items.
+   * When omitted, the item renders as non-focusable text.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The breadcrumb label content.
+   */
+  "w-breadcrumb-item": Partial<
+    WarpBreadcrumbItemProps & BaseProps<WarpBreadcrumbItem> & BaseEvents
+  >;
+
   /**
    * Card is a layout component used for separating content areas on a page.
    *
@@ -2671,7 +2726,18 @@ export type CustomElements = {
   >;
 
   /**
+   * Checkboxes allow users to select multiple options from a list of choices.
+   *
+   * Use with `w-checkbox`.
    *
+   * ## Architecture Note
+   * This component uses a <div> wrapper instead of the more semantic <fieldset> element.
+   * Note that w-radio-group uses <fieldset>, which provides better accessibility and follows
+   * HTML best practices. This inconsistency exists for historical reasons and may be addressed
+   * in a future major version to align both on the more semantic approach.
+   *
+   * TODO: Align w-checkbox-group to use <fieldset> in a future major version after assessing
+   * backwards compatibility implications (CSS selectors, etc.).
    *
    * ## Attributes & Properties
    *
@@ -3038,7 +3104,7 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `label`: Alternative to the `label` attribute should you need custom HTML.
-   * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML.
+   * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML. ## Architecture Note This component uses semantic <fieldset> element for grouping radio controls, which provides better accessibility and follows HTML best practices. Note that w-checkbox-group currently uses <div> instead - this inconsistency exists for historical reasons and may be addressed in a future major version to align both on the more semantic approach. TODO: Align w-checkbox-group to also use <fieldset> in a future major version after assessing backwards compatibility implications (CSS selectors, etc.).
    */
   "w-radio-group": Partial<
     WarpRadioGroupProps & BaseProps<WarpRadioGroup> & BaseEvents
@@ -3446,6 +3512,7 @@ type CustomElementInstances = {
   "w-badge": WarpBadge;
   "w-box": WarpBox;
   "w-breadcrumbs": WarpBreadcrumbs;
+  "w-breadcrumb-item": WarpBreadcrumbItem;
   "w-card": WarpCard;
   "w-checkbox": WarpCheckbox;
   "w-checkbox-group": WarpCheckboxGroup;
@@ -3485,6 +3552,7 @@ type CustomElementComponentProps = {
   "w-badge": WarpBadgeProps;
   "w-box": WarpBoxProps;
   "w-breadcrumbs": WarpBreadcrumbsProps;
+  "w-breadcrumb-item": WarpBreadcrumbItemProps;
   "w-card": WarpCardProps;
   "w-checkbox": WarpCheckboxProps;
   "w-checkbox-group": WarpCheckboxGroupProps;
@@ -3852,6 +3920,34 @@ export type CustomElementsSolidJs = {
       BaseEvents
   >;
 
+  /**
+   * Represents one item in a `w-breadcrumbs` trail.
+   * Renders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items.
+   *
+   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `current-page`/`currentPage`: Marks this item as the current page.
+   * Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator.
+   * - `href`: URL for linked breadcrumb items.
+   * When omitted, the item renders as non-focusable text.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The breadcrumb label content.
+   */
+  "w-breadcrumb-item": Partial<
+    WarpBreadcrumbItemProps &
+      WarpBreadcrumbItemSolidJsProps &
+      BaseProps<WarpBreadcrumbItem> &
+      BaseEvents
+  >;
+
   /**
    * Card is a layout component used for separating content areas on a page.
    *
@@ -3940,7 +4036,18 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
+   * Checkboxes allow users to select multiple options from a list of choices.
+   *
+   * Use with `w-checkbox`.
+   *
+   * ## Architecture Note
+   * This component uses a <div> wrapper instead of the more semantic <fieldset> element.
+   * Note that w-radio-group uses <fieldset>, which provides better accessibility and follows
+   * HTML best practices. This inconsistency exists for historical reasons and may be addressed
+   * in a future major version to align both on the more semantic approach.
    *
+   * TODO: Align w-checkbox-group to use <fieldset> in a future major version after assessing
+   * backwards compatibility implications (CSS selectors, etc.).
    *
    * ## Attributes & Properties
    *
@@ -4337,7 +4444,7 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `label`: Alternative to the `label` attribute should you need custom HTML.
-   * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML.
+   * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML. ## Architecture Note This component uses semantic <fieldset> element for grouping radio controls, which provides better accessibility and follows HTML best practices. Note that w-checkbox-group currently uses <div> instead - this inconsistency exists for historical reasons and may be addressed in a future major version to align both on the more semantic approach. TODO: Align w-checkbox-group to also use <fieldset> in a future major version after assessing backwards compatibility implications (CSS selectors, etc.).
    */
   "w-radio-group": Partial<
     WarpRadioGroupProps &

package/dist/packages/affix/affix.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-import '../icon/icon.js';
+import { LitElement } from "lit";
+import "../icon/icon.js";
 declare const WarpAffix_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
@@ -19,14 +19,14 @@ declare class WarpAffix extends WarpAffix_base {
      *
      * @summary Renders a clear icon button.
      * @description Shows a clickable close icon meant for reset/clear actions, typically in a suffix slot.
-    */
+     */
     clear: boolean;
     /**
      * Add this property to render a clickable Warp search icon.
      *
      * @summary Renders a search icon button.
      * @description Shows a clickable search icon, typically in a prefix slot for search fields.
-    */
+     */
     search: boolean;
     /**
      * @summary Text label shown as prefix/suffix content.

package/dist/packages/affix/affix.hydration.test.d.ts

@@ -1 +1 @@
-import './affix.js';
+import "./affix.js";

package/dist/packages/affix/affix.hydration.test.js

@@ -1,32 +1,32 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './affix.js';
-describe('w-affix React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./affix.js";
+describe("w-affix React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-affix', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-affix", {});
         expect(warnings).toEqual([]);
     });
-    test('with label hydrates without warnings', async () => {
-        const warnings = await testHydration('w-affix', {
-            label: 'kr',
+    test("with label hydrates without warnings", async () => {
+        const warnings = await testHydration("w-affix", {
+            label: "kr",
         });
         expect(warnings).toEqual([]);
     });
-    test('with search hydrates without warnings', async () => {
-        const warnings = await testHydration('w-affix', {
+    test("with search hydrates without warnings", async () => {
+        const warnings = await testHydration("w-affix", {
             search: true,
-            'aria-label': 'Search',
+            "aria-label": "Search",
         });
         expect(warnings).toEqual([]);
     });
-    test('with clear hydrates without warnings', async () => {
-        const warnings = await testHydration('w-affix', {
+    test("with clear hydrates without warnings", async () => {
+        const warnings = await testHydration("w-affix", {
             clear: true,
-            'aria-label': 'Clear',
+            "aria-label": "Clear",
         });
         expect(warnings).toEqual([]);
     });