@redvars/peacock 3.4.0 → 3.5.0

package/dist/src/search/search.d.ts

@@ -0,0 +1,76 @@
+import { LitElement } from 'lit';
+/**
+ * @label Search
+ * @tag wc-search
+ * @rawTag search
+ *
+ * @summary A Material 3 search bar for filtering and finding content.
+ * @overview
+ * <p>The search component provides a text input designed for search interactions.
+ * It supports outlined and filled variants, an optional clear button, and leading/trailing icon slots.</p>
+ *
+ * @cssprop --search-container-shape - Border radius of the search bar. Defaults to full (pill shape).
+ * @cssprop --search-container-color - Background color of the search container.
+ * @cssprop --search-input-text-color - Color of the input text.
+ * @cssprop --search-placeholder-color - Color of the placeholder text.
+ * @cssprop --search-icon-color - Color of the leading and trailing icons.
+ * @cssprop --search-outline-color - Border color for the outlined variant.
+ * @cssprop --search-outline-width - Border width for the outlined variant.
+ *
+ * @fires {CustomEvent} input - Dispatched when the search value changes.
+ * @fires {CustomEvent} change - Dispatched when the search input loses focus or Enter is pressed.
+ * @fires {CustomEvent} clear - Dispatched when the clear button is activated.
+ * @fires {CustomEvent} search - Dispatched when the user submits the search (presses Enter).
+ *
+ * @example
+ * ```html
+ * <wc-search placeholder="Search..."></wc-search>
+ * ```
+ * @tags form
+ */
+export declare class Search extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * Visual style variant.
+     * Possible values: `"outlined"`, `"filled"`. Defaults to `"filled"`.
+     */
+    variant: 'outlined' | 'filled';
+    /**
+     * Placeholder text shown when the input is empty.
+     */
+    placeholder: string;
+    /**
+     * Current search value.
+     */
+    value: string;
+    /**
+     * Whether the search bar is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether a clear button is shown when the input has a value.
+     */
+    clearable: boolean;
+    /**
+     * Size of the search bar.
+     * Possible values: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
+     */
+    size: 'sm' | 'md' | 'lg';
+    private focused;
+    private leadingSlotHasContent;
+    private inputElement?;
+    firstUpdated(): void;
+    /** Focuses the internal input element. */
+    focus(): void;
+    /** Blurs the internal input element. */
+    blur(): void;
+    private __handleInput;
+    private __handleChange;
+    private __handleKeydown;
+    private __handleFocus;
+    private __handleBlur;
+    private __clearValue;
+    private __renderClearButton;
+    private __renderLeadingIcon;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/select/select.d.ts

