tinkiet 0.5.2 → 0.6.2

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 (30) hide show
  1. package/accordion/accordion.js +36 -2
  2. package/badge/badge.js +3 -1
  3. package/box/box.js +6 -2
  4. package/button/button.js +28 -7
  5. package/checkbox/checkbox.js +26 -3
  6. package/dialog/dialog.js +14 -5
  7. package/drawer/drawer.js +23 -6
  8. package/drawer/drawer.scss.js +2 -2
  9. package/icon/icon.js +12 -4
  10. package/list-item/list-item.js +16 -5
  11. package/loading/loading.d.ts +1 -0
  12. package/loading/loading.js +30 -4
  13. package/navbar/navbar.js +12 -2
  14. package/notie/notie.js +40 -12
  15. package/notie/notie.scss.js +2 -2
  16. package/package.json +4 -4
  17. package/pages/pages.js +7 -3
  18. package/progress/progress.js +14 -6
  19. package/radio/radio.js +25 -3
  20. package/select/select.js +31 -3
  21. package/slider/slider.js +49 -5
  22. package/slider/slider.scss.js +2 -2
  23. package/switch/switch.js +26 -3
  24. package/tab-group/tab-group.js +16 -5
  25. package/tag/tag.js +7 -3
  26. package/textarea/textarea.js +32 -3
  27. package/textfield/textfield.js +33 -3
  28. package/theme/theme.js +7 -3
  29. package/umd/tinkiet.min.d.ts +1 -0
  30. package/umd/tinkiet.min.js +1 -1
package/progress/progress.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __decorate, __metadata } from 'tslib';
2
- import { LitElement, html, css, unsafeCSS } from 'lit';
2
+ import { LitElement, css, unsafeCSS, html } from 'lit';
3
3
  import { property, customElement } from 'lit/decorators.js';
4
4
  import css_248z from './progress.scss.js';
5
5
 
@@ -11,15 +11,23 @@ let TkProgress = class TkProgress extends LitElement {
11
11
  this.value = 0;
12
12
  this.buffer = 0;
13
13
  }
