tinkiet 0.9.14 → 0.10.1

package/chip/index.js

@@ -1 +1,168 @@
-export { TkChip } from './chip.js';
+import * as __WEBPACK_EXTERNAL_MODULE_lit__ from "lit";
+import * as __WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__ from "lit/decorators.js";
+/******/ var __webpack_modules__ = ({
+
+/***/ 2927:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["LitElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.LitElement), ["css"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.css), ["html"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.html), ["unsafeCSS"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.unsafeCSS) });
+
+/***/ }),
+
+/***/ 3309:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  i: () => (/* binding */ TkChip)
+});
+
+// EXTERNAL MODULE: external "lit"
+var external_lit_ = __webpack_require__(2927);
+// EXTERNAL MODULE: external "lit/decorators.js"
+var decorators_js_ = __webpack_require__(8899);
+;// ./tinkiet/chip/chip.scss
+/* harmony default export */ const chip = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}.chip{display:inline-flex;align-items:center;border-radius:16px;padding:4px 12px;background:hsl(var(--surface-container-highest));border:1px solid hsl(var(--outline-variant));font-size:14px;height:32px;gap:8px;cursor:pointer}.chip.disabled{opacity:.4;pointer-events:none}.chip .leading{display:inline-flex;align-items:center}.chip .label{white-space:nowrap}.chip .trailing{display:inline-flex;align-items:center}.chip .trailing .remove{background:none;border:none;cursor:pointer;font-size:14px;opacity:.7}.chip .trailing .remove:hover{opacity:1}");
+;// ./tinkiet/chip/chip.ts
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+
+
+/**
+ * Material-style Chip component.
+ *
+ * Slots :
+ *   • default <slot> → label text
+ *   • <slot name="leading"> → leading icon / image
+ *   • <slot name="trailing"> → trailing icon (remove / action)
+ *
+ * Attributes :
+ *   • removable (boolean) → affiche un trailing icon automatique (ex: bouton X)
+ *   • disabled (boolean)
+ */
+let TkChip = class TkChip extends external_lit_.LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.removable = false;
+    }
+    onRemove() {
+        this.dispatchEvent(new CustomEvent("remove", { bubbles: true, composed: true }));
+    }
+    render() {
+        return (0,external_lit_.html) `
+      <div class="chip ${this.disabled ? "disabled" : ""}">
+        
+        <!-- 3. LEADING ICON (optional) -->
+        <span class="leading">
+          <slot name="leading"></slot>
+        </span>
+
+        <!-- 2. LABEL TEXT -->
+        <span class="label">
+          <slot></slot>
+        </span>
+
+        <!-- 4. TRAILING ICON -->
+        <span class="trailing">
+          <slot name="trailing">
+            ${this.removable
+            ? (0,external_lit_.html) `<button class="remove" @click=${this.onRemove}>✕</button>`
+            : ""}
+          </slot>
+        </span>
+
+      </div>
+    `;
+    }
+};
+TkChip.styles = (0,external_lit_.css) `${(0,external_lit_.unsafeCSS)(chip)}`;
+__decorate([
+    (0,decorators_js_.property)({ type: Boolean })
+], TkChip.prototype, "disabled", void 0);
+__decorate([
+    (0,decorators_js_.property)({ type: Boolean })
+], TkChip.prototype, "removable", void 0);
+TkChip = __decorate([
+    (0,decorators_js_.customElement)("tk-chip")
+], TkChip);
+
+
+
+/***/ }),
+
+/***/ 8899:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property) });
+
+/***/ })
+
+/******/ });
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/ 
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ 	// Check if module is in cache
+/******/ 	var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 	if (cachedModule !== undefined) {
+/******/ 		return cachedModule.exports;
+/******/ 	}
+/******/ 	// Create a new module (and put it into the cache)
+/******/ 	var module = __webpack_module_cache__[moduleId] = {
+/******/ 		// no module.id needed
+/******/ 		// no module.loaded needed
+/******/ 		exports: {}
+/******/ 	};
+/******/ 
+/******/ 	// Execute the module function
+/******/ 	__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 
+/******/ 	// Return the exports of the module
+/******/ 	return module.exports;
+/******/ }
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__webpack_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/************************************************************************/
+var __webpack_exports__ = {};
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   i: () => (/* reexport safe */ _chip__WEBPACK_IMPORTED_MODULE_0__.i)
+/* harmony export */ });
+/* harmony import */ var _chip__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3309);
+
+
+const __webpack_exports__TkChip = __webpack_exports__.i;
+export { __webpack_exports__TkChip as TkChip };

