tinkiet 0.9.12 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (144) hide show
  1. package/accordion/accordion.d.ts +3 -4
  2. package/accordion/index.d.ts +1 -1
  3. package/accordion/index.js +491 -1
  4. package/badge/badge.d.ts +2 -3
  5. package/badge/index.d.ts +1 -1
  6. package/badge/index.js +134 -1
  7. package/box/box.d.ts +3 -3
  8. package/box/focusable-box.d.ts +2 -3
  9. package/box/index.d.ts +1 -1
  10. package/box/index.js +289 -1
  11. package/button/button.d.ts +3 -4
  12. package/button/index.d.ts +1 -1
  13. package/button/index.js +502 -1
  14. package/checkbox/checkbox.d.ts +3 -3
  15. package/checkbox/index.d.ts +1 -1
  16. package/checkbox/index.js +450 -1
  17. package/chip/chip.d.ts +2 -3
  18. package/chip/index.d.ts +1 -1
  19. package/chip/index.js +123 -1
  20. package/dialog/dialog.d.ts +2 -3
  21. package/dialog/index.d.ts +1 -1
  22. package/dialog/index.js +162 -1
  23. package/drawer/drawer.d.ts +2 -3
  24. package/drawer/index.d.ts +1 -1
  25. package/drawer/index.js +272 -1
  26. package/form/form.d.ts +1 -2
  27. package/form/index.d.ts +1 -1
  28. package/form/index.js +149 -1
  29. package/icon/icon.d.ts +3 -4
  30. package/icon/icons.d.ts +1 -2
  31. package/icon/index.d.ts +2 -2
  32. package/icon/index.js +457 -2
  33. package/index.d.ts +52 -26
  34. package/index.js +3682 -52
  35. package/list-item/index.d.ts +1 -1
  36. package/list-item/index.js +414 -1
  37. package/list-item/list-item.d.ts +3 -4
  38. package/loading/index.d.ts +1 -1
  39. package/loading/index.js +389 -1
  40. package/loading/loading.d.ts +3 -4
  41. package/navigation/index.d.ts +2 -2
  42. package/navigation/index.js +201 -2
  43. package/navigation/navigation-bar.d.ts +2 -3
  44. package/navigation/navigation-item.d.ts +2 -3
  45. package/notie/index.d.ts +1 -1
  46. package/notie/index.js +744 -1
  47. package/notie/notie.d.ts +12 -11
  48. package/package.json +8 -5
  49. package/pages/index.d.ts +1 -1
  50. package/pages/index.js +178 -1
  51. package/pages/pages.d.ts +2 -3
  52. package/radio/index.d.ts +1 -1
  53. package/radio/index.js +466 -1
  54. package/radio/radio.d.ts +3 -3
  55. package/select/index.d.ts +1 -1
  56. package/select/index.js +493 -1
  57. package/select/select.d.ts +3 -3
  58. package/slider/index.d.ts +1 -1
  59. package/slider/index.js +274 -1
  60. package/slider/slider.d.ts +2 -3
  61. package/snackbar/index.d.ts +1 -0
  62. package/snackbar/snackbar.d.ts +34 -0
  63. package/switch/index.d.ts +1 -1
  64. package/switch/index.js +462 -1
  65. package/switch/switch.d.ts +3 -3
  66. package/tab-group/index.d.ts +1 -1
  67. package/tab-group/index.js +182 -1
  68. package/tab-group/tab-group.d.ts +2 -3
  69. package/tab-group/tab-item.d.ts +7 -0
  70. package/textarea/index.d.ts +1 -1
  71. package/textarea/index.js +272 -1
  72. package/textarea/textarea.d.ts +2 -3
  73. package/textfield/index.d.ts +1 -1
  74. package/textfield/index.js +278 -1
  75. package/textfield/textfield.d.ts +2 -3
  76. package/theme/index.d.ts +1 -1
  77. package/theme/index.js +240 -1
  78. package/theme/theme.d.ts +2 -3
  79. package/tooltip/index.d.ts +1 -1
  80. package/tooltip/index.js +136 -1
  81. package/tooltip/tooltip.d.ts +2 -3
  82. package/topbar/index.d.ts +1 -1
  83. package/topbar/index.js +358 -1
  84. package/topbar/topbar.d.ts +3 -4
  85. package/umd/tinkiet.min.js +420 -1
  86. package/utils/aria.d.ts +11 -0
  87. package/utils/unique.d.ts +1 -2
  88. package/accordion/accordion.js +0 -94
  89. package/accordion/accordion.scss.js +0 -4
  90. package/badge/badge.js +0 -31
  91. package/badge/badge.scss.js +0 -4
  92. package/box/box.js +0 -186
  93. package/box/box.scss.js +0 -4
  94. package/box/focusable-box.js +0 -30
  95. package/button/button.js +0 -141
  96. package/button/button.scss.js +0 -4
  97. package/checkbox/checkbox.js +0 -89
  98. package/checkbox/checkbox.scss.js +0 -4
  99. package/chip/chip.js +0 -20
  100. package/chip/chip.scss.js +0 -4
  101. package/dialog/dialog.js +0 -59
  102. package/dialog/dialog.scss.js +0 -4
  103. package/drawer/drawer.js +0 -168
  104. package/drawer/drawer.scss.js +0 -4
  105. package/form/form.js +0 -54
  106. package/icon/icon.js +0 -77
  107. package/icon/icon.scss.js +0 -4
  108. package/icon/icons.js +0 -24
  109. package/index.d.ts.map +0 -1
  110. package/list-item/list-item.js +0 -86
  111. package/list-item/list-item.scss.js +0 -4
  112. package/loading/loading.js +0 -61
  113. package/loading/loading.scss.js +0 -4
  114. package/navigation/navigation-bar.js +0 -20
  115. package/navigation/navigation-bar.scss.js +0 -4
  116. package/navigation/navigation-item.js +0 -51
  117. package/navigation/navigation-item.scss.js +0 -4
  118. package/notie/notie.js +0 -201
  119. package/notie/notie.scss.js +0 -4
  120. package/pages/pages.js +0 -75
  121. package/pages/pages.scss.js +0 -4
  122. package/radio/radio.js +0 -105
  123. package/radio/radio.scss.js +0 -4
  124. package/select/select.js +0 -132
  125. package/select/select.scss.js +0 -4
  126. package/slider/slider.js +0 -135
  127. package/slider/slider.scss.js +0 -4
  128. package/switch/switch.js +0 -101
  129. package/switch/switch.scss.js +0 -4
  130. package/tab-group/tab-group.js +0 -79
  131. package/tab-group/tab-group.scss.js +0 -4
  132. package/textarea/textarea.js +0 -133
  133. package/textarea/textarea.scss.js +0 -4
  134. package/textfield/textfield.js +0 -138
  135. package/textfield/textfield.scss.js +0 -4
  136. package/theme/theme.js +0 -137
  137. package/theme/theme.scss.js +0 -4
  138. package/tooltip/tooltip.js +0 -33
  139. package/tooltip/tooltip.scss.js +0 -4
  140. package/topbar/topbar.js +0 -33
  141. package/topbar/topbar.scss.js +0 -4
  142. package/umd/tinkiet.min.d.ts +0 -660
  143. package/umd/tinkiet.min.d.ts.map +0 -1
  144. package/utils/unique.js +0 -12