14
+ static { this.styles = css `
15
+ ${unsafeCSS(css_248z)}
16
+ `; }
14
17
  render() {
15
18
  return html `${this.circle
16
- ? html `<svg class="spinner" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle class="path" fill="none" stroke-width="10" stroke-linecap="butt" cx="50" cy="50" r="40"></circle></svg>`
17
- : html `${this.indeterminate
18
- ? html `<div class="progress-materializecss"><div class="indeterminate"></div></div>`
19
- : html `<progress class="progress" max="100" value="50"></progress>`}`}`;
19
+ ? html `<svg class="spinner" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
20
+ <circle class="path" fill="none" stroke-width="10" stroke-linecap="butt" cx="50" cy="50" r="40"></circle>
21
+ </svg>`
22
+ : html `
23
+ ${this.indeterminate
24
+ ? html `<div class="progress-materializecss">
25
+ <div class="indeterminate"></div>
26
+ </div>`
27
+ : html `<progress class="progress" max="100" value="50"></progress> `}
28
+ `} `;
20
29
  }
21
30
  };
22
- TkProgress.styles = css `${unsafeCSS(css_248z)}`;
23
31
  __decorate([
24
32
  property({ attribute: true, type: Boolean }),
25
33
  __metadata("design:type", Boolean)
package/radio/radio.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __decorate, __metadata } from 'tslib';
2
- import { LitElement, html, css, unsafeCSS } from 'lit';
2
+ import { LitElement, css, unsafeCSS, html } from 'lit';
3
3
  import { property, query, customElement } from 'lit/decorators.js';
4
4
  import { ifDefined } from 'lit/directives/if-defined.js';
5
5
  import '../box/index.js';
@@ -15,8 +15,31 @@ let TkRadio = class TkRadio extends LitElement {
15
15
  this.disabled = false;
16
16
  this.readonly = false;
17
17
  }
18
+ static { this.styles = css `
19
+ ${unsafeCSS(css_248z)}
20
+ `; }
18
21
  render() {
19
- return html `<tk-box direction="row" align-items="center"><div tabindex="0" class="radio"><div id="dot"></div></div><span class="label"><slot></slot></span></tk-box><input id="${this._id}" slot="none" style="display:none" type="radio" ?checked="${this.checked}" .checked="${this.checked}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" value="${ifDefined(this.value)}" name="${ifDefined(this.name)}" aria-hidden="true" tabindex="-1">`;
22
+ return html `
23
+ <tk-box direction="row" align-items="center">
24
+ <div tabindex="0" class="radio">
25
+ <div id="dot"></div>
26
+ </div>
27
+ <span class="label"><slot></slot></span>
28
+ </tk-box>
29
+ <input
30
+ id=${this._id}
31
+ type="radio"
32
+ style="position: absolute;left: 0;z-index: -1;"
33
+ ?checked="${this.checked}"
34
+ .checked=${this.checked}
35
+ ?required="${this.required}"
36
+ ?disabled="${this.disabled}"
37
+ ?readonly="${this.readonly}"
38
+ value="${ifDefined(this.value)}"
39
+ name="${ifDefined(this.name)}"
40
+ tabindex="-1"
41
+ />
42
+ `;
20
43
  }
21
44
  connectedCallback() {
22
45
  super.connectedCallback();
@@ -47,7 +70,6 @@ let TkRadio = class TkRadio extends LitElement {
47
70
  setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
48
71
  }
49
72
  };
50
- TkRadio.styles = css `${unsafeCSS(css_248z)}`;
51
73
  __decorate([
52
74
  property({ attribute: true, type: String }),
53
75
  __metadata("design:type", String)
package/select/select.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __decorate, __metadata } from 'tslib';
2
- import { LitElement, html, css, unsafeCSS } from 'lit';
2
+ import { LitElement, css, unsafeCSS, html } from 'lit';
3
3
  import { property, state, eventOptions, customElement } from 'lit/decorators.js';
4
4
  import { ifDefined } from 'lit/directives/if-defined.js';
5
5
  import '../box/index.js';
@@ -15,6 +15,9 @@ let TkSelect = class TkSelect extends LitElement {
15
15
  this.disabled = false;
16
16
  this.readonly = false;
17
17
  }
18
+ static { this.styles = css `
19
+ ${unsafeCSS(css_248z)}
20
+ `; }
18
21
  set value(value) {
19
22
  if (!this.$select) {
20
23
  this.initialValue = value;
@@ -28,7 +31,33 @@ let TkSelect = class TkSelect extends LitElement {
28
31
  return this.$select != null ? this.$select.value : this.initialValue || "";
29
32
  }
30
33
  render() {
31
- return html `<div id="container"><slot id="before" name="before"></slot><div id="wrapper"><div id="label">${this.label}</div><slot id="slot"></slot><select id="${this._id}" @keydown="${this.handleChange.bind(this)}" @input="${this.handleChange.bind(this)}" @focusout="${this.handleChange.bind(this)}" @change="${this.handleChange.bind(this)}" .value="${this.initialValue}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" name="${ifDefined(this.name)}" autocomplete="${ifDefined(this.autocomplete)}" tabindex="${this.disabled ? -1 : 0}"></select> <svg id="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 25" preserveAspectRatio="none"><polygon points="0,0 50,0 25,25"/></svg></div><slot id="after" name="after"></slot></div>`;
34
+ return html `
35
+ <div id="container">
36
+ <slot id="before" name="before"></slot>
37
+ <div id="wrapper">
38
+ <div id="label">${this.label}</div>
39
+ <slot id="slot"></slot>
40
+ <select
41
+ id="${this._id}"
42
+ @keydown=${this.handleChange.bind(this)}
43
+ @input=${this.handleChange.bind(this)}
44
+ @focusout=${this.handleChange.bind(this)}
45
+ @change=${this.handleChange.bind(this)}
46
+ .value="${this.initialValue}"
47
+ ?required="${this.required}"
48
+ ?disabled="${this.disabled}"
49
+ ?readonly="${this.readonly}"
50
+ name="${ifDefined(this.name)}"
51
+ autocomplete="${ifDefined(this.autocomplete)}"
52
+ tabindex="${this.disabled ? -1 : 0}"
53
+ ></select>
54
+ <svg id="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 25" preserveAspectRatio="none">
55
+ <polygon points="0,0 50,0 25,25" />
56
+ </svg>
57
+ </div>
58
+ <slot id="after" name="after"></slot>
59
+ </div>
60
+ `;
32
61
  }
33
62
  handleChange() {
34
63
  this.refreshAttributes();
@@ -47,7 +76,6 @@ let TkSelect = class TkSelect extends LitElement {
47
76
  setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
48
77
  }
49
78
  };
50
- TkSelect.styles = css `${unsafeCSS(css_248z)}`;
51
79
  __decorate([
52
80
  property({ type: String }),
53
81
  __metadata("design:type", String),
package/slider/slider.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __decorate, __metadata } from 'tslib';
2
- import { LitElement, html, css, unsafeCSS } from 'lit';
2
+ import { LitElement, css, unsafeCSS, html } from 'lit';
3
3
  import { property, query, customElement } from 'lit/decorators.js';
4
4
  import { ifDefined } from 'lit/directives/if-defined.js';
5
5
  import { uniqueID } from '../utils/unique.js';
@@ -18,10 +18,55 @@ let TkSlider = class TkSlider extends LitElement {
18
18
  this.value = this.min;
19
19
  this.max = 100;
20
20
  }
21
+ static { this.styles = css `
22
+ ${unsafeCSS(css_248z)}
23
+ `; }
21
24
  render() {
22
- return html `<div id="container"><slot id="before" name="before"></slot><div id="wrapper"><div id="label">${this.label}</div><div id="slot-wrapper"><input @input="${this.handleChange.bind(this)}" id="slider" type="range" .value="${this.value.toString()}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" aria-label="${ifDefined(this.label)}" name="${ifDefined(this.name)}" autocomplete="${ifDefined(this.autocomplete)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" tabindex="0"> ${this.thumbLabel || this.thumbLabelPersist
23
- ? html `<div id="thumb-container"><div id="thumb-label"><slot name="thumb-label">${this.value}</slot></div></div>`
24
- : ''}</div><input id="${this._id}" class="hidden-input" type="hidden" value="${this.value.toString()}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" aria-label="${ifDefined(this.label)}" name="${ifDefined(this.name)}"></div><slot id="after" name="after"></slot></div>`;
25
+ return html `
26
+ <div id="container">
27
+ <slot id="before" name="before"></slot>
28
+ <div id="wrapper">
29
+ <div id="label">${this.label}</div>
30
+ <div id="slot-wrapper">
31
+ <input
32
+ @input="${this.handleChange.bind(this)}"
33
+ id="slider"
34
+ type="range"
35
+ .value="${this.value.toString()}"
36
+ ?required="${this.required}"
37
+ ?disabled="${this.disabled}"
38
+ ?readonly="${this.readonly}"
39
+ aria-label="${ifDefined(this.label)}"
40
+ name="${ifDefined(this.name)}"
41
+ autocomplete="${ifDefined(this.autocomplete)}"
42
+ min="${ifDefined(this.min)}"
43
+ max="${ifDefined(this.max)}"
44
+ step="${ifDefined(this.step)}"
45
+ tabindex="0"
46
+ />
47
+ ${this.thumbLabel || this.thumbLabelPersist
48
+ ? html `
49
+ <div id="thumb-container">
50
+ <div id="thumb-label"><slot name="thumb-label">${this.value}</slot></div>
51
+ </div>
52
+ `
53
+ : ''}
54
+ </div>
55
+ <input
56
+ id=${this._id}
57
+ class="hidden-input"
58
+ type="hidden"
59
+ value="${this.value.toString()}"
60
+ ?required="${this.required}"
61
+ ?disabled="${this.disabled}"
62
+ ?readonly="${this.readonly}"
63
+ aria-label="${ifDefined(this.label)}"
64
+ name="${ifDefined(this.name)}"
65
+ />
66
+ </div>
67
+ <slot id="after" name="after"></slot>
68
+ </div>
69
+ `;
25
70
  }
26
71
  handleChange(e) {
27
72
  e.target.checkValidity() ? this.removeAttribute("invalid") : this.setAttribute("invalid", "");
@@ -38,7 +83,6 @@ let TkSlider = class TkSlider extends LitElement {
38
83
  });
39
84
  }
40
85
  };
41
- TkSlider.styles = css `${unsafeCSS(css_248z)}`;
42
86
  __decorate([
43
87
  property({ attribute: true, type: String }),
44
88
  __metadata("design:type", String)
package/slider/slider.scss.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{font-size:var(--input-label-font-size,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host{--_perc:0;--_slider-track-bg:var(--slider-bg,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-track-bg-active:var(--slider-bg-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--_slider-thumb-bg:var(--slider-thumb-bg,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));--_slider-thumb-border:var(--slider-thumb-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([disabled]){--_slider-track-bg:var(--slider-bg-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_slider-track-bg-active:var(--slider-bg-active-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_slider-thumb-bg:var(--slider-thumb-bg-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-thumb-border:var(--slider-thumb-bg,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host([thumblabel-persist]) #container,:host([thumblabel]) #container{padding-top:33px}#container{border:none;overflow:visible}#slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(90deg,var(--_slider-track-bg-active) 0,var(--_slider-track-bg-active) calc(var(--_perc)*100%),var(--_slider-track-bg) calc(var(--_perc)*100%),var(--_slider-track-bg));border:none;border-radius:0;box-sizing:border-box;cursor:grab;height:var(--slider-height,.3125rem);margin:0;outline:none;top:calc(var(--slider-height, .3125rem)*-1/2)}#slider,#thumb-container{position:relative;width:100%}#thumb-label{--_thumb-label-transform-y:0.625rem;-webkit-text-fill-color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));align-items:center;border-radius:var(--slider-thumb-label-border-radius,100%);bottom:calc(100% + var(--slider-thumb-size, .75rem) + var(--slider-height, .3125rem) + var(--slider-thumb-space, .75rem));color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));display:flex;font-size:var(--slider-thumb-label-font-size,.75rem);height:var(--slider-thumb-label-size,1.875rem);justify-content:center;left:calc(var(--_perc)*100% - var(--slider-thumb-size, 1.2rem)*var(--_perc));opacity:0;pointer-events:none;text-overflow:ellipsis;transform:translate(calc(-50% + var(--slider-thumb-size, 1.2rem)/2),var(--_thumb-label-transform-y));transition:var(--slider-thumb-label-transition,opacity var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-label-size,1.875rem)}#thumb-label,#thumb-label:before{background:var(--slider-thumb-label-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));position:absolute}#thumb-label:before{border-radius:0 50% 50% 50%;content:\"\";height:100%;left:0;top:0;transform:rotate(225deg);width:100%;z-index:-1}#slider:focus+#thumb-container #thumb-label,:host([thumblabel-persist]) #thumb-label,:host:focus #thumb-label{--_thumb-label-transform-y:0;opacity:1}#slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:4px solid var(--_slider-thumb-border);border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,#00000015);cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-webkit-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:none;border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,#00000015);cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-moz-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,#00000015);transform:var(--slider-thumb-transform-focus,scale(1.2))}#slider:focus::-moz-range-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,#00000015);transform:var(--slider-thumb-transform-focus,scale(1.2))}";
2
- var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{font-size:var(--input-label-font-size,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host{--_perc:0;--_slider-track-bg:var(--slider-bg,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-track-bg-active:var(--slider-bg-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--_slider-thumb-bg:var(--slider-thumb-bg,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));--_slider-thumb-border:var(--slider-thumb-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([disabled]){--_slider-track-bg:var(--slider-bg-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_slider-track-bg-active:var(--slider-bg-active-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_slider-thumb-bg:var(--slider-thumb-bg-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-thumb-border:var(--slider-thumb-bg,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host([thumblabel-persist]) #container,:host([thumblabel]) #container{padding-top:33px}#container{border:none;overflow:visible}#slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(90deg,var(--_slider-track-bg-active) 0,var(--_slider-track-bg-active) calc(var(--_perc)*100%),var(--_slider-track-bg) calc(var(--_perc)*100%),var(--_slider-track-bg));border:none;border-radius:0;box-sizing:border-box;cursor:grab;height:var(--slider-height,.3125rem);margin:0;outline:none;top:calc(var(--slider-height, .3125rem)*-1/2)}#slider,#thumb-container{position:relative;width:100%}#thumb-label{--_thumb-label-transform-y:0.625rem;-webkit-text-fill-color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));align-items:center;border-radius:var(--slider-thumb-label-border-radius,100%);bottom:calc(100% + var(--slider-thumb-size, .75rem) + var(--slider-height, .3125rem) + var(--slider-thumb-space, .75rem));color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));display:flex;font-size:var(--slider-thumb-label-font-size,.75rem);height:var(--slider-thumb-label-size,1.875rem);justify-content:center;left:calc(var(--_perc)*100% - var(--slider-thumb-size, 1.2rem)*var(--_perc));opacity:0;pointer-events:none;text-overflow:ellipsis;transform:translate(calc(-50% + var(--slider-thumb-size, 1.2rem)/2),var(--_thumb-label-transform-y));transition:var(--slider-thumb-label-transition,opacity var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-label-size,1.875rem)}#thumb-label,#thumb-label:before{background:var(--slider-thumb-label-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));position:absolute}#thumb-label:before{border-radius:0 50% 50% 50%;content:\"\";height:100%;left:0;top:0;transform:rotate(225deg);width:100%;z-index:-1}#slider:focus+#thumb-container #thumb-label,:host([thumblabel-persist]) #thumb-label,:host:focus #thumb-label{--_thumb-label-transform-y:0;opacity:1}#slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:4px solid var(--_slider-thumb-border);border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,#00000015);cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-webkit-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:none;border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,#00000015);cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-moz-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,#00000015);transform:var(--slider-thumb-transform-focus,scale(1.2))}#slider:focus::-moz-range-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,#00000015);transform:var(--slider-thumb-transform-focus,scale(1.2))}";
1
+ var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{font-size:var(--input-label-font-size,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host{--_perc:0;--_slider-track-bg:var(--slider-bg,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-track-bg-active:var(--slider-bg-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--_slider-thumb-bg:var(--slider-thumb-bg,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));--_slider-thumb-border:var(--slider-thumb-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([disabled]){--_slider-track-bg:var(--slider-bg-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_slider-track-bg-active:var(--slider-bg-active-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_slider-thumb-bg:var(--slider-thumb-bg-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-thumb-border:var(--slider-thumb-bg,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host([thumblabel-persist]) #container,:host([thumblabel]) #container{padding-top:33px}#container{border:none;overflow:visible}#slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(90deg,var(--_slider-track-bg-active) 0,var(--_slider-track-bg-active) calc(var(--_perc)*100%),var(--_slider-track-bg) calc(var(--_perc)*100%),var(--_slider-track-bg));border:none;border-radius:0;box-sizing:border-box;cursor:grab;height:var(--slider-height,.3125rem);margin:0;outline:none;top:calc(var(--slider-height, .3125rem)*-1/2)}#slider,#thumb-container{position:relative;width:100%}#thumb-label{--_thumb-label-transform-y:0.625rem;-webkit-text-fill-color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));align-items:center;border-radius:var(--slider-thumb-label-border-radius,100%);bottom:calc(100% + var(--slider-thumb-size, .75rem) + var(--slider-height, .3125rem) + var(--slider-thumb-space, .75rem));color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));display:flex;font-size:var(--slider-thumb-label-font-size,.75rem);height:var(--slider-thumb-label-size,1.875rem);justify-content:center;left:calc(var(--_perc)*100% - var(--slider-thumb-size, 1.2rem)*var(--_perc));opacity:0;pointer-events:none;text-overflow:ellipsis;transform:translate(calc(-50% + var(--slider-thumb-size, 1.2rem)/2),var(--_thumb-label-transform-y));transition:var(--slider-thumb-label-transition,opacity var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-label-size,1.875rem)}#thumb-label,#thumb-label:before{background:var(--slider-thumb-label-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));position:absolute}#thumb-label:before{border-radius:0 50% 50% 50%;content:\"\";height:100%;left:0;top:0;transform:rotate(225deg);width:100%;z-index:-1}#slider:focus+#thumb-container #thumb-label,:host([thumblabel-persist]) #thumb-label,:host:focus #thumb-label{--_thumb-label-transform-y:0;opacity:1}#slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:4px solid var(--_slider-thumb-border);border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-webkit-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:none;border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-moz-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}#slider:focus::-moz-range-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}";
2
+ var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{font-size:var(--input-label-font-size,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host{--_perc:0;--_slider-track-bg:var(--slider-bg,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-track-bg-active:var(--slider-bg-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--_slider-thumb-bg:var(--slider-thumb-bg,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));--_slider-thumb-border:var(--slider-thumb-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([disabled]){--_slider-track-bg:var(--slider-bg-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_slider-track-bg-active:var(--slider-bg-active-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_slider-thumb-bg:var(--slider-thumb-bg-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-thumb-border:var(--slider-thumb-bg,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host([thumblabel-persist]) #container,:host([thumblabel]) #container{padding-top:33px}#container{border:none;overflow:visible}#slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(90deg,var(--_slider-track-bg-active) 0,var(--_slider-track-bg-active) calc(var(--_perc)*100%),var(--_slider-track-bg) calc(var(--_perc)*100%),var(--_slider-track-bg));border:none;border-radius:0;box-sizing:border-box;cursor:grab;height:var(--slider-height,.3125rem);margin:0;outline:none;top:calc(var(--slider-height, .3125rem)*-1/2)}#slider,#thumb-container{position:relative;width:100%}#thumb-label{--_thumb-label-transform-y:0.625rem;-webkit-text-fill-color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));align-items:center;border-radius:var(--slider-thumb-label-border-radius,100%);bottom:calc(100% + var(--slider-thumb-size, .75rem) + var(--slider-height, .3125rem) + var(--slider-thumb-space, .75rem));color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));display:flex;font-size:var(--slider-thumb-label-font-size,.75rem);height:var(--slider-thumb-label-size,1.875rem);justify-content:center;left:calc(var(--_perc)*100% - var(--slider-thumb-size, 1.2rem)*var(--_perc));opacity:0;pointer-events:none;text-overflow:ellipsis;transform:translate(calc(-50% + var(--slider-thumb-size, 1.2rem)/2),var(--_thumb-label-transform-y));transition:var(--slider-thumb-label-transition,opacity var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-label-size,1.875rem)}#thumb-label,#thumb-label:before{background:var(--slider-thumb-label-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));position:absolute}#thumb-label:before{border-radius:0 50% 50% 50%;content:\"\";height:100%;left:0;top:0;transform:rotate(225deg);width:100%;z-index:-1}#slider:focus+#thumb-container #thumb-label,:host([thumblabel-persist]) #thumb-label,:host:focus #thumb-label{--_thumb-label-transform-y:0;opacity:1}#slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:4px solid var(--_slider-thumb-border);border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-webkit-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:none;border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-moz-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}#slider:focus::-moz-range-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}";
3
3
 
4
4
  export { css_248z as default, stylesheet };
package/switch/switch.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __decorate, __metadata } from 'tslib';
2
- import { LitElement, html, css, unsafeCSS } from 'lit';
2
+ import { LitElement, css, unsafeCSS, html } from 'lit';
3
3
  import { property, query, customElement } from 'lit/decorators.js';
4
4
  import { ifDefined } from 'lit/directives/if-defined.js';
5
5
  import '../box/index.js';
@@ -15,8 +15,32 @@ let TkSwitch = class TkSwitch extends LitElement {
15
15
  this.disabled = false;
16
16
  this.readonly = false;
17
17
  }
18
+ static { this.styles = css `
19
+ ${unsafeCSS(css_248z)}
20
+ `; }
18
21
  render() {
19
- return html `<tk-box direction="row" align-items="center"><span class="switch"><span id="knob"></span> </span><span class="label"><slot></slot></span></tk-box><input id="${this._id}" slot="none" style="display:none" type="radio" ?checked="${this.checked}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" value="${ifDefined(this.value)}" name="${ifDefined(this.name)}" aria-hidden="true" tabindex="-1">`;
22
+ return html `
23
+ <tk-box direction="row" align-items="center">
24
+ <span class="switch">
25
+ <span id="knob"></span>
26
+ </span>
27
+ <span class="label"><slot></slot></span>
28
+ </tk-box>
29
+ <input
30
+ id=${this._id}
31
+ slot="none"
32
+ style="display: none;"
33
+ type="radio"
34
+ ?checked="${this.checked}"
35
+ ?required="${this.required}"
36
+ ?disabled="${this.disabled}"
37
+ ?readonly="${this.readonly}"
38
+ value="${ifDefined(this.value)}"
39
+ name="${ifDefined(this.name)}"
40
+ aria-hidden="true"
41
+ tabindex="-1"
42
+ />
43
+ `;
20
44
  }
21
45
  connectedCallback() {
22
46
  super.connectedCallback();
@@ -47,7 +71,6 @@ let TkSwitch = class TkSwitch extends LitElement {
47
71
  setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
48
72
  }
49
73
  };
50
- TkSwitch.styles = css `${unsafeCSS(css_248z)}`;
51
74
  __decorate([
52
75
  property({ attribute: true, type: String }),
53
76
  __metadata("design:type", String)
package/tab-group/tab-group.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __decorate, __metadata } from 'tslib';
2
- import { LitElement, html, css, unsafeCSS } from 'lit';
2
+ import { LitElement, css, unsafeCSS, html } from 'lit';
3
3
  import { property, query, customElement } from 'lit/decorators.js';
4
4
  import css_248z from './tab-group.scss.js';
5
5
 
@@ -10,10 +10,22 @@ let TkTabGroup = class TkTabGroup extends LitElement {
10
10
  this.observe = "";
11
11
  this.selected = "";
12
12
  }
13
+ static { this.styles = css `
14
+ ${unsafeCSS(css_248z)}
15
+ `; }
13
16
  render() {
14
- return html `<div class="tabs"><slot @click="${(e) => this.clickOnTab(e.target)}" @slotchange="${() => this.updateUnderline()}"></slot></div>${this.circle
15
- ? html `<div class="circle"></div>`
16
- : html `<div class="underline"></div>`}`;
17
+ return html `
18
+ <div class="tabs">
19
+ <slot @click=${(e) => this.clickOnTab(e.target)} @slotchange=${() => this.updateUnderline()}></slot>
20
+ </div>
21
+ ${this.circle
22
+ ? html `
23
+ <div class="circle"></div>
24
+ `
25
+ : html `
26
+ <div class="underline"></div>
27
+ `}
28
+ `;
17
29
  }
18
30
  firstUpdated() {
19
31
  if (IntersectionObserver) {
@@ -62,7 +74,6 @@ let TkTabGroup = class TkTabGroup extends LitElement {
62
74
  // }
63
75
  }
64
76
  };
65
- TkTabGroup.styles = css `${unsafeCSS(css_248z)}`;
66
77
  __decorate([
67
78
  property({ attribute: true, type: Boolean }),
68
79
  __metadata("design:type", Boolean)
package/tag/tag.js CHANGED
@@ -1,14 +1,18 @@
1
1
  import { __decorate } from 'tslib';
2
- import { LitElement, html, css, unsafeCSS } from 'lit';
2
+ import { LitElement, css, unsafeCSS, html } from 'lit';
3
3
  import { customElement } from 'lit/decorators.js';
4
4
  import css_248z from './tag.scss.js';
5
5
 
6
6
  let TkTag = class TkTag extends LitElement {
7
+ static { this.styles = css `
8
+ ${unsafeCSS(css_248z)}
9
+ `; }
7
10
  render() {
8
- return html `<div class="tag"><slot></slot></div>`;
11
+ return html `
12
+ <div class="tag"><slot></slot></div>
13
+ `;
9
14
  }
10
15
  };
11
- TkTag.styles = css `${unsafeCSS(css_248z)}`;
12
16
  TkTag = __decorate([
13
17
  customElement("tk-tag")
14
18
  ], TkTag);
package/textarea/textarea.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __decorate, __metadata } from 'tslib';
2
- import { LitElement, html, css, unsafeCSS } from 'lit';
2
+ import { LitElement, css, unsafeCSS, html } from 'lit';
3
3
  import { property, state, eventOptions, customElement } from 'lit/decorators.js';
4
4
  import { ifDefined } from 'lit/directives/if-defined.js';
5
5
  import { uniqueID } from '../utils/unique.js';
@@ -15,6 +15,9 @@ let TkTextarea = class TkTextarea extends LitElement {
15
15
  this.readonly = false;
16
16
  this.rows = 1;
17
17
  }
18
+ static { this.styles = css `
19
+ ${unsafeCSS(css_248z)}
20
+ `; }
18
21
  set value(value) {
19
22
  if (!this.$input) {
20
23
  this.initialValue = value;
@@ -28,7 +31,34 @@ let TkTextarea = class TkTextarea extends LitElement {
28
31
  return this.$input != null ? this.$input.value : this.initialValue || "";
29
32
  }
30
33
  render() {
31
- return html `<div id="container"><slot id="before" name="before"></slot><div id="wrapper"><div id="label">${this.label}</div><slot id="slot"></slot><textarea id="${this._id}" @keydown="${this.handleChange.bind(this)}" @input="${this.handleChange.bind(this)}" @focusout="${this.handleChange.bind(this)}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" aria-label="${ifDefined(this.label)}" name="${ifDefined(this.name)}" pattern="${ifDefined(this.pattern)}" autocomplete="${ifDefined(this.autocomplete)}" autocapitalize="${ifDefined(this.autocapitalize)}" minlength="${ifDefined(this.minLength)}" maxlength="${ifDefined(this.maxLength)}" rows="${this.rows}" tabindex="${this.disabled ? -1 : 0}"></textarea></div><slot id="after" name="after"></slot></div>`;
34
+ return html `
35
+ <div id="container">
36
+ <slot id="before" name="before"></slot>
37
+ <div id="wrapper">
38
+ <div id="label">${this.label}</div>
39
+ <slot id="slot"></slot>
40
+ <textarea
41
+ id=${this._id}
42
+ @keydown=${this.handleChange.bind(this)}
43
+ @input=${this.handleChange.bind(this)}
44
+ @focusout=${this.handleChange.bind(this)}
45
+ ?required="${this.required}"
46
+ ?disabled="${this.disabled}"
47
+ ?readonly="${this.readonly}"
48
+ aria-label="${ifDefined(this.label)}"
49
+ name="${ifDefined(this.name)}"
50
+ pattern="${ifDefined(this.pattern)}"
51
+ autocomplete="${ifDefined(this.autocomplete)}"
52
+ autocapitalize="${ifDefined(this.autocapitalize)}"
53
+ minlength="${ifDefined(this.minLength)}"
54
+ maxlength="${ifDefined(this.maxLength)}"
55
+ rows="${this.rows}"
56
+ tabindex="${this.disabled ? -1 : 0}"
57
+ ></textarea>
58
+ </div>
59
+ <slot id="after" name="after"></slot>
60
+ </div>
61
+ `;
32
62
  }
33
63
  handleChange() {
34
64
  this.refreshAttributes();
@@ -47,7 +77,6 @@ let TkTextarea = class TkTextarea extends LitElement {
47
77
  this.$input.focus();
48
78
  }
49
79
  };
50
- TkTextarea.styles = css `${unsafeCSS(css_248z)}`;
51
80
  __decorate([
52
81
  property({ type: String }),
53
82
  __metadata("design:type", String),
package/textfield/textfield.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __decorate, __metadata } from 'tslib';
2
2
  import { property, state, eventOptions, customElement } from 'lit/decorators.js';
3
- import { LitElement, html, css, unsafeCSS } from 'lit';
3
+ import { LitElement, css, unsafeCSS, html } from 'lit';
4
4
  import { ifDefined } from 'lit/directives/if-defined.js';
5
5
  import { uniqueID } from '../utils/unique.js';
6
6
  import css_248z from './textfield.scss.js';
@@ -14,6 +14,9 @@ let TkTextfield = class TkTextfield extends LitElement {
14
14
  this.disabled = false;
15
15
  this.readonly = false;
16
16
  }
17
+ static { this.styles = css `
18
+ ${unsafeCSS(css_248z)}
19
+ `; }
17
20
  set value(value) {
18
21
  if (!this.$input) {
19
22
  this.initialValue = value;
@@ -27,7 +30,35 @@ let TkTextfield = class TkTextfield extends LitElement {
27
30
  return this.$input != null ? this.$input.value : this.initialValue || "";
28
31
  }
29
32
  render() {
30
- return html `<div id="container"><slot id="before" name="before"></slot><div id="wrapper"><div id="label">${this.label}</div><slot id="slot"></slot><input id="${this._id}" @keydown="${this.handleChange.bind(this)}" @input="${this.handleChange.bind(this)}" @focusout="${this.handleChange.bind(this)}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" autocomplete="${ifDefined(this.autocomplete)}" autocapitalize="${ifDefined(this.autocapitalize)}" aria-label="${ifDefined(this.label)}" type="${ifDefined(this.type)}" name="${ifDefined(this.name)}" list="${ifDefined(this.list)}" pattern="${ifDefined(this.pattern)}" minlength="${ifDefined(this.minLength)}" maxlength="${ifDefined(this.maxLength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" tabindex="${this.disabled ? -1 : 0}"></div><slot id="after" name="after"></slot></div>`;
33
+ return html `<div id="container">
34
+ <slot id="before" name="before"></slot>
35
+ <div id="wrapper">
36
+ <div id="label">${this.label}</div>
37
+ <slot id="slot"></slot>
38
+ <input
39
+ id=${this._id}
40
+ @keydown=${this.handleChange.bind(this)}
41
+ @input=${this.handleChange.bind(this)}
42
+ @focusout=${this.handleChange.bind(this)}
43
+ ?required="${this.required}"
44
+ ?disabled="${this.disabled}"
45
+ ?readonly="${this.readonly}"
46
+ autocomplete="${ifDefined(this.autocomplete)}"
47
+ autocapitalize="${ifDefined(this.autocapitalize)}"
48
+ aria-label="${ifDefined(this.label)}"
49
+ type="${ifDefined(this.type)}"
50
+ name="${ifDefined(this.name)}"
51
+ list="${ifDefined(this.list)}"
52
+ pattern="${ifDefined(this.pattern)}"
53
+ minlength="${ifDefined(this.minLength)}"
54
+ maxlength="${ifDefined(this.maxLength)}"
55
+ min="${ifDefined(this.min)}"
56
+ max="${ifDefined(this.max)}"
57
+ tabindex="${this.disabled ? -1 : 0}"
58
+ />
59
+ </div>
60
+ <slot id="after" name="after"></slot>
61
+ </div> `;
31
62
  }
32
63
  handleChange() {
33
64
  this.refreshAttributes();
@@ -46,7 +77,6 @@ let TkTextfield = class TkTextfield extends LitElement {
46
77
  this.$input.focus();
47
78
  }
48
79
  };
49
- TkTextfield.styles = css `${unsafeCSS(css_248z)}`;
50
80
  __decorate([
51
81
  property({ type: String }),
52
82
  __metadata("design:type", String),
package/theme/theme.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __decorate, __metadata } from 'tslib';
2
- import { LitElement, html, css, unsafeCSS } from 'lit';
2
+ import { LitElement, css, unsafeCSS, html } from 'lit';
3
3
  import { property, customElement } from 'lit/decorators.js';
4
4
  import css_248z from './theme.scss.js';
5
5
 
@@ -19,8 +19,13 @@ let TkTheme = class TkTheme extends LitElement {
19
19
  this.forceBody = false;
20
20
  this.inverted = false;
21
21
  }
22
+ static { this.styles = css `
23
+ ${unsafeCSS(css_248z)}
24
+ `; }
22
25
  render() {
23
- return html `<slot></slot>`;
26
+ return html `
27
+ <slot></slot>
28
+ `;
24
29
  }
25
30
  updated() {
26
31
  this.setThemeColor();
@@ -139,7 +144,6 @@ let TkTheme = class TkTheme extends LitElement {
139
144
  document.body.style.setProperty("color", `hsl(${foreground[0]},${foreground[1]},${foreground[2]})`);
140
145
  }
141
146
  };
142
- TkTheme.styles = css `${unsafeCSS(css_248z)}`;
143
147
  __decorate([
144
148
  property(),
145
149
  __metadata("design:type", String)
package/umd/tinkiet.min.d.ts CHANGED
@@ -288,6 +288,7 @@ declare class TkLoading extends TkBox {
288
288
  static get styles(): import("lit").CSSResult[];
289
289
  circle: boolean;
290
290
  indeterminate: boolean;
291
+ value: number;
291
292
  render(): import("lit-html").TemplateResult<1>;
292
293
  }
293
294
  declare global {