@m3e/app-bar 1.0.0-rc.2

package/dist/html-custom-data.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "m3e-app-bar",
+      "description": "A bar, placed a the top of a screen, used to help users navigate through an application.\n---\n\n\n### **Methods:**\n - **attach(control: _HTMLElement_): _void_** - Attaches the element to an interactive control.\n- **detach(): _void_** - Detaches the element from its current interactive control.\n\n### **Slots:**\n - **leading-icon** - Renders a leading icon.\n- **subtitle** - Renders the subtitle.\n- **title** - Renders the title.\n- **trailing-icon** - Renders a trailing icon.\n\n### **CSS Properties:**\n - **--m3e-app-bar-container-color** - Background color of the app bar container. _(default: undefined)_\n- **--m3e-app-bar-container-color-on-scroll** - Background color of the app bar container when scrolled. _(default: undefined)_\n- **--m3e-app-bar-container-elevation** - Elevation (shadow) of the app bar container. _(default: undefined)_\n- **--m3e-app-bar-container-elevation-on-scroll** - Elevation (shadow) of the app bar container when scrolled. _(default: undefined)_\n- **--m3e-app-bar-title-text-color** - Color of the app bar title text. _(default: undefined)_\n- **--m3e-app-bar-subtitle-text-color** - Color of the app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-padding-left** - Left padding for the app bar container. _(default: undefined)_\n- **--m3e-app-bar-padding-right** - Right padding for the app bar container. _(default: undefined)_\n- **--m3e-app-bar-small-container-height** - Height of the small app bar container. _(default: undefined)_\n- **--m3e-app-bar-small-title-text-font-size** - Font size for the small app bar title text. _(default: undefined)_\n- **--m3e-app-bar-small-title-text-font-weight** - Font weight for the small app bar title text. _(default: undefined)_\n- **--m3e-app-bar-small-title-text-line-height** - Line height for the small app bar title text. _(default: undefined)_\n- **--m3e-app-bar-small-subtitle-text-tracking** - Letter spacing (tracking) for the small app bar title text. _(default: undefined)_\n- **--m3e-app-bar-small-subtitle-text-font-size** - Font size for the small app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-small-subtitle-text-font-weight** - Font weight for the small app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-small-subtitle-text-line-height** - Line height for the small app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-small-subtitle-text-tracking** - Letter spacing (tracking) for the small app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-small-heading-padding-left** - Left padding for the small app bar heading. _(default: undefined)_\n- **--m3e-app-bar-small-heading-padding-right** - Right padding for the small app bar heading. _(default: undefined)_\n- **--m3e-app-bar-medium-container-height** - Height of the medium app bar container. _(default: undefined)_\n- **--m3e-app-bar-medium-container-height-with-subtitle** - Height of the medium app bar container with subtitle. _(default: undefined)_\n- **--m3e-app-bar-medium-title-text-font-size** - Font size for the medium app bar title text. _(default: undefined)_\n- **--m3e-app-bar-medium-title-text-font-weight** - Font weight for the medium app bar title text. _(default: undefined)_\n- **--m3e-app-bar-medium-title-text-line-height** - Line height for the medium app bar title text. _(default: undefined)_\n- **--m3e-app-bar-medium-subtitle-text-tracking** - Letter spacing (tracking) for the medium app bar title text. _(default: undefined)_\n- **--m3e-app-bar-medium-subtitle-text-font-size** - Font size for the medium app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-medium-subtitle-text-font-weight** - Font weight for the medium app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-medium-subtitle-text-line-height** - Line height for the medium app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-medium-subtitle-text-tracking** - Letter spacing (tracking) for the medium app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-medium-heading-padding-left** - Left padding for the medium app bar heading. _(default: undefined)_\n- **--m3e-app-bar-medium-heading-padding-right** - Right padding for the medium app bar heading. _(default: undefined)_\n- **--m3e-app-bar-medium-padding-top** - Top padding for the medium app bar. _(default: undefined)_\n- **--m3e-app-bar-medium-padding-bottom** - Bottom padding for the medium app bar. _(default: undefined)_\n- **--m3e-app-bar-medium-title-max-lines** - Maximum number of lines for the medium app bar title. _(default: undefined)_\n- **--m3e-app-bar-medium-subtitle-max-lines** - Maximum number of lines for the medium app bar subtitle. _(default: undefined)_\n- **--m3e-app-bar-large-container-height** - Height of the large app bar container. _(default: undefined)_\n- **--m3e-app-bar-large-container-height-with-subtitle** - Height of the large app bar container with subtitle. _(default: undefined)_\n- **--m3e-app-bar-large-title-text-font-size** - Font size for the large app bar title text. _(default: undefined)_\n- **--m3e-app-bar-large-title-text-font-weight** - Font weight for the large app bar title text. _(default: undefined)_\n- **--m3e-app-bar-large-title-text-line-height** - Line height for the large app bar title text. _(default: undefined)_\n- **--m3e-app-bar-large-subtitle-text-tracking** - Letter spacing (tracking) for the large app bar title text. _(default: undefined)_\n- **--m3e-app-bar-large-subtitle-text-font-size** - Font size for the large app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-large-subtitle-text-font-weight** - Font weight for the large app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-large-subtitle-text-line-height** - Line height for the large app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-large-subtitle-text-tracking** - Letter spacing (tracking) for the large app bar subtitle text. _(default: undefined)_\n- **--m3e-app-bar-large-heading-padding-left** - Left padding for the large app bar heading. _(default: undefined)_\n- **--m3e-app-bar-large-heading-padding-right** - Right padding for the large app bar heading. _(default: undefined)_\n- **--m3e-app-bar-large-padding-top** - Top padding for the large app bar. _(default: undefined)_\n- **--m3e-app-bar-large-padding-bottom** - Bottom padding for the large app bar. _(default: undefined)_\n- **--m3e-app-bar-large-title-max-lines** - Maximum number of lines for the large app bar title. _(default: undefined)_\n- **--m3e-app-bar-large-subtitle-max-lines** - Maximum number of lines for the large app bar subtitle. _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "centered",
+          "description": "Whether the title and subtitle are centered.",
+          "values": []
+        },
+        {
+          "name": "for",
+          "description": "The identifier of the interactive control to which this element is attached.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size of the bar.",
+          "values": [{ "name": "AppBarSize" }]
+        }
+      ],
+      "references": []
+    }
+  ]
+}

