@francofantomius/material-components 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -5,6 +5,35 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.0] - 2026-09-13
+
+### Added
+- **Search Bar (`md-search-bar`, `md-search`) Enhancements**:
+  - Added `search-icon-position` property (`'leading'` | `'trailing'` | `'left'` | `'right'`), enabling placement of the search icon on the right/trailing edge of the search bar.
+  - Added support for leading navigation action buttons (e.g. hamburger drawer menu trigger via `leading-icon="menu"` or custom slotted elements via `slot="leading"` / `slot="leading-icon"`).
+  - Added `leading-icon-click` and `trailing-icon-click` custom events dispatched when respective action buttons are pressed.
+  - Added interactive ripples (`md-ripple`) and focus indicators (`md-focus-ring`) to leading, trailing, and clear icon buttons.
+  - Added smart slot change detection (`@slotchange`) to suppress divider lines and suggestions container when the search bar is active with no suggestions or slotted extra content.
+  - Improved collapsed mobile search bar trigger behavior, properly routing interactions between custom leading actions and trailing search triggers.
+- **Component Documentation & Live Examples (`docs/components/`)**:
+  - Added interactive demonstrations and copyable code snippets for right-aligned search icons and navigation menu triggers in `docs/components/search-bar.md`.
+  - Re-implemented interactive live previews and usage examples across all component documentation pages.
+- **AI Developer Documentation (`llms.txt`)**:
+  - Documented `search-icon-position`, `leading-icon-click`, and `trailing-icon-click` in the Search Bar API reference table.
+  - Added usage examples illustrating right-aligned search icons and hamburger menu triggers.
+- **Development Tooling**:
+  - Added `build:example` script in `package.json` for standalone IIFE bundling with `esbuild`.
+- **Testing**:
+  - Added unit test suites in `tests/search-bar.test.ts` covering right-aligned search icon configuration, hamburger menu leading button interactions, slotted leading elements, and empty active states.
+
+### Changed
+- **Dependencies & Build Infrastructure**:
+  - Upgraded development dependencies across `package.json` and `package-lock.json`.
+  - Tuned Vite build and Vitest testing configurations.
+  - Updated documentation deployment workflow (`.github/workflows/deploy-docs.yml`).
+
+---
+
 ## [1.2.0] - 2026-09-09
 
 ### Added

package/README.md

@@ -2,7 +2,7 @@
 
 <p align="left">
   <a href="https://www.npmjs.com/package/@francofantomius/material-components"><img src="https://img.shields.io/npm/v/@francofantomius/material-components?color=6750A4&label=npm&logo=npm" alt="npm version" /></a>
-  <a href="https://github.com/FrancoFantomius/material-components/releases/tag/v1.2.0"><img src="https://img.shields.io/badge/version-1.2.0-6750A4" alt="version 1.2.0" /></a>
+  <a href="https://github.com/FrancoFantomius/material-components/releases/tag/v1.3.0"><img src="https://img.shields.io/badge/version-1.3.0-6750A4" alt="version 1.3.0" /></a>
   <a href="https://lit.dev/"><img src="https://img.shields.io/badge/Lit-3.x-324FFF?logo=lit&logoColor=white" alt="Lit 3" /></a>
   <a href="https://vite.dev/"><img src="https://img.shields.io/badge/Vite-8.x-646CFF?logo=vite&logoColor=white" alt="Vite 8" /></a>
   <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-3178C6?logo=typescript&logoColor=white" alt="TypeScript" /></a>
@@ -97,7 +97,7 @@ For quick prototyping or usage directly in HTML without a bundler, import from a
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" />
 
     <!-- Import from CDN (esm.sh / jsdelivr / unpkg) -->
-    <script type="module" src="https://esm.sh/@francofantomius/material-components@1.2.0"></script>
+    <script type="module" src="https://esm.sh/@francofantomius/material-components@1.3.0"></script>
   </head>
   <body>
     <md-button variant="filled" icon="send">Get Started</md-button>

package/custom-elements.json

@@ -24527,6 +24527,16 @@
               "default": "[]",
               "attribute": "suggestions"
             },
+            {
+              "kind": "field",
+              "name": "searchIconPosition",
+              "type": {
+                "text": "SearchIconPosition"
+              },
+              "default": "'leading'",
+              "attribute": "search-icon-position",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "leadingIcon",
@@ -24620,6 +24630,15 @@
               "privacy": "private",
               "default": "-1"
             },
