@redvars/peacock 3.6.0 → 3.6.2

package/dist/popover.js

@@ -1,4 +1,4 @@
 import './IndividualComponent-DUINtMGK.js';
 import './property-1psGvXOq.js';
-export { P as Popover } from './popover-NC7b1lTq.js';
+export { P as Popover } from './popover-DUPmMVWS.js';
 //# sourceMappingURL=popover.js.map

package/dist/src/__controllers/floating-controller.d.ts

@@ -28,6 +28,7 @@ export declare class FloatingController implements ReactiveController {
     private toggle;
     private handleContextMenu;
     private handleFocusOut;
+    private isEventInsideElement;
     private handleOutsideClick;
     open: () => void;
     close: () => void;

package/dist/src/avatar/avatar.d.ts

@@ -6,7 +6,7 @@ import { LitElement } from 'lit';
  * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
  *
  * @cssprop --avatar-border-radius - Controls the border radius of the avatar.
- * @cssprop --avatar-background-color - Controls the color of the avatar.
+ * @cssprop --avatar-container-color - Controls the color of the avatar container.
  * @cssprop --avatar-size - Controls the size of the avatar.
  * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
  *

package/dist/src/breadcrumb/breadcrumb/breadcrumb.d.ts

@@ -25,7 +25,6 @@ export declare class Breadcrumb extends LitElement {
     static Item: typeof BreadcrumbItem;
     /**
      * Accessible label for the breadcrumb navigation landmark.
-     * @default "Breadcrumb"
      */
     label: string;
     render(): import("lit-html").TemplateResult<1>;

package/dist/src/chip/chip/chip.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { BaseButton } from '@/button/BaseButton.js';
 /**
  * @label Chip
  * @tag wc-chip
@@ -11,20 +11,23 @@ import { LitElement } from 'lit';
  * <wc-chip>Chip content</wc-chip>
  * ```
  */
-export declare class Chip extends LitElement {
+export declare class Chip extends BaseButton {
     static styles: import("lit").CSSResultGroup[];
     /** If true, the tag will have a close icon. */
     dismissible: boolean;
-    /** Tag color. */
-    color?: 'default' | 'blue' | 'green' | 'red' | 'yellow';
-    /** Tag value. */
-    value: string;
-    /** If true, the tag will be selected. */
-    selected: boolean;
-    /** Image source. */
-    imageSrc?: string;
+    /**
+     * Additional ARIA attributes to pass to the inner button/anchor element.
+     */
+    configAria?: {
+        [key: string]: any;
+    };
+    private _hasIconSlotContent;
+    private _isPressed;
+    focus(): void;
+    blur(): void;
+    firstUpdated(): void;
     private _dismissClickHandler;
     private _renderCloseButton;
-    private _renderImage;
     render(): import("lit-html").TemplateResult<1>;
+    renderChipContent(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/chip/chip-set/chip-set.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ * @label Chip Set
+ * @tag wc-chip-set
+ * @rawTag chip-set
+ * @summary A layout container for wrapping chips.
+ * @tags layout
+ *
+ * @example
+ * ```html
+ * <wc-chip-set>
+ *   <wc-chip>One</wc-chip>
+ *   <wc-chip>Two</wc-chip>
+ * </wc-chip-set>
+ * ```
+ */
+export declare class ChipSet extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/chip/chip-set/index.d.ts

@@ -0,0 +1 @@
+export { ChipSet } from './chip-set.js';

package/dist/src/code-highlighter/code-highlighter.d.ts

@@ -19,14 +19,18 @@ import { BundledLanguage } from 'shiki';
  */
 export declare class CodeHighlighter extends LitElement {
     static styles: import("lit").CSSResultGroup[];
+    private static readonly COPY_FEEDBACK_DURATION;
     language: BundledLanguage;
     lineNumbers: boolean;
     value: string;
     format?: boolean;
     hideCopy: boolean;
     private compiledCode;
+    private _copied;
     private parsedCode;
+    private _copyFeedbackTimeout;
     connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
     firstUpdated(): void;
     private decode;
     private __highlightCode;

package/dist/src/html-editor/html-editor.d.ts

@@ -4,29 +4,39 @@ import BaseInput from '../input/BaseInput.js';
  * @tag wc-html-editor
  * @rawTag html-editor
  *
- * @summary A WYSIWYG HTML editor component with a Material 3 styled toolbar.
+ * @summary A Tiptap-powered HTML editor with visual and source editing modes.
  * @overview
- * <p>The HTML Editor provides a rich-text editing experience using the browser's built-in
- * <code>contenteditable</code> API. It wraps the editable area in a Material 3 styled
- * <code>wc-field</code> and exposes a toolbar with common formatting actions.</p>
+ * <p>The HTML Editor provides a rich-text editing experience built on Tiptap.
+ * It wraps the editable area in a Material 3 styled <code>wc-field</code>,
+ * exposes common formatting actions, and includes a segmented switch between
+ * <strong>Visual</strong> and <strong>HTML</strong> source modes.</p>
  *
  * <p>Get and set the HTML content via the <code>value</code> property. The component
- * dispatches a <code>change</code> event whenever the content is modified.</p>
+ * dispatches a <code>change</code> event whenever the content is modified.
+ * Mention suggestions are supported through the <code>mentions</code> property,
+ * with optional externally managed lookup via the <code>search</code> event.</p>
  *
  * @cssprop --html-editor-min-height - Minimum height of the editable area. Defaults to 8rem.
  * @cssprop --html-editor-toolbar-background - Background color of the toolbar.
  * @cssprop --html-editor-toolbar-border-color - Border color between toolbar and editing area.
  *
  * @fires {Event} change - Fired whenever the editable content changes.
+ * @fires {CustomEvent} search - Fired in managed mention mode with { query, callback } detail.
  *
  * @example
  * ```html
- * <wc-html-editor label="Description" value="<p>Hello <strong>world</strong></p>"></wc-html-editor>
+ * <wc-html-editor
+ *   label="Description"
+ *   value="<p>Hello <strong>world</strong></p>"
+ *   .mentions="[{ label: 'Alex', value: 'alex' }]"
+ * ></wc-html-editor>
  * ```
  * @tags input editor
  */
 export declare class HtmlEditor extends BaseInput {
     static styles: import("lit").CSSResultGroup[];
+    private _editor?;
+    private _changeTimeout?;
     /** Current HTML value of the editor. */
     value: string;
     /** Label displayed above the editor. */
@@ -41,16 +51,39 @@ export declare class HtmlEditor extends BaseInput {
     error: boolean;
     /** Error message text. */
     errorText: string;
+    /** Whether toolbar controls should be displayed in visual mode. */
+    showToolbar: boolean;
+    /** Mention suggestions used by the mention extension. */
+    mentions: Array<{
+        label: string;
+        value: string;
+    }>;
+    /** Mention filtering mode. */
+    mentionsSearch: 'contains' | 'managed';
+    /** Character that triggers mention suggestions. */
+    suggestionCharacter: string;
+    /** Whether to include the suggestion character in rendered mention text. */
+    showSuggestionCharacter: boolean;
+    /** Debounce in milliseconds for dispatching `change`. */
+    debounce: number;
     private _focused;
+    private _mode;
     private _editorEl;
     protected firstUpdated(): void;
+    disconnectedCallback(): void;
     protected updated(changed: Map<string, unknown>): void;
-    private _execCmd;
-    private _handleInput;
-    private _handleFocus;
-    private _handleBlur;
-    private _insertLink;
+    private static _normalizeHtml;
+    private _destroyEditor;
+    private _initializeEditor;
+    private _focusEditorOnContainerClick;
+    private _dispatchDebouncedChange;
+    private _requestManagedMentions;
+    private _getMentionItem;
+    private _execCommand;
+    private _switchMode;
+    private _handleSourceChange;
     private _toolbarButton;
     private _renderToolbar;
+    private _renderReadonlyTag;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/index.d.ts

@@ -15,6 +15,7 @@ export { Accordion } from './accordion/index.js';
 export { Link } from './link/index.js';
 export { Tag } from './chip/tag/index.js';
 export { Chip } from './chip/chip/index.js';
+export { ChipSet } from './chip/chip-set/index.js';
 export { LinearProgress } from './progress/linear-progress/index.js';
 export { CircularProgress } from './progress/circular-progress/index.js';
 export { Skeleton } from './skeleton/index.js';
@@ -35,10 +36,12 @@ export { Tooltip } from './popover/index.js';
 export { Popover, PopoverContent } from './popover/index.js';
 export { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
 export { Menu, MenuItem, SubMenu } from './menu/index.js';
+export { List, ListItem } from './list/index.js';
 export { CodeHighlighter } from './code-highlighter/index.js';
 export { CodeEditor } from './code-editor/index.js';
 export { HtmlEditor } from './html-editor/index.js';
 export { Image } from './image/index.js';
+export { Svg } from './svg/index.js';
 export { Tab, TabGroup, TabPanel, Tabs } from './tabs/index.js';
 export { Slider } from './slider/index.js';
 export { ChartDoughnut } from './chart-doughnut/index.js';

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

@@ -0,0 +1,2 @@
+export { List } from './list.js';
+export { ListItem } from './list-item.js';

package/dist/src/list/list-item.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+declare const ListItem_base: typeof LitElement & import("../__mixins/MixinConstructor.js").MixinConstructor<import("@/__mixins/BaseHyperlinkMixin.js").BaseHyperlinkInterface> & import("../__mixins/MixinConstructor.js").MixinConstructor<import("@/__mixins/BaseButtonMixin.js").BaseButtonInterface>;
+/**
+ * @label List Item
+ * @tag wc-list-item
+ * @rawTag list-item
+ * @parentRawTag list
+ *
+ * @summary A Material 3 list item with leading, trailing and content slots.
+ *
+ * @example
+ * ```html
+ * <wc-list-item selected>
+ *   <wc-icon slot="leading" name="person"></wc-icon>
+ *   Profile
+ *   <wc-icon slot="trailing" name="chevron_right"></wc-icon>
+ * </wc-list-item>
+ * ```
+ * @tags display
+ */
+export declare class ListItem extends ListItem_base {
+    static styles: import("lit").CSSResultGroup[];
+    selected: boolean;
+    readonly itemElement: HTMLElement | null;
+    isPressed: boolean;
+    connectedCallback(): void;
+    focus(): void;
+    blur(): void;
+    __dispatchClick: (event: MouseEvent | KeyboardEvent) => void;
+    __handleKeyDown: (event: KeyboardEvent) => void;
+    __handlePress: (event: KeyboardEvent | MouseEvent) => void;
+    render(): import("lit-html").TemplateResult<1>;
+    renderContent(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist/src/list/list.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import { ListItem } from './list-item.js';
+/**
+ * @label List
+ * @tag wc-list
+ * @rawTag list
+ *
+ * @summary A Material 3 list container for one or more list items.
+ *
+ * @example
+ * ```html
+ * <wc-list>
+ *   <wc-list-item>
+ *     <wc-icon slot="leading" name="inbox"></wc-icon>
+ *     Inbox
+ *     <span slot="trailing">24</span>
+ *   </wc-list-item>
+ * </wc-list>
+ * ```
+ * @tags display
+ */
+export declare class List extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    static Item: typeof ListItem;
+    variant: 'standard' | 'vibrant';
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -63,6 +63,7 @@ export declare class Menu extends LitElement {
     private _isEventFromThisMenu;
     private _ownedItemFromEvent;
     private _setActiveItem;
+    private _dispatchItemActivate;
     private _onClick;
     private _onKeyDown;
     private _onSlotChange;

package/dist/src/modal/modal.d.ts

@@ -3,7 +3,7 @@ type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';
 /**
  * @label Modal
  * @tag wc-modal
- * @rawTag modal-wc
+ * @rawTag modal
  * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.
  *
  * @cssprop --modal-container-color - Background color of the dialog container.
@@ -15,13 +15,7 @@ type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';
  *
  * @example
  * ```html
- * <wc-modal open heading="Confirm Action">
- *   <p>Are you sure you want to continue?</p>
- *   <div slot="footer">
- *     <wc-button variant="text">Cancel</wc-button>
- *     <wc-button>Confirm</wc-button>
- *   </div>
- * </wc-modal>
+ * MODAL
  * ```
  * @tags overlay, dialog, feedback
  */

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

@@ -10,6 +10,9 @@ import { NavigationRailItem } from './navigation-rail-item.js';
  * <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>
  *
+ * @slot header - Content displayed above the rail items.
+ * @slot footer - Content pinned to the bottom of the rail.
+ *
  * @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.
@@ -43,13 +46,6 @@ import { NavigationRailItem } from './navigation-rail-item.js';
 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.

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

@@ -1,8 +1,8 @@
 import BaseInput from '../input/BaseInput.js';
 /**
  * @label Number Field
- * @tag number-field
- * @rawTag number
+ * @tag wc-number-field
+ * @rawTag number-field
  *
  * @summary The Number Field component is used to capture numeric user input.
  *

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/test/chip.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;;;;"}