package/dist/index.js

@@ -0,0 +1,611 @@
+/**
+ * @license MIT
+ * Copyright (c) 2025 matraic
+ * See LICENSE file in the project root for full license text.
+ */
+import { unsafeCSS, css, LitElement, html } from 'lit';
+import { DesignToken, HtmlFor, Role, debounce, hasAssignedNodes } from '@m3e/core';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1=t=>(e,o)=>{ void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);};
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t=globalThis,e$3=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),o$2=new WeakMap;let n$2 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$3&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$2.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$2.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$2("string"==typeof t?t:t+"",void 0,s),S=(s,o)=>{if(e$3)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$3?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const{is:i,defineProperty:e$2,getOwnPropertyDescriptor:h,getOwnPropertyNames:r$1,getOwnPropertySymbols:o$1,getPrototypeOf:n$1}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i(t,s),b={attribute:true,type:String,converter:u,reflect:false,useDefault:false,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$2(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n$1(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r$1(t),...o$1(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return  false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return  true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[d("elementProperties")]=new Map,y[d("finalized")]=new Map,p?.({ReactiveElement:y}),(a.reactiveElementVersions??=[]).push("2.1.1");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const o={attribute:true,type:String,converter:u,reflect:false,hasChanged:f},r=(t=o,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),"setter"===n&&((t=Object.create(t)).wrapped=true),s.set(r.name,t),"accessor"===n){const{name:o}=r;return {set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t);},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t);}}throw Error("Unsupported decorator location: "+n)};function n(t){return (e,o)=>"object"==typeof o?r(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$1=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function e(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$1(n,s,{get(){return o(this)}})}}
+
+/**
+ * Component design tokens that control the `M3eAppBarElement` for all size variants.
+ * @internal
+ */
+const AppBarSizeToken = {
+    small: {
+        containerHeight: unsafeCSS(`var(--m3e-app-bar-small-container-height, 4rem)`),
+        titleTextFontSize: unsafeCSS(`var(--m3e-app-bar-small-title-text-font-size, ${DesignToken.typescale.standard.title.large.fontSize})`),
+        titleTextFontWeight: unsafeCSS(`var(--m3e-app-bar-small-title-text-font-weight, ${DesignToken.typescale.standard.title.large.fontWeight})`),
+        titleTextLineHeight: unsafeCSS(`var(--m3e-app-bar-small-title-text-line-height, ${DesignToken.typescale.standard.title.large.lineHeight})`),
+        titleTextTracking: unsafeCSS(`var(--m3e-app-bar-small-subtitle-text-tracking, ${DesignToken.typescale.standard.title.large.tracking})`),
+        subtitleTextFontSize: unsafeCSS(`var(--m3e-app-bar-small-subtitle-text-font-size, ${DesignToken.typescale.standard.label.medium.fontSize})`),
+        subtitleTextFontWeight: unsafeCSS(`var(--m3e-app-bar-small-subtitle-text-font-weight, ${DesignToken.typescale.standard.label.medium.fontWeight})`),
+        subtitleTextLineHeight: unsafeCSS(`var(--m3e-app-bar-small-subtitle-text-line-height, ${DesignToken.typescale.standard.label.medium.lineHeight})`),
+        subtitleTextTracking: unsafeCSS(`var(--m3e-app-bar-small-subtitle-text-tracking, ${DesignToken.typescale.standard.label.medium.tracking})`),
+        headingPaddingLeft: unsafeCSS(`var(--m3e-app-bar-small-heading-padding-left, 0.25rem)`),
+        headingPaddingRight: unsafeCSS(`var(--m3e-app-bar-small-heading-padding-right, 0.25rem)`),
+    },
+    medium: {
+        containerHeight: unsafeCSS(`var(--m3e-app-bar-medium-container-height, 7rem)`),
+        containerHeightWithSubtitle: unsafeCSS(`var(--m3e-app-bar-medium-container-height-with-subtitle, 8.5rem)`),
+        titleTextFontSize: unsafeCSS(`var(--m3e-app-bar-medium-title-text-font-size, ${DesignToken.typescale.standard.headline.medium.fontSize})`),
+        titleTextFontWeight: unsafeCSS(`var(--m3e-app-bar-medium-title-text-font-weight, ${DesignToken.typescale.standard.headline.medium.fontWeight})`),
+        titleTextLineHeight: unsafeCSS(`var(--m3e-app-bar-medium-title-text-line-height, ${DesignToken.typescale.standard.headline.medium.lineHeight})`),
+        titleTextTracking: unsafeCSS(`var(--m3e-app-bar-medium-subtitle-text-tracking, ${DesignToken.typescale.standard.headline.medium.tracking})`),
+        subtitleTextFontSize: unsafeCSS(`var(--m3e-app-bar-medium-subtitle-text-font-size, ${DesignToken.typescale.standard.title.small.fontSize})`),
+        subtitleTextFontWeight: unsafeCSS(`var(--m3e-app-bar-medium-subtitle-text-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight})`),
+        subtitleTextLineHeight: unsafeCSS(`var(--m3e-app-bar-medium-subtitle-text-line-height, ${DesignToken.typescale.standard.title.small.lineHeight})`),
+        subtitleTextTracking: unsafeCSS(`var(--m3e-app-bar-medium-subtitle-text-tracking, ${DesignToken.typescale.standard.title.small.tracking})`),
+        headingPaddingLeft: unsafeCSS(`var(--m3e-app-bar-medium-heading-padding-left, 1rem)`),
+        headingPaddingRight: unsafeCSS(`var(--m3e-app-bar-medium-heading-padding-right, 0.25rem)`),
+        paddingTop: unsafeCSS(`var(--m3e-app-bar-medium-padding-top, 0.5rem)`),
+        paddingBottom: unsafeCSS(`var(--m3e-app-bar-medium-padding-bottom, 0.75rem)`),
+        titleMaxLines: unsafeCSS(`var(--m3e-app-bar-medium-title-max-lines, 2)`),
+        subtitleMaxLines: unsafeCSS(`var(--m3e-app-bar-medium-subtitle-max-lines, 1)`),
+    },
+    large: {
+        containerHeight: unsafeCSS(`var(--m3e-app-bar-large-container-height, 7.5rem)`),
+        containerHeightWithSubtitle: unsafeCSS(`var(--m3e-app-bar-large-container-height-with-subtitle, 9.5rem)`),
+        titleTextFontSize: unsafeCSS(`var(--m3e-app-bar-large-title-text-font-size, ${DesignToken.typescale.standard.display.small.fontSize})`),
+        titleTextFontWeight: unsafeCSS(`var(--m3e-app-bar-large-title-text-font-weight, ${DesignToken.typescale.standard.display.small.fontWeight})`),
+        titleTextLineHeight: unsafeCSS(`var(--m3e-app-bar-large-title-text-line-height, ${DesignToken.typescale.standard.display.small.lineHeight})`),
+        titleTextTracking: unsafeCSS(`var(--m3e-app-bar-large-subtitle-text-tracking, ${DesignToken.typescale.standard.display.small.tracking})`),
+        subtitleTextFontSize: unsafeCSS(`var(--m3e-app-bar-large-subtitle-text-font-size, ${DesignToken.typescale.standard.title.medium.fontSize})`),
+        subtitleTextFontWeight: unsafeCSS(`var(--m3e-app-bar-large-subtitle-text-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight})`),
+        subtitleTextLineHeight: unsafeCSS(`var(--m3e-app-bar-large-subtitle-text-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight})`),
+        subtitleTextTracking: unsafeCSS(`var(--m3e-app-bar-large-subtitle-text-tracking, ${DesignToken.typescale.standard.title.medium.tracking})`),
+        headingPaddingLeft: unsafeCSS(`var(--m3e-app-bar-large-heading-padding-left, 1rem)`),
+        headingPaddingRight: unsafeCSS(`var(--m3e-app-bar-large-heading-padding-right, 0.25rem)`),
+        paddingTop: unsafeCSS(`var(--m3e-app-bar-large-padding-top, 0.5rem)`),
+        paddingBottom: unsafeCSS(`var(--m3e-app-bar-large-padding-bottom, 0.75rem)`),
+        titleMaxLines: unsafeCSS(`var(--m3e-app-bar-large-title-max-lines, 2)`),
+        subtitleMaxLines: unsafeCSS(`var(--m3e-app-bar-large-subtitle-max-lines, 1)`),
+    },
+};
+
+/** @private */
+function appBarStyle(size) {
+    return css `
+    :host([size="${unsafeCSS(size)}"]) .base:not(.-with-subtitle) {
+      min-height: ${AppBarSizeToken[size].containerHeight};
+    }
+    :host([size="${unsafeCSS(size)}"]) .base.-with-subtitle {
+      min-height: ${AppBarSizeToken[size].containerHeightWithSubtitle ?? AppBarSizeToken[size].containerHeight};
+    }
+    :host([size="${unsafeCSS(size)}"]) .title {
+      font-size: ${AppBarSizeToken[size].titleTextFontSize};
+      font-weight: ${AppBarSizeToken[size].titleTextFontWeight};
+      line-height: ${AppBarSizeToken[size].titleTextLineHeight};
+      letter-spacing: ${AppBarSizeToken[size].titleTextTracking};
+    }
+    :host([size="${unsafeCSS(size)}"]) .subtitle {
+      font-size: ${AppBarSizeToken[size].subtitleTextFontSize};
+      font-weight: ${AppBarSizeToken[size].subtitleTextFontWeight};
+      line-height: ${AppBarSizeToken[size].subtitleTextLineHeight};
+      letter-spacing: ${AppBarSizeToken[size].subtitleTextTracking};
+    }
+    :host(:not([centered])[size="${unsafeCSS(size)}"]) .label {
+      padding-inline-start: ${AppBarSizeToken[size].headingPaddingLeft};
+      padding-inline-end: ${AppBarSizeToken[size].headingPaddingRight};
+    }
+    :host([centered][size="${unsafeCSS(size)}"]) .label {
+      padding-inline: ${AppBarSizeToken[size].headingPaddingLeft};
+    }
+    :host([size="${unsafeCSS(size)}"]) .base {
+      padding-block-start: ${AppBarSizeToken[size].paddingTop ?? unsafeCSS("unset")};
+      padding-block-end: ${AppBarSizeToken[size].paddingBottom ?? unsafeCSS("unset")};
+    }
+    ${AppBarSizeToken[size].titleMaxLines
+        ? css `
+          :host([size="${unsafeCSS(size)}"]) .title {
+            display: -webkit-box;
+            -webkit-line-clamp: ${AppBarSizeToken[size].titleMaxLines};
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            line-clamp: ${AppBarSizeToken[size].titleMaxLines};
+          }
+        `
+        : css ``}
+    ${AppBarSizeToken[size].subtitleMaxLines
+        ? css `
+          :host([size="${unsafeCSS(size)}"]) .subtitle {
+            display: -webkit-box;
+            -webkit-line-clamp: ${AppBarSizeToken[size].subtitleMaxLines};
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            line-clamp: ${AppBarSizeToken[size].subtitleMaxLines};
+          }
+        `
+        : css ``}
+  `;
+}
+/**
+ * Size variant styles for `M3eAppBarElement`.
+ * @internal
+ */
+const AppBarSizeStyle = [appBarStyle("small"), appBarStyle("medium"), appBarStyle("large")];
+
+/**
+ * Component design tokens that control `M3eAppBarElement`.
+ * @internal
+ */
+const AppBarToken = {
+    containerColor: unsafeCSS(`var(--m3e-app-bar-container-color, ${DesignToken.color.surface})`),
+    containerColorOnScroll: unsafeCSS(`var(--m3e-app-bar-container-color-on-scroll, ${DesignToken.color.surfaceContainer})`),
+    containerElevation: unsafeCSS(`var(--m3e-app-bar-container-elevation, ${DesignToken.elevation.level0})`),
+    containerElevationOnScroll: unsafeCSS(`var(--m3e-app-bar-container-elevation-on-scroll, ${DesignToken.elevation.level1})`),
+    titleTextColor: unsafeCSS(`var(--m3e-app-bar-title-text-color, ${DesignToken.color.onSurface})`),
+    subtitleTextColor: unsafeCSS(`var(--m3e-app-bar-subtitle-text-color, ${DesignToken.color.onSurfaceVariant})`),
+    paddingLeft: unsafeCSS(`var(--m3e-app-bar-padding-left, 0.25rem)`),
+    paddingRight: unsafeCSS(`var(--m3e-app-bar-padding-right, 0.25rem)`),
+};
+
+/**
+ * Baseline styles for `M3eAppBarElement`.
+ * @internal
+ */
+const AppBarStyle = css `
+  :host {
+    display: block;
+    flex: none;
+  }
+  :host([size="small"]) .base,
+  :host(:not([size="small"]):not([centered])) .heading {
+    padding-inline-start: ${AppBarToken.paddingLeft};
+    padding-inline-end: ${AppBarToken.paddingRight};
+  }
+  .base {
+    box-sizing: border-box;
+    display: flex;
+    transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.medium1} ${DesignToken.motion.easing.standard},
+      box-shadow ${DesignToken.motion.duration.medium1} ${DesignToken.motion.easing.standard}`)};
+  }
+  .base:not(.-on-scroll) {
+    background-color: ${AppBarToken.containerColor};
+    box-shadow: ${AppBarToken.containerElevation};
+  }
+  .base.-on-scroll {
+    background-color: ${AppBarToken.containerColorOnScroll};
+    box-shadow: ${AppBarToken.containerElevationOnScroll};
+  }
+  .leading-icon,
+  .trailing-icon {
+    display: flex;
+    flex: none;
+    align-items: center;
+  }
+  .leading-icon {
+    min-width: var(--_leading-icon-min-width);
+  }
+  .trailing-icon {
+    min-width: var(--_trailing-icon-min-width);
+  }
+  .heading {
+    display: flex;
+    align-items: center;
+  }
+  :host([size="small"]) .heading {
+    flex: 1 1 auto;
+  }
+  .spacer {
+    flex: 1 1 auto;
+  }
+  .label {
+    display: flex;
+    flex-direction: column;
+    flex: none;
+  }
+  .title {
+    color: ${AppBarToken.titleTextColor};
+  }
+  .subtitle {
+    color: ${AppBarToken.subtitleTextColor};
+  }
+  .base:not(.-with-title) .title,
+  .base:not(.-with-subtitle) .subtitle,
+  .base:not(.-with-title):not(.-with-subtitle) .label,
+  .base:not(.-with-trailing-icon) .trailing-icon {
+    display: none;
+  }
+  :host([size="small"]) .base {
+    align-items: center;
+  }
+  :host([size="small"]) .heading {
+    min-width: 0;
+  }
+  :host([size="small"]) .label {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  :host([size="small"]) .title,
+  :host([size="small"]) .subtitle {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  :host(:not([size="small"])) .base {
+    flex-direction: column;
+  }
+  :host([centered]) .title,
+  :host([centered]) .subtitle {
+    text-align: center;
+  }
+  @media (prefers-reduced-motion) {
+    .base {
+      transition: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .base {
+      transition: none;
+    }
+    .base:not(.-on-scroll),
+    .base.-on-scroll {
+      background-color: Canvas;
+      box-shadow: unset;
+    }
+    .title {
+      color: CanvasText;
+    }
+    .subtitle {
+      color: FieldText;
+    }
+  }
+`;
+
+var _M3eAppBarElement_instances, _M3eAppBarElement_scrollHandler, _M3eAppBarElement_frameLoadHandler, _M3eAppBarElement_handleTitleSlotChange, _M3eAppBarElement_handleSubtitleSlotChange, _M3eAppBarElement_handleLeadingIconSlotChange, _M3eAppBarElement_handleTrailingIconsSlotChange, _M3eAppBarElement_clearCentered, _M3eAppBarElement_computeCentered, _M3eAppBarElement_handleFrameLoad, _M3eAppBarElement_getFrameScrollTop;
+/**
+ * A bar, placed a the top of a screen, used to help users navigate through an application.
+ *
+ * @description
+ * The `m3e-app-bar` component is a prominent user interface component that provides consistent
+ * access to key actions, navigation, and contextual information at the top of an application screen.
+ * Designed according to Material 3 principles, it organizes content with clear hierarchy, supports
+ * dynamic color, elevation, and shape, and adapts to scrolling behavior.
+ *
+ * @example
+ * ```html
+ * <m3e-app-bar size="medium">
+ *  <m3e-icon-button slot="leading-icon" aria-label="Back">
+ *    <m3e-icon name="arrow_back"></m3e-icon>
+ *  </m3e-icon-button>
+ *  <span slot="title">Top 10 hiking trails</span>
+ *  <span slot="subtitle">Discover popular trails</span>
+ *  <m3e-icon-button slot="trailing-icon" aria-label="Bookmark" variant="tonal">
+ *    <m3e-icon name="bookmark" filled></m3e-icon>
+ *  </m3e-icon-button>
+ * <m3e-app-bar>
+ * ```
+ * @example
+ * The next example illustrates how to attach an app bar to a parenting scroll container
+ * to produce elevation on scroll. In this example, the `for` attribute is used to attach a
+ * sticky positioned `m3e-app-bar` to a parenting container styled to overflow vertically.
+ * When scrolled, the app bar will automatically transition to an elevated state.
+ * ```html
+ * <div style="overflow-y: auto; height: 300px" id="scrollContainer">
+ *  <m3e-app-bar for="scrollContainer" style="position: sticky; top: 0">
+ *    <span slot="title">Title</span>
+ *  </m3e-app-bar>
+ *  <div style="height: 400px; display: flex; align-items: center; justify-content: center">
+ *    I am scrolling content
+ *  </div>
+ * </div>
+ * ```
+ *
+ * @tag m3e-app-bar
+ *
+ * @slot leading-icon - Renders a leading icon.
+ * @slot subtitle - Renders the subtitle.
+ * @slot title - Renders the title.
+ * @slot trailing-icon - Renders a trailing icon.
+ *
+ * @attr centered - Whether the title and subtitle are centered.
+ * @attr for - The identifier of the interactive control to which this element is attached.
+ * @attr size - The size of the bar.
+ *
+ * @cssprop --m3e-app-bar-container-color - Background color of the app bar container.
+ * @cssprop --m3e-app-bar-container-color-on-scroll - Background color of the app bar container when scrolled.
+ * @cssprop --m3e-app-bar-container-elevation - Elevation (shadow) of the app bar container.
+ * @cssprop --m3e-app-bar-container-elevation-on-scroll - Elevation (shadow) of the app bar container when scrolled.
+ * @cssprop --m3e-app-bar-title-text-color - Color of the app bar title text.
+ * @cssprop --m3e-app-bar-subtitle-text-color - Color of the app bar subtitle text.
+ * @cssprop --m3e-app-bar-padding-left - Left padding for the app bar container.
+ * @cssprop --m3e-app-bar-padding-right - Right padding for the app bar container.
+ * @cssprop --m3e-app-bar-small-container-height - Height of the small app bar container.
+ * @cssprop --m3e-app-bar-small-title-text-font-size - Font size for the small app bar title text.
+ * @cssprop --m3e-app-bar-small-title-text-font-weight - Font weight for the small app bar title text.
+ * @cssprop --m3e-app-bar-small-title-text-line-height - Line height for the small app bar title text.
+ * @cssprop --m3e-app-bar-small-subtitle-text-tracking - Letter spacing (tracking) for the small app bar title text.
+ * @cssprop --m3e-app-bar-small-subtitle-text-font-size - Font size for the small app bar subtitle text.
+ * @cssprop --m3e-app-bar-small-subtitle-text-font-weight - Font weight for the small app bar subtitle text.
+ * @cssprop --m3e-app-bar-small-subtitle-text-line-height - Line height for the small app bar subtitle text.
+ * @cssprop --m3e-app-bar-small-subtitle-text-tracking - Letter spacing (tracking) for the small app bar subtitle text.
+ * @cssprop --m3e-app-bar-small-heading-padding-left - Left padding for the small app bar heading.
+ * @cssprop --m3e-app-bar-small-heading-padding-right - Right padding for the small app bar heading.
+ * @cssprop --m3e-app-bar-medium-container-height - Height of the medium app bar container.
+ * @cssprop --m3e-app-bar-medium-container-height-with-subtitle - Height of the medium app bar container with subtitle.
+ * @cssprop --m3e-app-bar-medium-title-text-font-size - Font size for the medium app bar title text.
+ * @cssprop --m3e-app-bar-medium-title-text-font-weight - Font weight for the medium app bar title text.
+ * @cssprop --m3e-app-bar-medium-title-text-line-height - Line height for the medium app bar title text.
+ * @cssprop --m3e-app-bar-medium-subtitle-text-tracking - Letter spacing (tracking) for the medium app bar title text.
+ * @cssprop --m3e-app-bar-medium-subtitle-text-font-size - Font size for the medium app bar subtitle text.
+ * @cssprop --m3e-app-bar-medium-subtitle-text-font-weight - Font weight for the medium app bar subtitle text.
+ * @cssprop --m3e-app-bar-medium-subtitle-text-line-height - Line height for the medium app bar subtitle text.
+ * @cssprop --m3e-app-bar-medium-subtitle-text-tracking - Letter spacing (tracking) for the medium app bar subtitle text.
+ * @cssprop --m3e-app-bar-medium-heading-padding-left - Left padding for the medium app bar heading.
+ * @cssprop --m3e-app-bar-medium-heading-padding-right - Right padding for the medium app bar heading.
+ * @cssprop --m3e-app-bar-medium-padding-top - Top padding for the medium app bar.
+ * @cssprop --m3e-app-bar-medium-padding-bottom - Bottom padding for the medium app bar.
+ * @cssprop --m3e-app-bar-medium-title-max-lines - Maximum number of lines for the medium app bar title.
+ * @cssprop --m3e-app-bar-medium-subtitle-max-lines - Maximum number of lines for the medium app bar subtitle.
+ * @cssprop --m3e-app-bar-large-container-height - Height of the large app bar container.
+ * @cssprop --m3e-app-bar-large-container-height-with-subtitle - Height of the large app bar container with subtitle.
+ * @cssprop --m3e-app-bar-large-title-text-font-size - Font size for the large app bar title text.
+ * @cssprop --m3e-app-bar-large-title-text-font-weight - Font weight for the large app bar title text.
+ * @cssprop --m3e-app-bar-large-title-text-line-height - Line height for the large app bar title text.
+ * @cssprop --m3e-app-bar-large-subtitle-text-tracking - Letter spacing (tracking) for the large app bar title text.
+ * @cssprop --m3e-app-bar-large-subtitle-text-font-size - Font size for the large app bar subtitle text.
+ * @cssprop --m3e-app-bar-large-subtitle-text-font-weight - Font weight for the large app bar subtitle text.
+ * @cssprop --m3e-app-bar-large-subtitle-text-line-height - Line height for the large app bar subtitle text.
+ * @cssprop --m3e-app-bar-large-subtitle-text-tracking - Letter spacing (tracking) for the large app bar subtitle text.
+ * @cssprop --m3e-app-bar-large-heading-padding-left - Left padding for the large app bar heading.
+ * @cssprop --m3e-app-bar-large-heading-padding-right - Right padding for the large app bar heading.
+ * @cssprop --m3e-app-bar-large-padding-top - Top padding for the large app bar.
+ * @cssprop --m3e-app-bar-large-padding-bottom - Bottom padding for the large app bar.
+ * @cssprop --m3e-app-bar-large-title-max-lines - Maximum number of lines for the large app bar title.
+ * @cssprop --m3e-app-bar-large-subtitle-max-lines - Maximum number of lines for the large app bar subtitle.
+ */
+let M3eAppBarElement = class M3eAppBarElement extends HtmlFor(Role(LitElement, "banner")) {
+    constructor() {
+        super(...arguments);
+        _M3eAppBarElement_instances.add(this);
+        /** @private */ _M3eAppBarElement_scrollHandler.set(this, (e) => this._updateScroll(e));
+        /** @private */ _M3eAppBarElement_frameLoadHandler.set(this, () => __classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleFrameLoad).call(this));
+        /**
+         * Whether the title and subtitle are centered.
+         * @default false
+         */
+        this.centered = false;
+        /**
+         * The size of the bar.
+         * @default "small"
+         */
+        this.size = "small";
+    }
+    /** @inheritdoc */
+    attach(control) {
+        super.attach(control);
+        if (control instanceof HTMLIFrameElement) {
+            control.addEventListener("load", __classPrivateFieldGet(this, _M3eAppBarElement_frameLoadHandler, "f"));
+            __classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleFrameLoad).call(this);
+        }
+        else {
+            control.addEventListener("scroll", __classPrivateFieldGet(this, _M3eAppBarElement_scrollHandler, "f"));
+        }
+    }
+    /** @inheritdoc */
+    detach() {
+        if (this.control instanceof HTMLIFrameElement) {
+            this.control.removeEventListener("load", __classPrivateFieldGet(this, _M3eAppBarElement_frameLoadHandler, "f"));
+            this.control.contentDocument?.removeEventListener("scroll", __classPrivateFieldGet(this, _M3eAppBarElement_scrollHandler, "f"));
+        }
+        if (this.control) {
+            this.control.removeEventListener("scroll", __classPrivateFieldGet(this, _M3eAppBarElement_scrollHandler, "f"));
+        }
+        super.detach();
+    }
+    /** @inheritdoc */
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has("centered") || _changedProperties.has("size")) {
+            if (this.centered && this.size === "small") {
+                __classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_computeCentered).call(this);
+            }
+            else {
+                __classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_clearCentered).call(this);
+            }
+        }
+    }
+    /** @inheritdoc */
+    render() {
+        switch (this.size) {
+            case "small":
+                return html `<div class="base">
+          <div class="leading-icon">
+            <slot name="leading-icon" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleLeadingIconSlotChange)}"></slot>
+          </div>
+          <div class="heading">
+            <div class="label">
+              <div class="title">
+                <slot name="title" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleTitleSlotChange)}"></slot>
+              </div>
+              <div class="subtitle">
+                <slot name="subtitle" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleSubtitleSlotChange)}"></slot>
+              </div>
+            </div>
+          </div>
+          <div class="trailing-icon">
+            <slot name="trailing-icon" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleTrailingIconsSlotChange)}"></slot>
+          </div>
+        </div>`;
+            default:
+                return html `<div class="base">
+          <div class="heading">
+            <div class="leading-icon">
+              <slot name="leading-icon" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleLeadingIconSlotChange)}"></slot>
+            </div>
+            <div class="spacer"></div>
+            <div class="trailing-icon">
+              <slot name="trailing-icon" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleTrailingIconsSlotChange)}"></slot>
+            </div>
+          </div>
+          <div class="spacer"></div>
+          <div class="label">
+            <div class="title">
+              <slot name="title" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleTitleSlotChange)}"></slot>
+            </div>
+            <div class="subtitle">
+              <slot name="subtitle" @slotchange="${__classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_handleSubtitleSlotChange)}"></slot>
+            </div>
+          </div>
+        </div>`;
+        }
+    }
+    /** @private */
+    _updateScroll(e) {
+        let scrollTop = 0;
+        if (this.control instanceof HTMLIFrameElement) {
+            scrollTop = __classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_getFrameScrollTop).call(this, this.control);
+        }
+        else if (e.target instanceof HTMLElement) {
+            scrollTop = e.target.scrollTop;
+        }
+        this._base?.classList.toggle("-on-scroll", scrollTop > 0);
+    }
+};
+_M3eAppBarElement_scrollHandler = new WeakMap();
+_M3eAppBarElement_frameLoadHandler = new WeakMap();
+_M3eAppBarElement_instances = new WeakSet();
+_M3eAppBarElement_handleTitleSlotChange = function _M3eAppBarElement_handleTitleSlotChange(e) {
+    this._base?.classList.toggle("-with-title", hasAssignedNodes(e.target));
+};
+_M3eAppBarElement_handleSubtitleSlotChange = function _M3eAppBarElement_handleSubtitleSlotChange(e) {
+    this._base?.classList.toggle("-with-subtitle", hasAssignedNodes(e.target));
+};
+_M3eAppBarElement_handleLeadingIconSlotChange = function _M3eAppBarElement_handleLeadingIconSlotChange(e) {
+    this._base?.classList.toggle("-with-leading-icon", hasAssignedNodes(e.target));
+    if (this.centered && this.size === "small") {
+        setTimeout(() => __classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_computeCentered).call(this), 40);
+    }
+};
+_M3eAppBarElement_handleTrailingIconsSlotChange = function _M3eAppBarElement_handleTrailingIconsSlotChange(e) {
+    this._base?.classList.toggle("-with-trailing-icon", hasAssignedNodes(e.target));
+    if (this.centered && this.size === "small") {
+        setTimeout(() => __classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_computeCentered).call(this), 40);
+    }
+};
+_M3eAppBarElement_clearCentered = function _M3eAppBarElement_clearCentered() {
+    this._base?.style.removeProperty("--_leading-icon-min-width");
+    this._base?.style.removeProperty("--_trailing-icon-min-width");
+};
+_M3eAppBarElement_computeCentered = function _M3eAppBarElement_computeCentered() {
+    __classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_clearCentered).call(this);
+    const leadingWidth = this._leadingIcon?.getBoundingClientRect().width ?? 0;
+    const trailingWidth = this._trailingIcon?.getBoundingClientRect().width ?? 0;
+    if (leadingWidth < trailingWidth) {
+        this._base?.style.setProperty("--_leading-icon-min-width", `${trailingWidth}px`);
+    }
+    else if (leadingWidth > trailingWidth) {
+        this._base?.style.setProperty("--_trailing-icon-min-width", `${leadingWidth}px`);
+    }
+};
+_M3eAppBarElement_handleFrameLoad = function _M3eAppBarElement_handleFrameLoad() {
+    if (this.control instanceof HTMLIFrameElement) {
+        this.control.contentDocument?.addEventListener("scroll", __classPrivateFieldGet(this, _M3eAppBarElement_scrollHandler, "f"));
+        this._base?.classList.toggle("-on-scroll", __classPrivateFieldGet(this, _M3eAppBarElement_instances, "m", _M3eAppBarElement_getFrameScrollTop).call(this, this.control) > 0);
+    }
+};
+_M3eAppBarElement_getFrameScrollTop = function _M3eAppBarElement_getFrameScrollTop(frame) {
+    // Both document element (<html>) and body are tested for scroll top, taking the maximum.
+    return Math.max(frame.contentDocument?.documentElement?.scrollTop ?? 0, frame.contentDocument?.body?.scrollTop ?? 0);
+};
+/** The styles of the element. */
+M3eAppBarElement.styles = [AppBarStyle, AppBarSizeStyle];
+__decorate([
+    e(".base")
+], M3eAppBarElement.prototype, "_base", void 0);
+__decorate([
+    e(".leading-icon")
+], M3eAppBarElement.prototype, "_leadingIcon", void 0);
+__decorate([
+    e(".trailing-icon")
+], M3eAppBarElement.prototype, "_trailingIcon", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], M3eAppBarElement.prototype, "centered", void 0);
+__decorate([
+    n({ reflect: true })
+], M3eAppBarElement.prototype, "size", void 0);
+__decorate([
+    debounce(40)
+], M3eAppBarElement.prototype, "_updateScroll", null);
+M3eAppBarElement = __decorate([
+    t$1("m3e-app-bar")
+], M3eAppBarElement);
+
+export { M3eAppBarElement };
+//# sourceMappingURL=index.js.map