tinkiet 0.9.12 → 0.10.0

package/button/button.scss.js

@@ -1,4 +0,0 @@
-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;flex-shrink:0;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:var(--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;flex-shrink:0;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:var(--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.js

@@ -1,89 +0,0 @@
-import { __decorate } from 'tslib';
-import { LitElement, html, css, unsafeCSS } from 'lit';
-import { property, query, customElement } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import '../box/index.js';
-import { uniqueID } from '../utils/unique.js';
-import css_248z from './checkbox.scss.js';
-
-let TkCheckbox = class TkCheckbox extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._id = uniqueID();
-        this.checked = false;
-        this.disabled = false;
-    }
-    render() {
-        return html `
-			<tk-box direction="row" align-items="center">
-				<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
-				id=${this._id}
-				slot="none"
-				style="display: none;"
-				?checked=${this.checked}
-				type="checkbox"
-				name="${ifDefined(this.name)}"
-				value="${ifDefined(this.value)}"
-				aria-hidden="true"
-				tabindex="-1"
-			/>
-		`;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener("click", this.handleClick.bind(this));
-        this.addEventListener("keydown", this.onKeyDown.bind(this));
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener("click", this.handleClick);
-        this.removeEventListener("keydown", this.onKeyDown);
-    }
-    firstUpdated() {
-        this.appendChild(this.$input);
-    }
-    onKeyDown(e) {
-        if (e.code === "Space" || e.code === "Enter") {
-            e.preventDefault();
-            e.stopPropagation();
-            this.click();
-        }
-    }
-    handleClick() {
-        this.checked = !this.checked;
-        setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
-    }
-};
-TkCheckbox.styles = css `
-		${unsafeCSS(css_248z)}
-	`;
-__decorate([
-    property({ attribute: true, type: String })
-], TkCheckbox.prototype, "name", void 0);
-__decorate([
-    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);
-TkCheckbox = __decorate([
-    customElement("tk-checkbox")
-], TkCheckbox);
-
-export { TkCheckbox };

package/checkbox/checkbox.scss.js

@@ -1,4 +0,0 @@
-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/chip/chip.js

@@ -1,20 +0,0 @@
-import { __decorate } from 'tslib';
-import { LitElement, html, css, unsafeCSS } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import css_248z from './chip.scss.js';
-
-let TkChip = class TkChip extends LitElement {
-    render() {
-        return html `
-			<div class="chip"><slot></slot></div>
-		`;
-    }
-};
-TkChip.styles = css `
-		${unsafeCSS(css_248z)}
-	`;
-TkChip = __decorate([
-    customElement("tk-chip")
-], TkChip);
-
-export { TkChip };

package/chip/chip.scss.js

@@ -1,4 +0,0 @@
-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);--text:var(--on-primary);background:var(--color);box-sizing:border-box;color:var(--text);display:flex;flex-grow:1;height:var(--navbar-height,48px);justify-content:space-between;padding:var(--navbar-padding,var(--spacing-s,.5rem));position:relative;transition:var(--nav-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));z-index:var(--navbar-z-index,100)}:host([inverted]){--color:var(--on-primary);--text:var(--primary)}:host([fixed]){left:0;position:fixed;top:0;width:100%}:host([shadow]){box-shadow:var(--nav-elevation,0 1px 3px 0 #0000004d,0 4px 8px 3px #00000026)}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){align-items:center;display:flex;height:100%}#title,::slotted([slot=title]){font-size:var(--nav-title-font-size,var(--font-size-l,1.25rem));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{--color:var(--primary);--text:var(--on-primary);background:var(--color);box-sizing:border-box;color:var(--text);display:flex;flex-grow:1;height:var(--navbar-height,48px);justify-content:space-between;padding:var(--navbar-padding,var(--spacing-s,.5rem));position:relative;transition:var(--nav-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));z-index:var(--navbar-z-index,100)}:host([inverted]){--color:var(--on-primary);--text:var(--primary)}:host([fixed]){left:0;position:fixed;top:0;width:100%}:host([shadow]){box-shadow:var(--nav-elevation,0 1px 3px 0 #0000004d,0 4px 8px 3px #00000026)}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){align-items:center;display:flex;height:100%}#title,::slotted([slot=title]){font-size:var(--nav-title-font-size,var(--font-size-l,1.25rem));margin:var(--nav-title-margin,0 0 0 var(--spacing-l,1.25rem))}";
-
-export { css_248z as default, stylesheet };

package/dialog/dialog.js

@@ -1,59 +0,0 @@
-import { __decorate } from 'tslib';
-import { LitElement, html, css, unsafeCSS } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import css_248z from './dialog.scss.js';
-
-let TkDialog = class TkDialog extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.modal = false;
-        this.open = false;
-        this.blurOverlay = false;
-    }
-    render() {
-        return html `
-			${this.open
-            ? html `
-						<div class="overlay ${this.blurOverlay ? "blur" : ""}" @click=${() => (this.modal ? null : this.hide())}></div>
-						<div class="container">
-							<slot></slot>
-						</div>
-				  `
-            : ""}
-		`;
-    }
-    updated(_changedProperties) {
-        if (_changedProperties.has("open") && this.open)
-            this.dispatchEvent(new Event("did-show"));
-        if (_changedProperties.has("open") && _changedProperties.get("open") == true && !this.open)
-            this.dispatchEvent(new Event("did-close"));
-    }
-    show() {
-        this.open = true;
-        return new Promise(resolve => {
-            this.resolve = resolve;
-        });
-    }
-    hide(value = null) {
-        this.open = false;
-        if (this.resolve)
-            this.resolve(value);
-    }
-};
-TkDialog.styles = css `
-		${unsafeCSS(css_248z)}
-	`;
-__decorate([
-    property({ type: Boolean, attribute: true })
-], TkDialog.prototype, "modal", void 0);
-__decorate([
-    property({ type: Boolean, attribute: true, reflect: true })
-], TkDialog.prototype, "open", void 0);
-__decorate([
-    property({ type: Boolean, attribute: "blur-overlay" })
-], TkDialog.prototype, "blurOverlay", void 0);
-TkDialog = __decorate([
-    customElement("tk-dialog")
-], TkDialog);
-
-export { TkDialog };

