tinkiet 0.8.30 → 0.9.2

package/accordion/accordion.scss.js

@@ -1,4 +1,4 @@
-var css_248z = "@charset \"UTF-8\";*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host .header{border:1px solid var(--shade-lighter);border-radius:10px;color:var(--primary);cursor:pointer;padding:.6em}:host .header>*{margin:0 10px}:host .header:after{content:\"▼\";display:inline-block;font-size:12px;transition:transform .3s}:host .header .before{width:fit-content}:host .header .header-content{flex:1}:host .content{height:0;margin:0 auto;opacity:0;transition:all .2s;visibility:hidden;width:95%}:host h3,:host h5{margin:0}:host([checked]) .header{background-color:var(--primary);color:var(--on-primary)}:host([checked]) .header:after{transform:rotate(180deg)}:host([checked]) .content{height:auto;opacity:1;transition:all .3s,opacity .7s;visibility:visible}:host([pill]) .header{border-radius:9999px}";
-var stylesheet="@charset \"UTF-8\";*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host .header{border:1px solid var(--shade-lighter);border-radius:10px;color:var(--primary);cursor:pointer;padding:.6em}:host .header>*{margin:0 10px}:host .header:after{content:\"▼\";display:inline-block;font-size:12px;transition:transform .3s}:host .header .before{width:fit-content}:host .header .header-content{flex:1}:host .content{height:0;margin:0 auto;opacity:0;transition:all .2s;visibility:hidden;width:95%}:host h3,:host h5{margin:0}:host([checked]) .header{background-color:var(--primary);color:var(--on-primary)}:host([checked]) .header:after{transform:rotate(180deg)}:host([checked]) .content{height:auto;opacity:1;transition:all .3s,opacity .7s;visibility:visible}:host([pill]) .header{border-radius:9999px}";
+var css_248z = "@charset \"UTF-8\";*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host .header{background-color:hsl(var(--surface-container-lowest));border:2px solid hsl(var(--outline));color:hsl(var(--on-surface));cursor:pointer;padding:16px}:host .header>*{margin:0 10px}:host .header:after{content:\"▼\";display:inline-block;font-size:12px;transition:transform .3s}:host .header .before{width:fit-content}:host .header .header-content{flex:1}:host .content{height:0;margin:0 auto;opacity:0;transition:all .2s;visibility:hidden;width:95%}:host h3,:host h5{margin:0}:host([checked]) .header{background-color:hsl(var(--primary));color:hsl(var(--on-primary))}:host([checked]) .header:after{transform:rotate(180deg)}:host([checked]) .content{height:auto;opacity:1;transition:all .3s,opacity .7s;visibility:visible}:host([pill]) .header{border-radius:9999px}";
+var stylesheet="@charset \"UTF-8\";*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host .header{background-color:hsl(var(--surface-container-lowest));border:2px solid hsl(var(--outline));color:hsl(var(--on-surface));cursor:pointer;padding:16px}:host .header>*{margin:0 10px}:host .header:after{content:\"▼\";display:inline-block;font-size:12px;transition:transform .3s}:host .header .before{width:fit-content}:host .header .header-content{flex:1}:host .content{height:0;margin:0 auto;opacity:0;transition:all .2s;visibility:hidden;width:95%}:host h3,:host h5{margin:0}:host([checked]) .header{background-color:hsl(var(--primary));color:hsl(var(--on-primary))}:host([checked]) .header:after{transform:rotate(180deg)}:host([checked]) .content{height:auto;opacity:1;transition:all .3s,opacity .7s;visibility:visible}:host([pill]) .header{border-radius:9999px}";
 
 export { css_248z as default, stylesheet };

package/badge/badge.d.ts

@@ -1,11 +1,13 @@
-import { TkBox } from "../box/index.js";
+import { LitElement } from "lit";
 /**
  * A badge WebComponent
  * @cssprop --tk-badge-color - Color of widget default to --primary
  * @cssprop --tk-badge-text-color - Text color of widget to --on-primary
  */
-declare class TkBadge extends TkBox {
-    static get styles(): import("lit").CSSResult[];
+declare class TkBadge extends LitElement {
+    static get styles(): import("lit").CSSResult;
+    label: string;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/badge/badge.js

@@ -1,25 +1,29 @@
 import { __decorate } from 'tslib';
-import { css, unsafeCSS } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import '../box/index.js';
+import { LitElement, css, unsafeCSS, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
 import css_248z from './badge.scss.js';
-import { TkBox } from '../box/box.js';
 
 /**
  * A badge WebComponent
  * @cssprop --tk-badge-color - Color of widget default to --primary
  * @cssprop --tk-badge-text-color - Text color of widget to --on-primary
  */
-let TkBadge = class TkBadge extends TkBox {
+let TkBadge = class TkBadge extends LitElement {
     static get styles() {
-        return [
-            ...TkBox.styles,
-            css `
-				${unsafeCSS(css_248z)}
-			`
-        ];
+        return css `
+			${unsafeCSS(css_248z)}
+		`;
+    }
+    render() {
+        return html `
+			<slot></slot>
+			<div class="badge ${this.label ? "" : "empty"}">${this.label}</div>
+		`;
     }
 };
+__decorate([
+    property()
+], TkBadge.prototype, "label", void 0);
 TkBadge = __decorate([
     customElement("tk-badge")
 ], TkBadge);

package/badge/badge.scss.js

@@ -1,4 +1,4 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--tk-badge-color,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--text:var(--tk-badge-text-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));align-items:center;background-color:var(--color);border-radius:9999px;color:var(--text);cursor:inherit;display:inline-flex;height:1.375em;justify-content:center;padding:0 .5em;user-select:none;white-space:nowrap}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)));--text:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)))}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--tk-badge-color,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--text:var(--tk-badge-text-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));align-items:center;background-color:var(--color);border-radius:9999px;color:var(--text);cursor:inherit;display:inline-flex;height:1.375em;justify-content:center;padding:0 .5em;user-select:none;white-space:nowrap}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)));--text:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)))}";
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:inline-flex}:host .badge{background-color:hsl(var(--error));border-radius:8px;color:hsl(var(--on-error));cursor:inherit;font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;font-size:10px;height:16px;line-height:8px;max-width:34px;min-width:16px;padding:4px;text-align:center;user-select:none;white-space:nowrap}:host .badge.empty{border-radius:100%;height:6px;min-width:6px;width:6px}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:inline-flex}:host .badge{background-color:hsl(var(--error));border-radius:8px;color:hsl(var(--on-error));cursor:inherit;font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;font-size:10px;height:16px;line-height:8px;max-width:34px;min-width:16px;padding:4px;text-align:center;user-select:none;white-space:nowrap}:host .badge.empty{border-radius:100%;height:6px;min-width:6px;width:6px}";
 
 export { css_248z as default, stylesheet };

package/box/box.d.ts

@@ -11,7 +11,7 @@ type Color = typeof colors;
  * @attr {"center" | "end" | "start" | "stretch"} align-self - How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.
  * @attr {"row" | "column"} direction - The orientation to layout the child components in.
  * @attr [direction="column"]
- * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} elevation - Elevated height above the underlying context, indicated via a drop shadow.
+ * @attr {1|2|3} elevation - Elevated height above the underlying context, indicated via a drop shadow.
  * @attr {"horizontal" | "vertical" | "true" | "false"} fill - Whether the width and/or height should fill the container.
  * @attr {"grow" | "shrink" | "true" | "false"} flex - flex-grow and/or flex-shrink
  * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} gap - The amount of spacing between child elements. This should not be used in conjunction with 'wrap' as the gap elements will not wrap gracefully. If a child is a Fragment, Box will not add a gap between the children of the Fragment.

package/box/box.js

@@ -55,7 +55,7 @@ const colors = [
  * @attr {"center" | "end" | "start" | "stretch"} align-self - How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.
  * @attr {"row" | "column"} direction - The orientation to layout the child components in.
  * @attr [direction="column"]
- * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} elevation - Elevated height above the underlying context, indicated via a drop shadow.
+ * @attr {1|2|3} elevation - Elevated height above the underlying context, indicated via a drop shadow.
  * @attr {"horizontal" | "vertical" | "true" | "false"} fill - Whether the width and/or height should fill the container.
  * @attr {"grow" | "shrink" | "true" | "false"} flex - flex-grow and/or flex-shrink
  * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} gap - The amount of spacing between child elements. This should not be used in conjunction with 'wrap' as the gap elements will not wrap gracefully. If a child is a Fragment, Box will not add a gap between the children of the Fragment.
