@redvars/peacock 3.4.0 → 3.5.1

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

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

package/dist/{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/sidebar-menu.test.d.ts

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

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

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

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"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="tonal"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
+ * </wc-toolbar>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Floating horizontal toolbar -->
+ * <wc-toolbar variant="floating" orientation="horizontal">
+ *   <wc-icon-button variant="tonal"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
+ * </wc-toolbar>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Floating vertical toolbar -->
+ * <wc-toolbar variant="floating" orientation="vertical">
+ *   <wc-icon-button variant="tonal"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
+ * </wc-toolbar>
+ * ```
+ * @tags display navigation
+ */
+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\"><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;;;;"}