package/dialog/dialog.scss.js

@@ -1,4 +0,0 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:none;outline:none;position:relative}:host([open]){display:block;height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--dialog-z-index,300)}:host([open]) .overlay{background-color:#00000080;bottom:0;left:0;position:absolute;right:0;top:0}:host([open]) .overlay.blur{backdrop-filter:blur(2px)}:host([open]) .container{animation:fade-in .3s forwards;height:100%;margin:0;max-height:100%;max-width:100%;overflow-y:auto;overscroll-behavior:contain;position:fixed;width:fit-content;will-change:transform,opacity}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (max-width:400px){:host([open]) .container{padding:.1rem}}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:none;outline:none;position:relative}:host([open]){display:block;height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--dialog-z-index,300)}:host([open]) .overlay{background-color:#00000080;bottom:0;left:0;position:absolute;right:0;top:0}:host([open]) .overlay.blur{backdrop-filter:blur(2px)}:host([open]) .container{animation:fade-in .3s forwards;height:100%;margin:0;max-height:100%;max-width:100%;overflow-y:auto;overscroll-behavior:contain;position:fixed;width:fit-content;will-change:transform,opacity}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (max-width:400px){:host([open]) .container{padding:.1rem}}";
-
-export { css_248z as default, stylesheet };

package/drawer/drawer.js

@@ -1,168 +0,0 @@
-import { __decorate } from 'tslib';
-import { LitElement, html, css, unsafeCSS } from 'lit';
-import { property, query, eventOptions, customElement } from 'lit/decorators.js';
-import css_248z from './drawer.scss.js';
-
-let TkDrawer = class TkDrawer extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._open = false;
-        this.over = false;
-        this.right = false;
-        this.swipeable = false;
-        this.swipeX = 0;
-        this.swipeY = 0;
-        this.isHorizontalSwipe = false;
-    }
-    set open(value) {
-        if (value === this._open)
-            return;
-        const oldValue = this._open;
-        this._open = value;
-        this.requestUpdate("open", oldValue);
-        if (this._open)
-            this.dispatchEvent(new Event("did-show"));
-        if (!this._open)
-            this.dispatchEvent(new Event("did-close"));
-    }
-    get open() {
-        return this._open;
-    }
-    render() {
-        return html `
-			<div class="container">
-				<slot name="drawer-container"></slot>
-			</div>
-			<div class="overlay" @click=${() => (this.open = false)}></div>
-			<div class="drawer" @touchstart=${this.touchStart} @touchmove=${this.touchMove} @touchend=${this.touchEnd}>
-				<div class="drawer-header">
-					<slot name="drawer-header"></slot>
-				</div>
-				<div class="drawer-content">
-					<slot name="drawer-content"></slot>
-				</div>
-				<div class="drawer-footer">
-					<slot name="drawer-footer"></slot>
-				</div>
-				<div class="drawer-swipe"></div>
-			</div>
-			
-		`;
-    }
-    updated(props) {
-        if (props.has("overQuery"))
-            this.overMediaQuery();
-        if (props.has("openQuery")) {
-            if (window.matchMedia(this.openQuery).matches)
-                this.show();
-        }
-        if (props.has("open") && this.swipeable) {
-            requestAnimationFrame(_ => {
-                this.$drawer.removeAttribute('style');
-            });
-        }
-    }
-    overMediaQuery() {
-        if (this.mql)
-            this.mql.removeEventListener("change", this.overMediaQueryListener.bind(this));
-        this.mql = window.matchMedia(this.overQuery);
-        this.mql.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
-        this.mql.addEventListener("change", this.overMediaQueryListener.bind(this));
-    }
-    overMediaQueryListener(e) {
-        e.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
-    }
-    hideIfOver() {
-        var _a;
-        if ((this.overQuery && ((_a = this.mql) === null || _a === void 0 ? void 0 : _a.matches)) || this.over)
-            this.open = false;
-    }
-    show() {
-        this.open = true;
-    }
-    hide() {
-        this.open = false;
-    }
-    toggle() {
-        this.open = !this.open;
-    }
-    touchStart(event) {
-        if (!this.swipeable)
-            return;
-        this.$drawer.style.transition = "transform 0ms ease";
-        this.swipeX = event.touches[0].clientX;
-        this.swipeY = event.touches[0].clientY;
-    }
-    touchMove(event) {
-        if (!this.swipeable)
-            return;
-        const deltaX = event.touches[0].clientX - this.swipeX;
-        const deltaY = event.touches[0].clientY - this.swipeY;
-        this.isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY);
-        if (!this.isHorizontalSwipe)
-            return;
-        var x = this.open ?
-            deltaX > 0 ? 0 : deltaX :
-            deltaX < 0 ? 0 : deltaX;
-        var transformString;
-        this.open ?
-            transformString = "translateX(" + x + "px)" :
-            transformString = `translateX(min(calc(-100% + 10px + ${x}px), 0px)`;
-        requestAnimationFrame(_ => {
-            this.$drawer.style.transform = transformString;
-        });
-    }
-    touchEnd(event) {
-        if (!this.swipeable)
-            return;
-        requestAnimationFrame(_ => {
-            this.$drawer.removeAttribute('style');
-        });
-        const deltaX = event.changedTouches[0].clientX - this.swipeX;
-        if (this.isHorizontalSwipe && this.open)
-            this.open = -50 > deltaX ? false : true;
-        else if (this.isHorizontalSwipe && !this.open) {
-            console.log("bbb", deltaX, 50 < Math.abs(deltaX) ? true : false);
-            this.open = 50 < deltaX ? true : false;
-        }
-        this.isHorizontalSwipe = false;
-    }
-};
-TkDrawer.styles = css `
-		${unsafeCSS(css_248z)}
-	`;
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TkDrawer.prototype, "open", null);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TkDrawer.prototype, "over", void 0);
-__decorate([
-    property({ type: String, attribute: "open-query" })
-], TkDrawer.prototype, "openQuery", void 0);
-__decorate([
-    property({ type: String, attribute: "over-query" })
-], TkDrawer.prototype, "overQuery", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TkDrawer.prototype, "right", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TkDrawer.prototype, "swipeable", void 0);
-__decorate([
-    query("div.drawer")
-], TkDrawer.prototype, "$drawer", void 0);
-__decorate([
-    eventOptions({ passive: true })
-], TkDrawer.prototype, "touchStart", null);
-__decorate([
-    eventOptions({ passive: true })
-], TkDrawer.prototype, "touchMove", null);
-__decorate([
-    eventOptions({ passive: true })
-], TkDrawer.prototype, "touchEnd", null);
-TkDrawer = __decorate([
-    customElement("tk-drawer")
-], TkDrawer);
-
-export { TkDrawer };

