@redvars/peacock 3.5.1 → 3.6.1

package/dist/src/popover/popover-content.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+/**
+ * @label Popover Content
+ * @tag wc-popover-content
+ * @rawTag popover-content
+ * @summary Content container for the wc-popover component.
+ * @childComponent true
+ * @tags display
+ *
+ * @cssprop --popover-content-background - Background color of the popover content. Defaults to `var(--color-surface-container)`.
+ * @cssprop --popover-content-padding - Padding of the popover content. Defaults to `var(--spacing-200)`.
+ * @cssprop --popover-content-border-radius - Border radius of the popover content. Defaults to `var(--shape-corner-small)`.
+ * @cssprop --popover-content-min-width - Minimum width of the popover content. Defaults to `10rem`.
+ *
+ * @example
+ * ```html
+ * <wc-popover-content>
+ *   <p>Popover body text</p>
+ * </wc-popover-content>
+ * ```
+ */
+export declare class PopoverContent extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * Whether the popover content is visible.
+     */
+    open: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/popover/popover.d.ts

@@ -0,0 +1,62 @@
+import { LitElement } from 'lit';
+import type { Placement } from '@floating-ui/dom';
+/**
+ * @label Popover
+ * @tag wc-popover
+ * @rawTag popover
+ * @summary Displays additional information in a floating panel anchored to a trigger element.
+ * @overview
+ * <p>The Popover component wraps a trigger element and a <code>wc-popover-content</code> child. It uses
+ * floating-ui to compute position, keeping the panel visible inside the viewport even on scroll.</p>
+ * @tags display
+ *
+ * @fires {CustomEvent} wc-popover--open - Fired when the popover opens.
+ * @fires {CustomEvent} wc-popover--close - Fired when the popover closes.
+ *
+ * @example
+ * ```html
+ * <wc-popover trigger="click">
+ *   <wc-button>Open popover</wc-button>
+ *   <wc-popover-content>
+ *     <p>Popover body text goes here.</p>
+ *   </wc-popover-content>
+ * </wc-popover>
+ * ```
+ */
+export declare class Popover extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * Determines how the popover is triggered.
+     * Possible values are `"click"`, `"hover"`, `"manual"`.
+     */
+    trigger: 'click' | 'hover' | 'manual';
+    /**
+     * Preferred placement of the popover relative to the trigger element.
+     * Accepts any floating-ui `Placement` string such as `"bottom"`, `"top-start"`, `"right"`, etc.
+     */
+    placement: Placement;
+    /**
+     * Whether the popover is open.
+     */
+    open: boolean;
+    /**
+     * Distance in pixels between the trigger element and the popover panel.
+     */
+    offset: number;
+    private _floating;
+    private _contentEl;
+    private _triggerEl;
+    private _setupFloating;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProps: Map<string, unknown>): void;
+    /**
+     * Programmatically opens the popover.
+     */
+    show(): void;
+    /**
+     * Programmatically closes the popover.
+     */
+    hide(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/split-button/index.d.ts

@@ -0,0 +1 @@
+export { SplitButton } from './split-button.js';

package/dist/src/split-button/split-button.d.ts

@@ -0,0 +1,72 @@
+import { LitElement } from 'lit';
+/**
+ * @label Split Button
+ * @tag wc-split-button
+ * @rawTag split-button
+ *
+ * @summary A split button lets users perform a default action or choose from a set of related actions via a dropdown menu.
+ * @overview
+ * <p>A split button combines a primary action button with a dropdown arrow that opens a menu. Following M3 Material Design, the split button provides a default action alongside a set of secondary options, reducing clutter while keeping alternative actions accessible.</p>
+ *
+ * @cssprop --split-button-container-shape: Defines the border radius of the split button container shape.
+ *
+ * @cssprop --filled-split-button-container-color: Color of the filled split button container.
+ * @cssprop --filled-split-button-label-text-color: Text color of the filled split button label.
+ *
+ * @cssprop --outlined-split-button-container-color: Color of the outlined split button container.
+ * @cssprop --outlined-split-button-label-text-color: Text color of the outlined split button label.
+ *
+ * @cssprop --tonal-split-button-container-color: Color of the tonal split button container.
+ * @cssprop --tonal-split-button-label-text-color: Text color of the tonal split button label.
+ *
+ * @fires {MouseEvent} click - Dispatched when the primary action button is clicked.
+ * @fires {CustomEvent} toggle-menu - Dispatched when the dropdown menu is opened or closed.
+ *
+ * @example
+ * ```html
+ * <wc-split-button>
+ *   Save
+ *   <wc-menu-item slot="menu">Save as draft</wc-menu-item>
+ *   <wc-menu-item slot="menu">Save and publish</wc-menu-item>
+ * </wc-split-button>
+ * ```
+ * @tags controls
+ */
+export declare class SplitButton extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * Button size.
+     * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
+     */
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * The visual style of the split button.
+     *
+     * Possible variant values:
+     * `"filled"` is a filled button.
+     * `"outlined"` is an outlined button.
+     * `"tonal"` is a light color button.
+     */
+    variant: 'filled' | 'tonal' | 'outlined';
+    /**
+     * Defines the primary color of the split button.
+     */
+    color: 'primary' | 'secondary' | 'tertiary' | 'success' | 'danger' | 'warning' | 'surface' | 'on-surface';
+    /**
+     * Whether the split button is disabled.
+     */
+    disabled: boolean;
+    private _menuOpen;
+    private readonly _dropdownButton;
+    private readonly _menu;
+    private _menuId;
+    focus(): void;
+    private _onActionClick;
+    private _onDropdownClick;
+    private _onMenuOpened;
+    private _onMenuClosed;
+    private _onKeyDown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/svg/index.d.ts

@@ -0,0 +1 @@
+export { Svg } from './svg.js';

package/dist/src/svg/svg.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+/**
+ * @label SVG
+ * @tag wc-svg
+ * @rawTag svg
+ * @summary An SVG component with lazy loading and optional preview support.
+ * @overview Renders an inline SVG fetched from a URL, with lazy loading via IntersectionObserver and an optional click-to-preview lightbox.
+ *
+ * @cssprop --svg-color - Controls the fill color of the SVG.
+ * @cssprop [--svg-size=1rem] - Controls the size of the SVG. Defaults to "1rem"
+ *
+ * @example
+ * ```html
+ * <wc-svg src="/icons/my-icon.svg" image-title="My icon"></wc-svg>
+ * ```
+ */
+export declare class Svg extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** URL of the SVG asset to fetch and render inline. */
+    src: string;
+    /** Accessible title / alt text for the SVG. */
+    imageTitle: string;
+    /** Enable click-to-preview lightbox. */
+    preview: boolean;
+    private _loaded;
+    private _previewOpen;
+    private _svgContent;
+    private _fetchId;
+    private _intersectionObserver;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _setupIntersectionObserver;
+    private _fetchSvg;
+    private _handleClick;
+    private _closePreview;
+    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"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text" color="surface"><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-icon-button variant="text" color="surface"><wc-icon name="favorite"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text" color="surface"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
  * </wc-toolbar>
  * ```
  *

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

@@ -24,21 +24,9 @@ export declare class Tooltip extends LitElement {
     open: boolean;
     variant: 'plain' | 'rich';
     preview: boolean;
-    floatingEl: HTMLElement;
     private _target;
-    private _popover;
-    private static CLOSE_OTHERS_EVENT;
-    private hasTrigger;
-    private _onMouseEnter;
-    private _onMouseLeave;
-    private _onFocusIn;
-    private _onFocusOut;
-    private _onClick;
-    private show;
-    private hide;
-    private toggle;
-    private _handleGlobalOpen;
-    private _handleDocumentClick;
+    private _floating;
+    private resolveTrigger;
     private detachListeners;
     _focusTarget?: HTMLElement;
     set forElement(value: HTMLElement | null);
@@ -47,7 +35,6 @@ export declare class Tooltip extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changedProps: Map<string, any>): void;
-    private _hideTimeout?;
     render(): import("lit-html").TemplateResult<1>;
     __renderPlainTooltip(): import("lit-html").TemplateResult<1>;
     __renderRichTooltip(): import("lit-html").TemplateResult<1>;

package/dist/test/flow-designer.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"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text" color="surface"><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-icon-button variant="text" color="surface"><wc-icon name="favorite"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text" color="surface"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
  * </wc-toolbar>
  * ```
  *

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\"><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;;;;"}
+{"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\" color=\"surface\"><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\" color=\"surface\"><wc-icon name=\"favorite\"></wc-icon></wc-icon-button>\n *   <wc-icon-button variant=\"text\" color=\"surface\"><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;;;;"}