@francofantomius/material-components 1.1.0 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/custom-elements.json +231 -143
  3. package/dist/chunks/{search-bar-TXnqJ-gd.js → search-bar-CfN-emMP.js} +166 -89
  4. package/dist/chunks/search-bar-CfN-emMP.js.map +1 -0
  5. package/dist/chunks/{top-app-bar-Dgbp6CFv.js → top-app-bar-VzrSd-r5.js} +21 -15
  6. package/dist/chunks/top-app-bar-VzrSd-r5.js.map +1 -0
  7. package/dist/components/search-bar/search-bar.css.d.ts.map +1 -1
  8. package/dist/components/search-bar/search-bar.d.ts +3 -0
  9. package/dist/components/search-bar/search-bar.d.ts.map +1 -1
  10. package/dist/components/search-bar/search-bar.js +1 -1
  11. package/dist/components/top-app-bar/top-app-bar.css.d.ts.map +1 -1
  12. package/dist/components/top-app-bar/top-app-bar.js +1 -1
  13. package/dist/index.js +2 -2
  14. package/llms.txt +2 -0
  15. package/package.json +1 -1
  16. package/dist/chunks/search-bar-TXnqJ-gd.js.map +0 -1
  17. package/dist/chunks/top-app-bar-Dgbp6CFv.js.map +0 -1
package/dist/chunks/{top-app-bar-Dgbp6CFv.js → top-app-bar-VzrSd-r5.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { n as d, t as i } from "./decorate-DXuynaiA.js";
2
2
  import { css as x, html as e, nothing as p } from "lit";
3
- import { customElement as h, property as o } from "lit/decorators.js";
3
+ import { customElement as h, property as a } from "lit/decorators.js";
4
4
  var v = x`
5
5
  :host {
6
6
  display: block;
@@ -136,15 +136,21 @@ var v = x`
136
136
  line-height: 36px;
137
137
  font-weight: 400;
138
138
  }
139
+
140
+ ::slotted(md-search-bar),
141
+ ::slotted(md-search) {
142
+ --md-search-bar-height: var(--md-top-app-bar-search-bar-height, 44px);
143
+ align-self: center;
144
+ }
139
145
  `, t = class extends d {
140
- constructor(...a) {
141
- super(...a), this.variant = "center-aligned", this.headline = "", this.subtitle = "", this.elevated = !1, this.fixed = !1;
146
+ constructor(...o) {
147
+ super(...o), this.variant = "center-aligned", this.headline = "", this.subtitle = "", this.elevated = !1, this.fixed = !1;
142
148
  }
143
149
  static {
144
150
  this.styles = [d.styles, v];
145
151
  }
146
152
  render() {
147
- const a = this.variant === "medium" || this.variant === "large", n = e`
153
+ const o = this.variant === "medium" || this.variant === "large", n = e`
148
154
  <div class="leading">
149
155
  <slot name="navigation">
150
156
  <slot name="leading-icon">
@@ -160,20 +166,20 @@ var v = x`
160
166
  </slot>
161
167
  </slot>
162
168
  </div>
163
- `, s = e`
169
+ `, r = e`
164
170
  <slot name="headline">
165
171
  <slot name="title">
166
172
  ${this.headline ? e`<span class="headline">${this.headline}</span>` : p}
167
173
  </slot>
168
174
  </slot>
169
- `, r = e`
175
+ `, s = e`
170
176
  <slot name="subtitle">
171
177
  <slot name="supporting-text">
172
178
  ${this.subtitle ? e`<span class="subtitle">${this.subtitle}</span>` : p}
173
179
  </slot>
174
180
  </slot>
175
181
  `;
176
- return a ? e`
182
+ return o ? e`
177
183
  <header class="top-app-bar" role="banner">
178
184
  <div class="row">
179
185
  ${n}
@@ -182,8 +188,8 @@ var v = x`
182
188
  </div>
183
189
  <div class="headline-row">
184
190
  <div class="title-container">
185
- ${s}
186
191
  ${r}
192
+ ${s}
187
193
  </div>
188
194
  </div>
189
195
  </header>