package/drawer/drawer.scss.js

@@ -1,4 +0,0 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{background-color:hsl(var(--surface));display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:hsl(var(--surface));bottom:0;display:grid;grid-template-areas:\"header swipe\" \"content swipe\" \"footer swipe\";grid-template-columns:var(--drawer-width,256px) 10px;grid-template-rows:auto 1fr auto;position:absolute;top:0;touch-action:pan-y;transform:translateX(calc(-100% + 10px));transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-header{grid-area:header}.drawer .drawer-content{grid-area:content;overflow:auto}.drawer .drawer-footer{grid-area:footer}.drawer .drawer-swipe{background-color:initial;grid-area:swipe}:host([right]) .drawer{right:0;transform:translateX(calc(100% + 10px))}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{height:100%;overflow:auto;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width,256px)}:host([open][over]) .drawer{background-color:hsl(var(--surface-container-low));box-shadow:0 1px 2px 0 #0000004d,0 1px 3px 1px #00000026}:host([open][over]) .container{padding-left:0}:host([open][over]) .overlay{display:block}@media (max-width:var(--drawer-trigger-width,400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{background-color:hsl(var(--surface));display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:hsl(var(--surface));bottom:0;display:grid;grid-template-areas:\"header swipe\" \"content swipe\" \"footer swipe\";grid-template-columns:var(--drawer-width,256px) 10px;grid-template-rows:auto 1fr auto;position:absolute;top:0;touch-action:pan-y;transform:translateX(calc(-100% + 10px));transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-header{grid-area:header}.drawer .drawer-content{grid-area:content;overflow:auto}.drawer .drawer-footer{grid-area:footer}.drawer .drawer-swipe{background-color:initial;grid-area:swipe}:host([right]) .drawer{right:0;transform:translateX(calc(100% + 10px))}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{height:100%;overflow:auto;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width,256px)}:host([open][over]) .drawer{background-color:hsl(var(--surface-container-low));box-shadow:0 1px 2px 0 #0000004d,0 1px 3px 1px #00000026}:host([open][over]) .container{padding-left:0}:host([open][over]) .overlay{display:block}@media (max-width:var(--drawer-trigger-width,400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}";
-
-export { css_248z as default, stylesheet };

package/form/form.js

@@ -1,54 +0,0 @@
-import { __decorate } from 'tslib';
-import { LitElement } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-
-let TkForm = class TkForm extends LitElement {
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener("submit", this.submit);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener("submit", this.submit);
-    }
-    submit(e) {
-        e.preventDefault();
-        const result = this.getFormDataAsObject();
-        this.dispatchEvent(new CustomEvent("fulfill", { detail: result }));
-    }
-    getFormDataAsObject() {
-        const $form = this.querySelector("form");
-        const result = {};
-        const data = new FormData($form);
-        data.forEach((value, key) => {
-            var _a;
-            const $inputElement = this.querySelector(`[name=${key}]`);
-            if ($inputElement.tagName == "TK-SLIDER") {
-                value = Number(value);
-            }
-            if ($inputElement.tagName == "TK-CHECKBOX" && (value == "on" || value == "true")) {
-                value = true;
-            }
-            if ($inputElement.tagName == "TK-RADIO" && (value == "on" || value == "true")) {
-                value = true;
-            }
-            if (key.indexOf("-") > 0) {
-                const _ks = key.split("-");
-                result[_ks[0]] = (_a = result[_ks[0]]) !== null && _a !== void 0 ? _a : {};
-                result[_ks[0]][_ks[1]] = value;
-            }
-            else {
-                result[key] = value;
-            }
-        });
-        return result;
-    }
-};
-__decorate([
-    property()
-], TkForm.prototype, "value", void 0);
-TkForm = __decorate([
-    customElement("tk-form")
-], TkForm);
-
-export { TkForm };

