@redvars/peacock 3.5.0 → 3.5.1

package/dist/src/card/card.d.ts

@@ -1,5 +1,6 @@
-import { LitElement, nothing, PropertyValues } from 'lit';
+import { LitElement, nothing } from 'lit';
 type CardVariant = 'elevated' | 'filled' | 'outlined';
+declare const Card_base: typeof LitElement & import("../__mixins/MixinConstructor.js").MixinConstructor<import("@/__mixins/BaseHyperlinkMixin.js").BaseHyperlinkInterface>;
 /**
  * @label Card
  * @tag wc-card
@@ -17,7 +18,7 @@ type CardVariant = 'elevated' | 'filled' | 'outlined';
  * </wc-card>
  * ```
  */
-export declare class Card extends LitElement {
+export declare class Card extends Card_base {
     #private;
     static styles: import("lit").CSSResultGroup[];
     variant: CardVariant;
@@ -27,14 +28,6 @@ export declare class Card extends LitElement {
     * If button is disabled, the reason why it is disabled.
     */
     disabledReason: string;
-    /**
-     * Hyperlink to navigate to on click.
-     */
-    href?: string;
-    /**
-     * Sets or retrieves the window or frame at which to target content.
-     */
-    target: string;
     /**
      * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
      */
@@ -45,17 +38,13 @@ export declare class Card extends LitElement {
     isPressed: boolean;
     private slotHasContent;
     readonly cardElement: HTMLElement | null;
-    readonly contentSlot: HTMLSlotElement | null;
     firstUpdated(): void;
-    updated(changedProperties: PropertyValues<this>): void;
-    __syncSlottedChildrenTabIndex(): void;
     __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void;
     __dispatchClick: (event: MouseEvent | KeyboardEvent) => void;
-    __isLink(): boolean;
     __getDisabledReasonID(): string | typeof nothing;
     __renderDisabledReason(): typeof nothing | import("lit-html").TemplateResult<1>;
     __handlePress: (event: KeyboardEvent | MouseEvent) => void;
     render(): import("lit-html").TemplateResult<1>;
-    renderCardContent(): import("lit-html").TemplateResult<1>;
+    renderCardContent(disableSlotTabbing: boolean): import("lit-html").TemplateResult<1>;
 }
 export {};

package/dist/src/fab/fab.d.ts

@@ -1,5 +1,5 @@
-import { LitElement, nothing } from 'lit';
-import { IconProvider } from '../icon/icon.js';
+import { nothing } from 'lit';
+import { BaseButton } from '@/button/BaseButton.js';
 /**
  * @label FAB
  * @tag wc-fab
@@ -18,25 +18,13 @@ import { IconProvider } from '../icon/icon.js';
  *
  * @example
  * ```html
- * <wc-fab name="add"></wc-fab>
+ * <wc-fab><wc-icon name="add"></wc-icon></wc-fab>
  * ```
  * @tags controls
  */
-export declare class Fab extends LitElement {
+export declare class Fab extends BaseButton {
     #private;
     static styles: import("lit").CSSResultGroup[];
-    /**
-     * Name of the icon to display inside the FAB.
-     */
-    name?: string;
-    /**
-     * Source URL for a custom icon.
-     */
-    src?: string;
-    /**
-     * Icon provider. Defaults to `"material-symbols"`.
-     */
-    provider: IconProvider;
     /**
      * Optional label text for the extended FAB variant.
      * When set, the FAB displays both the icon and a text label.
@@ -67,18 +55,6 @@ export declare class Fab extends LitElement {
      * If `true`, the FAB is in a lowered (resting) state with reduced elevation.
      */
     lowered: boolean;
-    /**
-     * If `true`, the user cannot interact with the FAB.
-     */
-    disabled: boolean;
-    /**
-     * Hyperlink to navigate to on click.
-     */
-    href?: string;
-    /**
-     * Sets or retrieves the window or frame at which to target content.
-     */
-    target: string;
     /**
      * Additional ARIA attributes to pass to the inner button/anchor element.
      */
@@ -94,18 +70,11 @@ export declare class Fab extends LitElement {
      */
     tooltip?: string;
     isPressed: boolean;
-    readonly fabElement: HTMLElement | null;
     focus(): void;
     blur(): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     firstUpdated(): void;
-    __handlePress: (event: KeyboardEvent | MouseEvent) => void;
-    __isLink(): boolean;
-    __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void;
     __dispatchClick: (event: MouseEvent | KeyboardEvent) => void;
     __getDisabledReasonID(): string | typeof nothing;
     render(): import("lit-html").TemplateResult<1>;
     __renderFabContent(isExtended: boolean): import("lit-html").TemplateResult<1>;
-    __renderTooltip(): typeof nothing | import("lit-html").TemplateResult<1>;
 }

package/dist/src/focus-ring/focus-ring.d.ts

@@ -14,17 +14,23 @@ export declare class FocusRing extends LitElement {
     static styles: import("lit").CSSResultGroup[];
     visible: boolean;
     for: string;
+    private __boundFocusin;
+    private __boundFocusout;
+    private __boundPointerdown;
     render(): symbol;
-    _control?: HTMLElement;
-    _focusTarget?: HTMLElement;
-    get control(): HTMLElement | null;
-    set control(control: HTMLElement | null);
-    set forElement(value: HTMLElement | null);
     connectedCallback(): void;
     disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
     __focusin(): void;
     __focusout(): void;
     __pointerdown(): void;
+    /**
+     * Resolves the element that should receive focus-ring event listeners by id.
+     * Prefers lookup from the current control's root node, then falls back to a
+     * document-level lookup.
+     *
+     * @returns The resolved focus target, if one can be found.
+     */
     __getFocusTarget(): HTMLElement | undefined;
     attach(): void;
     detach(): void;

package/dist/src/index.d.ts

@@ -17,6 +17,7 @@ export { LinearProgress } from './progress/linear-progress/index.js';
 export { CircularProgress } from './progress/circular-progress/index.js';
 export { Skeleton } from './skeleton/index.js';
 export { Input } from './input/index.js';
+export { UrlField } from './url-field/index.js';
 export { Field } from './field/index.js';
 export { NumberField } from './number-field/index.js';
 export { DatePicker } from './date-picker/index.js';
@@ -41,7 +42,7 @@ export { ChartPie } from './chart-pie/index.js';
 export { ChartBar, ChartStackedBar } from './chart-bar/index.js';
 export { Table } from './table/index.js';
 export { Pagination } from './pagination/index.js';
-export { TreeView, TreeNode } from './tree-view/index.js';
+export { SidebarMenu, SidebarMenuItem, SidebarSubMenu } from './sidebar-menu/index.js';
 export { Card } from './card/index.js';
 export { Banner } from './banner/index.js';
 export { Notification } from './notification/index.js';
@@ -54,3 +55,4 @@ export type { SelectOption } from './select/index.js';
 export { SelectOptionElement } from './select/index.js';
 export { Search } from './search/index.js';
 export { Toolbar } from './toolbar/index.js';
+export { NavigationRail, NavigationRailItem } from './navigation-rail/index.js';

package/dist/src/link/link.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const Link_base: typeof LitElement & (new (...args: any[]) => import("../__base_element/BaseHyperlink.js").BaseHyperlinkInterface);
+declare const Link_base: typeof LitElement & import("../__mixins/MixinConstructor.js").MixinConstructor<import("../__mixins/BaseHyperlinkMixin.js").BaseHyperlinkInterface>;
 /**
  * @label Link
  * @tag wc-link

package/dist/src/navigation-rail/index.d.ts

@@ -0,0 +1,2 @@
+export { NavigationRail } from './navigation-rail.js';
+export { NavigationRailItem } from './navigation-rail-item.js';

package/dist/src/navigation-rail/navigation-rail-item.d.ts

@@ -0,0 +1,55 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * @label Navigation Rail Item
+ * @tag wc-navigation-rail-item
+ * @rawTag navigation-rail-item
+ * @parentRawTag navigation-rail
+ *
+ * @summary An individual item within a navigation rail.
+ * @overview
+ * <p>Navigation rail items display a destination with an icon and optional label.</p>
+ *
+ * @example
+ * ```html
+ * <wc-navigation-rail-item>
+ *   <wc-icon slot="icon">home</wc-icon>
+ *   Home
+ * </wc-navigation-rail-item>
+ * ```
+ * @tags navigation
+ */
+export declare class NavigationRailItem extends LitElement {
+    #private;
+    static styles: import("lit").CSSResultGroup[];
+    /** Whether this item is currently active/selected. */
+    active: boolean;
+    /** Whether this item is disabled. */
+    disabled: boolean;
+    /** Whether the parent rail is in collapsed mode (labels hidden). */
+    collapsed: boolean;
+    /** If provided, the item renders as a link. */
+    href?: string;
+    /** Link target. */
+    target: string;
+    /** Value used for identification when managing active state externally. */
+    value?: string;
+    /** Reason the item is disabled (shown to screen readers). */
+    disabledReason: string;
+    /** Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds. */
+    throttleDelay: number;
+    private _isPressed;
+    private _hasLabel;
+    private _hasActiveIcon;
+    readonly itemElement: HTMLElement | null;
+    focus(): void;
+    blur(): void;
+    firstUpdated(): void;
+    __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void;
+    __dispatchClick: (event: MouseEvent | KeyboardEvent) => void;
+    __handlePress: (event: KeyboardEvent | MouseEvent) => void;
+    __isLink(): boolean;
+    __getDisabledReasonID(): string | typeof nothing;
+    __renderDisabledReason(): typeof nothing | import("lit-html").TemplateResult<1>;
+    __renderItemContent(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/navigation-rail/navigation-rail.d.ts

@@ -0,0 +1,71 @@
+import { LitElement, PropertyValues } from 'lit';
+import { NavigationRailItem } from './navigation-rail-item.js';
+/**
+ * @label Navigation Rail
+ * @tag wc-navigation-rail
+ * @rawTag navigation-rail
+ *
+ * @summary A vertical side navigation for medium-sized screens, following Material Design 3 specs.
+ * @overview
+ * <p>Navigation rail provides access to primary destinations in an app using icons—with or without labels—on a vertical rail.</p>
+ * <p>Use navigation rail on medium-sized screens (tablets) with 3–7 destinations.</p>
+ *
+ * @cssprop --nav-rail-width - Width of the rail container. Defaults to 5rem (80dp).
+ * @cssprop --nav-rail-container-color - Background color of the rail. Defaults to surface color.
+ * @cssprop --nav-rail-indicator-color - Color of the active indicator. Defaults to secondary-container.
+ * @cssprop --nav-rail-indicator-shape - Shape (border-radius) of the active indicator. Defaults to full (pill).
+ * @cssprop --nav-rail-indicator-width - Width of the active indicator. Defaults to 3.5rem (56dp).
+ * @cssprop --nav-rail-indicator-height - Height of the active indicator. Defaults to 2rem (32dp).
+ * @cssprop --nav-rail-inactive-icon-color - Color of inactive icons. Defaults to on-surface-variant.
+ * @cssprop --nav-rail-active-icon-color - Color of active icons. Defaults to on-secondary-container.
+ * @cssprop --nav-rail-inactive-label-color - Color of inactive labels. Defaults to on-surface-variant.
+ * @cssprop --nav-rail-active-label-color - Color of active labels. Defaults to on-surface.
+ *
+ * @example
+ * ```html
+ * <wc-navigation-rail>
+ *   <wc-navigation-rail-item active>
+ *     <wc-icon slot="icon">home</wc-icon>
+ *     Home
+ *   </wc-navigation-rail-item>
+ *   <wc-navigation-rail-item>
+ *     <wc-icon slot="icon">search</wc-icon>
+ *     Search
+ *   </wc-navigation-rail-item>
+ *   <wc-navigation-rail-item>
+ *     <wc-icon slot="icon">settings</wc-icon>
+ *     Settings
+ *   </wc-navigation-rail-item>
+ * </wc-navigation-rail>
+ * ```
+ * @tags navigation
+ */
+export declare class NavigationRail extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    static Item: typeof NavigationRailItem;
+    /**
+     * Vertical alignment of items within the rail.
+     * - `"top"`: Items align to the top.
+     * - `"center"`: Items are centered (default).
+     * - `"bottom"`: Items align to the bottom.
+     */
+    alignment: 'top' | 'center' | 'bottom';
+    /**
+     * Display mode of the navigation rail.
+     * - `"expanded"`: shows labels.
+     * - `"collapsed"`: hides labels.
+     */
+    mode: 'expanded' | 'collapsed';
+    /**
+     * Whether to show a divider between the header and items sections.
+     */
+    showDivider: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    private _handleItemClick;
+    private _getItems;
+    private _syncItemMode;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/sidebar-menu/index.d.ts

@@ -0,0 +1,3 @@
+export { SidebarMenuItem } from './sidebar-menu-item.js';
+export { SidebarSubMenu } from './sidebar-sub-menu.js';
+export { SidebarMenu } from './sidebar-menu.js';

package/dist/src/sidebar-menu/sidebar-menu-item.d.ts

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+/**
+ * @label Sidebar Menu Item
+ * @tag wc-sidebar-menu-item
+ * @rawTag sidebar-menu-item
+ * @parentRawTag sidebar-menu
+ * @summary A sidebar menu item represents a selectable leaf item in the sidebar navigation tree.
+ *
+ * @example
+ * ```html
+ * <wc-sidebar-menu>
+ *   <wc-sidebar-sub-menu label="Parent" expanded>
+ *     <wc-sidebar-menu-item label="Child"></wc-sidebar-menu-item>
+ *   </wc-sidebar-sub-menu>
+ * </wc-sidebar-menu>
+ * ```
+ * @tags navigation
+ */
+export declare class SidebarMenuItem extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * The value used to identify this item when selected.
+     */
+    value: string;
+    /**
+     * The display label for this item.
+     */
+    label: string;
+    /**
+     * Optional icon name to display before the label.
+     */
+    icon: string;
+    /**
+     * Optional hyperlink to navigate to on click.
+     */
+    href: string;
+    /**
+     * Sets or retrieves the window or frame at which to target content.
+     */
+    target: string;
+    /**
+     * If true, the user cannot interact with the item.
+     */
+    disabled: boolean;
+    /**
+     * Whether the item is currently selected.
+     */
+    selected: boolean;
+    /**
+     * The nesting depth level (set automatically by the parent sidebar-menu).
+     */
+    level: number;
+    private readonly _nativeElement;
+    focus(): void;
+    blur(): void;
+    private _onClick;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/sidebar-menu/sidebar-menu.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+/**
+ * @label Sidebar Menu
+ * @tag wc-sidebar-menu
+ * @rawTag sidebar-menu
+ * @summary A sidebar menu is a hierarchical structure that provides nested levels of navigation. It supports keyboard navigation, single/multi select, and expandable items.
+ *
+ * @example
+ * ```html
+ * <wc-sidebar-menu>
+ *   <wc-sidebar-sub-menu label="Parent" expanded>
+ *     <wc-sidebar-menu-item label="Child 1"></wc-sidebar-menu-item>
+ *     <wc-sidebar-menu-item label="Child 2"></wc-sidebar-menu-item>
+ *   </wc-sidebar-sub-menu>
+ * </wc-sidebar-menu>
+ * ```
+ * @tags navigation
+ */
+export declare class SidebarMenu extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * The value of the currently selected item.
+     */
+    selectedItem: string;
+    connectedCallback(): void;
+    updated(changedProps: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private _isSidebarNode;
+    private _getTopLevelItems;
+    private _getChildNodes;
+    private _getAllVisibleItems;
+    private _onItemClick;
+    private _updateSelectedState;
+    private _collectAllItems;
+    private _syncSelectedStateFromProperty;
+    private _onKeyDown;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/sidebar-menu/sidebar-sub-menu.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+/**
+ * @label Sidebar Sub Menu
+ * @tag wc-sidebar-sub-menu
+ * @rawTag sidebar-sub-menu
+ * @parentRawTag sidebar-menu
+ * @summary A sidebar sub menu groups sidebar menu items and handles expand/collapse behavior.
+ *
+ * @example
+ * ```html
+ * <wc-sidebar-sub-menu label="Parent" expanded>
+ *   <wc-sidebar-menu-item label="Child"></wc-sidebar-menu-item>
+ * </wc-sidebar-sub-menu>
+ * ```
+ * @tags navigation
+ */
+export declare class SidebarSubMenu extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    value: string;
+    label: string;
+    icon: string;
+    disabled: boolean;
+    selected: boolean;
+    expanded: boolean;
+    level: number;
+    private readonly _nativeElement;
+    focus(): void;
+    blur(): void;
+    connectedCallback(): void;
+    updated(changedProps: Map<string, unknown>): void;
+    private _getChildNodes;
+    private _updateChildLevels;
+    private _onClick;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/toolbar/toolbar.d.ts

@@ -27,10 +27,10 @@ import { LitElement } from 'lit';
  * ```html
  * <!-- Docked toolbar -->
  * <wc-toolbar>
- *   <wc-icon-button variant="text" name="home"></wc-icon-button>
- *   <wc-icon-button variant="tonal" name="search"></wc-icon-button>
- *   <wc-icon-button variant="text" name="favorite"></wc-icon-button>
- *   <wc-icon-button variant="text" name="account_circle"></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="tonal"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
  * </wc-toolbar>
  * ```
  *
@@ -38,9 +38,9 @@ import { LitElement } from 'lit';
  * ```html
  * <!-- Floating horizontal toolbar -->
  * <wc-toolbar variant="floating" orientation="horizontal">
- *   <wc-icon-button variant="tonal" name="home"></wc-icon-button>
- *   <wc-icon-button variant="text" name="search"></wc-icon-button>
- *   <wc-icon-button variant="text" name="favorite"></wc-icon-button>
+ *   <wc-icon-button variant="tonal"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
  * </wc-toolbar>
  * ```
  *
@@ -48,9 +48,9 @@ import { LitElement } from 'lit';
  * ```html
  * <!-- Floating vertical toolbar -->
  * <wc-toolbar variant="floating" orientation="vertical">
- *   <wc-icon-button variant="tonal" name="home"></wc-icon-button>
- *   <wc-icon-button variant="text" name="search"></wc-icon-button>
- *   <wc-icon-button variant="text" name="favorite"></wc-icon-button>
+ *   <wc-icon-button variant="tonal"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
  * </wc-toolbar>
  * ```
  * @tags display navigation

package/dist/src/tooltip/tooltip.d.ts

@@ -40,6 +40,9 @@ export declare class Tooltip extends LitElement {
     private _handleGlobalOpen;
     private _handleDocumentClick;
     private detachListeners;
+    _focusTarget?: HTMLElement;
+    set forElement(value: HTMLElement | null);
+    __getFocusTarget(): HTMLElement | null;
     private attachListeners;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/src/url-field/index.d.ts

@@ -0,0 +1 @@
+export { UrlField } from './url-field.js';

package/dist/src/url-field/url-field.d.ts

@@ -0,0 +1,48 @@
+import BaseInput from '../input/BaseInput.js';
+/**
+ * @label URL Field
+ * @tag wc-url-field
+ * @rawTag url-field
+ *
+ * @summary A field for entering and displaying URLs with validation.
+ * @overview
+ * <p>URL Field wraps an input with URL validation, showing a clickable link preview when not in edit mode.</p>
+ *
+ * @example
+ * ```html
+ * <wc-url-field label="Website" value="https://example.com"></wc-url-field>
+ * ```
+ * @tags form
+ */
+export declare class UrlField extends BaseInput {
+    static styles: import("lit").CSSResultGroup[];
+    value: string;
+    name: string;
+    placeholder: string;
+    label: string;
+    editing: boolean;
+    debounce: number;
+    size: 'sm' | 'md' | 'lg';
+    variant: 'filled' | 'outlined' | 'default';
+    helperText: string;
+    error: boolean;
+    errorText: string;
+    warning: boolean;
+    warningText: string;
+    private focused;
+    private isValid;
+    private inputElement?;
+    private debounceTimer?;
+    disconnectedCallback(): void;
+    focus(): void;
+    blur(): void;
+    private startEditing;
+    private closeEditing;
+    private validateUrl;
+    private handleInput;
+    private handleFocusChange;
+    private handleBlur;
+    private handleChange;
+    private renderDisplayValue;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/test/sidebar-menu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/toolbar.js

@@ -195,10 +195,10 @@ var Toolbar_1;
  * ```html
  * <!-- Docked toolbar -->
  * <wc-toolbar>
- *   <wc-icon-button variant="text" name="home"></wc-icon-button>
- *   <wc-icon-button variant="tonal" name="search"></wc-icon-button>
- *   <wc-icon-button variant="text" name="favorite"></wc-icon-button>
- *   <wc-icon-button variant="text" name="account_circle"></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="tonal"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
  * </wc-toolbar>
  * ```
  *
@@ -206,9 +206,9 @@ var Toolbar_1;
  * ```html
  * <!-- Floating horizontal toolbar -->
  * <wc-toolbar variant="floating" orientation="horizontal">
- *   <wc-icon-button variant="tonal" name="home"></wc-icon-button>
- *   <wc-icon-button variant="text" name="search"></wc-icon-button>
- *   <wc-icon-button variant="text" name="favorite"></wc-icon-button>
+ *   <wc-icon-button variant="tonal"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
  * </wc-toolbar>
  * ```
  *
@@ -216,9 +216,9 @@ var Toolbar_1;
  * ```html
  * <!-- Floating vertical toolbar -->
  * <wc-toolbar variant="floating" orientation="vertical">
- *   <wc-icon-button variant="tonal" name="home"></wc-icon-button>
- *   <wc-icon-button variant="text" name="search"></wc-icon-button>
- *   <wc-icon-button variant="text" name="favorite"></wc-icon-button>
+ *   <wc-icon-button variant="tonal"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
  * </wc-toolbar>
  * ```
  * @tags display navigation

package/dist/toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","sources":["../../src/toolbar/toolbar.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './toolbar.scss';\nimport colorStyles from './toolbar-colors.scss';\n\n/**\n * @label Toolbar\n * @tag wc-toolbar\n * @rawTag toolbar\n *\n * @summary A Material 3 toolbar / app bar for navigation and actions.\n * @overview\n * <p>The toolbar component implements the Material 3 app bar pattern. It supports a\n * docked (attached) variant for bottom-panel navigation and a floating (detached pill-shaped)\n * variant. The floating variant supports both horizontal and vertical orientations.</p>\n *\n * <p>Render toolbar actions directly as children of the component. The docked variant is\n * optimized for a horizontal action row, while the floating variant supports both horizontal\n * and vertical layouts.</p>\n *\n * @cssprop --toolbar-container-color - Background color of the toolbar.\n * @cssprop --toolbar-container-shape - Border radius of the toolbar. Relevant for the floating variant.\n * @cssprop --toolbar-height - Height of the toolbar (docked horizontal / floating horizontal).\n * @cssprop --toolbar-padding-inline - Inline padding of the toolbar.\n * @cssprop --toolbar-gap - Gap between toolbar sections.\n * @cssprop --toolbar-icon-color - Color of icon slots.\n * @cssprop --toolbar-title-color - Color of the title (default slot) text.\n * @cssprop --toolbar-shadow - Box-shadow of the toolbar.\n *\n * @example\n * ```html\n * <!-- Docked toolbar -->\n * <wc-toolbar>\n *   <wc-icon-button variant=\"text\" name=\"home\"></wc-icon-button>\n *   <wc-icon-button variant=\"tonal\" name=\"search\"></wc-icon-button>\n *   <wc-icon-button variant=\"text\" name=\"favorite\"></wc-icon-button>\n *   <wc-icon-button variant=\"text\" name=\"account_circle\"></wc-icon-button>\n * </wc-toolbar>\n * ```\n *\n * @example\n * ```html\n * <!-- Floating horizontal toolbar -->\n * <wc-toolbar variant=\"floating\" orientation=\"horizontal\">\n *   <wc-icon-button variant=\"tonal\" name=\"home\"></wc-icon-button>\n *   <wc-icon-button variant=\"text\" name=\"search\"></wc-icon-button>\n *   <wc-icon-button variant=\"text\" name=\"favorite\"></wc-icon-button>\n * </wc-toolbar>\n * ```\n *\n * @example\n * ```html\n * <!-- Floating vertical toolbar -->\n * <wc-toolbar variant=\"floating\" orientation=\"vertical\">\n *   <wc-icon-button variant=\"tonal\" name=\"home\"></wc-icon-button>\n *   <wc-icon-button variant=\"text\" name=\"search\"></wc-icon-button>\n *   <wc-icon-button variant=\"text\" name=\"favorite\"></wc-icon-button>\n * </wc-toolbar>\n * ```\n * @tags display navigation\n */\n@IndividualComponent\nexport class Toolbar extends LitElement {\n  static styles = [styles, colorStyles];\n\n  /**\n   * Visual and layout variant of the toolbar.\n   * - `\"docked\"`: A full-width bar attached to the edge of the screen (default).\n   * - `\"floating\"`: A detached pill-shaped toolbar that floats over content.\n   */\n  @property({ type: String, reflect: true })\n  variant: 'docked' | 'floating' = 'docked';\n\n  /**\n   * Orientation of the toolbar content.\n   * - `\"horizontal\"`: Items are laid out left to right (default).\n   * - `\"vertical\"`: Items are stacked top to bottom. Primarily useful for the floating variant.\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Size of the docked toolbar.\n    * - `\"small\"`: 80dp height (default).\n    * - `\"medium\"`: 96dp height.\n    * - `\"large\"`: 112dp height.\n   */\n  @property({ type: String, reflect: true })\n  size: 'small' | 'medium' | 'large' = 'small';\n\n  /**\n   * Whether the toolbar is visually elevated (adds a shadow).\n   */\n  @property({ type: Boolean, reflect: true })\n  elevated: boolean = false;\n\n  override render() {\n    const cssClasses = {\n      toolbar: true,\n      [`variant-${this.variant}`]: true,\n      [`orientation-${this.orientation}`]: true,\n      [`size-${this.size}`]: true,\n      elevated: this.elevated,\n    };\n\n    if (this.variant === 'floating') {\n      return Toolbar.__renderFloating(cssClasses);\n    }\n\n    return Toolbar.__renderDocked(cssClasses);\n  }\n\n  private static __renderDocked(cssClasses: Record<string, boolean>) {\n    return html`\n      <div class=${classMap(cssClasses)} role=\"toolbar\">\n        <div class=\"background\"></div>\n        <div class=\"toolbar-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private static __renderFloating(cssClasses: Record<string, boolean>) {\n    return html`\n      <div class=${classMap(cssClasses)} role=\"toolbar\">\n        <wc-elevation class=\"elevation\"></wc-elevation>\n        <div class=\"background\"></div>\n        <div class=\"toolbar-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","colorStyles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDG;AAEI,IAAM,OAAO,GAAA,SAAA,GAAb,MAAM,OAAQ,SAAQA,GAAU,CAAA;AAAhC,IAAA,WAAA,GAAA;;AAGL;;;;AAIG;QAEH,IAAA,CAAA,OAAO,GAA0B,QAAQ;AAEzC;;;;AAIG;QAEH,IAAA,CAAA,WAAW,GAA8B,YAAY;AAErD;;;;;AAKG;QAEH,IAAA,CAAA,IAAI,GAAiC,OAAO;AAE5C;;AAEG;QAEH,IAAA,CAAA,QAAQ,GAAY,KAAK;IAwC3B;IAtCW,MAAM,GAAA;AACb,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACjC,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAA,CAAE,GAAG,IAAI;AACzC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;YAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;AAED,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE;AAC/B,YAAA,OAAO,SAAO,CAAC,gBAAgB,CAAC,UAAU,CAAC;QAC7C;AAEA,QAAA,OAAO,SAAO,CAAC,cAAc,CAAC,UAAU,CAAC;IAC3C;IAEQ,OAAO,cAAc,CAAC,UAAmC,EAAA;AAC/D,QAAA,OAAOC,CAAI,CAAA;mBACIC,CAAQ,CAAC,UAAU,CAAC,CAAA;;;;;;KAMlC;IACH;IAEQ,OAAO,gBAAgB,CAAC,UAAmC,EAAA;AACjE,QAAA,OAAOD,CAAI,CAAA;mBACIC,CAAQ,CAAC,UAAU,CAAC,CAAA;;;;;;;KAOlC;IACH;;AAtEO,OAAA,CAAA,MAAM,GAAG,CAACC,UAAM,EAAEC,QAAW,CAAC;AAQrC,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACC,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAQ1C,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACa,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAStD,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACI,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAM7C,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAhCf,OAAO,GAAA,SAAA,GAAA,UAAA,CAAA;IADnB;AACY,CAAA,EAAA,OAAO,CAwEnB;;;;"}
+{"version":3,"file":"toolbar.js","sources":["../../src/toolbar/toolbar.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './toolbar.scss';\nimport colorStyles from './toolbar-colors.scss';\n\n/**\n * @label Toolbar\n * @tag wc-toolbar\n * @rawTag toolbar\n *\n * @summary A Material 3 toolbar / app bar for navigation and actions.\n * @overview\n * <p>The toolbar component implements the Material 3 app bar pattern. It supports a\n * docked (attached) variant for bottom-panel navigation and a floating (detached pill-shaped)\n * variant. The floating variant supports both horizontal and vertical orientations.</p>\n *\n * <p>Render toolbar actions directly as children of the component. The docked variant is\n * optimized for a horizontal action row, while the floating variant supports both horizontal\n * and vertical layouts.</p>\n *\n * @cssprop --toolbar-container-color - Background color of the toolbar.\n * @cssprop --toolbar-container-shape - Border radius of the toolbar. Relevant for the floating variant.\n * @cssprop --toolbar-height - Height of the toolbar (docked horizontal / floating horizontal).\n * @cssprop --toolbar-padding-inline - Inline padding of the toolbar.\n * @cssprop --toolbar-gap - Gap between toolbar sections.\n * @cssprop --toolbar-icon-color - Color of icon slots.\n * @cssprop --toolbar-title-color - Color of the title (default slot) text.\n * @cssprop --toolbar-shadow - Box-shadow of the toolbar.\n *\n * @example\n * ```html\n * <!-- Docked toolbar -->\n * <wc-toolbar>\n *   <wc-icon-button variant=\"text\"><wc-icon name=\"home\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"tonal\"><wc-icon name=\"search\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\"><wc-icon name=\"favorite\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\"><wc-icon name=\"account_circle\"></wc-icon></wc-icon-button>\n * </wc-toolbar>\n * ```\n *\n * @example\n * ```html\n * <!-- Floating horizontal toolbar -->\n * <wc-toolbar variant=\"floating\" orientation=\"horizontal\">\n *   <wc-icon-button variant=\"tonal\"><wc-icon name=\"home\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\"><wc-icon name=\"search\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\"><wc-icon name=\"favorite\"></wc-icon></wc-icon-button>\n * </wc-toolbar>\n * ```\n *\n * @example\n * ```html\n * <!-- Floating vertical toolbar -->\n * <wc-toolbar variant=\"floating\" orientation=\"vertical\">\n *   <wc-icon-button variant=\"tonal\"><wc-icon name=\"home\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\"><wc-icon name=\"search\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\"><wc-icon name=\"favorite\"></wc-icon></wc-icon-button>\n * </wc-toolbar>\n * ```\n * @tags display navigation\n */\n@IndividualComponent\nexport class Toolbar extends LitElement {\n  static styles = [styles, colorStyles];\n\n  /**\n   * Visual and layout variant of the toolbar.\n   * - `\"docked\"`: A full-width bar attached to the edge of the screen (default).\n   * - `\"floating\"`: A detached pill-shaped toolbar that floats over content.\n   */\n  @property({ type: String, reflect: true })\n  variant: 'docked' | 'floating' = 'docked';\n\n  /**\n   * Orientation of the toolbar content.\n   * - `\"horizontal\"`: Items are laid out left to right (default).\n   * - `\"vertical\"`: Items are stacked top to bottom. Primarily useful for the floating variant.\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Size of the docked toolbar.\n    * - `\"small\"`: 80dp height (default).\n    * - `\"medium\"`: 96dp height.\n    * - `\"large\"`: 112dp height.\n   */\n  @property({ type: String, reflect: true })\n  size: 'small' | 'medium' | 'large' = 'small';\n\n  /**\n   * Whether the toolbar is visually elevated (adds a shadow).\n   */\n  @property({ type: Boolean, reflect: true })\n  elevated: boolean = false;\n\n  override render() {\n    const cssClasses = {\n      toolbar: true,\n      [`variant-${this.variant}`]: true,\n      [`orientation-${this.orientation}`]: true,\n      [`size-${this.size}`]: true,\n      elevated: this.elevated,\n    };\n\n    if (this.variant === 'floating') {\n      return Toolbar.__renderFloating(cssClasses);\n    }\n\n    return Toolbar.__renderDocked(cssClasses);\n  }\n\n  private static __renderDocked(cssClasses: Record<string, boolean>) {\n    return html`\n      <div class=${classMap(cssClasses)} role=\"toolbar\">\n        <div class=\"background\"></div>\n        <div class=\"toolbar-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private static __renderFloating(cssClasses: Record<string, boolean>) {\n    return html`\n      <div class=${classMap(cssClasses)} role=\"toolbar\">\n        <wc-elevation class=\"elevation\"></wc-elevation>\n        <div class=\"background\"></div>\n        <div class=\"toolbar-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","colorStyles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDG;AAEI,IAAM,OAAO,GAAA,SAAA,GAAb,MAAM,OAAQ,SAAQA,GAAU,CAAA;AAAhC,IAAA,WAAA,GAAA;;AAGL;;;;AAIG;QAEH,IAAA,CAAA,OAAO,GAA0B,QAAQ;AAEzC;;;;AAIG;QAEH,IAAA,CAAA,WAAW,GAA8B,YAAY;AAErD;;;;;AAKG;QAEH,IAAA,CAAA,IAAI,GAAiC,OAAO;AAE5C;;AAEG;QAEH,IAAA,CAAA,QAAQ,GAAY,KAAK;IAwC3B;IAtCW,MAAM,GAAA;AACb,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACjC,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAA,CAAE,GAAG,IAAI;AACzC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;YAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;AAED,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE;AAC/B,YAAA,OAAO,SAAO,CAAC,gBAAgB,CAAC,UAAU,CAAC;QAC7C;AAEA,QAAA,OAAO,SAAO,CAAC,cAAc,CAAC,UAAU,CAAC;IAC3C;IAEQ,OAAO,cAAc,CAAC,UAAmC,EAAA;AAC/D,QAAA,OAAOC,CAAI,CAAA;mBACIC,CAAQ,CAAC,UAAU,CAAC,CAAA;;;;;;KAMlC;IACH;IAEQ,OAAO,gBAAgB,CAAC,UAAmC,EAAA;AACjE,QAAA,OAAOD,CAAI,CAAA;mBACIC,CAAQ,CAAC,UAAU,CAAC,CAAA;;;;;;;KAOlC;IACH;;AAtEO,OAAA,CAAA,MAAM,GAAG,CAACC,UAAM,EAAEC,QAAW,CAAC;AAQrC,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACC,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAQ1C,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACa,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAStD,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACI,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAM7C,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAhCf,OAAO,GAAA,SAAA,GAAA,UAAA,CAAA;IADnB;AACY,CAAA,EAAA,OAAO,CAwEnB;;;;"}