@@ -29,6 +29,7 @@ export interface SelectOption {
  */
 export declare class Select extends BaseInput {
     static styles: import("lit").CSSResultGroup[];
+    private readonly _menuId;
     /**
      * Array of options to display in the dropdown.
      * Setting this property creates matching `<wc-option>` children automatically.
@@ -56,10 +57,6 @@ export declare class Select extends BaseInput {
      * Label displayed above the field.
      */
     label: string;
-    /**
-      * Show a clear button in single-select mode when a value is selected.
-     */
-    clearable: boolean;
     /**
      * Visual variant of the field.
      */
@@ -103,13 +100,14 @@ export declare class Select extends BaseInput {
     private _openMenu;
     private _closeMenu;
     private _handleTriggerClick;
+    private _handleFieldClick;
     private _handleTriggerKeyDown;
     private _handleMenuClosed;
     private _handleMenuItemActivate;
     private _dispatchChange;
     private _handleSearchInput;
-    private _handleClear;
     private _handleChipDismiss;
+    private _renderEmptyState;
     private _renderTriggerContent;
     private _renderFieldEnd;
     render(): import("lit-html").TemplateResult<1>;

package/dist/src/slider/slider.d.ts

@@ -40,6 +40,10 @@ export declare class Slider extends LitElement {
      * Whether to show labels on the slider.
      */
     labeled: boolean;
+    /**
+     * Whether to show the current value beside the slider.
+     */
+    showValue: boolean;
     private isDragging;
     private container;
     private thumbElement;

package/dist/src/snackbar/snackbar.d.ts

@@ -10,29 +10,42 @@ import { LitElement } from 'lit';
  * @cssprop --snackbar-action-text-color - Action text color.
  * @cssprop --snackbar-close-icon-color - Close icon color.
  * @cssprop --snackbar-border-radius - Border radius of the snackbar surface.
+ * @cssprop --snackbar-offset-inline - Inline offset from viewport edges.
+ * @cssprop --snackbar-offset-bottom - Bottom offset from viewport edge.
+ * @cssprop --snackbar-z-index - Stacking order for the snackbar.
  *
  * @example
  * ```html
- * <wc-snackbar open message="Message archived" action-label="Undo"></wc-snackbar>
+ * <wc-snackbar preview message="Message archived" action-label="Undo"></wc-snackbar>
  * ```
  * @tags display, feedback
  */
 export declare class Snackbar extends LitElement {
     static styles: import("lit").CSSResultGroup[];
+    private static readonly GLOBAL_OPEN_EVENT;
+    private static readonly EXIT_ANIMATION_MS;
     open: boolean;
     message: string;
     actionLabel: string;
     showCloseIcon: boolean;
     duration: number;
     multiline: boolean;
+    preview: boolean;
+    private dismissing;
     private hideTimer;
+    private exitTimer;
+    private readonly handleGlobalSnackbarOpen;
+    connectedCallback(): void;
     show(): void;
     hide(): void;
     private close;
+    private completeDismiss;
     private dispatchActionEvent;
     private handleActionClick;
     private handleCloseClick;
     private clearTimer;
+    private clearExitTimer;
+    private handleAnimationEnd;
     private scheduleAutoHide;
     protected updated(changedProperties: Map<string, unknown>): void;
     disconnectedCallback(): void;

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

@@ -0,0 +1 @@
+export { Toolbar } from './toolbar.js';

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

@@ -0,0 +1,86 @@
+import { LitElement } from 'lit';
+/**
+ * @label Toolbar
+ * @tag wc-toolbar
+ * @rawTag toolbar
+ *
+ * @summary A Material 3 toolbar / app bar for navigation and actions.
+ * @overview
+ * <p>The toolbar component implements the Material 3 app bar pattern. It supports a
+ * docked (attached) variant for bottom-panel navigation and a floating (detached pill-shaped)
+ * variant. The floating variant supports both horizontal and vertical orientations.</p>
+ *
+ * <p>Render toolbar actions directly as children of the component. The docked variant is
+ * optimized for a horizontal action row, while the floating variant supports both horizontal
+ * and vertical layouts.</p>
+ *
+ * @cssprop --toolbar-container-color - Background color of the toolbar.
+ * @cssprop --toolbar-container-shape - Border radius of the toolbar. Relevant for the floating variant.
+ * @cssprop --toolbar-height - Height of the toolbar (docked horizontal / floating horizontal).
+ * @cssprop --toolbar-padding-inline - Inline padding of the toolbar.
+ * @cssprop --toolbar-gap - Gap between toolbar sections.
+ * @cssprop --toolbar-icon-color - Color of icon slots.
+ * @cssprop --toolbar-title-color - Color of the title (default slot) text.
+ * @cssprop --toolbar-shadow - Box-shadow of the toolbar.
+ *
+ * @example
+ * ```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-toolbar>
+ * ```
+ *
+ * @example
+ * ```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-toolbar>
+ * ```
+ *
+ * @example
+ * ```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-toolbar>
+ * ```
+ * @tags display navigation
+ */
+export declare class Toolbar extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * Visual and layout variant of the toolbar.
+     * - `"docked"`: A full-width bar attached to the edge of the screen (default).
+     * - `"floating"`: A detached pill-shaped toolbar that floats over content.
+     */
+    variant: 'docked' | 'floating';
+    /**
+     * Orientation of the toolbar content.
+     * - `"horizontal"`: Items are laid out left to right (default).
+     * - `"vertical"`: Items are stacked top to bottom. Primarily useful for the floating variant.
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Size of the docked toolbar.
+      * - `"small"`: 80dp height (default).
+      * - `"medium"`: 96dp height.
+      * - `"large"`: 112dp height.
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Whether the toolbar is visually elevated (adds a shadow).
+     */
+    elevated: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    private static __renderDocked;
+    private static __renderFloating;
+}

package/dist/{style-map-CRFEoCEg.js → style-map-DVmWOuYy.js}

@@ -1,5 +1,5 @@
 import { E } from './IndividualComponent-DUINtMGK.js';
-import { e, i as i$1, t } from './directive-Cuw6h7YA.js';
+import { e, i as i$1, t } from './directive-ZPhl09Yt.js';
 
 /**
  * @license
@@ -8,4 +8,4 @@ import { e, i as i$1, t } from './directive-Cuw6h7YA.js';
  */const n="important",i=" !"+n,o=e(class extends i$1{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"style"!==t$1.name||t$1.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes("-")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`},"")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(r)),this.render(r);for(const t of this.ft)null==r[t]&&(this.ft.delete(t),t.includes("-")?s.removeProperty(t):s[t]=null);for(const t in r){const e=r[t];if(null!=e){this.ft.add(t);const r="string"==typeof e&&e.endsWith(i);t.includes("-")||r?s.setProperty(t,r?e.slice(0,-11):e,r?n:""):s[t]=e;}}return E}});
 
 export { o };
-//# sourceMappingURL=style-map-CRFEoCEg.js.map
+//# sourceMappingURL=style-map-DVmWOuYy.js.map

package/dist/{style-map-CRFEoCEg.js.map → style-map-DVmWOuYy.js.map}

@@ -1 +1 @@
-{"version":3,"file":"style-map-CRFEoCEg.js","sources":["../node_modules/lit-html/directives/style-map.js"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as e,Directive as r,PartType as s}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const n=\"important\",i=\" !\"+n,o=e(class extends r{constructor(t){if(super(t),t.type!==s.ATTRIBUTE||\"style\"!==t.name||t.strings?.length>2)throw Error(\"The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.\")}render(t){return Object.keys(t).reduce((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes(\"-\")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,\"-$&\").toLowerCase()}:${s};`},\"\")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(r)),this.render(r);for(const t of this.ft)null==r[t]&&(this.ft.delete(t),t.includes(\"-\")?s.removeProperty(t):s[t]=null);for(const t in r){const e=r[t];if(null!=e){this.ft.add(t);const r=\"string\"==typeof e&&e.endsWith(i);t.includes(\"-\")||r?s.setProperty(t,r?e.slice(0,-11):e,r?n:\"\"):s[t]=e}}return t}});export{o as styleMap};\n//# sourceMappingURL=style-map.js.map\n"],"names":["r","t","s"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAQ,MAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAcA,GAAC,CAAC,WAAW,CAACC,GAAC,CAAC,CAAC,GAAG,KAAK,CAACA,GAAC,CAAC,CAACA,GAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,SAAS,EAAE,OAAO,GAAGD,GAAC,CAAC,IAAI,EAAEA,GAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,4GAA4G,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,mCAAmC,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC,OAAOA,CAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"style-map-DVmWOuYy.js","sources":["../node_modules/lit-html/directives/style-map.js"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as e,Directive as r,PartType as s}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const n=\"important\",i=\" !\"+n,o=e(class extends r{constructor(t){if(super(t),t.type!==s.ATTRIBUTE||\"style\"!==t.name||t.strings?.length>2)throw Error(\"The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.\")}render(t){return Object.keys(t).reduce((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes(\"-\")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,\"-$&\").toLowerCase()}:${s};`},\"\")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(r)),this.render(r);for(const t of this.ft)null==r[t]&&(this.ft.delete(t),t.includes(\"-\")?s.removeProperty(t):s[t]=null);for(const t in r){const e=r[t];if(null!=e){this.ft.add(t);const r=\"string\"==typeof e&&e.endsWith(i);t.includes(\"-\")||r?s.setProperty(t,r?e.slice(0,-11):e,r?n:\"\"):s[t]=e}}return t}});export{o as styleMap};\n//# sourceMappingURL=style-map.js.map\n"],"names":["r","t","s"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAQ,MAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAcA,GAAC,CAAC,WAAW,CAACC,GAAC,CAAC,CAAC,GAAG,KAAK,CAACA,GAAC,CAAC,CAACA,GAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,SAAS,EAAE,OAAO,GAAGD,GAAC,CAAC,IAAI,EAAEA,GAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,4GAA4G,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,mCAAmC,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC,OAAOA,CAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/dist/test/banner.test.d.ts

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

package/dist/test/search.test.d.ts

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

package/dist/test/toolbar.test.d.ts

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

package/dist/throttle-C7ZAPqtu.js

@@ -0,0 +1,24 @@
+function throttle(func, delay, options = { leading: true, trailing: true }) {
+    let timerId;
+    let lastExec = 0;
+    return function (...args) {
+        // @ts-ignore
+        const context = this;
+        const now = Date.now();
+        const shouldCallNow = options.leading && now - lastExec >= delay;
+        if (shouldCallNow) {
+            func.apply(context, args);
+            lastExec = now;
+        }
+        else if (options.trailing && !timerId) {
+            timerId = setTimeout(() => {
+                func.apply(context, args);
+                lastExec = Date.now();
+                timerId = null;
+            }, delay);
+        }
+    };
+}
+
+export { throttle as t };
+//# sourceMappingURL=throttle-C7ZAPqtu.js.map

package/dist/throttle-C7ZAPqtu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"throttle-C7ZAPqtu.js","sources":["../../src/__utils/throttle.ts"],"sourcesContent":["export function throttle(\n  func: Function,\n  delay: number,\n  options = { leading: true, trailing: true },\n) {\n  let timerId: any;\n  let lastExec = 0;\n\n  return function (...args: any[]) {\n    // @ts-ignore\n    const context = this;\n    const now = Date.now();\n\n    const shouldCallNow = options.leading && now - lastExec >= delay;\n\n    if (shouldCallNow) {\n      func.apply(context, args);\n      lastExec = now;\n    } else if (options.trailing && !timerId) {\n      timerId = setTimeout(() => {\n        func.apply(context, args);\n        lastExec = Date.now();\n        timerId = null;\n      }, delay);\n    }\n  };\n}"],"names":[],"mappings":"SAAgB,QAAQ,CACtB,IAAc,EACd,KAAa,EACb,OAAO,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAA;AAE3C,IAAA,IAAI,OAAY;IAChB,IAAI,QAAQ,GAAG,CAAC;IAEhB,OAAO,UAAU,GAAG,IAAW,EAAA;;QAE7B,MAAM,OAAO,GAAG,IAAI;AACpB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE;QAEtB,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,IAAI,GAAG,GAAG,QAAQ,IAAI,KAAK;QAEhE,IAAI,aAAa,EAAE;AACjB,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC;YACzB,QAAQ,GAAG,GAAG;QAChB;AAAO,aAAA,IAAI,OAAO,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE;AACvC,YAAA,OAAO,GAAG,UAAU,CAAC,MAAK;AACxB,gBAAA,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC;AACzB,gBAAA,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE;gBACrB,OAAO,GAAG,IAAI;YAChB,CAAC,EAAE,KAAK,CAAC;QACX;AACF,IAAA,CAAC;AACH;;;;"}

package/dist/toolbar.js

@@ -0,0 +1,306 @@
+import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, b } from './IndividualComponent-DUINtMGK.js';
+import { n } from './property-1psGvXOq.js';
+import { e } from './class-map-YU7g0o3B.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z$1 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+  --toolbar-container-shape: var(--shape-corner-full);
+  --toolbar-docked-container-shape: var(--shape-corner-extra-large) var(--shape-corner-extra-large) var(--shape-corner-none) var(--shape-corner-none);
+  --toolbar-height: 5rem; /* 80dp - small/default docked */
+  --toolbar-padding-inline: 0.75rem;
+  --toolbar-gap: 0.5rem;
+  --toolbar-shadow: none;
+}
+
+/* ---- Shared toolbar base ---- */
+.toolbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--toolbar-gap);
+  padding-inline: var(--toolbar-padding-inline);
+  min-height: var(--toolbar-height);
+  width: 100%;
+  box-sizing: border-box;
+  color: var(--_toolbar-title-color);
+  --icon-color: var(--_toolbar-icon-color);
+  box-shadow: var(--toolbar-shadow);
+}
+
+.toolbar-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--_toolbar-container-color);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ---- Docked variant ---- */
+.toolbar.variant-docked {
+  width: 100%;
+  padding-inline: var(--toolbar-padding-inline);
+  padding-block-start: 0.5rem;
+  padding-block-end: calc(0.5rem + env(safe-area-inset-bottom, 0px));
+}
+.toolbar.variant-docked .background {
+  border-radius: var(--toolbar-docked-container-shape);
+}
+.toolbar.variant-docked .toolbar-content {
+  width: 100%;
+  justify-content: space-between;
+  gap: var(--toolbar-gap);
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+.toolbar.variant-docked .toolbar-content::-webkit-scrollbar {
+  display: none;
+}
+.toolbar.variant-docked ::slotted(*) {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+}
+.toolbar.variant-docked ::slotted(wc-icon-button) {
+  --button-container-shape: var(--shape-corner-full);
+  --button-container-shape-variant: round;
+}
+.toolbar.variant-docked {
+  /* Size variants */
+}
+.toolbar.variant-docked.size-small {
+  --toolbar-height: 5rem;
+}
+.toolbar.variant-docked.size-medium {
+  --toolbar-height: 6rem;
+}
+.toolbar.variant-docked.size-large {
+  --toolbar-height: 7rem;
+}
+.toolbar.variant-docked.elevated {
+  --toolbar-shadow: var(--elevation-shadow-level-3, 0 4px 8px rgba(0, 0, 0, 0.15));
+}
+
+/* ---- Floating variant ---- */
+.toolbar.variant-floating {
+  --toolbar-container-shape: var(--shape-corner-full);
+  border-radius: var(--toolbar-container-shape);
+  width: auto;
+  display: inline-flex;
+  padding: 0.75rem;
+  gap: 0.5rem;
+}
+.toolbar.variant-floating .elevation {
+  --elevation-level: 3;
+  --elevation-container-shape: var(--toolbar-container-shape);
+  --elevation-container-shape-variant: round;
+}
+.toolbar.variant-floating .background {
+  border-radius: var(--toolbar-container-shape);
+}
+.toolbar.variant-floating .toolbar-content {
+  width: auto;
+  gap: 0.5rem;
+}
+.toolbar.variant-floating ::slotted(*) {
+  position: relative;
+  z-index: 1;
+}
+.toolbar.variant-floating ::slotted(wc-icon-button) {
+  --button-container-shape: var(--shape-corner-full);
+  --button-container-shape-variant: round;
+}
+.toolbar.variant-floating.orientation-horizontal {
+  min-height: auto;
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
+}
+.toolbar.variant-floating.orientation-horizontal .toolbar-content {
+  flex-direction: row;
+  align-items: center;
+}
+.toolbar.variant-floating.orientation-vertical {
+  min-height: auto;
+  width: auto;
+  padding-block: 0.75rem;
+  padding-inline: 0.5rem;
+}
+.toolbar.variant-floating.orientation-vertical .toolbar-content {
+  flex-direction: column;
+  align-items: center;
+}
+.toolbar.variant-floating.elevated .elevation {
+  --elevation-level: 4;
+}`;
+
+var css_248z = i`:host {
+  /* Docked toolbar */
+  --toolbar-container-color: var(--color-surface-container);
+  --toolbar-title-color: var(--color-on-surface);
+  --toolbar-icon-color: var(--color-on-surface-variant);
+  /* Internal aliases used by styles */
+  --_toolbar-container-color: var(--toolbar-container-color);
+  --_toolbar-title-color: var(--toolbar-title-color);
+  --_toolbar-icon-color: var(--toolbar-icon-color);
+}
+
+/* Floating variant uses surface-container-high for a visible pill */
+:host([variant=floating]) {
+  --toolbar-container-color: var(--color-surface-container-high);
+}`;
+
+var Toolbar_1;
+/**
+ * @label Toolbar
+ * @tag wc-toolbar
+ * @rawTag toolbar
+ *
+ * @summary A Material 3 toolbar / app bar for navigation and actions.
+ * @overview
+ * <p>The toolbar component implements the Material 3 app bar pattern. It supports a
+ * docked (attached) variant for bottom-panel navigation and a floating (detached pill-shaped)
+ * variant. The floating variant supports both horizontal and vertical orientations.</p>
+ *
+ * <p>Render toolbar actions directly as children of the component. The docked variant is
+ * optimized for a horizontal action row, while the floating variant supports both horizontal
+ * and vertical layouts.</p>
+ *
+ * @cssprop --toolbar-container-color - Background color of the toolbar.
+ * @cssprop --toolbar-container-shape - Border radius of the toolbar. Relevant for the floating variant.
+ * @cssprop --toolbar-height - Height of the toolbar (docked horizontal / floating horizontal).
+ * @cssprop --toolbar-padding-inline - Inline padding of the toolbar.
+ * @cssprop --toolbar-gap - Gap between toolbar sections.
+ * @cssprop --toolbar-icon-color - Color of icon slots.
+ * @cssprop --toolbar-title-color - Color of the title (default slot) text.
+ * @cssprop --toolbar-shadow - Box-shadow of the toolbar.
+ *
+ * @example
+ * ```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-toolbar>
+ * ```
+ *
+ * @example
+ * ```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-toolbar>
+ * ```
+ *
+ * @example
+ * ```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-toolbar>
+ * ```
+ * @tags display navigation
+ */
+let Toolbar = Toolbar_1 = class Toolbar extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Visual and layout variant of the toolbar.
+         * - `"docked"`: A full-width bar attached to the edge of the screen (default).
+         * - `"floating"`: A detached pill-shaped toolbar that floats over content.
+         */
+        this.variant = 'docked';
+        /**
+         * Orientation of the toolbar content.
+         * - `"horizontal"`: Items are laid out left to right (default).
+         * - `"vertical"`: Items are stacked top to bottom. Primarily useful for the floating variant.
+         */
+        this.orientation = 'horizontal';
+        /**
+         * Size of the docked toolbar.
+          * - `"small"`: 80dp height (default).
+          * - `"medium"`: 96dp height.
+          * - `"large"`: 112dp height.
+         */
+        this.size = 'small';
+        /**
+         * Whether the toolbar is visually elevated (adds a shadow).
+         */
+        this.elevated = false;
+    }
+    render() {
+        const cssClasses = {
+            toolbar: true,
+            [`variant-${this.variant}`]: true,
+            [`orientation-${this.orientation}`]: true,
+            [`size-${this.size}`]: true,
+            elevated: this.elevated,
+        };
+        if (this.variant === 'floating') {
+            return Toolbar_1.__renderFloating(cssClasses);
+        }
+        return Toolbar_1.__renderDocked(cssClasses);
+    }
+    static __renderDocked(cssClasses) {
+        return b `
+      <div class=${e(cssClasses)} role="toolbar">
+        <div class="background"></div>
+        <div class="toolbar-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+    static __renderFloating(cssClasses) {
+        return b `
+      <div class=${e(cssClasses)} role="toolbar">
+        <wc-elevation class="elevation"></wc-elevation>
+        <div class="background"></div>
+        <div class="toolbar-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+Toolbar.styles = [css_248z$1, css_248z];
+__decorate([
+    n({ type: String, reflect: true })
+], Toolbar.prototype, "variant", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], Toolbar.prototype, "orientation", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], Toolbar.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Toolbar.prototype, "elevated", void 0);
+Toolbar = Toolbar_1 = __decorate([
+    IndividualComponent
+], Toolbar);
+
+export { Toolbar };
+//# sourceMappingURL=toolbar.js.map

package/dist/toolbar.js.map

@@ -0,0 +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;;;;"}