package/icon/icon.js

@@ -1,77 +0,0 @@
-import { __awaiter, __decorate } from 'tslib';
-import { css, unsafeCSS, html } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import '../box/index.js';
-import css_248z from './icon.scss.js';
-import { TkBox } from '../box/box.js';
-
-let TkIcon = class TkIcon extends TkBox {
-    constructor() {
-        super(...arguments);
-        this.svg = "";
-    }
-    static get styles() {
-        return [
-            ...TkBox.styles,
-            css `
-				${unsafeCSS(css_248z)}
-			`
-        ];
-    }
-    render() {
-        return html `
-			${this.path
-            ? html `
-						<svg viewBox="0 0 24 24"><path d="${this.path}"></path></svg>
-				  `
-            : html `
-						${unsafeHTML(this.svg)}
-				  `}
-		`;
-    }
-    updated(props) {
-        if (props.has("name") && this.name)
-            this.loadIcon();
-    }
-    loadIcon() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const resolver = this.library
-                ? document.querySelector(`tk-icons[library=${this.library}]`)
-                : document.querySelector("tk-icons");
-            if (resolver) {
-                this.svg = yield fetch(resolver.resolve(this.name))
-                    .then(response => {
-                    return response.blob().then(blob => {
-                        return {
-                            contentType: response.headers.get("Content-Type"),
-                            raw: blob
-                        };
-                    });
-                })
-                    .then(data => {
-                    if (data.contentType && /svg/.test(data.contentType))
-                        return data.raw.text();
-                    return "";
-                });
-            }
-        });
-    }
-};
-__decorate([
-    property()
-], TkIcon.prototype, "name", void 0);
-__decorate([
-    property()
-], TkIcon.prototype, "library", void 0);
-__decorate([
-    property()
-], TkIcon.prototype, "path", void 0);
-__decorate([
-    property()
-], TkIcon.prototype, "svg", void 0);
-TkIcon = __decorate([
-    customElement("tk-icon")
-], TkIcon);
-
-export { TkIcon };