package/badge/index.js CHANGED
@@ -1 +1,134 @@
1
- export { TkBadge } from './badge.js';
1
+ import * as __WEBPACK_EXTERNAL_MODULE_lit__ from "lit";
2
+ import * as __WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__ from "lit/decorators.js";
3
+ /******/ var __webpack_modules__ = ({
4
+
5
+ /***/ 1647:
6
+ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
7
+
8
+
9
+ // EXPORTS
10
+ __webpack_require__.d(__webpack_exports__, {
11
+ d: () => (/* binding */ TkBadge)
12
+ });
13
+
14
+ // EXTERNAL MODULE: external "lit"
15
+ var external_lit_ = __webpack_require__(2927);
16
+ // EXTERNAL MODULE: external "lit/decorators.js"
17
+ var decorators_js_ = __webpack_require__(8899);
18
+ ;// ./tinkiet/badge/badge.scss
19
+ /* harmony default export */ const badge = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{display:inline-flex}:host .badge{background-color:hsl(var(--error));font-family:\"Trebuchet MS\",\"Lucida Sans Unicode\",\"Lucida Grande\",\"Lucida Sans\",Arial,sans-serif;color:hsl(var(--on-error));height:16px;min-width:16px;max-width:34px;border-radius:8px;padding:4px;font-size:10px;line-height:8px;text-align:center;white-space:nowrap;user-select:none;cursor:inherit}:host .badge.empty{height:6px;width:6px;min-width:6px;border-radius:100%}");
20
+ ;// ./tinkiet/badge/badge.ts
21
+ var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
22
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
23
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
24
+ 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;
25
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
26
+ };
27
+
28
+
29
+
30
+ /**
31
+ * A badge WebComponent
32
+ * @cssprop --tk-badge-color - Color of widget default to --primary
33
+ * @cssprop --tk-badge-text-color - Text color of widget to --on-primary
34
+ */
35
+ let TkBadge = class TkBadge extends external_lit_.LitElement {
36
+ static get styles() {
37
+ return (0,external_lit_.css) `
38
+ ${(0,external_lit_.unsafeCSS)(badge)}
39
+ `;
40
+ }
41
+ render() {
42
+ return (0,external_lit_.html) `
43
+ <slot></slot>
44
+ <div class="badge ${this.label ? "" : "empty"}">${this.label}</div>
45
+ `;
46
+ }
47
+ };
48
+ __decorate([
49
+ (0,decorators_js_.property)()
50
+ ], TkBadge.prototype, "label", void 0);
51
+ TkBadge = __decorate([
52
+ (0,decorators_js_.customElement)("tk-badge")
53
+ ], TkBadge);
54
+
55
+
56
+
57
+ /***/ }),
58
+
59
+ /***/ 2927:
60
+ /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
61
+
62
+ var x = (y) => {
63
+ var x = {}; __webpack_require__.d(x, y); return x
64
+ }
65
+ var y = (x) => (() => (x))
66
+ 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) });
67
+
68
+ /***/ }),
69
+
70
+ /***/ 8899:
71
+ /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
72
+
73
+ var x = (y) => {
74
+ var x = {}; __webpack_require__.d(x, y); return x
75
+ }
76
+ var y = (x) => (() => (x))
77
+ module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property) });
78
+
79
+ /***/ })
80
+
81
+ /******/ });
82
+ /************************************************************************/
83
+ /******/ // The module cache
84
+ /******/ var __webpack_module_cache__ = {};
85
+ /******/
86
+ /******/ // The require function
87
+ /******/ function __webpack_require__(moduleId) {
88
+ /******/ // Check if module is in cache
89
+ /******/ var cachedModule = __webpack_module_cache__[moduleId];
90
+ /******/ if (cachedModule !== undefined) {
91
+ /******/ return cachedModule.exports;
92
+ /******/ }
93
+ /******/ // Create a new module (and put it into the cache)
94
+ /******/ var module = __webpack_module_cache__[moduleId] = {
95
+ /******/ // no module.id needed
96
+ /******/ // no module.loaded needed
97
+ /******/ exports: {}
98
+ /******/ };
99
+ /******/
100
+ /******/ // Execute the module function
101
+ /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
102
+ /******/
103
+ /******/ // Return the exports of the module
104
+ /******/ return module.exports;
105
+ /******/ }
106
+ /******/
107
+ /************************************************************************/
108
+ /******/ /* webpack/runtime/define property getters */
109
+ /******/ (() => {
110
+ /******/ // define getter functions for harmony exports
111
+ /******/ __webpack_require__.d = (exports, definition) => {
112
+ /******/ for(var key in definition) {
113
+ /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
114
+ /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
115
+ /******/ }
116
+ /******/ }
117
+ /******/ };
118
+ /******/ })();
119
+ /******/
120
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
121
+ /******/ (() => {
122
+ /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
123
+ /******/ })();
124
+ /******/
125
+ /************************************************************************/
126
+ var __webpack_exports__ = {};
127
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
128
+ /* harmony export */ d: () => (/* reexport safe */ _badge__WEBPACK_IMPORTED_MODULE_0__.d)
129
+ /* harmony export */ });
130
+ /* harmony import */ var _badge__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1647);
131
+
132
+
133
+ const __webpack_exports__TkBadge = __webpack_exports__.d;
134
+ export { __webpack_exports__TkBadge as TkBadge };
package/box/box.d.ts CHANGED
@@ -31,7 +31,7 @@ type Color = typeof colors;
31
31
  * @attr {"true" | "false" | "reverse"} wrap - Whether children can wrap if they can't all fit.
32
32
  * @attr [wrap="false"]
33
33
  */
