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/tooltip/index.js CHANGED
@@ -1 +1,136 @@
1
- export { TkTooltip } from './tooltip.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
+ /***/ 93:
6
+ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
7
+
8
+
9
+ // EXPORTS
10
+ __webpack_require__.d(__webpack_exports__, {
11
+ Z: () => (/* binding */ TkTooltip)
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/tooltip/tooltip.scss
19
+ /* harmony default export */ const tooltip = (".container{position:relative;display:inline-block}.container .tooltip{visibility:hidden;background-color:#555;color:#fff;text-align:center;border-radius:6px;padding:.4em;position:absolute;z-index:var(--notie-z-index, 400);opacity:0;transition:opacity .3s}.container .tooltip.top{top:0;right:50%;transform:translateX(50%) translateY(calc(-100% - 5px))}.container .tooltip.top::after{content:\"\";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#555 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)}.container .tooltip.right{right:0;top:50%;transform:translateX(calc(100% + 5px)) translateY(-50%)}.container .tooltip.right::after{content:\"\";position:absolute;top:50%;right:100%;margin-top:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,0) #555 rgba(0,0,0,0) rgba(0,0,0,0)}.container .tooltip.bottom{bottom:0;right:50%;transform:translateX(50%) translateY(calc(100% + 5px))}.container .tooltip.bottom::after{content:\"\";position:absolute;bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #555 rgba(0,0,0,0)}.container .tooltip.left{left:0;top:50%;transform:translateX(calc(-100% - 5px)) translateY(-50%)}.container .tooltip.left::after{content:\"\";position:absolute;top:50%;left:100%;margin-top:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #555}.container:hover .tooltip{visibility:visible;opacity:1}");
20
+ ;// ./tinkiet/tooltip/tooltip.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
+ let TkTooltip = class TkTooltip extends external_lit_.LitElement {
31
+ constructor() {
32
+ super(...arguments);
33
+ this.position = "top";
34
+ }
35
+ render() {
36
+ return (0,external_lit_.html) `
37
+ <div class="container">
38
+ <slot></slot>
39
+ <div class="tooltip ${this.position}">
40
+ <slot name="tooltip"></slot>
41
+ </div>
42
+ </div>
43
+
44
+ `;
45
+ }
46
+ };
47
+ TkTooltip.styles = (0,external_lit_.css) `
48
+ ${(0,external_lit_.unsafeCSS)(tooltip)}
49
+ `;
50
+ __decorate([
51
+ (0,decorators_js_.property)({ attribute: true, type: String })
52
+ ], TkTooltip.prototype, "position", void 0);
53
+ TkTooltip = __decorate([
54
+ (0,decorators_js_.customElement)("tk-tooltip")
55
+ ], TkTooltip);
56
+
57
+
58
+
59
+ /***/ }),
60
+
61
+ /***/ 2927:
62
+ /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
63
+
64
+ var x = (y) => {
65
+ var x = {}; __webpack_require__.d(x, y); return x
66
+ }
67
+ var y = (x) => (() => (x))
68
+ 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) });
69
+
70
+ /***/ }),
71
+
72
+ /***/ 8899:
73
+ /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
74
+
75
+ var x = (y) => {
76
+ var x = {}; __webpack_require__.d(x, y); return x
77
+ }
78
+ var y = (x) => (() => (x))
79
+ module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property) });
80
+
81
+ /***/ })
82
+
83
+ /******/ });
84
+ /************************************************************************/
85
+ /******/ // The module cache
86
+ /******/ var __webpack_module_cache__ = {};
87
+ /******/
88
+ /******/ // The require function
89
+ /******/ function __webpack_require__(moduleId) {
90
+ /******/ // Check if module is in cache
91
+ /******/ var cachedModule = __webpack_module_cache__[moduleId];
92
+ /******/ if (cachedModule !== undefined) {
93
+ /******/ return cachedModule.exports;
94
+ /******/ }
95
+ /******/ // Create a new module (and put it into the cache)
96
+ /******/ var module = __webpack_module_cache__[moduleId] = {
97
+ /******/ // no module.id needed
98
+ /******/ // no module.loaded needed
99
+ /******/ exports: {}
100
+ /******/ };
101
+ /******/
102
+ /******/ // Execute the module function
103
+ /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
104
+ /******/
105
+ /******/ // Return the exports of the module
106
+ /******/ return module.exports;
107
+ /******/ }
108
+ /******/
109
+ /************************************************************************/
110
+ /******/ /* webpack/runtime/define property getters */
111
+ /******/ (() => {
112
+ /******/ // define getter functions for harmony exports
113
+ /******/ __webpack_require__.d = (exports, definition) => {
114
+ /******/ for(var key in definition) {
115
+ /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
116
+ /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
117
+ /******/ }
118
+ /******/ }
119
+ /******/ };
120
+ /******/ })();
121
+ /******/
122
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
123
+ /******/ (() => {
124
+ /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
125
+ /******/ })();
126
+ /******/
127
+ /************************************************************************/
128
+ var __webpack_exports__ = {};
129
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
130
+ /* harmony export */ Z: () => (/* reexport safe */ _tooltip__WEBPACK_IMPORTED_MODULE_0__.Z)
131
+ /* harmony export */ });
132
+ /* harmony import */ var _tooltip__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(93);
133
+
134
+
135
+ const __webpack_exports__TkTooltip = __webpack_exports__.Z;
136
+ export { __webpack_exports__TkTooltip as TkTooltip };
@@ -1,12 +1,11 @@
1
1
  import { LitElement } from "lit";