package/icon/icon.scss.js

@@ -1,4 +0,0 @@
-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-icon-color,currentColor);display:inline-flex;flex-shrink:0;height:1.5em;width:1.5em}:host svg{fill:var(--color);display:block;height:100%;width: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-icon-color,currentColor);display:inline-flex;flex-shrink:0;height:1.5em;width:1.5em}:host svg{fill:var(--color);display:block;height:100%;width:100%}";
-
-export { css_248z as default, stylesheet };

package/icon/icons.js

@@ -1,24 +0,0 @@
-import { __decorate } from 'tslib';
-import { LitElement } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-
-let TkIcons = class TkIcons extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.library = "default";
-    }
-    firstUpdated() {
-        window.document.body.appendChild(this);
-    }
-};
-__decorate([
-    property({ attribute: false })
-], TkIcons.prototype, "resolve", void 0);
-__decorate([
-    property({ reflect: true })
-], TkIcons.prototype, "library", void 0);
-TkIcons = __decorate([
-    customElement("tk-icons")
-], TkIcons);
-
-export { TkIcons };

package/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../tinkiet/index.ts"],"names":[],"mappings":"AAAA,qCAA4B;AAC5B,iCAAwB;AACxB,+BAAsB;AACtB,kCAAyB;AACzB,oCAA2B;AAC3B,gCAAuB;AACvB,kCAAyB;AACzB,kCAAyB;AACzB,gCAAuB;AACvB,gCAAuB;AACvB,qCAA4B;AAC5B,mCAA0B;AAC1B,sCAA6B;AAC7B,kCAAyB;AACzB,iCAAwB;AACxB,iCAAwB;AACxB,iCAAwB;AACxB,kCAAyB;AACzB,kCAAyB;AACzB,kCAAyB;AACzB,qCAA4B;AAC5B,oCAA2B;AAC3B,qCAA4B;AAC5B,iCAAwB;AACxB,mCAA0B"}

package/list-item/list-item.js

