@vandeurenglenn/lite-elements 0.3.34 → 0.3.36

package/exports/dialog.js

@@ -215,14 +215,14 @@ let CustomDialog = (() => {
         <custom-elevation level=${this.fullscreen ? 0 : 3}></custom-elevation>
         <slot name="hero-icon"></slot>
         <slot name="supporting-text"></slot>
-        <slot name="header">          
-          <flex-row class="header" center></flex-row>
+        <slot name="header">
+          <flex-row class="header" center>
             <flex-row center style="width: 100%">
               <slot name="header-start">
                 ${this.fullscreen
                 ? html `<custom-button @click=${this._close}
-                        ><custom-icon slot="icon">close</custom-icon></custom-button
-                      >`
+                      ><custom-icon slot="icon">close</custom-icon></custom-button
+                    >`
                 : ''}
               </slot>
               <slot name="title"></slot>
@@ -232,8 +232,8 @@ let CustomDialog = (() => {
                 ${this.fullscreen
                 ? ''
                 : html `<custom-button @click=${this._close}
-                        ><custom-icon slot="icon">close</custom-icon></custom-button
-                      >`}
+                      ><custom-icon slot="icon">close</custom-icon></custom-button
+                    >`}
               </slot>
             </flex-row>
           </flex-row>

package/exports/drawer/drawer-button.d.ts

@@ -1,6 +1,5 @@
 import { LiteElement } from '@vandeurenglenn/lite';
-import '../icon/icon.js';
-import '../button/button.js';
+import '../button/icon-button.js';
 export declare class CustomDrawerButton extends LiteElement {
     accessor mobile: boolean;
     accessor drawerOpen: boolean;

package/exports/drawer-button.js

@@ -1,9 +1,10 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.js';
 import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
-import './icon.js';
+import './icon-button.js';
 import './button.js';
-import '@vandeurenglenn/little-pubsub';
 import './elevation.js';
+import './icon.js';
+import '@vandeurenglenn/little-pubsub';
 
 let CustomDrawerButton = (() => {
     let _classDecorators = [customElement('custom-drawer-button')];
@@ -63,11 +64,7 @@ let CustomDrawerButton = (() => {
     `
         ];
         render() {
-            return html `
-      <custom-button @click=${() => this.openPane()}>
-        <custom-icon slot="icon">menu</custom-icon>
-      </custom-button>
-    `;
+            return html ` <custom-icon-button @click=${() => this.openPane()} icon="menu"> </custom-icon-button> `;
         }
         constructor() {
             super(...arguments);

package/exports/drawer-layout.js

@@ -8,6 +8,7 @@ import '@vandeurenglenn/flex-elements/column.js';
 import './elevation.js';
 import './button.js';
 import './pane.js';
+import './icon-button.js';
 import './icon.js';
 import '@vandeurenglenn/little-pubsub';
 import '@vandeurenglenn/flex-elements/it.js';

package/exports/drawer.js

@@ -3,6 +3,7 @@ import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite
 import './elevation.js';
 import './button.js';
 import './pane.js';
+import './icon-button.js';
 import './icon.js';
 import '@vandeurenglenn/little-pubsub';
 

package/exports/dropdown-menu.js

@@ -151,7 +151,7 @@ let CustomDropdownMenu = (() => {
       <span class="scrim" @click=${this._scrimClick}></span>
 
       <custom-button part="button" @click=${() => (this.open = !this.open)}>
-        <custom-icon slot="icon" icon=${this.icon}>more_vert</custom-icon>
+        <custom-icon slot="icon" .icon=${this.icon}></custom-icon>
       </custom-button>
 
       <custom-dropdown part="dropdown" .open=${this.open} ?right=${this.right} ?bottom=${this.bottom}>

package/exports/fab/fab.d.ts

@@ -0,0 +1,7 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+import '../elevation/elevation.js';
+export declare class CustomButton extends LiteElement {
+    accessor type: 'normal' | 'extended';
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/fab.js

@@ -0,0 +1,189 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.js';
+import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import './elevation.js';
+
+let CustomButton = (() => {
+    let _classDecorators = [customElement('custom-fab')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    let _type_decorators;
+    let _type_initializers = [];
+    let _type_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _type_decorators = [property({ attribute: 'type', reflect: true })];
+            __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #type_accessor_storage = __runInitializers(this, _type_initializers, 'normal');
+        get type() { return this.#type_accessor_storage; }
+        set type(value) { this.#type_accessor_storage = value; }
+        static styles = [
+            css `
+      :host {
+        color: var(--custom-fab-color, --md-sys-color-on-background);
+        display: flex;
+
+        height: 56px;
+        width: 56px;
+        border-radius: var(--md-sys-shape-corner-extra-large);
+        position: relative;
+        pointer-events: auto;
+        cursor: pointer;
+        box-sizing: border-box;
+        padding: 16px;
+
+        --elevation-level: 0;
+      }
+
+      button {
+        box-sizing: border-box;
+        border: none;
+        background: transparent;
+        color: inherit;
+        align-items: center;
+        justify-content: center;
+        user-select: none;
+        outline: none;
+        cursor: pointer;
+        border-radius: inherit;
+        padding: none;
+        width: inherit;
+        height: inherit;
+        display: flex;
+        pointer-events: none;
+      }
+
+      ::slotted(*) {
+        font-family: var(--md-sys-typescale-label-large-font-family-name);
+        font-style: var(--md-sys-typescale-label-large-font-family-style);
+        font-weight: var(--md-sys-typescale-label-large-font-weight);
+        font-size: var(--md-sys-typescale-label-large-font-size);
+        letter-spacing: var(--md-sys-typescale-label-large-tracking);
+        line-height: var(--md-sys-typescale-label-large-height);
+        text-transform: var(--md-sys-typescale-label-large-text-transform);
+        text-decoration: var(--md-sys-typescale-label-large-text-decoration);
+      }
+
+      :host([type='filled']),
+      :host([type='filled']) ::slotted(*) {
+        color: var(--md-sys-color-on-primary);
+        fill: var(--md-sys-color-on-primary);
+        background: var(--md-sys-color-primary);
+      }
+
+      :host([type='outlined']),
+      :host([type='outlined']) ::slotted(*) {
+        color: var(--md-sys-color-on-surface);
+        fill: var(--md-sys-color-on-surface);
+        background: var(--md-sys-color-surface);
+        border: solid 1px;
+        border-color: var(--md-sys-color-outline);
+      }
+
+      :host([type='elevated']),
+      :host([type='elevated']) ::slotted(*) {
+        color: var(--md-sys-color-primary);
+        fill: var(--md-sys-color-primary);
+        background: var(--md-sys-color-surface-container-low);
+      }
+
+      :host([type='tertiary']),
+      :host([type='tertiary']) ::slotted(*) {
+        background: var(--md-sys-color-tertiary);
+        color: var(--md-sys-color-on-tertiary);
+        fill: var(--md-sys-color-on-tertiary);
+      }
+
+      :host([type='tonal']),
+      :host([type='tonal']) ::slotted(*) {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-seconday-container);
+        fill: var(--md-sys-color-on-seconday-container);
+      }
+
+      custom-elevation {
+        --md-elevation-level: var(--elevation-level);
+      }
+
+      custom-elevation {
+        --elevation-level: 1;
+      }
+
+      :host([type='normal']) button {
+        align-items: center;
+        justify-content: center;
+      }
+
+      :host([type='extended']) button {
+        align-items: center;
+      }
+
+      :host([type='extended']) {
+        min-width: 80px;
+        width: fit-content;
+      }
+
+      :not([name='icon']) ::slotted(*) {
+        margin-left: 24px;
+        margin-right: 24px;
+      }
+
+      :host([has-icon][has-label]) .label {
+        padding-left: 8px;
+        padding-right: 24px;
+      }
+      :host([has-icon][has-label]) slot[name='icon']::slotted(*) {
+        padding-left: 16px;
+      }
+
+      :host([disabled]) .label,
+      :host([disabled]) slot[name='icon']::slotted(*) {
+        opacity: 0.38;
+      }
+
+      ::slotted(*) {
+        pointer-events: none;
+      }
+
+      :host(:focus),
+      :host(:hover) {
+        --elevation-level: 2;
+      }
+
+      :host(:active) {
+        --elevation-level: 0;
+      }
+
+      button * {
+        pointer-events: none;
+      }
+    `
+        ];
+        render() {
+            return html `
+      <button>
+        <custom-elevation></custom-elevation>
+        <slot name="icon"></slot>
+        <slot></slot>
+      </button>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _type_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomButton };

package/exports/icon/icon.d.ts

@@ -1,7 +1,7 @@
 import { LiteElement } from '@vandeurenglenn/lite';
 export declare class CustomIcon extends LiteElement {
     accessor host: any;
-    accessor icon: string;
+    accessor icon: any;
     accessor setName: any;
     accessor _icon: any;
     onChange(propertyKey: any, value: any): void;

package/exports/icon.js

@@ -26,7 +26,7 @@ let CustomIcon = (() => {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _host_decorators = [property()];
-            _icon_decorators = [property({ attribute: 'icon' })];
+            _icon_decorators = [property({ attribute: true, reflect: true })];
             _setName_decorators = [property()];
             __icon_decorators = [property()];
             __esDecorate(this, null, _host_decorators, { kind: "accessor", name: "host", static: false, private: false, access: { has: obj => "host" in obj, get: obj => obj.host, set: (obj, value) => { obj.host = value; } }, metadata: _metadata }, _host_initializers, _host_extraInitializers);
@@ -40,7 +40,7 @@ let CustomIcon = (() => {
         #host_accessor_storage = __runInitializers(this, _host_initializers, void 0);
         get host() { return this.#host_accessor_storage; }
         set host(value) { this.#host_accessor_storage = value; }
-        #icon_accessor_storage = (__runInitializers(this, _host_extraInitializers), __runInitializers(this, _icon_initializers, this.innerHTML));
+        #icon_accessor_storage = (__runInitializers(this, _host_extraInitializers), __runInitializers(this, _icon_initializers, void 0));
         get icon() { return this.#icon_accessor_storage; }
         set icon(value) { this.#icon_accessor_storage = value; }
         #setName_accessor_storage = (__runInitializers(this, _icon_extraInitializers), __runInitializers(this, _setName_initializers, void 0));

package/exports/notifications.js

@@ -9,6 +9,7 @@ import 'lit/decorators.js';
 import '@vandeurenglenn/flex-elements/column.js';
 import '@vandeurenglenn/little-pubsub';
 import './elevation.js';
+import './icon-button.js';
 import './button.js';
 
 let CustomNotifications = (() => {

package/exports/pane/pane.d.ts

@@ -1,6 +1,6 @@
 import { LiteElement } from '@vandeurenglenn/lite';
 import '../elevation/elevation.js';
-import '../button/button.js';
+import '../button/icon-button.js';
 import '../icon/icon.js';
 export declare class CustomPane extends LiteElement {
     accessor open: boolean;

package/exports/pane.js

@@ -1,8 +1,9 @@
 import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.js';
 import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite';
 import './elevation.js';
-import './button.js';
+import './icon-button.js';
 import './icon.js';
+import './button.js';
 import '@vandeurenglenn/little-pubsub';
 
 let CustomPane = (() => {
@@ -148,7 +149,7 @@ let CustomPane = (() => {
           height: 54px;
         }
 
-        :host([right]) custom-button {
+        :host([right]) custom-icon-button {
           transform: rotateZ(180deg);
         }
       </style>
@@ -158,9 +159,8 @@ let CustomPane = (() => {
           <flex-row center>
             <slot name="headline"></slot>
             <flex-it></flex-it>
-            <custom-button @click=${(e) => this.closePane(e)} .id=${this.id}>
-              <custom-icon slot="icon">menu_open</custom-icon>
-            </custom-button>
+            <custom-icon-button @click=${(e) => this.closePane(e)} .id=${this.id} icon="menu_open">
+            </custom-icon-button>
           </flex-row>
         </slot>
         <flex-column class="content">

package/exports/rail.js

@@ -2,6 +2,7 @@ import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.
 import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite';
 import './pane.js';
 import './elevation.js';
+import './icon-button.js';
 import './button.js';
 import './icon.js';
 import '@vandeurenglenn/little-pubsub';

package/exports/supporting-pane.js

@@ -2,6 +2,7 @@ import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.
 import { customElement, property, query, html, LiteElement } from '@vandeurenglenn/lite';
 import './pane.js';
 import './elevation.js';
+import './icon-button.js';
 import './button.js';
 import './icon.js';
 import '@vandeurenglenn/little-pubsub';

package/exports/theme/theme.d.ts

@@ -3,8 +3,9 @@ export declare class CustomTheme extends LiteElement {
     #private;
     accessor loadFont: boolean;
     accessor loadSymbols: boolean;
-    accessor narrowTrigger: string;
+    accessor mobileTrigger: string;
     accessor narrow: boolean;
+    onChange(propertyKey: string, value: any): void;
     connectedCallback(): void;
     set language(value: string);
     get language(): string;

package/exports/theme.js

@@ -14,9 +14,9 @@ let CustomTheme = (() => {
     let _loadSymbols_decorators;
     let _loadSymbols_initializers = [];
     let _loadSymbols_extraInitializers = [];
-    let _narrowTrigger_decorators;
-    let _narrowTrigger_initializers = [];
-    let _narrowTrigger_extraInitializers = [];
+    let _mobileTrigger_decorators;
+    let _mobileTrigger_initializers = [];
+    let _mobileTrigger_extraInitializers = [];
     let _narrow_decorators;
     let _narrow_initializers = [];
     let _narrow_extraInitializers = [];
@@ -26,27 +26,28 @@ let CustomTheme = (() => {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _loadFont_decorators = [property({ type: Boolean, attribute: 'load-font' })];
             _loadSymbols_decorators = [property({ type: Boolean, attribute: 'load-symbols' })];
-            _narrowTrigger_decorators = [property({ type: String, attribute: 'mobile-trigger' })];
+            _mobileTrigger_decorators = [property({ type: String, attribute: 'mobile-trigger' })];
             _narrow_decorators = [property({ type: Boolean })];
             __esDecorate(this, null, _loadFont_decorators, { kind: "accessor", name: "loadFont", static: false, private: false, access: { has: obj => "loadFont" in obj, get: obj => obj.loadFont, set: (obj, value) => { obj.loadFont = value; } }, metadata: _metadata }, _loadFont_initializers, _loadFont_extraInitializers);
             __esDecorate(this, null, _loadSymbols_decorators, { kind: "accessor", name: "loadSymbols", static: false, private: false, access: { has: obj => "loadSymbols" in obj, get: obj => obj.loadSymbols, set: (obj, value) => { obj.loadSymbols = value; } }, metadata: _metadata }, _loadSymbols_initializers, _loadSymbols_extraInitializers);
-            __esDecorate(this, null, _narrowTrigger_decorators, { kind: "accessor", name: "narrowTrigger", static: false, private: false, access: { has: obj => "narrowTrigger" in obj, get: obj => obj.narrowTrigger, set: (obj, value) => { obj.narrowTrigger = value; } }, metadata: _metadata }, _narrowTrigger_initializers, _narrowTrigger_extraInitializers);
+            __esDecorate(this, null, _mobileTrigger_decorators, { kind: "accessor", name: "mobileTrigger", static: false, private: false, access: { has: obj => "mobileTrigger" in obj, get: obj => obj.mobileTrigger, set: (obj, value) => { obj.mobileTrigger = value; } }, metadata: _metadata }, _mobileTrigger_initializers, _mobileTrigger_extraInitializers);
             __esDecorate(this, null, _narrow_decorators, { kind: "accessor", name: "narrow", static: false, private: false, access: { has: obj => "narrow" in obj, get: obj => obj.narrow, set: (obj, value) => { obj.narrow = value; } }, metadata: _metadata }, _narrow_initializers, _narrow_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
+        #mediaListener;
         #loadFont_accessor_storage = __runInitializers(this, _loadFont_initializers, true);
         get loadFont() { return this.#loadFont_accessor_storage; }
         set loadFont(value) { this.#loadFont_accessor_storage = value; }
         #loadSymbols_accessor_storage = (__runInitializers(this, _loadFont_extraInitializers), __runInitializers(this, _loadSymbols_initializers, true));
         get loadSymbols() { return this.#loadSymbols_accessor_storage; }
         set loadSymbols(value) { this.#loadSymbols_accessor_storage = value; }
-        #narrowTrigger_accessor_storage = (__runInitializers(this, _loadSymbols_extraInitializers), __runInitializers(this, _narrowTrigger_initializers, '(max-width: 860px)'));
-        get narrowTrigger() { return this.#narrowTrigger_accessor_storage; }
-        set narrowTrigger(value) { this.#narrowTrigger_accessor_storage = value; }
-        #narrow_accessor_storage = (__runInitializers(this, _narrowTrigger_extraInitializers), __runInitializers(this, _narrow_initializers, void 0));
+        #mobileTrigger_accessor_storage = (__runInitializers(this, _loadSymbols_extraInitializers), __runInitializers(this, _mobileTrigger_initializers, '(max-width: 860px)'));
+        get mobileTrigger() { return this.#mobileTrigger_accessor_storage; }
+        set mobileTrigger(value) { this.#mobileTrigger_accessor_storage = value; }
+        #narrow_accessor_storage = (__runInitializers(this, _mobileTrigger_extraInitializers), __runInitializers(this, _narrow_initializers, void 0));
         get narrow() { return this.#narrow_accessor_storage; }
         set narrow(value) { this.#narrow_accessor_storage = value; }
         #loadLink(href, rel, attributes) {
@@ -67,10 +68,17 @@ let CustomTheme = (() => {
             }
             return link;
         }
+        onChange(propertyKey, value) {
+            if (propertyKey === 'mobileTrigger') {
+                this.#setupMediaListener();
+            }
+        }
+        #setupMediaListener() {
+            this.#mediaListener = matchMedia(this.mobileTrigger);
+            this.#mediaListener.onchange = this.#mediaQueryChange;
+            this.#mediaQueryChange({ matches: this.#mediaListener.matches });
+        }
         connectedCallback() {
-            const media = matchMedia('(max-width: 860px)');
-            media.onchange = this.#mediaQueryChange;
-            this.#mediaQueryChange({ matches: media.matches });
             // this.load('./themes/default/tokens.js')
             this.load('./themes/default/theme.css');
             const style = document.createElement('style');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vandeurenglenn/lite-elements",
-	"version": "0.3.34",
+	"version": "0.3.36",
 	"description": "set of lite elements following Material Design 3 spec",
 	"type": "module",
 	"scripts": {
@@ -21,7 +21,7 @@
 		"@material-symbols/svg-400": "^0.17.0",
 		"@material/web": "^1.3.0",
 		"@vandeurenglenn/flex-elements": "^1.2.5",
-		"@vandeurenglenn/lite": "^0.2.33",
+		"@vandeurenglenn/lite": "^0.2.37",
 		"custom-element-decorator": "^0.6.0"
 	},
 	"devDependencies": {
@@ -209,6 +209,14 @@
 			"import": "./exports/elevation.js",
 			"types": "./exports/elevation/elevation.d.ts"
 		},
+		"./fab": {
+			"import": "./exports/fab.js",
+			"types": "./exports/fab/fab.d.ts"
+		},
+		"./fab.js": {
+			"import": "./exports/fab.js",
+			"types": "./exports/fab/fab.d.ts"
+		},
 		"./file-reader-mixin": {
 			"import": "./exports/file-reader-mixin.js",
 			"types": "./exports/mixins/file-reader-mixin.d.ts"

package/exports/bundle/index-B3uz3f8C.js

@@ -1 +0,0 @@
-class LittlePubSub{subscribers={};verbose;constructor(s){this.verbose=s}_handleContext(s,e){return void 0===e&&(e=s),e}hasSubscribers(s){return!!this.subscribers[s]}subscribe(s,e,r){this.hasSubscribers(s)||(this.subscribers[s]={handlers:[],value:void 0}),r=this._handleContext(e,r),this.subscribers[s].handlers.push(e.bind(r))}unsubscribe(s,e,r){if(!this.hasSubscribers(s))return;r=this._handleContext(e,r);const i=this.subscribers[s].handlers.indexOf(e.bind(r));this.subscribers[s].handlers.splice(i),0===this.subscribers[s].handlers.length&&delete this.subscribers[s]}publish(s,e,r){this.hasSubscribers(s)||(this.subscribers[s]={handlers:[]});const i=this.subscribers[s]?.value;if(this.verbose||r||i!==e){this.subscribers[s].value=e;for(const r of this.subscribers[s].handlers)r(e,i)}}publishVerbose(s,e){this.publish(s,e,!0)}once(s){return new Promise((e=>{const r=i=>{e(i),this.unsubscribe(s,r)};this.subscribe(s,r)}))}}export{LittlePubSub as L};

package/exports/bundle/property-Do5-bKhz.js

@@ -1,11 +0,0 @@
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t=globalThis,e=t.trustedTypes,s=e?e.createPolicy("lit-html",{createHTML:t=>t}):void 0,i="$lit$",r=`lit$${(Math.random()+"").slice(9)}$`,n="?"+r,o=`<${n}>`,h=document,l=()=>h.createComment(""),a=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u=Array.isArray,c="[ \t\n\f\r]",d=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,b=/-->/g,p=/>/g,$=RegExp(`>|${c}(?:([^\\s"'>=/]+)(${c}*=${c}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),_=/'/g,A=/"/g,g=/^(?:script|style|textarea|title)$/i,v=(t,...e)=>({_$litType$:1,strings:t,values:e}),m=Symbol.for("lit-noChange"),y=Symbol.for("lit-nothing"),f=new WeakMap,S=h.createTreeWalker(h,129);function x(t,e){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s?s.createHTML(e):e}const T=(t,e)=>{const s=t.length-1,n=[];let h,l=2===e?"<svg>":"",a=d;for(let e=0;e<s;e++){const s=t[e];let u,c,v=-1,m=0;for(;m<s.length&&(a.lastIndex=m,c=a.exec(s),null!==c);)m=a.lastIndex,a===d?"!--"===c[1]?a=b:void 0!==c[1]?a=p:void 0!==c[2]?(g.test(c[2])&&(h=RegExp("</"+c[2],"g")),a=$):void 0!==c[3]&&(a=$):a===$?">"===c[0]?(a=h??d,v=-1):void 0===c[1]?v=-2:(v=a.lastIndex-c[2].length,u=c[1],a=void 0===c[3]?$:'"'===c[3]?A:_):a===A||a===_?a=$:a===b||a===p?a=d:(a=$,h=void 0);const y=a===$&&t[e+1].startsWith("/>")?" ":"";l+=a===d?s+o:v>=0?(n.push(u),s.slice(0,v)+i+s.slice(v)+r+y):s+r+(-2===v?e:y)}return[x(t,l+(t[s]||"<?>")+(2===e?"</svg>":"")),n]};class N{constructor({strings:t,_$litType$:s},o){let h;this.parts=[];let a=0,u=0;const c=t.length-1,d=this.parts,[b,p]=T(t,s);if(this.el=N.createElement(b,o),S.currentNode=this.el.content,2===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(h=S.nextNode())&&d.length<c;){if(1===h.nodeType){if(h.hasAttributes())for(const t of h.getAttributeNames())if(t.endsWith(i)){const e=p[u++],s=h.getAttribute(t).split(r),i=/([.?@])?(.*)/.exec(e);d.push({type:1,index:a,name:i[2],strings:s,ctor:"."===i[1]?M:"?"===i[1]?E:"@"===i[1]?I:R}),h.removeAttribute(t)}else t.startsWith(r)&&(d.push({type:6,index:a}),h.removeAttribute(t));if(g.test(h.tagName)){const t=h.textContent.split(r),s=t.length-1;if(s>0){h.textContent=e?e.emptyScript:"";for(let e=0;e<s;e++)h.append(t[e],l()),S.nextNode(),d.push({type:2,index:++a});h.append(t[s],l())}}}else if(8===h.nodeType)if(h.data===n)d.push({type:2,index:a});else{let t=-1;for(;-1!==(t=h.data.indexOf(r,t+1));)d.push({type:7,index:a}),t+=r.length-1}a++}}static createElement(t,e){const s=h.createElement("template");return s.innerHTML=t,s}}function H(t,e,s=t,i){if(e===m)return e;let r=void 0!==i?s._$Co?.[i]:s._$Cl;const n=a(e)?void 0:e._$litDirective$;return r?.constructor!==n&&(r?._$AO?.(!1),void 0===n?r=void 0:(r=new n(t),r._$AT(t,s,i)),void 0!==i?(s._$Co??=[])[i]=r:s._$Cl=r),void 0!==r&&(e=H(t,r._$AS(t,e.values),r,i)),e}class C{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=(t?.creationScope??h).importNode(e,!0);S.currentNode=i;let r=S.nextNode(),n=0,o=0,l=s[0];for(;void 0!==l;){if(n===l.index){let e;2===l.type?e=new w(r,r.nextSibling,this,t):1===l.type?e=new l.ctor(r,l.name,l.strings,this,t):6===l.type&&(e=new U(r,this,t)),this._$AV.push(e),l=s[++o]}n!==l?.index&&(r=S.nextNode(),n++)}return S.currentNode=h,i}p(t){let e=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class w{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=y,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=i?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=H(this,t,e),a(t)?t===y||null==t||""===t?(this._$AH!==y&&this._$AR(),this._$AH=y):t!==this._$AH&&t!==m&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>u(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.k(t):this._(t)}S(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.S(t))}_(t){this._$AH!==y&&a(this._$AH)?this._$AA.nextSibling.data=t:this.T(h.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:s}=t,i="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(x(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===i)this._$AH.p(e);else{const t=new C(i,this),s=t.u(this.options);t.p(e),this.T(s),this._$AH=t}}_$AC(t){let e=f.get(t.strings);return void 0===e&&f.set(t.strings,e=new N(t)),e}k(t){u(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const r of t)i===e.length?e.push(s=new w(this.S(l()),this.S(l()),this,this.options)):s=e[i],s._$AI(r),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class R{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,r){this.type=1,this._$AH=y,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=r,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=y}_$AI(t,e=this,s,i){const r=this.strings;let n=!1;if(void 0===r)t=H(this,t,e,0),n=!a(t)||t!==this._$AH&&t!==m,n&&(this._$AH=t);else{const i=t;let o,h;for(t=r[0],o=0;o<r.length-1;o++)h=H(this,i[s+o],e,o),h===m&&(h=this._$AH[o]),n||=!a(h)||h!==this._$AH[o],h===y?t=y:t!==y&&(t+=(h??"")+r[o+1]),this._$AH[o]=h}n&&!i&&this.j(t)}j(t){t===y?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class M extends R{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===y?void 0:t}}class E extends R{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==y)}}class I extends R{constructor(t,e,s,i,r){super(t,e,s,i,r),this.type=5}_$AI(t,e=this){if((t=H(this,t,e,0)??y)===m)return;const s=this._$AH,i=t===y&&s!==y||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,r=t!==y&&(s===y||i);i&&this.element.removeEventListener(this.name,this,s),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class U{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){H(this,t)}}const k=t.litHtmlPolyfillSupport;k?.(N,w),(t.litHtmlVersions??=[]).push("3.1.2");const W=globalThis,B=W.ShadowRoot&&(void 0===W.ShadyCSS||W.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,P=Symbol(),j=new WeakMap;
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */class O{constructor(t,e,s){if(this._$cssResult$=!0,s!==P)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(B&&void 0===t){const s=void 0!==e&&1===e.length;s&&(t=j.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&j.set(e,t))}return t}toString(){return this.cssText}}const L=(t,...e)=>{const s=1===t.length?t[0]:e.reduce(((e,s,i)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[i+1]),t[0]);return new O(s,t,P)};Symbol.metadata??=Symbol("metadata");class D extends HTMLElement{static get observedAttributes(){return this[Symbol.metadata]?.observedAttributes?.values()??[]}attributeChangedCallback(t,e,s){this[t]=s}constructor(){super(),this.renderedOnce=!1,this.rendered=new Promise((t=>{this.renderResolve=t})),this.attachShadow({mode:"open"});const t=customElements.get(this.localName);this.shadowRoot.adoptedStyleSheets=t.styles?t.styles.map((t=>t.styleSheet??t)):[],this.requestRender()}render(){return v`<slot></slot>`}requestRender(){((t,e,s)=>{const i=e;let r=i._$litPart$;if(void 0===r){const t=null;i._$litPart$=r=new w(e.insertBefore(l(),t),t,void 0,{})}r._$AI(t)})(this.render(),this.shadowRoot),this.renderedOnce||(this.renderResolve(!0),this.renderedOnce=!0,this.firstRender&&this.firstRender())}}globalThis.pubsub=globalThis.pubsub||new class{subscribers={};verbose;constructor(t){this.verbose=t}_handleContext(t,e){return void 0===e&&(e=t),e}hasSubscribers(t){return!!this.subscribers[t]}subscribe(t,e,s){this.hasSubscribers(t)||(this.subscribers[t]={handlers:[],value:void 0}),s=this._handleContext(e,s),this.subscribers[t].handlers.push(e.bind(s))}unsubscribe(t,e,s){if(!this.hasSubscribers(t))return;s=this._handleContext(e,s);const i=this.subscribers[t].handlers.indexOf(e.bind(s));this.subscribers[t].handlers.splice(i),0===this.subscribers[t].handlers.length&&delete this.subscribers[t]}publish(t,e,s){this.hasSubscribers(t)||(this.subscribers[t]={handlers:[]});const i=this.subscribers[t]?.value;if(this.verbose||s||i!==e){this.subscribers[t].value=e;for(const s of this.subscribers[t].handlers)s(e,i)}}publishVerbose(t,e){this.publish(t,e,!0)}once(t){return new Promise((e=>{const s=i=>{e(i),this.unsubscribe(t,s)};this.subscribe(t,s)}))}};const V={type:String,reflect:!1,renders:!0,batchDelay:50,temporaryRender:10},q=(t,e)=>{let s=t;return e===Boolean?s=Boolean("true"===t):e===Number?s=Number(t):e===Uint8Array?s=new Uint8Array(t.split(",")):e!==Array&&e!==Object&&e!==WeakMap&&e!==Map&&e!==Uint8Array||(s=JSON.parse(t),e===Map&&(s=new Map(t)),e===WeakMap&&(s=new WeakMap(t))),s},z=t=>{t={...V,...t};let e=0;return function(s,{kind:i,name:r,addInitializer:n,access:o,metadata:h}){const{type:l,reflect:a,attribute:u,renders:c,batches:d,batchDelay:b,consumer:p,provider:$,temporaryRender:_}=t,A=String(r),g=u&&"string"==typeof u?u:A,v=l===Boolean,m=p||"boolean"==typeof t.consumes?g:t.consumes,y=$||"boolean"==typeof t.provides?g:t.provides;if(t.provider&&console.warn(`${A}: 'options.provider' is deprecated, use options.provides instead`),t.consumer&&console.warn(`${A}: 'options.consumer' is deprecated, used options.consumes instead`),n((async function(){"accessor"!==i&&console.warn(`${this.localName}: @property(${t}) ${A} ${i} is not supported`),(u||a)&&(h||(h={}),h.observedAttributes||(h.observedAttributes=new Map),h.observedAttributes.set(A,g)),m&&globalThis.pubsub.subscribe(m,(async t=>{this[r]=t}))})),"accessor"===i)return{get(){return f.call(this)},set(t){return S.call(this,t)},init(t){return this.hasAttribute(g)&&(t=v?this.hasAttribute(g):q(this.getAttribute(g),l)),void 0!==t&&S.call(this,t),m&&globalThis.pubsub.subscribers?.[m]?.value&&S.call(this,globalThis.pubsub.subscribers[m].value),this[r]}};function f(){const t=a||u?v?this.hasAttribute(g):q(this.getAttribute(g),l):this[`__${A}`]?this[`__${A}`]:this[`_${A}`];return m&&!this[`__${A}`]&&globalThis.pubsub.subscribers?.[m]?.value?(t!==globalThis.pubsub.subscribers[m].value&&S.call(this,globalThis.pubsub.subscribers[m].value),globalThis.pubsub.subscribers[m].value):t}async function S(t){if(y&&globalThis.pubsub.publish(y,t),this[`_${A}`]!==t){this.willChange&&(this[`__${A}`]=await this.willChange(r,t)),a||u?v?t||this[`__${A}`]?this.setAttribute(g,""):this.removeAttribute(g):t||this[`__${A}`]?this.setAttribute(g,((t,e)=>{let s=e;if(t===Boolean||t===Number||t===Uint8Array)return e.toString();if(t===Array||t===Object||t===WeakMap||t===Map||t===Uint8Array){let i;t!==Map&&t!==WeakMap||(i=Object(e).entries()),s=JSON.stringify(i)}return s})(l,this[`__${A}`]??t)):this.removeAttribute(g):this[`_${A}`]=t;const s=()=>{e=0,this.requestRender&&c&&this.requestRender(),this.onChange&&this.onChange(r,this[`__${A}`]??t)};d?(e===_&&s(),this[`_${A}_timeout`]&&clearTimeout(this[`_${A}_timeout`]),this[`_${A}_timeout`]=setTimeout(s,b)):s()}}}};export{D,L as j,z as t,v};