package/dialog/dialog.d.ts

@@ -1,11 +1,11 @@
 import { CSSResultGroup, LitElement, PropertyValueMap } from "lit";
-declare class TkDialog extends LitElement {
+export declare class TkDialog extends LitElement {
     static styles: CSSResultGroup;
     modal: boolean;
     open: boolean;
     blurOverlay: boolean;
     private resolve;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     show(): Promise<string | boolean | null>;
     hide(value?: boolean | string | null): void;
@@ -15,4 +15,3 @@ declare global {
         "tk-dialog": TkDialog;
     }
 }
-export { TkDialog };

package/dialog/index.d.ts

@@ -1 +1 @@
-export * from "./dialog.js";
+export * from "./dialog";

package/dialog/index.js

@@ -1 +1,162 @@
-export { TkDialog } from './dialog.js';
+import * as __WEBPACK_EXTERNAL_MODULE_lit__ from "lit";
+import * as __WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__ from "lit/decorators.js";
+/******/ var __webpack_modules__ = ({
+
+/***/ 2927:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["LitElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.LitElement), ["css"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.css), ["html"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.html), ["unsafeCSS"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.unsafeCSS) });
+
+/***/ }),
+
+/***/ 8899:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property) });
+
+/***/ }),
+
+/***/ 9203:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  o: () => (/* binding */ TkDialog)
+});
+
+// EXTERNAL MODULE: external "lit"
+var external_lit_ = __webpack_require__(2927);
+// EXTERNAL MODULE: external "lit/decorators.js"
+var decorators_js_ = __webpack_require__(8899);
+;// ./tinkiet/dialog/dialog.scss
+/* harmony default export */ const dialog = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{display:none;position:relative;outline:none}:host([open]){display:block;z-index:var(--dialog-z-index, 300);position:fixed;top:0;left:0;width:100%;height:100%}:host([open]) .overlay{background-color:rgba(0,0,0,.5);position:absolute;top:0;left:0;bottom:0;right:0}:host([open]) .overlay.blur{backdrop-filter:blur(2px)}:host([open]) .container{animation:fade-in .3s forwards;position:fixed;margin:0;max-width:100%;height:100%;max-height:100%;width:fit-content;will-change:transform,opacity;overflow-y:auto;overscroll-behavior:contain}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@media(max-width: 400px){:host([open]) .container{padding:.1rem}}");
+;// ./tinkiet/dialog/dialog.ts
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+
+
+let TkDialog = class TkDialog extends external_lit_.LitElement {
+    constructor() {
+        super(...arguments);
+        this.modal = false;
+        this.open = false;
+        this.blurOverlay = false;
+    }
+    render() {
+        return (0,external_lit_.html) `
+			${this.open
+            ? (0,external_lit_.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 = (0,external_lit_.css) `
+		${(0,external_lit_.unsafeCSS)(dialog)}
+	`;
+__decorate([
+    (0,decorators_js_.property)({ type: Boolean, attribute: true })
+], TkDialog.prototype, "modal", void 0);
+__decorate([
+    (0,decorators_js_.property)({ type: Boolean, attribute: true, reflect: true })
+], TkDialog.prototype, "open", void 0);
+__decorate([
+    (0,decorators_js_.property)({ type: Boolean, attribute: "blur-overlay" })
+], TkDialog.prototype, "blurOverlay", void 0);
+TkDialog = __decorate([
+    (0,decorators_js_.customElement)("tk-dialog")
+], TkDialog);
+
+
+
+/***/ })
+
+/******/ });
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/ 
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ 	// Check if module is in cache
+/******/ 	var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 	if (cachedModule !== undefined) {
+/******/ 		return cachedModule.exports;
+/******/ 	}
+/******/ 	// Create a new module (and put it into the cache)
+/******/ 	var module = __webpack_module_cache__[moduleId] = {
+/******/ 		// no module.id needed
+/******/ 		// no module.loaded needed
+/******/ 		exports: {}
+/******/ 	};
+/******/ 
+/******/ 	// Execute the module function
+/******/ 	__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 
+/******/ 	// Return the exports of the module
+/******/ 	return module.exports;
+/******/ }
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__webpack_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/************************************************************************/
+var __webpack_exports__ = {};
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   o: () => (/* reexport safe */ _dialog__WEBPACK_IMPORTED_MODULE_0__.o)
+/* harmony export */ });
+/* harmony import */ var _dialog__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9203);
+
+
+const __webpack_exports__TkDialog = __webpack_exports__.o;
+export { __webpack_exports__TkDialog as TkDialog };

package/drawer/drawer.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from "lit";
-declare class TkDrawer extends LitElement {
+export declare class TkDrawer extends LitElement {
     static styles: import("lit").CSSResult;
     _open: boolean;
     set open(value: boolean);
@@ -11,7 +11,7 @@ declare class TkDrawer extends LitElement {
     swipeable: boolean;
     private $drawer;
     private mql;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     updated(props: any): void;
     protected overMediaQuery(): void;
     private overMediaQueryListener;
@@ -31,4 +31,3 @@ declare global {
         "tk-drawer": TkDrawer;
     }
 }
-export { TkDrawer };

package/drawer/index.d.ts

@@ -1 +1 @@
-export * from "./drawer.js";
+export * from "./drawer";

package/drawer/index.js

@@ -1 +1,272 @@
-export { TkDrawer } from './drawer.js';
+import * as __WEBPACK_EXTERNAL_MODULE_lit__ from "lit";
+import * as __WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__ from "lit/decorators.js";
+/******/ var __webpack_modules__ = ({
+
+/***/ 2927:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["LitElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.LitElement), ["css"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.css), ["html"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.html), ["unsafeCSS"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.unsafeCSS) });
+
+/***/ }),
+
+/***/ 5603:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  l: () => (/* binding */ TkDrawer)
+});
+
+// EXTERNAL MODULE: external "lit"
+var external_lit_ = __webpack_require__(2927);
+// EXTERNAL MODULE: external "lit/decorators.js"
+var decorators_js_ = __webpack_require__(8899);
+;// ./tinkiet/drawer/drawer.scss
+/* harmony default export */ const drawer = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{display:block;height:100%;width:100%;position:relative;overflow:hidden;background-color:hsl(var(--surface))}.drawer{display:grid;grid-template-columns:var(--drawer-width, 256px) 10px;grid-template-rows:auto 1fr auto;grid-template-areas:\"header swipe\" \"content swipe\" \"footer swipe\";position:absolute;top:0;bottom:0;transform:translateX(calc(-100% + 10px));transition:transform cubic-bezier(0.4, 0, 0.2, 1) var(--transition-duration-medium, 180ms);will-change:transform;touch-action:pan-y;z-index:var(--drawer-z-index, 200);background-color:hsl(var(--surface))}.drawer .drawer-header{grid-area:header}.drawer .drawer-content{grid-area:content;overflow:auto}.drawer .drawer-footer{grid-area:footer}.drawer .drawer-swipe{grid-area:swipe;background-color:rgba(0,0,0,0)}:host([right]) .drawer{right:0;transform:translateX(calc(100% + 10px))}.overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:var(--drawer-overlay-z-index, 200);background-color:rgba(0,0,0,.5);display:none}.container{transition:padding cubic-bezier(0.4, 0, 0.2, 1) var(--transition-duration-slow, 250ms);overflow:auto;height:100%}: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:0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)}: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}}");
+;// ./tinkiet/drawer/drawer.ts
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+
+
+
+let TkDrawer = class TkDrawer extends external_lit_.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 (0,external_lit_.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 = (0,external_lit_.css) `
+		${(0,external_lit_.unsafeCSS)(drawer)}
+	`;
+__decorate([
+    (0,decorators_js_.property)({ type: Boolean, reflect: true })
+], TkDrawer.prototype, "open", null);
+__decorate([
+    (0,decorators_js_.property)({ type: Boolean, reflect: true })
+], TkDrawer.prototype, "over", void 0);
+__decorate([
+    (0,decorators_js_.property)({ type: String, attribute: "open-query" })
+], TkDrawer.prototype, "openQuery", void 0);
+__decorate([
+    (0,decorators_js_.property)({ type: String, attribute: "over-query" })
+], TkDrawer.prototype, "overQuery", void 0);
+__decorate([
+    (0,decorators_js_.property)({ type: Boolean, reflect: true })
+], TkDrawer.prototype, "right", void 0);
+__decorate([
+    (0,decorators_js_.property)({ type: Boolean, reflect: true })
+], TkDrawer.prototype, "swipeable", void 0);
+__decorate([
+    (0,decorators_js_.query)("div.drawer")
+], TkDrawer.prototype, "$drawer", void 0);
+__decorate([
+    (0,decorators_js_.eventOptions)({ passive: true })
+], TkDrawer.prototype, "touchStart", null);
+__decorate([
+    (0,decorators_js_.eventOptions)({ passive: true })
+], TkDrawer.prototype, "touchMove", null);
+__decorate([
+    (0,decorators_js_.eventOptions)({ passive: true })
+], TkDrawer.prototype, "touchEnd", null);
+TkDrawer = __decorate([
+    (0,decorators_js_.customElement)("tk-drawer")
+], TkDrawer);
+
+
+
+/***/ }),
+
+/***/ 8899:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["eventOptions"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.eventOptions), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property), ["query"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.query) });
+
+/***/ })
+
+/******/ });
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/ 
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ 	// Check if module is in cache
+/******/ 	var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 	if (cachedModule !== undefined) {
+/******/ 		return cachedModule.exports;
+/******/ 	}
+/******/ 	// Create a new module (and put it into the cache)
+/******/ 	var module = __webpack_module_cache__[moduleId] = {
+/******/ 		// no module.id needed
+/******/ 		// no module.loaded needed
+/******/ 		exports: {}
+/******/ 	};
+/******/ 
+/******/ 	// Execute the module function
+/******/ 	__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 
+/******/ 	// Return the exports of the module
+/******/ 	return module.exports;
+/******/ }
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__webpack_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/************************************************************************/
+var __webpack_exports__ = {};
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   l: () => (/* reexport safe */ _drawer__WEBPACK_IMPORTED_MODULE_0__.l)
+/* harmony export */ });
+/* harmony import */ var _drawer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5603);
+
+
+const __webpack_exports__TkDrawer = __webpack_exports__.l;
+export { __webpack_exports__TkDrawer as TkDrawer };

package/form/form.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from "lit";
-declare class TkForm extends LitElement {
+export declare class TkForm extends LitElement {
     value: any;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -11,4 +11,3 @@ declare global {
         "tk-form": TkForm;
     }
 }
-export { TkForm };

package/form/index.d.ts

@@ -1 +1 @@
-export { TkForm } from "./form.js";
+export { TkForm } from "./form";