tinkiet 0.8.20 → 0.9.1

package/theme/theme.js

@@ -1,21 +1,17 @@
 import { __decorate } from 'tslib';
 import { LitElement, html, css, unsafeCSS } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
+import { property, state, customElement } from 'lit/decorators.js';
 import css_248z from './theme.scss.js';
 
 let TkTheme = class TkTheme extends LitElement {
     constructor() {
         super(...arguments);
-        this.primary = "#8970bf";
-        this.onPrimary = "#FFFFFF";
-        this.accent = "#E69A8D";
-        this.onAccent = "#FFFFFF";
-        this.shade = "#AAAAAA";
-        this.onShade = "#FFFFFF";
-        this.error = "#F44336";
-        this.onError = "#FFFFFF";
-        this.foreground = "#FFFFFF";
-        this.background = "#000";
+        this.primary = "#62519f";
+        this.secondary = "#625B71";
+        this.tertiary = "#7D5260";
+        this.error = "#B3261E";
+        this.neutral = "#5E5F5C";
+        this.neutralVariant = "#5c6057";
         this.forceBody = false;
         this.inverted = false;
     }
@@ -24,44 +20,9 @@ let TkTheme = class TkTheme extends LitElement {
 			<slot></slot>
 		`;
     }
-    updated() {
+    firstUpdated(_changedProperties) {
         this.setThemeColor();
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener("turn-theme-to-inverted", () => this.turnThemeToInverted(), { passive: true });
-        this.addEventListener("turn-theme-to-non-inverted", () => this.turnThemeToNonInverted(), { passive: true });
-        this.addEventListener("set-theme", this.setTheme);
-        this.addEventListener("set-theme-font-size", this.setThemeFontSize);
-    }
-    disconnectedCallback() {
-        this.removeEventListener("turn-theme-to-inverted", this.turnThemeToInverted);
-        this.removeEventListener("turn-theme-to-non-inverted", this.turnThemeToNonInverted);
-        this.removeEventListener("set-theme", this.setTheme);
-        this.removeEventListener("set-theme-font-size", this.setThemeFontSize);
-        super.disconnectedCallback();
-    }
-    setTheme(e) {
-        const ev = e;
-        this.background = ev.detail.background ? ev.detail.background : this.background;
-        this.foreground = ev.detail.foreground ? ev.detail.foreground : this.foreground;
-        this.primary = ev.detail.primary ? ev.detail.primary : this.primary;
-        this.onPrimary = ev.detail.onPrimary ? ev.detail.onPrimary : this.onPrimary;
-        this.accent = ev.detail.accent ? ev.detail.accent : this.accent;
-        this.onAccent = ev.detail.onAccent ? ev.detail.onAccent : this.onAccent;
-    }
-    setThemeFontSize(e) {
-        const ev = e;
-        this.style.setProperty("--font-size", ev.detail);
-    }
-    turnThemeToInverted() {
-        this.inverted = true;
-        this.forceBody && this.setBodyStyle();
-    }
-    turnThemeToNonInverted() {
-        this.inverted = false;
-        this.forceBody && this.setBodyStyle();
-    }
     hexToHSL(hex) {
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
         if (result == null)
@@ -92,53 +53,36 @@ let TkTheme = class TkTheme extends LitElement {
         return [(h * 360).toString(), (s * 100).toString() + "%", (l * 100).toString() + "%"];
     }
     setThemeColor() {
-        const primary_hsl = this.hexToHSL(this.primary);
-        this.style.setProperty("--primary-h", primary_hsl[0]);
-        this.style.setProperty("--primary-s", primary_hsl[1]);
-        this.style.setProperty("--primary-l", primary_hsl[2]);
-        const on_primary_hsl = this.hexToHSL(this.onPrimary);
-        this.style.setProperty("--on-primary-h", on_primary_hsl[0]);
-        this.style.setProperty("--on-primary-s", on_primary_hsl[1]);
-        this.style.setProperty("--on-primary-l", on_primary_hsl[2]);
-        const accent_hsl = this.hexToHSL(this.accent);
-        this.style.setProperty("--accent-h", accent_hsl[0]);
-        this.style.setProperty("--accent-s", accent_hsl[1]);
-        this.style.setProperty("--accent-l", accent_hsl[2]);
-        const on_accent_hsl = this.hexToHSL(this.onAccent);
-        this.style.setProperty("--on-accent-h", on_accent_hsl[0]);
-        this.style.setProperty("--on-accent-s", on_accent_hsl[1]);
-        this.style.setProperty("--on-accent-l", on_accent_hsl[2]);
-        const shade_hsl = this.hexToHSL(this.shade);
-        this.style.setProperty("--shade-h", shade_hsl[0]);
-        this.style.setProperty("--shade-s", shade_hsl[1]);
-        this.style.setProperty("--shade-l", shade_hsl[2]);
-        const on_shade_hsl = this.hexToHSL(this.onShade);
-        this.style.setProperty("--on-shade-h", on_shade_hsl[0]);
-        this.style.setProperty("--on-shade-s", on_shade_hsl[1]);
-        this.style.setProperty("--on-shade-l", on_shade_hsl[2]);
-        const error_hsl = this.hexToHSL(this.error);
-        this.style.setProperty("--error-h", error_hsl[0]);
-        this.style.setProperty("--error-s", error_hsl[1]);
-        this.style.setProperty("--error-l", error_hsl[2]);
-        const on_error_hsl = this.hexToHSL(this.onError);
-        this.style.setProperty("--on-error-h", on_error_hsl[0]);
-        this.style.setProperty("--on-error-s", on_error_hsl[1]);
-        this.style.setProperty("--on-error-l", on_error_hsl[2]);
-        const foreground = this.hexToHSL(this.foreground);
-        this.style.setProperty("--theme-foreground", `hsl(${foreground[0]},${foreground[1]},${foreground[2]})`);
-        const background = this.hexToHSL(this.background);
-        this.style.setProperty("--theme-background", `hsl(${background[0]},${background[1]},${background[2]})`);
-        this.forceBody && this.setBodyStyle();
-    }
-    setBodyStyle() {
-        let foreground = this.hexToHSL(this.foreground);
-        let background = this.hexToHSL(this.background);
-        if (this.inverted) {
-            foreground = this.hexToHSL(this.background);
-            background = this.hexToHSL(this.foreground);
-        }
-        document.body.style.setProperty("background", `hsl(${background[0]},${background[1]},${background[2]})`);
-        document.body.style.setProperty("color", `hsl(${foreground[0]},${foreground[1]},${foreground[2]})`);
+        this.primary_hsl = this.hexToHSL(this.primary);
+        this.secondary_hsl = this.hexToHSL(this.secondary);
+        this.tertiary_hsl = this.hexToHSL(this.tertiary);
+        this.error_hsl = this.hexToHSL(this.error);
+        this.neutral_hsl = this.hexToHSL(this.neutral);
+        this.neutral_variant_hsl = this.hexToHSL(this.neutralVariant);
+        const style = document.createElement("style");
+        style.innerHTML = `
+			:root {
+				--primary-h: ${this.primary_hsl[0]};
+				--primary-s: ${this.primary_hsl[1]};
+				--primary-l: ${this.primary_hsl[2]};
+				--secondary-h: ${this.secondary_hsl[0]};
+				--secondary-s: ${this.secondary_hsl[1]};
+				--secondary-l: ${this.secondary_hsl[2]};
+				--tertiary-h: ${this.tertiary_hsl[0]};
+				--tertiary-s: ${this.tertiary_hsl[1]};
+				--tertiary-l: ${this.tertiary_hsl[2]};
+				--error-h: ${this.error_hsl[0]};
+				--error-s: ${this.error_hsl[1]};
+				--error-l: ${this.error_hsl[2]};
+				--neutral-h: ${this.neutral_hsl[0]};
+				--neutral-s: ${this.neutral_hsl[1]};
+				--neutral-l: ${this.neutral_hsl[2]};
+				--neutral-variant-h: ${this.neutral_variant_hsl[0]};
+				--neutral-variant-s: ${this.neutral_variant_hsl[1]};
+				--neutral-variant-l: ${this.neutral_variant_hsl[2]};
+			}
+		`;
+        document.body.appendChild(style);
     }
 };
 TkTheme.styles = css `
@@ -147,39 +91,45 @@ TkTheme.styles = css `
 __decorate([
     property()
 ], TkTheme.prototype, "primary", void 0);
-__decorate([
-    property({ attribute: "on-primary" })
-], TkTheme.prototype, "onPrimary", void 0);
 __decorate([
     property()
-], TkTheme.prototype, "accent", void 0);
-__decorate([
-    property({ attribute: "on-accent" })
-], TkTheme.prototype, "onAccent", void 0);
-__decorate([
-    property()
-], TkTheme.prototype, "shade", void 0);
+], TkTheme.prototype, "secondary", void 0);
 __decorate([
     property()
-], TkTheme.prototype, "onShade", void 0);
+], TkTheme.prototype, "tertiary", void 0);
 __decorate([
     property()
 ], TkTheme.prototype, "error", void 0);
 __decorate([
     property()
-], TkTheme.prototype, "onError", void 0);
+], TkTheme.prototype, "neutral", void 0);
 __decorate([
     property()
-], TkTheme.prototype, "foreground", void 0);
-__decorate([
-    property()
-], TkTheme.prototype, "background", void 0);
+], TkTheme.prototype, "neutralVariant", void 0);
 __decorate([
     property({ type: Boolean, attribute: "force-body", reflect: true })
 ], TkTheme.prototype, "forceBody", void 0);
 __decorate([
     property({ type: Boolean, attribute: true, reflect: true })
 ], TkTheme.prototype, "inverted", void 0);
+__decorate([
+    state()
+], TkTheme.prototype, "primary_hsl", void 0);
+__decorate([
+    state()
+], TkTheme.prototype, "secondary_hsl", void 0);
+__decorate([
+    state()
+], TkTheme.prototype, "tertiary_hsl", void 0);
+__decorate([
+    state()
+], TkTheme.prototype, "error_hsl", void 0);
+__decorate([
+    state()
+], TkTheme.prototype, "neutral_hsl", void 0);
+__decorate([
+    state()
+], TkTheme.prototype, "neutral_variant_hsl", void 0);
 TkTheme = __decorate([
     customElement("tk-theme")
 ], TkTheme);

package/theme/theme.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{--background:var(--theme-background);--foreground:var(--theme-foreground);--primary-lighter:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.3));--primary-light:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.15));--primary:hsl(var(--primary-h),var(--primary-s),var(--primary-l));--primary-dark:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.85));--primary-darker:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.7));--on-primary-lighter:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.3));--on-primary-light:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.15));--on-primary:hsl(var(--on-primary-h),var(--on-primary-s),var(--on-primary-l));--on-primary-dark:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.85));--on-primary-darker:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.7));--accent-lighter:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.3));--accent-light:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.15));--accent:hsl(var(--accent-h),var(--accent-s),var(--accent-l));--accent-dark:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.85));--accent-darker:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.7));--on-accent-lighter:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.3));--on-accent-light:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.15));--on-accent:hsl(var(--on-accent-h),var(--on-accent-s),var(--on-accent-l));--on-accent-dark:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.85));--on-accent-darker:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.7));--shade-lighter:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.3));--shade-light:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.15));--shade:hsl(var(--shade-h),var(--shade-s),var(--shade-l));--shade-dark:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.85));--shade-darker:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.7));--on-shade-lighter:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.3));--on-shade-light:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.15));--on-shade:hsl(var(--on-shade-h),var(--on-shade-s),var(--on-shade-l));--on-shade-dark:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.85));--on-shade-darker:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.7));--error-lighter:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.3));--error-light:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.15));--error:hsl(var(--error-h),var(--error-s),var(--error-l));--error-dark:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.85));--error-darker:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.7));--on-error-lighter:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.3));--on-error-light:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.15));--on-error:hsl(var(--on-error-h),var(--on-error-s),var(--on-error-l));--on-error-dark:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.85));--on-error-darker:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.7));--shadow-lighter:#0000001a;--shadow-light:#00000026;--shadow:#0003;--shadow-dark:#0006;--shadow-darker:#0009;background-color:var(--background);color:var(--foreground);font-family:var(--font-family,Roboto,sans-serif);font-size:var(--font-size,1rem)}:host([inverted]){--background:var(--theme-foreground);--foreground:var(--theme-background);--primary-lighter:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.7));--primary-light:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.85));--primary:hsl(var(--primary-h),var(--primary-s),var(--primary-l));--primary-dark:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.15));--primary-darker:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.3));--on-primary-lighter:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.7));--on-primary-light:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.85));--on-primary:hsl(var(--on-primary-h),var(--on-primary-s),var(--on-primary-l));--on-primary-dark:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.15));--on-primary-darker:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.3));--accent-lighter:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.7));--accent-light:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.85));--accent:hsl(var(--accent-h),var(--accent-s),var(--accent-l));--accent-dark:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.15));--accent-darker:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.3));--on-accent-lighter:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.7));--on-accent-light:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.85));--on-accent:hsl(var(--on-accent-h),var(--on-accent-s),var(--on-accent-l));--on-accent-dark:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.15));--on-accent-darker:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.3));--shade-lighter:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.7));--shade-light:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.85));--shade:hsl(var(--shade-h),var(--shade-s),var(--shade-l));--shade-dark:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.15));--shade-darker:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.3));--on-shade-lighter:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.7));--on-shade-light:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.85));--on-shade:hsl(var(--on-shade-h),var(--on-shade-s),var(--on-shade-l));--on-shade-dark:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.15));--on-shade-darker:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.3));--error-lighter:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.7));--error-light:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.85));--error:hsl(var(--error-h),var(--error-s),var(--error-l));--error-dark:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.15));--error-darker:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.3));--on-error-lighter:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.7));--on-error-light:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.85));--on-error:hsl(var(--on-error-h),var(--on-error-s),var(--on-error-l));--on-error-dark:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.15));--on-error-darker:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.3));--shadow-lighter:#ffffff1a;--shadow-light:#ffffff26;--shadow:#fff3;--shadow-dark:#fff6;--shadow-darker:#fff9}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--background:var(--theme-background);--foreground:var(--theme-foreground);--primary-lighter:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.3));--primary-light:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.15));--primary:hsl(var(--primary-h),var(--primary-s),var(--primary-l));--primary-dark:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.85));--primary-darker:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.7));--on-primary-lighter:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.3));--on-primary-light:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.15));--on-primary:hsl(var(--on-primary-h),var(--on-primary-s),var(--on-primary-l));--on-primary-dark:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.85));--on-primary-darker:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.7));--accent-lighter:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.3));--accent-light:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.15));--accent:hsl(var(--accent-h),var(--accent-s),var(--accent-l));--accent-dark:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.85));--accent-darker:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.7));--on-accent-lighter:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.3));--on-accent-light:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.15));--on-accent:hsl(var(--on-accent-h),var(--on-accent-s),var(--on-accent-l));--on-accent-dark:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.85));--on-accent-darker:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.7));--shade-lighter:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.3));--shade-light:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.15));--shade:hsl(var(--shade-h),var(--shade-s),var(--shade-l));--shade-dark:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.85));--shade-darker:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.7));--on-shade-lighter:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.3));--on-shade-light:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.15));--on-shade:hsl(var(--on-shade-h),var(--on-shade-s),var(--on-shade-l));--on-shade-dark:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.85));--on-shade-darker:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.7));--error-lighter:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.3));--error-light:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.15));--error:hsl(var(--error-h),var(--error-s),var(--error-l));--error-dark:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.85));--error-darker:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.7));--on-error-lighter:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.3));--on-error-light:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.15));--on-error:hsl(var(--on-error-h),var(--on-error-s),var(--on-error-l));--on-error-dark:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.85));--on-error-darker:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.7));--shadow-lighter:#0000001a;--shadow-light:#00000026;--shadow:#0003;--shadow-dark:#0006;--shadow-darker:#0009;background-color:var(--background);color:var(--foreground);font-family:var(--font-family,Roboto,sans-serif);font-size:var(--font-size,1rem)}:host([inverted]){--background:var(--theme-foreground);--foreground:var(--theme-background);--primary-lighter:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.7));--primary-light:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.85));--primary:hsl(var(--primary-h),var(--primary-s),var(--primary-l));--primary-dark:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.15));--primary-darker:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.3));--on-primary-lighter:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.7));--on-primary-light:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.85));--on-primary:hsl(var(--on-primary-h),var(--on-primary-s),var(--on-primary-l));--on-primary-dark:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.15));--on-primary-darker:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.3));--accent-lighter:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.7));--accent-light:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.85));--accent:hsl(var(--accent-h),var(--accent-s),var(--accent-l));--accent-dark:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.15));--accent-darker:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.3));--on-accent-lighter:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.7));--on-accent-light:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.85));--on-accent:hsl(var(--on-accent-h),var(--on-accent-s),var(--on-accent-l));--on-accent-dark:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.15));--on-accent-darker:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.3));--shade-lighter:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.7));--shade-light:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.85));--shade:hsl(var(--shade-h),var(--shade-s),var(--shade-l));--shade-dark:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.15));--shade-darker:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.3));--on-shade-lighter:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.7));--on-shade-light:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.85));--on-shade:hsl(var(--on-shade-h),var(--on-shade-s),var(--on-shade-l));--on-shade-dark:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.15));--on-shade-darker:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.3));--error-lighter:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.7));--error-light:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.85));--error:hsl(var(--error-h),var(--error-s),var(--error-l));--error-dark:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.15));--error-darker:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.3));--on-error-lighter:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.7));--on-error-light:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.85));--on-error:hsl(var(--on-error-h),var(--on-error-s),var(--on-error-l));--on-error-dark:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.15));--on-error-darker:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.3));--shadow-lighter:#ffffff1a;--shadow-light:#ffffff26;--shadow:#fff3;--shadow-dark:#fff6;--shadow-darker:#fff9}";
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--primary-0:var(--primary-h),var(--primary-s),0%;--primary-10:var(--primary-h),var(--primary-s),calc(var(--primary-l) - (var(--primary-l))/30*20);--primary-20:var(--primary-h),var(--primary-s),calc(var(--primary-l) - (var(--primary-l))/30*10);--primary-30:var(--primary-h),var(--primary-s),calc(var(--primary-l) - (var(--primary-l))/30*5);--primary-40:var(--primary-h),var(--primary-s),calc(var(--primary-l));--primary-50:var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l))/60*5);--primary-60:var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l))/60*10);--primary-70:var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l))/60*20);--primary-80:var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l))/60*30);--primary-90:var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l))/60*40);--primary-95:var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l))/60*50);--primary-99:var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l))/60*55);--primary-100:var(--primary-h),var(--primary-s),100%;--secondary-0:var(--secondary-h),var(--secondary-s),0%;--secondary-10:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) - (var(--secondary-l))/30*20);--secondary-20:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) - (var(--secondary-l))/30*10);--secondary-30:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) - (var(--secondary-l))/30*5);--secondary-40:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l));--secondary-50:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l))/60*5);--secondary-60:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l))/60*10);--secondary-70:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l))/60*20);--secondary-80:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l))/60*30);--secondary-90:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l))/60*40);--secondary-95:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l))/60*50);--secondary-99:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l))/60*55);--secondary-100:var(--secondary-h),var(--secondary-s),100%;--tertiary-0:var(--tertiary-h),var(--tertiary-s),0%;--tertiary-10:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) - (var(--tertiary-l))/30*20);--tertiary-20:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) - (var(--tertiary-l))/30*10);--tertiary-30:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) - (var(--tertiary-l))/30*5);--tertiary-40:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l));--tertiary-50:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) + (100% - var(--tertiary-l))/60*5);--tertiary-60:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) + (100% - var(--tertiary-l))/60*10);--tertiary-70:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) + (100% - var(--tertiary-l))/60*20);--tertiary-80:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) + (100% - var(--tertiary-l))/60*30);--tertiary-90:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) + (100% - var(--tertiary-l))/60*40);--tertiary-95:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) + (100% - var(--tertiary-l))/60*50);--tertiary-99:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) + (100% - var(--tertiary-l))/60*55);--tertiary-100:var(--tertiary-h),var(--tertiary-s),100%;--error-0:var(--error-h),var(--error-s),0%;--error-10:var(--error-h),var(--error-s),calc(var(--error-l) - (var(--error-l))/30*20);--error-20:var(--error-h),var(--error-s),calc(var(--error-l) - (var(--error-l))/30*10);--error-30:var(--error-h),var(--error-s),calc(var(--error-l) - (var(--error-l))/30*5);--error-40:var(--error-h),var(--error-s),calc(var(--error-l));--error-50:var(--error-h),var(--error-s),calc(var(--error-l) + (100% - var(--error-l))/60*5);--error-60:var(--error-h),var(--error-s),calc(var(--error-l) + (100% - var(--error-l))/60*10);--error-70:var(--error-h),var(--error-s),calc(var(--error-l) + (100% - var(--error-l))/60*20);--error-80:var(--error-h),var(--error-s),calc(var(--error-l) + (100% - var(--error-l))/60*30);--error-90:var(--error-h),var(--error-s),calc(var(--error-l) + (100% - var(--error-l))/60*40);--error-95:var(--error-h),var(--error-s),calc(var(--error-l) + (100% - var(--error-l))/60*50);--error-99:var(--error-h),var(--error-s),calc(var(--error-l) + (100% - var(--error-l))/60*55);--error-100:var(--error-h),var(--error-s),100%;--neutral-0:var(--neutral-h),var(--neutral-s),0%;--neutral-4:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) - (var(--neutral-l))/30*26);--neutral-6:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) - (var(--neutral-l))/30*24);--neutral-10:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) - (var(--neutral-l))/30*20);--neutral-12:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) - (var(--neutral-l))/30*18);--neutral-17:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) - (var(--neutral-l))/30*13);--neutral-22:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) - (var(--neutral-l))/30*8);--neutral-24:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) - (var(--neutral-l))/30*6);--neutral-40:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l));--neutral-87:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) + (100% - var(--neutral-l))/60*30);--neutral-90:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) + (100% - var(--neutral-l))/60*34);--neutral-92:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) + (100% - var(--neutral-l))/60*38);--neutral-94:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) + (100% - var(--neutral-l))/60*42);--neutral-96:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) + (100% - var(--neutral-l))/60*46);--neutral-98:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) + (100% - var(--neutral-l))/60*54);--neutral-100:var(--neutral-h),var(--neutral-s),100%;--neutral-variant-0:var(--neutral-variant-h),var(--neutral-variant-s),0%;--neutral-variant-30:var(--neutral-variant-h),var(--neutral-variant-s),calc(var(--neutral-variant-l) - (var(--neutral-variant-l))/30*10);--neutral-variant-50:var(--neutral-variant-h),var(--neutral-variant-s),calc(var(--neutral-variant-l) + (100% - var(--neutral-variant-l))/60*5);--neutral-variant-60:var(--neutral-variant-h),var(--neutral-variant-s),calc(var(--neutral-variant-l) + (100% - var(--neutral-variant-l))/60*10);--neutral-variant-80:var(--neutral-variant-h),var(--neutral-variant-s),calc(var(--neutral-variant-l) + (100% - var(--neutral-variant-l))/60*30);--primary:var(--primary-40);--secondary:var(--secondary-40);--tertiary:var(--tertiary-40);--error:var(--error-40);--on-primary:var(--primary-100);--on-secondary:var(--secondary-100);--on-tertiary:var(--tertiary-100);--on-error:var(--error-100);--primary-container:var(--primary-90);--secondary-container:var(--secondary-90);--tertiary-container:var(--tertiary-90);--error-container:var(--error-90);--on-primary-container:var(--primary-10);--on-secondary-container:var(--secondary-10);--on-tertiary-container:var(--tertiary-10);--on-error-container:var(--error-10);--surface:var(--neutral-98);--surface-dim:var(--neutral-87);--surface-bright:var(--neutral-98);--surface-container-lowest:var(--neutral-100);--surface-container-low:var(--neutral-96);--surface-container:var(--neutral-94);--surface-container-high:var(--neutral-92);--surface-container-highest:var(--neutral-90);--surface-variant:var(--neutral-variant-90);--on-surface:var(--neutral-10);--on-surface-variant:var(--neutral-variant-30);--background:var(--neutral-98);--on-background:var(--neutral-10);--outline:var(--neutral-variant-50);--outline-variant:var(--neutral-variant-80);--inverse-surface:var(--neutral-20);--inverse-on-surface:var(--neutral-95);--inverse-primary:var(--primary-80);--shadow:var(--neutral-0);--scrim:var(--neutral-0);color:hsl(var(--on-background));font-family:var(--font-family,Roboto,sans-serif);font-size:var(--font-size,1rem)}:host([inverted]){--primary:var(--primary-80);--secondary:var(--secondary-80);--tertiary:var(--tertiary-80);--error:var(--error-80);--on-primary:var(--primary-20);--on-secondary:var(--secondary-20);--on-tertiary:var(--tertiary-20);--on-error:var(--error-20);--primary-container:var(--primary-30);--secondary-container:var(--secondary-30);--tertiary-container:var(--tertiary-30);--error-container:var(--error-30);--on-primary-container:var(--primary-90);--on-secondary-container:var(--secondary-90);--on-tertiary-container:var(--tertiary-90);--on-error-container:var(--error-90);--surface:var(--neutral-6);--surface-dim:var(--neutral-6);--surface-bright:var(--neutral-24);--surface-container-lowest:var(--neutral-4);--surface-container-low:var(--neutral-10);--surface-container:var(--neutral-12);--surface-container-high:var(--neutral-17);--surface-container-highest:var(--neutral-22);--surface-variant:var(--neutral-variant-30);--on-surface:var(--neutral-90);--on-surface-variant:var(--neutral-variant-80);--background:var(--neutral-6);--on-background:var(--neutral-90);--outline:var(--neutral-variant-60);--outline-variant:var(--neutral-variant-30);--inverse-surface:var(--neutral-90);--inverse-on-surface:var(--neutral-20);--inverse-primary:var(--primary-40);--shadow:var(--neutral-0);--scrim:var(--neutral-0)}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--primary-0:var(--primary-h),var(--primary-s),0%;--primary-10:var(--primary-h),var(--primary-s),calc(var(--primary-l) - (var(--primary-l))/30*20);--primary-20:var(--primary-h),var(--primary-s),calc(var(--primary-l) - (var(--primary-l))/30*10);--primary-30:var(--primary-h),var(--primary-s),calc(var(--primary-l) - (var(--primary-l))/30*5);--primary-40:var(--primary-h),var(--primary-s),calc(var(--primary-l));--primary-50:var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l))/60*5);--primary-60:var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l))/60*10);--primary-70:var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l))/60*20);--primary-80:var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l))/60*30);--primary-90:var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l))/60*40);--primary-95:var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l))/60*50);--primary-99:var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l))/60*55);--primary-100:var(--primary-h),var(--primary-s),100%;--secondary-0:var(--secondary-h),var(--secondary-s),0%;--secondary-10:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) - (var(--secondary-l))/30*20);--secondary-20:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) - (var(--secondary-l))/30*10);--secondary-30:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) - (var(--secondary-l))/30*5);--secondary-40:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l));--secondary-50:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l))/60*5);--secondary-60:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l))/60*10);--secondary-70:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l))/60*20);--secondary-80:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l))/60*30);--secondary-90:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l))/60*40);--secondary-95:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l))/60*50);--secondary-99:var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l))/60*55);--secondary-100:var(--secondary-h),var(--secondary-s),100%;--tertiary-0:var(--tertiary-h),var(--tertiary-s),0%;--tertiary-10:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) - (var(--tertiary-l))/30*20);--tertiary-20:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) - (var(--tertiary-l))/30*10);--tertiary-30:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) - (var(--tertiary-l))/30*5);--tertiary-40:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l));--tertiary-50:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) + (100% - var(--tertiary-l))/60*5);--tertiary-60:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) + (100% - var(--tertiary-l))/60*10);--tertiary-70:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) + (100% - var(--tertiary-l))/60*20);--tertiary-80:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) + (100% - var(--tertiary-l))/60*30);--tertiary-90:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) + (100% - var(--tertiary-l))/60*40);--tertiary-95:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) + (100% - var(--tertiary-l))/60*50);--tertiary-99:var(--tertiary-h),var(--tertiary-s),calc(var(--tertiary-l) + (100% - var(--tertiary-l))/60*55);--tertiary-100:var(--tertiary-h),var(--tertiary-s),100%;--error-0:var(--error-h),var(--error-s),0%;--error-10:var(--error-h),var(--error-s),calc(var(--error-l) - (var(--error-l))/30*20);--error-20:var(--error-h),var(--error-s),calc(var(--error-l) - (var(--error-l))/30*10);--error-30:var(--error-h),var(--error-s),calc(var(--error-l) - (var(--error-l))/30*5);--error-40:var(--error-h),var(--error-s),calc(var(--error-l));--error-50:var(--error-h),var(--error-s),calc(var(--error-l) + (100% - var(--error-l))/60*5);--error-60:var(--error-h),var(--error-s),calc(var(--error-l) + (100% - var(--error-l))/60*10);--error-70:var(--error-h),var(--error-s),calc(var(--error-l) + (100% - var(--error-l))/60*20);--error-80:var(--error-h),var(--error-s),calc(var(--error-l) + (100% - var(--error-l))/60*30);--error-90:var(--error-h),var(--error-s),calc(var(--error-l) + (100% - var(--error-l))/60*40);--error-95:var(--error-h),var(--error-s),calc(var(--error-l) + (100% - var(--error-l))/60*50);--error-99:var(--error-h),var(--error-s),calc(var(--error-l) + (100% - var(--error-l))/60*55);--error-100:var(--error-h),var(--error-s),100%;--neutral-0:var(--neutral-h),var(--neutral-s),0%;--neutral-4:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) - (var(--neutral-l))/30*26);--neutral-6:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) - (var(--neutral-l))/30*24);--neutral-10:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) - (var(--neutral-l))/30*20);--neutral-12:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) - (var(--neutral-l))/30*18);--neutral-17:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) - (var(--neutral-l))/30*13);--neutral-22:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) - (var(--neutral-l))/30*8);--neutral-24:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) - (var(--neutral-l))/30*6);--neutral-40:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l));--neutral-87:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) + (100% - var(--neutral-l))/60*30);--neutral-90:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) + (100% - var(--neutral-l))/60*34);--neutral-92:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) + (100% - var(--neutral-l))/60*38);--neutral-94:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) + (100% - var(--neutral-l))/60*42);--neutral-96:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) + (100% - var(--neutral-l))/60*46);--neutral-98:var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) + (100% - var(--neutral-l))/60*54);--neutral-100:var(--neutral-h),var(--neutral-s),100%;--neutral-variant-0:var(--neutral-variant-h),var(--neutral-variant-s),0%;--neutral-variant-30:var(--neutral-variant-h),var(--neutral-variant-s),calc(var(--neutral-variant-l) - (var(--neutral-variant-l))/30*10);--neutral-variant-50:var(--neutral-variant-h),var(--neutral-variant-s),calc(var(--neutral-variant-l) + (100% - var(--neutral-variant-l))/60*5);--neutral-variant-60:var(--neutral-variant-h),var(--neutral-variant-s),calc(var(--neutral-variant-l) + (100% - var(--neutral-variant-l))/60*10);--neutral-variant-80:var(--neutral-variant-h),var(--neutral-variant-s),calc(var(--neutral-variant-l) + (100% - var(--neutral-variant-l))/60*30);--primary:var(--primary-40);--secondary:var(--secondary-40);--tertiary:var(--tertiary-40);--error:var(--error-40);--on-primary:var(--primary-100);--on-secondary:var(--secondary-100);--on-tertiary:var(--tertiary-100);--on-error:var(--error-100);--primary-container:var(--primary-90);--secondary-container:var(--secondary-90);--tertiary-container:var(--tertiary-90);--error-container:var(--error-90);--on-primary-container:var(--primary-10);--on-secondary-container:var(--secondary-10);--on-tertiary-container:var(--tertiary-10);--on-error-container:var(--error-10);--surface:var(--neutral-98);--surface-dim:var(--neutral-87);--surface-bright:var(--neutral-98);--surface-container-lowest:var(--neutral-100);--surface-container-low:var(--neutral-96);--surface-container:var(--neutral-94);--surface-container-high:var(--neutral-92);--surface-container-highest:var(--neutral-90);--surface-variant:var(--neutral-variant-90);--on-surface:var(--neutral-10);--on-surface-variant:var(--neutral-variant-30);--background:var(--neutral-98);--on-background:var(--neutral-10);--outline:var(--neutral-variant-50);--outline-variant:var(--neutral-variant-80);--inverse-surface:var(--neutral-20);--inverse-on-surface:var(--neutral-95);--inverse-primary:var(--primary-80);--shadow:var(--neutral-0);--scrim:var(--neutral-0);color:hsl(var(--on-background));font-family:var(--font-family,Roboto,sans-serif);font-size:var(--font-size,1rem)}:host([inverted]){--primary:var(--primary-80);--secondary:var(--secondary-80);--tertiary:var(--tertiary-80);--error:var(--error-80);--on-primary:var(--primary-20);--on-secondary:var(--secondary-20);--on-tertiary:var(--tertiary-20);--on-error:var(--error-20);--primary-container:var(--primary-30);--secondary-container:var(--secondary-30);--tertiary-container:var(--tertiary-30);--error-container:var(--error-30);--on-primary-container:var(--primary-90);--on-secondary-container:var(--secondary-90);--on-tertiary-container:var(--tertiary-90);--on-error-container:var(--error-90);--surface:var(--neutral-6);--surface-dim:var(--neutral-6);--surface-bright:var(--neutral-24);--surface-container-lowest:var(--neutral-4);--surface-container-low:var(--neutral-10);--surface-container:var(--neutral-12);--surface-container-high:var(--neutral-17);--surface-container-highest:var(--neutral-22);--surface-variant:var(--neutral-variant-30);--on-surface:var(--neutral-90);--on-surface-variant:var(--neutral-variant-80);--background:var(--neutral-6);--on-background:var(--neutral-90);--outline:var(--neutral-variant-60);--outline-variant:var(--neutral-variant-30);--inverse-surface:var(--neutral-90);--inverse-on-surface:var(--neutral-20);--inverse-primary:var(--primary-40);--shadow:var(--neutral-0);--scrim:var(--neutral-0)}";
 
 export { css_248z as default, stylesheet };

package/topbar/index.d.ts

@@ -0,0 +1 @@
+export * from "./topbar.js";

package/topbar/index.js

@@ -0,0 +1 @@
+export { TkTopbar } from './topbar.js';

package/{navbar/navbar.d.ts → topbar/topbar.d.ts}

@@ -1,11 +1,11 @@
 import { TkBox } from "../box/index.js";
-declare class TkNavbar extends TkBox {
+declare class TkTopbar extends TkBox {
     static get styles(): import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "tk-navbar": TkNavbar;
+        "tk-topbar": TkTopbar;
     }
 }
-export { TkNavbar };
+export { TkTopbar };

package/{navbar/navbar.js → topbar/topbar.js}

@@ -2,10 +2,10 @@ import { __decorate } from 'tslib';
 import { css, unsafeCSS, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import '../box/index.js';
-import css_248z from './navbar.scss.js';
+import css_248z from './topbar.scss.js';
 import { TkBox } from '../box/box.js';
 
-let TkNavbar = class TkNavbar extends TkBox {
+let TkTopbar = class TkTopbar extends TkBox {
     static get styles() {
         return [
             ...TkBox.styles,
@@ -26,8 +26,8 @@ let TkNavbar = class TkNavbar extends TkBox {
 		`;
     }
 };