2
- declare class TkTooltip extends LitElement {
2
+ export declare class TkTooltip extends LitElement {
3
3
  static styles: import("lit").CSSResult;
4
4
  position: "bottom" | "top" | "right" | "left";
5
- render(): import("lit-html").TemplateResult<1>;
5
+ render(): import("lit").TemplateResult<1>;
6
6
  }
7
7
  declare global {
8
8
  interface HTMLElementTagNameMap {
9
9
  "tk-tooltip": TkTooltip;
10
10
  }
11
11
  }
12
- export { TkTooltip };
package/topbar/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * from "./topbar.js";
1
+ export * from "./topbar";
package/topbar/index.js CHANGED
@@ -1 +1,358 @@
1
- export { TkTopbar } from './topbar.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
+ /***/ 1593:
6
+ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
7
+
8
+
9
+ // EXPORTS
10
+ __webpack_require__.d(__webpack_exports__, {
11
+ q: () => (/* binding */ TkTopbar)
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
+ // EXTERNAL MODULE: ./tinkiet/box/index.ts
19
+ var box = __webpack_require__(3433);
20
+ ;// ./tinkiet/topbar/topbar.scss
21
+ /* harmony default export */ const topbar = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{color:hsl(var(--primary));background:hsl(var(--on-primary));justify-content:space-between;align-items:center;flex-direction:row}:host([fixed]){position:fixed;top:0;left:0;right:0;z-index:var(--navbar-z-index, 100)}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){display:flex;align-items:center;height:100%}#title,::slotted([slot=title]){margin:var(--nav-title-margin, 0 0 0 var(--spacing-l, 1.25rem))}");
22
+ ;// ./tinkiet/topbar/topbar.ts
23
+ var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
24
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
25
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
26
+ 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;
27
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
28
+ };
29
+
30
+
31
+
32
+
33
+ let TkTopbar = class TkTopbar extends box/* TkBox */.P {
34
+ static get styles() {
35
+ return [
36
+ ...box/* TkBox */.P.styles,
37
+ (0,external_lit_.css) `
38
+ ${(0,external_lit_.unsafeCSS)(topbar)}
39
+ `
40
+ ];
41
+ }
42
+ render() {
43
+ return (0,external_lit_.html) `
44
+ <div id="left">
45
+ <slot name="left"></slot>
46
+ <slot name="title"></slot>
47
+ </div>
48
+ <div id="right">
49
+ <slot name="right"></slot>
50
+ </div>
51
+ `;
52
+ }
53
+ };
54
+ TkTopbar = __decorate([
55
+ (0,decorators_js_.customElement)("tk-topbar")
56
+ ], TkTopbar);
57
+
58
+
59
+
60
+ /***/ }),
61
+
62
+ /***/ 2788:
63
+ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
64
+
65
+
66
+ // EXPORTS
67
+ __webpack_require__.d(__webpack_exports__, {
68
+ P: () => (/* binding */ TkBox)
69
+ });
70
+
71
+ // EXTERNAL MODULE: external "lit"
72
+ var external_lit_ = __webpack_require__(2927);
73
+ // EXTERNAL MODULE: external "lit/decorators.js"
74
+ var decorators_js_ = __webpack_require__(8899);
75
+ ;// ./tinkiet/box/box.scss
76
+ /* 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}");
77
+ ;// ./tinkiet/box/box.ts
78
+ var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
79
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
80
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
81
+ 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;
82
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
83
+ };
84
+
85
+
86
+
87
+ const colors = (/* unused pure expression or super */ null && ([
88
+ "primary-lighter",
89
+ "primary-light",
90
+ "primary",
91
+ "primary-dark",
92
+ "primary-darker",
93
+ "on-primary-lighter",
94
+ "on-primary-light",
95
+ "on-primary",
96
+ "on-primary-dark",
97
+ "on-primary-darker",
98
+ "accent-lighter",
99
+ "accent-light",
100
+ "accent",
101
+ "accent-dark",
102
+ "accent-darker",
103
+ "on-accent-lighter",
104
+ "on-accent-light",
105
+ "on-accent",
106
+ "on-accent-dark",
107
+ "on-accent-darker",
108
+ "error-lighter",
109
+ "error-light",
110
+ "error",
111
+ "error-dark",
112
+ "error-darker",
113
+ "on-error-lighter",
114
+ "on-error-light",
115
+ "on-error",
116
+ "on-error-dark",
117
+ "on-error-darker",
118
+ "shade-lighter",
119
+ "shade-light",
120
+ "shade",
121
+ "shade-dark",
122
+ "shade-darker",
123
+ "on-shade-lighter",
124
+ "on-shade-light",
125
+ "on-shade",
126
+ "on-shade-dark",
127
+ "on-shade-darker"
128
+ ]));
129
+ /**
130
+ * A container that lays out its contents in one direction
131
+ *
132
+ * @attr {"none" | "small" | "medium" | "large" | "xlarge" | "circle" | "pill" } radius - border radius
133
+ * @attr {"around" | "between" | "center" | "end" | "start" | "stretch"} align-content - How to align the contents when there is extra space in the cross axis.
134
+ * @attr [align-content="stretch"]
135
+ * @attr {"baseline" | "center" | "end" | "start" | "stretch"} align-items - How to align the contents along the cross axis.
136
+ * @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.
137
+ * @attr {"row" | "column"} direction - The orientation to layout the child components in.
138
+ * @attr [direction="column"]
139
+ * @attr {1|2|3} elevation - Elevated height above the underlying context, indicated via a drop shadow.
140
+ * @attr {"horizontal" | "vertical" | "true" | "false"} fill - Whether the width and/or height should fill the container.
141
+ * @attr {"grow" | "shrink" | "true" | "false"} flex - flex-grow and/or flex-shrink
142
+ * @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.
143
+ * @attr {"around" | "between" | "center" | "end" | "evenly" | "start" | "stretch"} justify - How to align the contents along the main axis.
144
+ * @attr [justify="stretch"]
145
+ * @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.
146
+ * @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.
147
+ * @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.
148
+ * @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.
149
+ * @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.
150
+ * @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.
151
+ * @attr {"center" | "justify" | "left" | "right"} text - Text align
152
+ * @attr {"xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge"} width - A fixed width.
153
+ * @attr {"xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge"} height - A fixed height.
154
+ * @attr {"auto" | "hidden" | "scroll" | "visible"} overflow - box overflow.
155
+ * @attr { "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "lighter" | "bold" | "bolder"} weight - Font weight.
156
+ * @attr {"true" | "false" | "reverse"} wrap - Whether children can wrap if they can't all fit.
157
+ * @attr [wrap="false"]
158
+ */
159
+ let TkBox = class TkBox extends external_lit_.LitElement {
160
+ constructor() {
161
+ super(...arguments);
162
+ /**
163
+ * Activate ripple
164
+ */
165
+ this.ripple = false;
166
+ }
167
+ static get styles() {
168
+ return [
169
+ (0,external_lit_.css) `
170
+ ${(0,external_lit_.unsafeCSS)(box)}
171
+ `
172
+ ];
173
+ }
174
+ render() {
175
+ return (0,external_lit_.html) `
176
+ <slot></slot>
177
+ `;
178
+ }
179
+ connectedCallback() {
180
+ if (this.ripple) {
181
+ this.addEventListener("mousedown", this.showRipple.bind(this), { passive: true });
182
+ this.addEventListener("mouseup", this.hideRipple.bind(this), { passive: true });
183
+ }
184
+ super.connectedCallback();
185
+ }
186
+ disconnectedCallback() {
187
+ this.removeEventListener("mousedown", this.showRipple);
188
+ this.addEventListener("mouseup", this.hideRipple);
189
+ super.disconnectedCallback();
190
+ }
191
+ updated(props) {
192
+ // if (props.has("background") && ![...colors, "background", "foreground"].includes(this.background as string))
193
+ // this.style.setProperty("background-color", this.background.toString());
194
+ // if (props.has("color") && ![...colors, "background", "foreground"].includes(this.color as string))
195
+ // this.style.setProperty("color", this.color.toString());
196
+ super.updated(props);
197
+ }
198
+ showRipple(event) {
199
+ const x = event.clientX;
200
+ const y = event.clientY;
201
+ const { offsetWidth, offsetHeight } = this;
202
+ const container = document.createElement("span");
203
+ container.classList.add("ripple", "open");
204
+ const element = document.createElement("span");
205
+ container.appendChild(element);
206
+ this.shadowRoot.appendChild(container);
207
+ const rect = this.getBoundingClientRect();
208
+ const diameter = Math.max(offsetWidth, offsetWidth) * 2;
209
+ element.style.width = element.style.height = diameter + "px";
210
+ element.style.left = x - rect.left - diameter / 2 + "px";
211
+ element.style.top = y - rect.top - diameter / 2 + "px";
212
+ const inAnimation = element.animate({
213
+ transform: [`scale(0)`, `scale(1)`]
214
+ }, {
215
+ easing: "ease-out",
216
+ fill: "both",
217
+ duration: 500
218
+ });
219
+ inAnimation.onfinish = () => {
220
+ container.classList.remove("open");
221
+ const outAnimation = element.animate({
222
+ opacity: ["0.5", "0"]
223
+ }, {
224
+ easing: "ease-in",
225
+ fill: "both",
226
+ duration: 300
227
+ });
228
+ outAnimation.onfinish = () => {
229
+ requestAnimationFrame(() => {
230
+ container.remove();
231
+ });
232
+ };
233
+ };
234
+ }
235
+ hideRipple(event) {
236
+ var _a;
237
+ (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".ripple:not([open])").forEach(container => {
238
+ const element = container.querySelector("span");
239
+ const outAnimation = element.animate({
240
+ opacity: ["0.5", "0"]
241
+ }, {
242
+ easing: "ease-out",
243
+ fill: "both",
244
+ duration: 300
245
+ });
246
+ outAnimation.onfinish = () => {
247
+ requestAnimationFrame(() => {
248
+ container.remove();
249
+ });
250
+ };
251
+ });
252
+ }
253
+ };
254
+ __decorate([
255
+ (0,decorators_js_.property)({ type: Boolean })
256
+ ], TkBox.prototype, "ripple", void 0);
257
+ __decorate([
258
+ (0,decorators_js_.property)()
259
+ ], TkBox.prototype, "background", void 0);
260
+ __decorate([
261
+ (0,decorators_js_.property)()
262
+ ], TkBox.prototype, "color", void 0);
263
+ TkBox = __decorate([
264
+ (0,decorators_js_.customElement)("tk-box")
265
+ ], TkBox);
266
+
267
+
268
+
269
+ /***/ }),
270
+
271
+ /***/ 2927:
272
+ /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
273
+
274
+ var x = (y) => {
275
+ var x = {}; __webpack_require__.d(x, y); return x
276
+ }
277
+ var y = (x) => (() => (x))
278
+ 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) });
279
+
280
+ /***/ }),
281
+
282
+ /***/ 3433:
283
+ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
284
+
285
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
286
+ /* harmony export */ P: () => (/* reexport safe */ _box__WEBPACK_IMPORTED_MODULE_0__.P)
287
+ /* harmony export */ });
288
+ /* harmony import */ var _box__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2788);
289
+
290
+
291
+
292
+ /***/ }),
293
+
294
+ /***/ 8899:
295
+ /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
296
+
297
+ var x = (y) => {
298
+ var x = {}; __webpack_require__.d(x, y); return x
299
+ }
300
+ var y = (x) => (() => (x))
301
+ module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property) });
302
+
303
+ /***/ })
304
+
305
+ /******/ });
306
+ /************************************************************************/
307
+ /******/ // The module cache
308
+ /******/ var __webpack_module_cache__ = {};
309
+ /******/
310
+ /******/ // The require function
311
+ /******/ function __webpack_require__(moduleId) {
312
+ /******/ // Check if module is in cache
313
+ /******/ var cachedModule = __webpack_module_cache__[moduleId];
314
+ /******/ if (cachedModule !== undefined) {
315
+ /******/ return cachedModule.exports;
316
+ /******/ }
317
+ /******/ // Create a new module (and put it into the cache)
318
+ /******/ var module = __webpack_module_cache__[moduleId] = {
319
+ /******/ // no module.id needed
320
+ /******/ // no module.loaded needed
321
+ /******/ exports: {}
322
+ /******/ };
323
+ /******/
324
+ /******/ // Execute the module function
325
+ /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
326
+ /******/
327
+ /******/ // Return the exports of the module
328
+ /******/ return module.exports;
329
+ /******/ }
330
+ /******/
331
+ /************************************************************************/
332
+ /******/ /* webpack/runtime/define property getters */
333
+ /******/ (() => {
334
+ /******/ // define getter functions for harmony exports
335
+ /******/ __webpack_require__.d = (exports, definition) => {
336
+ /******/ for(var key in definition) {
337
+ /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
338
+ /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
339
+ /******/ }
340
+ /******/ }
341
+ /******/ };
342
+ /******/ })();
343
+ /******/
344
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
345
+ /******/ (() => {
346
+ /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
347
+ /******/ })();
348
+ /******/
349
+ /************************************************************************/
350
+ var __webpack_exports__ = {};
351
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
352
+ /* harmony export */ q: () => (/* reexport safe */ _topbar__WEBPACK_IMPORTED_MODULE_0__.q)
353
+ /* harmony export */ });
354
+ /* harmony import */ var _topbar__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1593);
355
+
356
+
357
+ const __webpack_exports__TkTopbar = __webpack_exports__.q;
358
+ export { __webpack_exports__TkTopbar as TkTopbar };
@@ -1,11 +1,10 @@
1
- import { TkBox } from "../box/index.js";
2
- declare class TkTopbar extends TkBox {
1
+ import { TkBox } from "../box";
2
+ export declare class TkTopbar extends TkBox {
3
3
  static get styles(): import("lit").CSSResult[];
4
- render(): import("lit-html").TemplateResult<1>;
4
+ render(): import("lit").TemplateResult<1>;
5
5
  }
6
6
  declare global {
7
7
  interface HTMLElementTagNameMap {
8
8
  "tk-topbar": TkTopbar;
9
9
  }
10
10
  }
11
- export { TkTopbar };