@@ -108,10 +108,10 @@ let TkBox = class TkBox extends LitElement {
         super.disconnectedCallback();
     }
     updated(props) {
-        if (props.has("background") && ![...colors, "background", "foreground"].includes(this.background))
-            this.style.setProperty("background-color", this.background.toString());
-        if (props.has("color") && ![...colors, "background", "foreground"].includes(this.color))
-            this.style.setProperty("color", this.color.toString());
+        // if (props.has("background") && ![...colors, "background", "foreground"].includes(this.background as string))
+        // 	this.style.setProperty("background-color", this.background.toString());
+        // if (props.has("color") && ![...colors, "background", "foreground"].includes(this.color as string))
+        // 	this.style.setProperty("color", this.color.toString());
         super.updated(props);
     }
     showRipple(event) {

package/box/box.scss.js

@@ -1,4 +1,4 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{box-sizing:border-box;display:flex;flex-direction:column;position:relative;transition:background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease)}:host([hidden]){display:none}.ripple{bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0}.ripple span{background-color:currentColor;border-radius:50%;opacity:.5;position:absolute}:host([align-content=start]){align-content:flex-start}:host([align-content=end]){align-content:flex-end}:host([align-content=stretch]){align-content:stretch}:host([align-content=center]){align-content:center}:host([align-content=around]){align-content:space-around}:host([align-content=between]){align-content:space-between}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([align-items=stretch]){align-items:stretch}:host([align-items=center]){align-items:center}:host([align-items=baseline]){align-items:baseline}:host([align-self=start]){align-self:flex-start}:host([align-self=end]){align-self:flex-end}:host([align-self=stretch]){align-self:stretch}:host([align-self=center]){align-self:center}:host([background=primary-lighter]){background-color:var(--primary-lighter)}:host([color=primary-lighter]){color:var(--primary-lighter)}:host([background=primary-light]){background-color:var(--primary-light)}:host([color=primary-light]){color:var(--primary-light)}:host([background=primary]){background-color:var(--primary)}:host([color=primary]){color:var(--primary)}:host([background=primary-dark]){background-color:var(--primary-dark)}:host([color=primary-dark]){color:var(--primary-dark)}:host([background=primary-darker]){background-color:var(--primary-darker)}:host([color=primary-darker]){color:var(--primary-darker)}:host([background=on-primary-lighter]){background-color:var(--on-primary-lighter)}:host([color=on-primary-lighter]){color:var(--on-primary-lighter)}:host([background=on-primary-light]){background-color:var(--on-primary-light)}:host([color=on-primary-light]){color:var(--on-primary-light)}:host([background=on-primary]){background-color:var(--on-primary)}:host([color=on-primary]){color:var(--on-primary)}:host([background=on-primary-dark]){background-color:var(--on-primary-dark)}:host([color=on-primary-dark]){color:var(--on-primary-dark)}:host([background=on-primary-darker]){background-color:var(--on-primary-darker)}:host([color=on-primary-darker]){color:var(--on-primary-darker)}:host([background=accent-lighter]){background-color:var(--accent-lighter)}:host([color=accent-lighter]){color:var(--accent-lighter)}:host([background=accent-light]){background-color:var(--accent-light)}:host([color=accent-light]){color:var(--accent-light)}:host([background=accent]){background-color:var(--accent)}:host([color=accent]){color:var(--accent)}:host([background=accent-dark]){background-color:var(--accent-dark)}:host([color=accent-dark]){color:var(--accent-dark)}:host([background=accent-darker]){background-color:var(--accent-darker)}:host([color=accent-darker]){color:var(--accent-darker)}:host([background=on-accent-lighter]){background-color:var(--on-accent-lighter)}:host([color=on-accent-lighter]){color:var(--on-accent-lighter)}:host([background=on-accent-light]){background-color:var(--on-accent-light)}:host([color=on-accent-light]){color:var(--on-accent-light)}:host([background=on-accent]){background-color:var(--on-accent)}:host([color=on-accent]){color:var(--on-accent)}:host([background=on-accent-dark]){background-color:var(--on-accent-dark)}:host([color=on-accent-dark]){color:var(--on-accent-dark)}:host([background=on-accent-darker]){background-color:var(--on-accent-darker)}:host([color=on-accent-darker]){color:var(--on-accent-darker)}:host([background=error-lighter]){background-color:var(--error-lighter)}:host([color=error-lighter]){color:var(--error-lighter)}:host([background=error-light]){background-color:var(--error-light)}:host([color=error-light]){color:var(--error-light)}:host([background=error]){background-color:var(--error)}:host([color=error]){color:var(--error)}:host([background=error-dark]){background-color:var(--error-dark)}:host([color=error-dark]){color:var(--error-dark)}:host([background=error-darker]){background-color:var(--error-darker)}:host([color=error-darker]){color:var(--error-darker)}:host([background=on-error-lighter]){background-color:var(--on-error-lighter)}:host([color=on-error-lighter]){color:var(--on-error-lighter)}:host([background=on-error-light]){background-color:var(--on-error-light)}:host([color=on-error-light]){color:var(--on-error-light)}:host([background=on-error]){background-color:var(--on-error)}:host([color=on-error]){color:var(--on-error)}:host([background=on-error-dark]){background-color:var(--on-error-dark)}:host([color=on-error-dark]){color:var(--on-error-dark)}:host([background=on-error-darker]){background-color:var(--on-error-darker)}:host([color=on-error-darker]){color:var(--on-error-darker)}:host([background=shade-lighter]){background-color:var(--shade-lighter)}:host([color=shade-lighter]){color:var(--shade-lighter)}:host([background=shade-light]){background-color:var(--shade-light)}:host([color=shade-light]){color:var(--shade-light)}:host([background=shade]){background-color:var(--shade)}:host([color=shade]){color:var(--shade)}:host([background=shade-dark]){background-color:var(--shade-dark)}:host([color=shade-dark]){color:var(--shade-dark)}:host([background=shade-darker]){background-color:var(--shade-darker)}:host([color=shade-darker]){color:var(--shade-darker)}:host([background=on-shade-lighter]){background-color:var(--on-shade-lighter)}:host([color=on-shade-lighter]){color:var(--on-shade-lighter)}:host([background=on-shade-light]){background-color:var(--on-shade-light)}:host([color=on-shade-light]){color:var(--on-shade-light)}:host([background=on-shade]){background-color:var(--on-shade)}:host([color=on-shade]){color:var(--on-shade)}:host([background=on-shade-dark]){background-color:var(--on-shade-dark)}:host([color=on-shade-dark]){color:var(--on-shade-dark)}:host([background=on-shade-darker]){background-color:var(--on-shade-darker)}:host([color=on-shade-darker]){color:var(--on-shade-darker)}:host([background=foreground]){background-color:var(--foreground)}:host([color=foreground]){color:var(--foreground)}:host([background=background]){background-color:var(--background)}:host([color=background]){color:var(--background)}:host([direction=column]){flex-direction:column}:host([direction=row-reverse]){flex-direction:row-reverse}:host([direction=column-reverse]){flex-direction:column-reverse}:host([text=center]){text-align:center}:host([text=justify]){text-align:justify}:host([text=left]){text-align:left}:host([text=right]){text-align:right}:host([weight=\"100\"]){font-weight:100}:host([weight=\"200\"]){font-weight:200}:host([weight=\"300\"]){font-weight:300}:host([weight=\"400\"]){font-weight:400}:host([weight=\"500\"]){font-weight:500}:host([weight=\"600\"]){font-weight:600}:host([weight=\"700\"]){font-weight:700}:host([weight=\"800\"]){font-weight:800}:host([weight=\"900\"]){font-weight:900}:host([weight=lighter]){font-weight:lighter}:host([weight=bold]){font-weight:700}:host([weight=bolder]){font-weight:bolder}:host([direction=row]){flex-direction:row}:host([direction=row-reverse]){flex-direction:row}:host([elevation=xsmall]){box-shadow:var(--box-elevation,var(--elevation-1,0 1px 2px var(--shadow)))}:host([elevation=small]){box-shadow:var(--box-elevation,var(--elevation-2,0 2px 4px var(--shadow)))}:host([elevation=medium]){box-shadow:var(--box-elevation,var(--elevation-3,0 4px 8px var(--shadow)))}:host([elevation=large]){box-shadow:var(--box-elevation,var(--elevation-4,0 8px 16px var(--shadow)))}:host([elevation=xlarge]){box-shadow:var(--box-elevation,var(--elevation-5,0 12px 24px var(--shadow)))}:host([fill=horizontal]){width:100%}:host([fill=vertical]){height:100%}:host([fill=true]){height:100%;width:100%}:host([flex=grow]){flex:1 0}:host([flex=shrink]){flex:0 1}:host([flex=true]){flex:1 1}:host([flex=false]){flex:0 0}:host([gap=xsmall]) ::slotted(*),:host([gap=xsmall][direction=column]) ::slotted(*){margin:var(--spacing-xs,.25rem) 0}:host([gap=xsmall][direction=row]) ::slotted(*){margin:0 var(--spacing-xs,.25rem)}:host([margin=xsmall]){margin:var(--box-margin,var(--spacing-xs,.25rem))}:host([vmargin=xsmall]){margin-bottom:var(--box-margin,var(--spacing-xs,.25rem));margin-top:var(--box-margin,var(--spacing-xs,.25rem))}:host([hmargin=xsmall]){margin-left:var(--box-margin,var(--spacing-xs,.25rem));margin-right:var(--box-margin,var(--spacing-xs,.25rem))}:host([margin=\"xsmall auto\"]){margin:var(--box-margin,var(--spacing-xs,.25rem)) auto}:host([margin=\"auto xsmall\"]){margin:auto var(--box-margin,var(--spacing-xs,.25rem))}:host([padding=xsmall]){padding:var(--box-padding,var(--spacing-xs,.25rem))}:host([vpadding=xsmall]){padding-bottom:var(--box-padding,var(--spacing-xs,.25rem));padding-top:var(--box-padding,var(--spacing-xs,.25rem))}:host([hpadding=xsmall]){padding-left:var(--box-padding,var(--spacing-xs,.25rem));padding-right:var(--box-padding,var(--spacing-xs,.25rem))}:host([gap=small]) ::slotted(*),:host([gap=small][direction=column]) ::slotted(*){margin:var(--spacing-s,.5rem) 0}:host([gap=small][direction=row]) ::slotted(*){margin:0 var(--spacing-s,.5rem)}:host([margin=small]){margin:var(--box-margin,var(--spacing-s,.5rem))}:host([vmargin=small]){margin-bottom:var(--box-margin,var(--spacing-s,.5rem));margin-top:var(--box-margin,var(--spacing-s,.5rem))}:host([hmargin=small]){margin-left:var(--box-margin,var(--spacing-s,.5rem));margin-right:var(--box-margin,var(--spacing-s,.5rem))}:host([margin=\"small auto\"]){margin:var(--box-margin,var(--spacing-s,.5rem)) auto}:host([margin=\"auto small\"]){margin:auto var(--box-margin,var(--spacing-s,.5rem))}:host([padding=small]){padding:var(--box-padding,var(--spacing-s,.5rem))}:host([vpadding=small]){padding-bottom:var(--box-padding,var(--spacing-s,.5rem));padding-top:var(--box-padding,var(--spacing-s,.5rem))}:host([hpadding=small]){padding-left:var(--box-padding,var(--spacing-s,.5rem));padding-right:var(--box-padding,var(--spacing-s,.5rem))}:host([gap=medium]) ::slotted(*),:host([gap=medium][direction=column]) ::slotted(*){margin:var(--spacing-m,1rem) 0}:host([gap=medium][direction=row]) ::slotted(*){margin:0 var(--spacing-m,1rem)}:host([margin=medium]){margin:var(--box-margin,var(--spacing-m,1rem))}:host([vmargin=medium]){margin-bottom:var(--box-margin,var(--spacing-m,1rem));margin-top:var(--box-margin,var(--spacing-m,1rem))}:host([hmargin=medium]){margin-left:var(--box-margin,var(--spacing-m,1rem));margin-right:var(--box-margin,var(--spacing-m,1rem))}:host([margin=\"medium auto\"]){margin:var(--box-margin,var(--spacing-m,1rem)) auto}:host([margin=\"auto medium\"]){margin:auto var(--box-margin,var(--spacing-m,1rem))}:host([padding=medium]){padding:var(--box-padding,var(--spacing-m,1rem))}:host([vpadding=medium]){padding-bottom:var(--box-padding,var(--spacing-m,1rem));padding-top:var(--box-padding,var(--spacing-m,1rem))}:host([hpadding=medium]){padding-left:var(--box-padding,var(--spacing-m,1rem));padding-right:var(--box-padding,var(--spacing-m,1rem))}:host([gap=large]) ::slotted(*),:host([gap=large][direction=column]) ::slotted(*){margin:var(--spacing-l,1.25rem) 0}:host([gap=large][direction=row]) ::slotted(*){margin:0 var(--spacing-l,1.25rem)}:host([margin=large]){margin:var(--box-margin,var(--spacing-l,1.25rem))}:host([vmargin=large]){margin-bottom:var(--box-margin,var(--spacing-l,1.25rem));margin-top:var(--box-margin,var(--spacing-l,1.25rem))}:host([hmargin=large]){margin-left:var(--box-margin,var(--spacing-l,1.25rem));margin-right:var(--box-margin,var(--spacing-l,1.25rem))}:host([margin=\"large auto\"]){margin:var(--box-margin,var(--spacing-l,1.25rem)) auto}:host([margin=\"auto large\"]){margin:auto var(--box-margin,var(--spacing-l,1.25rem))}:host([padding=large]){padding:var(--box-padding,var(--spacing-l,1.25rem))}:host([vpadding=large]){padding-bottom:var(--box-padding,var(--spacing-l,1.25rem));padding-top:var(--box-padding,var(--spacing-l,1.25rem))}:host([hpadding=large]){padding-left:var(--box-padding,var(--spacing-l,1.25rem));padding-right:var(--box-padding,var(--spacing-l,1.25rem))}:host([gap=xlarge]) ::slotted(*),:host([gap=xlarge][direction=column]) ::slotted(*){margin:var(--spacing-xl,2rem) 0}:host([gap=xlarge][direction=row]) ::slotted(*){margin:0 var(--spacing-xl,2rem)}:host([margin=xlarge]){margin:var(--box-margin,var(--spacing-xl,2rem))}:host([vmargin=xlarge]){margin-bottom:var(--box-margin,var(--spacing-xl,2rem));margin-top:var(--box-margin,var(--spacing-xl,2rem))}:host([hmargin=xlarge]){margin-left:var(--box-margin,var(--spacing-xl,2rem));margin-right:var(--box-margin,var(--spacing-xl,2rem))}:host([margin=\"xlarge auto\"]){margin:var(--box-margin,var(--spacing-xl,2rem)) auto}:host([margin=\"auto xlarge\"]){margin:auto var(--box-margin,var(--spacing-xl,2rem))}:host([padding=xlarge]){padding:var(--box-padding,var(--spacing-xl,2rem))}:host([vpadding=xlarge]){padding-bottom:var(--box-padding,var(--spacing-xl,2rem));padding-top:var(--box-padding,var(--spacing-xl,2rem))}:host([hpadding=xlarge]){padding-left:var(--box-padding,var(--spacing-xl,2rem));padding-right:var(--box-padding,var(--spacing-xl,2rem))}:host([font=xsmall]),:host([size=xsmall]){font-size:var(--box-font-size,var(--font-size-xs,.625rem))}:host([font=small]),:host([size=small]){font-size:var(--box-font-size,var(--font-size-s,.875rem))}:host([font=medium]),:host([size=medium]){font-size:var(--box-font-size,var(--font-size-m,1rem))}:host([font=large]),:host([size=large]){font-size:var(--box-font-size,var(--font-size-l,1.25rem))}:host([font=xlarge]),:host([size=xlarge]){font-size:var(--box-font-size,var(--font-size-xl,1.5rem))}:host([font=xxlarge]),:host([size=xxlarge]){font-size:var(--box-font-size,var(--font-size-xxl,2.25rem))}:host([justify=start]){justify-content:flex-start}:host([justify=end]){justify-content:flex-end}:host([justify=stretch]){justify-content:stretch}:host([justify=baseline]){justify-content:baseline}:host([justify=center]){justify-content:center}:host([justify=around]){justify-content:space-around}:host([justify=between]){justify-content:space-between}:host([justify=evenly]){justify-content:space-evenly}:host([overflow=auto]){overflow:auto}:host([overflow=hidden]){overflow:hidden}:host([overflow=scroll]){overflow:scroll}:host([overflow=visible]){overflow:visible}:host([radius=none]){border-radius:var(--box-border-radius,0)}:host([radius=small]){border-radius:var(--box-border-radius,var(--border-radius-small,.125rem))}:host([radius=medium]){border-radius:var(--box-border-radius,var(--border-radius-medium,.25rem))}:host([radius=large]){border-radius:var(--box-border-radius,var(--border-radius-large,.5rem))}:host([radius=xlarge]){border-radius:var(--box-border-radius,var(--border-radius-x-large,1rem))}:host([radius=circle]){border-radius:var(--box-border-radius,var(--border-radius-circle,50%))}:host([radius=pill]){border-radius:var(--box-border-radius,var(--border-radius-pill,9999px))}:host([max-width=xxsmall]){max-width:var(--box-max-width,var(--size-xxs,2rem))}:host([width=xxsmall]){width:var(--box-width,var(--size-xxs,2rem))}:host([max-height=xxsmall]){max-height:var(--box-max-height,var(--size-xxs,2rem))}:host([height=xxsmall]){height:var(--box-height,var(--size-xxs,2rem))}:host([max-width=xsmall]){max-width:var(--box-max-width,var(--size-xs,4rem))}:host([width=xsmall]){width:var(--box-width,var(--size-xs,4rem))}:host([max-height=xsmall]){max-height:var(--box-max-height,var(--size-xs,4rem))}:host([height=xsmall]){height:var(--box-height,var(--size-xs,4rem))}:host([max-width=small]){max-width:var(--box-max-width,var(--size-s,8rem))}:host([width=small]){width:var(--box-width,var(--size-s,8rem))}:host([max-height=small]){max-height:var(--box-max-height,var(--size-s,8rem))}:host([height=small]){height:var(--box-height,var(--size-s,8rem))}:host([max-width=medium]){max-width:var(--box-max-width,var(--size-m,16rem))}:host([width=medium]){width:var(--box-width,var(--size-m,16rem))}:host([max-height=medium]){max-height:var(--box-max-height,var(--size-m,16rem))}:host([height=medium]){height:var(--box-height,var(--size-m,16rem))}:host([max-width=large]){max-width:var(--box-max-width,var(--size-l,32rem))}:host([width=large]){width:var(--box-width,var(--size-l,32rem))}:host([max-height=large]){max-height:var(--box-max-height,var(--size-l,32rem))}:host([height=large]){height:var(--box-height,var(--size-l,32rem))}:host([max-width=xlarge]){max-width:var(--box-max-width,var(--size-xl,48rem))}:host([width=xlarge]){width:var(--box-width,var(--size-xl,48rem))}:host([max-height=xlarge]){max-height:var(--box-max-height,var(--size-xl,48rem))}:host([height=xlarge]){height:var(--box-height,var(--size-xl,48rem))}:host([max-width=xxlarge]){max-width:var(--box-max-width,var(--size-xxl,64rem))}:host([width=xxlarge]){width:var(--box-width,var(--size-xxl,64rem))}:host([max-height=xxlarge]){max-height:var(--box-max-height,var(--size-xxl,64rem))}:host([height=xxlarge]){height:var(--box-height,var(--size-xxl,64rem))}:host([wrap=true]){flex-wrap:wrap}:host([wrap=reverse]){flex-wrap:wrap-reverse}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{box-sizing:border-box;display:flex;flex-direction:column;position:relative;transition:background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease)}:host([hidden]){display:none}.ripple{bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0}.ripple span{background-color:currentColor;border-radius:50%;opacity:.5;position:absolute}:host([align-content=start]){align-content:flex-start}:host([align-content=end]){align-content:flex-end}:host([align-content=stretch]){align-content:stretch}:host([align-content=center]){align-content:center}:host([align-content=around]){align-content:space-around}:host([align-content=between]){align-content:space-between}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([align-items=stretch]){align-items:stretch}:host([align-items=center]){align-items:center}:host([align-items=baseline]){align-items:baseline}:host([align-self=start]){align-self:flex-start}:host([align-self=end]){align-self:flex-end}:host([align-self=stretch]){align-self:stretch}:host([align-self=center]){align-self:center}:host([background=primary-lighter]){background-color:var(--primary-lighter)}:host([color=primary-lighter]){color:var(--primary-lighter)}:host([background=primary-light]){background-color:var(--primary-light)}:host([color=primary-light]){color:var(--primary-light)}:host([background=primary]){background-color:var(--primary)}:host([color=primary]){color:var(--primary)}:host([background=primary-dark]){background-color:var(--primary-dark)}:host([color=primary-dark]){color:var(--primary-dark)}:host([background=primary-darker]){background-color:var(--primary-darker)}:host([color=primary-darker]){color:var(--primary-darker)}:host([background=on-primary-lighter]){background-color:var(--on-primary-lighter)}:host([color=on-primary-lighter]){color:var(--on-primary-lighter)}:host([background=on-primary-light]){background-color:var(--on-primary-light)}:host([color=on-primary-light]){color:var(--on-primary-light)}:host([background=on-primary]){background-color:var(--on-primary)}:host([color=on-primary]){color:var(--on-primary)}:host([background=on-primary-dark]){background-color:var(--on-primary-dark)}:host([color=on-primary-dark]){color:var(--on-primary-dark)}:host([background=on-primary-darker]){background-color:var(--on-primary-darker)}:host([color=on-primary-darker]){color:var(--on-primary-darker)}:host([background=accent-lighter]){background-color:var(--accent-lighter)}:host([color=accent-lighter]){color:var(--accent-lighter)}:host([background=accent-light]){background-color:var(--accent-light)}:host([color=accent-light]){color:var(--accent-light)}:host([background=accent]){background-color:var(--accent)}:host([color=accent]){color:var(--accent)}:host([background=accent-dark]){background-color:var(--accent-dark)}:host([color=accent-dark]){color:var(--accent-dark)}:host([background=accent-darker]){background-color:var(--accent-darker)}:host([color=accent-darker]){color:var(--accent-darker)}:host([background=on-accent-lighter]){background-color:var(--on-accent-lighter)}:host([color=on-accent-lighter]){color:var(--on-accent-lighter)}:host([background=on-accent-light]){background-color:var(--on-accent-light)}:host([color=on-accent-light]){color:var(--on-accent-light)}:host([background=on-accent]){background-color:var(--on-accent)}:host([color=on-accent]){color:var(--on-accent)}:host([background=on-accent-dark]){background-color:var(--on-accent-dark)}:host([color=on-accent-dark]){color:var(--on-accent-dark)}:host([background=on-accent-darker]){background-color:var(--on-accent-darker)}:host([color=on-accent-darker]){color:var(--on-accent-darker)}:host([background=error-lighter]){background-color:var(--error-lighter)}:host([color=error-lighter]){color:var(--error-lighter)}:host([background=error-light]){background-color:var(--error-light)}:host([color=error-light]){color:var(--error-light)}:host([background=error]){background-color:var(--error)}:host([color=error]){color:var(--error)}:host([background=error-dark]){background-color:var(--error-dark)}:host([color=error-dark]){color:var(--error-dark)}:host([background=error-darker]){background-color:var(--error-darker)}:host([color=error-darker]){color:var(--error-darker)}:host([background=on-error-lighter]){background-color:var(--on-error-lighter)}:host([color=on-error-lighter]){color:var(--on-error-lighter)}:host([background=on-error-light]){background-color:var(--on-error-light)}:host([color=on-error-light]){color:var(--on-error-light)}:host([background=on-error]){background-color:var(--on-error)}:host([color=on-error]){color:var(--on-error)}:host([background=on-error-dark]){background-color:var(--on-error-dark)}:host([color=on-error-dark]){color:var(--on-error-dark)}:host([background=on-error-darker]){background-color:var(--on-error-darker)}:host([color=on-error-darker]){color:var(--on-error-darker)}:host([background=shade-lighter]){background-color:var(--shade-lighter)}:host([color=shade-lighter]){color:var(--shade-lighter)}:host([background=shade-light]){background-color:var(--shade-light)}:host([color=shade-light]){color:var(--shade-light)}:host([background=shade]){background-color:var(--shade)}:host([color=shade]){color:var(--shade)}:host([background=shade-dark]){background-color:var(--shade-dark)}:host([color=shade-dark]){color:var(--shade-dark)}:host([background=shade-darker]){background-color:var(--shade-darker)}:host([color=shade-darker]){color:var(--shade-darker)}:host([background=on-shade-lighter]){background-color:var(--on-shade-lighter)}:host([color=on-shade-lighter]){color:var(--on-shade-lighter)}:host([background=on-shade-light]){background-color:var(--on-shade-light)}:host([color=on-shade-light]){color:var(--on-shade-light)}:host([background=on-shade]){background-color:var(--on-shade)}:host([color=on-shade]){color:var(--on-shade)}:host([background=on-shade-dark]){background-color:var(--on-shade-dark)}:host([color=on-shade-dark]){color:var(--on-shade-dark)}:host([background=on-shade-darker]){background-color:var(--on-shade-darker)}:host([color=on-shade-darker]){color:var(--on-shade-darker)}:host([background=foreground]){background-color:var(--foreground)}:host([color=foreground]){color:var(--foreground)}:host([background=background]){background-color:var(--background)}:host([color=background]){color:var(--background)}:host([direction=column]){flex-direction:column}:host([direction=row-reverse]){flex-direction:row-reverse}:host([direction=column-reverse]){flex-direction:column-reverse}:host([text=center]){text-align:center}:host([text=justify]){text-align:justify}:host([text=left]){text-align:left}:host([text=right]){text-align:right}:host([weight=\"100\"]){font-weight:100}:host([weight=\"200\"]){font-weight:200}:host([weight=\"300\"]){font-weight:300}:host([weight=\"400\"]){font-weight:400}:host([weight=\"500\"]){font-weight:500}:host([weight=\"600\"]){font-weight:600}:host([weight=\"700\"]){font-weight:700}:host([weight=\"800\"]){font-weight:800}:host([weight=\"900\"]){font-weight:900}:host([weight=lighter]){font-weight:lighter}:host([weight=bold]){font-weight:700}:host([weight=bolder]){font-weight:bolder}:host([direction=row]){flex-direction:row}:host([direction=row-reverse]){flex-direction:row}:host([elevation=xsmall]){box-shadow:var(--box-elevation,var(--elevation-1,0 1px 2px var(--shadow)))}:host([elevation=small]){box-shadow:var(--box-elevation,var(--elevation-2,0 2px 4px var(--shadow)))}:host([elevation=medium]){box-shadow:var(--box-elevation,var(--elevation-3,0 4px 8px var(--shadow)))}:host([elevation=large]){box-shadow:var(--box-elevation,var(--elevation-4,0 8px 16px var(--shadow)))}:host([elevation=xlarge]){box-shadow:var(--box-elevation,var(--elevation-5,0 12px 24px var(--shadow)))}:host([fill=horizontal]){width:100%}:host([fill=vertical]){height:100%}:host([fill=true]){height:100%;width:100%}:host([flex=grow]){flex:1 0}:host([flex=shrink]){flex:0 1}:host([flex=true]){flex:1 1}:host([flex=false]){flex:0 0}:host([gap=xsmall]) ::slotted(*),:host([gap=xsmall][direction=column]) ::slotted(*){margin:var(--spacing-xs,.25rem) 0}:host([gap=xsmall][direction=row]) ::slotted(*){margin:0 var(--spacing-xs,.25rem)}:host([margin=xsmall]){margin:var(--box-margin,var(--spacing-xs,.25rem))}:host([vmargin=xsmall]){margin-bottom:var(--box-margin,var(--spacing-xs,.25rem));margin-top:var(--box-margin,var(--spacing-xs,.25rem))}:host([hmargin=xsmall]){margin-left:var(--box-margin,var(--spacing-xs,.25rem));margin-right:var(--box-margin,var(--spacing-xs,.25rem))}:host([margin=\"xsmall auto\"]){margin:var(--box-margin,var(--spacing-xs,.25rem)) auto}:host([margin=\"auto xsmall\"]){margin:auto var(--box-margin,var(--spacing-xs,.25rem))}:host([padding=xsmall]){padding:var(--box-padding,var(--spacing-xs,.25rem))}:host([vpadding=xsmall]){padding-bottom:var(--box-padding,var(--spacing-xs,.25rem));padding-top:var(--box-padding,var(--spacing-xs,.25rem))}:host([hpadding=xsmall]){padding-left:var(--box-padding,var(--spacing-xs,.25rem));padding-right:var(--box-padding,var(--spacing-xs,.25rem))}:host([gap=small]) ::slotted(*),:host([gap=small][direction=column]) ::slotted(*){margin:var(--spacing-s,.5rem) 0}:host([gap=small][direction=row]) ::slotted(*){margin:0 var(--spacing-s,.5rem)}:host([margin=small]){margin:var(--box-margin,var(--spacing-s,.5rem))}:host([vmargin=small]){margin-bottom:var(--box-margin,var(--spacing-s,.5rem));margin-top:var(--box-margin,var(--spacing-s,.5rem))}:host([hmargin=small]){margin-left:var(--box-margin,var(--spacing-s,.5rem));margin-right:var(--box-margin,var(--spacing-s,.5rem))}:host([margin=\"small auto\"]){margin:var(--box-margin,var(--spacing-s,.5rem)) auto}:host([margin=\"auto small\"]){margin:auto var(--box-margin,var(--spacing-s,.5rem))}:host([padding=small]){padding:var(--box-padding,var(--spacing-s,.5rem))}:host([vpadding=small]){padding-bottom:var(--box-padding,var(--spacing-s,.5rem));padding-top:var(--box-padding,var(--spacing-s,.5rem))}:host([hpadding=small]){padding-left:var(--box-padding,var(--spacing-s,.5rem));padding-right:var(--box-padding,var(--spacing-s,.5rem))}:host([gap=medium]) ::slotted(*),:host([gap=medium][direction=column]) ::slotted(*){margin:var(--spacing-m,1rem) 0}:host([gap=medium][direction=row]) ::slotted(*){margin:0 var(--spacing-m,1rem)}:host([margin=medium]){margin:var(--box-margin,var(--spacing-m,1rem))}:host([vmargin=medium]){margin-bottom:var(--box-margin,var(--spacing-m,1rem));margin-top:var(--box-margin,var(--spacing-m,1rem))}:host([hmargin=medium]){margin-left:var(--box-margin,var(--spacing-m,1rem));margin-right:var(--box-margin,var(--spacing-m,1rem))}:host([margin=\"medium auto\"]){margin:var(--box-margin,var(--spacing-m,1rem)) auto}:host([margin=\"auto medium\"]){margin:auto var(--box-margin,var(--spacing-m,1rem))}:host([padding=medium]){padding:var(--box-padding,var(--spacing-m,1rem))}:host([vpadding=medium]){padding-bottom:var(--box-padding,var(--spacing-m,1rem));padding-top:var(--box-padding,var(--spacing-m,1rem))}:host([hpadding=medium]){padding-left:var(--box-padding,var(--spacing-m,1rem));padding-right:var(--box-padding,var(--spacing-m,1rem))}:host([gap=large]) ::slotted(*),:host([gap=large][direction=column]) ::slotted(*){margin:var(--spacing-l,1.25rem) 0}:host([gap=large][direction=row]) ::slotted(*){margin:0 var(--spacing-l,1.25rem)}:host([margin=large]){margin:var(--box-margin,var(--spacing-l,1.25rem))}:host([vmargin=large]){margin-bottom:var(--box-margin,var(--spacing-l,1.25rem));margin-top:var(--box-margin,var(--spacing-l,1.25rem))}:host([hmargin=large]){margin-left:var(--box-margin,var(--spacing-l,1.25rem));margin-right:var(--box-margin,var(--spacing-l,1.25rem))}:host([margin=\"large auto\"]){margin:var(--box-margin,var(--spacing-l,1.25rem)) auto}:host([margin=\"auto large\"]){margin:auto var(--box-margin,var(--spacing-l,1.25rem))}:host([padding=large]){padding:var(--box-padding,var(--spacing-l,1.25rem))}:host([vpadding=large]){padding-bottom:var(--box-padding,var(--spacing-l,1.25rem));padding-top:var(--box-padding,var(--spacing-l,1.25rem))}:host([hpadding=large]){padding-left:var(--box-padding,var(--spacing-l,1.25rem));padding-right:var(--box-padding,var(--spacing-l,1.25rem))}:host([gap=xlarge]) ::slotted(*),:host([gap=xlarge][direction=column]) ::slotted(*){margin:var(--spacing-xl,2rem) 0}:host([gap=xlarge][direction=row]) ::slotted(*){margin:0 var(--spacing-xl,2rem)}:host([margin=xlarge]){margin:var(--box-margin,var(--spacing-xl,2rem))}:host([vmargin=xlarge]){margin-bottom:var(--box-margin,var(--spacing-xl,2rem));margin-top:var(--box-margin,var(--spacing-xl,2rem))}:host([hmargin=xlarge]){margin-left:var(--box-margin,var(--spacing-xl,2rem));margin-right:var(--box-margin,var(--spacing-xl,2rem))}:host([margin=\"xlarge auto\"]){margin:var(--box-margin,var(--spacing-xl,2rem)) auto}:host([margin=\"auto xlarge\"]){margin:auto var(--box-margin,var(--spacing-xl,2rem))}:host([padding=xlarge]){padding:var(--box-padding,var(--spacing-xl,2rem))}:host([vpadding=xlarge]){padding-bottom:var(--box-padding,var(--spacing-xl,2rem));padding-top:var(--box-padding,var(--spacing-xl,2rem))}:host([hpadding=xlarge]){padding-left:var(--box-padding,var(--spacing-xl,2rem));padding-right:var(--box-padding,var(--spacing-xl,2rem))}:host([font=xsmall]),:host([size=xsmall]){font-size:var(--box-font-size,var(--font-size-xs,.625rem))}:host([font=small]),:host([size=small]){font-size:var(--box-font-size,var(--font-size-s,.875rem))}:host([font=medium]),:host([size=medium]){font-size:var(--box-font-size,var(--font-size-m,1rem))}:host([font=large]),:host([size=large]){font-size:var(--box-font-size,var(--font-size-l,1.25rem))}:host([font=xlarge]),:host([size=xlarge]){font-size:var(--box-font-size,var(--font-size-xl,1.5rem))}:host([font=xxlarge]),:host([size=xxlarge]){font-size:var(--box-font-size,var(--font-size-xxl,2.25rem))}:host([justify=start]){justify-content:flex-start}:host([justify=end]){justify-content:flex-end}:host([justify=stretch]){justify-content:stretch}:host([justify=baseline]){justify-content:baseline}:host([justify=center]){justify-content:center}:host([justify=around]){justify-content:space-around}:host([justify=between]){justify-content:space-between}:host([justify=evenly]){justify-content:space-evenly}:host([overflow=auto]){overflow:auto}:host([overflow=hidden]){overflow:hidden}:host([overflow=scroll]){overflow:scroll}:host([overflow=visible]){overflow:visible}:host([radius=none]){border-radius:var(--box-border-radius,0)}:host([radius=small]){border-radius:var(--box-border-radius,var(--border-radius-small,.125rem))}:host([radius=medium]){border-radius:var(--box-border-radius,var(--border-radius-medium,.25rem))}:host([radius=large]){border-radius:var(--box-border-radius,var(--border-radius-large,.5rem))}:host([radius=xlarge]){border-radius:var(--box-border-radius,var(--border-radius-x-large,1rem))}:host([radius=circle]){border-radius:var(--box-border-radius,var(--border-radius-circle,50%))}:host([radius=pill]){border-radius:var(--box-border-radius,var(--border-radius-pill,9999px))}:host([max-width=xxsmall]){max-width:var(--box-max-width,var(--size-xxs,2rem))}:host([width=xxsmall]){width:var(--box-width,var(--size-xxs,2rem))}:host([max-height=xxsmall]){max-height:var(--box-max-height,var(--size-xxs,2rem))}:host([height=xxsmall]){height:var(--box-height,var(--size-xxs,2rem))}:host([max-width=xsmall]){max-width:var(--box-max-width,var(--size-xs,4rem))}:host([width=xsmall]){width:var(--box-width,var(--size-xs,4rem))}:host([max-height=xsmall]){max-height:var(--box-max-height,var(--size-xs,4rem))}:host([height=xsmall]){height:var(--box-height,var(--size-xs,4rem))}:host([max-width=small]){max-width:var(--box-max-width,var(--size-s,8rem))}:host([width=small]){width:var(--box-width,var(--size-s,8rem))}:host([max-height=small]){max-height:var(--box-max-height,var(--size-s,8rem))}:host([height=small]){height:var(--box-height,var(--size-s,8rem))}:host([max-width=medium]){max-width:var(--box-max-width,var(--size-m,16rem))}:host([width=medium]){width:var(--box-width,var(--size-m,16rem))}:host([max-height=medium]){max-height:var(--box-max-height,var(--size-m,16rem))}:host([height=medium]){height:var(--box-height,var(--size-m,16rem))}:host([max-width=large]){max-width:var(--box-max-width,var(--size-l,32rem))}:host([width=large]){width:var(--box-width,var(--size-l,32rem))}:host([max-height=large]){max-height:var(--box-max-height,var(--size-l,32rem))}:host([height=large]){height:var(--box-height,var(--size-l,32rem))}:host([max-width=xlarge]){max-width:var(--box-max-width,var(--size-xl,48rem))}:host([width=xlarge]){width:var(--box-width,var(--size-xl,48rem))}:host([max-height=xlarge]){max-height:var(--box-max-height,var(--size-xl,48rem))}:host([height=xlarge]){height:var(--box-height,var(--size-xl,48rem))}:host([max-width=xxlarge]){max-width:var(--box-max-width,var(--size-xxl,64rem))}:host([width=xxlarge]){width:var(--box-width,var(--size-xxl,64rem))}:host([max-height=xxlarge]){max-height:var(--box-max-height,var(--size-xxl,64rem))}:host([height=xxlarge]){height:var(--box-height,var(--size-xxl,64rem))}:host([wrap=true]){flex-wrap:wrap}:host([wrap=reverse]){flex-wrap:wrap-reverse}";
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{box-sizing:border-box;display:flex;flex-direction:column;position:relative}:host([hidden]){display:none}.ripple{bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0}.ripple span{background-color:hsla(var(--on-primary),.5);border-radius:50%;position:absolute}:host([align-content=start]){align-content:flex-start}:host([align-content=end]){align-content:flex-end}:host([align-content=stretch]){align-content:stretch}:host([align-content=center]){align-content:center}:host([align-content=around]){align-content:space-around}:host([align-content=between]){align-content:space-between}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([align-items=stretch]){align-items:stretch}:host([align-items=center]){align-items:center}:host([align-items=baseline]){align-items:baseline}:host([align-self=start]){align-self:flex-start}:host([align-self=end]){align-self:flex-end}:host([align-self=stretch]){align-self:stretch}:host([align-self=center]){align-self:center}:host([background=primary]){background-color:hsl(var(--primary))}:host([color=primary]){color:hsl(var(--primary))}:host([background=on-primary]){background-color:hsl(var(--on-primary))}:host([color=on-primary]){color:hsl(var(--on-primary))}:host([background=secondary]){background-color:hsl(var(--secondary))}:host([color=secondary]){color:hsl(var(--secondary))}:host([background=on-secondary]){background-color:hsl(var(--on-secondary))}:host([color=on-secondary]){color:hsl(var(--on-secondary))}:host([background=tertiary]){background-color:hsl(var(--tertiary))}:host([color=tertiary]){color:hsl(var(--tertiary))}:host([background=on-tertiary]){background-color:hsl(var(--on-tertiary))}:host([color=on-tertiary]){color:hsl(var(--on-tertiary))}:host([background=neutral]){background-color:hsl(var(--neutral))}:host([color=neutral]){color:hsl(var(--neutral))}:host([background=on-neutral]){background-color:hsl(var(--on-neutral))}:host([color=on-neutral]){color:hsl(var(--on-neutral))}:host([background=neutral-variant]){background-color:hsl(var(--neutral-variant))}:host([color=neutral-variant]){color:hsl(var(--neutral-variant))}:host([background=on-neutral-variant]){background-color:hsl(var(--on-neutral-variant))}:host([color=on-neutral-variant]){color:hsl(var(--on-neutral-variant))}:host([background=error]){background-color:hsl(var(--error))}:host([color=error]){color:hsl(var(--error))}:host([background=on-error]){background-color:hsl(var(--on-error))}:host([color=on-error]){color:hsl(var(--on-error))}:host([background=primary-container]){background-color:hsl(var(--primary-container))}:host([color=primary-container]){color:hsl(var(--primary-container))}:host([background=on-primary-container]){background-color:hsl(var(--on-primary-container))}:host([color=on-primary-container]){color:hsl(var(--on-primary-container))}:host([background=secondary-container]){background-color:hsl(var(--secondary-container))}:host([color=secondary-container]){color:hsl(var(--secondary-container))}:host([background=on-secondary-container]){background-color:hsl(var(--on-secondary-container))}:host([color=on-secondary-container]){color:hsl(var(--on-secondary-container))}:host([background=tertiary-container]){background-color:hsl(var(--tertiary-container))}:host([color=tertiary-container]){color:hsl(var(--tertiary-container))}:host([background=on-tertiary-container]){background-color:hsl(var(--on-tertiary-container))}:host([color=on-tertiary-container]){color:hsl(var(--on-tertiary-container))}:host([background=neutral-container]){background-color:hsl(var(--neutral-container))}:host([color=neutral-container]){color:hsl(var(--neutral-container))}:host([background=on-neutral-container]){background-color:hsl(var(--on-neutral-container))}:host([color=on-neutral-container]){color:hsl(var(--on-neutral-container))}:host([background=neutral-variant-container]){background-color:hsl(var(--neutral-variant-container))}:host([color=neutral-variant-container]){color:hsl(var(--neutral-variant-container))}:host([background=on-neutral-variant-container]){background-color:hsl(var(--on-neutral-variant-container))}:host([color=on-neutral-variant-container]){color:hsl(var(--on-neutral-variant-container))}:host([background=error-container]){background-color:hsl(var(--error-container))}:host([color=error-container]){color:hsl(var(--error-container))}:host([background=on-error-container]){background-color:hsl(var(--on-error-container))}:host([color=on-error-container]){color:hsl(var(--on-error-container))}:host([background=primary-0]){background-color:hsl(var(--primary-0))}:host([color=primary-0]){color:hsl(var(--primary-0))}:host([background=surface]){background-color:hsl(var(--surface))}:host([color=surface]){color:hsl(var(--surface))}:host([background=on-surface]){background-color:hsl(var(--on-surface))}:host([color=on-surface]){color:hsl(var(--on-surface))}:host([background=surface-dim]){background-color:hsl(var(--surface-dim))}:host([color=surface-dim]){color:hsl(var(--surface-dim))}:host([background=surface-bright]){background-color:hsl(var(--surface-bright))}:host([color=surface-bright]){color:hsl(var(--surface-bright))}:host([background=surface-container-lowest]){background-color:hsl(var(--surface-container-lowest))}:host([color=surface-container-lowest]){color:hsl(var(--surface-container-lowest))}:host([background=surface-container-low]){background-color:hsl(var(--surface-container-low))}:host([color=surface-container-low]){color:hsl(var(--surface-container-low))}:host([background=surface-container]){background-color:hsl(var(--surface-container))}:host([color=surface-container]){color:hsl(var(--surface-container))}:host([background=surface-container-high]){background-color:hsl(var(--surface-container-high))}:host([color=surface-container-high]){color:hsl(var(--surface-container-high))}:host([background=surface-container-highest]){background-color:hsl(var(--surface-container-highest))}:host([color=surface-container-highest]){color:hsl(var(--surface-container-highest))}:host([background=surface-variant]){background-color:hsl(var(--surface-variant))}:host([color=surface-variant]){color:hsl(var(--surface-variant))}:host([background=on-surface-variant]){background-color:hsl(var(--on-surface-variant))}:host([color=on-surface-variant]){color:hsl(var(--on-surface-variant))}:host([background=outline]){background-color:hsl(var(--outline))}:host([color=outline]){color:hsl(var(--outline))}:host([background=outline-variant]){background-color:hsl(var(--outline-variant))}:host([color=outline-variant]){color:hsl(var(--outline-variant))}:host([background=inverse-surface]){background-color:hsl(var(--inverse-surface))}:host([color=inverse-surface]){color:hsl(var(--inverse-surface))}:host([background=inverse-on-surface]){background-color:hsl(var(--inverse-on-surface))}:host([color=inverse-on-surface]){color:hsl(var(--inverse-on-surface))}:host([background=background]){background-color:hsl(var(--background))}:host([color=background]){color:hsl(var(--background))}:host([background=on-background]){background-color:hsl(var(--on-background))}:host([color=on-background]){color:hsl(var(--on-background))}:host([background=shadow]){background-color:hsl(var(--shadow))}:host([color=shadow]){color:hsl(var(--shadow))}:host([background=primary-10]){background-color:hsl(var(--primary-10))}:host([color=primary-10]){color:hsl(var(--primary-10))}:host([background=primary-20]){background-color:hsl(var(--primary-20))}:host([color=primary-20]){color:hsl(var(--primary-20))}:host([background=primary-30]){background-color:hsl(var(--primary-30))}:host([color=primary-30]){color:hsl(var(--primary-30))}:host([background=primary-40]){background-color:hsl(var(--primary-40))}:host([color=primary-40]){color:hsl(var(--primary-40))}:host([background=primary-50]){background-color:hsl(var(--primary-50))}:host([color=primary-50]){color:hsl(var(--primary-50))}:host([background=primary-60]){background-color:hsl(var(--primary-60))}:host([color=primary-60]){color:hsl(var(--primary-60))}:host([background=primary-70]){background-color:hsl(var(--primary-70))}:host([color=primary-70]){color:hsl(var(--primary-70))}:host([background=primary-80]){background-color:hsl(var(--primary-80))}:host([color=primary-80]){color:hsl(var(--primary-80))}:host([background=primary-90]){background-color:hsl(var(--primary-90))}:host([color=primary-90]){color:hsl(var(--primary-90))}:host([background=primary-95]){background-color:hsl(var(--primary-95))}:host([color=primary-95]){color:hsl(var(--primary-95))}:host([background=primary-99]){background-color:hsl(var(--primary-99))}:host([color=primary-99]){color:hsl(var(--primary-99))}:host([background=primary-100]){background-color:hsl(var(--primary-100))}:host([color=primary-100]){color:hsl(var(--primary-100))}:host([background=secondary-0]){background-color:hsl(var(--secondary-0))}:host([color=secondary-0]){color:hsl(var(--secondary-0))}:host([background=secondary-10]){background-color:hsl(var(--secondary-10))}:host([color=secondary-10]){color:hsl(var(--secondary-10))}:host([background=secondary-20]){background-color:hsl(var(--secondary-20))}:host([color=secondary-20]){color:hsl(var(--secondary-20))}:host([background=secondary-30]){background-color:hsl(var(--secondary-30))}:host([color=secondary-30]){color:hsl(var(--secondary-30))}:host([background=secondary-40]){background-color:hsl(var(--secondary-40))}:host([color=secondary-40]){color:hsl(var(--secondary-40))}:host([background=secondary-50]){background-color:hsl(var(--secondary-50))}:host([color=secondary-50]){color:hsl(var(--secondary-50))}:host([background=secondary-60]){background-color:hsl(var(--secondary-60))}:host([color=secondary-60]){color:hsl(var(--secondary-60))}:host([background=secondary-70]){background-color:hsl(var(--secondary-70))}:host([color=secondary-70]){color:hsl(var(--secondary-70))}:host([background=secondary-80]){background-color:hsl(var(--secondary-80))}:host([color=secondary-80]){color:hsl(var(--secondary-80))}:host([background=secondary-90]){background-color:hsl(var(--secondary-90))}:host([color=secondary-90]){color:hsl(var(--secondary-90))}:host([background=secondary-100]){background-color:hsl(var(--secondary-100))}:host([color=secondary-100]){color:hsl(var(--secondary-100))}:host([background=tertiary-0]){background-color:hsl(var(--tertiary-0))}:host([color=tertiary-0]){color:hsl(var(--tertiary-0))}:host([background=tertiary-10]){background-color:hsl(var(--tertiary-10))}:host([color=tertiary-10]){color:hsl(var(--tertiary-10))}:host([background=tertiary-20]){background-color:hsl(var(--tertiary-20))}:host([color=tertiary-20]){color:hsl(var(--tertiary-20))}:host([background=tertiary-30]){background-color:hsl(var(--tertiary-30))}:host([color=tertiary-30]){color:hsl(var(--tertiary-30))}:host([background=tertiary-40]){background-color:hsl(var(--tertiary-40))}:host([color=tertiary-40]){color:hsl(var(--tertiary-40))}:host([background=tertiary-50]){background-color:hsl(var(--tertiary-50))}:host([color=tertiary-50]){color:hsl(var(--tertiary-50))}:host([background=tertiary-60]){background-color:hsl(var(--tertiary-60))}:host([color=tertiary-60]){color:hsl(var(--tertiary-60))}:host([background=tertiary-70]){background-color:hsl(var(--tertiary-70))}:host([color=tertiary-70]){color:hsl(var(--tertiary-70))}:host([background=tertiary-80]){background-color:hsl(var(--tertiary-80))}:host([color=tertiary-80]){color:hsl(var(--tertiary-80))}:host([background=tertiary-90]){background-color:hsl(var(--tertiary-90))}:host([color=tertiary-90]){color:hsl(var(--tertiary-90))}:host([background=tertiary-100]){background-color:hsl(var(--tertiary-100))}:host([color=tertiary-100]){color:hsl(var(--tertiary-100))}:host([background=neutral-0]){background-color:hsl(var(--neutral-0))}:host([color=neutral-0]){color:hsl(var(--neutral-0))}:host([background=neutral-10]){background-color:hsl(var(--neutral-10))}:host([color=neutral-10]){color:hsl(var(--neutral-10))}:host([background=neutral-20]){background-color:hsl(var(--neutral-20))}:host([color=neutral-20]){color:hsl(var(--neutral-20))}:host([background=neutral-30]){background-color:hsl(var(--neutral-30))}:host([color=neutral-30]){color:hsl(var(--neutral-30))}:host([background=neutral-40]){background-color:hsl(var(--neutral-40))}:host([color=neutral-40]){color:hsl(var(--neutral-40))}:host([background=neutral-50]){background-color:hsl(var(--neutral-50))}:host([color=neutral-50]){color:hsl(var(--neutral-50))}:host([background=neutral-60]){background-color:hsl(var(--neutral-60))}:host([color=neutral-60]){color:hsl(var(--neutral-60))}:host([background=neutral-70]){background-color:hsl(var(--neutral-70))}:host([color=neutral-70]){color:hsl(var(--neutral-70))}:host([background=neutral-80]){background-color:hsl(var(--neutral-80))}:host([color=neutral-80]){color:hsl(var(--neutral-80))}:host([background=neutral-90]){background-color:hsl(var(--neutral-90))}:host([color=neutral-90]){color:hsl(var(--neutral-90))}:host([background=neutral-100]){background-color:hsl(var(--neutral-100))}:host([color=neutral-100]){color:hsl(var(--neutral-100))}:host([background=error-0]){background-color:hsl(var(--error-0))}:host([color=error-0]){color:hsl(var(--error-0))}:host([background=error-10]){background-color:hsl(var(--error-10))}:host([color=error-10]){color:hsl(var(--error-10))}:host([background=error-20]){background-color:hsl(var(--error-20))}:host([color=error-20]){color:hsl(var(--error-20))}:host([background=error-30]){background-color:hsl(var(--error-30))}:host([color=error-30]){color:hsl(var(--error-30))}:host([background=error-40]){background-color:hsl(var(--error-40))}:host([color=error-40]){color:hsl(var(--error-40))}:host([background=error-50]){background-color:hsl(var(--error-50))}:host([color=error-50]){color:hsl(var(--error-50))}:host([background=error-60]){background-color:hsl(var(--error-60))}:host([color=error-60]){color:hsl(var(--error-60))}:host([background=error-70]){background-color:hsl(var(--error-70))}:host([color=error-70]){color:hsl(var(--error-70))}:host([background=error-80]){background-color:hsl(var(--error-80))}:host([color=error-80]){color:hsl(var(--error-80))}:host([background=error-90]){background-color:hsl(var(--error-90))}:host([color=error-90]){color:hsl(var(--error-90))}:host([background=error-100]){background-color:hsl(var(--error-100))}:host([color=error-100]){color:hsl(var(--error-100))}:host([direction=column]){flex-direction:column}:host([direction=row-reverse]){flex-direction:row-reverse}:host([direction=column-reverse]){flex-direction:column-reverse}:host([text=center]){text-align:center}:host([text=justify]){text-align:justify}:host([text=left]){text-align:left}:host([text=right]){text-align:right}:host([weight=\"100\"]){font-weight:100}:host([weight=\"200\"]){font-weight:200}:host([weight=\"300\"]){font-weight:300}:host([weight=\"400\"]){font-weight:400}:host([weight=\"500\"]){font-weight:500}:host([weight=\"600\"]){font-weight:600}:host([weight=\"700\"]){font-weight:700}:host([weight=\"800\"]){font-weight:800}:host([weight=\"900\"]){font-weight:900}:host([weight=lighter]){font-weight:lighter}:host([weight=bold]){font-weight:700}:host([weight=bolder]){font-weight:bolder}:host([direction=row]){flex-direction:row}:host([direction=row-reverse]){flex-direction:row}:host([elevation=\"1\"]){box-shadow:var(--box-elevation,0 1px 2px 0 #0000004d,0 1px 3px 1px #00000026)}:host([elevation=\"2\"]){box-shadow:var(--box-elevation,0 1px 2px 0 #0000004d,0 2px 6px 2px #00000026)}:host([elevation=\"3\"]){box-shadow:var(--box-elevation,0 1px 3px 0 #0000004d,0 4px 8px 3px #00000026)}:host([fill=horizontal]){width:100%}:host([fill=vertical]){height:100%}:host([fill=true]){height:100%;width:100%}:host([flex=grow]){flex:1 0}:host([flex=shrink]){flex:0 1}:host([flex=true]){flex:1 1}:host([flex=false]){flex:0 0}:host([gap=xsmall]) ::slotted(*),:host([gap=xsmall][direction=column]) ::slotted(*){margin:var(--spacing-xs,.25rem) 0}:host([gap=xsmall][direction=row]) ::slotted(*){margin:0 var(--spacing-xs,.25rem)}:host([margin=xsmall]){margin:var(--box-margin,var(--spacing-xs,.25rem))}:host([vmargin=xsmall]){margin-bottom:var(--box-margin,var(--spacing-xs,.25rem));margin-top:var(--box-margin,var(--spacing-xs,.25rem))}:host([hmargin=xsmall]){margin-left:var(--box-margin,var(--spacing-xs,.25rem));margin-right:var(--box-margin,var(--spacing-xs,.25rem))}:host([margin=\"xsmall auto\"]){margin:var(--box-margin,var(--spacing-xs,.25rem)) auto}:host([margin=\"auto xsmall\"]){margin:auto var(--box-margin,var(--spacing-xs,.25rem))}:host([padding=xsmall]){padding:var(--box-padding,var(--spacing-xs,.25rem))}:host([vpadding=xsmall]){padding-bottom:var(--box-padding,var(--spacing-xs,.25rem));padding-top:var(--box-padding,var(--spacing-xs,.25rem))}:host([hpadding=xsmall]){padding-left:var(--box-padding,var(--spacing-xs,.25rem));padding-right:var(--box-padding,var(--spacing-xs,.25rem))}:host([gap=small]) ::slotted(*),:host([gap=small][direction=column]) ::slotted(*){margin:var(--spacing-s,.5rem) 0}:host([gap=small][direction=row]) ::slotted(*){margin:0 var(--spacing-s,.5rem)}:host([margin=small]){margin:var(--box-margin,var(--spacing-s,.5rem))}:host([vmargin=small]){margin-bottom:var(--box-margin,var(--spacing-s,.5rem));margin-top:var(--box-margin,var(--spacing-s,.5rem))}:host([hmargin=small]){margin-left:var(--box-margin,var(--spacing-s,.5rem));margin-right:var(--box-margin,var(--spacing-s,.5rem))}:host([margin=\"small auto\"]){margin:var(--box-margin,var(--spacing-s,.5rem)) auto}:host([margin=\"auto small\"]){margin:auto var(--box-margin,var(--spacing-s,.5rem))}:host([padding=small]){padding:var(--box-padding,var(--spacing-s,.5rem))}:host([vpadding=small]){padding-bottom:var(--box-padding,var(--spacing-s,.5rem));padding-top:var(--box-padding,var(--spacing-s,.5rem))}:host([hpadding=small]){padding-left:var(--box-padding,var(--spacing-s,.5rem));padding-right:var(--box-padding,var(--spacing-s,.5rem))}:host([gap=medium]) ::slotted(*),:host([gap=medium][direction=column]) ::slotted(*){margin:var(--spacing-m,1rem) 0}:host([gap=medium][direction=row]) ::slotted(*){margin:0 var(--spacing-m,1rem)}:host([margin=medium]){margin:var(--box-margin,var(--spacing-m,1rem))}:host([vmargin=medium]){margin-bottom:var(--box-margin,var(--spacing-m,1rem));margin-top:var(--box-margin,var(--spacing-m,1rem))}:host([hmargin=medium]){margin-left:var(--box-margin,var(--spacing-m,1rem));margin-right:var(--box-margin,var(--spacing-m,1rem))}:host([margin=\"medium auto\"]){margin:var(--box-margin,var(--spacing-m,1rem)) auto}:host([margin=\"auto medium\"]){margin:auto var(--box-margin,var(--spacing-m,1rem))}:host([padding=medium]){padding:var(--box-padding,var(--spacing-m,1rem))}:host([vpadding=medium]){padding-bottom:var(--box-padding,var(--spacing-m,1rem));padding-top:var(--box-padding,var(--spacing-m,1rem))}:host([hpadding=medium]){padding-left:var(--box-padding,var(--spacing-m,1rem));padding-right:var(--box-padding,var(--spacing-m,1rem))}:host([gap=large]) ::slotted(*),:host([gap=large][direction=column]) ::slotted(*){margin:var(--spacing-l,1.25rem) 0}:host([gap=large][direction=row]) ::slotted(*){margin:0 var(--spacing-l,1.25rem)}:host([margin=large]){margin:var(--box-margin,var(--spacing-l,1.25rem))}:host([vmargin=large]){margin-bottom:var(--box-margin,var(--spacing-l,1.25rem));margin-top:var(--box-margin,var(--spacing-l,1.25rem))}:host([hmargin=large]){margin-left:var(--box-margin,var(--spacing-l,1.25rem));margin-right:var(--box-margin,var(--spacing-l,1.25rem))}:host([margin=\"large auto\"]){margin:var(--box-margin,var(--spacing-l,1.25rem)) auto}:host([margin=\"auto large\"]){margin:auto var(--box-margin,var(--spacing-l,1.25rem))}:host([padding=large]){padding:var(--box-padding,var(--spacing-l,1.25rem))}:host([vpadding=large]){padding-bottom:var(--box-padding,var(--spacing-l,1.25rem));padding-top:var(--box-padding,var(--spacing-l,1.25rem))}:host([hpadding=large]){padding-left:var(--box-padding,var(--spacing-l,1.25rem));padding-right:var(--box-padding,var(--spacing-l,1.25rem))}:host([gap=xlarge]) ::slotted(*),:host([gap=xlarge][direction=column]) ::slotted(*){margin:var(--spacing-xl,2rem) 0}:host([gap=xlarge][direction=row]) ::slotted(*){margin:0 var(--spacing-xl,2rem)}:host([margin=xlarge]){margin:var(--box-margin,var(--spacing-xl,2rem))}:host([vmargin=xlarge]){margin-bottom:var(--box-margin,var(--spacing-xl,2rem));margin-top:var(--box-margin,var(--spacing-xl,2rem))}:host([hmargin=xlarge]){margin-left:var(--box-margin,var(--spacing-xl,2rem));margin-right:var(--box-margin,var(--spacing-xl,2rem))}:host([margin=\"xlarge auto\"]){margin:var(--box-margin,var(--spacing-xl,2rem)) auto}:host([margin=\"auto xlarge\"]){margin:auto var(--box-margin,var(--spacing-xl,2rem))}:host([padding=xlarge]){padding:var(--box-padding,var(--spacing-xl,2rem))}:host([vpadding=xlarge]){padding-bottom:var(--box-padding,var(--spacing-xl,2rem));padding-top:var(--box-padding,var(--spacing-xl,2rem))}:host([hpadding=xlarge]){padding-left:var(--box-padding,var(--spacing-xl,2rem));padding-right:var(--box-padding,var(--spacing-xl,2rem))}:host([font=xsmall]),:host([size=xsmall]){font-size:var(--box-font-size,var(--font-size-xs,.625rem))}:host([font=small]),:host([size=small]){font-size:var(--box-font-size,var(--font-size-s,.875rem))}:host([font=medium]),:host([size=medium]){font-size:var(--box-font-size,var(--font-size-m,1rem))}:host([font=large]),:host([size=large]){font-size:var(--box-font-size,var(--font-size-l,1.25rem))}:host([font=xlarge]),:host([size=xlarge]){font-size:var(--box-font-size,var(--font-size-xl,1.5rem))}:host([font=xxlarge]),:host([size=xxlarge]){font-size:var(--box-font-size,var(--font-size-xxl,2.25rem))}:host([justify=start]){justify-content:flex-start}:host([justify=end]){justify-content:flex-end}:host([justify=stretch]){justify-content:stretch}:host([justify=baseline]){justify-content:baseline}:host([justify=center]){justify-content:center}:host([justify=around]){justify-content:space-around}:host([justify=between]){justify-content:space-between}:host([justify=evenly]){justify-content:space-evenly}:host([overflow=auto]){overflow:auto}:host([overflow=hidden]){overflow:hidden}:host([overflow=scroll]){overflow:scroll}:host([overflow=visible]){overflow:visible}:host([radius=none]){border-radius:var(--box-border-radius,0)}:host([radius=small]){border-radius:var(--box-border-radius,var(--border-radius-small,.125rem))}:host([radius=medium]){border-radius:var(--box-border-radius,var(--border-radius-medium,.25rem))}:host([radius=large]){border-radius:var(--box-border-radius,var(--border-radius-large,.5rem))}:host([radius=xlarge]){border-radius:var(--box-border-radius,var(--border-radius-x-large,1rem))}:host([radius=circle]){border-radius:var(--box-border-radius,var(--border-radius-circle,50%))}:host([radius=pill]){border-radius:var(--box-border-radius,var(--border-radius-pill,9999px))}:host([max-width=xxsmall]){max-width:var(--box-max-width,var(--size-xxs,2rem))}:host([width=xxsmall]){width:var(--box-width,var(--size-xxs,2rem))}:host([max-height=xxsmall]){max-height:var(--box-max-height,var(--size-xxs,2rem))}:host([height=xxsmall]){height:var(--box-height,var(--size-xxs,2rem))}:host([max-width=xsmall]){max-width:var(--box-max-width,var(--size-xs,4rem))}:host([width=xsmall]){width:var(--box-width,var(--size-xs,4rem))}:host([max-height=xsmall]){max-height:var(--box-max-height,var(--size-xs,4rem))}:host([height=xsmall]){height:var(--box-height,var(--size-xs,4rem))}:host([max-width=small]){max-width:var(--box-max-width,var(--size-s,8rem))}:host([width=small]){width:var(--box-width,var(--size-s,8rem))}:host([max-height=small]){max-height:var(--box-max-height,var(--size-s,8rem))}:host([height=small]){height:var(--box-height,var(--size-s,8rem))}:host([max-width=medium]){max-width:var(--box-max-width,var(--size-m,16rem))}:host([width=medium]){width:var(--box-width,var(--size-m,16rem))}:host([max-height=medium]){max-height:var(--box-max-height,var(--size-m,16rem))}:host([height=medium]){height:var(--box-height,var(--size-m,16rem))}:host([max-width=large]){max-width:var(--box-max-width,var(--size-l,32rem))}:host([width=large]){width:var(--box-width,var(--size-l,32rem))}:host([max-height=large]){max-height:var(--box-max-height,var(--size-l,32rem))}:host([height=large]){height:var(--box-height,var(--size-l,32rem))}:host([max-width=xlarge]){max-width:var(--box-max-width,var(--size-xl,48rem))}:host([width=xlarge]){width:var(--box-width,var(--size-xl,48rem))}:host([max-height=xlarge]){max-height:var(--box-max-height,var(--size-xl,48rem))}:host([height=xlarge]){height:var(--box-height,var(--size-xl,48rem))}:host([max-width=xxlarge]){max-width:var(--box-max-width,var(--size-xxl,64rem))}:host([width=xxlarge]){width:var(--box-width,var(--size-xxl,64rem))}:host([max-height=xxlarge]){max-height:var(--box-max-height,var(--size-xxl,64rem))}:host([height=xxlarge]){height:var(--box-height,var(--size-xxl,64rem))}:host([wrap=true]){flex-wrap:wrap}:host([wrap=reverse]){flex-wrap:wrap-reverse}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{box-sizing:border-box;display:flex;flex-direction:column;position:relative}:host([hidden]){display:none}.ripple{bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0}.ripple span{background-color:hsla(var(--on-primary),.5);border-radius:50%;position:absolute}:host([align-content=start]){align-content:flex-start}:host([align-content=end]){align-content:flex-end}:host([align-content=stretch]){align-content:stretch}:host([align-content=center]){align-content:center}:host([align-content=around]){align-content:space-around}:host([align-content=between]){align-content:space-between}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([align-items=stretch]){align-items:stretch}:host([align-items=center]){align-items:center}:host([align-items=baseline]){align-items:baseline}:host([align-self=start]){align-self:flex-start}:host([align-self=end]){align-self:flex-end}:host([align-self=stretch]){align-self:stretch}:host([align-self=center]){align-self:center}:host([background=primary]){background-color:hsl(var(--primary))}:host([color=primary]){color:hsl(var(--primary))}:host([background=on-primary]){background-color:hsl(var(--on-primary))}:host([color=on-primary]){color:hsl(var(--on-primary))}:host([background=secondary]){background-color:hsl(var(--secondary))}:host([color=secondary]){color:hsl(var(--secondary))}:host([background=on-secondary]){background-color:hsl(var(--on-secondary))}:host([color=on-secondary]){color:hsl(var(--on-secondary))}:host([background=tertiary]){background-color:hsl(var(--tertiary))}:host([color=tertiary]){color:hsl(var(--tertiary))}:host([background=on-tertiary]){background-color:hsl(var(--on-tertiary))}:host([color=on-tertiary]){color:hsl(var(--on-tertiary))}:host([background=neutral]){background-color:hsl(var(--neutral))}:host([color=neutral]){color:hsl(var(--neutral))}:host([background=on-neutral]){background-color:hsl(var(--on-neutral))}:host([color=on-neutral]){color:hsl(var(--on-neutral))}:host([background=neutral-variant]){background-color:hsl(var(--neutral-variant))}:host([color=neutral-variant]){color:hsl(var(--neutral-variant))}:host([background=on-neutral-variant]){background-color:hsl(var(--on-neutral-variant))}:host([color=on-neutral-variant]){color:hsl(var(--on-neutral-variant))}:host([background=error]){background-color:hsl(var(--error))}:host([color=error]){color:hsl(var(--error))}:host([background=on-error]){background-color:hsl(var(--on-error))}:host([color=on-error]){color:hsl(var(--on-error))}:host([background=primary-container]){background-color:hsl(var(--primary-container))}:host([color=primary-container]){color:hsl(var(--primary-container))}:host([background=on-primary-container]){background-color:hsl(var(--on-primary-container))}:host([color=on-primary-container]){color:hsl(var(--on-primary-container))}:host([background=secondary-container]){background-color:hsl(var(--secondary-container))}:host([color=secondary-container]){color:hsl(var(--secondary-container))}:host([background=on-secondary-container]){background-color:hsl(var(--on-secondary-container))}:host([color=on-secondary-container]){color:hsl(var(--on-secondary-container))}:host([background=tertiary-container]){background-color:hsl(var(--tertiary-container))}:host([color=tertiary-container]){color:hsl(var(--tertiary-container))}:host([background=on-tertiary-container]){background-color:hsl(var(--on-tertiary-container))}:host([color=on-tertiary-container]){color:hsl(var(--on-tertiary-container))}:host([background=neutral-container]){background-color:hsl(var(--neutral-container))}:host([color=neutral-container]){color:hsl(var(--neutral-container))}:host([background=on-neutral-container]){background-color:hsl(var(--on-neutral-container))}:host([color=on-neutral-container]){color:hsl(var(--on-neutral-container))}:host([background=neutral-variant-container]){background-color:hsl(var(--neutral-variant-container))}:host([color=neutral-variant-container]){color:hsl(var(--neutral-variant-container))}:host([background=on-neutral-variant-container]){background-color:hsl(var(--on-neutral-variant-container))}:host([color=on-neutral-variant-container]){color:hsl(var(--on-neutral-variant-container))}:host([background=error-container]){background-color:hsl(var(--error-container))}:host([color=error-container]){color:hsl(var(--error-container))}:host([background=on-error-container]){background-color:hsl(var(--on-error-container))}:host([color=on-error-container]){color:hsl(var(--on-error-container))}:host([background=primary-0]){background-color:hsl(var(--primary-0))}:host([color=primary-0]){color:hsl(var(--primary-0))}:host([background=surface]){background-color:hsl(var(--surface))}:host([color=surface]){color:hsl(var(--surface))}:host([background=on-surface]){background-color:hsl(var(--on-surface))}:host([color=on-surface]){color:hsl(var(--on-surface))}:host([background=surface-dim]){background-color:hsl(var(--surface-dim))}:host([color=surface-dim]){color:hsl(var(--surface-dim))}:host([background=surface-bright]){background-color:hsl(var(--surface-bright))}:host([color=surface-bright]){color:hsl(var(--surface-bright))}:host([background=surface-container-lowest]){background-color:hsl(var(--surface-container-lowest))}:host([color=surface-container-lowest]){color:hsl(var(--surface-container-lowest))}:host([background=surface-container-low]){background-color:hsl(var(--surface-container-low))}:host([color=surface-container-low]){color:hsl(var(--surface-container-low))}:host([background=surface-container]){background-color:hsl(var(--surface-container))}:host([color=surface-container]){color:hsl(var(--surface-container))}:host([background=surface-container-high]){background-color:hsl(var(--surface-container-high))}:host([color=surface-container-high]){color:hsl(var(--surface-container-high))}:host([background=surface-container-highest]){background-color:hsl(var(--surface-container-highest))}:host([color=surface-container-highest]){color:hsl(var(--surface-container-highest))}:host([background=surface-variant]){background-color:hsl(var(--surface-variant))}:host([color=surface-variant]){color:hsl(var(--surface-variant))}:host([background=on-surface-variant]){background-color:hsl(var(--on-surface-variant))}:host([color=on-surface-variant]){color:hsl(var(--on-surface-variant))}:host([background=outline]){background-color:hsl(var(--outline))}:host([color=outline]){color:hsl(var(--outline))}:host([background=outline-variant]){background-color:hsl(var(--outline-variant))}:host([color=outline-variant]){color:hsl(var(--outline-variant))}:host([background=inverse-surface]){background-color:hsl(var(--inverse-surface))}:host([color=inverse-surface]){color:hsl(var(--inverse-surface))}:host([background=inverse-on-surface]){background-color:hsl(var(--inverse-on-surface))}:host([color=inverse-on-surface]){color:hsl(var(--inverse-on-surface))}:host([background=background]){background-color:hsl(var(--background))}:host([color=background]){color:hsl(var(--background))}:host([background=on-background]){background-color:hsl(var(--on-background))}:host([color=on-background]){color:hsl(var(--on-background))}:host([background=shadow]){background-color:hsl(var(--shadow))}:host([color=shadow]){color:hsl(var(--shadow))}:host([background=primary-10]){background-color:hsl(var(--primary-10))}:host([color=primary-10]){color:hsl(var(--primary-10))}:host([background=primary-20]){background-color:hsl(var(--primary-20))}:host([color=primary-20]){color:hsl(var(--primary-20))}:host([background=primary-30]){background-color:hsl(var(--primary-30))}:host([color=primary-30]){color:hsl(var(--primary-30))}:host([background=primary-40]){background-color:hsl(var(--primary-40))}:host([color=primary-40]){color:hsl(var(--primary-40))}:host([background=primary-50]){background-color:hsl(var(--primary-50))}:host([color=primary-50]){color:hsl(var(--primary-50))}:host([background=primary-60]){background-color:hsl(var(--primary-60))}:host([color=primary-60]){color:hsl(var(--primary-60))}:host([background=primary-70]){background-color:hsl(var(--primary-70))}:host([color=primary-70]){color:hsl(var(--primary-70))}:host([background=primary-80]){background-color:hsl(var(--primary-80))}:host([color=primary-80]){color:hsl(var(--primary-80))}:host([background=primary-90]){background-color:hsl(var(--primary-90))}:host([color=primary-90]){color:hsl(var(--primary-90))}:host([background=primary-95]){background-color:hsl(var(--primary-95))}:host([color=primary-95]){color:hsl(var(--primary-95))}:host([background=primary-99]){background-color:hsl(var(--primary-99))}:host([color=primary-99]){color:hsl(var(--primary-99))}:host([background=primary-100]){background-color:hsl(var(--primary-100))}:host([color=primary-100]){color:hsl(var(--primary-100))}:host([background=secondary-0]){background-color:hsl(var(--secondary-0))}:host([color=secondary-0]){color:hsl(var(--secondary-0))}:host([background=secondary-10]){background-color:hsl(var(--secondary-10))}:host([color=secondary-10]){color:hsl(var(--secondary-10))}:host([background=secondary-20]){background-color:hsl(var(--secondary-20))}:host([color=secondary-20]){color:hsl(var(--secondary-20))}:host([background=secondary-30]){background-color:hsl(var(--secondary-30))}:host([color=secondary-30]){color:hsl(var(--secondary-30))}:host([background=secondary-40]){background-color:hsl(var(--secondary-40))}:host([color=secondary-40]){color:hsl(var(--secondary-40))}:host([background=secondary-50]){background-color:hsl(var(--secondary-50))}:host([color=secondary-50]){color:hsl(var(--secondary-50))}:host([background=secondary-60]){background-color:hsl(var(--secondary-60))}:host([color=secondary-60]){color:hsl(var(--secondary-60))}:host([background=secondary-70]){background-color:hsl(var(--secondary-70))}:host([color=secondary-70]){color:hsl(var(--secondary-70))}:host([background=secondary-80]){background-color:hsl(var(--secondary-80))}:host([color=secondary-80]){color:hsl(var(--secondary-80))}:host([background=secondary-90]){background-color:hsl(var(--secondary-90))}:host([color=secondary-90]){color:hsl(var(--secondary-90))}:host([background=secondary-100]){background-color:hsl(var(--secondary-100))}:host([color=secondary-100]){color:hsl(var(--secondary-100))}:host([background=tertiary-0]){background-color:hsl(var(--tertiary-0))}:host([color=tertiary-0]){color:hsl(var(--tertiary-0))}:host([background=tertiary-10]){background-color:hsl(var(--tertiary-10))}:host([color=tertiary-10]){color:hsl(var(--tertiary-10))}:host([background=tertiary-20]){background-color:hsl(var(--tertiary-20))}:host([color=tertiary-20]){color:hsl(var(--tertiary-20))}:host([background=tertiary-30]){background-color:hsl(var(--tertiary-30))}:host([color=tertiary-30]){color:hsl(var(--tertiary-30))}:host([background=tertiary-40]){background-color:hsl(var(--tertiary-40))}:host([color=tertiary-40]){color:hsl(var(--tertiary-40))}:host([background=tertiary-50]){background-color:hsl(var(--tertiary-50))}:host([color=tertiary-50]){color:hsl(var(--tertiary-50))}:host([background=tertiary-60]){background-color:hsl(var(--tertiary-60))}:host([color=tertiary-60]){color:hsl(var(--tertiary-60))}:host([background=tertiary-70]){background-color:hsl(var(--tertiary-70))}:host([color=tertiary-70]){color:hsl(var(--tertiary-70))}:host([background=tertiary-80]){background-color:hsl(var(--tertiary-80))}:host([color=tertiary-80]){color:hsl(var(--tertiary-80))}:host([background=tertiary-90]){background-color:hsl(var(--tertiary-90))}:host([color=tertiary-90]){color:hsl(var(--tertiary-90))}:host([background=tertiary-100]){background-color:hsl(var(--tertiary-100))}:host([color=tertiary-100]){color:hsl(var(--tertiary-100))}:host([background=neutral-0]){background-color:hsl(var(--neutral-0))}:host([color=neutral-0]){color:hsl(var(--neutral-0))}:host([background=neutral-10]){background-color:hsl(var(--neutral-10))}:host([color=neutral-10]){color:hsl(var(--neutral-10))}:host([background=neutral-20]){background-color:hsl(var(--neutral-20))}:host([color=neutral-20]){color:hsl(var(--neutral-20))}:host([background=neutral-30]){background-color:hsl(var(--neutral-30))}:host([color=neutral-30]){color:hsl(var(--neutral-30))}:host([background=neutral-40]){background-color:hsl(var(--neutral-40))}:host([color=neutral-40]){color:hsl(var(--neutral-40))}:host([background=neutral-50]){background-color:hsl(var(--neutral-50))}:host([color=neutral-50]){color:hsl(var(--neutral-50))}:host([background=neutral-60]){background-color:hsl(var(--neutral-60))}:host([color=neutral-60]){color:hsl(var(--neutral-60))}:host([background=neutral-70]){background-color:hsl(var(--neutral-70))}:host([color=neutral-70]){color:hsl(var(--neutral-70))}:host([background=neutral-80]){background-color:hsl(var(--neutral-80))}:host([color=neutral-80]){color:hsl(var(--neutral-80))}:host([background=neutral-90]){background-color:hsl(var(--neutral-90))}:host([color=neutral-90]){color:hsl(var(--neutral-90))}:host([background=neutral-100]){background-color:hsl(var(--neutral-100))}:host([color=neutral-100]){color:hsl(var(--neutral-100))}:host([background=error-0]){background-color:hsl(var(--error-0))}:host([color=error-0]){color:hsl(var(--error-0))}:host([background=error-10]){background-color:hsl(var(--error-10))}:host([color=error-10]){color:hsl(var(--error-10))}:host([background=error-20]){background-color:hsl(var(--error-20))}:host([color=error-20]){color:hsl(var(--error-20))}:host([background=error-30]){background-color:hsl(var(--error-30))}:host([color=error-30]){color:hsl(var(--error-30))}:host([background=error-40]){background-color:hsl(var(--error-40))}:host([color=error-40]){color:hsl(var(--error-40))}:host([background=error-50]){background-color:hsl(var(--error-50))}:host([color=error-50]){color:hsl(var(--error-50))}:host([background=error-60]){background-color:hsl(var(--error-60))}:host([color=error-60]){color:hsl(var(--error-60))}:host([background=error-70]){background-color:hsl(var(--error-70))}:host([color=error-70]){color:hsl(var(--error-70))}:host([background=error-80]){background-color:hsl(var(--error-80))}:host([color=error-80]){color:hsl(var(--error-80))}:host([background=error-90]){background-color:hsl(var(--error-90))}:host([color=error-90]){color:hsl(var(--error-90))}:host([background=error-100]){background-color:hsl(var(--error-100))}:host([color=error-100]){color:hsl(var(--error-100))}:host([direction=column]){flex-direction:column}:host([direction=row-reverse]){flex-direction:row-reverse}:host([direction=column-reverse]){flex-direction:column-reverse}:host([text=center]){text-align:center}:host([text=justify]){text-align:justify}:host([text=left]){text-align:left}:host([text=right]){text-align:right}:host([weight=\"100\"]){font-weight:100}:host([weight=\"200\"]){font-weight:200}:host([weight=\"300\"]){font-weight:300}:host([weight=\"400\"]){font-weight:400}:host([weight=\"500\"]){font-weight:500}:host([weight=\"600\"]){font-weight:600}:host([weight=\"700\"]){font-weight:700}:host([weight=\"800\"]){font-weight:800}:host([weight=\"900\"]){font-weight:900}:host([weight=lighter]){font-weight:lighter}:host([weight=bold]){font-weight:700}:host([weight=bolder]){font-weight:bolder}:host([direction=row]){flex-direction:row}:host([direction=row-reverse]){flex-direction:row}:host([elevation=\"1\"]){box-shadow:var(--box-elevation,0 1px 2px 0 #0000004d,0 1px 3px 1px #00000026)}:host([elevation=\"2\"]){box-shadow:var(--box-elevation,0 1px 2px 0 #0000004d,0 2px 6px 2px #00000026)}:host([elevation=\"3\"]){box-shadow:var(--box-elevation,0 1px 3px 0 #0000004d,0 4px 8px 3px #00000026)}:host([fill=horizontal]){width:100%}:host([fill=vertical]){height:100%}:host([fill=true]){height:100%;width:100%}:host([flex=grow]){flex:1 0}:host([flex=shrink]){flex:0 1}:host([flex=true]){flex:1 1}:host([flex=false]){flex:0 0}:host([gap=xsmall]) ::slotted(*),:host([gap=xsmall][direction=column]) ::slotted(*){margin:var(--spacing-xs,.25rem) 0}:host([gap=xsmall][direction=row]) ::slotted(*){margin:0 var(--spacing-xs,.25rem)}:host([margin=xsmall]){margin:var(--box-margin,var(--spacing-xs,.25rem))}:host([vmargin=xsmall]){margin-bottom:var(--box-margin,var(--spacing-xs,.25rem));margin-top:var(--box-margin,var(--spacing-xs,.25rem))}:host([hmargin=xsmall]){margin-left:var(--box-margin,var(--spacing-xs,.25rem));margin-right:var(--box-margin,var(--spacing-xs,.25rem))}:host([margin=\"xsmall auto\"]){margin:var(--box-margin,var(--spacing-xs,.25rem)) auto}:host([margin=\"auto xsmall\"]){margin:auto var(--box-margin,var(--spacing-xs,.25rem))}:host([padding=xsmall]){padding:var(--box-padding,var(--spacing-xs,.25rem))}:host([vpadding=xsmall]){padding-bottom:var(--box-padding,var(--spacing-xs,.25rem));padding-top:var(--box-padding,var(--spacing-xs,.25rem))}:host([hpadding=xsmall]){padding-left:var(--box-padding,var(--spacing-xs,.25rem));padding-right:var(--box-padding,var(--spacing-xs,.25rem))}:host([gap=small]) ::slotted(*),:host([gap=small][direction=column]) ::slotted(*){margin:var(--spacing-s,.5rem) 0}:host([gap=small][direction=row]) ::slotted(*){margin:0 var(--spacing-s,.5rem)}:host([margin=small]){margin:var(--box-margin,var(--spacing-s,.5rem))}:host([vmargin=small]){margin-bottom:var(--box-margin,var(--spacing-s,.5rem));margin-top:var(--box-margin,var(--spacing-s,.5rem))}:host([hmargin=small]){margin-left:var(--box-margin,var(--spacing-s,.5rem));margin-right:var(--box-margin,var(--spacing-s,.5rem))}:host([margin=\"small auto\"]){margin:var(--box-margin,var(--spacing-s,.5rem)) auto}:host([margin=\"auto small\"]){margin:auto var(--box-margin,var(--spacing-s,.5rem))}:host([padding=small]){padding:var(--box-padding,var(--spacing-s,.5rem))}:host([vpadding=small]){padding-bottom:var(--box-padding,var(--spacing-s,.5rem));padding-top:var(--box-padding,var(--spacing-s,.5rem))}:host([hpadding=small]){padding-left:var(--box-padding,var(--spacing-s,.5rem));padding-right:var(--box-padding,var(--spacing-s,.5rem))}:host([gap=medium]) ::slotted(*),:host([gap=medium][direction=column]) ::slotted(*){margin:var(--spacing-m,1rem) 0}:host([gap=medium][direction=row]) ::slotted(*){margin:0 var(--spacing-m,1rem)}:host([margin=medium]){margin:var(--box-margin,var(--spacing-m,1rem))}:host([vmargin=medium]){margin-bottom:var(--box-margin,var(--spacing-m,1rem));margin-top:var(--box-margin,var(--spacing-m,1rem))}:host([hmargin=medium]){margin-left:var(--box-margin,var(--spacing-m,1rem));margin-right:var(--box-margin,var(--spacing-m,1rem))}:host([margin=\"medium auto\"]){margin:var(--box-margin,var(--spacing-m,1rem)) auto}:host([margin=\"auto medium\"]){margin:auto var(--box-margin,var(--spacing-m,1rem))}:host([padding=medium]){padding:var(--box-padding,var(--spacing-m,1rem))}:host([vpadding=medium]){padding-bottom:var(--box-padding,var(--spacing-m,1rem));padding-top:var(--box-padding,var(--spacing-m,1rem))}:host([hpadding=medium]){padding-left:var(--box-padding,var(--spacing-m,1rem));padding-right:var(--box-padding,var(--spacing-m,1rem))}:host([gap=large]) ::slotted(*),:host([gap=large][direction=column]) ::slotted(*){margin:var(--spacing-l,1.25rem) 0}:host([gap=large][direction=row]) ::slotted(*){margin:0 var(--spacing-l,1.25rem)}:host([margin=large]){margin:var(--box-margin,var(--spacing-l,1.25rem))}:host([vmargin=large]){margin-bottom:var(--box-margin,var(--spacing-l,1.25rem));margin-top:var(--box-margin,var(--spacing-l,1.25rem))}:host([hmargin=large]){margin-left:var(--box-margin,var(--spacing-l,1.25rem));margin-right:var(--box-margin,var(--spacing-l,1.25rem))}:host([margin=\"large auto\"]){margin:var(--box-margin,var(--spacing-l,1.25rem)) auto}:host([margin=\"auto large\"]){margin:auto var(--box-margin,var(--spacing-l,1.25rem))}:host([padding=large]){padding:var(--box-padding,var(--spacing-l,1.25rem))}:host([vpadding=large]){padding-bottom:var(--box-padding,var(--spacing-l,1.25rem));padding-top:var(--box-padding,var(--spacing-l,1.25rem))}:host([hpadding=large]){padding-left:var(--box-padding,var(--spacing-l,1.25rem));padding-right:var(--box-padding,var(--spacing-l,1.25rem))}:host([gap=xlarge]) ::slotted(*),:host([gap=xlarge][direction=column]) ::slotted(*){margin:var(--spacing-xl,2rem) 0}:host([gap=xlarge][direction=row]) ::slotted(*){margin:0 var(--spacing-xl,2rem)}:host([margin=xlarge]){margin:var(--box-margin,var(--spacing-xl,2rem))}:host([vmargin=xlarge]){margin-bottom:var(--box-margin,var(--spacing-xl,2rem));margin-top:var(--box-margin,var(--spacing-xl,2rem))}:host([hmargin=xlarge]){margin-left:var(--box-margin,var(--spacing-xl,2rem));margin-right:var(--box-margin,var(--spacing-xl,2rem))}:host([margin=\"xlarge auto\"]){margin:var(--box-margin,var(--spacing-xl,2rem)) auto}:host([margin=\"auto xlarge\"]){margin:auto var(--box-margin,var(--spacing-xl,2rem))}:host([padding=xlarge]){padding:var(--box-padding,var(--spacing-xl,2rem))}:host([vpadding=xlarge]){padding-bottom:var(--box-padding,var(--spacing-xl,2rem));padding-top:var(--box-padding,var(--spacing-xl,2rem))}:host([hpadding=xlarge]){padding-left:var(--box-padding,var(--spacing-xl,2rem));padding-right:var(--box-padding,var(--spacing-xl,2rem))}:host([font=xsmall]),:host([size=xsmall]){font-size:var(--box-font-size,var(--font-size-xs,.625rem))}:host([font=small]),:host([size=small]){font-size:var(--box-font-size,var(--font-size-s,.875rem))}:host([font=medium]),:host([size=medium]){font-size:var(--box-font-size,var(--font-size-m,1rem))}:host([font=large]),:host([size=large]){font-size:var(--box-font-size,var(--font-size-l,1.25rem))}:host([font=xlarge]),:host([size=xlarge]){font-size:var(--box-font-size,var(--font-size-xl,1.5rem))}:host([font=xxlarge]),:host([size=xxlarge]){font-size:var(--box-font-size,var(--font-size-xxl,2.25rem))}:host([justify=start]){justify-content:flex-start}:host([justify=end]){justify-content:flex-end}:host([justify=stretch]){justify-content:stretch}:host([justify=baseline]){justify-content:baseline}:host([justify=center]){justify-content:center}:host([justify=around]){justify-content:space-around}:host([justify=between]){justify-content:space-between}:host([justify=evenly]){justify-content:space-evenly}:host([overflow=auto]){overflow:auto}:host([overflow=hidden]){overflow:hidden}:host([overflow=scroll]){overflow:scroll}:host([overflow=visible]){overflow:visible}:host([radius=none]){border-radius:var(--box-border-radius,0)}:host([radius=small]){border-radius:var(--box-border-radius,var(--border-radius-small,.125rem))}:host([radius=medium]){border-radius:var(--box-border-radius,var(--border-radius-medium,.25rem))}:host([radius=large]){border-radius:var(--box-border-radius,var(--border-radius-large,.5rem))}:host([radius=xlarge]){border-radius:var(--box-border-radius,var(--border-radius-x-large,1rem))}:host([radius=circle]){border-radius:var(--box-border-radius,var(--border-radius-circle,50%))}:host([radius=pill]){border-radius:var(--box-border-radius,var(--border-radius-pill,9999px))}:host([max-width=xxsmall]){max-width:var(--box-max-width,var(--size-xxs,2rem))}:host([width=xxsmall]){width:var(--box-width,var(--size-xxs,2rem))}:host([max-height=xxsmall]){max-height:var(--box-max-height,var(--size-xxs,2rem))}:host([height=xxsmall]){height:var(--box-height,var(--size-xxs,2rem))}:host([max-width=xsmall]){max-width:var(--box-max-width,var(--size-xs,4rem))}:host([width=xsmall]){width:var(--box-width,var(--size-xs,4rem))}:host([max-height=xsmall]){max-height:var(--box-max-height,var(--size-xs,4rem))}:host([height=xsmall]){height:var(--box-height,var(--size-xs,4rem))}:host([max-width=small]){max-width:var(--box-max-width,var(--size-s,8rem))}:host([width=small]){width:var(--box-width,var(--size-s,8rem))}:host([max-height=small]){max-height:var(--box-max-height,var(--size-s,8rem))}:host([height=small]){height:var(--box-height,var(--size-s,8rem))}:host([max-width=medium]){max-width:var(--box-max-width,var(--size-m,16rem))}:host([width=medium]){width:var(--box-width,var(--size-m,16rem))}:host([max-height=medium]){max-height:var(--box-max-height,var(--size-m,16rem))}:host([height=medium]){height:var(--box-height,var(--size-m,16rem))}:host([max-width=large]){max-width:var(--box-max-width,var(--size-l,32rem))}:host([width=large]){width:var(--box-width,var(--size-l,32rem))}:host([max-height=large]){max-height:var(--box-max-height,var(--size-l,32rem))}:host([height=large]){height:var(--box-height,var(--size-l,32rem))}:host([max-width=xlarge]){max-width:var(--box-max-width,var(--size-xl,48rem))}:host([width=xlarge]){width:var(--box-width,var(--size-xl,48rem))}:host([max-height=xlarge]){max-height:var(--box-max-height,var(--size-xl,48rem))}:host([height=xlarge]){height:var(--box-height,var(--size-xl,48rem))}:host([max-width=xxlarge]){max-width:var(--box-max-width,var(--size-xxl,64rem))}:host([width=xxlarge]){width:var(--box-width,var(--size-xxl,64rem))}:host([max-height=xxlarge]){max-height:var(--box-max-height,var(--size-xxl,64rem))}:host([height=xxlarge]){height:var(--box-height,var(--size-xxl,64rem))}:host([wrap=true]){flex-wrap:wrap}:host([wrap=reverse]){flex-wrap:wrap-reverse}";
 
 export { css_248z as default, stylesheet };

package/button/button.d.ts

@@ -21,6 +21,9 @@ declare class TkButton extends TkBox {
     target: "_blank" | "_parent" | "_self" | "_top";
     type: "submit" | "reset" | "button";
     disabled: boolean;
+    fab: boolean;
+    iconPath: string;
+    ripple: boolean;
     protected $ahref: HTMLAnchorElement;
     protected $button: HTMLButtonElement;
     render(): import("lit-html").TemplateResult<1>;
@@ -30,6 +33,7 @@ declare class TkButton extends TkBox {
     protected onKeyDown(e: KeyboardEvent): void;
     firstUpdated(): void;
     protected handleClick(e: Event): void;
+    slotChanged(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/button/button.js

@@ -29,6 +29,8 @@ let TkButton = class TkButton extends TkBox {
         this.href = null;
         this.type = "button";
         this.disabled = false;
+        this.fab = false;
+        this.ripple = true;
     }
     static get styles() {
         return [
@@ -40,21 +42,16 @@ let TkButton = class TkButton extends TkBox {
     }
     render() {
         return html `
-			<div class="before">
-				<slot name="before"></slot>
-			</div>
-			<div class="content">
+			${this.iconPath
+            ? html `
+						<tk-icon path="${this.iconPath}"></tk-icon>
+				  `
+            : ""}
+
+			<div class="content ${this.iconPath ? "has-icon" : ""}" @slotchange=${this.slotChanged}>
 				<slot></slot>
 			</div>
-			<div class="after">
-				<slot name="after"></slot>
-			</div>
-			<div class="badge-in">
-				<slot name="badge-in"></slot>
-			</div>
-			<div class="badge-out">
-				<slot name="badge-out"></slot>
-			</div>
+
 			${this.href
             ? html `
 						<a tabindex="-1" hidden id="ahref" href="${this.href}" target="${ifDefined(this.target)}" rel="noreferrer"></a>
@@ -66,7 +63,6 @@ let TkButton = class TkButton extends TkBox {
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener("click", this.handleClick.bind(this));
-        this.addEventListener("keydown", this.onKeyDown.bind(this));
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -95,10 +91,21 @@ let TkButton = class TkButton extends TkBox {
             e.preventDefault();
             this.$ahref.click();
         }
-        else if (e.isTrusted && this.type == "submit" || this.type == "reset") {
+        else if ((e.isTrusted && this.type == "submit") || this.type == "reset") {
             (_a = this.querySelector("button")) === null || _a === void 0 ? void 0 : _a.click();
         }
     }
+    slotChanged() {
+        var _a;
+        const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const elements = slot === null || slot === void 0 ? void 0 : slot.assignedNodes({ flatten: true });
+        if (elements && elements.length > 0) {
+            this.setAttribute('extended', '');
+        }
+        else {
+            this.removeAttribute('extended');
+        }
+    }
 };
 __decorate([
     property()
@@ -112,6 +119,15 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], TkButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkButton.prototype, "fab", void 0);
+__decorate([
+    property({ type: String })
+], TkButton.prototype, "iconPath", void 0);
+__decorate([
+    property()
+], TkButton.prototype, "ripple", void 0);
 __decorate([
     query("#ahref")
 ], TkButton.prototype, "$ahref", void 0);

package/button/button.scss.js

@@ -1,4 +1,4 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));--color-darker:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--text:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));align-items:center;background-color:var(--color);border:1px solid var(--color);border-radius:var(--border-radius-medium,.25rem);box-sizing:border-box;color:var(--text);cursor:pointer;display:inline-flex;flex-direction:row;font-family:Roboto,sans-serif;justify-content:center;letter-spacing:.8px;padding:var(--spacing-s,.5rem) var(--spacing-m,1rem);position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis;user-select:none;vertical-align:middle}:host .content{align-items:center;display:flex;pointer-events:none}:host .before{align-items:center;display:flex}:host .before ::slotted(*){margin-right:var(--spacing-s,.5rem)}:host .after{align-items:center;display:flex}:host .after ::slotted(*){margin-left:var(--spacing-s,.5rem)}:host .badge-out{display:flex;pointer-events:none;position:absolute;right:-.8em;top:-.7em}:host .badge-in{display:flex;pointer-events:none;position:absolute;right:2px;top:2px}:host(:focus){outline:none}:host(:focus),:host(:hover){--color:var(--primary-light,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*1.15)))}:host(:active){--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)))}:host([inverted]){--color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));--text:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)))}:host([inverted]:focus),:host([inverted]:hover){--color:#0000001a}:host([inverted]:active){--color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)))}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)));--color-darker:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent]:focus),:host([accent]:hover){--color:var(--accent-light,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),calc(var(--accent-l, 72.7451%)*1.15)))}:host([accent]:active){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent][inverted]){--color:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)));--text:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent][inverted]:focus),:host([accent][inverted]:hover){--color:#0000001a}:host([accent][inverted]:active){--color:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)))}:host([outlined]){background:var(--background,#f7f7f7) radial-gradient(circle,#0000 1%,var(--background,#f7f7f7) 1%) center/15000%;color:var(--color)}:host([pill]){border-radius:var(--border-radius-pill,9999px)}:host([small]){font-size:.8em;height:28px;line-height:.9em;padding:0 var(--spacing-s,.5rem)}:host([small]) .before ::slotted(*){margin-right:var(--spacing-xs,.25rem)}:host([small]) .after ::slotted(*){margin-left:var(--spacing-xs,.25rem)}:host([fab]){align-items:center;border-radius:50%;box-shadow:var(--elevation-1,0 1px 2px var(--shadow));height:40px;justify-content:center;line-height:normal;overflow:hidden;padding:0;width:40px}:host([fab]):hover{box-shadow:var(--elevation-3,0 4px 8px var(--shadow))}:host([fab][small]){font-size:.75em;height:30px;width:30px}:host([flat]){box-shadow:none}:host([flat]):hover{box-shadow:none}:host([disabled]),:host([disabled][accent]){--text:var(--button-color-disabled,var(--shade-lighter));--color:var(--button-bg-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));box-shadow:none;cursor:default;pointer-events:none}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));--color-darker:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--text:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));align-items:center;background-color:var(--color);border:1px solid var(--color);border-radius:var(--border-radius-medium,.25rem);box-sizing:border-box;color:var(--text);cursor:pointer;display:inline-flex;flex-direction:row;font-family:Roboto,sans-serif;justify-content:center;letter-spacing:.8px;padding:var(--spacing-s,.5rem) var(--spacing-m,1rem);position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis;user-select:none;vertical-align:middle}:host .content{align-items:center;display:flex;pointer-events:none}:host .before{align-items:center;display:flex}:host .before ::slotted(*){margin-right:var(--spacing-s,.5rem)}:host .after{align-items:center;display:flex}:host .after ::slotted(*){margin-left:var(--spacing-s,.5rem)}:host .badge-out{display:flex;pointer-events:none;position:absolute;right:-.8em;top:-.7em}:host .badge-in{display:flex;pointer-events:none;position:absolute;right:2px;top:2px}:host(:focus){outline:none}:host(:focus),:host(:hover){--color:var(--primary-light,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*1.15)))}:host(:active){--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)))}:host([inverted]){--color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));--text:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)))}:host([inverted]:focus),:host([inverted]:hover){--color:#0000001a}:host([inverted]:active){--color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)))}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)));--color-darker:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent]:focus),:host([accent]:hover){--color:var(--accent-light,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),calc(var(--accent-l, 72.7451%)*1.15)))}:host([accent]:active){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent][inverted]){--color:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)));--text:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent][inverted]:focus),:host([accent][inverted]:hover){--color:#0000001a}:host([accent][inverted]:active){--color:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)))}:host([outlined]){background:var(--background,#f7f7f7) radial-gradient(circle,#0000 1%,var(--background,#f7f7f7) 1%) center/15000%;color:var(--color)}:host([pill]){border-radius:var(--border-radius-pill,9999px)}:host([small]){font-size:.8em;height:28px;line-height:.9em;padding:0 var(--spacing-s,.5rem)}:host([small]) .before ::slotted(*){margin-right:var(--spacing-xs,.25rem)}:host([small]) .after ::slotted(*){margin-left:var(--spacing-xs,.25rem)}:host([fab]){align-items:center;border-radius:50%;box-shadow:var(--elevation-1,0 1px 2px var(--shadow));height:40px;justify-content:center;line-height:normal;overflow:hidden;padding:0;width:40px}:host([fab]):hover{box-shadow:var(--elevation-3,0 4px 8px var(--shadow))}:host([fab][small]){font-size:.75em;height:30px;width:30px}:host([flat]){box-shadow:none}:host([flat]):hover{box-shadow:none}:host([disabled]),:host([disabled][accent]){--text:var(--button-color-disabled,var(--shade-lighter));--color:var(--button-bg-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));box-shadow:none;cursor:default;pointer-events:none}";
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{align-items:center;border-radius:20px;color:hsl(var(--primary));cursor:pointer;display:inline-flex;flex-direction:row;height:40px;justify-content:center;overflow:hidden;position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis;user-select:none;vertical-align:middle;width:40px}:host tk-icon{height:24px;width:24px}:host([extended]){width:auto}:host([extended]) .content{align-items:center;display:flex;font-family:Roboto,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0 24px;pointer-events:none}:host([extended]) .content.has-icon{margin:0 24px 0 8px}:host([extended]) tk-icon{height:18px;margin-left:16px;width:18px}:host(:focus),:host(:hover){background-color:hsla(var(--primary),.3);outline:none}:host([elevated]){background-color:hsl(var(--surface-container-low));box-shadow:0 1px 2px 0 #0000004d,0 1px 3px 1px #00000026;color:hsl(var(--primary))}:host([elevated]:focus),:host([elevated]:hover){background-color:hsl(var(--surface-container-high));box-shadow:0 1px 2px 0 #0000004d,0 2px 6px 2px #00000026;outline:none}:host([filled]){background-color:hsl(var(--primary));color:hsl(var(--on-primary))}:host([filled]:hover){background-color:hsla(var(--primary),.6);box-shadow:0 1px 2px 0 #0000004d,0 1px 3px 1px #00000026}:host([filled]:focus){background-color:hsla(var(--primary),.6);outline:none}:host([tonal]){background-color:hsl(var(--secondary-container));color:hsl(var(--on-secondary-container))}:host([tonal]:hover){background-color:hsla(var(--on-secondary-container),.3);box-shadow:0 1px 2px 0 #0000004d,0 1px 3px 1px #00000026}:host([tonal]:focus){background-color:hsla(var(--on-secondary-container),.3);outline:none}:host([outlined]){background-color:initial;border:1px solid hsl(var(--outline));color:hsl(var(--primary))}:host([outlined]:hover){background-color:hsla(var(--primary),.08);color:hsl(var(--primary))}:host([outlined]:focus){background-color:hsla(var(--primary),.12);border-color:hsl(var(--primary));outline:none}:host([fab]){align-items:center;background-color:hsl(var(--primary));border-radius:16px;box-shadow:0 1px 3px 0 #0000004d,0 4px 8px 3px #00000026;color:hsl(var(--on-primary));display:inline-flex;height:56px;justify-content:center;padding:12px;width:56px}:host([fab]) tk-icon{height:24px;margin-left:0;width:24px}:host([fab]) .content{margin:0}:host([fab][extended]){min-width:80px;width:auto}:host([fab][extended]) .content{margin:0 24px}:host([fab][extended]) .content.has-icon{margin:0 24px 0 8px}:host([fab][extended]) tk-icon{margin-left:16px}:host([fab]:hover){background-color:hsla(var(--on-primary-container),.3)}:host([fab]:focus){background-color:hsla(var(--on-primary-container),.3);box-shadow:0 1px 3px 0 #0000004d,0 4px 8px 3px #00000026;outline:none}:host([fab][small]){border-radius:12px;height:40px;width:40px}:host([fab][small]) tk-icon{height:24px;width:24px}:host([fab][large]){border-radius:28px;height:96px;width:96px}:host([fab][large]) tk-icon{height:36px;width:36px}:host([disabled]){background-color:hsla(var(--on-surface),.12);box-shadow:none;cursor:not-allowed;pointer-events:none}:host([disabled]) .content{color:hsl(var(--on-surface));opacity:.38}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{align-items:center;border-radius:20px;color:hsl(var(--primary));cursor:pointer;display:inline-flex;flex-direction:row;height:40px;justify-content:center;overflow:hidden;position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis;user-select:none;vertical-align:middle;width:40px}:host tk-icon{height:24px;width:24px}:host([extended]){width:auto}:host([extended]) .content{align-items:center;display:flex;font-family:Roboto,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0 24px;pointer-events:none}:host([extended]) .content.has-icon{margin:0 24px 0 8px}:host([extended]) tk-icon{height:18px;margin-left:16px;width:18px}:host(:focus),:host(:hover){background-color:hsla(var(--primary),.3);outline:none}:host([elevated]){background-color:hsl(var(--surface-container-low));box-shadow:0 1px 2px 0 #0000004d,0 1px 3px 1px #00000026;color:hsl(var(--primary))}:host([elevated]:focus),:host([elevated]:hover){background-color:hsl(var(--surface-container-high));box-shadow:0 1px 2px 0 #0000004d,0 2px 6px 2px #00000026;outline:none}:host([filled]){background-color:hsl(var(--primary));color:hsl(var(--on-primary))}:host([filled]:hover){background-color:hsla(var(--primary),.6);box-shadow:0 1px 2px 0 #0000004d,0 1px 3px 1px #00000026}:host([filled]:focus){background-color:hsla(var(--primary),.6);outline:none}:host([tonal]){background-color:hsl(var(--secondary-container));color:hsl(var(--on-secondary-container))}:host([tonal]:hover){background-color:hsla(var(--on-secondary-container),.3);box-shadow:0 1px 2px 0 #0000004d,0 1px 3px 1px #00000026}:host([tonal]:focus){background-color:hsla(var(--on-secondary-container),.3);outline:none}:host([outlined]){background-color:initial;border:1px solid hsl(var(--outline));color:hsl(var(--primary))}:host([outlined]:hover){background-color:hsla(var(--primary),.08);color:hsl(var(--primary))}:host([outlined]:focus){background-color:hsla(var(--primary),.12);border-color:hsl(var(--primary));outline:none}:host([fab]){align-items:center;background-color:hsl(var(--primary));border-radius:16px;box-shadow:0 1px 3px 0 #0000004d,0 4px 8px 3px #00000026;color:hsl(var(--on-primary));display:inline-flex;height:56px;justify-content:center;padding:12px;width:56px}:host([fab]) tk-icon{height:24px;margin-left:0;width:24px}:host([fab]) .content{margin:0}:host([fab][extended]){min-width:80px;width:auto}:host([fab][extended]) .content{margin:0 24px}:host([fab][extended]) .content.has-icon{margin:0 24px 0 8px}:host([fab][extended]) tk-icon{margin-left:16px}:host([fab]:hover){background-color:hsla(var(--on-primary-container),.3)}:host([fab]:focus){background-color:hsla(var(--on-primary-container),.3);box-shadow:0 1px 3px 0 #0000004d,0 4px 8px 3px #00000026;outline:none}:host([fab][small]){border-radius:12px;height:40px;width:40px}:host([fab][small]) tk-icon{height:24px;width:24px}:host([fab][large]){border-radius:28px;height:96px;width:96px}:host([fab][large]) tk-icon{height:36px;width:36px}:host([disabled]){background-color:hsla(var(--on-surface),.12);box-shadow:none;cursor:not-allowed;pointer-events:none}:host([disabled]) .content{color:hsl(var(--on-surface));opacity:.38}";
 
 export { css_248z as default, stylesheet };

package/checkbox/checkbox.d.ts

@@ -5,6 +5,7 @@ declare class TkCheckbox extends LitElement {
     name: string;
     value: string;
     checked: boolean;
+    disabled: boolean;
     private $input;
     render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;

package/checkbox/checkbox.js

@@ -11,16 +11,19 @@ let TkCheckbox = class TkCheckbox extends LitElement {
         super(...arguments);
         this._id = uniqueID();
         this.checked = false;
+        this.disabled = false;
     }
     render() {
         return html `
 			<tk-box direction="row" align-items="center">
-				<div tabindex="0" class="checkbox">
-					<svg id="checkmark" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 24 24">
-						<path id="checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
-						<line id="indeterminate-path" fill="none" x1="0" y1="12.5" x2="24" y2="12.5" />
-					</svg>
-				</div>
+				<tk-box ripple tabindex="${this.disabled ? -1 : 0}" class="state">
+					<div class="checkbox">
+						<svg id="checkmark" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 24 24">
+							<path id="checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
+							<line id="indeterminate-path" fill="none" x1="0" y1="12.5" x2="24" y2="12.5" />
+						</svg>
+					</div>
+				</tk-box>
 				<span class="label"><slot></slot></span>
 			</tk-box>
 			<input
@@ -68,11 +71,14 @@ __decorate([
     property({ attribute: true, type: String })
 ], TkCheckbox.prototype, "name", void 0);
 __decorate([
-    property({ attribute: true, type: String })
+    property({ attribute: true, type: String, reflect: true })
 ], TkCheckbox.prototype, "value", void 0);
 __decorate([
     property({ attribute: true, type: Boolean, reflect: true })
 ], TkCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkCheckbox.prototype, "disabled", void 0);
 __decorate([
     query("input")
 ], TkCheckbox.prototype, "$input", void 0);

package/checkbox/checkbox.scss.js

@@ -1,4 +1,4 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_checkbox-bg:var(--checkbox-bg,#0000);--_checkbox-color:var(--checkbox-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));display:inline-flex}:host .checkbox{align-items:center;background:var(--_checkbox-bg);border:var(--checkbox-border-config,.125rem solid) currentColor;border-radius:var(--checkbox-border-radius,.375rem);color:var(--_checkbox-color);display:inline-flex;height:var(--checkbox-size,1.25rem);justify-content:center;margin:0 5px;min-width:var(--checkbox-size,1.25rem);outline:none;position:relative;transition:var(--checkbox-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),border-color var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));-webkit-user-select:none;user-select:none;width:var(--checkbox-size,1.25rem)}:host .label{font-size:1.1em}:host(:not([disabled])){cursor:pointer}:host([checked]),:host([indeterminate]){--_checkbox-bg:var(--checkbox-bg-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--_checkbox-color:var(--checkbox-color-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([checked]:not([indeterminate])) #checkmark-path,:host([indeterminate]) #indeterminate-path{stroke-dashoffset:0}:host(:focus),:host(:hover){will-change:border,background}:host(:focus) #checkmark-path,:host(:hover) #checkmark-path{will-change:stroke-dashoffset}:host([disabled]){--_checkbox-bg:var(--checkbox-bg-disabled,#0000);--_checkbox-color:var(--checkbox-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));color:var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%)));pointer-events:none}:host([disabled][checked]),:host([disabled][indeterminate]){--_checkbox-bg:var(--checkbox-bg-disabled-checked,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_checkbox-color:var(--checkbox-color-disabled-checked,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}#checkmark{height:var(--checkbox-checkmark-size,.75rem);width:var(--checkbox-checkmark-size,.75rem)}#checkmark-path,#indeterminate-path{stroke-width:var(--checkbox-checkmark-path-width,.3rem);stroke:var(--checkbox-checkmark-stroke-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));stroke-dasharray:var(--checkbox-checkmark-path-dasharray,30);stroke-dashoffset:var(--checkbox-checkmark-path-dasharray,30);transition:var(--checkbox-checkmark-transition,stroke-dashoffset var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)))}#checkmark-path{transition-delay:var(--checkbox-checkmark-path-delay,50ms)}#ripple{transform:var(--checkbox-ripple-transform,translate(-50%,-50%) scale(1.8))}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_checkbox-bg:var(--checkbox-bg,#0000);--_checkbox-color:var(--checkbox-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));display:inline-flex}:host .checkbox{align-items:center;background:var(--_checkbox-bg);border:var(--checkbox-border-config,.125rem solid) currentColor;border-radius:var(--checkbox-border-radius,.375rem);color:var(--_checkbox-color);display:inline-flex;height:var(--checkbox-size,1.25rem);justify-content:center;margin:0 5px;min-width:var(--checkbox-size,1.25rem);outline:none;position:relative;transition:var(--checkbox-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),border-color var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));-webkit-user-select:none;user-select:none;width:var(--checkbox-size,1.25rem)}:host .label{font-size:1.1em}:host(:not([disabled])){cursor:pointer}:host([checked]),:host([indeterminate]){--_checkbox-bg:var(--checkbox-bg-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--_checkbox-color:var(--checkbox-color-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([checked]:not([indeterminate])) #checkmark-path,:host([indeterminate]) #indeterminate-path{stroke-dashoffset:0}:host(:focus),:host(:hover){will-change:border,background}:host(:focus) #checkmark-path,:host(:hover) #checkmark-path{will-change:stroke-dashoffset}:host([disabled]){--_checkbox-bg:var(--checkbox-bg-disabled,#0000);--_checkbox-color:var(--checkbox-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));color:var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%)));pointer-events:none}:host([disabled][checked]),:host([disabled][indeterminate]){--_checkbox-bg:var(--checkbox-bg-disabled-checked,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_checkbox-color:var(--checkbox-color-disabled-checked,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}#checkmark{height:var(--checkbox-checkmark-size,.75rem);width:var(--checkbox-checkmark-size,.75rem)}#checkmark-path,#indeterminate-path{stroke-width:var(--checkbox-checkmark-path-width,.3rem);stroke:var(--checkbox-checkmark-stroke-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));stroke-dasharray:var(--checkbox-checkmark-path-dasharray,30);stroke-dashoffset:var(--checkbox-checkmark-path-dasharray,30);transition:var(--checkbox-checkmark-transition,stroke-dashoffset var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)))}#checkmark-path{transition-delay:var(--checkbox-checkmark-path-delay,50ms)}#ripple{transform:var(--checkbox-ripple-transform,translate(-50%,-50%) scale(1.8))}";
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:inline-flex}:host .state{align-items:center;border-radius:100%;display:inline-flex;height:40px;justify-content:center;outline:none;overflow:hidden;width:40px}:host .checkbox{align-items:center;border:2px solid hsl(var(--primary));display:inline-flex;height:18px;justify-content:center;margin:0 5px;outline:none;position:relative;transition:var(--checkbox-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),border-color var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));-webkit-user-select:none;user-select:none;width:18px}:host .label{user-select:none}:host([checked]) .checkbox{background-color:hsl(var(--primary))}:host([checked]:not([indeterminate])) #checkmark-path,:host([indeterminate]) #indeterminate-path{stroke-dashoffset:0}:host(:focus) #checkmark-path,:host(:hover) #checkmark-path{will-change:stroke-dashoffset}#checkmark{padding:1px}#checkmark-path,#indeterminate-path{stroke-width:5px;stroke:hsl(var(--on-primary));stroke-dasharray:30;stroke-dashoffset:30;transition:var(--checkbox-checkmark-transition,stroke-dashoffset var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)))}#checkmark-path{transition-delay:var(--checkbox-checkmark-path-delay,50ms)}:host(:not([disabled])){cursor:pointer}:host(:focus) .state,:host(:hover) .state{background:hsla(var(--on-surface),.3)}:host([checked]:focus) .state,:host([checked]:hover) .state{background:hsla(var(--primary),.3)}:host([checked]:focus) .checked,:host([checked]:hover) .checked{background-color:hsl(var(--primary))}:host([disabled]){pointer-events:none}:host([disabled]) .checkbox{background-color:hsla(var(--on-surface),.3);border-color:hsla(var(--on-surface),0)}:host([disabled]) #checkmark-path,:host([disabled]) #indeterminate-path{stroke:hsla(var(--on-surface-variant,.3))}:host([disabled]) .label{opacity:.6}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:inline-flex}:host .state{align-items:center;border-radius:100%;display:inline-flex;height:40px;justify-content:center;outline:none;overflow:hidden;width:40px}:host .checkbox{align-items:center;border:2px solid hsl(var(--primary));display:inline-flex;height:18px;justify-content:center;margin:0 5px;outline:none;position:relative;transition:var(--checkbox-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),border-color var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));-webkit-user-select:none;user-select:none;width:18px}:host .label{user-select:none}:host([checked]) .checkbox{background-color:hsl(var(--primary))}:host([checked]:not([indeterminate])) #checkmark-path,:host([indeterminate]) #indeterminate-path{stroke-dashoffset:0}:host(:focus) #checkmark-path,:host(:hover) #checkmark-path{will-change:stroke-dashoffset}#checkmark{padding:1px}#checkmark-path,#indeterminate-path{stroke-width:5px;stroke:hsl(var(--on-primary));stroke-dasharray:30;stroke-dashoffset:30;transition:var(--checkbox-checkmark-transition,stroke-dashoffset var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)))}#checkmark-path{transition-delay:var(--checkbox-checkmark-path-delay,50ms)}:host(:not([disabled])){cursor:pointer}:host(:focus) .state,:host(:hover) .state{background:hsla(var(--on-surface),.3)}:host([checked]:focus) .state,:host([checked]:hover) .state{background:hsla(var(--primary),.3)}:host([checked]:focus) .checked,:host([checked]:hover) .checked{background-color:hsl(var(--primary))}:host([disabled]){pointer-events:none}:host([disabled]) .checkbox{background-color:hsla(var(--on-surface),.3);border-color:hsla(var(--on-surface),0)}:host([disabled]) #checkmark-path,:host([disabled]) #indeterminate-path{stroke:hsla(var(--on-surface-variant,.3))}:host([disabled]) .label{opacity:.6}";
 
 export { css_248z as default, stylesheet };

package/{tag/tag.d.ts → chip/chip.d.ts}

@@ -1,11 +1,11 @@
 import { LitElement } from "lit";
-declare class TkTag extends LitElement {
+declare class TkChip extends LitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "tk-tag": TkTag;
+        "tk-chip": TkChip;
     }
 }
-export { TkTag };
+export { TkChip };