@@ -192,8 +198,8 @@ var v = x`
192
198
  <div class="row">
193
199
  ${n}
194
200
  <div class="title-container">
195
- ${s}
196
201
  ${r}
202
+ ${s}
197
203
  </div>
198
204
  <slot></slot>
199
205
  ${l}
@@ -202,17 +208,17 @@ var v = x`
202
208
  `;
203
209
  }
204
210
  };
205
- i([o({
211
+ i([a({
206
212
  type: String,
207
213
  reflect: !0
208
214
  })], t.prototype, "variant", void 0);
209
- i([o({ type: String })], t.prototype, "headline", void 0);
210
- i([o({ type: String })], t.prototype, "subtitle", void 0);
211
- i([o({
215
+ i([a({ type: String })], t.prototype, "headline", void 0);
216
+ i([a({ type: String })], t.prototype, "subtitle", void 0);
217
+ i([a({
212
218
  type: Boolean,
213
219
  reflect: !0
214
220
  })], t.prototype, "elevated", void 0);
215
- i([o({
221
+ i([a({
216
222
  type: Boolean,
217
223
  reflect: !0
218
224
  })], t.prototype, "fixed", void 0);
@@ -225,4 +231,4 @@ export {
225
231
  t
226
232
  };
227
233
 
228
- //# sourceMappingURL=top-app-bar-Dgbp6CFv.js.map
234
+ //# sourceMappingURL=top-app-bar-VzrSd-r5.js.map
package/dist/chunks/top-app-bar-VzrSd-r5.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"top-app-bar-VzrSd-r5.js","names":[],"sources":["../../src/components/top-app-bar/top-app-bar.css.ts","../../src/components/top-app-bar/top-app-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const topAppBarStyles = css`\n :host {\n display: block;\n box-sizing: border-box;\n width: 100%;\n position: relative;\n background-color: var(--md-top-app-bar-container-color, var(--md-sys-color-surface, #FEF7FF));\n color: var(--md-top-app-bar-on-container-color, var(--md-sys-color-on-surface, #1D1B20));\n font-family: var(--md-sys-typescale-font-family, inherit);\n transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);\n }\n\n :host([fixed]) {\n position: sticky;\n top: 0;\n z-index: 8;\n }\n\n :host([elevated]) {\n background-color: var(--md-top-app-bar-container-color, var(--md-sys-color-surface-container, #F3EDF7));\n box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n }\n\n .top-app-bar {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n }\n\n .row {\n display: flex;\n align-items: center;\n height: 64px;\n padding: 0 4px;\n box-sizing: border-box;\n position: relative;\n }\n\n .leading {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 48px;\n min-height: 48px;\n flex-shrink: 0;\n }\n\n .trailing {\n display: inline-flex;\n align-items: center;\n justify-content: flex-end;\n min-height: 48px;\n flex-shrink: 0;\n gap: 4px;\n margin-left: auto;\n }\n\n .title-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n flex: 1;\n min-width: 0;\n padding: 0 12px;\n }\n\n .headline {\n margin: 0;\n font-size: var(--md-sys-typescale-title-large-size, 22px);\n line-height: 28px;\n font-weight: 400;\n color: var(--md-top-app-bar-headline-color, var(--md-sys-color-on-surface, #1D1B20));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .subtitle {\n margin: 0;\n font-size: var(--md-sys-typescale-body-medium-size, 14px);\n line-height: 20px;\n font-weight: 400;\n color: var(--md-top-app-bar-subtitle-color, var(--md-sys-color-on-surface-variant, #49454F));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n /* Center-aligned variant (Default) */\n :host([variant=\"center-aligned\"]) .title-container,\n :host(:not([variant])) .title-container {\n text-align: center;\n align-items: center;\n }\n\n /* Small variant */\n :host([variant=\"small\"]) .title-container {\n text-align: start;\n align-items: flex-start;\n }\n\n /* Medium variant */\n :host([variant=\"medium\"]) .headline-row {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n min-height: 48px;\n padding: 0 16px 16px 16px;\n box-sizing: border-box;\n }\n\n :host([variant=\"medium\"]) .headline-row .headline {\n font-size: 24px;\n line-height: 32px;\n font-weight: 400;\n }\n\n /* Large variant */\n :host([variant=\"large\"]) .headline-row {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n min-height: 88px;\n padding: 0 16px 20px 16px;\n box-sizing: border-box;\n }\n\n :host([variant=\"large\"]) .headline-row .headline {\n font-size: 28px;\n line-height: 36px;\n font-weight: 400;\n }\n\n ::slotted(md-search-bar),\n ::slotted(md-search) {\n --md-search-bar-height: var(--md-top-app-bar-search-bar-height, 44px);\n align-self: center;\n }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { topAppBarStyles } from './top-app-bar.css.js';\n\nexport type TopAppBarVariant = 'center-aligned' | 'small' | 'medium' | 'large';\n\n/**\n * Material Design 3 Top App Bar component.\n *\n * @slot navigation - Leading navigation icon button (e.g. menu, back arrow). Also aliased as `leading-icon` or `leading`.\n * @slot headline - Primary title text. Also aliased as `title`.\n * @slot subtitle - Secondary subtitle text. Also aliased as `supporting-text`.\n * @slot actions - Trailing action icon buttons or menus. Also aliased as `trailing-icon` or `trailing`.\n * @slot - Default slot for additional bar contents.\n */\n@customElement('md-top-app-bar')\nexport class MdTopAppBar extends MdBaseElement {\n static override styles = [MdBaseElement.styles, topAppBarStyles];\n\n @property({ type: String, reflect: true })\n variant: TopAppBarVariant = 'center-aligned';\n\n @property({ type: String })\n headline = '';\n\n @property({ type: String })\n subtitle = '';\n\n @property({ type: Boolean, reflect: true })\n elevated = false;\n\n @property({ type: Boolean, reflect: true })\n fixed = false;\n\n override render() {\n const isMultiRow = this.variant === 'medium' || this.variant === 'large';\n\n const navigationSlot = html`\n <div class=\"leading\">\n <slot name=\"navigation\">\n <slot name=\"leading-icon\">\n <slot name=\"leading\"></slot>\n </slot>\n </slot>\n </div>\n `;\n\n const actionsSlot = html`\n <div class=\"trailing\">\n <slot name=\"actions\">\n <slot name=\"trailing-icon\">\n <slot name=\"trailing\"></slot>\n </slot>\n </slot>\n </div>\n `;\n\n const headlineSlot = html`\n <slot name=\"headline\">\n <slot name=\"title\">\n ${this.headline ? html`<span class=\"headline\">${this.headline}</span>` : nothing}\n </slot>\n </slot>\n `;\n\n const subtitleSlot = html`\n <slot name=\"subtitle\">\n <slot name=\"supporting-text\">\n ${this.subtitle ? html`<span class=\"subtitle\">${this.subtitle}</span>` : nothing}\n </slot>\n </slot>\n `;\n\n if (isMultiRow) {\n return html`\n <header class=\"top-app-bar\" role=\"banner\">\n <div class=\"row\">\n ${navigationSlot}\n <slot></slot>\n ${actionsSlot}\n </div>\n <div class=\"headline-row\">\n <div class=\"title-container\">\n ${headlineSlot}\n ${subtitleSlot}\n </div>\n </div>\n </header>\n `;\n }\n\n return html`\n <header class=\"top-app-bar\" role=\"banner\">\n <div class=\"row\">\n ${navigationSlot}\n <div class=\"title-container\">\n ${headlineSlot}\n ${subtitleSlot}\n </div>\n <slot></slot>\n ${actionsSlot}\n </div>\n </header>\n `;\n }\n}\n\n// Register md-top-bar as an alias\n@customElement('md-top-bar')\nexport class MdTopBar extends MdTopAppBar {}\n\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-top-app-bar': MdTopAppBar;\n 'md-top-bar': MdTopAppBar;\n }\n}\n"],"mappings":";;;AAEA,IAAa,IAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCelB,IAAN,cAA0B,EAAc;AAAA;iBAIjB,KAAA,UAAA,kBAGjB,KAAA,WAAA,IAGA,KAAA,WAAA,IAGA,KAAA,WAAA,IAGH,KAAA,QAAA;AAAA;;AAfiB,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAe;AAAA;EAiB/D,SAAkB;AAChB,UAAM,IAAa,KAAK,YAAY,YAAY,KAAK,YAAY,SAE3D,IAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAUjB,IAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAUd,IAAe;AAAA;AAAA;AAAA,YAGb,KAAK,WAAW,2BAA8B,KAAK,QAAA,YAAoB,CAAA;AAAA;AAAA;AAAA,OAKzE,IAAe;AAAA;AAAA;AAAA,YAGb,KAAK,WAAW,2BAA8B,KAAK,QAAA,YAAoB,CAAA;AAAA;AAAA;AAAA;AAK/E,WAAI,IACK;AAAA;AAAA;AAAA,cAGC,CAAA;AAAA;AAAA,cAEA,CAAA;AAAA;AAAA;AAAA;AAAA,gBAIE,CAAA;AAAA,gBACA,CAAA;AAAA;AAAA;AAAA;AAAA,UAOL;AAAA;AAAA;AAAA,YAGC,CAAA;AAAA;AAAA,cAEE,CAAA;AAAA,cACA,CAAA;AAAA;AAAA;AAAA,YAGF,CAAA;AAAA;AAAA;AAAA;AAAA,EAIV;AACF;AAtFG,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,MAAA;AAGxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzB,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,MAAA;AAhB3C,IAAA,EAAA,CAAA,EAAc,gBAAgB,CAAA,GAAA,CAAA;AA8FxB,IAAM,IAAN,cAAuB,EAAY;AAAC;AAD1C,IAAA,EAAA,CAAA,EAAc,YAAY,CAAA,GAAA,CAAA"}
package/dist/components/search-bar/search-bar.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"search-bar.css.d.ts","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,yBAwZ3B,CAAC"}
1
+ {"version":3,"file":"search-bar.css.d.ts","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,yBA6d3B,CAAC"}
package/dist/components/search-bar/search-bar.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { MdFormAssociatedElement } from '../../internal/form-associated.js';
2
+ export type SearchBarSize = 'small' | 'compact' | 'medium' | 'large';
2
3
  export interface SearchSuggestion {
3
4
  id?: string;
4
5
  label: string;
@@ -10,6 +11,8 @@ export interface SearchSuggestion {
10
11
  }
11
12
  export declare class MdSearchBar extends MdFormAssociatedElement {
12
13
  static styles: import('lit').CSSResultGroup[];
14
+ size: SearchBarSize;
15
+ compact: boolean;
13
16
  value: string;
14
17
  placeholder: string;
15
18
  active: boolean;
package/dist/components/search-bar/search-bar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"search-bar.d.ts","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,iBAAiB,CAAC;AAGzB,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,qBACa,WAAY,SAAQ,uBAAuB;IACtD,OAAgB,MAAM,iCAAqD;IAG3E,KAAK,SAAM;IAGX,WAAW,SAAY;IAGvB,MAAM,UAAS;IAGf,WAAW,EAAE,KAAK,CAAC,MAAM,GAAG,gBAAgB,CAAC,CAAM;IAGnD,WAAW,SAAY;IAGvB,iBAAiB,SAAgB;IAGjC,YAAY,SAAM;IAGlB,cAAc,UAAQ;IAGtB,eAAe,UAAQ;IAGvB,UAAU,UAAQ;IAGlB,gBAAgB,UAAQ;IAGxB,UAAU,UAAS;IAGnB,sBAAsB,UAAQ;IAG9B,OAAO,CAAC,gBAAgB,CAAM;IAG9B,OAAO,CAAC,YAAY,CAAC,CAAmB;IAE/B,iBAAiB;IAQjB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAiBlD,iBAAiB;IAO1B;;OAEG;IACM,KAAK;IAId;;OAEG;IACH,IAAI;IAUJ;;OAEG;IACH,IAAI;IAIJ;;OAEG;IACH,KAAK;IAQL;;OAEG;IACH,QAAQ;IAIR;;OAEG;IACH,MAAM;IAQN;;OAEG;IACH,KAAK;IAUL,OAAO,CAAC,WAAW,CAKjB;IAEF,OAAO,CAAC,WAAW,CAOjB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,aAAa,CAyCnB;IAEF,OAAO,CAAC,kBAAkB,CAGxB;IAEF,OAAO,CAAC,oBAAoB,CAK1B;IAEF,OAAO,CAAC,0BAA0B,CAMhC;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,gBAAgB,CAGtB;IAEF,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,oBAAoB;IA2BnB,MAAM;CA6HhB;AAED,qBACa,QAAS,SAAQ,WAAW;CAAG;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
1
+ {"version":3,"file":"search-bar.d.ts","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,iBAAiB,CAAC;AAGzB,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,qBACa,WAAY,SAAQ,uBAAuB;IACtD,OAAgB,MAAM,iCAAqD;IAG3E,IAAI,EAAE,aAAa,CAAY;IAG/B,OAAO,UAAS;IAGhB,KAAK,SAAM;IAGX,WAAW,SAAY;IAGvB,MAAM,UAAS;IAGf,WAAW,EAAE,KAAK,CAAC,MAAM,GAAG,gBAAgB,CAAC,CAAM;IAGnD,WAAW,SAAY;IAGvB,iBAAiB,SAAgB;IAGjC,YAAY,SAAM;IAGlB,cAAc,UAAQ;IAGtB,eAAe,UAAQ;IAGvB,UAAU,UAAQ;IAGlB,gBAAgB,UAAQ;IAGxB,UAAU,UAAS;IAGnB,sBAAsB,UAAQ;IAG9B,OAAO,CAAC,gBAAgB,CAAM;IAG9B,OAAO,CAAC,YAAY,CAAC,CAAmB;IAE/B,iBAAiB;IAQjB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAiBlD,iBAAiB;IAO1B;;OAEG;IACM,KAAK;IAId;;OAEG;IACH,IAAI;IAUJ;;OAEG;IACH,IAAI;IAIJ;;OAEG;IACH,KAAK;IAQL;;OAEG;IACH,QAAQ;IAIR;;OAEG;IACH,MAAM;IAQN;;OAEG;IACH,KAAK;IAUL,OAAO,CAAC,WAAW,CAKjB;IAEF,OAAO,CAAC,WAAW,CAOjB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,aAAa,CAyCnB;IAEF,OAAO,CAAC,kBAAkB,CAGxB;IAEF,OAAO,CAAC,oBAAoB,CAK1B;IAEF,OAAO,CAAC,0BAA0B,CAMhC;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,gBAAgB,CAGtB;IAEF,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,oBAAoB;IA2BnB,MAAM;CA6HhB;AAED,qBACa,QAAS,SAAQ,WAAW;CAAG;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
package/dist/components/search-bar/search-bar.js CHANGED
@@ -1,4 +1,4 @@
1
- import { n as a, t as e } from "../../chunks/search-bar-TXnqJ-gd.js";
1
+ import { n as a, t as e } from "../../chunks/search-bar-CfN-emMP.js";
2
2
  export {
3
3
  e as MdSearch,
4
4
  a as MdSearchBar
package/dist/components/top-app-bar/top-app-bar.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"top-app-bar.css.d.ts","sourceRoot":"","sources":["../../../src/components/top-app-bar/top-app-bar.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,yBAuI3B,CAAC"}
1
+ {"version":3,"file":"top-app-bar.css.d.ts","sourceRoot":"","sources":["../../../src/components/top-app-bar/top-app-bar.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,yBA6I3B,CAAC"}
package/dist/components/top-app-bar/top-app-bar.js CHANGED
@@ -1,4 +1,4 @@
1
- import { n as o, t as r } from "../../chunks/top-app-bar-Dgbp6CFv.js";
1
+ import { n as o, t as r } from "../../chunks/top-app-bar-VzrSd-r5.js";
2
2
  export {
3
3
  r as MdTopAppBar,
4
4
  o as MdTopBar
package/dist/index.js CHANGED
@@ -24,14 +24,14 @@ import { n as oa, t as ra } from "./chunks/chip-CI1ZINnr.js";
24
24
  import { n as ma, t as ea } from "./chunks/tabs-BfOtoeir.js";
25
25
  import { n as ia, t as sa } from "./chunks/list-D8olR7oZ.js";
26
26
  import { t as pa } from "./chunks/snackbar-Wsz3BzEY.js";
27
- import { n as fa, t as la } from "./chunks/top-app-bar-Dgbp6CFv.js";
27
+ import { n as fa, t as la } from "./chunks/top-app-bar-VzrSd-r5.js";
28
28
  import { a as ua, i as Ta, n as ba, r as Ba, t as Ia } from "./chunks/navigation-drawer-CKl44Ef5.js";
29
29
  import { n as Sa, t as ga } from "./chunks/navigation-bar-item-C9DfOEzg.js";
30
30
  import { MdNavBar as Ca, MdNavigationBar as va } from "./components/navigation-bar/navigation-bar.js";
31
31
  import { n as Pa, t as ka } from "./chunks/navigation-rail-item-6pdhNHJK.js";
32
32
  import { MdNavRail as Ra, MdNavigationRail as wa } from "./components/navigation-rail/navigation-rail.js";
33
33
  import { a as Fa, c as La, i as Ha, l as xa, n as Ea, o as Va, r as Ga, s as _a, t as Wa, u as Ya } from "./chunks/table-CqHnneAj.js";
34
- import { n as qa, t as za } from "./chunks/search-bar-TXnqJ-gd.js";
34
+ import { n as qa, t as za } from "./chunks/search-bar-CfN-emMP.js";
35
35
  import { n as Ka, t as Oa } from "./chunks/code-C5UFBkCh.js";
36
36
  import { i as Ua, n as Xa, r as Za, t as $a } from "./chunks/player-C4ydiIpr.js";
37
37
  import { a as oo, i as ro, n as to, o as mo, r as eo, t as io } from "./chunks/app-drawer-Du1ePzxZ.js";
package/llms.txt CHANGED
@@ -907,6 +907,8 @@ const isEnabled = ref(true);
907
907
  | :--- | :--- | :--- | :--- |
908
908
  | `value` | `string` | `''` | Current query value in the search bar |
909
909
  | `placeholder` | `string` | `'Search'` | Placeholder label for the input |
910
+ | `size` | `'small' \| 'compact' \| 'medium' \| 'large'` | `'medium'` | Visual size variant (use `'small'` or `'compact'` for 40px navbar/toolbar sizing) |
911
+ | `compact` | `boolean` | `false` | Shorthand boolean attribute for compact / small navbar sizing |
910
912
  | `active` | `boolean` | `false` | Controls whether search view is expanded and showing suggestions |
911
913
  | `suggestions` | `Array<string \| SearchSuggestion>` | `[]` | List of search suggestions with labels, supporting text, and icons |
912
914
  | `leading-icon` | `string` | `'search'` | Leading icon displayed when inactive |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@francofantomius/material-components",
3
- "version": "1.1.0",
3
+ "version": "1.1.2",
4
4
  "description": "Reusable, accessible, and lightweight Material Design 3 Web Components built with Lit.",
5
5
  "repository": {
6
6
  "type": "git",
package/dist/chunks/search-bar-TXnqJ-gd.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"search-bar-TXnqJ-gd.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\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(--md-search-bar-container-color, var(--md-sys-color-surface-container-high, #ECE6F0));\n border-radius: var(--md-sys-shape-corner-full, 28px);\n box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\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: 56px;\n height: 56px;\n padding: 0 8px 0 16px;\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: 40px;\n height: 40px;\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: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(--md-sys-typescale-body-large-size, 16px);\n line-height: var(--md-sys-typescale-body-large-line-height, 24px);\n color: var(--md-sys-color-on-surface, #1D1B20);\n padding: 0 4px;\n margin: 0;\n box-sizing: border-box;\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(--md-sys-shape-corner-extra-large, 28px 28px 16px 16px);\n box-shadow: var(--md-sys-elevation-level3, 0px 4px 8px 3px rgba(0, 0, 0, 0.15));\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-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(--md-sys-typescale-body-large-size, 16px);\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: 48px;\n padding: 0 4px;\n gap: 2px;\n background-color: var(--md-search-bar-container-color, var(--md-sys-color-surface-container-high, #ECE6F0));\n border-radius: var(--md-sys-shape-corner-full, 28px);\n box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\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: 40px;\n height: 40px;\n min-width: 40px;\n min-height: 40px;\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: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(--md-search-bar-container-color, var(--md-sys-color-surface-container-high, #ECE6F0));\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(--md-search-bar-container-color, var(--md-sys-color-surface-container-high, #ECE6F0));\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 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 })\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":";;;;;AAEA,IAAa,IAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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"}
package/dist/chunks/top-app-bar-Dgbp6CFv.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"top-app-bar-Dgbp6CFv.js","names":[],"sources":["../../src/components/top-app-bar/top-app-bar.css.ts","../../src/components/top-app-bar/top-app-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const topAppBarStyles = css`\n :host {\n display: block;\n box-sizing: border-box;\n width: 100%;\n position: relative;\n background-color: var(--md-top-app-bar-container-color, var(--md-sys-color-surface, #FEF7FF));\n color: var(--md-top-app-bar-on-container-color, var(--md-sys-color-on-surface, #1D1B20));\n font-family: var(--md-sys-typescale-font-family, inherit);\n transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);\n }\n\n :host([fixed]) {\n position: sticky;\n top: 0;\n z-index: 8;\n }\n\n :host([elevated]) {\n background-color: var(--md-top-app-bar-container-color, var(--md-sys-color-surface-container, #F3EDF7));\n box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n }\n\n .top-app-bar {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n }\n\n .row {\n display: flex;\n align-items: center;\n height: 64px;\n padding: 0 4px;\n box-sizing: border-box;\n position: relative;\n }\n\n .leading {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 48px;\n min-height: 48px;\n flex-shrink: 0;\n }\n\n .trailing {\n display: inline-flex;\n align-items: center;\n justify-content: flex-end;\n min-height: 48px;\n flex-shrink: 0;\n gap: 4px;\n margin-left: auto;\n }\n\n .title-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n flex: 1;\n min-width: 0;\n padding: 0 12px;\n }\n\n .headline {\n margin: 0;\n font-size: var(--md-sys-typescale-title-large-size, 22px);\n line-height: 28px;\n font-weight: 400;\n color: var(--md-top-app-bar-headline-color, var(--md-sys-color-on-surface, #1D1B20));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .subtitle {\n margin: 0;\n font-size: var(--md-sys-typescale-body-medium-size, 14px);\n line-height: 20px;\n font-weight: 400;\n color: var(--md-top-app-bar-subtitle-color, var(--md-sys-color-on-surface-variant, #49454F));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n /* Center-aligned variant (Default) */\n :host([variant=\"center-aligned\"]) .title-container,\n :host(:not([variant])) .title-container {\n text-align: center;\n align-items: center;\n }\n\n /* Small variant */\n :host([variant=\"small\"]) .title-container {\n text-align: start;\n align-items: flex-start;\n }\n\n /* Medium variant */\n :host([variant=\"medium\"]) .headline-row {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n min-height: 48px;\n padding: 0 16px 16px 16px;\n box-sizing: border-box;\n }\n\n :host([variant=\"medium\"]) .headline-row .headline {\n font-size: 24px;\n line-height: 32px;\n font-weight: 400;\n }\n\n /* Large variant */\n :host([variant=\"large\"]) .headline-row {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n min-height: 88px;\n padding: 0 16px 20px 16px;\n box-sizing: border-box;\n }\n\n :host([variant=\"large\"]) .headline-row .headline {\n font-size: 28px;\n line-height: 36px;\n font-weight: 400;\n }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { topAppBarStyles } from './top-app-bar.css.js';\n\nexport type TopAppBarVariant = 'center-aligned' | 'small' | 'medium' | 'large';\n\n/**\n * Material Design 3 Top App Bar component.\n *\n * @slot navigation - Leading navigation icon button (e.g. menu, back arrow). Also aliased as `leading-icon` or `leading`.\n * @slot headline - Primary title text. Also aliased as `title`.\n * @slot subtitle - Secondary subtitle text. Also aliased as `supporting-text`.\n * @slot actions - Trailing action icon buttons or menus. Also aliased as `trailing-icon` or `trailing`.\n * @slot - Default slot for additional bar contents.\n */\n@customElement('md-top-app-bar')\nexport class MdTopAppBar extends MdBaseElement {\n static override styles = [MdBaseElement.styles, topAppBarStyles];\n\n @property({ type: String, reflect: true })\n variant: TopAppBarVariant = 'center-aligned';\n\n @property({ type: String })\n headline = '';\n\n @property({ type: String })\n subtitle = '';\n\n @property({ type: Boolean, reflect: true })\n elevated = false;\n\n @property({ type: Boolean, reflect: true })\n fixed = false;\n\n override render() {\n const isMultiRow = this.variant === 'medium' || this.variant === 'large';\n\n const navigationSlot = html`\n <div class=\"leading\">\n <slot name=\"navigation\">\n <slot name=\"leading-icon\">\n <slot name=\"leading\"></slot>\n </slot>\n </slot>\n </div>\n `;\n\n const actionsSlot = html`\n <div class=\"trailing\">\n <slot name=\"actions\">\n <slot name=\"trailing-icon\">\n <slot name=\"trailing\"></slot>\n </slot>\n </slot>\n </div>\n `;\n\n const headlineSlot = html`\n <slot name=\"headline\">\n <slot name=\"title\">\n ${this.headline ? html`<span class=\"headline\">${this.headline}</span>` : nothing}\n </slot>\n </slot>\n `;\n\n const subtitleSlot = html`\n <slot name=\"subtitle\">\n <slot name=\"supporting-text\">\n ${this.subtitle ? html`<span class=\"subtitle\">${this.subtitle}</span>` : nothing}\n </slot>\n </slot>\n `;\n\n if (isMultiRow) {\n return html`\n <header class=\"top-app-bar\" role=\"banner\">\n <div class=\"row\">\n ${navigationSlot}\n <slot></slot>\n ${actionsSlot}\n </div>\n <div class=\"headline-row\">\n <div class=\"title-container\">\n ${headlineSlot}\n ${subtitleSlot}\n </div>\n </div>\n </header>\n `;\n }\n\n return html`\n <header class=\"top-app-bar\" role=\"banner\">\n <div class=\"row\">\n ${navigationSlot}\n <div class=\"title-container\">\n ${headlineSlot}\n ${subtitleSlot}\n </div>\n <slot></slot>\n ${actionsSlot}\n </div>\n </header>\n `;\n }\n}\n\n// Register md-top-bar as an alias\n@customElement('md-top-bar')\nexport class MdTopBar extends MdTopAppBar {}\n\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-top-app-bar': MdTopAppBar;\n 'md-top-bar': MdTopAppBar;\n }\n}\n"],"mappings":";;;AAEA,IAAa,IAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCelB,IAAN,cAA0B,EAAc;AAAA;iBAIjB,KAAA,UAAA,kBAGjB,KAAA,WAAA,IAGA,KAAA,WAAA,IAGA,KAAA,WAAA,IAGH,KAAA,QAAA;AAAA;;AAfiB,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAe;AAAA;EAiB/D,SAAkB;AAChB,UAAM,IAAa,KAAK,YAAY,YAAY,KAAK,YAAY,SAE3D,IAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAUjB,IAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAUd,IAAe;AAAA;AAAA;AAAA,YAGb,KAAK,WAAW,2BAA8B,KAAK,QAAA,YAAoB,CAAA;AAAA;AAAA;AAAA,OAKzE,IAAe;AAAA;AAAA;AAAA,YAGb,KAAK,WAAW,2BAA8B,KAAK,QAAA,YAAoB,CAAA;AAAA;AAAA;AAAA;AAK/E,WAAI,IACK;AAAA;AAAA;AAAA,cAGC,CAAA;AAAA;AAAA,cAEA,CAAA;AAAA;AAAA;AAAA;AAAA,gBAIE,CAAA;AAAA,gBACA,CAAA;AAAA;AAAA;AAAA;AAAA,UAOL;AAAA;AAAA;AAAA,YAGC,CAAA;AAAA;AAAA,cAEE,CAAA;AAAA,cACA,CAAA;AAAA;AAAA;AAAA,YAGF,CAAA;AAAA;AAAA;AAAA;AAAA,EAIV;AACF;AAtFG,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,MAAA;AAGxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzB,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,MAAA;AAhB3C,IAAA,EAAA,CAAA,EAAc,gBAAgB,CAAA,GAAA,CAAA;AA8FxB,IAAM,IAAN,cAAuB,EAAY;AAAC;AAD1C,IAAA,EAAA,CAAA,EAAc,YAAY,CAAA,GAAA,CAAA"}