@fluid-topics/ft-dialog 0.1.7 → 0.1.8

package/README.md

@@ -19,6 +19,7 @@ function render() {
         <ft-button @click=${ () => document.querySelector<FtDialog>("ft-dialog")?.open() }> Open dialog </ft-button>
         <ft-dialog
             heading="Dialog Title"
+            icon="info"
             closeOnEsc
             closeOnClickOutside
             @opened-changed=${ (e: CustomEvent<{ opened: boolean }>) => console.log("opened changed ", e.detail) }

package/build/ft-dialog.d.ts

@@ -5,14 +5,19 @@ export interface FtDialogProperties {
     closeOnEsc: boolean;
     closeOnClickOutside: boolean;
     heading: string;
+    icon: string;
 }
 export declare const FtDialogCssVariables: {
     zIndex: FtCssVariable;
     overlayBackgroundColor: FtCssVariable;
     height: FtCssVariable;
     width: FtCssVariable;
-    padding: FtCssVariable;
+    minWidth: FtCssVariable;
+    paddingTop: FtCssVariable;
+    paddingSide: FtCssVariable;
+    paddingButtons: FtCssVariable;
     colorSurface: FtCssVariable;
+    headingColor: FtCssVariable;
     borderRadiusS: FtCssVariable;
     elevation24: FtCssVariable;
 };
@@ -22,6 +27,7 @@ export default class FtDialog extends FtLitElement implements FtDialogProperties
     closeOnEsc: boolean;
     closeOnClickOutside: boolean;
     heading: string;
+    icon: string;
     getStyles(): import("lit").CSSResult;
     protected getTemplate(): import("lit-html").TemplateResult<1> | null;
     updated(properties: PropertyValues<FtDialog>): void;

package/build/ft-dialog.js

@@ -8,13 +8,18 @@ import { css, html } from "lit";
 import { property, } from "lit/decorators.js";
 import { customElement, designSystemVariables, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtTypography } from "@fluid-topics/ft-typography";
+import { Icon } from "@material/mwc-icon";
 export const FtDialogCssVariables = {
     zIndex: FtCssVariable.create("--ft-dialog-z-index", "NUMBER", "2"),
     overlayBackgroundColor: FtCssVariable.create("--ft-dialog-overlay-background-color", "COLOR", "rgba(0, 0, 0, 0.3)"),
     height: FtCssVariable.create("--ft-dialog-height", "SIZE", "unset"),
     width: FtCssVariable.create("--ft-dialog-width", "SIZE", "unset"),
-    padding: FtCssVariable.create("--ft-dialog-padding", "SIZE", "24px"),
+    minWidth: FtCssVariable.create("--ft-dialog-min-width", "SIZE", "unset"),
+    paddingTop: FtCssVariable.create("--ft-dialog-padding-top", "SIZE", "20px"),
+    paddingSide: FtCssVariable.create("--ft-dialog-padding-side", "SIZE", "16px"),
+    paddingButtons: FtCssVariable.create("--ft-dialog-padding-buttons", "SIZE", "20px"),
     colorSurface: FtCssVariable.external(designSystemVariables.colorSurface, "Design system"),
+    headingColor: FtCssVariable.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
     borderRadiusS: FtCssVariable.external(designSystemVariables.borderRadiusS, "Design system"),
     elevation24: FtCssVariable.external(designSystemVariables.elevation24, "Design system"),
 };
@@ -25,6 +30,7 @@ let FtDialog = class FtDialog extends FtLitElement {
         this.closeOnEsc = false;
         this.closeOnClickOutside = false;
         this.heading = "";
+        this.icon = "";
     }
     getStyles() {
         //language=css
@@ -45,7 +51,7 @@ let FtDialog = class FtDialog extends FtLitElement {
                 margin: auto;
             }
 
-            .ft-dialog_overlay {
+            .ft-dialog-overlay {
                 position: fixed;
                 top: 0;
                 right: 0;
@@ -59,7 +65,7 @@ let FtDialog = class FtDialog extends FtLitElement {
 
             }
 
-            .ft-dialog_wrapper {
+            .ft-dialog-wrapper {
                 position: fixed;
                 display: flex;
                 flex-direction: column;
@@ -68,26 +74,34 @@ let FtDialog = class FtDialog extends FtLitElement {
                 height: ${FtDialogCssVariables.height};
                 max-width: 95vw;
                 max-height: 95vh;
+                min-width: ${FtDialogCssVariables.minWidth};
+
+                padding-top: ${FtDialogCssVariables.paddingTop};
+                padding-right: ${FtDialogCssVariables.paddingSide};
+                padding-left: ${FtDialogCssVariables.paddingSide};
 
-                padding: ${FtDialogCssVariables.padding};
                 background-color: ${FtDialogCssVariables.colorSurface};
 
                 border-radius: ${FtDialogCssVariables.borderRadiusS};
                 box-shadow: ${FtDialogCssVariables.elevation24};
             }
 
-            .ft-dialog_content {
+            .ft-dialog-content {
                 flex-grow: 2;
                 overflow: auto;
             }
 
-            .ft-dialog_heading {
-                display: block;
-                margin-bottom: 12px;
+            .ft-dialog-heading {
+                display: flex;
+                align-items: center;
+                margin-bottom: 20px;
+                gap: 8px;
+
+                color: ${FtDialogCssVariables.headingColor};
             }
 
-            .ft-dialog_buttons {
-                margin-top: 12px;
+            .ft-dialog-buttons {
+                padding-top: ${FtDialogCssVariables.paddingButtons};
             }
 
             slot[name=buttons] {
@@ -95,6 +109,12 @@ let FtDialog = class FtDialog extends FtLitElement {
                 align-items: center;
                 justify-content: flex-end;
             }
+
+            slot[name=buttons]::slotted(*) {
+                margin-top: 8px;
+                margin-bottom: 8px
+            }
+
         `;
     }
     getTemplate() {
@@ -103,15 +123,19 @@ let FtDialog = class FtDialog extends FtLitElement {
         }
         return html `
             <div class="ft-dialog">
-                <div class="ft-dialog_overlay" @click="${() => this.watchClickOutside()}"></div>
-                <div class="ft-dialog_wrapper">
+                <div class="ft-dialog-overlay" @click="${() => this.watchClickOutside()}"></div>
+                <div class="ft-dialog-wrapper">
                     ${this.heading ? html `
-                        <ft-typography class="ft-dialog_heading" variant="title">${this.heading}</ft-typography>
+                        <div class="ft-dialog-heading">
+                            ${this.icon ? html `
+                                <mwc-icon>${this.icon}</mwc-icon>` : undefined}
+                            <ft-typography element="span" variant="title">${this.heading}</ft-typography>
+                        </div>
                     ` : null}
-                    <div class="ft-dialog_content">
+                    <div class="ft-dialog-content">
                         <slot></slot>
                     </div>
-                    <div class="ft-dialog_buttons">
+                    <div class="ft-dialog-buttons">
                         <slot name="buttons"></slot>
                     </div>
                 </div>
@@ -151,6 +175,7 @@ let FtDialog = class FtDialog extends FtLitElement {
 };
 FtDialog.elementDefinitions = {
     "ft-typography": FtTypography,
+    "mwc-icon": Icon,
 };
 __decorate([
     property({
@@ -170,6 +195,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], FtDialog.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], FtDialog.prototype, "icon", void 0);
 FtDialog = __decorate([
     customElement("ft-dialog")
 ], FtDialog);

package/build/ft-dialog.light.js

@@ -1,16 +1,16 @@
-!function(t,i,e,o){
+!function(t,i,o,e){
 /**
      * @license
      * Copyright 2017 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
      */
-var s;const n=globalThis.trustedTypes,r=n?n.createPolicy("lit-html",{createHTML:t=>t}):void 0,h=`lit$${(Math.random()+"").slice(9)}$`,l="?"+h,a=`<${l}>`,p=document,f=(t="")=>p.createComment(t),y=t=>null===t||"object"!=typeof t&&"function"!=typeof t,g=Array.isArray,d=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,c=/-->/g,u=/>/g,v=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,$=/'/g,m=/"/g,b=/^(?:script|style|textarea|title)$/i,x=(t=>(i,...e)=>({_$litType$:t,strings:i,values:e}))(1),w=Symbol.for("lit-noChange"),z=Symbol.for("lit-nothing"),_=new WeakMap,S=p.createTreeWalker(p,129,null,!1),k=(t,i)=>{const e=t.length-1,o=[];let s,n=2===i?"<svg>":"",l=d;for(let i=0;i<e;i++){const e=t[i];let r,p,f=-1,y=0;for(;y<e.length&&(l.lastIndex=y,p=l.exec(e),null!==p);)y=l.lastIndex,l===d?"!--"===p[1]?l=c:void 0!==p[1]?l=u:void 0!==p[2]?(b.test(p[2])&&(s=RegExp("</"+p[2],"g")),l=v):void 0!==p[3]&&(l=v):l===v?">"===p[0]?(l=null!=s?s:d,f=-1):void 0===p[1]?f=-2:(f=l.lastIndex-p[2].length,r=p[1],l=void 0===p[3]?v:'"'===p[3]?m:$):l===m||l===$?l=v:l===c||l===u?l=d:(l=v,s=void 0);const g=l===v&&t[i+1].startsWith("/>")?" ":"";n+=l===d?e+a:f>=0?(o.push(r),e.slice(0,f)+"$lit$"+e.slice(f)+h+g):e+h+(-2===f?(o.push(void 0),i):g)}const p=n+(t[e]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==r?r.createHTML(p):p,o]};class A{constructor({strings:t,_$litType$:i},e){let o;this.parts=[];let s=0,r=0;const a=t.length-1,p=this.parts,[y,g]=k(t,i);if(this.el=A.createElement(y,e),S.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(o=S.nextNode())&&p.length<a;){if(1===o.nodeType){if(o.hasAttributes()){const t=[];for(const i of o.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(h)){const e=g[r++];if(t.push(i),void 0!==e){const t=o.getAttribute(e.toLowerCase()+"$lit$").split(h),i=/([.?@])?(.*)/.exec(e);p.push({type:1,index:s,name:i[2],strings:t,ctor:"."===i[1]?I:"?"===i[1]?j:"@"===i[1]?Z:C})}else p.push({type:6,index:s})}for(const i of t)o.removeAttribute(i)}if(b.test(o.tagName)){const t=o.textContent.split(h),i=t.length-1;if(i>0){o.textContent=n?n.emptyScript:"";for(let e=0;e<i;e++)o.append(t[e],f()),S.nextNode(),p.push({type:2,index:++s});o.append(t[i],f())}}}else if(8===o.nodeType)if(o.data===l)p.push({type:2,index:s});else{let t=-1;for(;-1!==(t=o.data.indexOf(h,t+1));)p.push({type:7,index:s}),t+=h.length-1}s++}}static createElement(t,i){const e=p.createElement("template");return e.innerHTML=t,e}}function E(t,i,e=t,o){var s,n,r,h;if(i===w)return i;let l=void 0!==o?null===(s=e._$Cl)||void 0===s?void 0:s[o]:e._$Cu;const a=y(i)?void 0:i._$litDirective$;return(null==l?void 0:l.constructor)!==a&&(null===(n=null==l?void 0:l._$AO)||void 0===n||n.call(l,!1),void 0===a?l=void 0:(l=new a(t),l._$AT(t,e,o)),void 0!==o?(null!==(r=(h=e)._$Cl)&&void 0!==r?r:h._$Cl=[])[o]=l:e._$Cu=l),void 0!==l&&(i=E(t,l._$AS(t,i.values),l,o)),i}class O{constructor(t,i){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var i;const{el:{content:e},parts:o}=this._$AD,s=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:p).importNode(e,!0);S.currentNode=s;let n=S.nextNode(),r=0,h=0,l=o[0];for(;void 0!==l;){if(r===l.index){let i;2===l.type?i=new N(n,n.nextSibling,this,t):1===l.type?i=new l.ctor(n,l.name,l.strings,this,t):6===l.type&&(i=new M(n,this,t)),this.v.push(i),l=o[++h]}r!==(null==l?void 0:l.index)&&(n=S.nextNode(),r++)}return s}m(t){let i=0;for(const e of this.v)void 0!==e&&(void 0!==e.strings?(e._$AI(t,e,i),i+=e.strings.length-2):e._$AI(t[i])),i++}}class N{constructor(t,i,e,o){var s;this.type=2,this._$AH=z,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=e,this.options=o,this._$Cg=null===(s=null==o?void 0:o.isConnected)||void 0===s||s}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=E(this,t,i),y(t)?t===z||null==t||""===t?(this._$AH!==z&&this._$AR(),this._$AH=z):t!==this._$AH&&t!==w&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.S(t):(t=>{var i;return g(t)||"function"==typeof(null===(i=t)||void 0===i?void 0:i[Symbol.iterator])})(t)?this.A(t):this.$(t)}M(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}S(t){this._$AH!==t&&(this._$AR(),this._$AH=this.M(t))}$(t){this._$AH!==z&&y(this._$AH)?this._$AA.nextSibling.data=t:this.S(p.createTextNode(t)),this._$AH=t}T(t){var i;const{values:e,_$litType$:o}=t,s="number"==typeof o?this._$AC(t):(void 0===o.el&&(o.el=A.createElement(o.h,this.options)),o);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===s)this._$AH.m(e);else{const t=new O(s,this),i=t.p(this.options);t.m(e),this.S(i),this._$AH=t}}_$AC(t){let i=_.get(t.strings);return void 0===i&&_.set(t.strings,i=new A(t)),i}A(t){g(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let e,o=0;for(const s of t)o===i.length?i.push(e=new N(this.M(f()),this.M(f()),this,this.options)):e=i[o],e._$AI(s),o++;o<i.length&&(this._$AR(e&&e._$AB.nextSibling,o),i.length=o)}_$AR(t=this._$AA.nextSibling,i){var e;for(null===(e=this._$AP)||void 0===e||e.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var i;void 0===this._$AM&&(this._$Cg=t,null===(i=this._$AP)||void 0===i||i.call(this,t))}}class C{constructor(t,i,e,o,s){this.type=1,this._$AH=z,this._$AN=void 0,this.element=t,this.name=i,this._$AM=o,this.options=s,e.length>2||""!==e[0]||""!==e[1]?(this._$AH=Array(e.length-1).fill(new String),this.strings=e):this._$AH=z}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,e,o){const s=this.strings;let n=!1;if(void 0===s)t=E(this,t,i,0),n=!y(t)||t!==this._$AH&&t!==w,n&&(this._$AH=t);else{const o=t;let r,h;for(t=s[0],r=0;r<s.length-1;r++)h=E(this,o[e+r],i,r),h===w&&(h=this._$AH[r]),n||(n=!y(h)||h!==this._$AH[r]),h===z?t=z:t!==z&&(t+=(null!=h?h:"")+s[r+1]),this._$AH[r]=h}n&&!o&&this.k(t)}k(t){t===z?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class I extends C{constructor(){super(...arguments),this.type=3}k(t){this.element[this.name]=t===z?void 0:t}}const T=n?n.emptyScript:"";class j extends C{constructor(){super(...arguments),this.type=4}k(t){t&&t!==z?this.element.setAttribute(this.name,T):this.element.removeAttribute(this.name)}}class Z extends C{constructor(t,i,e,o,s){super(t,i,e,o,s),this.type=5}_$AI(t,i=this){var e;if((t=null!==(e=E(this,t,i,0))&&void 0!==e?e:z)===w)return;const o=this._$AH,s=t===z&&o!==z||t.capture!==o.capture||t.once!==o.once||t.passive!==o.passive,n=t!==z&&(o===z||s);s&&this.element.removeEventListener(this.name,this,o),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var i,e;"function"==typeof this._$AH?this._$AH.call(null!==(e=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==e?e:this.element,t):this._$AH.handleEvent(t)}}class M{constructor(t,i,e){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=e}get _$AU(){return this._$AM._$AU}_$AI(t){E(this,t)}}const U=window.litHtmlPolyfillSupport;null==U||U(A,N),(null!==(s=globalThis.litHtmlVersions)&&void 0!==s?s:globalThis.litHtmlVersions=[]).push("2.1.3");
+var n;const s=globalThis.trustedTypes,r=s?s.createPolicy("lit-html",{createHTML:t=>t}):void 0,l=`lit$${(Math.random()+"").slice(9)}$`,a="?"+l,h=`<${a}>`,p=document,f=(t="")=>p.createComment(t),g=t=>null===t||"object"!=typeof t&&"function"!=typeof t,y=Array.isArray,d=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,c=/-->/g,u=/>/g,v=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,m=/'/g,$=/"/g,b=/^(?:script|style|textarea|title)$/i,x=(t=>(i,...o)=>({_$litType$:t,strings:i,values:o}))(1),w=Symbol.for("lit-noChange"),z=Symbol.for("lit-nothing"),S=new WeakMap,E=p.createTreeWalker(p,129,null,!1),k=(t,i)=>{const o=t.length-1,e=[];let n,s=2===i?"<svg>":"",a=d;for(let i=0;i<o;i++){const o=t[i];let r,p,f=-1,g=0;for(;g<o.length&&(a.lastIndex=g,p=a.exec(o),null!==p);)g=a.lastIndex,a===d?"!--"===p[1]?a=c:void 0!==p[1]?a=u:void 0!==p[2]?(b.test(p[2])&&(n=RegExp("</"+p[2],"g")),a=v):void 0!==p[3]&&(a=v):a===v?">"===p[0]?(a=null!=n?n:d,f=-1):void 0===p[1]?f=-2:(f=a.lastIndex-p[2].length,r=p[1],a=void 0===p[3]?v:'"'===p[3]?$:m):a===$||a===m?a=v:a===c||a===u?a=d:(a=v,n=void 0);const y=a===v&&t[i+1].startsWith("/>")?" ":"";s+=a===d?o+h:f>=0?(e.push(r),o.slice(0,f)+"$lit$"+o.slice(f)+l+y):o+l+(-2===f?(e.push(void 0),i):y)}const p=s+(t[o]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==r?r.createHTML(p):p,e]};class A{constructor({strings:t,_$litType$:i},o){let e;this.parts=[];let n=0,r=0;const h=t.length-1,p=this.parts,[g,y]=k(t,i);if(this.el=A.createElement(g,o),E.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(e=E.nextNode())&&p.length<h;){if(1===e.nodeType){if(e.hasAttributes()){const t=[];for(const i of e.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(l)){const o=y[r++];if(t.push(i),void 0!==o){const t=e.getAttribute(o.toLowerCase()+"$lit$").split(l),i=/([.?@])?(.*)/.exec(o);p.push({type:1,index:n,name:i[2],strings:t,ctor:"."===i[1]?N:"?"===i[1]?Z:"@"===i[1]?j:C})}else p.push({type:6,index:n})}for(const i of t)e.removeAttribute(i)}if(b.test(e.tagName)){const t=e.textContent.split(l),i=t.length-1;if(i>0){e.textContent=s?s.emptyScript:"";for(let o=0;o<i;o++)e.append(t[o],f()),E.nextNode(),p.push({type:2,index:++n});e.append(t[i],f())}}}else if(8===e.nodeType)if(e.data===a)p.push({type:2,index:n});else{let t=-1;for(;-1!==(t=e.data.indexOf(l,t+1));)p.push({type:7,index:n}),t+=l.length-1}n++}}static createElement(t,i){const o=p.createElement("template");return o.innerHTML=t,o}}function _(t,i,o=t,e){var n,s,r,l;if(i===w)return i;let a=void 0!==e?null===(n=o._$Cl)||void 0===n?void 0:n[e]:o._$Cu;const h=g(i)?void 0:i._$litDirective$;return(null==a?void 0:a.constructor)!==h&&(null===(s=null==a?void 0:a._$AO)||void 0===s||s.call(a,!1),void 0===h?a=void 0:(a=new h(t),a._$AT(t,o,e)),void 0!==e?(null!==(r=(l=o)._$Cl)&&void 0!==r?r:l._$Cl=[])[e]=a:o._$Cu=a),void 0!==a&&(i=_(t,a._$AS(t,i.values),a,e)),i}class I{constructor(t,i){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var i;const{el:{content:o},parts:e}=this._$AD,n=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:p).importNode(o,!0);E.currentNode=n;let s=E.nextNode(),r=0,l=0,a=e[0];for(;void 0!==a;){if(r===a.index){let i;2===a.type?i=new O(s,s.nextSibling,this,t):1===a.type?i=new a.ctor(s,a.name,a.strings,this,t):6===a.type&&(i=new M(s,this,t)),this.v.push(i),a=e[++l]}r!==(null==a?void 0:a.index)&&(s=E.nextNode(),r++)}return n}m(t){let i=0;for(const o of this.v)void 0!==o&&(void 0!==o.strings?(o._$AI(t,o,i),i+=o.strings.length-2):o._$AI(t[i])),i++}}class O{constructor(t,i,o,e){var n;this.type=2,this._$AH=z,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=o,this.options=e,this._$Cg=null===(n=null==e?void 0:e.isConnected)||void 0===n||n}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=_(this,t,i),g(t)?t===z||null==t||""===t?(this._$AH!==z&&this._$AR(),this._$AH=z):t!==this._$AH&&t!==w&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.S(t):(t=>{var i;return y(t)||"function"==typeof(null===(i=t)||void 0===i?void 0:i[Symbol.iterator])})(t)?this.A(t):this.$(t)}M(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}S(t){this._$AH!==t&&(this._$AR(),this._$AH=this.M(t))}$(t){this._$AH!==z&&g(this._$AH)?this._$AA.nextSibling.data=t:this.S(p.createTextNode(t)),this._$AH=t}T(t){var i;const{values:o,_$litType$:e}=t,n="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=A.createElement(e.h,this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===n)this._$AH.m(o);else{const t=new I(n,this),i=t.p(this.options);t.m(o),this.S(i),this._$AH=t}}_$AC(t){let i=S.get(t.strings);return void 0===i&&S.set(t.strings,i=new A(t)),i}A(t){y(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let o,e=0;for(const n of t)e===i.length?i.push(o=new O(this.M(f()),this.M(f()),this,this.options)):o=i[e],o._$AI(n),e++;e<i.length&&(this._$AR(o&&o._$AB.nextSibling,e),i.length=e)}_$AR(t=this._$AA.nextSibling,i){var o;for(null===(o=this._$AP)||void 0===o||o.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var i;void 0===this._$AM&&(this._$Cg=t,null===(i=this._$AP)||void 0===i||i.call(this,t))}}class C{constructor(t,i,o,e,n){this.type=1,this._$AH=z,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=n,o.length>2||""!==o[0]||""!==o[1]?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=z}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,o,e){const n=this.strings;let s=!1;if(void 0===n)t=_(this,t,i,0),s=!g(t)||t!==this._$AH&&t!==w,s&&(this._$AH=t);else{const e=t;let r,l;for(t=n[0],r=0;r<n.length-1;r++)l=_(this,e[o+r],i,r),l===w&&(l=this._$AH[r]),s||(s=!g(l)||l!==this._$AH[r]),l===z?t=z:t!==z&&(t+=(null!=l?l:"")+n[r+1]),this._$AH[r]=l}s&&!e&&this.k(t)}k(t){t===z?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class N extends C{constructor(){super(...arguments),this.type=3}k(t){this.element[this.name]=t===z?void 0:t}}const T=s?s.emptyScript:"";class Z extends C{constructor(){super(...arguments),this.type=4}k(t){t&&t!==z?this.element.setAttribute(this.name,T):this.element.removeAttribute(this.name)}}class j extends C{constructor(t,i,o,e,n){super(t,i,o,e,n),this.type=5}_$AI(t,i=this){var o;if((t=null!==(o=_(this,t,i,0))&&void 0!==o?o:z)===w)return;const e=this._$AH,n=t===z&&e!==z||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,s=t!==z&&(e===z||n);n&&this.element.removeEventListener(this.name,this,e),s&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var i,o;"function"==typeof this._$AH?this._$AH.call(null!==(o=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==o?o:this.element,t):this._$AH.handleEvent(t)}}class M{constructor(t,i,o){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(t){_(this,t)}}const U=window.litHtmlPolyfillSupport;null==U||U(A,O),(null!==(n=globalThis.litHtmlVersions)&&void 0!==n?n:globalThis.litHtmlVersions=[]).push("2.1.3");
 /**
      * @license
      * Copyright 2020 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
      */
-const B=t=>({_$litStatic$:t}),R=new Map,W=(t=>(i,...e)=>{var o;const s=e.length;let n,r;const h=[],l=[];let a,p=0,f=!1;for(;p<s;){for(a=i[p];p<s&&void 0!==(r=e[p],n=null===(o=r)||void 0===o?void 0:o._$litStatic$);)a+=n+i[++p],f=!0;l.push(r),h.push(a),p++}if(p===s&&h.push(i[s]),f){const t=h.join("$$lit$$");void 0===(i=R.get(t))&&(h.raw=h,R.set(t,i=h)),e=l}return t(i,...e)})(x);var D,G=function(t,i,e,o){for(var s,n=arguments.length,r=n<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,h=t.length-1;h>=0;h--)(s=t[h])&&(r=(n<3?s(r):n>3?s(i,e,r):s(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};!function(t){t.title="title",t.title_dense="title-dense",t.subtitle1="subtitle1",t.subtitle2="subtitle2",t.body1="body1",t.body2="body2",t.caption="caption",t.breadcrumb="breadcrumb",t.overline="overline",t.button="button"}(D||(D={}));const K=o.FtCssVariable.extend("--ft-typography-font-family",o.designSystemVariables.titleFont),H=o.FtCssVariable.extend("--ft-typography-font-family",o.designSystemVariables.contentFont),L={fontFamily:H,fontSize:o.FtCssVariable.create("--ft-typography-font-size","SIZE","16px"),fontWeight:o.FtCssVariable.create("--ft-typography-font-weight","UNKNOWN","normal"),letterSpacing:o.FtCssVariable.create("--ft-typography-letter-spacing","SIZE","0.496px"),lineHeight:o.FtCssVariable.create("--ft-typography-line-height","SIZE","24px"),textTransform:o.FtCssVariable.create("--ft-typography-text-transform","UNKNOWN","inherit")},F=o.FtCssVariable.extend("--ft-typography-title-font-family",K),q=o.FtCssVariable.extend("--ft-typography-title-font-size",L.fontSize,"20px"),J=o.FtCssVariable.extend("--ft-typography-title-font-weight",L.fontWeight,"normal"),P=o.FtCssVariable.extend("--ft-typography-title-letter-spacing",L.letterSpacing,"0.15px"),Q=o.FtCssVariable.extend("--ft-typography-title-line-height",L.lineHeight,"24px"),V=o.FtCssVariable.extend("--ft-typography-title-text-transform",L.textTransform,"inherit"),X=o.FtCssVariable.extend("--ft-typography-title-dense-font-family",K),Y=o.FtCssVariable.extend("--ft-typography-title-dense-font-size",L.fontSize,"14px"),tt=o.FtCssVariable.extend("--ft-typography-title-dense-font-weight",L.fontWeight,"normal"),it=o.FtCssVariable.extend("--ft-typography-title-dense-letter-spacing",L.letterSpacing,"0.105px"),et=o.FtCssVariable.extend("--ft-typography-title-dense-line-height",L.lineHeight,"24px"),ot=o.FtCssVariable.extend("--ft-typography-title-dense-text-transform",L.textTransform,"inherit"),st=o.FtCssVariable.extend("--ft-typography-subtitle1-font-family",H),nt=o.FtCssVariable.extend("--ft-typography-subtitle1-font-size",L.fontSize,"16px"),rt=o.FtCssVariable.extend("--ft-typography-subtitle1-font-weight",L.fontWeight,"600"),ht=o.FtCssVariable.extend("--ft-typography-subtitle1-letter-spacing",L.letterSpacing,"0.144px"),lt=o.FtCssVariable.extend("--ft-typography-subtitle1-line-height",L.lineHeight,"24px"),at=o.FtCssVariable.extend("--ft-typography-subtitle1-text-transform",L.textTransform,"inherit"),pt=o.FtCssVariable.extend("--ft-typography-subtitle2-font-family",H),ft=o.FtCssVariable.extend("--ft-typography-subtitle2-font-size",L.fontSize,"14px"),yt=o.FtCssVariable.extend("--ft-typography-subtitle2-font-weight",L.fontWeight,"normal"),gt=o.FtCssVariable.extend("--ft-typography-subtitle2-letter-spacing",L.letterSpacing,"0.098px"),dt=o.FtCssVariable.extend("--ft-typography-subtitle2-line-height",L.lineHeight,"24px"),ct=o.FtCssVariable.extend("--ft-typography-subtitle2-text-transform",L.textTransform,"inherit"),ut=o.FtCssVariable.extend("--ft-typography-body1-font-family",H),vt=o.FtCssVariable.extend("--ft-typography-body1-font-size",L.fontSize,"16px"),$t=o.FtCssVariable.extend("--ft-typography-body1-font-weight",L.fontWeight,"normal"),mt=o.FtCssVariable.extend("--ft-typography-body1-letter-spacing",L.letterSpacing,"0.496px"),bt=o.FtCssVariable.extend("--ft-typography-body1-line-height",L.lineHeight,"24px"),xt=o.FtCssVariable.extend("--ft-typography-body1-text-transform",L.textTransform,"inherit"),wt=o.FtCssVariable.extend("--ft-typography-body2-font-family",H),zt=o.FtCssVariable.extend("--ft-typography-body2-font-size",L.fontSize,"14px"),_t=o.FtCssVariable.extend("--ft-typography-body2-font-weight",L.fontWeight,"normal"),St=o.FtCssVariable.extend("--ft-typography-body2-letter-spacing",L.letterSpacing,"0.252px"),kt=o.FtCssVariable.extend("--ft-typography-body2-line-height",L.lineHeight,"20px"),At=o.FtCssVariable.extend("--ft-typography-body2-text-transform",L.textTransform,"inherit"),Et=o.FtCssVariable.extend("--ft-typography-caption-font-family",H),Ot=o.FtCssVariable.extend("--ft-typography-caption-font-size",L.fontSize,"12px"),Nt=o.FtCssVariable.extend("--ft-typography-caption-font-weight",L.fontWeight,"normal"),Ct=o.FtCssVariable.extend("--ft-typography-caption-letter-spacing",L.letterSpacing,"0.396px"),It=o.FtCssVariable.extend("--ft-typography-caption-line-height",L.lineHeight,"16px"),Tt=o.FtCssVariable.extend("--ft-typography-caption-text-transform",L.textTransform,"inherit"),jt=o.FtCssVariable.extend("--ft-typography-breadcrumb-font-family",H),Zt=o.FtCssVariable.extend("--ft-typography-breadcrumb-font-size",L.fontSize,"10px"),Mt=o.FtCssVariable.extend("--ft-typography-breadcrumb-font-weight",L.fontWeight,"normal"),Ut=o.FtCssVariable.extend("--ft-typography-breadcrumb-letter-spacing",L.letterSpacing,"0.33px"),Bt=o.FtCssVariable.extend("--ft-typography-breadcrumb-line-height",L.lineHeight,"16px"),Rt=o.FtCssVariable.extend("--ft-typography-breadcrumb-text-transform",L.textTransform,"inherit"),Wt=o.FtCssVariable.extend("--ft-typography-overline-font-family",H),Dt=o.FtCssVariable.extend("--ft-typography-overline-font-size",L.fontSize,"10px"),Gt=o.FtCssVariable.extend("--ft-typography-overline-font-weight",L.fontWeight,"normal"),Kt=o.FtCssVariable.extend("--ft-typography-overline-letter-spacing",L.letterSpacing,"1.5px"),Ht=o.FtCssVariable.extend("--ft-typography-overline-line-height",L.lineHeight,"16px"),Lt=o.FtCssVariable.extend("--ft-typography-overline-text-transform",L.textTransform,"uppercase"),Ft=o.FtCssVariable.extend("--ft-typography-button-font-family",H),qt=o.FtCssVariable.extend("--ft-typography-button-font-size",L.fontSize,"14px"),Jt=o.FtCssVariable.extend("--ft-typography-button-font-weight",L.fontWeight,"600"),Pt=o.FtCssVariable.extend("--ft-typography-button-letter-spacing",L.letterSpacing,"1.246px"),Qt=o.FtCssVariable.extend("--ft-typography-button-line-height",L.lineHeight,"16px"),Vt=o.FtCssVariable.extend("--ft-typography-button-text-transform",L.textTransform,"uppercase"),Xt=i.css`
+const B=t=>({_$litStatic$:t}),R=new Map,W=(t=>(i,...o)=>{var e;const n=o.length;let s,r;const l=[],a=[];let h,p=0,f=!1;for(;p<n;){for(h=i[p];p<n&&void 0!==(r=o[p],s=null===(e=r)||void 0===e?void 0:e._$litStatic$);)h+=s+i[++p],f=!0;a.push(r),l.push(h),p++}if(p===n&&l.push(i[n]),f){const t=l.join("$$lit$$");void 0===(i=R.get(t))&&(l.raw=l,R.set(t,i=l)),o=a}return t(i,...o)})(x);var D,G=function(t,i,o,e){for(var n,s=arguments.length,r=s<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,o):e,l=t.length-1;l>=0;l--)(n=t[l])&&(r=(s<3?n(r):s>3?n(i,o,r):n(i,o))||r);return s>3&&r&&Object.defineProperty(i,o,r),r};!function(t){t.title="title",t.title_dense="title-dense",t.subtitle1="subtitle1",t.subtitle2="subtitle2",t.body1="body1",t.body2="body2",t.caption="caption",t.breadcrumb="breadcrumb",t.overline="overline",t.button="button"}(D||(D={}));const K=e.FtCssVariable.extend("--ft-typography-font-family",e.designSystemVariables.titleFont),L=e.FtCssVariable.extend("--ft-typography-font-family",e.designSystemVariables.contentFont),H={fontFamily:L,fontSize:e.FtCssVariable.create("--ft-typography-font-size","SIZE","16px"),fontWeight:e.FtCssVariable.create("--ft-typography-font-weight","UNKNOWN","normal"),letterSpacing:e.FtCssVariable.create("--ft-typography-letter-spacing","SIZE","0.496px"),lineHeight:e.FtCssVariable.create("--ft-typography-line-height","SIZE","24px"),textTransform:e.FtCssVariable.create("--ft-typography-text-transform","UNKNOWN","inherit")},F=e.FtCssVariable.extend("--ft-typography-title-font-family",K),q=e.FtCssVariable.extend("--ft-typography-title-font-size",H.fontSize,"20px"),J=e.FtCssVariable.extend("--ft-typography-title-font-weight",H.fontWeight,"normal"),P=e.FtCssVariable.extend("--ft-typography-title-letter-spacing",H.letterSpacing,"0.15px"),Q=e.FtCssVariable.extend("--ft-typography-title-line-height",H.lineHeight,"24px"),V=e.FtCssVariable.extend("--ft-typography-title-text-transform",H.textTransform,"inherit"),X=e.FtCssVariable.extend("--ft-typography-title-dense-font-family",K),Y=e.FtCssVariable.extend("--ft-typography-title-dense-font-size",H.fontSize,"14px"),tt=e.FtCssVariable.extend("--ft-typography-title-dense-font-weight",H.fontWeight,"normal"),it=e.FtCssVariable.extend("--ft-typography-title-dense-letter-spacing",H.letterSpacing,"0.105px"),ot=e.FtCssVariable.extend("--ft-typography-title-dense-line-height",H.lineHeight,"24px"),et=e.FtCssVariable.extend("--ft-typography-title-dense-text-transform",H.textTransform,"inherit"),nt=e.FtCssVariable.extend("--ft-typography-subtitle1-font-family",L),st=e.FtCssVariable.extend("--ft-typography-subtitle1-font-size",H.fontSize,"16px"),rt=e.FtCssVariable.extend("--ft-typography-subtitle1-font-weight",H.fontWeight,"600"),lt=e.FtCssVariable.extend("--ft-typography-subtitle1-letter-spacing",H.letterSpacing,"0.144px"),at=e.FtCssVariable.extend("--ft-typography-subtitle1-line-height",H.lineHeight,"24px"),ht=e.FtCssVariable.extend("--ft-typography-subtitle1-text-transform",H.textTransform,"inherit"),pt=e.FtCssVariable.extend("--ft-typography-subtitle2-font-family",L),ft=e.FtCssVariable.extend("--ft-typography-subtitle2-font-size",H.fontSize,"14px"),gt=e.FtCssVariable.extend("--ft-typography-subtitle2-font-weight",H.fontWeight,"normal"),yt=e.FtCssVariable.extend("--ft-typography-subtitle2-letter-spacing",H.letterSpacing,"0.098px"),dt=e.FtCssVariable.extend("--ft-typography-subtitle2-line-height",H.lineHeight,"24px"),ct=e.FtCssVariable.extend("--ft-typography-subtitle2-text-transform",H.textTransform,"inherit"),ut=e.FtCssVariable.extend("--ft-typography-body1-font-family",L),vt=e.FtCssVariable.extend("--ft-typography-body1-font-size",H.fontSize,"16px"),mt=e.FtCssVariable.extend("--ft-typography-body1-font-weight",H.fontWeight,"normal"),$t=e.FtCssVariable.extend("--ft-typography-body1-letter-spacing",H.letterSpacing,"0.496px"),bt=e.FtCssVariable.extend("--ft-typography-body1-line-height",H.lineHeight,"24px"),xt=e.FtCssVariable.extend("--ft-typography-body1-text-transform",H.textTransform,"inherit"),wt=e.FtCssVariable.extend("--ft-typography-body2-font-family",L),zt=e.FtCssVariable.extend("--ft-typography-body2-font-size",H.fontSize,"14px"),St=e.FtCssVariable.extend("--ft-typography-body2-font-weight",H.fontWeight,"normal"),Et=e.FtCssVariable.extend("--ft-typography-body2-letter-spacing",H.letterSpacing,"0.252px"),kt=e.FtCssVariable.extend("--ft-typography-body2-line-height",H.lineHeight,"20px"),At=e.FtCssVariable.extend("--ft-typography-body2-text-transform",H.textTransform,"inherit"),_t=e.FtCssVariable.extend("--ft-typography-caption-font-family",L),It=e.FtCssVariable.extend("--ft-typography-caption-font-size",H.fontSize,"12px"),Ot=e.FtCssVariable.extend("--ft-typography-caption-font-weight",H.fontWeight,"normal"),Ct=e.FtCssVariable.extend("--ft-typography-caption-letter-spacing",H.letterSpacing,"0.396px"),Nt=e.FtCssVariable.extend("--ft-typography-caption-line-height",H.lineHeight,"16px"),Tt=e.FtCssVariable.extend("--ft-typography-caption-text-transform",H.textTransform,"inherit"),Zt=e.FtCssVariable.extend("--ft-typography-breadcrumb-font-family",L),jt=e.FtCssVariable.extend("--ft-typography-breadcrumb-font-size",H.fontSize,"10px"),Mt=e.FtCssVariable.extend("--ft-typography-breadcrumb-font-weight",H.fontWeight,"normal"),Ut=e.FtCssVariable.extend("--ft-typography-breadcrumb-letter-spacing",H.letterSpacing,"0.33px"),Bt=e.FtCssVariable.extend("--ft-typography-breadcrumb-line-height",H.lineHeight,"16px"),Rt=e.FtCssVariable.extend("--ft-typography-breadcrumb-text-transform",H.textTransform,"inherit"),Wt=e.FtCssVariable.extend("--ft-typography-overline-font-family",L),Dt=e.FtCssVariable.extend("--ft-typography-overline-font-size",H.fontSize,"10px"),Gt=e.FtCssVariable.extend("--ft-typography-overline-font-weight",H.fontWeight,"normal"),Kt=e.FtCssVariable.extend("--ft-typography-overline-letter-spacing",H.letterSpacing,"1.5px"),Lt=e.FtCssVariable.extend("--ft-typography-overline-line-height",H.lineHeight,"16px"),Ht=e.FtCssVariable.extend("--ft-typography-overline-text-transform",H.textTransform,"uppercase"),Ft=e.FtCssVariable.extend("--ft-typography-button-font-family",L),qt=e.FtCssVariable.extend("--ft-typography-button-font-size",H.fontSize,"14px"),Jt=e.FtCssVariable.extend("--ft-typography-button-font-weight",H.fontWeight,"600"),Pt=e.FtCssVariable.extend("--ft-typography-button-letter-spacing",H.letterSpacing,"1.246px"),Qt=e.FtCssVariable.extend("--ft-typography-button-line-height",H.lineHeight,"16px"),Vt=e.FtCssVariable.extend("--ft-typography-button-text-transform",H.textTransform,"uppercase"),Xt=i.css`
     .ft-typography--title {
         font-family: ${F};
         font-size: ${q};
@@ -25,59 +25,59 @@ const B=t=>({_$litStatic$:t}),R=new Map,W=(t=>(i,...e)=>{var o;const s=e.length;
         font-size: ${Y};
         font-weight: ${tt};
         letter-spacing: ${it};
-        line-height: ${et};
-        text-transform: ${ot};
+        line-height: ${ot};
+        text-transform: ${et};
     }
 `,ti=i.css`
     .ft-typography--subtitle1 {
-        font-family: ${st};
-        font-size: ${nt};
+        font-family: ${nt};
+        font-size: ${st};
         font-weight: ${rt};
-        letter-spacing: ${ht};
-        line-height: ${lt};
-        text-transform: ${at};
+        letter-spacing: ${lt};
+        line-height: ${at};
+        text-transform: ${ht};
     }
 `,ii=i.css`
     .ft-typography--subtitle2 {
         font-family: ${pt};
         font-size: ${ft};
-        font-weight: ${yt};
-        letter-spacing: ${gt};
+        font-weight: ${gt};
+        letter-spacing: ${yt};
         line-height: ${dt};
         text-transform: ${ct};
     }
 
-`,ei=i.css`
+`,oi=i.css`
     .ft-typography--body1 {
         font-family: ${ut};
         font-size: ${vt};
-        font-weight: ${$t};
-        letter-spacing: ${mt};
+        font-weight: ${mt};
+        letter-spacing: ${$t};
         line-height: ${bt};
         text-transform: ${xt};
     }
-`,oi=i.css`
+`,ei=i.css`
     .ft-typography--body2 {
         font-family: ${wt};
         font-size: ${zt};
-        font-weight: ${_t};
-        letter-spacing: ${St};
+        font-weight: ${St};
+        letter-spacing: ${Et};
         line-height: ${kt};
         text-transform: ${At};
     }
-`,si=i.css`
+`,ni=i.css`
     .ft-typography--caption {
-        font-family: ${Et};
-        font-size: ${Ot};
-        font-weight: ${Nt};
+        font-family: ${_t};
+        font-size: ${It};
+        font-weight: ${Ot};
         letter-spacing: ${Ct};
-        line-height: ${It};
+        line-height: ${Nt};
         text-transform: ${Tt};
     }
-`,ni=i.css`
+`,si=i.css`
     .ft-typography--breadcrumb {
-        font-family: ${jt};
-        font-size: ${Zt};
+        font-family: ${Zt};
+        font-size: ${jt};
         font-weight: ${Mt};
         letter-spacing: ${Ut};
         line-height: ${Bt};
@@ -89,10 +89,10 @@ const B=t=>({_$litStatic$:t}),R=new Map,W=(t=>(i,...e)=>{var o;const s=e.length;
         font-size: ${Dt};
         font-weight: ${Gt};
         letter-spacing: ${Kt};
-        line-height: ${Ht};
-        text-transform: ${Lt};
+        line-height: ${Lt};
+        text-transform: ${Ht};
     }
-`,hi=i.css`
+`,li=i.css`
     .ft-typography--button {
         font-family: ${Ft};
         font-size: ${qt};
@@ -101,21 +101,47 @@ const B=t=>({_$litStatic$:t}),R=new Map,W=(t=>(i,...e)=>{var o;const s=e.length;
         line-height: ${Qt};
         text-transform: ${Vt};
     }
-`;let li=class extends o.FtLitElement{constructor(){super(...arguments),this.variant=D.body1}getStyles(){return[Xt,Yt,ti,ii,ei,oi,si,ni,ri,hi]}getTemplate(){return this.element?W`
+`;let ai=class extends e.FtLitElement{constructor(){super(...arguments),this.variant=D.body1}getStyles(){return[Xt,Yt,ti,ii,oi,ei,ni,si,ri,li]}getTemplate(){return this.element?W`
                 <${B(this.element)}
                         class="ft-typography ft-typography--${this.variant}">
                     <slot></slot>
                 </${B(this.element)}>
             `:W`
             <slot class="ft-typography ft-typography--${this.variant}"></slot>
-        `}};G([e.property()],li.prototype,"element",void 0),G([e.property()],li.prototype,"variant",void 0),li=G([o.customElement("ft-typography")],li);var ai=function(t,i,e,o){for(var s,n=arguments.length,r=n<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,h=t.length-1;h>=0;h--)(s=t[h])&&(r=(n<3?s(r):n>3?s(i,e,r):s(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};const pi={zIndex:o.FtCssVariable.create("--ft-dialog-z-index","NUMBER","2"),overlayBackgroundColor:o.FtCssVariable.create("--ft-dialog-overlay-background-color","COLOR","rgba(0, 0, 0, 0.3)"),height:o.FtCssVariable.create("--ft-dialog-height","SIZE","unset"),width:o.FtCssVariable.create("--ft-dialog-width","SIZE","unset"),padding:o.FtCssVariable.create("--ft-dialog-padding","SIZE","24px"),colorSurface:o.FtCssVariable.external(o.designSystemVariables.colorSurface,"Design system"),borderRadiusS:o.FtCssVariable.external(o.designSystemVariables.borderRadiusS,"Design system"),elevation24:o.FtCssVariable.external(o.designSystemVariables.elevation24,"Design system")};let fi=class extends o.FtLitElement{constructor(){super(...arguments),this.opened=!1,this.closeOnEsc=!1,this.closeOnClickOutside=!1,this.heading=""}getStyles(){return i.css`
+        `}};G([o.property()],ai.prototype,"element",void 0),G([o.property()],ai.prototype,"variant",void 0),ai=G([e.customElement("ft-typography")],ai);
+/**
+     * @license
+     * Copyright 2021 Google LLC
+     * SPDX-LIcense-Identifier: Apache-2.0
+     */
+const hi=i.css`:host{font-family:var(--mdc-icon-font, "Material Icons");font-weight:normal;font-style:normal;font-size:var(--mdc-icon-size, 24px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}`
+/**
+     * @license
+     * Copyright 2018 Google LLC
+     * SPDX-License-Identifier: Apache-2.0
+     */;let pi=class extends i.LitElement{render(){return i.html`<span><slot></slot></span>`}};pi.styles=[hi],pi=
+/*! *****************************************************************************
+    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.
+    ***************************************************************************** */
+function(t,i,o,e){for(var n,s=arguments.length,r=s<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,o):e,l=t.length-1;l>=0;l--)(n=t[l])&&(r=(s<3?n(r):s>3?n(i,o,r):n(i,o))||r);return s>3&&r&&Object.defineProperty(i,o,r),r}([o.customElement("mwc-icon")],pi);var fi=function(t,i,o,e){for(var n,s=arguments.length,r=s<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,o):e,l=t.length-1;l>=0;l--)(n=t[l])&&(r=(s<3?n(r):s>3?n(i,o,r):n(i,o))||r);return s>3&&r&&Object.defineProperty(i,o,r),r};const gi={zIndex:e.FtCssVariable.create("--ft-dialog-z-index","NUMBER","2"),overlayBackgroundColor:e.FtCssVariable.create("--ft-dialog-overlay-background-color","COLOR","rgba(0, 0, 0, 0.3)"),height:e.FtCssVariable.create("--ft-dialog-height","SIZE","unset"),width:e.FtCssVariable.create("--ft-dialog-width","SIZE","unset"),minWidth:e.FtCssVariable.create("--ft-dialog-min-width","SIZE","unset"),paddingTop:e.FtCssVariable.create("--ft-dialog-padding-top","SIZE","20px"),paddingSide:e.FtCssVariable.create("--ft-dialog-padding-side","SIZE","16px"),paddingButtons:e.FtCssVariable.create("--ft-dialog-padding-buttons","SIZE","20px"),colorSurface:e.FtCssVariable.external(e.designSystemVariables.colorSurface,"Design system"),headingColor:e.FtCssVariable.external(e.designSystemVariables.colorOnSurfaceMedium,"Design system"),borderRadiusS:e.FtCssVariable.external(e.designSystemVariables.borderRadiusS,"Design system"),elevation24:e.FtCssVariable.external(e.designSystemVariables.elevation24,"Design system")};let yi=class extends e.FtLitElement{constructor(){super(...arguments),this.opened=!1,this.closeOnEsc=!1,this.closeOnClickOutside=!1,this.heading="",this.icon=""}getStyles(){return i.css`
             .ft-dialog {
                 position: fixed;
                 top: 0;
                 right: 0;
                 bottom: 0;
                 left: 0;
-                z-index: ${pi.zIndex};
+                z-index: ${gi.zIndex};
 
                 display: flex;
                 flex-direction: column;
@@ -125,7 +151,7 @@ const B=t=>({_$litStatic$:t}),R=new Map,W=(t=>(i,...e)=>{var o;const s=e.length;
                 margin: auto;
             }
 
-            .ft-dialog_overlay {
+            .ft-dialog-overlay {
                 position: fixed;
                 top: 0;
                 right: 0;
@@ -135,39 +161,47 @@ const B=t=>({_$litStatic$:t}),R=new Map,W=(t=>(i,...e)=>{var o;const s=e.length;
                 height: 100%;
                 width: 100%;
 
-                background-color: ${pi.overlayBackgroundColor};
+                background-color: ${gi.overlayBackgroundColor};
 
             }
 
-            .ft-dialog_wrapper {
+            .ft-dialog-wrapper {
                 position: fixed;
                 display: flex;
                 flex-direction: column;
 
-                width: ${pi.width};
-                height: ${pi.height};
+                width: ${gi.width};
+                height: ${gi.height};
                 max-width: 95vw;
                 max-height: 95vh;
+                min-width: ${gi.minWidth};
+
+                padding-top: ${gi.paddingTop};
+                padding-right: ${gi.paddingSide};
+                padding-left: ${gi.paddingSide};
 
-                padding: ${pi.padding};
-                background-color: ${pi.colorSurface};
+                background-color: ${gi.colorSurface};
 
-                border-radius: ${pi.borderRadiusS};
-                box-shadow: ${pi.elevation24};
+                border-radius: ${gi.borderRadiusS};
+                box-shadow: ${gi.elevation24};
             }
 
-            .ft-dialog_content {
+            .ft-dialog-content {
                 flex-grow: 2;
                 overflow: auto;
             }
 
-            .ft-dialog_heading {
-                display: block;
-                margin-bottom: 12px;
+            .ft-dialog-heading {
+                display: flex;
+                align-items: center;
+                margin-bottom: 20px;
+                gap: 8px;
+
+                color: ${gi.headingColor};
             }
 
-            .ft-dialog_buttons {
-                margin-top: 12px;
+            .ft-dialog-buttons {
+                padding-top: ${gi.paddingButtons};
             }
 
             slot[name=buttons] {
@@ -175,19 +209,29 @@ const B=t=>({_$litStatic$:t}),R=new Map,W=(t=>(i,...e)=>{var o;const s=e.length;
                 align-items: center;
                 justify-content: flex-end;
             }
+
+            slot[name=buttons]::slotted(*) {
+                margin-top: 8px;
+                margin-bottom: 8px
+            }
+
         `}getTemplate(){return this.opened?i.html`
             <div class="ft-dialog">
-                <div class="ft-dialog_overlay" @click="${()=>this.watchClickOutside()}"></div>
-                <div class="ft-dialog_wrapper">
+                <div class="ft-dialog-overlay" @click="${()=>this.watchClickOutside()}"></div>
+                <div class="ft-dialog-wrapper">
                     ${this.heading?i.html`
-                        <ft-typography class="ft-dialog_heading" variant="title">${this.heading}</ft-typography>
+                        <div class="ft-dialog-heading">
+                            ${this.icon?i.html`
+                                <mwc-icon>${this.icon}</mwc-icon>`:void 0}
+                            <ft-typography element="span" variant="title">${this.heading}</ft-typography>
+                        </div>
                     `:null}
-                    <div class="ft-dialog_content">
+                    <div class="ft-dialog-content">
                         <slot></slot>
                     </div>
-                    <div class="ft-dialog_buttons">
+                    <div class="ft-dialog-buttons">
                         <slot name="buttons"></slot>
                     </div>
                 </div>
             </div>
-        `:null}updated(t){if(t.has("opened")){const t=new CustomEvent("opened-changed",{detail:{opened:this.opened}});this.dispatchEvent(t)}}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.watchEscapeKey.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.watchEscapeKey.bind(this))}close(){this.opened=!1}open(){this.opened=!0}watchEscapeKey(t){"Escape"===t.key&&this.closeOnEsc&&this.close()}watchClickOutside(){this.closeOnClickOutside&&this.close()}};fi.elementDefinitions={"ft-typography":li},ai([e.property({type:Boolean,hasChanged:(t,i)=>!1===i&&!0===t||!0===i&&!1===t})],fi.prototype,"opened",void 0),ai([e.property({type:Boolean})],fi.prototype,"closeOnEsc",void 0),ai([e.property({type:Boolean})],fi.prototype,"closeOnClickOutside",void 0),ai([e.property({type:String})],fi.prototype,"heading",void 0),fi=ai([o.customElement("ft-dialog")],fi);var yi=fi;t.FtDialogCssVariables=pi,t.default=yi,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.wcUtils);
+        `:null}updated(t){if(t.has("opened")){const t=new CustomEvent("opened-changed",{detail:{opened:this.opened}});this.dispatchEvent(t)}}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.watchEscapeKey.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.watchEscapeKey.bind(this))}close(){this.opened=!1}open(){this.opened=!0}watchEscapeKey(t){"Escape"===t.key&&this.closeOnEsc&&this.close()}watchClickOutside(){this.closeOnClickOutside&&this.close()}};yi.elementDefinitions={"ft-typography":ai,"mwc-icon":pi},fi([o.property({type:Boolean,hasChanged:(t,i)=>!1===i&&!0===t||!0===i&&!1===t})],yi.prototype,"opened",void 0),fi([o.property({type:Boolean})],yi.prototype,"closeOnEsc",void 0),fi([o.property({type:Boolean})],yi.prototype,"closeOnClickOutside",void 0),fi([o.property({type:String})],yi.prototype,"heading",void 0),fi([o.property({type:String})],yi.prototype,"icon",void 0),yi=fi([e.customElement("ft-dialog")],yi);var di=yi;t.FtDialogCssVariables=gi,t.default=di,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.wcUtils);

package/build/ft-dialog.min.js

@@ -15,24 +15,29 @@ const e=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShad
      * Copyright 2017 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
      */
-var v;g.finalized=!0,g.elementProperties=new Map,g.elementStyles=[],g.shadowRootOptions={mode:"open"},null==f||f({ReactiveElement:g}),(null!==(h=globalThis.reactiveElementVersions)&&void 0!==h?h:globalThis.reactiveElementVersions=[]).push("1.2.2");const b=globalThis.trustedTypes,m=b?b.createPolicy("lit-html",{createHTML:t=>t}):void 0,x=`lit$${(Math.random()+"").slice(9)}$`,w="?"+x,O=`<${w}>`,$=document,S=(t="")=>$.createComment(t),E=t=>null===t||"object"!=typeof t&&"function"!=typeof t,R=Array.isArray,N=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,C=/-->/g,M=/>/g,U=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,k=/'/g,F=/"/g,j=/^(?:script|style|textarea|title)$/i,L=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),T=Symbol.for("lit-noChange"),_=Symbol.for("lit-nothing"),A=new WeakMap,z=$.createTreeWalker($,129,null,!1),B=(t,e)=>{const i=t.length-1,o=[];let n,r=2===e?"<svg>":"",s=N;for(let e=0;e<i;e++){const i=t[e];let a,l,h=-1,c=0;for(;c<i.length&&(s.lastIndex=c,l=s.exec(i),null!==l);)c=s.lastIndex,s===N?"!--"===l[1]?s=C:void 0!==l[1]?s=M:void 0!==l[2]?(j.test(l[2])&&(n=RegExp("</"+l[2],"g")),s=U):void 0!==l[3]&&(s=U):s===U?">"===l[0]?(s=null!=n?n:N,h=-1):void 0===l[1]?h=-2:(h=s.lastIndex-l[2].length,a=l[1],s=void 0===l[3]?U:'"'===l[3]?F:k):s===F||s===k?s=U:s===C||s===M?s=N:(s=U,n=void 0);const p=s===U&&t[e+1].startsWith("/>")?" ":"";r+=s===N?i+O:h>=0?(o.push(a),i.slice(0,h)+"$lit$"+i.slice(h)+x+p):i+x+(-2===h?(o.push(void 0),e):p)}const a=r+(t[i]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==m?m.createHTML(a):a,o]};class P{constructor({strings:t,_$litType$:e},i){let o;this.parts=[];let n=0,r=0;const s=t.length-1,a=this.parts,[l,h]=B(t,e);if(this.el=P.createElement(l,i),z.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(o=z.nextNode())&&a.length<s;){if(1===o.nodeType){if(o.hasAttributes()){const t=[];for(const e of o.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(x)){const i=h[r++];if(t.push(e),void 0!==i){const t=o.getAttribute(i.toLowerCase()+"$lit$").split(x),e=/([.?@])?(.*)/.exec(i);a.push({type:1,index:n,name:e[2],strings:t,ctor:"."===e[1]?I:"?"===e[1]?V:"@"===e[1]?J:H})}else a.push({type:6,index:n})}for(const e of t)o.removeAttribute(e)}if(j.test(o.tagName)){const t=o.textContent.split(x),e=t.length-1;if(e>0){o.textContent=b?b.emptyScript:"";for(let i=0;i<e;i++)o.append(t[i],S()),z.nextNode(),a.push({type:2,index:++n});o.append(t[e],S())}}}else if(8===o.nodeType)if(o.data===w)a.push({type:2,index:n});else{let t=-1;for(;-1!==(t=o.data.indexOf(x,t+1));)a.push({type:7,index:n}),t+=x.length-1}n++}}static createElement(t,e){const i=$.createElement("template");return i.innerHTML=t,i}}function D(t,e,i=t,o){var n,r,s,a;if(e===T)return e;let l=void 0!==o?null===(n=i._$Cl)||void 0===n?void 0:n[o]:i._$Cu;const h=E(e)?void 0:e._$litDirective$;return(null==l?void 0:l.constructor)!==h&&(null===(r=null==l?void 0:l._$AO)||void 0===r||r.call(l,!1),void 0===h?l=void 0:(l=new h(t),l._$AT(t,i,o)),void 0!==o?(null!==(s=(a=i)._$Cl)&&void 0!==s?s:a._$Cl=[])[o]=l:i._$Cu=l),void 0!==l&&(e=D(t,l._$AS(t,e.values),l,o)),e}class W{constructor(t,e){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var e;const{el:{content:i},parts:o}=this._$AD,n=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:$).importNode(i,!0);z.currentNode=n;let r=z.nextNode(),s=0,a=0,l=o[0];for(;void 0!==l;){if(s===l.index){let e;2===l.type?e=new K(r,r.nextSibling,this,t):1===l.type?e=new l.ctor(r,l.name,l.strings,this,t):6===l.type&&(e=new X(r,this,t)),this.v.push(e),l=o[++a]}s!==(null==l?void 0:l.index)&&(r=z.nextNode(),s++)}return n}m(t){let e=0;for(const i of this.v)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class K{constructor(t,e,i,o){var n;this.type=2,this._$AH=_,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=o,this._$Cg=null===(n=null==o?void 0:o.isConnected)||void 0===n||n}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$Cg}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=D(this,t,e),E(t)?t===_||null==t||""===t?(this._$AH!==_&&this._$AR(),this._$AH=_):t!==this._$AH&&t!==T&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.S(t):(t=>{var e;return R(t)||"function"==typeof(null===(e=t)||void 0===e?void 0:e[Symbol.iterator])})(t)?this.A(t):this.$(t)}M(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}S(t){this._$AH!==t&&(this._$AR(),this._$AH=this.M(t))}$(t){this._$AH!==_&&E(this._$AH)?this._$AA.nextSibling.data=t:this.S($.createTextNode(t)),this._$AH=t}T(t){var e;const{values:i,_$litType$:o}=t,n="number"==typeof o?this._$AC(t):(void 0===o.el&&(o.el=P.createElement(o.h,this.options)),o);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===n)this._$AH.m(i);else{const t=new W(n,this),e=t.p(this.options);t.m(i),this.S(e),this._$AH=t}}_$AC(t){let e=A.get(t.strings);return void 0===e&&A.set(t.strings,e=new P(t)),e}A(t){R(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,o=0;for(const n of t)o===e.length?e.push(i=new K(this.M(S()),this.M(S()),this,this.options)):i=e[o],i._$AI(n),o++;o<e.length&&(this._$AR(i&&i._$AB.nextSibling,o),e.length=o)}_$AR(t=this._$AA.nextSibling,e){var i;for(null===(i=this._$AP)||void 0===i||i.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cg=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class H{constructor(t,e,i,o,n){this.type=1,this._$AH=_,this._$AN=void 0,this.element=t,this.name=e,this._$AM=o,this.options=n,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=_}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,i,o){const n=this.strings;let r=!1;if(void 0===n)t=D(this,t,e,0),r=!E(t)||t!==this._$AH&&t!==T,r&&(this._$AH=t);else{const o=t;let s,a;for(t=n[0],s=0;s<n.length-1;s++)a=D(this,o[i+s],e,s),a===T&&(a=this._$AH[s]),r||(r=!E(a)||a!==this._$AH[s]),a===_?t=_:t!==_&&(t+=(null!=a?a:"")+n[s+1]),this._$AH[s]=a}r&&!o&&this.k(t)}k(t){t===_?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class I extends H{constructor(){super(...arguments),this.type=3}k(t){this.element[this.name]=t===_?void 0:t}}const Z=b?b.emptyScript:"";class V extends H{constructor(){super(...arguments),this.type=4}k(t){t&&t!==_?this.element.setAttribute(this.name,Z):this.element.removeAttribute(this.name)}}class J extends H{constructor(t,e,i,o,n){super(t,e,i,o,n),this.type=5}_$AI(t,e=this){var i;if((t=null!==(i=D(this,t,e,0))&&void 0!==i?i:_)===T)return;const o=this._$AH,n=t===_&&o!==_||t.capture!==o.capture||t.once!==o.once||t.passive!==o.passive,r=t!==_&&(o===_||n);n&&this.element.removeEventListener(this.name,this,o),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,i;"function"==typeof this._$AH?this._$AH.call(null!==(i=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==i?i:this.element,t):this._$AH.handleEvent(t)}}class X{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){D(this,t)}}const q=window.litHtmlPolyfillSupport;
+var v;g.finalized=!0,g.elementProperties=new Map,g.elementStyles=[],g.shadowRootOptions={mode:"open"},null==f||f({ReactiveElement:g}),(null!==(h=globalThis.reactiveElementVersions)&&void 0!==h?h:globalThis.reactiveElementVersions=[]).push("1.2.2");const m=globalThis.trustedTypes,b=m?m.createPolicy("lit-html",{createHTML:t=>t}):void 0,x=`lit$${(Math.random()+"").slice(9)}$`,w="?"+x,O=`<${w}>`,$=document,S=(t="")=>$.createComment(t),E=t=>null===t||"object"!=typeof t&&"function"!=typeof t,R=Array.isArray,N=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,C=/-->/g,M=/>/g,U=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,k=/'/g,F=/"/g,j=/^(?:script|style|textarea|title)$/i,L=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),z=Symbol.for("lit-noChange"),T=Symbol.for("lit-nothing"),A=new WeakMap,B=$.createTreeWalker($,129,null,!1),P=(t,e)=>{const i=t.length-1,o=[];let n,r=2===e?"<svg>":"",s=N;for(let e=0;e<i;e++){const i=t[e];let a,l,h=-1,c=0;for(;c<i.length&&(s.lastIndex=c,l=s.exec(i),null!==l);)c=s.lastIndex,s===N?"!--"===l[1]?s=C:void 0!==l[1]?s=M:void 0!==l[2]?(j.test(l[2])&&(n=RegExp("</"+l[2],"g")),s=U):void 0!==l[3]&&(s=U):s===U?">"===l[0]?(s=null!=n?n:N,h=-1):void 0===l[1]?h=-2:(h=s.lastIndex-l[2].length,a=l[1],s=void 0===l[3]?U:'"'===l[3]?F:k):s===F||s===k?s=U:s===C||s===M?s=N:(s=U,n=void 0);const p=s===U&&t[e+1].startsWith("/>")?" ":"";r+=s===N?i+O:h>=0?(o.push(a),i.slice(0,h)+"$lit$"+i.slice(h)+x+p):i+x+(-2===h?(o.push(void 0),e):p)}const a=r+(t[i]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==b?b.createHTML(a):a,o]};class _{constructor({strings:t,_$litType$:e},i){let o;this.parts=[];let n=0,r=0;const s=t.length-1,a=this.parts,[l,h]=P(t,e);if(this.el=_.createElement(l,i),B.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(o=B.nextNode())&&a.length<s;){if(1===o.nodeType){if(o.hasAttributes()){const t=[];for(const e of o.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(x)){const i=h[r++];if(t.push(e),void 0!==i){const t=o.getAttribute(i.toLowerCase()+"$lit$").split(x),e=/([.?@])?(.*)/.exec(i);a.push({type:1,index:n,name:e[2],strings:t,ctor:"."===e[1]?H:"?"===e[1]?V:"@"===e[1]?J:K})}else a.push({type:6,index:n})}for(const e of t)o.removeAttribute(e)}if(j.test(o.tagName)){const t=o.textContent.split(x),e=t.length-1;if(e>0){o.textContent=m?m.emptyScript:"";for(let i=0;i<e;i++)o.append(t[i],S()),B.nextNode(),a.push({type:2,index:++n});o.append(t[e],S())}}}else if(8===o.nodeType)if(o.data===w)a.push({type:2,index:n});else{let t=-1;for(;-1!==(t=o.data.indexOf(x,t+1));)a.push({type:7,index:n}),t+=x.length-1}n++}}static createElement(t,e){const i=$.createElement("template");return i.innerHTML=t,i}}function D(t,e,i=t,o){var n,r,s,a;if(e===z)return e;let l=void 0!==o?null===(n=i._$Cl)||void 0===n?void 0:n[o]:i._$Cu;const h=E(e)?void 0:e._$litDirective$;return(null==l?void 0:l.constructor)!==h&&(null===(r=null==l?void 0:l._$AO)||void 0===r||r.call(l,!1),void 0===h?l=void 0:(l=new h(t),l._$AT(t,i,o)),void 0!==o?(null!==(s=(a=i)._$Cl)&&void 0!==s?s:a._$Cl=[])[o]=l:i._$Cu=l),void 0!==l&&(e=D(t,l._$AS(t,e.values),l,o)),e}class W{constructor(t,e){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var e;const{el:{content:i},parts:o}=this._$AD,n=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:$).importNode(i,!0);B.currentNode=n;let r=B.nextNode(),s=0,a=0,l=o[0];for(;void 0!==l;){if(s===l.index){let e;2===l.type?e=new I(r,r.nextSibling,this,t):1===l.type?e=new l.ctor(r,l.name,l.strings,this,t):6===l.type&&(e=new X(r,this,t)),this.v.push(e),l=o[++a]}s!==(null==l?void 0:l.index)&&(r=B.nextNode(),s++)}return n}m(t){let e=0;for(const i of this.v)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class I{constructor(t,e,i,o){var n;this.type=2,this._$AH=T,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=o,this._$Cg=null===(n=null==o?void 0:o.isConnected)||void 0===n||n}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$Cg}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=D(this,t,e),E(t)?t===T||null==t||""===t?(this._$AH!==T&&this._$AR(),this._$AH=T):t!==this._$AH&&t!==z&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.S(t):(t=>{var e;return R(t)||"function"==typeof(null===(e=t)||void 0===e?void 0:e[Symbol.iterator])})(t)?this.A(t):this.$(t)}M(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}S(t){this._$AH!==t&&(this._$AR(),this._$AH=this.M(t))}$(t){this._$AH!==T&&E(this._$AH)?this._$AA.nextSibling.data=t:this.S($.createTextNode(t)),this._$AH=t}T(t){var e;const{values:i,_$litType$:o}=t,n="number"==typeof o?this._$AC(t):(void 0===o.el&&(o.el=_.createElement(o.h,this.options)),o);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===n)this._$AH.m(i);else{const t=new W(n,this),e=t.p(this.options);t.m(i),this.S(e),this._$AH=t}}_$AC(t){let e=A.get(t.strings);return void 0===e&&A.set(t.strings,e=new _(t)),e}A(t){R(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,o=0;for(const n of t)o===e.length?e.push(i=new I(this.M(S()),this.M(S()),this,this.options)):i=e[o],i._$AI(n),o++;o<e.length&&(this._$AR(i&&i._$AB.nextSibling,o),e.length=o)}_$AR(t=this._$AA.nextSibling,e){var i;for(null===(i=this._$AP)||void 0===i||i.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cg=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class K{constructor(t,e,i,o,n){this.type=1,this._$AH=T,this._$AN=void 0,this.element=t,this.name=e,this._$AM=o,this.options=n,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=T}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,i,o){const n=this.strings;let r=!1;if(void 0===n)t=D(this,t,e,0),r=!E(t)||t!==this._$AH&&t!==z,r&&(this._$AH=t);else{const o=t;let s,a;for(t=n[0],s=0;s<n.length-1;s++)a=D(this,o[i+s],e,s),a===z&&(a=this._$AH[s]),r||(r=!E(a)||a!==this._$AH[s]),a===T?t=T:t!==T&&(t+=(null!=a?a:"")+n[s+1]),this._$AH[s]=a}r&&!o&&this.k(t)}k(t){t===T?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class H extends K{constructor(){super(...arguments),this.type=3}k(t){this.element[this.name]=t===T?void 0:t}}const Z=m?m.emptyScript:"";class V extends K{constructor(){super(...arguments),this.type=4}k(t){t&&t!==T?this.element.setAttribute(this.name,Z):this.element.removeAttribute(this.name)}}class J extends K{constructor(t,e,i,o,n){super(t,e,i,o,n),this.type=5}_$AI(t,e=this){var i;if((t=null!==(i=D(this,t,e,0))&&void 0!==i?i:T)===z)return;const o=this._$AH,n=t===T&&o!==T||t.capture!==o.capture||t.once!==o.once||t.passive!==o.passive,r=t!==T&&(o===T||n);n&&this.element.removeEventListener(this.name,this,o),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,i;"function"==typeof this._$AH?this._$AH.call(null!==(i=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==i?i:this.element,t):this._$AH.handleEvent(t)}}class X{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){D(this,t)}}const q=window.litHtmlPolyfillSupport;
 /**
      * @license
      * Copyright 2017 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
      */
-var G,Q;null==q||q(P,K),(null!==(v=globalThis.litHtmlVersions)&&void 0!==v?v:globalThis.litHtmlVersions=[]).push("2.1.3");class Y extends g{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Dt=((t,e,i)=>{var o,n;const r=null!==(o=null==i?void 0:i.renderBefore)&&void 0!==o?o:e;let s=r._$litPart$;if(void 0===s){const t=null!==(n=null==i?void 0:i.renderBefore)&&void 0!==n?n:null;r._$litPart$=s=new K(e.insertBefore(S(),t),t,void 0,null!=i?i:{})}return s._$AI(t),s})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!1)}render(){return T}}Y.finalized=!0,Y._$litElement$=!0,null===(G=globalThis.litElementHydrateSupport)||void 0===G||G.call(globalThis,{LitElement:Y});const tt=globalThis.litElementPolyfillSupport;null==tt||tt({LitElement:Y}),(null!==(Q=globalThis.litElementVersions)&&void 0!==Q?Q:globalThis.litElementVersions=[]).push("3.1.2");
+var G,Q;null==q||q(_,I),(null!==(v=globalThis.litHtmlVersions)&&void 0!==v?v:globalThis.litHtmlVersions=[]).push("2.1.3");class Y extends g{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Dt=((t,e,i)=>{var o,n;const r=null!==(o=null==i?void 0:i.renderBefore)&&void 0!==o?o:e;let s=r._$litPart$;if(void 0===s){const t=null!==(n=null==i?void 0:i.renderBefore)&&void 0!==n?n:null;r._$litPart$=s=new I(e.insertBefore(S(),t),t,void 0,null!=i?i:{})}return s._$AI(t),s})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Dt)||void 0===t||t.setConnected(!1)}render(){return z}}Y.finalized=!0,Y._$litElement$=!0,null===(G=globalThis.litElementHydrateSupport)||void 0===G||G.call(globalThis,{LitElement:Y});const tt=globalThis.litElementPolyfillSupport;null==tt||tt({LitElement:Y}),(null!==(Q=globalThis.litElementVersions)&&void 0!==Q?Q:globalThis.litElementVersions=[]).push("3.1.2");
 /**
      * @license
      * Copyright 2017 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
      */
-const et=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(i){i.createProperty(e.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(i){i.createProperty(e.key,t)}};function it(t){return(e,i)=>void 0!==i?((t,e,i)=>{e.constructor.createProperty(i,t)})(t,e,i):et(t,e)
+const et=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(i){i.createProperty(e.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(i){i.createProperty(e.key,t)}};
+/**
+     * @license
+     * Copyright 2017 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */function it(t){return(e,i)=>void 0!==i?((t,e,i)=>{e.constructor.createProperty(i,t)})(t,e,i):et(t,e)
 /**
      * @license
      * Copyright 2021 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
-     */}var ot;null===(ot=window.HTMLSlotElement)||void 0===ot||ot.prototype.assignedElements,function(){function t(t){var e=0;return function(){return e<t.length?{done:!1,value:t[e++]}:{done:!0}}}function e(e){var i="undefined"!=typeof Symbol&&Symbol.iterator&&e[Symbol.iterator];return i?i.call(e):{next:t(e)}}function i(t){if(!(t instanceof Array)){t=e(t);for(var i,o=[];!(i=t.next()).done;)o.push(i.value);t=o}return t}var o="function"==typeof Object.create?Object.create:function(t){function e(){}return e.prototype=t,new e};var n,r=function(t){t=["object"==typeof globalThis&&globalThis,t,"object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global];for(var e=0;e<t.length;++e){var i=t[e];if(i&&i.Math==Math)return i}throw Error("Cannot find global object")}(this),s=function(){if("undefined"!=typeof Reflect&&Reflect.construct){if(function(){function t(){}return Reflect.construct(t,[],(function(){})),new t instanceof t}())return Reflect.construct;var t=Reflect.construct;return function(e,i,o){return e=t(e,i),o&&Reflect.setPrototypeOf(e,o.prototype),e}}return function(t,e,i){return void 0===i&&(i=t),i=o(i.prototype||Object.prototype),Function.prototype.apply.call(t,i,e)||i}}();if("function"==typeof Object.setPrototypeOf)n=Object.setPrototypeOf;else{var a;t:{var l={};try{l.__proto__={a:!0},a=l.a;break t}catch(t){}a=!1}n=a?function(t,e){if(t.__proto__=e,t.__proto__!==e)throw new TypeError(t+" is not extensible");return t}:null}var h=n;if(!ShadowRoot.prototype.createElement){var c,p=window.HTMLElement,f=window.customElements.define,u=window.customElements.get,d=window.customElements,y=new WeakMap,g=new WeakMap,v=new WeakMap,b=new WeakMap;window.CustomElementRegistry=function(){this.l=new Map,this.o=new Map,this.i=new Map,this.h=new Map},window.CustomElementRegistry.prototype.define=function(t,i){if(t=t.toLowerCase(),void 0!==this.j(t))throw new DOMException("Failed to execute 'define' on 'CustomElementRegistry': the name \""+t+'" has already been used with this registry');if(void 0!==this.o.get(i))throw new DOMException("Failed to execute 'define' on 'CustomElementRegistry': this constructor has already been used with this registry");var o=i.prototype.attributeChangedCallback,n=new Set(i.observedAttributes||[]);if(x(i,n,o),o={g:i,connectedCallback:i.prototype.connectedCallback,disconnectedCallback:i.prototype.disconnectedCallback,adoptedCallback:i.prototype.adoptedCallback,attributeChangedCallback:o,formAssociated:i.formAssociated,formAssociatedCallback:i.prototype.formAssociatedCallback,formDisabledCallback:i.prototype.formDisabledCallback,formResetCallback:i.prototype.formResetCallback,formStateRestoreCallback:i.prototype.formStateRestoreCallback,observedAttributes:n},this.l.set(t,o),this.o.set(i,o),(n=u.call(d,t))||(n=m(t),f.call(d,t,n)),this===window.customElements&&(v.set(i,o),o.s=n),n=this.h.get(t)){this.h.delete(t);for(var r=(n=e(n)).next();!r.done;r=n.next())r=r.value,g.delete(r),O(r,o,!0)}return void 0!==(o=this.i.get(t))&&(o.resolve(i),this.i.delete(t)),i},window.CustomElementRegistry.prototype.upgrade=function(){S.push(this),d.upgrade.apply(d,arguments),S.pop()},window.CustomElementRegistry.prototype.get=function(t){var e;return null==(e=this.l.get(t))?void 0:e.g},window.CustomElementRegistry.prototype.j=function(t){return this.l.get(t)},window.CustomElementRegistry.prototype.whenDefined=function(t){var e=this.j(t);if(void 0!==e)return Promise.resolve(e.g);var i=this.i.get(t);return void 0===i&&((i={}).promise=new Promise((function(t){return i.resolve=t})),this.i.set(t,i)),i.promise},window.CustomElementRegistry.prototype.m=function(t,e,i){var o=this.h.get(e);o||this.h.set(e,o=new Set),i?o.add(t):o.delete(t)},window.HTMLElement=function(){var t=c;if(t)return c=void 0,t;var e=v.get(this.constructor);if(!e)throw new TypeError("Illegal constructor (custom element class must be registered with global customElements registry to be newable)");return t=Reflect.construct(p,[],e.s),Object.setPrototypeOf(t,this.constructor.prototype),y.set(t,e),t},window.HTMLElement.prototype=p.prototype;var m=function(t){function e(){var e=Reflect.construct(p,[],this.constructor);Object.setPrototypeOf(e,HTMLElement.prototype);t:{var i=e.getRootNode();if(!(i===document||i instanceof ShadowRoot)){if((i=S[S.length-1])instanceof CustomElementRegistry){var o=i;break t}(i=i.getRootNode())===document||i instanceof ShadowRoot||(i=(null==(o=b.get(i))?void 0:o.getRootNode())||document)}o=i.customElements}return(i=(o=o||window.customElements).j(t))?O(e,i):g.set(e,o),e}return r.Object.defineProperty(e,"formAssociated",{configurable:!0,enumerable:!0,get:function(){return!0}}),e.prototype.connectedCallback=function(){var e=y.get(this);e?e.connectedCallback&&e.connectedCallback.apply(this,arguments):g.get(this).m(this,t,!0)},e.prototype.disconnectedCallback=function(){var e=y.get(this);e?e.disconnectedCallback&&e.disconnectedCallback.apply(this,arguments):g.get(this).m(this,t,!1)},e.prototype.adoptedCallback=function(){var t,e;null==(t=y.get(this))||null==(e=t.adoptedCallback)||e.apply(this,arguments)},e.prototype.formAssociatedCallback=function(){var t,e=y.get(this);e&&e.formAssociated&&(null==e||null==(t=e.formAssociatedCallback)||t.apply(this,arguments))},e.prototype.formDisabledCallback=function(){var t,e=y.get(this);null!=e&&e.formAssociated&&(null==e||null==(t=e.formDisabledCallback)||t.apply(this,arguments))},e.prototype.formResetCallback=function(){var t,e=y.get(this);null!=e&&e.formAssociated&&(null==e||null==(t=e.formResetCallback)||t.apply(this,arguments))},e.prototype.formStateRestoreCallback=function(){var t,e=y.get(this);null!=e&&e.formAssociated&&(null==e||null==(t=e.formStateRestoreCallback)||t.apply(this,arguments))},e},x=function(t,e,i){if(0!==e.size&&void 0!==i){var o=t.prototype.setAttribute;o&&(t.prototype.setAttribute=function(t,n){if(t=t.toLowerCase(),e.has(t)){var r=this.getAttribute(t);o.call(this,t,n),i.call(this,t,r,n)}else o.call(this,t,n)});var n=t.prototype.removeAttribute;n&&(t.prototype.removeAttribute=function(t){if(t=t.toLowerCase(),e.has(t)){var o=this.getAttribute(t);n.call(this,t),i.call(this,t,o,null)}else n.call(this,t)})}},w=function(t){var e=Object.getPrototypeOf(t);if(e!==window.HTMLElement)return e===p?Object.setPrototypeOf(t,window.HTMLElement):w(e)},O=function(t,e,i){i=void 0!==i&&i,Object.setPrototypeOf(t,e.g.prototype),y.set(t,e),c=t;try{new e.g}catch(t){w(e.g),new e.g}e.observedAttributes.forEach((function(i){t.hasAttribute(i)&&e.attributeChangedCallback.call(t,i,null,t.getAttribute(i))})),i&&e.connectedCallback&&t.isConnected&&e.connectedCallback.call(t)},$=Element.prototype.attachShadow;Element.prototype.attachShadow=function(t){var e=$.apply(this,arguments);return t.customElements&&(e.customElements=t.customElements),e};var S=[document],E=function(t,e,i){var o=(i?Object.getPrototypeOf(i):t.prototype)[e];t.prototype[e]=function(){S.push(this);var t=o.apply(i||this,arguments);return void 0!==t&&b.set(t,this),S.pop(),t}};E(ShadowRoot,"createElement",document),E(ShadowRoot,"importNode",document),E(Element,"insertAdjacentHTML");var R=function(t){var e=Object.getOwnPropertyDescriptor(t.prototype,"innerHTML");Object.defineProperty(t.prototype,"innerHTML",Object.assign({},e,{set:function(t){S.push(this),e.set.call(this,t),S.pop()}}))};if(R(Element),R(ShadowRoot),Object.defineProperty(window,"customElements",{value:new CustomElementRegistry,configurable:!0,writable:!0}),window.ElementInternals&&window.ElementInternals.prototype.setFormValue){var N=new WeakMap,C=HTMLElement.prototype.attachInternals;HTMLElement.prototype.attachInternals=function(t){for(var e=[],o=0;o<arguments.length;++o)e[o]=arguments[o];return e=C.call.apply(C,[this].concat(i(e))),N.set(e,this),e},["setFormValue","setValidity","checkValidity","reportValidity"].forEach((function(t){var e=window.ElementInternals.prototype,o=e[t];e[t]=function(t){for(var e=[],n=0;n<arguments.length;++n)e[n]=arguments[n];if(n=N.get(this),!0!==y.get(n).formAssociated)throw new DOMException("Failed to execute "+o+" on 'ElementInternals': The target element is not a form-associated custom element.");null==o||o.call.apply(o,[this].concat(i(e)))}}));var M=function(t){var e=s(Array,[].concat(i(t)),this.constructor);return e.h=t,e},U=M,k=Array;if(U.prototype=o(k.prototype),U.prototype.constructor=U,h)h(U,k);else for(var F in k)if("prototype"!=F)if(Object.defineProperties){var j=Object.getOwnPropertyDescriptor(k,F);j&&Object.defineProperty(U,F,j)}else U[F]=k[F];U.u=k.prototype,r.Object.defineProperty(M.prototype,"value",{configurable:!0,enumerable:!0,get:function(){var t;return(null==(t=this.h.find((function(t){return!0===t.checked})))?void 0:t.value)||""}});var L=function(t){var e=this,i=new Map;t.forEach((function(t,o){var n=t.getAttribute("name"),r=i.get(n)||[];e[+o]=t,r.push(t),i.set(n,r)})),this.length=t.length,i.forEach((function(t,i){t&&(e[i]=1===t.length?t[0]:new M(t))}))};L.prototype.namedItem=function(t){return this[t]};var T=Object.getOwnPropertyDescriptor(HTMLFormElement.prototype,"elements");Object.defineProperty(HTMLFormElement.prototype,"elements",{get:function(){for(var t=T.get.call(this,[]),i=[],o=(t=e(t)).next();!o.done;o=t.next()){o=o.value;var n=y.get(o);n&&!0!==n.formAssociated||i.push(o)}return new L(i)}})}}}.call(self);try{window.customElements.define("custom-element",null)}catch(t){const e=window.customElements.define;window.customElements.define=(t,i,o)=>{try{e.bind(window.customElements)(t,i,o)}catch(e){console.warn(t,i,o,e)}}}const nt=t=>e=>{window.customElements.get(t)||window.customElements.define(t,e)};class rt{constructor(t,e,i,o,n){this.name=t,this.category=e,this.fallbackVariable=i,this.defaultValue=o,this.context=n,this._$cssResult$=!0,this.value=this.get()}get cssText(){return this.value.cssText}get styleSheet(){return this.value.styleSheet}toString(){return this.value.toString()}static create(t,e,i){return new rt(t,e,void 0,i)}static extend(t,e,i){return new rt(t,e.category,e,i)}static external(t,e){return new rt(t.name,t.category,t.fallbackVariable,t.defaultValue,e)}get(t){return s`var(${r(this.name)}, ${this.defaultCssValue(t)})`}defaultCssValue(t){return this.fallbackVariable?this.fallbackVariable.get(null!=t?t:this.defaultValue):r(null!=t?t:this.defaultValue)}lastResortDefaultValue(){var t,e;return null!==(t=this.defaultValue)&&void 0!==t?t:null===(e=this.fallbackVariable)||void 0===e?void 0:e.lastResortDefaultValue()}breadcrumb(){return this.fallbackVariable?[this.fallbackVariable.name,...this.fallbackVariable.breadcrumb()]:[]}}const st={colorPrimary:rt.create("--ft-color-primary","COLOR","#2196F3"),colorPrimaryVariant:rt.create("--ft-color-primary-variant","COLOR","#1976D2"),colorSecondary:rt.create("--ft-color-secondary","COLOR","#FFCC80"),colorSecondaryVariant:rt.create("--ft-color-secondary-variant","COLOR","#F57C00"),colorSurface:rt.create("--ft-color-surface","COLOR","#FFFFFF"),colorContent:rt.create("--ft-color-content","COLOR","rgba(0, 0, 0, 0.87)"),colorError:rt.create("--ft-color-error","COLOR","#B00020"),colorOutline:rt.create("--ft-color-outline","COLOR","rgba(0, 0, 0, 0.14)"),colorOpacityHigh:rt.create("--ft-color-opacity-high","NUMBER","1"),colorOpacityMedium:rt.create("--ft-color-opacity-medium","NUMBER","0.74"),colorOpacityDisabled:rt.create("--ft-color-opacity-disabled","NUMBER","0.38"),colorOnPrimary:rt.create("--ft-color-on-primary","COLOR","#FFFFFF"),colorOnPrimaryHigh:rt.create("--ft-color-on-primary-high","COLOR","#FFFFFF"),colorOnPrimaryMedium:rt.create("--ft-color-on-primary-medium","COLOR","rgba(255, 255, 255, 0.74)"),colorOnPrimaryDisabled:rt.create("--ft-color-on-primary-disabled","COLOR","rgba(255, 255, 255, 0.38)"),colorOnSecondary:rt.create("--ft-color-on-secondary","COLOR","#FFFFFF"),colorOnSecondaryHigh:rt.create("--ft-color-on-secondary-high","COLOR","#FFFFFF"),colorOnSecondaryMedium:rt.create("--ft-color-on-secondary-medium","COLOR","rgba(255, 255, 255, 0.74)"),colorOnSecondaryDisabled:rt.create("--ft-color-on-secondary-disabled","COLOR","rgba(255, 255, 255, 0.38)"),colorOnSurface:rt.create("--ft-color-on-surface","COLOR","rgba(0, 0, 0, 0.87)"),colorOnSurfaceHigh:rt.create("--ft-color-on-surface-high","COLOR","rgba(0, 0, 0, 0.87)"),colorOnSurfaceMedium:rt.create("--ft-color-on-surface-medium","COLOR","rgba(0, 0, 0, 0.60)"),colorOnSurfaceDisabled:rt.create("--ft-color-on-surface-disabled","COLOR","rgba(0, 0, 0, 0.38)"),opacityContentOnSurfaceDisabled:rt.create("--ft-opacity-content-on-surface-disabled","NUMBER","0"),opacityContentOnSurfaceEnable:rt.create("--ft-opacity-content-on-surface-enable","NUMBER","0"),opacityContentOnSurfaceHover:rt.create("--ft-opacity-content-on-surface-hover","NUMBER","0.04"),opacityContentOnSurfaceFocused:rt.create("--ft-opacity-content-on-surface-focused","NUMBER","0.12"),opacityContentOnSurfacePressed:rt.create("--ft-opacity-content-on-surface-pressed","NUMBER","0.10"),opacityContentOnSurfaceSelected:rt.create("--ft-opacity-content-on-surface-selected","NUMBER","0.08"),opacityContentOnSurfaceDragged:rt.create("--ft-opacity-content-on-surface-dragged","NUMBER","0.08"),opacityPrimaryOnSurfaceDisabled:rt.create("--ft-opacity-primary-on-surface-disabled","NUMBER","0"),opacityPrimaryOnSurfaceEnable:rt.create("--ft-opacity-primary-on-surface-enable","NUMBER","0"),opacityPrimaryOnSurfaceHover:rt.create("--ft-opacity-primary-on-surface-hover","NUMBER","0.04"),opacityPrimaryOnSurfaceFocused:rt.create("--ft-opacity-primary-on-surface-focused","NUMBER","0.12"),opacityPrimaryOnSurfacePressed:rt.create("--ft-opacity-primary-on-surface-pressed","NUMBER","0.10"),opacityPrimaryOnSurfaceSelected:rt.create("--ft-opacity-primary-on-surface-selected","NUMBER","0.08"),opacityPrimaryOnSurfaceDragged:rt.create("--ft-opacity-primary-on-surface-dragged","NUMBER","0.08"),opacitySurfaceOnPrimaryDisabled:rt.create("--ft-opacity-surface-on-primary-disabled","NUMBER","0"),opacitySurfaceOnPrimaryEnable:rt.create("--ft-opacity-surface-on-primary-enable","NUMBER","0"),opacitySurfaceOnPrimaryHover:rt.create("--ft-opacity-surface-on-primary-hover","NUMBER","0.04"),opacitySurfaceOnPrimaryFocused:rt.create("--ft-opacity-surface-on-primary-focused","NUMBER","0.12"),opacitySurfaceOnPrimaryPressed:rt.create("--ft-opacity-surface-on-primary-pressed","NUMBER","0.10"),opacitySurfaceOnPrimarySelected:rt.create("--ft-opacity-surface-on-primary-selected","NUMBER","0.08"),opacitySurfaceOnPrimaryDragged:rt.create("--ft-opacity-surface-on-primary-dragged","NUMBER","0.08"),elevation00:rt.create("--ft-elevation-00","UNKNOWN","0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0)"),elevation01:rt.create("--ft-elevation-01","UNKNOWN","0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)"),elevation02:rt.create("--ft-elevation-02","UNKNOWN","0px 4px 10px 0px rgba(0, 0, 0, 0.06), 0px 2px 5px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)"),elevation03:rt.create("--ft-elevation-03","UNKNOWN","0px 6px 13px 0px rgba(0, 0, 0, 0.06), 0px 3px 7px 0px rgba(0, 0, 0, 0.14), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"),elevation04:rt.create("--ft-elevation-04","UNKNOWN","0px 8px 16px 0px rgba(0, 0, 0, 0.06), 0px 4px 9px 0px rgba(0, 0, 0, 0.14), 0px 2px 3px 0px rgba(0, 0, 0, 0.06)"),elevation06:rt.create("--ft-elevation-06","UNKNOWN","0px 12px 22px 0px rgba(0, 0, 0, 0.06), 0px 6px 13px 0px rgba(0, 0, 0, 0.14), 0px 4px 5px 0px rgba(0, 0, 0, 0.06)"),elevation08:rt.create("--ft-elevation-08","UNKNOWN","0px 16px 28px 0px rgba(0, 0, 0, 0.06), 0px 8px 17px 0px rgba(0, 0, 0, 0.14), 0px 6px 7px 0px rgba(0, 0, 0, 0.06)"),elevation12:rt.create("--ft-elevation-12","UNKNOWN","0px 22px 40px 0px rgba(0, 0, 0, 0.06), 0px 12px 23px 0px rgba(0, 0, 0, 0.14), 0px 10px 11px 0px rgba(0, 0, 0, 0.06)"),elevation16:rt.create("--ft-elevation-16","UNKNOWN","0px 28px 52px 0px rgba(0, 0, 0, 0.06), 0px 16px 29px 0px rgba(0, 0, 0, 0.14), 0px 14px 15px 0px rgba(0, 0, 0, 0.06)"),elevation24:rt.create("--ft-elevation-24","UNKNOWN","0px 40px 76px 0px rgba(0, 0, 0, 0.06), 0px 24px 41px 0px rgba(0, 0, 0, 0.14), 0px 22px 23px 0px rgba(0, 0, 0, 0.06)"),borderRadiusS:rt.create("--ft-border-radius-S","SIZE","4px"),borderRadiusM:rt.create("--ft-border-radius-M","SIZE","8px"),borderRadiusL:rt.create("--ft-border-radius-L","SIZE","12px"),borderRadiusXL:rt.create("--ft-border-radius-XL","SIZE","16px"),titleFont:rt.create("--ft-title-font","UNKNOWN","Ubuntu, system-ui, sans-serif"),contentFont:rt.create("--ft-content-font","UNKNOWN","'Open Sans', system-ui, sans-serif"),transitionDuration:rt.create("--ft-transition-duration","UNKNOWN","250ms"),transitionTimingFunction:rt.create("--ft-transition-timing-function","UNKNOWN","ease-in-out")};
+     */}var ot;null===(ot=window.HTMLSlotElement)||void 0===ot||ot.prototype.assignedElements,function(){function t(t){var e=0;return function(){return e<t.length?{done:!1,value:t[e++]}:{done:!0}}}function e(e){var i="undefined"!=typeof Symbol&&Symbol.iterator&&e[Symbol.iterator];return i?i.call(e):{next:t(e)}}function i(t){if(!(t instanceof Array)){t=e(t);for(var i,o=[];!(i=t.next()).done;)o.push(i.value);t=o}return t}var o="function"==typeof Object.create?Object.create:function(t){function e(){}return e.prototype=t,new e};var n,r=function(t){t=["object"==typeof globalThis&&globalThis,t,"object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global];for(var e=0;e<t.length;++e){var i=t[e];if(i&&i.Math==Math)return i}throw Error("Cannot find global object")}(this),s=function(){if("undefined"!=typeof Reflect&&Reflect.construct){if(function(){function t(){}return Reflect.construct(t,[],(function(){})),new t instanceof t}())return Reflect.construct;var t=Reflect.construct;return function(e,i,o){return e=t(e,i),o&&Reflect.setPrototypeOf(e,o.prototype),e}}return function(t,e,i){return void 0===i&&(i=t),i=o(i.prototype||Object.prototype),Function.prototype.apply.call(t,i,e)||i}}();if("function"==typeof Object.setPrototypeOf)n=Object.setPrototypeOf;else{var a;t:{var l={};try{l.__proto__={a:!0},a=l.a;break t}catch(t){}a=!1}n=a?function(t,e){if(t.__proto__=e,t.__proto__!==e)throw new TypeError(t+" is not extensible");return t}:null}var h=n;if(!ShadowRoot.prototype.createElement){var c,p=window.HTMLElement,f=window.customElements.define,u=window.customElements.get,d=window.customElements,y=new WeakMap,g=new WeakMap,v=new WeakMap,m=new WeakMap;window.CustomElementRegistry=function(){this.l=new Map,this.o=new Map,this.i=new Map,this.h=new Map},window.CustomElementRegistry.prototype.define=function(t,i){if(t=t.toLowerCase(),void 0!==this.j(t))throw new DOMException("Failed to execute 'define' on 'CustomElementRegistry': the name \""+t+'" has already been used with this registry');if(void 0!==this.o.get(i))throw new DOMException("Failed to execute 'define' on 'CustomElementRegistry': this constructor has already been used with this registry");var o=i.prototype.attributeChangedCallback,n=new Set(i.observedAttributes||[]);if(x(i,n,o),o={g:i,connectedCallback:i.prototype.connectedCallback,disconnectedCallback:i.prototype.disconnectedCallback,adoptedCallback:i.prototype.adoptedCallback,attributeChangedCallback:o,formAssociated:i.formAssociated,formAssociatedCallback:i.prototype.formAssociatedCallback,formDisabledCallback:i.prototype.formDisabledCallback,formResetCallback:i.prototype.formResetCallback,formStateRestoreCallback:i.prototype.formStateRestoreCallback,observedAttributes:n},this.l.set(t,o),this.o.set(i,o),(n=u.call(d,t))||(n=b(t),f.call(d,t,n)),this===window.customElements&&(v.set(i,o),o.s=n),n=this.h.get(t)){this.h.delete(t);for(var r=(n=e(n)).next();!r.done;r=n.next())r=r.value,g.delete(r),O(r,o,!0)}return void 0!==(o=this.i.get(t))&&(o.resolve(i),this.i.delete(t)),i},window.CustomElementRegistry.prototype.upgrade=function(){S.push(this),d.upgrade.apply(d,arguments),S.pop()},window.CustomElementRegistry.prototype.get=function(t){var e;return null==(e=this.l.get(t))?void 0:e.g},window.CustomElementRegistry.prototype.j=function(t){return this.l.get(t)},window.CustomElementRegistry.prototype.whenDefined=function(t){var e=this.j(t);if(void 0!==e)return Promise.resolve(e.g);var i=this.i.get(t);return void 0===i&&((i={}).promise=new Promise((function(t){return i.resolve=t})),this.i.set(t,i)),i.promise},window.CustomElementRegistry.prototype.m=function(t,e,i){var o=this.h.get(e);o||this.h.set(e,o=new Set),i?o.add(t):o.delete(t)},window.HTMLElement=function(){var t=c;if(t)return c=void 0,t;var e=v.get(this.constructor);if(!e)throw new TypeError("Illegal constructor (custom element class must be registered with global customElements registry to be newable)");return t=Reflect.construct(p,[],e.s),Object.setPrototypeOf(t,this.constructor.prototype),y.set(t,e),t},window.HTMLElement.prototype=p.prototype;var b=function(t){function e(){var e=Reflect.construct(p,[],this.constructor);Object.setPrototypeOf(e,HTMLElement.prototype);t:{var i=e.getRootNode();if(!(i===document||i instanceof ShadowRoot)){if((i=S[S.length-1])instanceof CustomElementRegistry){var o=i;break t}(i=i.getRootNode())===document||i instanceof ShadowRoot||(i=(null==(o=m.get(i))?void 0:o.getRootNode())||document)}o=i.customElements}return(i=(o=o||window.customElements).j(t))?O(e,i):g.set(e,o),e}return r.Object.defineProperty(e,"formAssociated",{configurable:!0,enumerable:!0,get:function(){return!0}}),e.prototype.connectedCallback=function(){var e=y.get(this);e?e.connectedCallback&&e.connectedCallback.apply(this,arguments):g.get(this).m(this,t,!0)},e.prototype.disconnectedCallback=function(){var e=y.get(this);e?e.disconnectedCallback&&e.disconnectedCallback.apply(this,arguments):g.get(this).m(this,t,!1)},e.prototype.adoptedCallback=function(){var t,e;null==(t=y.get(this))||null==(e=t.adoptedCallback)||e.apply(this,arguments)},e.prototype.formAssociatedCallback=function(){var t,e=y.get(this);e&&e.formAssociated&&(null==e||null==(t=e.formAssociatedCallback)||t.apply(this,arguments))},e.prototype.formDisabledCallback=function(){var t,e=y.get(this);null!=e&&e.formAssociated&&(null==e||null==(t=e.formDisabledCallback)||t.apply(this,arguments))},e.prototype.formResetCallback=function(){var t,e=y.get(this);null!=e&&e.formAssociated&&(null==e||null==(t=e.formResetCallback)||t.apply(this,arguments))},e.prototype.formStateRestoreCallback=function(){var t,e=y.get(this);null!=e&&e.formAssociated&&(null==e||null==(t=e.formStateRestoreCallback)||t.apply(this,arguments))},e},x=function(t,e,i){if(0!==e.size&&void 0!==i){var o=t.prototype.setAttribute;o&&(t.prototype.setAttribute=function(t,n){if(t=t.toLowerCase(),e.has(t)){var r=this.getAttribute(t);o.call(this,t,n),i.call(this,t,r,n)}else o.call(this,t,n)});var n=t.prototype.removeAttribute;n&&(t.prototype.removeAttribute=function(t){if(t=t.toLowerCase(),e.has(t)){var o=this.getAttribute(t);n.call(this,t),i.call(this,t,o,null)}else n.call(this,t)})}},w=function(t){var e=Object.getPrototypeOf(t);if(e!==window.HTMLElement)return e===p?Object.setPrototypeOf(t,window.HTMLElement):w(e)},O=function(t,e,i){i=void 0!==i&&i,Object.setPrototypeOf(t,e.g.prototype),y.set(t,e),c=t;try{new e.g}catch(t){w(e.g),new e.g}e.observedAttributes.forEach((function(i){t.hasAttribute(i)&&e.attributeChangedCallback.call(t,i,null,t.getAttribute(i))})),i&&e.connectedCallback&&t.isConnected&&e.connectedCallback.call(t)},$=Element.prototype.attachShadow;Element.prototype.attachShadow=function(t){var e=$.apply(this,arguments);return t.customElements&&(e.customElements=t.customElements),e};var S=[document],E=function(t,e,i){var o=(i?Object.getPrototypeOf(i):t.prototype)[e];t.prototype[e]=function(){S.push(this);var t=o.apply(i||this,arguments);return void 0!==t&&m.set(t,this),S.pop(),t}};E(ShadowRoot,"createElement",document),E(ShadowRoot,"importNode",document),E(Element,"insertAdjacentHTML");var R=function(t){var e=Object.getOwnPropertyDescriptor(t.prototype,"innerHTML");Object.defineProperty(t.prototype,"innerHTML",Object.assign({},e,{set:function(t){S.push(this),e.set.call(this,t),S.pop()}}))};if(R(Element),R(ShadowRoot),Object.defineProperty(window,"customElements",{value:new CustomElementRegistry,configurable:!0,writable:!0}),window.ElementInternals&&window.ElementInternals.prototype.setFormValue){var N=new WeakMap,C=HTMLElement.prototype.attachInternals;HTMLElement.prototype.attachInternals=function(t){for(var e=[],o=0;o<arguments.length;++o)e[o]=arguments[o];return e=C.call.apply(C,[this].concat(i(e))),N.set(e,this),e},["setFormValue","setValidity","checkValidity","reportValidity"].forEach((function(t){var e=window.ElementInternals.prototype,o=e[t];e[t]=function(t){for(var e=[],n=0;n<arguments.length;++n)e[n]=arguments[n];if(n=N.get(this),!0!==y.get(n).formAssociated)throw new DOMException("Failed to execute "+o+" on 'ElementInternals': The target element is not a form-associated custom element.");null==o||o.call.apply(o,[this].concat(i(e)))}}));var M=function(t){var e=s(Array,[].concat(i(t)),this.constructor);return e.h=t,e},U=M,k=Array;if(U.prototype=o(k.prototype),U.prototype.constructor=U,h)h(U,k);else for(var F in k)if("prototype"!=F)if(Object.defineProperties){var j=Object.getOwnPropertyDescriptor(k,F);j&&Object.defineProperty(U,F,j)}else U[F]=k[F];U.u=k.prototype,r.Object.defineProperty(M.prototype,"value",{configurable:!0,enumerable:!0,get:function(){var t;return(null==(t=this.h.find((function(t){return!0===t.checked})))?void 0:t.value)||""}});var L=function(t){var e=this,i=new Map;t.forEach((function(t,o){var n=t.getAttribute("name"),r=i.get(n)||[];e[+o]=t,r.push(t),i.set(n,r)})),this.length=t.length,i.forEach((function(t,i){t&&(e[i]=1===t.length?t[0]:new M(t))}))};L.prototype.namedItem=function(t){return this[t]};var z=Object.getOwnPropertyDescriptor(HTMLFormElement.prototype,"elements");Object.defineProperty(HTMLFormElement.prototype,"elements",{get:function(){for(var t=z.get.call(this,[]),i=[],o=(t=e(t)).next();!o.done;o=t.next()){o=o.value;var n=y.get(o);n&&!0!==n.formAssociated||i.push(o)}return new L(i)}})}}}.call(self);try{window.customElements.define("custom-element",null)}catch(t){const e=window.customElements.define;window.customElements.define=(t,i,o)=>{try{e.bind(window.customElements)(t,i,o)}catch(e){console.warn(t,i,o,e)}}}const nt=t=>e=>{window.customElements.get(t)||window.customElements.define(t,e)};class rt{constructor(t,e,i,o,n){this.name=t,this.category=e,this.fallbackVariable=i,this.defaultValue=o,this.context=n,this._$cssResult$=!0,this.value=this.get()}get cssText(){return this.value.cssText}get styleSheet(){return this.value.styleSheet}toString(){return this.value.toString()}static create(t,e,i){return new rt(t,e,void 0,i)}static extend(t,e,i){return new rt(t,e.category,e,i)}static external(t,e){return new rt(t.name,t.category,t.fallbackVariable,t.defaultValue,e)}get(t){return s`var(${r(this.name)}, ${this.defaultCssValue(t)})`}defaultCssValue(t){return this.fallbackVariable?this.fallbackVariable.get(null!=t?t:this.defaultValue):r(null!=t?t:this.defaultValue)}lastResortDefaultValue(){var t,e;return null!==(t=this.defaultValue)&&void 0!==t?t:null===(e=this.fallbackVariable)||void 0===e?void 0:e.lastResortDefaultValue()}breadcrumb(){return this.fallbackVariable?[this.fallbackVariable.name,...this.fallbackVariable.breadcrumb()]:[]}}const st={colorPrimary:rt.create("--ft-color-primary","COLOR","#2196F3"),colorPrimaryVariant:rt.create("--ft-color-primary-variant","COLOR","#1976D2"),colorSecondary:rt.create("--ft-color-secondary","COLOR","#FFCC80"),colorSecondaryVariant:rt.create("--ft-color-secondary-variant","COLOR","#F57C00"),colorSurface:rt.create("--ft-color-surface","COLOR","#FFFFFF"),colorContent:rt.create("--ft-color-content","COLOR","rgba(0, 0, 0, 0.87)"),colorError:rt.create("--ft-color-error","COLOR","#B00020"),colorOutline:rt.create("--ft-color-outline","COLOR","rgba(0, 0, 0, 0.14)"),colorOpacityHigh:rt.create("--ft-color-opacity-high","NUMBER","1"),colorOpacityMedium:rt.create("--ft-color-opacity-medium","NUMBER","0.74"),colorOpacityDisabled:rt.create("--ft-color-opacity-disabled","NUMBER","0.38"),colorOnPrimary:rt.create("--ft-color-on-primary","COLOR","#FFFFFF"),colorOnPrimaryHigh:rt.create("--ft-color-on-primary-high","COLOR","#FFFFFF"),colorOnPrimaryMedium:rt.create("--ft-color-on-primary-medium","COLOR","rgba(255, 255, 255, 0.74)"),colorOnPrimaryDisabled:rt.create("--ft-color-on-primary-disabled","COLOR","rgba(255, 255, 255, 0.38)"),colorOnSecondary:rt.create("--ft-color-on-secondary","COLOR","#FFFFFF"),colorOnSecondaryHigh:rt.create("--ft-color-on-secondary-high","COLOR","#FFFFFF"),colorOnSecondaryMedium:rt.create("--ft-color-on-secondary-medium","COLOR","rgba(255, 255, 255, 0.74)"),colorOnSecondaryDisabled:rt.create("--ft-color-on-secondary-disabled","COLOR","rgba(255, 255, 255, 0.38)"),colorOnSurface:rt.create("--ft-color-on-surface","COLOR","rgba(0, 0, 0, 0.87)"),colorOnSurfaceHigh:rt.create("--ft-color-on-surface-high","COLOR","rgba(0, 0, 0, 0.87)"),colorOnSurfaceMedium:rt.create("--ft-color-on-surface-medium","COLOR","rgba(0, 0, 0, 0.60)"),colorOnSurfaceDisabled:rt.create("--ft-color-on-surface-disabled","COLOR","rgba(0, 0, 0, 0.38)"),opacityContentOnSurfaceDisabled:rt.create("--ft-opacity-content-on-surface-disabled","NUMBER","0"),opacityContentOnSurfaceEnable:rt.create("--ft-opacity-content-on-surface-enable","NUMBER","0"),opacityContentOnSurfaceHover:rt.create("--ft-opacity-content-on-surface-hover","NUMBER","0.04"),opacityContentOnSurfaceFocused:rt.create("--ft-opacity-content-on-surface-focused","NUMBER","0.12"),opacityContentOnSurfacePressed:rt.create("--ft-opacity-content-on-surface-pressed","NUMBER","0.10"),opacityContentOnSurfaceSelected:rt.create("--ft-opacity-content-on-surface-selected","NUMBER","0.08"),opacityContentOnSurfaceDragged:rt.create("--ft-opacity-content-on-surface-dragged","NUMBER","0.08"),opacityPrimaryOnSurfaceDisabled:rt.create("--ft-opacity-primary-on-surface-disabled","NUMBER","0"),opacityPrimaryOnSurfaceEnable:rt.create("--ft-opacity-primary-on-surface-enable","NUMBER","0"),opacityPrimaryOnSurfaceHover:rt.create("--ft-opacity-primary-on-surface-hover","NUMBER","0.04"),opacityPrimaryOnSurfaceFocused:rt.create("--ft-opacity-primary-on-surface-focused","NUMBER","0.12"),opacityPrimaryOnSurfacePressed:rt.create("--ft-opacity-primary-on-surface-pressed","NUMBER","0.10"),opacityPrimaryOnSurfaceSelected:rt.create("--ft-opacity-primary-on-surface-selected","NUMBER","0.08"),opacityPrimaryOnSurfaceDragged:rt.create("--ft-opacity-primary-on-surface-dragged","NUMBER","0.08"),opacitySurfaceOnPrimaryDisabled:rt.create("--ft-opacity-surface-on-primary-disabled","NUMBER","0"),opacitySurfaceOnPrimaryEnable:rt.create("--ft-opacity-surface-on-primary-enable","NUMBER","0"),opacitySurfaceOnPrimaryHover:rt.create("--ft-opacity-surface-on-primary-hover","NUMBER","0.04"),opacitySurfaceOnPrimaryFocused:rt.create("--ft-opacity-surface-on-primary-focused","NUMBER","0.12"),opacitySurfaceOnPrimaryPressed:rt.create("--ft-opacity-surface-on-primary-pressed","NUMBER","0.10"),opacitySurfaceOnPrimarySelected:rt.create("--ft-opacity-surface-on-primary-selected","NUMBER","0.08"),opacitySurfaceOnPrimaryDragged:rt.create("--ft-opacity-surface-on-primary-dragged","NUMBER","0.08"),elevation00:rt.create("--ft-elevation-00","UNKNOWN","0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0)"),elevation01:rt.create("--ft-elevation-01","UNKNOWN","0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)"),elevation02:rt.create("--ft-elevation-02","UNKNOWN","0px 4px 10px 0px rgba(0, 0, 0, 0.06), 0px 2px 5px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)"),elevation03:rt.create("--ft-elevation-03","UNKNOWN","0px 6px 13px 0px rgba(0, 0, 0, 0.06), 0px 3px 7px 0px rgba(0, 0, 0, 0.14), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"),elevation04:rt.create("--ft-elevation-04","UNKNOWN","0px 8px 16px 0px rgba(0, 0, 0, 0.06), 0px 4px 9px 0px rgba(0, 0, 0, 0.14), 0px 2px 3px 0px rgba(0, 0, 0, 0.06)"),elevation06:rt.create("--ft-elevation-06","UNKNOWN","0px 12px 22px 0px rgba(0, 0, 0, 0.06), 0px 6px 13px 0px rgba(0, 0, 0, 0.14), 0px 4px 5px 0px rgba(0, 0, 0, 0.06)"),elevation08:rt.create("--ft-elevation-08","UNKNOWN","0px 16px 28px 0px rgba(0, 0, 0, 0.06), 0px 8px 17px 0px rgba(0, 0, 0, 0.14), 0px 6px 7px 0px rgba(0, 0, 0, 0.06)"),elevation12:rt.create("--ft-elevation-12","UNKNOWN","0px 22px 40px 0px rgba(0, 0, 0, 0.06), 0px 12px 23px 0px rgba(0, 0, 0, 0.14), 0px 10px 11px 0px rgba(0, 0, 0, 0.06)"),elevation16:rt.create("--ft-elevation-16","UNKNOWN","0px 28px 52px 0px rgba(0, 0, 0, 0.06), 0px 16px 29px 0px rgba(0, 0, 0, 0.14), 0px 14px 15px 0px rgba(0, 0, 0, 0.06)"),elevation24:rt.create("--ft-elevation-24","UNKNOWN","0px 40px 76px 0px rgba(0, 0, 0, 0.06), 0px 24px 41px 0px rgba(0, 0, 0, 0.14), 0px 22px 23px 0px rgba(0, 0, 0, 0.06)"),borderRadiusS:rt.create("--ft-border-radius-S","SIZE","4px"),borderRadiusM:rt.create("--ft-border-radius-M","SIZE","8px"),borderRadiusL:rt.create("--ft-border-radius-L","SIZE","12px"),borderRadiusXL:rt.create("--ft-border-radius-XL","SIZE","16px"),titleFont:rt.create("--ft-title-font","UNKNOWN","Ubuntu, system-ui, sans-serif"),contentFont:rt.create("--ft-content-font","UNKNOWN","'Open Sans', system-ui, sans-serif"),transitionDuration:rt.create("--ft-transition-duration","UNKNOWN","250ms"),transitionTimingFunction:rt.create("--ft-transition-timing-function","UNKNOWN","ease-in-out")};
 /**
      * @license
      * Copyright 2021 Google LLC
@@ -57,10 +62,10 @@ const et=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e
      * Copyright 2020 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
      */
-const ct=t=>({_$litStatic$:t}),pt=new Map,ft=(t=>(e,...i)=>{var o;const n=i.length;let r,s;const a=[],l=[];let h,c=0,p=!1;for(;c<n;){for(h=e[c];c<n&&void 0!==(s=i[c],r=null===(o=s)||void 0===o?void 0:o._$litStatic$);)h+=r+e[++c],p=!0;l.push(s),a.push(h),c++}if(c===n&&a.push(e[n]),p){const t=a.join("$$lit$$");void 0===(e=pt.get(t))&&(a.raw=a,pt.set(t,e=a)),i=l}return t(e,...i)})(L);var ut,dt=function(t,e,i,o){for(var n,r=arguments.length,s=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,a=t.length-1;a>=0;a--)(n=t[a])&&(s=(r<3?n(s):r>3?n(e,i,s):n(e,i))||s);return r>3&&s&&Object.defineProperty(e,i,s),s};!function(t){t.title="title",t.title_dense="title-dense",t.subtitle1="subtitle1",t.subtitle2="subtitle2",t.body1="body1",t.body2="body2",t.caption="caption",t.breadcrumb="breadcrumb",t.overline="overline",t.button="button"}(ut||(ut={}));const yt=rt.extend("--ft-typography-font-family",st.titleFont),gt=rt.extend("--ft-typography-font-family",st.contentFont),vt={fontFamily:gt,fontSize:rt.create("--ft-typography-font-size","SIZE","16px"),fontWeight:rt.create("--ft-typography-font-weight","UNKNOWN","normal"),letterSpacing:rt.create("--ft-typography-letter-spacing","SIZE","0.496px"),lineHeight:rt.create("--ft-typography-line-height","SIZE","24px"),textTransform:rt.create("--ft-typography-text-transform","UNKNOWN","inherit")},bt=rt.extend("--ft-typography-title-font-family",yt),mt=rt.extend("--ft-typography-title-font-size",vt.fontSize,"20px"),xt=rt.extend("--ft-typography-title-font-weight",vt.fontWeight,"normal"),wt=rt.extend("--ft-typography-title-letter-spacing",vt.letterSpacing,"0.15px"),Ot=rt.extend("--ft-typography-title-line-height",vt.lineHeight,"24px"),$t=rt.extend("--ft-typography-title-text-transform",vt.textTransform,"inherit"),St=rt.extend("--ft-typography-title-dense-font-family",yt),Et=rt.extend("--ft-typography-title-dense-font-size",vt.fontSize,"14px"),Rt=rt.extend("--ft-typography-title-dense-font-weight",vt.fontWeight,"normal"),Nt=rt.extend("--ft-typography-title-dense-letter-spacing",vt.letterSpacing,"0.105px"),Ct=rt.extend("--ft-typography-title-dense-line-height",vt.lineHeight,"24px"),Mt=rt.extend("--ft-typography-title-dense-text-transform",vt.textTransform,"inherit"),Ut=rt.extend("--ft-typography-subtitle1-font-family",gt),kt=rt.extend("--ft-typography-subtitle1-font-size",vt.fontSize,"16px"),Ft=rt.extend("--ft-typography-subtitle1-font-weight",vt.fontWeight,"600"),jt=rt.extend("--ft-typography-subtitle1-letter-spacing",vt.letterSpacing,"0.144px"),Lt=rt.extend("--ft-typography-subtitle1-line-height",vt.lineHeight,"24px"),Tt=rt.extend("--ft-typography-subtitle1-text-transform",vt.textTransform,"inherit"),_t=rt.extend("--ft-typography-subtitle2-font-family",gt),At=rt.extend("--ft-typography-subtitle2-font-size",vt.fontSize,"14px"),zt=rt.extend("--ft-typography-subtitle2-font-weight",vt.fontWeight,"normal"),Bt=rt.extend("--ft-typography-subtitle2-letter-spacing",vt.letterSpacing,"0.098px"),Pt=rt.extend("--ft-typography-subtitle2-line-height",vt.lineHeight,"24px"),Dt=rt.extend("--ft-typography-subtitle2-text-transform",vt.textTransform,"inherit"),Wt=rt.extend("--ft-typography-body1-font-family",gt),Kt=rt.extend("--ft-typography-body1-font-size",vt.fontSize,"16px"),Ht=rt.extend("--ft-typography-body1-font-weight",vt.fontWeight,"normal"),It=rt.extend("--ft-typography-body1-letter-spacing",vt.letterSpacing,"0.496px"),Zt=rt.extend("--ft-typography-body1-line-height",vt.lineHeight,"24px"),Vt=rt.extend("--ft-typography-body1-text-transform",vt.textTransform,"inherit"),Jt=rt.extend("--ft-typography-body2-font-family",gt),Xt=rt.extend("--ft-typography-body2-font-size",vt.fontSize,"14px"),qt=rt.extend("--ft-typography-body2-font-weight",vt.fontWeight,"normal"),Gt=rt.extend("--ft-typography-body2-letter-spacing",vt.letterSpacing,"0.252px"),Qt=rt.extend("--ft-typography-body2-line-height",vt.lineHeight,"20px"),Yt=rt.extend("--ft-typography-body2-text-transform",vt.textTransform,"inherit"),te=rt.extend("--ft-typography-caption-font-family",gt),ee=rt.extend("--ft-typography-caption-font-size",vt.fontSize,"12px"),ie=rt.extend("--ft-typography-caption-font-weight",vt.fontWeight,"normal"),oe=rt.extend("--ft-typography-caption-letter-spacing",vt.letterSpacing,"0.396px"),ne=rt.extend("--ft-typography-caption-line-height",vt.lineHeight,"16px"),re=rt.extend("--ft-typography-caption-text-transform",vt.textTransform,"inherit"),se=rt.extend("--ft-typography-breadcrumb-font-family",gt),ae=rt.extend("--ft-typography-breadcrumb-font-size",vt.fontSize,"10px"),le=rt.extend("--ft-typography-breadcrumb-font-weight",vt.fontWeight,"normal"),he=rt.extend("--ft-typography-breadcrumb-letter-spacing",vt.letterSpacing,"0.33px"),ce=rt.extend("--ft-typography-breadcrumb-line-height",vt.lineHeight,"16px"),pe=rt.extend("--ft-typography-breadcrumb-text-transform",vt.textTransform,"inherit"),fe=rt.extend("--ft-typography-overline-font-family",gt),ue=rt.extend("--ft-typography-overline-font-size",vt.fontSize,"10px"),de=rt.extend("--ft-typography-overline-font-weight",vt.fontWeight,"normal"),ye=rt.extend("--ft-typography-overline-letter-spacing",vt.letterSpacing,"1.5px"),ge=rt.extend("--ft-typography-overline-line-height",vt.lineHeight,"16px"),ve=rt.extend("--ft-typography-overline-text-transform",vt.textTransform,"uppercase"),be=rt.extend("--ft-typography-button-font-family",gt),me=rt.extend("--ft-typography-button-font-size",vt.fontSize,"14px"),xe=rt.extend("--ft-typography-button-font-weight",vt.fontWeight,"600"),we=rt.extend("--ft-typography-button-letter-spacing",vt.letterSpacing,"1.246px"),Oe=rt.extend("--ft-typography-button-line-height",vt.lineHeight,"16px"),$e=rt.extend("--ft-typography-button-text-transform",vt.textTransform,"uppercase"),Se=s`
+const ct=t=>({_$litStatic$:t}),pt=new Map,ft=(t=>(e,...i)=>{var o;const n=i.length;let r,s;const a=[],l=[];let h,c=0,p=!1;for(;c<n;){for(h=e[c];c<n&&void 0!==(s=i[c],r=null===(o=s)||void 0===o?void 0:o._$litStatic$);)h+=r+e[++c],p=!0;l.push(s),a.push(h),c++}if(c===n&&a.push(e[n]),p){const t=a.join("$$lit$$");void 0===(e=pt.get(t))&&(a.raw=a,pt.set(t,e=a)),i=l}return t(e,...i)})(L);var ut,dt=function(t,e,i,o){for(var n,r=arguments.length,s=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,a=t.length-1;a>=0;a--)(n=t[a])&&(s=(r<3?n(s):r>3?n(e,i,s):n(e,i))||s);return r>3&&s&&Object.defineProperty(e,i,s),s};!function(t){t.title="title",t.title_dense="title-dense",t.subtitle1="subtitle1",t.subtitle2="subtitle2",t.body1="body1",t.body2="body2",t.caption="caption",t.breadcrumb="breadcrumb",t.overline="overline",t.button="button"}(ut||(ut={}));const yt=rt.extend("--ft-typography-font-family",st.titleFont),gt=rt.extend("--ft-typography-font-family",st.contentFont),vt={fontFamily:gt,fontSize:rt.create("--ft-typography-font-size","SIZE","16px"),fontWeight:rt.create("--ft-typography-font-weight","UNKNOWN","normal"),letterSpacing:rt.create("--ft-typography-letter-spacing","SIZE","0.496px"),lineHeight:rt.create("--ft-typography-line-height","SIZE","24px"),textTransform:rt.create("--ft-typography-text-transform","UNKNOWN","inherit")},mt=rt.extend("--ft-typography-title-font-family",yt),bt=rt.extend("--ft-typography-title-font-size",vt.fontSize,"20px"),xt=rt.extend("--ft-typography-title-font-weight",vt.fontWeight,"normal"),wt=rt.extend("--ft-typography-title-letter-spacing",vt.letterSpacing,"0.15px"),Ot=rt.extend("--ft-typography-title-line-height",vt.lineHeight,"24px"),$t=rt.extend("--ft-typography-title-text-transform",vt.textTransform,"inherit"),St=rt.extend("--ft-typography-title-dense-font-family",yt),Et=rt.extend("--ft-typography-title-dense-font-size",vt.fontSize,"14px"),Rt=rt.extend("--ft-typography-title-dense-font-weight",vt.fontWeight,"normal"),Nt=rt.extend("--ft-typography-title-dense-letter-spacing",vt.letterSpacing,"0.105px"),Ct=rt.extend("--ft-typography-title-dense-line-height",vt.lineHeight,"24px"),Mt=rt.extend("--ft-typography-title-dense-text-transform",vt.textTransform,"inherit"),Ut=rt.extend("--ft-typography-subtitle1-font-family",gt),kt=rt.extend("--ft-typography-subtitle1-font-size",vt.fontSize,"16px"),Ft=rt.extend("--ft-typography-subtitle1-font-weight",vt.fontWeight,"600"),jt=rt.extend("--ft-typography-subtitle1-letter-spacing",vt.letterSpacing,"0.144px"),Lt=rt.extend("--ft-typography-subtitle1-line-height",vt.lineHeight,"24px"),zt=rt.extend("--ft-typography-subtitle1-text-transform",vt.textTransform,"inherit"),Tt=rt.extend("--ft-typography-subtitle2-font-family",gt),At=rt.extend("--ft-typography-subtitle2-font-size",vt.fontSize,"14px"),Bt=rt.extend("--ft-typography-subtitle2-font-weight",vt.fontWeight,"normal"),Pt=rt.extend("--ft-typography-subtitle2-letter-spacing",vt.letterSpacing,"0.098px"),_t=rt.extend("--ft-typography-subtitle2-line-height",vt.lineHeight,"24px"),Dt=rt.extend("--ft-typography-subtitle2-text-transform",vt.textTransform,"inherit"),Wt=rt.extend("--ft-typography-body1-font-family",gt),It=rt.extend("--ft-typography-body1-font-size",vt.fontSize,"16px"),Kt=rt.extend("--ft-typography-body1-font-weight",vt.fontWeight,"normal"),Ht=rt.extend("--ft-typography-body1-letter-spacing",vt.letterSpacing,"0.496px"),Zt=rt.extend("--ft-typography-body1-line-height",vt.lineHeight,"24px"),Vt=rt.extend("--ft-typography-body1-text-transform",vt.textTransform,"inherit"),Jt=rt.extend("--ft-typography-body2-font-family",gt),Xt=rt.extend("--ft-typography-body2-font-size",vt.fontSize,"14px"),qt=rt.extend("--ft-typography-body2-font-weight",vt.fontWeight,"normal"),Gt=rt.extend("--ft-typography-body2-letter-spacing",vt.letterSpacing,"0.252px"),Qt=rt.extend("--ft-typography-body2-line-height",vt.lineHeight,"20px"),Yt=rt.extend("--ft-typography-body2-text-transform",vt.textTransform,"inherit"),te=rt.extend("--ft-typography-caption-font-family",gt),ee=rt.extend("--ft-typography-caption-font-size",vt.fontSize,"12px"),ie=rt.extend("--ft-typography-caption-font-weight",vt.fontWeight,"normal"),oe=rt.extend("--ft-typography-caption-letter-spacing",vt.letterSpacing,"0.396px"),ne=rt.extend("--ft-typography-caption-line-height",vt.lineHeight,"16px"),re=rt.extend("--ft-typography-caption-text-transform",vt.textTransform,"inherit"),se=rt.extend("--ft-typography-breadcrumb-font-family",gt),ae=rt.extend("--ft-typography-breadcrumb-font-size",vt.fontSize,"10px"),le=rt.extend("--ft-typography-breadcrumb-font-weight",vt.fontWeight,"normal"),he=rt.extend("--ft-typography-breadcrumb-letter-spacing",vt.letterSpacing,"0.33px"),ce=rt.extend("--ft-typography-breadcrumb-line-height",vt.lineHeight,"16px"),pe=rt.extend("--ft-typography-breadcrumb-text-transform",vt.textTransform,"inherit"),fe=rt.extend("--ft-typography-overline-font-family",gt),ue=rt.extend("--ft-typography-overline-font-size",vt.fontSize,"10px"),de=rt.extend("--ft-typography-overline-font-weight",vt.fontWeight,"normal"),ye=rt.extend("--ft-typography-overline-letter-spacing",vt.letterSpacing,"1.5px"),ge=rt.extend("--ft-typography-overline-line-height",vt.lineHeight,"16px"),ve=rt.extend("--ft-typography-overline-text-transform",vt.textTransform,"uppercase"),me=rt.extend("--ft-typography-button-font-family",gt),be=rt.extend("--ft-typography-button-font-size",vt.fontSize,"14px"),xe=rt.extend("--ft-typography-button-font-weight",vt.fontWeight,"600"),we=rt.extend("--ft-typography-button-letter-spacing",vt.letterSpacing,"1.246px"),Oe=rt.extend("--ft-typography-button-line-height",vt.lineHeight,"16px"),$e=rt.extend("--ft-typography-button-text-transform",vt.textTransform,"uppercase"),Se=s`
     .ft-typography--title {
-        font-family: ${bt};
-        font-size: ${mt};
+        font-family: ${mt};
+        font-size: ${bt};
         font-weight: ${xt};
         letter-spacing: ${wt};
         line-height: ${Ot};
@@ -82,24 +87,24 @@ const ct=t=>({_$litStatic$:t}),pt=new Map,ft=(t=>(e,...i)=>{var o;const n=i.leng
         font-weight: ${Ft};
         letter-spacing: ${jt};
         line-height: ${Lt};
-        text-transform: ${Tt};
+        text-transform: ${zt};
     }
 `,Ne=s`
     .ft-typography--subtitle2 {
-        font-family: ${_t};
+        font-family: ${Tt};
         font-size: ${At};
-        font-weight: ${zt};
-        letter-spacing: ${Bt};
-        line-height: ${Pt};
+        font-weight: ${Bt};
+        letter-spacing: ${Pt};
+        line-height: ${_t};
         text-transform: ${Dt};
     }
 
 `,Ce=s`
     .ft-typography--body1 {
         font-family: ${Wt};
-        font-size: ${Kt};
-        font-weight: ${Ht};
-        letter-spacing: ${It};
+        font-size: ${It};
+        font-weight: ${Kt};
+        letter-spacing: ${Ht};
         line-height: ${Zt};
         text-transform: ${Vt};
     }
@@ -141,8 +146,8 @@ const ct=t=>({_$litStatic$:t}),pt=new Map,ft=(t=>(e,...i)=>{var o;const n=i.leng
     }
 `,je=s`
     .ft-typography--button {
-        font-family: ${be};
-        font-size: ${me};
+        font-family: ${me};
+        font-size: ${be};
         font-weight: ${xe};
         letter-spacing: ${we};
         line-height: ${Oe};
@@ -155,14 +160,40 @@ const ct=t=>({_$litStatic$:t}),pt=new Map,ft=(t=>(e,...i)=>{var o;const n=i.leng
                 </${ct(this.element)}>
             `:ft`
             <slot class="ft-typography ft-typography--${this.variant}"></slot>
-        `}};dt([it()],Le.prototype,"element",void 0),dt([it()],Le.prototype,"variant",void 0),Le=dt([nt("ft-typography")],Le);var Te=function(t,e,i,o){for(var n,r=arguments.length,s=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,a=t.length-1;a>=0;a--)(n=t[a])&&(s=(r<3?n(s):r>3?n(e,i,s):n(e,i))||s);return r>3&&s&&Object.defineProperty(e,i,s),s};const _e={zIndex:rt.create("--ft-dialog-z-index","NUMBER","2"),overlayBackgroundColor:rt.create("--ft-dialog-overlay-background-color","COLOR","rgba(0, 0, 0, 0.3)"),height:rt.create("--ft-dialog-height","SIZE","unset"),width:rt.create("--ft-dialog-width","SIZE","unset"),padding:rt.create("--ft-dialog-padding","SIZE","24px"),colorSurface:rt.external(st.colorSurface,"Design system"),borderRadiusS:rt.external(st.borderRadiusS,"Design system"),elevation24:rt.external(st.elevation24,"Design system")};let Ae=class extends at{constructor(){super(...arguments),this.opened=!1,this.closeOnEsc=!1,this.closeOnClickOutside=!1,this.heading=""}getStyles(){return s`
+        `}};dt([it()],Le.prototype,"element",void 0),dt([it()],Le.prototype,"variant",void 0),Le=dt([nt("ft-typography")],Le);
+/**
+     * @license
+     * Copyright 2021 Google LLC
+     * SPDX-LIcense-Identifier: Apache-2.0
+     */
+const ze=s`:host{font-family:var(--mdc-icon-font, "Material Icons");font-weight:normal;font-style:normal;font-size:var(--mdc-icon-size, 24px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}`
+/**
+     * @license
+     * Copyright 2018 Google LLC
+     * SPDX-License-Identifier: Apache-2.0
+     */;let Te=class extends Y{render(){return L`<span><slot></slot></span>`}};Te.styles=[ze],Te=
+/*! *****************************************************************************
+    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.
+    ***************************************************************************** */
+function(t,e,i,o){for(var n,r=arguments.length,s=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,a=t.length-1;a>=0;a--)(n=t[a])&&(s=(r<3?n(s):r>3?n(e,i,s):n(e,i))||s);return r>3&&s&&Object.defineProperty(e,i,s),s}([(t=>e=>"function"==typeof e?((t,e)=>(window.customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:i,elements:o}=e;return{kind:i,elements:o,finisher(e){window.customElements.define(t,e)}}})(t,e))("mwc-icon")],Te);var Ae=function(t,e,i,o){for(var n,r=arguments.length,s=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,a=t.length-1;a>=0;a--)(n=t[a])&&(s=(r<3?n(s):r>3?n(e,i,s):n(e,i))||s);return r>3&&s&&Object.defineProperty(e,i,s),s};const Be={zIndex:rt.create("--ft-dialog-z-index","NUMBER","2"),overlayBackgroundColor:rt.create("--ft-dialog-overlay-background-color","COLOR","rgba(0, 0, 0, 0.3)"),height:rt.create("--ft-dialog-height","SIZE","unset"),width:rt.create("--ft-dialog-width","SIZE","unset"),minWidth:rt.create("--ft-dialog-min-width","SIZE","unset"),paddingTop:rt.create("--ft-dialog-padding-top","SIZE","20px"),paddingSide:rt.create("--ft-dialog-padding-side","SIZE","16px"),paddingButtons:rt.create("--ft-dialog-padding-buttons","SIZE","20px"),colorSurface:rt.external(st.colorSurface,"Design system"),headingColor:rt.external(st.colorOnSurfaceMedium,"Design system"),borderRadiusS:rt.external(st.borderRadiusS,"Design system"),elevation24:rt.external(st.elevation24,"Design system")};let Pe=class extends at{constructor(){super(...arguments),this.opened=!1,this.closeOnEsc=!1,this.closeOnClickOutside=!1,this.heading="",this.icon=""}getStyles(){return s`
             .ft-dialog {
                 position: fixed;
                 top: 0;
                 right: 0;
                 bottom: 0;
                 left: 0;
-                z-index: ${_e.zIndex};
+                z-index: ${Be.zIndex};
 
                 display: flex;
                 flex-direction: column;
@@ -172,7 +203,7 @@ const ct=t=>({_$litStatic$:t}),pt=new Map,ft=(t=>(e,...i)=>{var o;const n=i.leng
                 margin: auto;
             }
 
-            .ft-dialog_overlay {
+            .ft-dialog-overlay {
                 position: fixed;
                 top: 0;
                 right: 0;
@@ -182,39 +213,47 @@ const ct=t=>({_$litStatic$:t}),pt=new Map,ft=(t=>(e,...i)=>{var o;const n=i.leng
                 height: 100%;
                 width: 100%;
 
-                background-color: ${_e.overlayBackgroundColor};
+                background-color: ${Be.overlayBackgroundColor};
 
             }
 
-            .ft-dialog_wrapper {
+            .ft-dialog-wrapper {
                 position: fixed;
                 display: flex;
                 flex-direction: column;
 
-                width: ${_e.width};
-                height: ${_e.height};
+                width: ${Be.width};
+                height: ${Be.height};
                 max-width: 95vw;
                 max-height: 95vh;
+                min-width: ${Be.minWidth};
+
+                padding-top: ${Be.paddingTop};
+                padding-right: ${Be.paddingSide};
+                padding-left: ${Be.paddingSide};
 
-                padding: ${_e.padding};
-                background-color: ${_e.colorSurface};
+                background-color: ${Be.colorSurface};
 
-                border-radius: ${_e.borderRadiusS};
-                box-shadow: ${_e.elevation24};
+                border-radius: ${Be.borderRadiusS};
+                box-shadow: ${Be.elevation24};
             }
 
-            .ft-dialog_content {
+            .ft-dialog-content {
                 flex-grow: 2;
                 overflow: auto;
             }
 
-            .ft-dialog_heading {
-                display: block;
-                margin-bottom: 12px;
+            .ft-dialog-heading {
+                display: flex;
+                align-items: center;
+                margin-bottom: 20px;
+                gap: 8px;
+
+                color: ${Be.headingColor};
             }
 
-            .ft-dialog_buttons {
-                margin-top: 12px;
+            .ft-dialog-buttons {
+                padding-top: ${Be.paddingButtons};
             }
 
             slot[name=buttons] {
@@ -222,19 +261,29 @@ const ct=t=>({_$litStatic$:t}),pt=new Map,ft=(t=>(e,...i)=>{var o;const n=i.leng
                 align-items: center;
                 justify-content: flex-end;
             }
+
+            slot[name=buttons]::slotted(*) {
+                margin-top: 8px;
+                margin-bottom: 8px
+            }
+
         `}getTemplate(){return this.opened?L`
             <div class="ft-dialog">
-                <div class="ft-dialog_overlay" @click="${()=>this.watchClickOutside()}"></div>
-                <div class="ft-dialog_wrapper">
+                <div class="ft-dialog-overlay" @click="${()=>this.watchClickOutside()}"></div>
+                <div class="ft-dialog-wrapper">
                     ${this.heading?L`
-                        <ft-typography class="ft-dialog_heading" variant="title">${this.heading}</ft-typography>
+                        <div class="ft-dialog-heading">
+                            ${this.icon?L`
+                                <mwc-icon>${this.icon}</mwc-icon>`:void 0}
+                            <ft-typography element="span" variant="title">${this.heading}</ft-typography>
+                        </div>
                     `:null}
-                    <div class="ft-dialog_content">
+                    <div class="ft-dialog-content">
                         <slot></slot>
                     </div>
-                    <div class="ft-dialog_buttons">
+                    <div class="ft-dialog-buttons">
                         <slot name="buttons"></slot>
                     </div>
                 </div>
             </div>
-        `:null}updated(t){if(t.has("opened")){const t=new CustomEvent("opened-changed",{detail:{opened:this.opened}});this.dispatchEvent(t)}}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.watchEscapeKey.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.watchEscapeKey.bind(this))}close(){this.opened=!1}open(){this.opened=!0}watchEscapeKey(t){"Escape"===t.key&&this.closeOnEsc&&this.close()}watchClickOutside(){this.closeOnClickOutside&&this.close()}};Ae.elementDefinitions={"ft-typography":Le},Te([it({type:Boolean,hasChanged:(t,e)=>!1===e&&!0===t||!0===e&&!1===t})],Ae.prototype,"opened",void 0),Te([it({type:Boolean})],Ae.prototype,"closeOnEsc",void 0),Te([it({type:Boolean})],Ae.prototype,"closeOnClickOutside",void 0),Te([it({type:String})],Ae.prototype,"heading",void 0),Ae=Te([nt("ft-dialog")],Ae);var ze=Ae;t.FtDialogCssVariables=_e,t.default=ze,Object.defineProperty(t,"t",{value:!0})}({});
+        `:null}updated(t){if(t.has("opened")){const t=new CustomEvent("opened-changed",{detail:{opened:this.opened}});this.dispatchEvent(t)}}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.watchEscapeKey.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.watchEscapeKey.bind(this))}close(){this.opened=!1}open(){this.opened=!0}watchEscapeKey(t){"Escape"===t.key&&this.closeOnEsc&&this.close()}watchClickOutside(){this.closeOnClickOutside&&this.close()}};Pe.elementDefinitions={"ft-typography":Le,"mwc-icon":Te},Ae([it({type:Boolean,hasChanged:(t,e)=>!1===e&&!0===t||!0===e&&!1===t})],Pe.prototype,"opened",void 0),Ae([it({type:Boolean})],Pe.prototype,"closeOnEsc",void 0),Ae([it({type:Boolean})],Pe.prototype,"closeOnClickOutside",void 0),Ae([it({type:String})],Pe.prototype,"heading",void 0),Ae([it({type:String})],Pe.prototype,"icon",void 0),Pe=Ae([nt("ft-dialog")],Pe);var _e=Pe;t.FtDialogCssVariables=Be,t.default=_e,Object.defineProperty(t,"t",{value:!0})}({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-dialog",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "A simple dialog component",
   "keywords": [
     "Lit"
@@ -19,8 +19,10 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-wc-utils": "^0.1.7",
+    "@fluid-topics/ft-icon": "^0.1.8",
+    "@fluid-topics/ft-typography": "^0.1.8",
+    "@fluid-topics/ft-wc-utils": "^0.1.8",
     "lit": "^2.0.2"
   },
-  "gitHead": "78397cca67971191c46739cfb6c87481aaa65745"
+  "gitHead": "45fdf008556920bbd5fcc2e766c273aed959178d"
 }