34
- declare class TkBox extends LitElement {
34
+ export declare class TkBox extends LitElement {
35
35
  static get styles(): import("lit").CSSResult[];
36
36
  /**
37
37
  * Activate ripple
@@ -45,7 +45,7 @@ declare class TkBox extends LitElement {
45
45
  * Set color.
46
46
  */
47
47
  color: Color | "foreground" | "background" | string;
48
- render(): import("lit-html").TemplateResult<1>;
48
+ render(): import("lit").TemplateResult<1>;
49
49
  connectedCallback(): void;
50
50
  disconnectedCallback(): void;
51
51
  updated(props: any): void;
@@ -57,4 +57,4 @@ declare global {
57
57
  "tk-box": TkBox;
58
58
  }
59
59
  }
60
- export { TkBox };
60
+ export {};
@@ -1,5 +1,5 @@
1
- import { TkBox } from "./box.js";
2
- declare class TkFocusableBox extends TkBox {
1
+ import { TkBox } from "./box";
2
+ export declare class TkFocusableBox extends TkBox {
3
3
  /**
4
4
  * Element random id
5
5
  */
@@ -10,4 +10,3 @@ declare class TkFocusableBox extends TkBox {
10
10
  disabled: boolean;
11
11
  updated(props: any): void;
12
12
  }
13
- export { TkFocusableBox };
package/box/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * from "./box.js";
1
+ export * from "./box";
package/box/index.js CHANGED
@@ -1 +1,289 @@
1
- export { TkBox } from './box.js';
1
+ import * as __WEBPACK_EXTERNAL_MODULE_lit__ from "lit";
2
+ import * as __WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__ from "lit/decorators.js";
3
+ /******/ var __webpack_modules__ = ({
4
+
5
+ /***/ 2788:
6
+ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
7
+
8
+
9
+ // EXPORTS
10
+ __webpack_require__.d(__webpack_exports__, {
11
+ P: () => (/* binding */ TkBox)
12
+ });
13
+
14
+ // EXTERNAL MODULE: external "lit"
15
+ var external_lit_ = __webpack_require__(2927);
16
+ // EXTERNAL MODULE: external "lit/decorators.js"
17
+ var decorators_js_ = __webpack_require__(8899);
18
+ ;// ./tinkiet/box/box.scss
19
+ /* harmony default export */ const box = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{display:flex;position:relative;flex-direction:column;box-sizing:border-box}:host([hidden]){display:none}.ripple{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none}.ripple span{position:absolute;border-radius:50%;background-color:hsla(var(--on-primary), 0.5)}:host([align-content=start]){align-content:flex-start}:host([align-content=end]){align-content:flex-end}:host([align-content=stretch]){align-content:stretch}:host([align-content=center]){align-content:center}:host([align-content=around]){align-content:space-around}:host([align-content=between]){align-content:space-between}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([align-items=stretch]){align-items:stretch}:host([align-items=center]){align-items:center}:host([align-items=baseline]){align-items:baseline}:host([align-self=start]){align-self:flex-start}:host([align-self=end]){align-self:flex-end}:host([align-self=stretch]){align-self:stretch}:host([align-self=center]){align-self:center}:host([background=primary]){background-color:hsl(var(--primary))}:host([color=primary]){color:hsl(var(--primary))}:host([background=on-primary]){background-color:hsl(var(--on-primary))}:host([color=on-primary]){color:hsl(var(--on-primary))}:host([background=secondary]){background-color:hsl(var(--secondary))}:host([color=secondary]){color:hsl(var(--secondary))}:host([background=on-secondary]){background-color:hsl(var(--on-secondary))}:host([color=on-secondary]){color:hsl(var(--on-secondary))}:host([background=tertiary]){background-color:hsl(var(--tertiary))}:host([color=tertiary]){color:hsl(var(--tertiary))}:host([background=on-tertiary]){background-color:hsl(var(--on-tertiary))}:host([color=on-tertiary]){color:hsl(var(--on-tertiary))}:host([background=neutral]){background-color:hsl(var(--neutral))}:host([color=neutral]){color:hsl(var(--neutral))}:host([background=on-neutral]){background-color:hsl(var(--on-neutral))}:host([color=on-neutral]){color:hsl(var(--on-neutral))}:host([background=neutral-variant]){background-color:hsl(var(--neutral-variant))}:host([color=neutral-variant]){color:hsl(var(--neutral-variant))}:host([background=on-neutral-variant]){background-color:hsl(var(--on-neutral-variant))}:host([color=on-neutral-variant]){color:hsl(var(--on-neutral-variant))}:host([background=error]){background-color:hsl(var(--error))}:host([color=error]){color:hsl(var(--error))}:host([background=on-error]){background-color:hsl(var(--on-error))}:host([color=on-error]){color:hsl(var(--on-error))}:host([background=primary-container]){background-color:hsl(var(--primary-container))}:host([color=primary-container]){color:hsl(var(--primary-container))}:host([background=on-primary-container]){background-color:hsl(var(--on-primary-container))}:host([color=on-primary-container]){color:hsl(var(--on-primary-container))}:host([background=secondary-container]){background-color:hsl(var(--secondary-container))}:host([color=secondary-container]){color:hsl(var(--secondary-container))}:host([background=on-secondary-container]){background-color:hsl(var(--on-secondary-container))}:host([color=on-secondary-container]){color:hsl(var(--on-secondary-container))}:host([background=tertiary-container]){background-color:hsl(var(--tertiary-container))}:host([color=tertiary-container]){color:hsl(var(--tertiary-container))}:host([background=on-tertiary-container]){background-color:hsl(var(--on-tertiary-container))}:host([color=on-tertiary-container]){color:hsl(var(--on-tertiary-container))}:host([background=neutral-container]){background-color:hsl(var(--neutral-container))}:host([color=neutral-container]){color:hsl(var(--neutral-container))}:host([background=on-neutral-container]){background-color:hsl(var(--on-neutral-container))}:host([color=on-neutral-container]){color:hsl(var(--on-neutral-container))}:host([background=neutral-variant-container]){background-color:hsl(var(--neutral-variant-container))}:host([color=neutral-variant-container]){color:hsl(var(--neutral-variant-container))}:host([background=on-neutral-variant-container]){background-color:hsl(var(--on-neutral-variant-container))}:host([color=on-neutral-variant-container]){color:hsl(var(--on-neutral-variant-container))}:host([background=error-container]){background-color:hsl(var(--error-container))}:host([color=error-container]){color:hsl(var(--error-container))}:host([background=on-error-container]){background-color:hsl(var(--on-error-container))}:host([color=on-error-container]){color:hsl(var(--on-error-container))}:host([background=primary-0]){background-color:hsl(var(--primary-0))}:host([color=primary-0]){color:hsl(var(--primary-0))}:host([background=surface]){background-color:hsl(var(--surface))}:host([color=surface]){color:hsl(var(--surface))}:host([background=on-surface]){background-color:hsl(var(--on-surface))}:host([color=on-surface]){color:hsl(var(--on-surface))}:host([background=surface-dim]){background-color:hsl(var(--surface-dim))}:host([color=surface-dim]){color:hsl(var(--surface-dim))}:host([background=surface-bright]){background-color:hsl(var(--surface-bright))}:host([color=surface-bright]){color:hsl(var(--surface-bright))}:host([background=surface-container-lowest]){background-color:hsl(var(--surface-container-lowest))}:host([color=surface-container-lowest]){color:hsl(var(--surface-container-lowest))}:host([background=surface-container-low]){background-color:hsl(var(--surface-container-low))}:host([color=surface-container-low]){color:hsl(var(--surface-container-low))}:host([background=surface-container]){background-color:hsl(var(--surface-container))}:host([color=surface-container]){color:hsl(var(--surface-container))}:host([background=surface-container-high]){background-color:hsl(var(--surface-container-high))}:host([color=surface-container-high]){color:hsl(var(--surface-container-high))}:host([background=surface-container-highest]){background-color:hsl(var(--surface-container-highest))}:host([color=surface-container-highest]){color:hsl(var(--surface-container-highest))}:host([background=surface-variant]){background-color:hsl(var(--surface-variant))}:host([color=surface-variant]){color:hsl(var(--surface-variant))}:host([background=on-surface-variant]){background-color:hsl(var(--on-surface-variant))}:host([color=on-surface-variant]){color:hsl(var(--on-surface-variant))}:host([background=outline]){background-color:hsl(var(--outline))}:host([color=outline]){color:hsl(var(--outline))}:host([background=outline-variant]){background-color:hsl(var(--outline-variant))}:host([color=outline-variant]){color:hsl(var(--outline-variant))}:host([background=inverse-surface]){background-color:hsl(var(--inverse-surface))}:host([color=inverse-surface]){color:hsl(var(--inverse-surface))}:host([background=inverse-on-surface]){background-color:hsl(var(--inverse-on-surface))}:host([color=inverse-on-surface]){color:hsl(var(--inverse-on-surface))}:host([background=background]){background-color:hsl(var(--background))}:host([color=background]){color:hsl(var(--background))}:host([background=on-background]){background-color:hsl(var(--on-background))}:host([color=on-background]){color:hsl(var(--on-background))}:host([background=shadow]){background-color:hsl(var(--shadow))}:host([color=shadow]){color:hsl(var(--shadow))}:host([background=primary-10]){background-color:hsl(var(--primary-10))}:host([color=primary-10]){color:hsl(var(--primary-10))}:host([background=primary-20]){background-color:hsl(var(--primary-20))}:host([color=primary-20]){color:hsl(var(--primary-20))}:host([background=primary-30]){background-color:hsl(var(--primary-30))}:host([color=primary-30]){color:hsl(var(--primary-30))}:host([background=primary-40]){background-color:hsl(var(--primary-40))}:host([color=primary-40]){color:hsl(var(--primary-40))}:host([background=primary-50]){background-color:hsl(var(--primary-50))}:host([color=primary-50]){color:hsl(var(--primary-50))}:host([background=primary-60]){background-color:hsl(var(--primary-60))}:host([color=primary-60]){color:hsl(var(--primary-60))}:host([background=primary-70]){background-color:hsl(var(--primary-70))}:host([color=primary-70]){color:hsl(var(--primary-70))}:host([background=primary-80]){background-color:hsl(var(--primary-80))}:host([color=primary-80]){color:hsl(var(--primary-80))}:host([background=primary-90]){background-color:hsl(var(--primary-90))}:host([color=primary-90]){color:hsl(var(--primary-90))}:host([background=primary-95]){background-color:hsl(var(--primary-95))}:host([color=primary-95]){color:hsl(var(--primary-95))}:host([background=primary-99]){background-color:hsl(var(--primary-99))}:host([color=primary-99]){color:hsl(var(--primary-99))}:host([background=primary-100]){background-color:hsl(var(--primary-100))}:host([color=primary-100]){color:hsl(var(--primary-100))}:host([background=secondary-0]){background-color:hsl(var(--secondary-0))}:host([color=secondary-0]){color:hsl(var(--secondary-0))}:host([background=secondary-10]){background-color:hsl(var(--secondary-10))}:host([color=secondary-10]){color:hsl(var(--secondary-10))}:host([background=secondary-20]){background-color:hsl(var(--secondary-20))}:host([color=secondary-20]){color:hsl(var(--secondary-20))}:host([background=secondary-30]){background-color:hsl(var(--secondary-30))}:host([color=secondary-30]){color:hsl(var(--secondary-30))}:host([background=secondary-40]){background-color:hsl(var(--secondary-40))}:host([color=secondary-40]){color:hsl(var(--secondary-40))}:host([background=secondary-50]){background-color:hsl(var(--secondary-50))}:host([color=secondary-50]){color:hsl(var(--secondary-50))}:host([background=secondary-60]){background-color:hsl(var(--secondary-60))}:host([color=secondary-60]){color:hsl(var(--secondary-60))}:host([background=secondary-70]){background-color:hsl(var(--secondary-70))}:host([color=secondary-70]){color:hsl(var(--secondary-70))}:host([background=secondary-80]){background-color:hsl(var(--secondary-80))}:host([color=secondary-80]){color:hsl(var(--secondary-80))}:host([background=secondary-90]){background-color:hsl(var(--secondary-90))}:host([color=secondary-90]){color:hsl(var(--secondary-90))}:host([background=secondary-100]){background-color:hsl(var(--secondary-100))}:host([color=secondary-100]){color:hsl(var(--secondary-100))}:host([background=tertiary-0]){background-color:hsl(var(--tertiary-0))}:host([color=tertiary-0]){color:hsl(var(--tertiary-0))}:host([background=tertiary-10]){background-color:hsl(var(--tertiary-10))}:host([color=tertiary-10]){color:hsl(var(--tertiary-10))}:host([background=tertiary-20]){background-color:hsl(var(--tertiary-20))}:host([color=tertiary-20]){color:hsl(var(--tertiary-20))}:host([background=tertiary-30]){background-color:hsl(var(--tertiary-30))}:host([color=tertiary-30]){color:hsl(var(--tertiary-30))}:host([background=tertiary-40]){background-color:hsl(var(--tertiary-40))}:host([color=tertiary-40]){color:hsl(var(--tertiary-40))}:host([background=tertiary-50]){background-color:hsl(var(--tertiary-50))}:host([color=tertiary-50]){color:hsl(var(--tertiary-50))}:host([background=tertiary-60]){background-color:hsl(var(--tertiary-60))}:host([color=tertiary-60]){color:hsl(var(--tertiary-60))}:host([background=tertiary-70]){background-color:hsl(var(--tertiary-70))}:host([color=tertiary-70]){color:hsl(var(--tertiary-70))}:host([background=tertiary-80]){background-color:hsl(var(--tertiary-80))}:host([color=tertiary-80]){color:hsl(var(--tertiary-80))}:host([background=tertiary-90]){background-color:hsl(var(--tertiary-90))}:host([color=tertiary-90]){color:hsl(var(--tertiary-90))}:host([background=tertiary-100]){background-color:hsl(var(--tertiary-100))}:host([color=tertiary-100]){color:hsl(var(--tertiary-100))}:host([background=neutral-0]){background-color:hsl(var(--neutral-0))}:host([color=neutral-0]){color:hsl(var(--neutral-0))}:host([background=neutral-10]){background-color:hsl(var(--neutral-10))}:host([color=neutral-10]){color:hsl(var(--neutral-10))}:host([background=neutral-20]){background-color:hsl(var(--neutral-20))}:host([color=neutral-20]){color:hsl(var(--neutral-20))}:host([background=neutral-30]){background-color:hsl(var(--neutral-30))}:host([color=neutral-30]){color:hsl(var(--neutral-30))}:host([background=neutral-40]){background-color:hsl(var(--neutral-40))}:host([color=neutral-40]){color:hsl(var(--neutral-40))}:host([background=neutral-50]){background-color:hsl(var(--neutral-50))}:host([color=neutral-50]){color:hsl(var(--neutral-50))}:host([background=neutral-60]){background-color:hsl(var(--neutral-60))}:host([color=neutral-60]){color:hsl(var(--neutral-60))}:host([background=neutral-70]){background-color:hsl(var(--neutral-70))}:host([color=neutral-70]){color:hsl(var(--neutral-70))}:host([background=neutral-80]){background-color:hsl(var(--neutral-80))}:host([color=neutral-80]){color:hsl(var(--neutral-80))}:host([background=neutral-90]){background-color:hsl(var(--neutral-90))}:host([color=neutral-90]){color:hsl(var(--neutral-90))}:host([background=neutral-100]){background-color:hsl(var(--neutral-100))}:host([color=neutral-100]){color:hsl(var(--neutral-100))}:host([background=error-0]){background-color:hsl(var(--error-0))}:host([color=error-0]){color:hsl(var(--error-0))}:host([background=error-10]){background-color:hsl(var(--error-10))}:host([color=error-10]){color:hsl(var(--error-10))}:host([background=error-20]){background-color:hsl(var(--error-20))}:host([color=error-20]){color:hsl(var(--error-20))}:host([background=error-30]){background-color:hsl(var(--error-30))}:host([color=error-30]){color:hsl(var(--error-30))}:host([background=error-40]){background-color:hsl(var(--error-40))}:host([color=error-40]){color:hsl(var(--error-40))}:host([background=error-50]){background-color:hsl(var(--error-50))}:host([color=error-50]){color:hsl(var(--error-50))}:host([background=error-60]){background-color:hsl(var(--error-60))}:host([color=error-60]){color:hsl(var(--error-60))}:host([background=error-70]){background-color:hsl(var(--error-70))}:host([color=error-70]){color:hsl(var(--error-70))}:host([background=error-80]){background-color:hsl(var(--error-80))}:host([color=error-80]){color:hsl(var(--error-80))}:host([background=error-90]){background-color:hsl(var(--error-90))}:host([color=error-90]){color:hsl(var(--error-90))}:host([background=error-100]){background-color:hsl(var(--error-100))}:host([color=error-100]){color:hsl(var(--error-100))}:host([direction=column]){flex-direction:column}:host([direction=row]){flex-direction:row}:host([direction=row-reverse]){flex-direction:row-reverse}:host([direction=column-reverse]){flex-direction:column-reverse}:host([text=center]){text-align:center}:host([text=justify]){text-align:justify}:host([text=left]){text-align:left}:host([text=right]){text-align:right}:host([weight=\"100\"]){font-weight:100}:host([weight=\"200\"]){font-weight:200}:host([weight=\"300\"]){font-weight:300}:host([weight=\"400\"]){font-weight:400}:host([weight=\"500\"]){font-weight:500}:host([weight=\"600\"]){font-weight:600}:host([weight=\"700\"]){font-weight:700}:host([weight=\"800\"]){font-weight:800}:host([weight=\"900\"]){font-weight:900}:host([weight=lighter]){font-weight:lighter}:host([weight=bold]){font-weight:bold}:host([weight=bolder]){font-weight:bolder}:host([direction=row]){flex-direction:row}:host([direction=row-reverse]){flex-direction:row}:host([elevation=\"1\"]){box-shadow:var(--box-elevation, 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15))}:host([elevation=\"2\"]){box-shadow:var(--box-elevation, 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15))}:host([elevation=\"3\"]){box-shadow:var(--box-elevation, 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15))}:host([fill=horizontal]){width:100%}:host([fill=vertical]){height:100%}:host([fill=true]){width:100%;height:100%}:host([flex=grow]){flex:1 0}:host([flex=shrink]){flex:0 1}:host([flex=true]){flex:1 1}:host([flex=false]){flex:0 0}:host([gap=xsmall]) ::slotted(*),:host([gap=xsmall][direction=column]) ::slotted(*){margin:var(--spacing-xs, 0.25rem) 0}:host([gap=xsmall][direction=row]) ::slotted(*){margin:0 var(--spacing-xs, 0.25rem)}:host([margin=xsmall]){margin:var(--box-margin, var(--spacing-xs, 0.25rem))}:host([vmargin=xsmall]){margin-top:var(--box-margin, var(--spacing-xs, 0.25rem));margin-bottom:var(--box-margin, var(--spacing-xs, 0.25rem))}:host([hmargin=xsmall]){margin-left:var(--box-margin, var(--spacing-xs, 0.25rem));margin-right:var(--box-margin, var(--spacing-xs, 0.25rem))}:host([margin=\"xsmall auto\"]){margin:var(--box-margin, var(--spacing-xs, 0.25rem)) auto}:host([margin=\"auto xsmall\"]){margin:auto var(--box-margin, var(--spacing-xs, 0.25rem))}:host([padding=xsmall]){padding:var(--box-padding, var(--spacing-xs, 0.25rem))}:host([vpadding=xsmall]){padding-top:var(--box-padding, var(--spacing-xs, 0.25rem));padding-bottom:var(--box-padding, var(--spacing-xs, 0.25rem))}:host([hpadding=xsmall]){padding-left:var(--box-padding, var(--spacing-xs, 0.25rem));padding-right:var(--box-padding, var(--spacing-xs, 0.25rem))}:host([gap=small]) ::slotted(*),:host([gap=small][direction=column]) ::slotted(*){margin:var(--spacing-s, 0.5rem) 0}:host([gap=small][direction=row]) ::slotted(*){margin:0 var(--spacing-s, 0.5rem)}:host([margin=small]){margin:var(--box-margin, var(--spacing-s, 0.5rem))}:host([vmargin=small]){margin-top:var(--box-margin, var(--spacing-s, 0.5rem));margin-bottom:var(--box-margin, var(--spacing-s, 0.5rem))}:host([hmargin=small]){margin-left:var(--box-margin, var(--spacing-s, 0.5rem));margin-right:var(--box-margin, var(--spacing-s, 0.5rem))}:host([margin=\"small auto\"]){margin:var(--box-margin, var(--spacing-s, 0.5rem)) auto}:host([margin=\"auto small\"]){margin:auto var(--box-margin, var(--spacing-s, 0.5rem))}:host([padding=small]){padding:var(--box-padding, var(--spacing-s, 0.5rem))}:host([vpadding=small]){padding-top:var(--box-padding, var(--spacing-s, 0.5rem));padding-bottom:var(--box-padding, var(--spacing-s, 0.5rem))}:host([hpadding=small]){padding-left:var(--box-padding, var(--spacing-s, 0.5rem));padding-right:var(--box-padding, var(--spacing-s, 0.5rem))}:host([gap=medium]) ::slotted(*),:host([gap=medium][direction=column]) ::slotted(*){margin:var(--spacing-m, 1rem) 0}:host([gap=medium][direction=row]) ::slotted(*){margin:0 var(--spacing-m, 1rem)}:host([margin=medium]){margin:var(--box-margin, var(--spacing-m, 1rem))}:host([vmargin=medium]){margin-top:var(--box-margin, var(--spacing-m, 1rem));margin-bottom:var(--box-margin, var(--spacing-m, 1rem))}:host([hmargin=medium]){margin-left:var(--box-margin, var(--spacing-m, 1rem));margin-right:var(--box-margin, var(--spacing-m, 1rem))}:host([margin=\"medium auto\"]){margin:var(--box-margin, var(--spacing-m, 1rem)) auto}:host([margin=\"auto medium\"]){margin:auto var(--box-margin, var(--spacing-m, 1rem))}:host([padding=medium]){padding:var(--box-padding, var(--spacing-m, 1rem))}:host([vpadding=medium]){padding-top:var(--box-padding, var(--spacing-m, 1rem));padding-bottom:var(--box-padding, var(--spacing-m, 1rem))}:host([hpadding=medium]){padding-left:var(--box-padding, var(--spacing-m, 1rem));padding-right:var(--box-padding, var(--spacing-m, 1rem))}:host([gap=large]) ::slotted(*),:host([gap=large][direction=column]) ::slotted(*){margin:var(--spacing-l, 1.25rem) 0}:host([gap=large][direction=row]) ::slotted(*){margin:0 var(--spacing-l, 1.25rem)}:host([margin=large]){margin:var(--box-margin, var(--spacing-l, 1.25rem))}:host([vmargin=large]){margin-top:var(--box-margin, var(--spacing-l, 1.25rem));margin-bottom:var(--box-margin, var(--spacing-l, 1.25rem))}:host([hmargin=large]){margin-left:var(--box-margin, var(--spacing-l, 1.25rem));margin-right:var(--box-margin, var(--spacing-l, 1.25rem))}:host([margin=\"large auto\"]){margin:var(--box-margin, var(--spacing-l, 1.25rem)) auto}:host([margin=\"auto large\"]){margin:auto var(--box-margin, var(--spacing-l, 1.25rem))}:host([padding=large]){padding:var(--box-padding, var(--spacing-l, 1.25rem))}:host([vpadding=large]){padding-top:var(--box-padding, var(--spacing-l, 1.25rem));padding-bottom:var(--box-padding, var(--spacing-l, 1.25rem))}:host([hpadding=large]){padding-left:var(--box-padding, var(--spacing-l, 1.25rem));padding-right:var(--box-padding, var(--spacing-l, 1.25rem))}:host([gap=xlarge]) ::slotted(*),:host([gap=xlarge][direction=column]) ::slotted(*){margin:var(--spacing-xl, 2rem) 0}:host([gap=xlarge][direction=row]) ::slotted(*){margin:0 var(--spacing-xl, 2rem)}:host([margin=xlarge]){margin:var(--box-margin, var(--spacing-xl, 2rem))}:host([vmargin=xlarge]){margin-top:var(--box-margin, var(--spacing-xl, 2rem));margin-bottom:var(--box-margin, var(--spacing-xl, 2rem))}:host([hmargin=xlarge]){margin-left:var(--box-margin, var(--spacing-xl, 2rem));margin-right:var(--box-margin, var(--spacing-xl, 2rem))}:host([margin=\"xlarge auto\"]){margin:var(--box-margin, var(--spacing-xl, 2rem)) auto}:host([margin=\"auto xlarge\"]){margin:auto var(--box-margin, var(--spacing-xl, 2rem))}:host([padding=xlarge]){padding:var(--box-padding, var(--spacing-xl, 2rem))}:host([vpadding=xlarge]){padding-top:var(--box-padding, var(--spacing-xl, 2rem));padding-bottom:var(--box-padding, var(--spacing-xl, 2rem))}:host([hpadding=xlarge]){padding-left:var(--box-padding, var(--spacing-xl, 2rem));padding-right:var(--box-padding, var(--spacing-xl, 2rem))}:host([font=xsmall]),:host([size=xsmall]){font-size:var(--box-font-size, var(--font-size-xs, 0.625rem))}:host([font=small]),:host([size=small]){font-size:var(--box-font-size, var(--font-size-s, 0.875rem))}:host([font=medium]),:host([size=medium]){font-size:var(--box-font-size, var(--font-size-m, 1rem))}:host([font=large]),:host([size=large]){font-size:var(--box-font-size, var(--font-size-l, 1.25rem))}:host([font=xlarge]),:host([size=xlarge]){font-size:var(--box-font-size, var(--font-size-xl, 1.5rem))}:host([font=xxlarge]),:host([size=xxlarge]){font-size:var(--box-font-size, var(--font-size-xxl, 2.25rem))}:host([justify=start]){justify-content:flex-start}:host([justify=end]){justify-content:flex-end}:host([justify=stretch]){justify-content:stretch}:host([justify=baseline]){justify-content:baseline}:host([justify=center]){justify-content:center}:host([justify=around]){justify-content:space-around}:host([justify=between]){justify-content:space-between}:host([justify=evenly]){justify-content:space-evenly}:host([overflow=auto]){overflow:auto}:host([overflow=hidden]){overflow:hidden}:host([overflow=scroll]){overflow:scroll}:host([overflow=visible]){overflow:visible}:host([radius=none]){border-radius:var(--box-border-radius, 0)}:host([radius=small]){border-radius:var(--box-border-radius, var(--border-radius-small, 0.125rem))}:host([radius=medium]){border-radius:var(--box-border-radius, var(--border-radius-medium, 0.25rem))}:host([radius=large]){border-radius:var(--box-border-radius, var(--border-radius-large, 0.5rem))}:host([radius=xlarge]){border-radius:var(--box-border-radius, var(--border-radius-x-large, 1rem))}:host([radius=circle]){border-radius:var(--box-border-radius, var(--border-radius-circle, 50%))}:host([radius=pill]){border-radius:var(--box-border-radius, var(--border-radius-pill, 9999px))}:host([max-width=xxsmall]){max-width:var(--box-max-width, var(--size-xxs, 2rem))}:host([width=xxsmall]){width:var(--box-width, var(--size-xxs, 2rem))}:host([max-height=xxsmall]){max-height:var(--box-max-height, var(--size-xxs, 2rem))}:host([height=xxsmall]){height:var(--box-height, var(--size-xxs, 2rem))}:host([max-width=xsmall]){max-width:var(--box-max-width, var(--size-xs, 4rem))}:host([width=xsmall]){width:var(--box-width, var(--size-xs, 4rem))}:host([max-height=xsmall]){max-height:var(--box-max-height, var(--size-xs, 4rem))}:host([height=xsmall]){height:var(--box-height, var(--size-xs, 4rem))}:host([max-width=small]){max-width:var(--box-max-width, var(--size-s, 8rem))}:host([width=small]){width:var(--box-width, var(--size-s, 8rem))}:host([max-height=small]){max-height:var(--box-max-height, var(--size-s, 8rem))}:host([height=small]){height:var(--box-height, var(--size-s, 8rem))}:host([max-width=medium]){max-width:var(--box-max-width, var(--size-m, 16rem))}:host([width=medium]){width:var(--box-width, var(--size-m, 16rem))}:host([max-height=medium]){max-height:var(--box-max-height, var(--size-m, 16rem))}:host([height=medium]){height:var(--box-height, var(--size-m, 16rem))}:host([max-width=large]){max-width:var(--box-max-width, var(--size-l, 32rem))}:host([width=large]){width:var(--box-width, var(--size-l, 32rem))}:host([max-height=large]){max-height:var(--box-max-height, var(--size-l, 32rem))}:host([height=large]){height:var(--box-height, var(--size-l, 32rem))}:host([max-width=xlarge]){max-width:var(--box-max-width, var(--size-xl, 48rem))}:host([width=xlarge]){width:var(--box-width, var(--size-xl, 48rem))}:host([max-height=xlarge]){max-height:var(--box-max-height, var(--size-xl, 48rem))}:host([height=xlarge]){height:var(--box-height, var(--size-xl, 48rem))}:host([max-width=xxlarge]){max-width:var(--box-max-width, var(--size-xxl, 64rem))}:host([width=xxlarge]){width:var(--box-width, var(--size-xxl, 64rem))}:host([max-height=xxlarge]){max-height:var(--box-max-height, var(--size-xxl, 64rem))}:host([height=xxlarge]){height:var(--box-height, var(--size-xxl, 64rem))}:host([wrap=true]){flex-wrap:wrap}:host([wrap=reverse]){flex-wrap:wrap-reverse}");
20
+ ;// ./tinkiet/box/box.ts
21
+ var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
22
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
23
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
24
+ 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;
25
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
26
+ };
27
+
28
+
29
+
30
+ const colors = (/* unused pure expression or super */ null && ([
31
+ "primary-lighter",
32
+ "primary-light",
33
+ "primary",
34
+ "primary-dark",
35
+ "primary-darker",
36
+ "on-primary-lighter",
37
+ "on-primary-light",
38
+ "on-primary",
39
+ "on-primary-dark",
40
+ "on-primary-darker",
41
+ "accent-lighter",
42
+ "accent-light",
43
+ "accent",
44
+ "accent-dark",
45
+ "accent-darker",
46
+ "on-accent-lighter",
47
+ "on-accent-light",
48
+ "on-accent",
49
+ "on-accent-dark",
50
+ "on-accent-darker",
51
+ "error-lighter",
52
+ "error-light",
53
+ "error",
54
+ "error-dark",
55
+ "error-darker",
56
+ "on-error-lighter",
57
+ "on-error-light",
58
+ "on-error",
59
+ "on-error-dark",
60
+ "on-error-darker",
61
+ "shade-lighter",
62
+ "shade-light",
63
+ "shade",
64
+ "shade-dark",
65
+ "shade-darker",
66
+ "on-shade-lighter",
67
+ "on-shade-light",
68
+ "on-shade",
69
+ "on-shade-dark",
70
+ "on-shade-darker"
71
+ ]));
72
+ /**
73
+ * A container that lays out its contents in one direction
74
+ *
75
+ * @attr {"none" | "small" | "medium" | "large" | "xlarge" | "circle" | "pill" } radius - border radius
76
+ * @attr {"around" | "between" | "center" | "end" | "start" | "stretch"} align-content - How to align the contents when there is extra space in the cross axis.
77
+ * @attr [align-content="stretch"]
78
+ * @attr {"baseline" | "center" | "end" | "start" | "stretch"} align-items - How to align the contents along the cross axis.
79
+ * @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.
80
+ * @attr {"row" | "column"} direction - The orientation to layout the child components in.
81
+ * @attr [direction="column"]
82
+ * @attr {1|2|3} elevation - Elevated height above the underlying context, indicated via a drop shadow.
83
+ * @attr {"horizontal" | "vertical" | "true" | "false"} fill - Whether the width and/or height should fill the container.
84
+ * @attr {"grow" | "shrink" | "true" | "false"} flex - flex-grow and/or flex-shrink
85
+ * @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.
86
+ * @attr {"around" | "between" | "center" | "end" | "evenly" | "start" | "stretch"} justify - How to align the contents along the main axis.
87
+ * @attr [justify="stretch"]
88
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} margin - The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.
89
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} vmargin - The amount of vertical margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.
90
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} hmargin - The amount of horizontal margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.
91
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} padding - The amount of padding around the box contents. An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side of the box.
92
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} vpadding - The amount of vertical padding around the box contents. An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side of the box.
93
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} hpadding - The amount of horizontal padding around the box contents. An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side of the box.
94
+ * @attr {"center" | "justify" | "left" | "right"} text - Text align
95
+ * @attr {"xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge"} width - A fixed width.
96
+ * @attr {"xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge"} height - A fixed height.
97
+ * @attr {"auto" | "hidden" | "scroll" | "visible"} overflow - box overflow.
98
+ * @attr { "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "lighter" | "bold" | "bolder"} weight - Font weight.
99
+ * @attr {"true" | "false" | "reverse"} wrap - Whether children can wrap if they can't all fit.
100
+ * @attr [wrap="false"]
101
+ */
102
+ let TkBox = class TkBox extends external_lit_.LitElement {
103
+ constructor() {
104
+ super(...arguments);
105
+ /**
106
+ * Activate ripple
107
+ */
108
+ this.ripple = false;
109
+ }
110
+ static get styles() {
111
+ return [
112
+ (0,external_lit_.css) `
113
+ ${(0,external_lit_.unsafeCSS)(box)}
114
+ `
115
+ ];
116
+ }
117
+ render() {
118
+ return (0,external_lit_.html) `
119
+ <slot></slot>
120
+ `;
121
+ }
122
+ connectedCallback() {
123
+ if (this.ripple) {
124
+ this.addEventListener("mousedown", this.showRipple.bind(this), { passive: true });
125
+ this.addEventListener("mouseup", this.hideRipple.bind(this), { passive: true });
126
+ }
127
+ super.connectedCallback();
128
+ }
129
+ disconnectedCallback() {
130
+ this.removeEventListener("mousedown", this.showRipple);
131
+ this.addEventListener("mouseup", this.hideRipple);
132
+ super.disconnectedCallback();
133
+ }
134
+ updated(props) {
135
+ // if (props.has("background") && ![...colors, "background", "foreground"].includes(this.background as string))
136
+ // this.style.setProperty("background-color", this.background.toString());
137
+ // if (props.has("color") && ![...colors, "background", "foreground"].includes(this.color as string))
138
+ // this.style.setProperty("color", this.color.toString());
139
+ super.updated(props);
140
+ }
141
+ showRipple(event) {
142
+ const x = event.clientX;
143
+ const y = event.clientY;
144
+ const { offsetWidth, offsetHeight } = this;
145
+ const container = document.createElement("span");
146
+ container.classList.add("ripple", "open");
147
+ const element = document.createElement("span");
148
+ container.appendChild(element);
149
+ this.shadowRoot.appendChild(container);
150
+ const rect = this.getBoundingClientRect();
151
+ const diameter = Math.max(offsetWidth, offsetWidth) * 2;
152
+ element.style.width = element.style.height = diameter + "px";
153
+ element.style.left = x - rect.left - diameter / 2 + "px";
154
+ element.style.top = y - rect.top - diameter / 2 + "px";
155
+ const inAnimation = element.animate({
156
+ transform: [`scale(0)`, `scale(1)`]
157
+ }, {
158
+ easing: "ease-out",
159
+ fill: "both",
160
+ duration: 500
161
+ });
162
+ inAnimation.onfinish = () => {
163
+ container.classList.remove("open");
164
+ const outAnimation = element.animate({
165
+ opacity: ["0.5", "0"]
166
+ }, {
167
+ easing: "ease-in",
168
+ fill: "both",
169
+ duration: 300
170
+ });
171
+ outAnimation.onfinish = () => {
172
+ requestAnimationFrame(() => {
173
+ container.remove();
174
+ });
175
+ };
176
+ };
177
+ }
178
+ hideRipple(event) {
179
+ var _a;
180
+ (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".ripple:not([open])").forEach(container => {
181
+ const element = container.querySelector("span");
182
+ const outAnimation = element.animate({
183
+ opacity: ["0.5", "0"]
184
+ }, {
185
+ easing: "ease-out",
186
+ fill: "both",
187
+ duration: 300
188
+ });
189
+ outAnimation.onfinish = () => {
190
+ requestAnimationFrame(() => {
191
+ container.remove();
192
+ });
193
+ };
194
+ });
195
+ }
196
+ };
197
+ __decorate([
198
+ (0,decorators_js_.property)({ type: Boolean })
199
+ ], TkBox.prototype, "ripple", void 0);
200
+ __decorate([
201
+ (0,decorators_js_.property)()
202
+ ], TkBox.prototype, "background", void 0);
203
+ __decorate([
204
+ (0,decorators_js_.property)()
205
+ ], TkBox.prototype, "color", void 0);
206
+ TkBox = __decorate([
207
+ (0,decorators_js_.customElement)("tk-box")
208
+ ], TkBox);
209
+
210
+
211
+
212
+ /***/ }),
213
+
214
+ /***/ 2927:
215
+ /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
216
+
217
+ var x = (y) => {
218
+ var x = {}; __webpack_require__.d(x, y); return x
219
+ }
220
+ var y = (x) => (() => (x))
221
+ 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) });
222
+
223
+ /***/ }),
224
+
225
+ /***/ 8899:
226
+ /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
227
+
228
+ var x = (y) => {
229
+ var x = {}; __webpack_require__.d(x, y); return x
230
+ }
231
+ var y = (x) => (() => (x))
232
+ module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property) });
233
+
234
+ /***/ })
235
+
236
+ /******/ });
237
+ /************************************************************************/
238
+ /******/ // The module cache
239
+ /******/ var __webpack_module_cache__ = {};
240
+ /******/
241
+ /******/ // The require function
242
+ /******/ function __webpack_require__(moduleId) {
243
+ /******/ // Check if module is in cache
244
+ /******/ var cachedModule = __webpack_module_cache__[moduleId];
245
+ /******/ if (cachedModule !== undefined) {
246
+ /******/ return cachedModule.exports;
247
+ /******/ }
248
+ /******/ // Create a new module (and put it into the cache)
249
+ /******/ var module = __webpack_module_cache__[moduleId] = {
250
+ /******/ // no module.id needed
251
+ /******/ // no module.loaded needed
252
+ /******/ exports: {}
253
+ /******/ };
254
+ /******/
255
+ /******/ // Execute the module function
256
+ /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
257
+ /******/
258
+ /******/ // Return the exports of the module
259
+ /******/ return module.exports;
260
+ /******/ }
261
+ /******/
262
+ /************************************************************************/
263
+ /******/ /* webpack/runtime/define property getters */
264
+ /******/ (() => {
265
+ /******/ // define getter functions for harmony exports
266
+ /******/ __webpack_require__.d = (exports, definition) => {
267
+ /******/ for(var key in definition) {
268
+ /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
269
+ /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
270
+ /******/ }
271
+ /******/ }
272
+ /******/ };
273
+ /******/ })();
274
+ /******/
275
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
276
+ /******/ (() => {
277
+ /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
278
+ /******/ })();
279
+ /******/
280
+ /************************************************************************/
281
+ var __webpack_exports__ = {};
282
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
283
+ /* harmony export */ P: () => (/* reexport safe */ _box__WEBPACK_IMPORTED_MODULE_0__.P)
284
+ /* harmony export */ });
285
+ /* harmony import */ var _box__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2788);
286
+
287
+
288
+ const __webpack_exports__TkBox = __webpack_exports__.P;
289
+ export { __webpack_exports__TkBox as TkBox };
@@ -1,4 +1,4 @@
1
- import { TkBox } from "../box/index.js";
1
+ import { TkBox } from "../box";
2
2
  /**
3
3
  * A button web component
4
4
  *
@@ -14,7 +14,7 @@ import { TkBox } from "../box/index.js";
14
14
  * @attr {Boolean} ripple - display ripple when active
15
15
  * @attr {Boolean} small - mini button
16
16
  */
17
- declare class TkButton extends TkBox {
17
+ export declare class TkButton extends TkBox {
18
18
  static get styles(): import("lit").CSSResult[];
19
19
  private _id;
20
20
  href: string | null;
@@ -26,7 +26,7 @@ declare class TkButton extends TkBox {
26
26
  ripple: boolean;
27
27
  protected $ahref: HTMLAnchorElement;
28
28
  protected $button: HTMLButtonElement;
29
- render(): import("lit-html").TemplateResult<1>;
29
+ render(): import("lit").TemplateResult<1>;
30
30
  connectedCallback(): void;
31
31
  disconnectedCallback(): void;
32
32
  updated(props: any): void;
@@ -40,4 +40,3 @@ declare global {
40
40
  "tk-button": TkButton;
41
41
  }
42
42
  }
43
- export { TkButton };
package/button/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * from "./button.js";
1
+ export * from "./button";