+            {
+              "kind": "field",
+              "name": "hasLeadingSlotContent",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "inputElement",
@@ -24628,6 +24647,57 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "effectiveSearchIconPosition",
+              "type": {
+                "text": "'leading' | 'trailing'"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "effectiveLeadingIcon",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "effectiveTrailingIcon",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "hasCustomContent",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "hasContent",
+              "type": {
+                "text": "boolean"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "handleLeadingSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleContentSlotChange",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "formResetCallback",
@@ -24706,6 +24776,16 @@
               "name": "handleTriggerKeyDown",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "handleLeadingClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleTrailingClick",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "handleTrailingTriggerClick",
@@ -25146,6 +25226,14 @@
               "default": "[]",
               "fieldName": "suggestions"
             },
+            {
+              "name": "search-icon-position",
+              "type": {
+                "text": "SearchIconPosition"
+              },
+              "default": "'leading'",
+              "fieldName": "searchIconPosition"
+            },
             {
               "name": "leading-icon",
               "type": {
@@ -25345,6 +25433,18 @@
                 "module": "src/components/search-bar/search-bar.ts"
               }
             },
+            {
+              "name": "search-icon-position",
+              "type": {
+                "text": "SearchIconPosition"
+              },
+              "default": "'leading'",
+              "fieldName": "searchIconPosition",
+              "inheritedFrom": {
+                "name": "MdSearchBar",
+                "module": "src/components/search-bar/search-bar.ts"
+              }
+            },
             {
               "name": "leading-icon",
               "type": {
@@ -25572,6 +25672,20 @@
                 "module": "src/components/search-bar/search-bar.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "searchIconPosition",
+              "type": {
+                "text": "SearchIconPosition"
+              },
+              "default": "'leading'",
+              "attribute": "search-icon-position",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "MdSearchBar",
+                "module": "src/components/search-bar/search-bar.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "leadingIcon",
@@ -25705,6 +25819,19 @@
                 "module": "src/components/search-bar/search-bar.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "hasLeadingSlotContent",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "MdSearchBar",
+                "module": "src/components/search-bar/search-bar.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "inputElement",
@@ -25717,6 +25844,85 @@
                 "module": "src/components/search-bar/search-bar.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "effectiveSearchIconPosition",
+              "type": {
+                "text": "'leading' | 'trailing'"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "MdSearchBar",
+                "module": "src/components/search-bar/search-bar.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "effectiveLeadingIcon",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "MdSearchBar",
+                "module": "src/components/search-bar/search-bar.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "effectiveTrailingIcon",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "MdSearchBar",
+                "module": "src/components/search-bar/search-bar.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasCustomContent",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "MdSearchBar",
+                "module": "src/components/search-bar/search-bar.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasContent",
+              "type": {
+                "text": "boolean"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "MdSearchBar",
+                "module": "src/components/search-bar/search-bar.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleLeadingSlotChange",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "MdSearchBar",
+                "module": "src/components/search-bar/search-bar.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleContentSlotChange",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "MdSearchBar",
+                "module": "src/components/search-bar/search-bar.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "formResetCallback",
@@ -25847,6 +26053,24 @@
                 "module": "src/components/search-bar/search-bar.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "handleLeadingClick",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "MdSearchBar",
+                "module": "src/components/search-bar/search-bar.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleTrailingClick",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "MdSearchBar",
+                "module": "src/components/search-bar/search-bar.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "handleTrailingTriggerClick",

package/dist/chunks/{search-bar-B6xxVT7u.js → search-bar-B4lAXza_.js}

@@ -1,5 +1,7 @@
 import { t as e } from "./decorate-DknOJ8FJ.js";
 import { t } from "./form-associated-Do5uXckv.js";
+import "./ripple-CBOKeVfm.js";
+import "./focus-ring-K6SY_mIm.js";
 import "./icon-FvKeXi61.js";
 import { css as n, html as r, nothing as i } from "lit";
 import { customElement as a, property as o, query as s, state as c } from "lit/decorators.js";
@@ -105,6 +107,20 @@ var l = n`
     flex-shrink: 0;
   }
 
+  .leading-slot.empty,
+  :host([has-no-leading]) .leading-slot {
+    display: none;
+  }
+
+  :host([has-no-leading]) input {
+    padding-left: 8px;
+  }
+
+  .leading-slot ::slotted(md-icon-button),
+  .trailing-slot ::slotted(md-icon-button) {
+    --md-icon-button-size: var(--_btn-size);
+  }
+
   .icon-btn {
     display: inline-flex;
     align-items: center;
@@ -119,6 +135,9 @@ var l = n`
     padding: 0;
     outline: none;
     position: relative;
+    overflow: hidden;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
     transition: background-color 150ms ease;
   }
 
@@ -183,11 +202,15 @@ var l = n`
   /* Active Docked Mode */
   :host([active]) .search-container {
     z-index: 50;
-    border-radius: var(--_shape-active);
+    border-radius: var(--_shape);
     box-shadow: var(--_elevation-active);
   }
 
-  /* Divider when active */
+  :host([active][has-suggestions]) .search-container {
+    border-radius: var(--_shape-active);
+  }
+
+  /* Divider when active and has suggestions */
   .divider {
     display: none;
     height: 1px;
@@ -195,7 +218,7 @@ var l = n`
     margin: 0 16px;
   }
 
-  :host([active]) .divider {
+  :host([active][has-suggestions]) .divider {
     display: block;
   }
 
@@ -209,7 +232,7 @@ var l = n`
     box-sizing: border-box;
   }
 
-  :host([active]) .suggestions-container {
+  :host([active][has-suggestions]) .suggestions-container {
     display: flex;
   }
 
@@ -348,6 +371,8 @@ var l = n`
       margin: 0;
       outline: none;
       position: relative;
+      overflow: hidden;
+      user-select: none;
       transition: background-color 150ms ease, color 150ms ease;
       -webkit-tap-highlight-color: transparent;
     }
@@ -483,7 +508,13 @@ var l = n`
   }
 `, u = class extends t {
 	constructor(...e) {
-		super(...e), this.size = "medium", this.compact = !1, this.value = "", this.placeholder = "Search", this.active = !1, this.suggestions = [], this.leadingIcon = "search", this.activeLeadingIcon = "arrow_back", this.trailingIcon = "", this.showBackButton = !0, this.showClearButton = !0, this.responsive = !0, this.collapseOnMobile = !0, this.fullscreen = !1, this.autoDeactivateOnSelect = !0, this.highlightedIndex = -1, this.handleFocus = () => {
+		super(...e), this.size = "medium", this.compact = !1, this.value = "", this.placeholder = "Search", this.active = !1, this.suggestions = [], this.searchIconPosition = "leading", this.leadingIcon = "search", this.activeLeadingIcon = "arrow_back", this.trailingIcon = "", this.showBackButton = !0, this.showClearButton = !0, this.responsive = !0, this.collapseOnMobile = !0, this.fullscreen = !1, this.autoDeactivateOnSelect = !0, this.highlightedIndex = -1, this.hasLeadingSlotContent = !1, this.hasCustomContent = !1, this.handleLeadingSlotChange = (e) => {
+			let t = e.target.assignedElements({ flatten: !0 });
+			this.hasLeadingSlotContent = t.length > 0, this.requestUpdate();
+		}, this.handleContentSlotChange = (e) => {
+			let t = e.target.assignedElements({ flatten: !0 });
+			this.hasCustomContent = t.length > 0, this.requestUpdate();
+		}, this.handleFocus = () => {
 			this.active || (this.active = !0, this.emitEvent("active-change", { active: !0 }));
 		}, this.handleInput = (e) => {
 			let t = e.target;
@@ -518,8 +549,18 @@ var l = n`
 			e.stopPropagation(), this.show();
 		}, this.handleTriggerKeyDown = (e) => {
 			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.show());
+		}, this.handleLeadingClick = (e) => {
+			e.stopPropagation();
+			let t = this.effectiveLeadingIcon;
+			this.emitEvent("leading-icon-click", { icon: t }) && t === "search" && this.show();
+		}, this.handleTrailingClick = (e) => {
+			e.stopPropagation();
+			let t = this.effectiveTrailingIcon;
+			this.emitEvent("trailing-icon-click", { icon: t }) && (t === "search" || this.effectiveSearchIconPosition === "trailing") && (this.active || this.show(), this.emitEvent("search", { value: this.value }));
 		}, this.handleTrailingTriggerClick = (e) => {
-			e.stopPropagation(), this.emitEvent("trailing-icon-click", { icon: this.trailingIcon }) && this.show();
+			e.stopPropagation();
+			let t = this.effectiveTrailingIcon;
+			this.emitEvent("trailing-icon-click", { icon: t }) && (this.show(), (t === "search" || this.effectiveSearchIconPosition === "trailing") && this.emitEvent("search", { value: this.value }));
 		}, this.handleBackClick = (e) => {
 			e.stopPropagation(), this.close();
 		}, this.handleScrimClick = () => {
@@ -531,11 +572,23 @@ var l = n`
 	static {
 		this.styles = [t.styles, l];
 	}
+	get effectiveSearchIconPosition() {
+		return this.searchIconPosition === "trailing" || this.searchIconPosition === "right" || this.trailingIcon === "search" ? "trailing" : "leading";
+	}
+	get effectiveLeadingIcon() {
+		return this.effectiveSearchIconPosition === "trailing" ? this.leadingIcon && this.leadingIcon !== "search" ? this.leadingIcon : "" : this.leadingIcon || "search";
+	}
+	get effectiveTrailingIcon() {
+		return this.effectiveSearchIconPosition === "trailing" ? this.trailingIcon || "search" : this.trailingIcon;
+	}
+	get hasContent() {
+		return !!(this.suggestions && this.suggestions.length > 0 || this.hasCustomContent);
+	}
 	connectedCallback() {
-		super.connectedCallback(), this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value), this.toggleAttribute("active", this.active), this.toggleAttribute("collapse-on-mobile", this.collapseOnMobile);
+		super.connectedCallback(), this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value), this.toggleAttribute("active", this.active), this.toggleAttribute("collapse-on-mobile", this.collapseOnMobile), this.toggleAttribute("has-suggestions", this.hasContent), this.toggleAttribute("has-no-leading", !this.effectiveLeadingIcon && (!this.active || !this.showBackButton || !this.hasContent) && !this.hasLeadingSlotContent);
 	}
 	willUpdate(e) {
-		super.willUpdate(e), e.has("value") && (this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value)), e.has("active") && (this.toggleAttribute("active", this.active), this.active || (this.highlightedIndex = -1)), e.has("collapseOnMobile") && this.toggleAttribute("collapse-on-mobile", this.collapseOnMobile);
+		super.willUpdate(e), e.has("value") && (this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value)), e.has("active") && (this.toggleAttribute("active", this.active), this.active || (this.highlightedIndex = -1)), e.has("collapseOnMobile") && this.toggleAttribute("collapse-on-mobile", this.collapseOnMobile), this.toggleAttribute("has-suggestions", this.hasContent), this.toggleAttribute("has-no-leading", !this.effectiveLeadingIcon && (!this.active || !this.showBackButton || !this.hasContent) && !this.hasLeadingSlotContent);
 	}
 	formResetCallback() {
 		this.value = "", this.setFormValue(null), this.toggleAttribute("has-value", !1), this.highlightedIndex = -1;
@@ -596,10 +649,12 @@ var l = n`
     `;
 	}
 	render() {
-		let e = this.active && this.showBackButton, t = !!this.trailingIcon;
+		let e = this.fullscreen || this.responsive && typeof window < "u" && window.matchMedia?.("(max-width: 768px)").matches, t = this.active && this.showBackButton && (this.hasContent || e), n = this.effectiveSearchIconPosition, a = this.effectiveLeadingIcon, o = this.effectiveTrailingIcon, s = "search", c = "", l = !1;
+		n === "trailing" ? a ? (s = a, c = o || "search", l = !0) : (s = o || "search", l = !1) : (s = a || "search", o && (c = o, l = !0));
+		let u = t || !!a || this.hasLeadingSlotContent;
 		return r`
       <div
-        class="search-trigger-container ${t ? "has-trailing" : ""}"
+        class="search-trigger-container ${l ? "has-trailing" : ""}"
         role="button"
         tabindex="0"
         aria-label=${this.placeholder || "Search"}
@@ -611,25 +666,31 @@ var l = n`
         <button
           class="trigger-btn"
           type="button"
-          aria-label=${this.placeholder || "Search"}
-          title=${this.placeholder || "Search"}
+          aria-label=${s === "menu" ? "Menu" : this.placeholder || "Search"}
+          title=${s === "menu" ? "Menu" : this.placeholder || "Search"}
           ?disabled=${this.disabled}
-          @click=${this.handleTriggerClick}
+          @click=${(e) => {
+			a && a !== "search" ? this.handleLeadingClick(e) : this.handleTriggerClick(e);
+		}}
         >
-          <md-icon name=${this.leadingIcon || "search"}></md-icon>
+          <md-ripple ?disabled=${this.disabled}></md-ripple>
+          <md-focus-ring></md-focus-ring>
+          <md-icon name=${s}></md-icon>
         </button>
 
-        ${t ? r`
+        ${l ? r`
               <div class="trigger-divider" aria-hidden="true"></div>
               <button
                 class="trigger-btn trigger-trailing-btn"
                 type="button"
-                aria-label=${this.trailingIcon}
-                title=${this.trailingIcon}
+                aria-label=${c === "search" ? "Search" : c}
+                title=${c === "search" ? "Search" : c}
                 ?disabled=${this.disabled}
                 @click=${this.handleTrailingTriggerClick}
               >
-                <md-icon name=${this.trailingIcon}></md-icon>
+                <md-ripple ?disabled=${this.disabled}></md-ripple>
+                <md-focus-ring></md-focus-ring>
+                <md-icon name=${c}></md-icon>
               </button>
             ` : i}
       </div>
@@ -638,22 +699,34 @@ var l = n`
 
       <div class="search-container" role="search">
         <div class="search-bar-header">
-          <span class="leading-slot">
-            <slot name="leading-icon">
-              ${e ? r`
-                    <button
-                      class="icon-btn"
-                      type="button"
-                      aria-label="Back"
-                      @click=${this.handleBackClick}
-                    >
-                      <md-icon name=${this.activeLeadingIcon}></md-icon>
-                    </button>
-                  ` : r`
-                    <span class="icon-btn" style="cursor: default;">
-                      <md-icon name=${this.leadingIcon}></md-icon>
-                    </span>
-                  `}
+          <span class="leading-slot ${u ? "" : "empty"}">
+            <slot name="leading" @slotchange=${this.handleLeadingSlotChange}>
+              <slot name="leading-icon" @slotchange=${this.handleLeadingSlotChange}>
+                ${t ? r`
+                      <button
+                        class="icon-btn back-btn"
+                        type="button"
+                        aria-label="Back"
+                        @click=${this.handleBackClick}
+                      >
+                        <md-ripple ?disabled=${this.disabled}></md-ripple>
+                        <md-focus-ring></md-focus-ring>
+                        <md-icon name=${this.activeLeadingIcon}></md-icon>
+                      </button>
+                    ` : a ? r`
+                          <button
+                            class="icon-btn leading-btn"
+                            type="button"
+                            aria-label=${a === "menu" ? "Menu" : a}
+                            ?disabled=${this.disabled}
+                            @click=${this.handleLeadingClick}
+                          >
+                            <md-ripple ?disabled=${this.disabled}></md-ripple>
+                            <md-focus-ring></md-focus-ring>
+                            <md-icon name=${a}></md-icon>
+                          </button>
+                        ` : i}
+              </slot>
             </slot>
           </span>
 
@@ -683,30 +756,49 @@ var l = n`
                     aria-label="Clear search"
                     @click=${this.handleClearClick}
                   >
+                    <md-ripple ?disabled=${this.disabled}></md-ripple>
+                    <md-focus-ring></md-focus-ring>
                     <md-icon name="close"></md-icon>
                   </button>
                 ` : i}
 
-            <slot name="trailing-icon">
-              ${this.trailingIcon ? r`
-                    <span class="icon-btn" style="cursor: default;">
-                      <md-icon name=${this.trailingIcon}></md-icon>
-                    </span>
-                  ` : i}
+            <slot name="trailing">
+              <slot name="trailing-icon">
+                ${o ? r`
+                      <button
+                        class="icon-btn trailing-btn"
+                        type="button"
+                        aria-label=${o === "search" ? "Search" : o}
+                        ?disabled=${this.disabled}
+                        @click=${this.handleTrailingClick}
+                      >
+                        <md-ripple ?disabled=${this.disabled}></md-ripple>
+                        <md-focus-ring></md-focus-ring>
+                        <md-icon name=${o}></md-icon>
+                      </button>
+                    ` : i}
+              </slot>
             </slot>
           </span>
         </div>
 
-        <div class="divider"></div>
-
-        <div class="suggestions-container" role="listbox" aria-label="Suggestions">
-          <slot name="suggestions">
-            ${this.suggestions.map((e, t) => this.renderSuggestionItem(e, t))}
-          </slot>
-          <div class="extra-content">
-            <slot></slot>
-          </div>
-        </div>
+        ${this.hasContent ? r`
+              <div class="divider"></div>
+
+              <div class="suggestions-container" role="listbox" aria-label="Suggestions">
+                <slot name="suggestions" @slotchange=${this.handleContentSlotChange}>
+                  ${this.suggestions.map((e, t) => this.renderSuggestionItem(e, t))}
+                </slot>
+                <div class="extra-content">
+                  <slot @slotchange=${this.handleContentSlotChange}></slot>
+                </div>
+              </div>
+            ` : r`
+              <div class="extra-content" style="display: none;">
+                <slot name="suggestions" @slotchange=${this.handleContentSlotChange}></slot>
+                <slot @slotchange=${this.handleContentSlotChange}></slot>
+              </div>
+            `}
       </div>
     `;
 	}
@@ -721,6 +813,10 @@ e([o({
 	type: Boolean,
 	reflect: !0
 })], u.prototype, "active", void 0), e([o({ type: Array })], u.prototype, "suggestions", void 0), e([o({
+	type: String,
+	attribute: "search-icon-position",
+	reflect: !0
+})], u.prototype, "searchIconPosition", void 0), e([o({
 	type: String,
 	attribute: "leading-icon"
 })], u.prototype, "leadingIcon", void 0), e([o({
@@ -748,10 +844,10 @@ e([o({
 })], u.prototype, "fullscreen", void 0), e([o({
 	type: Boolean,
 	attribute: "auto-deactivate-on-select"
-})], u.prototype, "autoDeactivateOnSelect", void 0), e([c()], u.prototype, "highlightedIndex", void 0), e([s("input")], u.prototype, "inputElement", void 0), u = e([a("md-search-bar")], u);
+})], u.prototype, "autoDeactivateOnSelect", void 0), e([c()], u.prototype, "highlightedIndex", void 0), e([c()], u.prototype, "hasLeadingSlotContent", void 0), e([s("input")], u.prototype, "inputElement", void 0), e([c()], u.prototype, "hasCustomContent", void 0), u = e([a("md-search-bar")], u);
 var d = class extends u {};
 d = e([a("md-search")], d);
 //#endregion
 export { u as n, d as t };
 
-//# sourceMappingURL=search-bar-B6xxVT7u.js.map
+//# sourceMappingURL=search-bar-B4lAXza_.js.map

package/dist/chunks/search-bar-B4lAXza_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-bar-B4lAXza_.js","names":[],"sources":["../../src/components/search-bar/search-bar.css.ts","../../src/components/search-bar/search-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const searchBarStyles = css`\n  :host {\n    display: block;\n    box-sizing: border-box;\n    position: relative;\n    width: 100%;\n    max-width: var(--md-search-bar-max-width, 100%);\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    vertical-align: middle;\n\n    --_height: var(--md-search-bar-height, 56px);\n    --_shape: var(--md-search-bar-shape, var(--md-search-bar-border-radius, var(--md-sys-shape-corner-full, 28px)));\n    --_shape-active: var(--md-search-bar-shape-active, var(--md-sys-shape-corner-extra-large, 28px 28px 16px 16px));\n    --_bg: var(--md-search-bar-container-color, var(--md-search-bar-bg, var(--md-sys-color-surface-container-high, #ECE6F0)));\n    --_elevation: var(--md-search-bar-elevation, var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15)));\n    --_elevation-active: var(--md-search-bar-elevation-active, var(--md-sys-elevation-level3, 0px 4px 8px 3px rgba(0, 0, 0, 0.15)));\n    --_btn-size: var(--md-search-bar-icon-button-size, 40px);\n    --_icon-size: var(--md-search-bar-icon-size, 24px);\n    --_font-size: var(--md-search-bar-font-size, var(--md-sys-typescale-body-large-size, 16px));\n    --_line-height: var(--md-search-bar-line-height, var(--md-sys-typescale-body-large-line-height, 24px));\n    --_padding: var(--md-search-bar-padding, 0 8px 0 16px);\n  }\n\n  :host([size=\"small\"]),\n  :host([size=\"compact\"]),\n  :host([compact]) {\n    --_height: var(--md-search-bar-height, 40px);\n    --_shape: var(--md-search-bar-shape, var(--md-search-bar-border-radius, 20px));\n    --_shape-active: var(--md-search-bar-shape-active, 20px 20px 12px 12px);\n    --_btn-size: var(--md-search-bar-icon-button-size, 32px);\n    --_icon-size: var(--md-search-bar-icon-size, 20px);\n    --_font-size: var(--md-search-bar-font-size, var(--md-sys-typescale-body-medium-size, 14px));\n    --_line-height: var(--md-search-bar-line-height, 20px);\n    --_padding: var(--md-search-bar-padding, 0 6px 0 12px);\n  }\n\n  :host([size=\"large\"]) {\n    --_height: var(--md-search-bar-height, 64px);\n    --_shape: var(--md-search-bar-shape, var(--md-search-bar-border-radius, 32px));\n    --_shape-active: var(--md-search-bar-shape-active, 32px 32px 20px 20px);\n    --_btn-size: var(--md-search-bar-icon-button-size, 48px);\n    --_icon-size: var(--md-search-bar-icon-size, 24px);\n    --_font-size: var(--md-search-bar-font-size, 18px);\n    --_line-height: var(--md-search-bar-line-height, 26px);\n    --_padding: var(--md-search-bar-padding, 0 12px 0 20px);\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .scrim {\n    display: none;\n  }\n\n  /* Scrim when active in docked mode to catch outside clicks */\n  :host([active]) .scrim {\n    display: block;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 40;\n    background: transparent;\n  }\n\n  .search-container {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n    background-color: var(--_bg);\n    border-radius: var(--_shape);\n    box-shadow: var(--_elevation);\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                border-radius 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .search-bar-header {\n    display: flex;\n    align-items: center;\n    min-height: var(--_height);\n    height: var(--_height);\n    padding: var(--_padding);\n    box-sizing: border-box;\n    gap: 8px;\n  }\n\n  .leading-slot, .trailing-slot {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .leading-slot.empty,\n  :host([has-no-leading]) .leading-slot {\n    display: none;\n  }\n\n  :host([has-no-leading]) input {\n    padding-left: 8px;\n  }\n\n  .leading-slot ::slotted(md-icon-button),\n  .trailing-slot ::slotted(md-icon-button) {\n    --md-icon-button-size: var(--_btn-size);\n  }\n\n  .icon-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_btn-size);\n    height: var(--_btn-size);\n    border: none;\n    background: transparent;\n    border-radius: 50%;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    cursor: pointer;\n    padding: 0;\n    outline: none;\n    position: relative;\n    overflow: hidden;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n    transition: background-color 150ms ease;\n  }\n\n  .icon-btn md-icon {\n    font-size: var(--_icon-size);\n    --md-icon-size: var(--_icon-size);\n  }\n\n  .icon-btn:hover {\n    background-color: rgba(73, 69, 79, 0.08);\n  }\n\n  .icon-btn:focus-visible {\n    background-color: rgba(73, 69, 79, 0.12);\n  }\n\n  .input-wrapper {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n    align-items: center;\n    position: relative;\n  }\n\n  input {\n    width: 100%;\n    border: none;\n    background: transparent;\n    outline: none;\n    font-family: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--_line-height);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    padding: 0 4px;\n    margin: 0;\n    box-sizing: border-box;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  input::-webkit-search-decoration,\n  input::-webkit-search-cancel-button,\n  input::-webkit-search-results-button,\n  input::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n    appearance: none;\n    display: none;\n  }\n\n  input::-ms-clear,\n  input::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  input::placeholder {\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    opacity: 0.8;\n  }\n\n  /* Active Docked Mode */\n  :host([active]) .search-container {\n    z-index: 50;\n    border-radius: var(--_shape);\n    box-shadow: var(--_elevation-active);\n  }\n\n  :host([active][has-suggestions]) .search-container {\n    border-radius: var(--_shape-active);\n  }\n\n  /* Divider when active and has suggestions */\n  .divider {\n    display: none;\n    height: 1px;\n    background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n    margin: 0 16px;\n  }\n\n  :host([active][has-suggestions]) .divider {\n    display: block;\n  }\n\n  /* Suggestions / Content Container */\n  .suggestions-container {\n    display: none;\n    flex-direction: column;\n    max-height: 360px;\n    overflow-y: auto;\n    padding: 8px 0;\n    box-sizing: border-box;\n  }\n\n  :host([active][has-suggestions]) .suggestions-container {\n    display: flex;\n  }\n\n  .suggestion-item {\n    display: flex;\n    align-items: center;\n    min-height: 48px;\n    padding: 0 16px;\n    gap: 16px;\n    box-sizing: border-box;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    transition: background-color 150ms ease;\n  }\n\n  .suggestion-item:hover,\n  .suggestion-item.highlighted {\n    background-color: rgba(73, 69, 79, 0.08);\n  }\n\n  .suggestion-item.selected {\n    background-color: rgba(73, 69, 79, 0.12);\n  }\n\n  .suggestion-icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    flex-shrink: 0;\n  }\n\n  .suggestion-icon md-icon {\n    font-size: var(--_icon-size);\n    --md-icon-size: var(--_icon-size);\n  }\n\n  .suggestion-text {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .suggestion-label {\n    font-size: var(--_font-size);\n    line-height: 20px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .suggestion-supporting {\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    line-height: 16px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-top: 2px;\n  }\n\n  .suggestion-trailing {\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    flex-shrink: 0;\n  }\n\n  .search-trigger-container {\n    display: none;\n  }\n\n  /* Responsive Fullscreen / Mobile Collapsed Mode */\n  @media (max-width: 768px) {\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])),\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) {\n      display: inline-flex;\n      width: auto;\n      max-width: none;\n      vertical-align: middle;\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      background-color: transparent;\n      border-radius: 50%;\n      box-shadow: none;\n      cursor: pointer;\n      user-select: none;\n      outline: none;\n      transition: background-color 200ms ease, box-shadow 200ms ease;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container.has-trailing,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container.has-trailing {\n      height: var(--_height);\n      padding: 0 4px;\n      gap: 2px;\n      background-color: var(--_bg);\n      border-radius: var(--_shape);\n      box-shadow: var(--_elevation);\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container.has-trailing:hover,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container.has-trailing:hover {\n      box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container:focus-visible,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container:focus-visible {\n      outline: 2px solid var(--md-sys-color-primary, #6750A4);\n      outline-offset: 2px;\n    }\n\n    .trigger-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--_btn-size);\n      height: var(--_btn-size);\n      min-width: var(--_btn-size);\n      min-height: var(--_btn-size);\n      border-radius: 50%;\n      border: none;\n      background: transparent;\n      color: var(--md-sys-color-on-surface-variant, #49454F);\n      cursor: pointer;\n      padding: 0;\n      margin: 0;\n      outline: none;\n      position: relative;\n      overflow: hidden;\n      user-select: none;\n      transition: background-color 150ms ease, color 150ms ease;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    .trigger-btn md-icon {\n      font-size: var(--_icon-size);\n      --md-icon-size: var(--_icon-size);\n    }\n\n    .trigger-btn:hover {\n      background-color: rgba(73, 69, 79, 0.08);\n    }\n\n    .trigger-btn:focus-visible {\n      background-color: rgba(73, 69, 79, 0.12);\n    }\n\n    .trigger-divider {\n      width: 1px;\n      height: 22px;\n      background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n      margin: 0 2px;\n      flex-shrink: 0;\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-container,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-container {\n      display: none;\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .scrim,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .scrim {\n      display: none;\n    }\n\n    :host([responsive][active]),\n    :host([collapse-on-mobile][active]) {\n      display: block;\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      width: 100vw;\n      height: 100vh;\n      height: 100dvh;\n      max-width: 100vw;\n      margin: 0;\n      padding: 0;\n      z-index: 99999;\n    }\n\n    :host([responsive][active]) .search-trigger-container,\n    :host([collapse-on-mobile][active]) .search-trigger-container {\n      display: none;\n    }\n\n    :host([responsive][active]) .scrim,\n    :host([collapse-on-mobile][active]) .scrim {\n      display: none;\n    }\n\n    :host([responsive][active]) .search-container,\n    :host([collapse-on-mobile][active]) .search-container {\n      display: flex;\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      width: 100vw;\n      height: 100vh;\n      height: 100dvh;\n      max-width: 100vw;\n      border-radius: 0;\n      box-shadow: none;\n      z-index: 99999;\n      background-color: var(--_bg);\n    }\n\n    :host([responsive][active]) .suggestions-container,\n    :host([collapse-on-mobile][active]) .suggestions-container {\n      flex: 1;\n      max-height: calc(100vh - 57px);\n      max-height: calc(100dvh - 57px);\n    }\n  }\n\n  /* Forced Fullscreen attribute */\n  :host([fullscreen][active]) {\n    display: block;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100vw;\n    height: 100vh;\n    height: 100dvh;\n    max-width: 100vw;\n    z-index: 99999;\n  }\n\n  :host([fullscreen][active]) .search-trigger-container {\n    display: none;\n  }\n\n  :host([fullscreen][active]) .scrim {\n    display: none;\n  }\n\n  :host([fullscreen][active]) .search-container {\n    display: flex;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100vw;\n    height: 100vh;\n    height: 100dvh;\n    max-width: 100vw;\n    border-radius: 0;\n    box-shadow: none;\n    z-index: 99999;\n    background-color: var(--_bg);\n  }\n\n  :host([fullscreen][active]) .suggestions-container {\n    flex: 1;\n    max-height: calc(100vh - 57px);\n    max-height: calc(100dvh - 57px);\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { MdFormAssociatedElement } from '../../internal/form-associated.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { searchBarStyles } from './search-bar.css.js';\n\nexport type SearchBarSize = 'small' | 'compact' | 'medium' | 'large';\nexport type SearchIconPosition = 'leading' | 'trailing' | 'left' | 'right';\n\nexport interface SearchSuggestion {\n  id?: string;\n  label: string;\n  value?: string;\n  supportingText?: string;\n  trailingSupportingText?: string;\n  icon?: string;\n  [key: string]: unknown;\n}\n\n@customElement('md-search-bar')\nexport class MdSearchBar extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, searchBarStyles];\n\n  @property({ type: String, reflect: true })\n  size: SearchBarSize = 'medium';\n\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  placeholder = 'Search';\n\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  @property({ type: Array })\n  suggestions: Array<string | SearchSuggestion> = [];\n\n  @property({ type: String, attribute: 'search-icon-position', reflect: true })\n  searchIconPosition: SearchIconPosition = 'leading';\n\n  @property({ type: String, attribute: 'leading-icon' })\n  leadingIcon = 'search';\n\n  @property({ type: String, attribute: 'active-leading-icon' })\n  activeLeadingIcon = 'arrow_back';\n\n  @property({ type: String, attribute: 'trailing-icon' })\n  trailingIcon = '';\n\n  @property({ type: Boolean, attribute: 'show-back-button' })\n  showBackButton = true;\n\n  @property({ type: Boolean, attribute: 'show-clear-button' })\n  showClearButton = true;\n\n  @property({ type: Boolean, reflect: true })\n  responsive = true;\n\n  @property({ type: Boolean, attribute: 'collapse-on-mobile', reflect: true })\n  collapseOnMobile = true;\n\n  @property({ type: Boolean, reflect: true })\n  fullscreen = false;\n\n  @property({ type: Boolean, attribute: 'auto-deactivate-on-select' })\n  autoDeactivateOnSelect = true;\n\n  @state()\n  private highlightedIndex = -1;\n\n  @state()\n  private hasLeadingSlotContent = false;\n\n  @query('input')\n  private inputElement?: HTMLInputElement;\n\n  get effectiveSearchIconPosition(): 'leading' | 'trailing' {\n    return (this.searchIconPosition === 'trailing' || this.searchIconPosition === 'right' || this.trailingIcon === 'search')\n      ? 'trailing'\n      : 'leading';\n  }\n\n  get effectiveLeadingIcon(): string {\n    if (this.effectiveSearchIconPosition === 'trailing') {\n      if (this.leadingIcon && this.leadingIcon !== 'search') {\n        return this.leadingIcon;\n      }\n      return '';\n    }\n    return this.leadingIcon || 'search';\n  }\n\n  get effectiveTrailingIcon(): string {\n    if (this.effectiveSearchIconPosition === 'trailing') {\n      return this.trailingIcon || 'search';\n    }\n    return this.trailingIcon;\n  }\n\n  @state()\n  private hasCustomContent = false;\n\n  get hasContent(): boolean {\n    return Boolean((this.suggestions && this.suggestions.length > 0) || this.hasCustomContent);\n  }\n\n  private handleLeadingSlotChange = (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    const elements = slot.assignedElements({ flatten: true });\n    this.hasLeadingSlotContent = elements.length > 0;\n    this.requestUpdate();\n  };\n\n  private handleContentSlotChange = (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    const elements = slot.assignedElements({ flatten: true });\n    this.hasCustomContent = elements.length > 0;\n    this.requestUpdate();\n  };\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setFormValue(this.value);\n    this.toggleAttribute('has-value', Boolean(this.value));\n    this.toggleAttribute('active', this.active);\n    this.toggleAttribute('collapse-on-mobile', this.collapseOnMobile);\n    this.toggleAttribute('has-suggestions', this.hasContent);\n    this.toggleAttribute('has-no-leading', !this.effectiveLeadingIcon && (!this.active || !this.showBackButton || !this.hasContent) && !this.hasLeadingSlotContent);\n  }\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n    if (changedProperties.has('value')) {\n      this.setFormValue(this.value);\n      this.toggleAttribute('has-value', Boolean(this.value));\n    }\n    if (changedProperties.has('active')) {\n      this.toggleAttribute('active', this.active);\n      if (!this.active) {\n        this.highlightedIndex = -1;\n      }\n    }\n    if (changedProperties.has('collapseOnMobile')) {\n      this.toggleAttribute('collapse-on-mobile', this.collapseOnMobile);\n    }\n    this.toggleAttribute('has-suggestions', this.hasContent);\n    this.toggleAttribute('has-no-leading', !this.effectiveLeadingIcon && (!this.active || !this.showBackButton || !this.hasContent) && !this.hasLeadingSlotContent);\n  }\n\n  override formResetCallback() {\n    this.value = '';\n    this.setFormValue(null);\n    this.toggleAttribute('has-value', false);\n    this.highlightedIndex = -1;\n  }\n\n  /**\n   * Focuses the search input field.\n   */\n  override focus() {\n    this.inputElement?.focus();\n  }\n\n  /**\n   * Opens / activates the search view.\n   */\n  show() {\n    if (!this.active) {\n      this.active = true;\n      this.emitEvent('active-change', { active: true });\n    }\n    this.updateComplete.then(() => {\n      this.inputElement?.focus();\n    });\n  }\n\n  /**\n   * Alias for show()\n   */\n  open() {\n    this.show();\n  }\n\n  /**\n   * Closes / deactivates the search view.\n   */\n  close() {\n    if (this.active) {\n      this.active = false;\n      this.highlightedIndex = -1;\n      this.emitEvent('active-change', { active: false });\n    }\n  }\n\n  /**\n   * Alias for close()\n   */\n  collapse() {\n    this.close();\n  }\n\n  /**\n   * Toggles the active state of the search bar.\n   */\n  toggle() {\n    if (this.active) {\n      this.close();\n    } else {\n      this.show();\n    }\n  }\n\n  /**\n   * Clears the current search input.\n   */\n  clear() {\n    this.value = '';\n    this.setFormValue('');\n    this.toggleAttribute('has-value', false);\n    this.highlightedIndex = -1;\n    this.emitEvent('input', { value: '' });\n    this.emitEvent('clear');\n    this.inputElement?.focus();\n  }\n\n  private handleFocus = () => {\n    if (!this.active) {\n      this.active = true;\n      this.emitEvent('active-change', { active: true });\n    }\n  };\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.setFormValue(this.value);\n    this.toggleAttribute('has-value', Boolean(this.value));\n    this.highlightedIndex = -1;\n    this.emitEvent('input', { value: this.value });\n  };\n\n  private handleChange = () => {\n    this.emitEvent('change', { value: this.value });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const count = this.suggestions.length;\n\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.close();\n      this.inputElement?.blur();\n      return;\n    }\n\n    if (event.key === 'ArrowDown') {\n      if (!this.active) {\n        this.show();\n        return;\n      }\n      if (count > 0) {\n        event.preventDefault();\n        this.highlightedIndex = (this.highlightedIndex + 1) % count;\n      }\n      return;\n    }\n\n    if (event.key === 'ArrowUp') {\n      if (count > 0 && this.active) {\n        event.preventDefault();\n        this.highlightedIndex = this.highlightedIndex <= 0 ? count - 1 : this.highlightedIndex - 1;\n      }\n      return;\n    }\n\n    if (event.key === 'Enter') {\n      if (this.active && this.highlightedIndex >= 0 && this.highlightedIndex < count) {\n        const item = this.suggestions[this.highlightedIndex];\n        if (item !== undefined) {\n          event.preventDefault();\n          this.selectSuggestion(item, this.highlightedIndex);\n        }\n      } else {\n        this.emitEvent('search', { value: this.value });\n      }\n    }\n  };\n\n  private handleTriggerClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.show();\n  };\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.show();\n    }\n  };\n\n  private handleLeadingClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    const icon = this.effectiveLeadingIcon;\n    const allowed = this.emitEvent('leading-icon-click', { icon });\n    if (!allowed) return;\n    if (icon === 'search') {\n      this.show();\n    }\n  };\n\n  private handleTrailingClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    const icon = this.effectiveTrailingIcon;\n    const allowed = this.emitEvent('trailing-icon-click', { icon });\n    if (!allowed) return;\n    if (icon === 'search' || this.effectiveSearchIconPosition === 'trailing') {\n      if (!this.active) {\n        this.show();\n      }\n      this.emitEvent('search', { value: this.value });\n    }\n  };\n\n  private handleTrailingTriggerClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    const icon = this.effectiveTrailingIcon;\n    const allowed = this.emitEvent('trailing-icon-click', { icon });\n    if (allowed) {\n      this.show();\n      if (icon === 'search' || this.effectiveSearchIconPosition === 'trailing') {\n        this.emitEvent('search', { value: this.value });\n      }\n    }\n  };\n\n  private handleBackClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.close();\n  };\n\n  private handleScrimClick = () => {\n    this.close();\n  };\n\n  private handleClearClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.clear();\n  };\n\n  private selectSuggestion(suggestion: string | SearchSuggestion, index: number) {\n    const label = typeof suggestion === 'string' ? suggestion : suggestion.label;\n    const value = typeof suggestion === 'string' ? suggestion : (suggestion.value ?? suggestion.label);\n\n    this.value = value;\n    this.setFormValue(this.value);\n    this.toggleAttribute('has-value', Boolean(this.value));\n    this.emitEvent('suggestion-select', { suggestion, label, value, index });\n    this.emitEvent('search', { value: this.value, suggestion });\n\n    if (this.autoDeactivateOnSelect) {\n      this.close();\n    }\n  }\n\n  private renderSuggestionItem(suggestion: string | SearchSuggestion, index: number) {\n    const isString = typeof suggestion === 'string';\n    const label = isString ? suggestion : suggestion.label;\n    const supportingText = !isString ? suggestion.supportingText : undefined;\n    const trailingSupportingText = !isString ? suggestion.trailingSupportingText : undefined;\n    const iconName = !isString && suggestion.icon ? suggestion.icon : 'history';\n    const isHighlighted = this.highlightedIndex === index;\n\n    return html`\n      <div\n        class=\"suggestion-item ${isHighlighted ? 'highlighted' : ''}\"\n        role=\"option\"\n        aria-selected=${isHighlighted ? 'true' : 'false'}\n        @click=${() => this.selectSuggestion(suggestion, index)}\n      >\n        <span class=\"suggestion-icon\">\n          <md-icon name=${iconName}></md-icon>\n        </span>\n        <div class=\"suggestion-text\">\n          <span class=\"suggestion-label\">${label}</span>\n          ${supportingText ? html`<span class=\"suggestion-supporting\">${supportingText}</span>` : nothing}\n        </div>\n        ${trailingSupportingText ? html`<span class=\"suggestion-trailing\">${trailingSupportingText}</span>` : nothing}\n      </div>\n    `;\n  }\n\n  override render() {\n    const isFullscreenMode = this.fullscreen || (this.responsive && typeof window !== 'undefined' && window.matchMedia?.('(max-width: 768px)').matches);\n    const showBack = this.active && this.showBackButton && (this.hasContent || isFullscreenMode);\n    const effSearchPos = this.effectiveSearchIconPosition;\n    const effLeading = this.effectiveLeadingIcon;\n    const effTrailing = this.effectiveTrailingIcon;\n\n    let triggerLeadingIcon = 'search';\n    let triggerTrailingIcon = '';\n    let hasTrailingTrigger = false;\n\n    if (effSearchPos === 'trailing') {\n      if (effLeading) {\n        triggerLeadingIcon = effLeading;\n        triggerTrailingIcon = effTrailing || 'search';\n        hasTrailingTrigger = true;\n      } else {\n        triggerLeadingIcon = effTrailing || 'search';\n        hasTrailingTrigger = false;\n      }\n    } else {\n      triggerLeadingIcon = effLeading || 'search';\n      if (effTrailing) {\n        triggerTrailingIcon = effTrailing;\n        hasTrailingTrigger = true;\n      }\n    }\n\n    const hasLeadingHeader = showBack || Boolean(effLeading) || this.hasLeadingSlotContent;\n\n    return html`\n      <div\n        class=\"search-trigger-container ${hasTrailingTrigger ? 'has-trailing' : ''}\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=${this.placeholder || 'Search'}\n        title=${this.placeholder || 'Search'}\n        ?disabled=${this.disabled}\n        @click=${this.handleTriggerClick}\n        @keydown=${this.handleTriggerKeyDown}\n      >\n        <button\n          class=\"trigger-btn\"\n          type=\"button\"\n          aria-label=${triggerLeadingIcon === 'menu' ? 'Menu' : (this.placeholder || 'Search')}\n          title=${triggerLeadingIcon === 'menu' ? 'Menu' : (this.placeholder || 'Search')}\n          ?disabled=${this.disabled}\n          @click=${(e: MouseEvent) => {\n            if (effLeading && effLeading !== 'search') {\n              this.handleLeadingClick(e);\n            } else {\n              this.handleTriggerClick(e);\n            }\n          }}\n        >\n          <md-ripple ?disabled=${this.disabled}></md-ripple>\n          <md-focus-ring></md-focus-ring>\n          <md-icon name=${triggerLeadingIcon}></md-icon>\n        </button>\n\n        ${hasTrailingTrigger\n          ? html`\n              <div class=\"trigger-divider\" aria-hidden=\"true\"></div>\n              <button\n                class=\"trigger-btn trigger-trailing-btn\"\n                type=\"button\"\n                aria-label=${triggerTrailingIcon === 'search' ? 'Search' : triggerTrailingIcon}\n                title=${triggerTrailingIcon === 'search' ? 'Search' : triggerTrailingIcon}\n                ?disabled=${this.disabled}\n                @click=${this.handleTrailingTriggerClick}\n              >\n                <md-ripple ?disabled=${this.disabled}></md-ripple>\n                <md-focus-ring></md-focus-ring>\n                <md-icon name=${triggerTrailingIcon}></md-icon>\n              </button>\n            `\n          : nothing}\n      </div>\n\n      <div class=\"scrim\" @click=${this.handleScrimClick}></div>\n\n      <div class=\"search-container\" role=\"search\">\n        <div class=\"search-bar-header\">\n          <span class=\"leading-slot ${hasLeadingHeader ? '' : 'empty'}\">\n            <slot name=\"leading\" @slotchange=${this.handleLeadingSlotChange}>\n              <slot name=\"leading-icon\" @slotchange=${this.handleLeadingSlotChange}>\n                ${showBack\n                  ? html`\n                      <button\n                        class=\"icon-btn back-btn\"\n                        type=\"button\"\n                        aria-label=\"Back\"\n                        @click=${this.handleBackClick}\n                      >\n                        <md-ripple ?disabled=${this.disabled}></md-ripple>\n                        <md-focus-ring></md-focus-ring>\n                        <md-icon name=${this.activeLeadingIcon}></md-icon>\n                      </button>\n                    `\n                  : (effLeading\n                      ? html`\n                          <button\n                            class=\"icon-btn leading-btn\"\n                            type=\"button\"\n                            aria-label=${effLeading === 'menu' ? 'Menu' : effLeading}\n                            ?disabled=${this.disabled}\n                            @click=${this.handleLeadingClick}\n                          >\n                            <md-ripple ?disabled=${this.disabled}></md-ripple>\n                            <md-focus-ring></md-focus-ring>\n                            <md-icon name=${effLeading}></md-icon>\n                          </button>\n                        `\n                      : nothing)}\n              </slot>\n            </slot>\n          </span>\n\n          <div class=\"input-wrapper\">\n            <input\n              type=\"search\"\n              role=\"combobox\"\n              aria-autocomplete=\"list\"\n              aria-expanded=${this.active ? 'true' : 'false'}\n              aria-label=${this.placeholder}\n              placeholder=${this.placeholder}\n              .value=${this.value}\n              ?disabled=${this.disabled}\n              @input=${this.handleInput}\n              @change=${this.handleChange}\n              @keydown=${this.handleKeyDown}\n              @focus=${this.handleFocus}\n              @click=${this.handleFocus}\n            />\n          </div>\n\n          <span class=\"trailing-slot\">\n            ${this.showClearButton && this.value\n              ? html`\n                  <button\n                    class=\"icon-btn clear-btn\"\n                    type=\"button\"\n                    aria-label=\"Clear search\"\n                    @click=${this.handleClearClick}\n                  >\n                    <md-ripple ?disabled=${this.disabled}></md-ripple>\n                    <md-focus-ring></md-focus-ring>\n                    <md-icon name=\"close\"></md-icon>\n                  </button>\n                `\n              : nothing}\n\n            <slot name=\"trailing\">\n              <slot name=\"trailing-icon\">\n                ${effTrailing\n                  ? html`\n                      <button\n                        class=\"icon-btn trailing-btn\"\n                        type=\"button\"\n                        aria-label=${effTrailing === 'search' ? 'Search' : effTrailing}\n                        ?disabled=${this.disabled}\n                        @click=${this.handleTrailingClick}\n                      >\n                        <md-ripple ?disabled=${this.disabled}></md-ripple>\n                        <md-focus-ring></md-focus-ring>\n                        <md-icon name=${effTrailing}></md-icon>\n                      </button>\n                    `\n                  : nothing}\n              </slot>\n            </slot>\n          </span>\n        </div>\n\n        ${this.hasContent\n          ? html`\n              <div class=\"divider\"></div>\n\n              <div class=\"suggestions-container\" role=\"listbox\" aria-label=\"Suggestions\">\n                <slot name=\"suggestions\" @slotchange=${this.handleContentSlotChange}>\n                  ${this.suggestions.map((item, idx) => this.renderSuggestionItem(item, idx))}\n                </slot>\n                <div class=\"extra-content\">\n                  <slot @slotchange=${this.handleContentSlotChange}></slot>\n                </div>\n              </div>\n            `\n          : html`\n              <div class=\"extra-content\" style=\"display: none;\">\n                <slot name=\"suggestions\" @slotchange=${this.handleContentSlotChange}></slot>\n                <slot @slotchange=${this.handleContentSlotChange}></slot>\n              </div>\n            `}\n      </div>\n    `;\n  }\n}\n\n@customElement('md-search')\nexport class MdSearch extends MdSearchBar {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-search-bar': MdSearchBar;\n    'md-search': MdSearch;\n  }\n}\n"],"mappings":"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"}

package/dist/components/search-bar/search-bar.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../chunks/search-bar-B6xxVT7u.js";
+import { n as e, t } from "../../chunks/search-bar-B4lAXza_.js";
 export { t as MdSearch, e as MdSearchBar };

package/dist/index.js

@@ -31,7 +31,7 @@ import { MdNavBar as ee, MdNavigationBar as te } from "./components/navigation-b
 import { n as ne, t as re } from "./chunks/navigation-rail-item-CWvGjLjC.js";
 import { MdNavRail as ie, MdNavigationRail as ae } from "./components/navigation-rail/navigation-rail.js";
 import { a as oe, c as se, i as ce, l as le, n as ue, o as de, r as fe, s as pe, t as me, u as he } from "./chunks/table-C5rCvdFc.js";
-import { n as ge, t as _e } from "./chunks/search-bar-B6xxVT7u.js";
+import { n as ge, t as _e } from "./chunks/search-bar-B4lAXza_.js";
 import { n as ve, t as ye } from "./chunks/code-CM6hIZNx.js";
 import { i as be, n as xe, r as Se, t as Ce } from "./chunks/player-dT08kxeG.js";
 import { a as we, i as Te, n as Ee, o as De, r as Oe, t as ke } from "./chunks/app-drawer-DjKSuatE.js";

package/llms.txt

@@ -967,9 +967,10 @@ const isEnabled = ref(true);
 | `compact` | `boolean` | `false` | Shorthand boolean attribute for compact / small navbar sizing |
 | `active` | `boolean` | `false` | Controls whether search view is expanded and showing suggestions |
 | `suggestions` | `Array<string \| SearchSuggestion>` | `[]` | List of search suggestions with labels, supporting text, and icons |
-| `leading-icon` | `string` | `'search'` | Leading icon displayed when inactive |
+| `search-icon-position` | `'leading' \| 'trailing' \| 'left' \| 'right'` | `'leading'` | Position of search icon (`'leading'` / left, or `'trailing'` / right) |
+| `leading-icon` | `string` | `'search'` | Leading icon displayed when inactive (e.g. `'search'`, `'menu'`) |
 | `active-leading-icon` | `string` | `'arrow_back'` | Leading icon displayed when active |
-| `trailing-icon` | `string` | `''` | Optional trailing action icon |
+| `trailing-icon` | `string` | `''` | Optional trailing action icon (e.g. `'mic'`, `'search'`) |
 | `show-back-button` | `boolean` | `true` | Whether to show the back button in active mode |
 | `responsive` | `boolean` | `true` | Automatically switches to full-screen view and collapsed search icon on mobile (<= 768px) |
 | `collapse-on-mobile` | `boolean` | `true` | Collapses search bar into a compact search icon button on mobile screens when inactive |
@@ -977,27 +978,43 @@ const isEnabled = ref(true);
 | `disabled` | `boolean` | `false` | Disables user interaction |
 
 ##### Slots
-- `leading-icon`: Custom leading icon or button element.
-- `trailing-icon`: Custom trailing action buttons, avatar, or mic.
+- `leading` / `leading-icon`: Custom leading icon or navigation button element.
+- `trailing` / `trailing-icon`: Custom trailing action buttons, avatar, or mic.
 - `suggestions`: Custom slotted suggestions list.
 - `(default)`: Additional content rendered inside active search surface.
 
 ##### Events
 - `input`: Fired as user types (`detail: { value: string }`).
 - `change`: Fired on committed input change (`detail: { value: string }`).
-- `search`: Fired when user presses Enter or selects a suggestion (`detail: { value: string, suggestion?: object }`).
+- `search`: Fired when user presses Enter or clicks the search button (`detail: { value: string, suggestion?: object }`).
+- `leading-icon-click`: Fired when custom leading button (e.g. menu) is clicked (`detail: { icon: string }`).
+- `trailing-icon-click`: Fired when trailing icon button is clicked (`detail: { icon: string }`).
 - `active-change`: Fired when search bar expands/collapses (`detail: { active: boolean }`).
 - `suggestion-select`: Fired when a suggestion is selected (`detail: { suggestion: object, value: string, index: number }`).
 - `clear`: Fired when search value is cleared.
 
 ##### Code Example
 ```html
+<!-- Standard Search Bar -->
 <md-search-bar
   id="demo-search-bar"
   placeholder="Search destinations, hotels, flights..."
   trailing-icon="mic"
 ></md-search-bar>
 
+<!-- Search Icon on the Right -->
+<md-search-bar
+  placeholder="Search products..."
+  search-icon-position="right"
+></md-search-bar>
+
+<!-- Hamburger Menu Button on Left and Search Icon on Right -->
+<md-search-bar
+  placeholder="Search apps and files..."
+  leading-icon="menu"
+  search-icon-position="right"
+></md-search-bar>
+
 <!-- Custom Slotted Content in Active State -->
 <md-search-bar placeholder="Search files & documents">
   <div style="padding: 12px 16px;">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@francofantomius/material-components",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Reusable, accessible, and lightweight Material Design 3 Web Components built with Lit.",
   "repository": {
     "type": "git",
@@ -297,6 +297,7 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "analyze": "cem analyze --litelement",
+    "build:example": "esbuild src/index.ts --bundle --format=iife --outfile=example.bundle.js",
     "prepublishOnly": "npm run typecheck && npm run test && npm run build"
   },
   "keywords": [
@@ -314,11 +315,11 @@
     "lit": "^3.3.3"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@custom-elements-manifest/analyzer": "^0.11.0",
     "esbuild": "^0.28.2",
-    "happy-dom": "^20.11.6",
+    "happy-dom": "^20.14.5",
     "typescript": "^7.0.2",
     "vite": "^8.2.2",
-    "vitest": "^4.1.11"
+    "vitest": "^5.0.0"
   }
 }

package/dist/chunks/search-bar-B6xxVT7u.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"search-bar-B6xxVT7u.js","names":[],"sources":["../../src/components/search-bar/search-bar.css.ts","../../src/components/search-bar/search-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const searchBarStyles = css`\n  :host {\n    display: block;\n    box-sizing: border-box;\n    position: relative;\n    width: 100%;\n    max-width: var(--md-search-bar-max-width, 100%);\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    vertical-align: middle;\n\n    --_height: var(--md-search-bar-height, 56px);\n    --_shape: var(--md-search-bar-shape, var(--md-search-bar-border-radius, var(--md-sys-shape-corner-full, 28px)));\n    --_shape-active: var(--md-search-bar-shape-active, var(--md-sys-shape-corner-extra-large, 28px 28px 16px 16px));\n    --_bg: var(--md-search-bar-container-color, var(--md-search-bar-bg, var(--md-sys-color-surface-container-high, #ECE6F0)));\n    --_elevation: var(--md-search-bar-elevation, var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15)));\n    --_elevation-active: var(--md-search-bar-elevation-active, var(--md-sys-elevation-level3, 0px 4px 8px 3px rgba(0, 0, 0, 0.15)));\n    --_btn-size: var(--md-search-bar-icon-button-size, 40px);\n    --_icon-size: var(--md-search-bar-icon-size, 24px);\n    --_font-size: var(--md-search-bar-font-size, var(--md-sys-typescale-body-large-size, 16px));\n    --_line-height: var(--md-search-bar-line-height, var(--md-sys-typescale-body-large-line-height, 24px));\n    --_padding: var(--md-search-bar-padding, 0 8px 0 16px);\n  }\n\n  :host([size=\"small\"]),\n  :host([size=\"compact\"]),\n  :host([compact]) {\n    --_height: var(--md-search-bar-height, 40px);\n    --_shape: var(--md-search-bar-shape, var(--md-search-bar-border-radius, 20px));\n    --_shape-active: var(--md-search-bar-shape-active, 20px 20px 12px 12px);\n    --_btn-size: var(--md-search-bar-icon-button-size, 32px);\n    --_icon-size: var(--md-search-bar-icon-size, 20px);\n    --_font-size: var(--md-search-bar-font-size, var(--md-sys-typescale-body-medium-size, 14px));\n    --_line-height: var(--md-search-bar-line-height, 20px);\n    --_padding: var(--md-search-bar-padding, 0 6px 0 12px);\n  }\n\n  :host([size=\"large\"]) {\n    --_height: var(--md-search-bar-height, 64px);\n    --_shape: var(--md-search-bar-shape, var(--md-search-bar-border-radius, 32px));\n    --_shape-active: var(--md-search-bar-shape-active, 32px 32px 20px 20px);\n    --_btn-size: var(--md-search-bar-icon-button-size, 48px);\n    --_icon-size: var(--md-search-bar-icon-size, 24px);\n    --_font-size: var(--md-search-bar-font-size, 18px);\n    --_line-height: var(--md-search-bar-line-height, 26px);\n    --_padding: var(--md-search-bar-padding, 0 12px 0 20px);\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .scrim {\n    display: none;\n  }\n\n  /* Scrim when active in docked mode to catch outside clicks */\n  :host([active]) .scrim {\n    display: block;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 40;\n    background: transparent;\n  }\n\n  .search-container {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n    background-color: var(--_bg);\n    border-radius: var(--_shape);\n    box-shadow: var(--_elevation);\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                border-radius 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .search-bar-header {\n    display: flex;\n    align-items: center;\n    min-height: var(--_height);\n    height: var(--_height);\n    padding: var(--_padding);\n    box-sizing: border-box;\n    gap: 8px;\n  }\n\n  .leading-slot, .trailing-slot {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .icon-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_btn-size);\n    height: var(--_btn-size);\n    border: none;\n    background: transparent;\n    border-radius: 50%;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    cursor: pointer;\n    padding: 0;\n    outline: none;\n    position: relative;\n    transition: background-color 150ms ease;\n  }\n\n  .icon-btn md-icon {\n    font-size: var(--_icon-size);\n    --md-icon-size: var(--_icon-size);\n  }\n\n  .icon-btn:hover {\n    background-color: rgba(73, 69, 79, 0.08);\n  }\n\n  .icon-btn:focus-visible {\n    background-color: rgba(73, 69, 79, 0.12);\n  }\n\n  .input-wrapper {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n    align-items: center;\n    position: relative;\n  }\n\n  input {\n    width: 100%;\n    border: none;\n    background: transparent;\n    outline: none;\n    font-family: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--_line-height);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    padding: 0 4px;\n    margin: 0;\n    box-sizing: border-box;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  input::-webkit-search-decoration,\n  input::-webkit-search-cancel-button,\n  input::-webkit-search-results-button,\n  input::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n    appearance: none;\n    display: none;\n  }\n\n  input::-ms-clear,\n  input::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  input::placeholder {\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    opacity: 0.8;\n  }\n\n  /* Active Docked Mode */\n  :host([active]) .search-container {\n    z-index: 50;\n    border-radius: var(--_shape-active);\n    box-shadow: var(--_elevation-active);\n  }\n\n  /* Divider when active */\n  .divider {\n    display: none;\n    height: 1px;\n    background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n    margin: 0 16px;\n  }\n\n  :host([active]) .divider {\n    display: block;\n  }\n\n  /* Suggestions / Content Container */\n  .suggestions-container {\n    display: none;\n    flex-direction: column;\n    max-height: 360px;\n    overflow-y: auto;\n    padding: 8px 0;\n    box-sizing: border-box;\n  }\n\n  :host([active]) .suggestions-container {\n    display: flex;\n  }\n\n  .suggestion-item {\n    display: flex;\n    align-items: center;\n    min-height: 48px;\n    padding: 0 16px;\n    gap: 16px;\n    box-sizing: border-box;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    transition: background-color 150ms ease;\n  }\n\n  .suggestion-item:hover,\n  .suggestion-item.highlighted {\n    background-color: rgba(73, 69, 79, 0.08);\n  }\n\n  .suggestion-item.selected {\n    background-color: rgba(73, 69, 79, 0.12);\n  }\n\n  .suggestion-icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    flex-shrink: 0;\n  }\n\n  .suggestion-icon md-icon {\n    font-size: var(--_icon-size);\n    --md-icon-size: var(--_icon-size);\n  }\n\n  .suggestion-text {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .suggestion-label {\n    font-size: var(--_font-size);\n    line-height: 20px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .suggestion-supporting {\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    line-height: 16px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-top: 2px;\n  }\n\n  .suggestion-trailing {\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    flex-shrink: 0;\n  }\n\n  .search-trigger-container {\n    display: none;\n  }\n\n  /* Responsive Fullscreen / Mobile Collapsed Mode */\n  @media (max-width: 768px) {\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])),\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) {\n      display: inline-flex;\n      width: auto;\n      max-width: none;\n      vertical-align: middle;\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      background-color: transparent;\n      border-radius: 50%;\n      box-shadow: none;\n      cursor: pointer;\n      user-select: none;\n      outline: none;\n      transition: background-color 200ms ease, box-shadow 200ms ease;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container.has-trailing,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container.has-trailing {\n      height: var(--_height);\n      padding: 0 4px;\n      gap: 2px;\n      background-color: var(--_bg);\n      border-radius: var(--_shape);\n      box-shadow: var(--_elevation);\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container.has-trailing:hover,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container.has-trailing:hover {\n      box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container:focus-visible,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-trigger-container:focus-visible {\n      outline: 2px solid var(--md-sys-color-primary, #6750A4);\n      outline-offset: 2px;\n    }\n\n    .trigger-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--_btn-size);\n      height: var(--_btn-size);\n      min-width: var(--_btn-size);\n      min-height: var(--_btn-size);\n      border-radius: 50%;\n      border: none;\n      background: transparent;\n      color: var(--md-sys-color-on-surface-variant, #49454F);\n      cursor: pointer;\n      padding: 0;\n      margin: 0;\n      outline: none;\n      position: relative;\n      transition: background-color 150ms ease, color 150ms ease;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    .trigger-btn md-icon {\n      font-size: var(--_icon-size);\n      --md-icon-size: var(--_icon-size);\n    }\n\n    .trigger-btn:hover {\n      background-color: rgba(73, 69, 79, 0.08);\n    }\n\n    .trigger-btn:focus-visible {\n      background-color: rgba(73, 69, 79, 0.12);\n    }\n\n    .trigger-divider {\n      width: 1px;\n      height: 22px;\n      background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n      margin: 0 2px;\n      flex-shrink: 0;\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .search-container,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .search-container {\n      display: none;\n    }\n\n    :host([responsive]:not([active]):not([collapse-on-mobile=\"false\"])) .scrim,\n    :host([collapse-on-mobile]:not([active]):not([collapse-on-mobile=\"false\"])) .scrim {\n      display: none;\n    }\n\n    :host([responsive][active]),\n    :host([collapse-on-mobile][active]) {\n      display: block;\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      width: 100vw;\n      height: 100vh;\n      height: 100dvh;\n      max-width: 100vw;\n      margin: 0;\n      padding: 0;\n      z-index: 99999;\n    }\n\n    :host([responsive][active]) .search-trigger-container,\n    :host([collapse-on-mobile][active]) .search-trigger-container {\n      display: none;\n    }\n\n    :host([responsive][active]) .scrim,\n    :host([collapse-on-mobile][active]) .scrim {\n      display: none;\n    }\n\n    :host([responsive][active]) .search-container,\n    :host([collapse-on-mobile][active]) .search-container {\n      display: flex;\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      width: 100vw;\n      height: 100vh;\n      height: 100dvh;\n      max-width: 100vw;\n      border-radius: 0;\n      box-shadow: none;\n      z-index: 99999;\n      background-color: var(--_bg);\n    }\n\n    :host([responsive][active]) .suggestions-container,\n    :host([collapse-on-mobile][active]) .suggestions-container {\n      flex: 1;\n      max-height: calc(100vh - 57px);\n      max-height: calc(100dvh - 57px);\n    }\n  }\n\n  /* Forced Fullscreen attribute */\n  :host([fullscreen][active]) {\n    display: block;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100vw;\n    height: 100vh;\n    height: 100dvh;\n    max-width: 100vw;\n    z-index: 99999;\n  }\n\n  :host([fullscreen][active]) .search-trigger-container {\n    display: none;\n  }\n\n  :host([fullscreen][active]) .scrim {\n    display: none;\n  }\n\n  :host([fullscreen][active]) .search-container {\n    display: flex;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100vw;\n    height: 100vh;\n    height: 100dvh;\n    max-width: 100vw;\n    border-radius: 0;\n    box-shadow: none;\n    z-index: 99999;\n    background-color: var(--_bg);\n  }\n\n  :host([fullscreen][active]) .suggestions-container {\n    flex: 1;\n    max-height: calc(100vh - 57px);\n    max-height: calc(100dvh - 57px);\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { MdFormAssociatedElement } from '../../internal/form-associated.js';\nimport '../icon/icon.js';\nimport { searchBarStyles } from './search-bar.css.js';\n\nexport type SearchBarSize = 'small' | 'compact' | 'medium' | 'large';\n\nexport interface SearchSuggestion {\n  id?: string;\n  label: string;\n  value?: string;\n  supportingText?: string;\n  trailingSupportingText?: string;\n  icon?: string;\n  [key: string]: unknown;\n}\n\n@customElement('md-search-bar')\nexport class MdSearchBar extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, searchBarStyles];\n\n  @property({ type: String, reflect: true })\n  size: SearchBarSize = 'medium';\n\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  placeholder = 'Search';\n\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  @property({ type: Array })\n  suggestions: Array<string | SearchSuggestion> = [];\n\n  @property({ type: String, attribute: 'leading-icon' })\n  leadingIcon = 'search';\n\n  @property({ type: String, attribute: 'active-leading-icon' })\n  activeLeadingIcon = 'arrow_back';\n\n  @property({ type: String, attribute: 'trailing-icon' })\n  trailingIcon = '';\n\n  @property({ type: Boolean, attribute: 'show-back-button' })\n  showBackButton = true;\n\n  @property({ type: Boolean, attribute: 'show-clear-button' })\n  showClearButton = true;\n\n  @property({ type: Boolean, reflect: true })\n  responsive = true;\n\n  @property({ type: Boolean, attribute: 'collapse-on-mobile', reflect: true })\n  collapseOnMobile = true;\n\n  @property({ type: Boolean, reflect: true })\n  fullscreen = false;\n\n  @property({ type: Boolean, attribute: 'auto-deactivate-on-select' })\n  autoDeactivateOnSelect = true;\n\n  @state()\n  private highlightedIndex = -1;\n\n  @query('input')\n  private inputElement?: HTMLInputElement;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setFormValue(this.value);\n    this.toggleAttribute('has-value', Boolean(this.value));\n    this.toggleAttribute('active', this.active);\n    this.toggleAttribute('collapse-on-mobile', this.collapseOnMobile);\n  }\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n    if (changedProperties.has('value')) {\n      this.setFormValue(this.value);\n      this.toggleAttribute('has-value', Boolean(this.value));\n    }\n    if (changedProperties.has('active')) {\n      this.toggleAttribute('active', this.active);\n      if (!this.active) {\n        this.highlightedIndex = -1;\n      }\n    }\n    if (changedProperties.has('collapseOnMobile')) {\n      this.toggleAttribute('collapse-on-mobile', this.collapseOnMobile);\n    }\n  }\n\n  override formResetCallback() {\n    this.value = '';\n    this.setFormValue(null);\n    this.toggleAttribute('has-value', false);\n    this.highlightedIndex = -1;\n  }\n\n  /**\n   * Focuses the search input field.\n   */\n  override focus() {\n    this.inputElement?.focus();\n  }\n\n  /**\n   * Opens / activates the search view.\n   */\n  show() {\n    if (!this.active) {\n      this.active = true;\n      this.emitEvent('active-change', { active: true });\n    }\n    this.updateComplete.then(() => {\n      this.inputElement?.focus();\n    });\n  }\n\n  /**\n   * Alias for show()\n   */\n  open() {\n    this.show();\n  }\n\n  /**\n   * Closes / deactivates the search view.\n   */\n  close() {\n    if (this.active) {\n      this.active = false;\n      this.highlightedIndex = -1;\n      this.emitEvent('active-change', { active: false });\n    }\n  }\n\n  /**\n   * Alias for close()\n   */\n  collapse() {\n    this.close();\n  }\n\n  /**\n   * Toggles the active state of the search bar.\n   */\n  toggle() {\n    if (this.active) {\n      this.close();\n    } else {\n      this.show();\n    }\n  }\n\n  /**\n   * Clears the current search input.\n   */\n  clear() {\n    this.value = '';\n    this.setFormValue('');\n    this.toggleAttribute('has-value', false);\n    this.highlightedIndex = -1;\n    this.emitEvent('input', { value: '' });\n    this.emitEvent('clear');\n    this.inputElement?.focus();\n  }\n\n  private handleFocus = () => {\n    if (!this.active) {\n      this.active = true;\n      this.emitEvent('active-change', { active: true });\n    }\n  };\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.setFormValue(this.value);\n    this.toggleAttribute('has-value', Boolean(this.value));\n    this.highlightedIndex = -1;\n    this.emitEvent('input', { value: this.value });\n  };\n\n  private handleChange = () => {\n    this.emitEvent('change', { value: this.value });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const count = this.suggestions.length;\n\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.close();\n      this.inputElement?.blur();\n      return;\n    }\n\n    if (event.key === 'ArrowDown') {\n      if (!this.active) {\n        this.show();\n        return;\n      }\n      if (count > 0) {\n        event.preventDefault();\n        this.highlightedIndex = (this.highlightedIndex + 1) % count;\n      }\n      return;\n    }\n\n    if (event.key === 'ArrowUp') {\n      if (count > 0 && this.active) {\n        event.preventDefault();\n        this.highlightedIndex = this.highlightedIndex <= 0 ? count - 1 : this.highlightedIndex - 1;\n      }\n      return;\n    }\n\n    if (event.key === 'Enter') {\n      if (this.active && this.highlightedIndex >= 0 && this.highlightedIndex < count) {\n        const item = this.suggestions[this.highlightedIndex];\n        if (item !== undefined) {\n          event.preventDefault();\n          this.selectSuggestion(item, this.highlightedIndex);\n        }\n      } else {\n        this.emitEvent('search', { value: this.value });\n      }\n    }\n  };\n\n  private handleTriggerClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.show();\n  };\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.show();\n    }\n  };\n\n  private handleTrailingTriggerClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    const allowed = this.emitEvent('trailing-icon-click', { icon: this.trailingIcon });\n    if (allowed) {\n      this.show();\n    }\n  };\n\n  private handleBackClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.close();\n  };\n\n  private handleScrimClick = () => {\n    this.close();\n  };\n\n  private handleClearClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.clear();\n  };\n\n  private selectSuggestion(suggestion: string | SearchSuggestion, index: number) {\n    const label = typeof suggestion === 'string' ? suggestion : suggestion.label;\n    const value = typeof suggestion === 'string' ? suggestion : (suggestion.value ?? suggestion.label);\n\n    this.value = value;\n    this.setFormValue(this.value);\n    this.toggleAttribute('has-value', Boolean(this.value));\n    this.emitEvent('suggestion-select', { suggestion, label, value, index });\n    this.emitEvent('search', { value: this.value, suggestion });\n\n    if (this.autoDeactivateOnSelect) {\n      this.close();\n    }\n  }\n\n  private renderSuggestionItem(suggestion: string | SearchSuggestion, index: number) {\n    const isString = typeof suggestion === 'string';\n    const label = isString ? suggestion : suggestion.label;\n    const supportingText = !isString ? suggestion.supportingText : undefined;\n    const trailingSupportingText = !isString ? suggestion.trailingSupportingText : undefined;\n    const iconName = !isString && suggestion.icon ? suggestion.icon : 'history';\n    const isHighlighted = this.highlightedIndex === index;\n\n    return html`\n      <div\n        class=\"suggestion-item ${isHighlighted ? 'highlighted' : ''}\"\n        role=\"option\"\n        aria-selected=${isHighlighted ? 'true' : 'false'}\n        @click=${() => this.selectSuggestion(suggestion, index)}\n      >\n        <span class=\"suggestion-icon\">\n          <md-icon name=${iconName}></md-icon>\n        </span>\n        <div class=\"suggestion-text\">\n          <span class=\"suggestion-label\">${label}</span>\n          ${supportingText ? html`<span class=\"suggestion-supporting\">${supportingText}</span>` : nothing}\n        </div>\n        ${trailingSupportingText ? html`<span class=\"suggestion-trailing\">${trailingSupportingText}</span>` : nothing}\n      </div>\n    `;\n  }\n\n  override render() {\n    const showBack = this.active && this.showBackButton;\n    const hasTrailing = Boolean(this.trailingIcon);\n\n    return html`\n      <div\n        class=\"search-trigger-container ${hasTrailing ? 'has-trailing' : ''}\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=${this.placeholder || 'Search'}\n        title=${this.placeholder || 'Search'}\n        ?disabled=${this.disabled}\n        @click=${this.handleTriggerClick}\n        @keydown=${this.handleTriggerKeyDown}\n      >\n        <button\n          class=\"trigger-btn\"\n          type=\"button\"\n          aria-label=${this.placeholder || 'Search'}\n          title=${this.placeholder || 'Search'}\n          ?disabled=${this.disabled}\n          @click=${this.handleTriggerClick}\n        >\n          <md-icon name=${this.leadingIcon || 'search'}></md-icon>\n        </button>\n\n        ${hasTrailing\n          ? html`\n              <div class=\"trigger-divider\" aria-hidden=\"true\"></div>\n              <button\n                class=\"trigger-btn trigger-trailing-btn\"\n                type=\"button\"\n                aria-label=${this.trailingIcon}\n                title=${this.trailingIcon}\n                ?disabled=${this.disabled}\n                @click=${this.handleTrailingTriggerClick}\n              >\n                <md-icon name=${this.trailingIcon}></md-icon>\n              </button>\n            `\n          : nothing}\n      </div>\n\n      <div class=\"scrim\" @click=${this.handleScrimClick}></div>\n\n      <div class=\"search-container\" role=\"search\">\n        <div class=\"search-bar-header\">\n          <span class=\"leading-slot\">\n            <slot name=\"leading-icon\">\n              ${showBack\n                ? html`\n                    <button\n                      class=\"icon-btn\"\n                      type=\"button\"\n                      aria-label=\"Back\"\n                      @click=${this.handleBackClick}\n                    >\n                      <md-icon name=${this.activeLeadingIcon}></md-icon>\n                    </button>\n                  `\n                : html`\n                    <span class=\"icon-btn\" style=\"cursor: default;\">\n                      <md-icon name=${this.leadingIcon}></md-icon>\n                    </span>\n                  `}\n            </slot>\n          </span>\n\n          <div class=\"input-wrapper\">\n            <input\n              type=\"search\"\n              role=\"combobox\"\n              aria-autocomplete=\"list\"\n              aria-expanded=${this.active ? 'true' : 'false'}\n              aria-label=${this.placeholder}\n              placeholder=${this.placeholder}\n              .value=${this.value}\n              ?disabled=${this.disabled}\n              @input=${this.handleInput}\n              @change=${this.handleChange}\n              @keydown=${this.handleKeyDown}\n              @focus=${this.handleFocus}\n              @click=${this.handleFocus}\n            />\n          </div>\n\n          <span class=\"trailing-slot\">\n            ${this.showClearButton && this.value\n              ? html`\n                  <button\n                    class=\"icon-btn clear-btn\"\n                    type=\"button\"\n                    aria-label=\"Clear search\"\n                    @click=${this.handleClearClick}\n                  >\n                    <md-icon name=\"close\"></md-icon>\n                  </button>\n                `\n              : nothing}\n\n            <slot name=\"trailing-icon\">\n              ${this.trailingIcon\n                ? html`\n                    <span class=\"icon-btn\" style=\"cursor: default;\">\n                      <md-icon name=${this.trailingIcon}></md-icon>\n                    </span>\n                  `\n                : nothing}\n            </slot>\n          </span>\n        </div>\n\n        <div class=\"divider\"></div>\n\n        <div class=\"suggestions-container\" role=\"listbox\" aria-label=\"Suggestions\">\n          <slot name=\"suggestions\">\n            ${this.suggestions.map((item, idx) => this.renderSuggestionItem(item, idx))}\n          </slot>\n          <div class=\"extra-content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\n@customElement('md-search')\nexport class MdSearch extends MdSearchBar {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-search-bar': MdSearchBar;\n    'md-search': MdSearch;\n  }\n}\n"],"mappings":"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"}