-TkNavbar = __decorate([
-    customElement("tk-navbar")
-], TkNavbar);
+TkTopbar = __decorate([
+    customElement("tk-topbar")
+], TkTopbar);
 
-export { TkNavbar };
+export { TkTopbar };

package/topbar/topbar.scss.js

@@ -0,0 +1,4 @@
+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;background:hsl(var(--on-primary));color:hsl(var(--primary));flex-direction:row;justify-content:space-between}:host([fixed]){left:0;position:fixed;right:0;top:0;z-index:var(--navbar-z-index,100)}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){align-items:center;display:flex;height:100%}#title,::slotted([slot=title]){margin:var(--nav-title-margin,0 0 0 var(--spacing-l,1.25rem))}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{align-items:center;background:hsl(var(--on-primary));color:hsl(var(--primary));flex-direction:row;justify-content:space-between}:host([fixed]){left:0;position:fixed;right:0;top:0;z-index:var(--navbar-z-index,100)}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){align-items:center;display:flex;height:100%}#title,::slotted([slot=title]){margin:var(--nav-title-margin,0 0 0 var(--spacing-l,1.25rem))}";
+
+export { css_248z as default, stylesheet };

package/umd/tinkiet.min.d.ts

@@ -52,7 +52,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.
@@ -130,8 +130,10 @@ declare global {
  * @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 {
@@ -160,6 +162,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>;
@@ -169,6 +174,7 @@ declare class TkButton extends TkBox {
     protected onKeyDown(e: KeyboardEvent): void;
     firstUpdated(): void;
     protected handleClick(e: Event): void;
+    slotChanged(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -181,6 +187,7 @@ declare class TkCheckbox extends LitElement {
     name: string;
     value: string;
     checked: boolean;
+    disabled: boolean;
     private $input;
     render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
@@ -194,6 +201,15 @@ declare global {
         "tk-checkbox": TkCheckbox;
     }
 }
+declare class TkChip extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-chip": TkChip;
+    }
+}
 declare class TkDialog extends LitElement {
     static styles: import("lit").CSSResult;
     modal: boolean;
@@ -222,7 +238,6 @@ declare class TkDrawer extends LitElement {
     swipeable: boolean;
     private $drawer;
     private mql;
-    private pointerListener;
     render(): import("lit-html").TemplateResult<1>;
     updated(props: any): void;
     protected overMediaQuery(): void;
@@ -231,6 +246,12 @@ declare class TkDrawer extends LitElement {
     show(): void;
     hide(): void;
     toggle(): void;
+    swipeX: number;
+    swipeY: number;
+    isHorizontalSwipe: boolean;
+    touchStart(event: TouchEvent): void;
+    touchMove(event: TouchEvent): void;
+    touchEnd(event: TouchEvent): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -239,7 +260,6 @@ declare global {
 }
 declare class TkForm extends LitElement {
     value: any;
-    protected createRenderRoot(): Element | ShadowRoot;
     connectedCallback(): void;
     disconnectedCallback(): void;
     submit(e: Event): void;
@@ -281,6 +301,7 @@ declare class TkListItem extends TkBox {
     firstUpdated(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected onKeyDown(e: KeyboardEvent): void;
     protected handleClick(e: Event): void;
 }
 declare global {
@@ -300,13 +321,35 @@ declare global {
         "tk-loading": TkLoading;
     }
 }
-declare class TkNavbar extends TkBox {
+declare class TkNavigationBar extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-navigation-bar": TkNavigationBar;
+    }
+}
+declare class TkNavigationItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    label: string;
+    iconPath: string;
+    activeIconPath: string;
+    active: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-navigation-item": TkNavigationItem;
+    }
+}
+declare class TkTopbar extends TkBox {
     static get styles(): import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "tk-navbar": TkNavbar;
+        "tk-topbar": TkTopbar;
     }
 }
 interface NotieOptions {
@@ -497,7 +540,7 @@ declare global {
 }
 declare class TkTabGroup extends LitElement {
     static styles: import("lit").CSSResult;
-    circle: boolean;
+    secondary: boolean;
     observe: string;
     selected: string;
     private $underline;
@@ -514,15 +557,6 @@ declare global {
         "tk-tab-group": TkTabGroup;
     }
 }
-declare class TkTag extends LitElement {
-    static styles: import("lit").CSSResult;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "tk-tag": TkTag;
-    }
-}
 declare class TkTextarea extends LitElement {
     static styles: import("lit").CSSResult;
     private _id;
@@ -589,28 +623,23 @@ declare global {
 declare class TkTheme extends LitElement {
     static styles: import("lit").CSSResult;
     primary: string;
-    onPrimary: string;
-    accent: string;
-    onAccent: string;
-    shade: string;
-    onShade: string;
+    secondary: string;
+    tertiary: string;
     error: string;
-    onError: string;
-    foreground: string;
-    background: string;
+    neutral: string;
+    neutralVariant: string;
     forceBody: boolean;
     inverted: boolean;
+    private primary_hsl;
+    private secondary_hsl;
+    private tertiary_hsl;
+    private error_hsl;
+    private neutral_hsl;
+    private neutral_variant_hsl;
     render(): import("lit-html").TemplateResult<1>;
-    updated(): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private setTheme;
-    private setThemeFontSize;
-    turnThemeToInverted(): void;
-    turnThemeToNonInverted(): void;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     private hexToHSL;
     private setThemeColor;
-    private setBodyStyle;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -627,5 +656,5 @@ declare global {
         "tk-tooltip": TkTooltip;
     }
 }
-export { TkAccordion, TkBadge, TkBox, TkButton, TkCheckbox, TkDialog, TkDrawer, TkForm, TkIcon, TkIcons, TkListItem, TkLoading, TkNavbar, NotieOptions, NotieForceOptions, NotieConfirmOptions, NotieInputOptions, NotieLevel, TkNotie, TkPages, TkRadio, TkSelect, TkSlider, TkSwitch, TkTabGroup, TkTag, TkTextarea, TkTextfield, TkTheme, TkTooltip };
+export { TkAccordion, TkBadge, TkBox, TkButton, TkCheckbox, TkChip, TkDialog, TkDrawer, TkForm, TkIcon, TkIcons, TkListItem, TkLoading, TkNavigationBar, TkNavigationItem, TkTopbar, NotieOptions, NotieForceOptions, NotieConfirmOptions, NotieInputOptions, NotieLevel, TkNotie, TkPages, TkRadio, TkSelect, TkSlider, TkSwitch, TkTabGroup, TkTextarea, TkTextfield, TkTheme, TkTooltip };
 //# sourceMappingURL=tinkiet.min.d.ts.map