@@ -1,86 +0,0 @@
-import { __decorate } from 'tslib';
-import { css, unsafeCSS, html } from 'lit';
-import { property, query, customElement } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { TkBox } from '../box/box.js';
-import css_248z from './list-item.scss.js';
-
-let TkListItem = class TkListItem extends TkBox {
-    static get styles() {
-        return [
-            ...TkBox.styles,
-            css `
-				${unsafeCSS(css_248z)}
-			`
-        ];
-    }
-    render() {
-        return html `
-			<slot name="before" @click=${this.handleClick}></slot>
-			<div id="content">
-				<slot></slot>
-			</div>
-			<slot name="after" @click=${this.handleClick}></slot>
-			${this.href
-            ? html `
-						<a tabindex="-1" id="ahref" href="${this.href}" target=${ifDefined(this.target)} rel="noreferrer" aria-label=${this.ariaLabel}></a>
-				  `
-            : ""}
-		`;
-    }
-    constructor() {
-        super();
-        this.href = "";
-        this.target = "";
-    }
-    firstUpdated() {
-        if (!this.ariaLabel && this.innerText)
-            this.ariaLabel = this.innerText;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener("keydown", this.onKeyDown.bind(this));
-        this.addEventListener("click", this.handleClick.bind(this));
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener("click", this.handleClick);
-        this.removeEventListener("keydown", this.onKeyDown);
-    }
-    onKeyDown(e) {
-        if (e.code === "Space" || e.code === "Enter") {
-            e.preventDefault();
-            e.stopPropagation();
-            this.click();
-        }
-    }
-    handleClick(e) {
-        const target = e.target;
-        // In case click cames from a slotted element with href attribute we stop propagation
-        if (target.tagName == "BUTTON" || target.tagName == "TK-BUTTON" || target.tagName == "TK-SWITCH" || target.tagName == "TK-CHECKBOX") {
-            return;
-        }
-        if (this.href && e.isTrusted) {
-            e.stopPropagation();
-            e.preventDefault();
-            this.$ahref.click();
-        }
-    }
-};
-__decorate([
-    property({ attribute: true })
-], TkListItem.prototype, "href", void 0);
-__decorate([
-    property({ attribute: true })
-], TkListItem.prototype, "target", void 0);
-__decorate([
-    property({ attribute: "aria-label" })
-], TkListItem.prototype, "ariaLabel", void 0);
-__decorate([
-    query("#ahref")
-], TkListItem.prototype, "$ahref", void 0);
-TkListItem = __decorate([
-    customElement("tk-list-item")
-], TkListItem);
-
-export { TkListItem };

package/list-item/list-item.scss.js

@@ -1,4 +0,0 @@
-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:28px;color:hsl(var(--on-surface-variant));display:flex;flex-direction:row;height:56px;outline:none;overflow:hidden;padding:0 24px 0 16px;position:relative;text-align:left}:host([clickable]),:host([href]){user-select:none}:host([clickable]:not([active]):not([disabled])),:host([href]:not([active]):not([disabled])){cursor:pointer}:host(:focus),:host(:hover){background-color:hsla(var(--on-surface),.08);color:hsl(var(--on-surface));will-change:background,color}:host([active]){background-color:hsla(var(--secondary-container),1);color:hsl(var(--on-secondary-container))}:host([active]:focus),:host([active]:hover){background-color:hsla(var(--secondary-container),1);color:hsl(var(--on-secondary-container))}:host([disabled]){background:hsla(var(--surface-container-highest),.12);color:hsl(var(--on-surface-variant));opacity:.4;pointer-events:none}::slotted([slot=after]),::slotted([slot=before]){flex-shrink:0}::slotted([slot=before]){align-self:var(--list-item-left-align-self,center);margin:0 var(--spacing-m,1rem) 0 0}::slotted([slot=after]){align-self:var(--list-item-left-align-self,center);margin:0 0 0 var(--spacing-m,1rem)}#content{display:flex;flex-direction:column;flex-grow:1;max-width:100%}";
-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:28px;color:hsl(var(--on-surface-variant));display:flex;flex-direction:row;height:56px;outline:none;overflow:hidden;padding:0 24px 0 16px;position:relative;text-align:left}:host([clickable]),:host([href]){user-select:none}:host([clickable]:not([active]):not([disabled])),:host([href]:not([active]):not([disabled])){cursor:pointer}:host(:focus),:host(:hover){background-color:hsla(var(--on-surface),.08);color:hsl(var(--on-surface));will-change:background,color}:host([active]){background-color:hsla(var(--secondary-container),1);color:hsl(var(--on-secondary-container))}:host([active]:focus),:host([active]:hover){background-color:hsla(var(--secondary-container),1);color:hsl(var(--on-secondary-container))}:host([disabled]){background:hsla(var(--surface-container-highest),.12);color:hsl(var(--on-surface-variant));opacity:.4;pointer-events:none}::slotted([slot=after]),::slotted([slot=before]){flex-shrink:0}::slotted([slot=before]){align-self:var(--list-item-left-align-self,center);margin:0 var(--spacing-m,1rem) 0 0}::slotted([slot=after]){align-self:var(--list-item-left-align-self,center);margin:0 0 0 var(--spacing-m,1rem)}#content{display:flex;flex-direction:column;flex-grow:1;max-width:100%}";
-
-export { css_248z as default, stylesheet };