@krumio/trailhand-ui 1.8.1 → 1.9.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 (34) hide show
  1. package/dist/components/button/button.d.ts +4 -0
  2. package/dist/components/button/button.d.ts.map +1 -1
  3. package/dist/components/button/button.js +20 -4
  4. package/dist/components/button/button.js.map +1 -1
  5. package/dist/components/checkbox/checkbox.d.ts +31 -0
  6. package/dist/components/checkbox/checkbox.d.ts.map +1 -0
  7. package/dist/components/checkbox/checkbox.js +234 -0
  8. package/dist/components/checkbox/checkbox.js.map +1 -0
  9. package/dist/components/checkbox/index.d.ts +2 -0
  10. package/dist/components/checkbox/index.d.ts.map +1 -0
  11. package/dist/components/checkbox/index.js +2 -0
  12. package/dist/components/checkbox/index.js.map +1 -0
  13. package/dist/components/icon/icon.d.ts +3 -3
  14. package/dist/components/icon/icon.d.ts.map +1 -1
  15. package/dist/components/icon/icon.js +5 -15
  16. package/dist/components/icon/icon.js.map +1 -1
  17. package/dist/components/selector/index.d.ts +2 -0
  18. package/dist/components/selector/index.d.ts.map +1 -0
  19. package/dist/components/selector/index.js +2 -0
  20. package/dist/components/selector/index.js.map +1 -0
  21. package/dist/components/selector/selector.d.ts +33 -0
  22. package/dist/components/selector/selector.d.ts.map +1 -0
  23. package/dist/components/selector/selector.js +225 -0
  24. package/dist/components/selector/selector.js.map +1 -0
  25. package/dist/components/text-input/index.d.ts +2 -0
  26. package/dist/components/text-input/index.d.ts.map +1 -0
  27. package/dist/components/text-input/index.js +2 -0
  28. package/dist/components/text-input/index.js.map +1 -0
  29. package/dist/components/text-input/text-input.d.ts +36 -0
  30. package/dist/components/text-input/text-input.d.ts.map +1 -0
  31. package/dist/components/text-input/text-input.js +216 -0
  32. package/dist/components/text-input/text-input.js.map +1 -0
  33. package/dist/styles/colors.css +57 -0
  34. package/package.json +2 -3
@@ -7,14 +7,18 @@ export interface ButtonProps {
7
7
  name: string;
8
8
  }
9
9
  export declare class Button extends LitElement {
10
+ static formAssociated: boolean;
10
11
  variant: 'primary' | 'secondary' | 'alternate' | 'destructive' | 'confirmation';
11
12
  size: 'small' | 'medium' | 'large';
12
13
  name: string;
13
14
  disabled: boolean;
14
15
  type: 'button' | 'submit' | 'reset';
16
+ private internals;
17
+ constructor();
15
18
  static styles: import("lit").CSSResult;
16
19
  updated(): void;
17
20
  private handleClick;
21
+ formDisabledCallback(disabled: boolean): void;
18
22
  render(): TemplateResult;
19
23
  }
20
24
  //# sourceMappingURL=button.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,MAAM,WAAW,WAAW;IAC1B,OAAO,EACH,SAAS,GACT,WAAW,GACX,WAAW,GACX,aAAa,GACb,cAAc,CAAC;IACnB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,IAAI,EAAE,MAAM,CAAC;CACd;AAED,qBAAa,MAAO,SAAQ,UAAU;IAEpC,OAAO,EACH,SAAS,GACT,WAAW,GACX,WAAW,GACX,aAAa,GACb,cAAc,CAAa;IAG/B,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9C,IAAI,SAAM;IAGV,QAAQ,UAAS;IAGjB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C,OAAgB,MAAM,0BAwGpB;IAEF,OAAO;IAQP,OAAO,CAAC,WAAW;IAmBV,MAAM,IAAI,cAAc;CA0BlC"}
1
+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D,MAAM,WAAW,WAAW;IAC1B,OAAO,EACH,SAAS,GACT,WAAW,GACX,WAAW,GACX,aAAa,GACb,cAAc,CAAC;IACnB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,IAAI,EAAE,MAAM,CAAC;CACd;AAED,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,cAAc,UAAQ;IAG7B,OAAO,EACH,SAAS,GACT,WAAW,GACX,WAAW,GACX,aAAa,GACb,cAAc,CAAa;IAG/B,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9C,IAAI,SAAM;IAGV,QAAQ,UAAS;IAGjB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C,OAAO,CAAC,SAAS,CAAmB;;IAOpC,OAAgB,MAAM,0BAwGpB;IAEF,OAAO;IAQP,OAAO,CAAC,WAAW;IAiCnB,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAI7B,MAAM,IAAI,cAAc;CAuBlC"}
@@ -6,15 +6,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
6
6
  };
7
7
  import { LitElement, html, css } from 'lit';
8
8
  import { property } from 'lit/decorators.js';
9
- import { styleMap } from 'lit/directives/style-map.js';
10
9
  export class Button extends LitElement {
11
10
  constructor() {
12
- super(...arguments);
11
+ super();
13
12
  this.variant = 'primary';
14
13
  this.size = 'medium';
15
14
  this.name = '';
16
15
  this.disabled = false;
17
16
  this.type = 'button';
17
+ this.internals = this.attachInternals();
18
18
  }
19
19
  updated() {
20
20
  if (this.disabled) {
@@ -30,6 +30,20 @@ export class Button extends LitElement {
30
30
  e.stopPropagation();
31
31
  return;
32
32
  }
33
+ // Handle form submission for type="submit"
34
+ if (this.type === 'submit') {
35
+ const form = this.internals.form;
36
+ if (form) {
37
+ // Request form submission
38
+ form.requestSubmit();
39
+ }
40
+ }
41
+ else if (this.type === 'reset') {
42
+ const form = this.internals.form;
43
+ if (form) {
44
+ form.reset();
45
+ }
46
+ }
33
47
  this.dispatchEvent(new CustomEvent('button-click', {
34
48
  bubbles: true,
35
49
  composed: true,
@@ -39,14 +53,15 @@ export class Button extends LitElement {
39
53
  },
40
54
  }));
41
55
  }
56
+ formDisabledCallback(disabled) {
57
+ this.disabled = disabled;
58
+ }
42
59
  render() {
43
- const styles = {};
44
60
  return html `
45
61
  <button
46
62
  type=${this.type}
47
63
  class="trailhand-button trailhand-button--${this
48
64
  .variant} trailhand-button--${this.size}"
49
- style=${styleMap(styles)}
50
65
  ?disabled=${this.disabled}
51
66
  @click=${this.handleClick}
52
67
  >
@@ -65,6 +80,7 @@ export class Button extends LitElement {
65
80
  `;
66
81
  }
67
82
  }
83
+ Button.formAssociated = true;
68
84
  Button.styles = css `
69
85
  :host {
70
86
  display: inline-block;
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAevD,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAEE,YAAO,GAKc,SAAS,CAAC;QAG/B,SAAI,GAAiC,QAAQ,CAAC;QAG9C,SAAI,GAAG,EAAE,CAAC;QAGV,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAkC,QAAQ,CAAC;IAiKjD,CAAC;IArDC,OAAO;QACL,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;QAC7C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,CAAQ;QAC1B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,aAAa,EAAE,CAAC;aACjB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,MAAM,MAAM,GAAG,EAAE,CAAC;QAElB,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,IAAI;oDAC4B,IAAI;aAC7C,OAAO,sBAAsB,IAAI,CAAC,IAAI;gBACjC,QAAQ,CAAC,MAAM,CAAC;oBACZ,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,WAAW;;;;;;;;;;;;;;KAc5B,CAAC;IACJ,CAAC;;AA9Je,aAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwG3B,AAxGqB,CAwGpB;AA3HF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAMI;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACmB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACoB;AAmKjD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC"}
1
+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,31 @@
1
+ import { LitElement, TemplateResult } from 'lit';
2
+ import '../icon/icon';
3
+ export interface CheckboxProps {
4
+ checked: boolean;
5
+ disabled: boolean;
6
+ indeterminate: boolean;
7
+ name: string;
8
+ value: string;
9
+ size: 'small' | 'medium' | 'large';
10
+ }
11
+ export declare class Checkbox extends LitElement {
12
+ static formAssociated: boolean;
13
+ checked: boolean;
14
+ disabled: boolean;
15
+ indeterminate: boolean;
16
+ name: string;
17
+ value: string;
18
+ size: 'small' | 'medium' | 'large';
19
+ private internals;
20
+ constructor();
21
+ static styles: import("lit").CSSResult;
22
+ connectedCallback(): void;
23
+ private emitChangeEvent;
24
+ private handleChange;
25
+ private updateFormValue;
26
+ formResetCallback(): void;
27
+ formDisableCallback(disabled: boolean): void;
28
+ updated(changedProperties: Map<string, any>): void;
29
+ render(): TemplateResult;
30
+ }
31
+ //# sourceMappingURL=checkbox.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,OAAO,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACpC;AAED,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAG7B,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,aAAa,UAAS;IAGtB,IAAI,SAAM;IAGV,KAAK,SAAQ;IAGb,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9C,OAAO,CAAC,SAAS,CAAmB;;IAOpC,MAAM,CAAC,MAAM,0BAsGX;IAEF,iBAAiB;IASjB,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,eAAe;IAQvB,iBAAiB;IAMjB,mBAAmB,CAAC,QAAQ,EAAE,OAAO;IAIrC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAa3C,MAAM,IAAI,cAAc;CA4BzB"}
@@ -0,0 +1,234 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ 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;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { LitElement, html, css } from 'lit';
8
+ import { property } from 'lit/decorators.js';
9
+ import '../icon/icon';
10
+ export class Checkbox extends LitElement {
11
+ constructor() {
12
+ super();
13
+ this.checked = false;
14
+ this.disabled = false;
15
+ this.indeterminate = false;
16
+ this.name = '';
17
+ this.value = 'on';
18
+ this.size = 'medium';
19
+ this.internals = this.attachInternals();
20
+ }
21
+ connectedCallback() {
22
+ super.connectedCallback();
23
+ // Check if we're in a disabled fieldset on initial connection
24
+ const fieldset = this.closest('fieldset');
25
+ if (fieldset?.disabled) {
26
+ this.disabled = true;
27
+ }
28
+ }
29
+ emitChangeEvent() {
30
+ // emit native change events for form integration
31
+ this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
32
+ this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
33
+ // emit a custom event with the current state of the checkbox
34
+ this.dispatchEvent(new CustomEvent('checkbox-change', {
35
+ bubbles: true,
36
+ composed: true,
37
+ detail: {
38
+ checked: this.checked,
39
+ indeterminate: this.indeterminate,
40
+ name: this.name,
41
+ value: this.value,
42
+ },
43
+ }));
44
+ }
45
+ handleChange(e) {
46
+ if (this.disabled)
47
+ return;
48
+ const input = e.target;
49
+ this.checked = input.checked;
50
+ this.indeterminate = false;
51
+ this.updateFormValue();
52
+ this.emitChangeEvent();
53
+ }
54
+ updateFormValue() {
55
+ if (this.checked) {
56
+ this.internals.setFormValue(this.value);
57
+ }
58
+ else {
59
+ this.internals.setFormValue(null);
60
+ }
61
+ }
62
+ formResetCallback() {
63
+ this.checked = false;
64
+ this.indeterminate = false;
65
+ this.updateFormValue();
66
+ }
67
+ formDisableCallback(disabled) {
68
+ this.disabled = disabled;
69
+ }
70
+ updated(changedProperties) {
71
+ // Update form value whenever checked or value changes
72
+ if (changedProperties.has('checked') || changedProperties.has('value')) {
73
+ this.updateFormValue();
74
+ }
75
+ // Sync indeterminate to native input
76
+ if (changedProperties.has('indeterminate')) {
77
+ const input = this.shadowRoot?.querySelector('input');
78
+ if (input)
79
+ input.indeterminate = this.indeterminate;
80
+ }
81
+ }
82
+ render() {
83
+ return html `
84
+ <label class="wrapper">
85
+ <input
86
+ type="checkbox"
87
+ .checked=${this.checked}
88
+ .indeterminate=${this.indeterminate}
89
+ ?disabled=${this.disabled}
90
+ aria-checked=${this.indeterminate
91
+ ? 'mixed'
92
+ : this.checked
93
+ ? 'true'
94
+ : 'false'}
95
+ @change=${this.handleChange}
96
+ />
97
+
98
+ <span class="control">
99
+ <trailhand-icon
100
+ name=${this.indeterminate ? 'minus' : 'check'}
101
+ ></trailhand-icon>
102
+ </span>
103
+
104
+ <span class="label">
105
+ <slot></slot>
106
+ </span>
107
+ </label>
108
+ `;
109
+ }
110
+ }
111
+ Checkbox.formAssociated = true;
112
+ Checkbox.styles = css `
113
+ :host {
114
+ display: inline-block;
115
+ font-family: 'Montserrat', system-ui, sans-serif;
116
+ }
117
+
118
+ .wrapper {
119
+ display: flex;
120
+ align-items: center;
121
+ justify-content: flex-start;
122
+ gap: 8px;
123
+ cursor: pointer;
124
+ font-weight: 500;
125
+ }
126
+
127
+ /* Hide native checkbox */
128
+ input {
129
+ position: absolute;
130
+ opacity: 0;
131
+ pointer-events: none;
132
+ }
133
+
134
+ .label {
135
+ color: var(--th-color-text-primary, #000000);
136
+ }
137
+
138
+ /* Custom box */
139
+ .control {
140
+ width: 16px;
141
+ height: 16px;
142
+ border-radius: 4px;
143
+ border: 1.5px solid var(--th-checkbox-border, #d7d7d7);
144
+ display: flex;
145
+ align-items: center;
146
+ justify-content: center;
147
+ transition: all 0.15s ease;
148
+ background-color: transparent;
149
+ }
150
+
151
+ .control trailhand-icon {
152
+ opacity: 0;
153
+ }
154
+
155
+ /* Size */
156
+ :host([size='small']) .control {
157
+ width: 12px;
158
+ height: 12px;
159
+ }
160
+ :host([size='small']) .wrapper {
161
+ font-size: 12px;
162
+ }
163
+ :host([size='medium']) .control {
164
+ width: 14px;
165
+ height: 14px;
166
+ }
167
+ :host([size='medium']) .wrapper {
168
+ font-size: 14px;
169
+ }
170
+ :host([size='large']) .control {
171
+ width: 16px;
172
+ height: 16px;
173
+ }
174
+ :host([size='large']) .wrapper {
175
+ font-size: 16px;
176
+ }
177
+
178
+ /* Focus */
179
+ input:focus-visible + .control {
180
+ outline: 2px solid var(--th-checkbox-checked-bg, #005cb9);
181
+ outline-offset: 2px;
182
+ }
183
+
184
+ /* Checked state */
185
+ :host([checked]) .control {
186
+ background: var(--th-checkbox-checked-bg, #005cb9);
187
+ border-color: var(--th-checkbox-checked-bg, #005cb9);
188
+ color: white;
189
+ }
190
+ :host([checked]) .control trailhand-icon[name='check'] {
191
+ opacity: 1;
192
+ }
193
+
194
+ /* Indeterminate state */
195
+ :host([indeterminate]) .control {
196
+ background: var(--th-checkbox-checked-bg, #005cb9);
197
+ border-color: var(--th-checkbox-checked-bg, #005cb9);
198
+ color: white;
199
+ }
200
+ :host([indeterminate]) .control trailhand-icon[name='minus'] {
201
+ opacity: 1;
202
+ }
203
+
204
+ /* Disabled */
205
+ :host([disabled]) .control {
206
+ background: var(--th-checkbox-disabled-bg, #e0e0e0);
207
+ border-color: var(--th-checkbox-disabled-border, #c0c0c0);
208
+ color: var(--th-checkbox-disabled-check, #8d8d8d);
209
+ }
210
+ :host([disabled]) .wrapper {
211
+ color: var(--th-checkbox-disabled-check, #8d8d8d);
212
+ cursor: not-allowed;
213
+ }
214
+ `;
215
+ __decorate([
216
+ property({ type: Boolean, reflect: true })
217
+ ], Checkbox.prototype, "checked", void 0);
218
+ __decorate([
219
+ property({ type: Boolean, reflect: true })
220
+ ], Checkbox.prototype, "disabled", void 0);
221
+ __decorate([
222
+ property({ type: Boolean, reflect: true })
223
+ ], Checkbox.prototype, "indeterminate", void 0);
224
+ __decorate([
225
+ property({ type: String })
226
+ ], Checkbox.prototype, "name", void 0);
227
+ __decorate([
228
+ property({ type: String })
229
+ ], Checkbox.prototype, "value", void 0);
230
+ __decorate([
231
+ property({ type: String })
232
+ ], Checkbox.prototype, "size", void 0);
233
+ customElements.define('trailhand-checkbox', Checkbox);
234
+ //# sourceMappingURL=checkbox.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ export { Checkbox } from './checkbox';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { Checkbox } from './checkbox';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
@@ -8,16 +8,16 @@ declare const iconMap: {
8
8
  globe: import("@fortawesome/fontawesome-common-types").IconDefinition;
9
9
  home: import("@fortawesome/fontawesome-common-types").IconDefinition;
10
10
  user: import("@fortawesome/fontawesome-common-types").IconDefinition;
11
- grid: import("@fortawesome/fontawesome-common-types").IconDefinition;
11
+ table: import("@fortawesome/fontawesome-common-types").IconDefinition;
12
12
  rocket: import("@fortawesome/fontawesome-common-types").IconDefinition;
13
13
  gauge: import("@fortawesome/fontawesome-common-types").IconDefinition;
14
14
  list: import("@fortawesome/fontawesome-common-types").IconDefinition;
15
15
  folderPlus: import("@fortawesome/fontawesome-common-types").IconDefinition;
16
- solarSystem: import("@fortawesome/fontawesome-common-types").IconDefinition;
16
+ gears: import("@fortawesome/fontawesome-common-types").IconDefinition;
17
17
  shoppingBag: import("@fortawesome/fontawesome-common-types").IconDefinition;
18
18
  info: import("@fortawesome/fontawesome-common-types").IconDefinition;
19
19
  chartLine: import("@fortawesome/fontawesome-common-types").IconDefinition;
20
- folderGear: import("@fortawesome/fontawesome-common-types").IconDefinition;
20
+ sliders: import("@fortawesome/fontawesome-common-types").IconDefinition;
21
21
  database: import("@fortawesome/fontawesome-common-types").IconDefinition;
22
22
  };
23
23
  export declare const availableIcons: (keyof typeof iconMap)[];
@@ -1 +1 @@
1
- {"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAwB5C,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;CAoBZ,CAAC;AAEF,eAAO,MAAM,cAAc,EAA2B,CAAC,MAAM,OAAO,OAAO,CAAC,EAAE,CAAC;AAI/E,KAAK,cAAc,GAAG,MAAM,OAAO,OAAO,CAAC;AAE3C,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,cAAc,CAAC;CACtB;AAED,qBAAa,IAAK,SAAQ,UAAU;IACN,IAAI,EAAE,cAAc,CAAU;IAE1D,MAAM,CAAC,MAAM,0BAmBX;IAEF,MAAM;CAMP"}
1
+ {"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AA2B5C,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;CAoBZ,CAAC;AAEF,eAAO,MAAM,cAAc,EAA2B,CAAC,MAAM,OAAO,OAAO,CAAC,EAAE,CAAC;AAI/E,KAAK,cAAc,GAAG,MAAM,OAAO,OAAO,CAAC;AAE3C,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,cAAc,CAAC;CACtB;AAED,qBAAa,IAAK,SAAQ,UAAU;IACN,IAAI,EAAE,cAAc,CAAU;IAE1D,MAAM,CAAC,MAAM,0BAUX;IAEF,MAAM;CAMP"}
@@ -7,8 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { LitElement, html, css } from 'lit';
8
8
  import { property } from 'lit/decorators.js';
9
9
  import { library, icon } from '@fortawesome/fontawesome-svg-core';
10
- import { faBug, faCircleExclamation, faCirclePause, faCirclePlay, faCircleXmark, faGrid2, faRocket, faGauge, faSquareList, faFolderPlus, faSolarSystem, faBagShopping, faCircleInfo, faChartLine, faFolderGear, faDatabase, } from '@fortawesome/pro-duotone-svg-icons';
11
- import { faGlobe, faHome, faUser } from '@fortawesome/free-solid-svg-icons';
10
+ import { faGlobe, faHome, faUser, faBug, faCircleExclamation, faCirclePause, faCirclePlay, faCircleXmark, faTableCellsLarge, faRocket, faGauge, faTableList, faFolderPlus, faGears, faBagShopping, faCircleInfo, faChartLine, faSliders, faDatabase, } from '@fortawesome/free-solid-svg-icons';
12
11
  const iconMap = {
13
12
  bug: faBug,
14
13
  error: faCircleExclamation,
@@ -18,16 +17,16 @@ const iconMap = {
18
17
  globe: faGlobe,
19
18
  home: faHome,
20
19
  user: faUser,
21
- grid: faGrid2,
20
+ table: faTableCellsLarge,
22
21
  rocket: faRocket,
23
22
  gauge: faGauge,
24
- list: faSquareList,
23
+ list: faTableList,
25
24
  folderPlus: faFolderPlus,
26
- solarSystem: faSolarSystem,
25
+ gears: faGears,
27
26
  shoppingBag: faBagShopping,
28
27
  info: faCircleInfo,
29
28
  chartLine: faChartLine,
30
- folderGear: faFolderGear,
29
+ sliders: faSliders,
31
30
  database: faDatabase,
32
31
  };
33
32
  export const availableIcons = Object.keys(iconMap);
@@ -55,15 +54,6 @@ Icon.styles = css `
55
54
  width: 100%;
56
55
  height: 100%;
57
56
  }
58
- /* Duotone icon styling */
59
- svg .fa-primary {
60
- fill: var(--fa-primary-color, currentColor);
61
- opacity: var(--fa-primary-opacity, 1);
62
- }
63
- svg .fa-secondary {
64
- fill: var(--fa-secondary-color, currentColor);
65
- opacity: var(--fa-secondary-opacity, 0.4);
66
- }
67
57
  `;
68
58
  __decorate([
69
59
  property({ type: String })
@@ -1 +1 @@
1
- {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EACL,KAAK,EACL,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,aAAa,EACb,OAAO,EACP,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,UAAU,GACX,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAG5E,MAAM,OAAO,GAAG;IACd,GAAG,EAAE,KAAK;IACV,KAAK,EAAE,mBAAmB;IAC1B,KAAK,EAAE,aAAa;IACpB,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE,aAAa;IACpB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,YAAY;IAClB,UAAU,EAAE,YAAY;IACxB,WAAW,EAAE,aAAa;IAC1B,WAAW,EAAE,aAAa;IAC1B,IAAI,EAAE,YAAY;IAClB,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE,YAAY;IACxB,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAA6B,CAAC;AAE/E,OAAO,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;AAQvC,MAAM,OAAO,IAAK,SAAQ,UAAU;IAApC;;QAC8B,SAAI,GAAmB,MAAM,CAAC;IA6B5D,CAAC;IANC,MAAM;QACJ,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACnC,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC;QAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7B,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACjD,CAAC;;AA1BM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;GAmBlB,AAnBY,CAmBX;AArB0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kCAA+B;AA+B5D,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC"}
1
+ {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAC;AAElE,OAAO,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,KAAK,EACL,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,QAAQ,EACR,OAAO,EACP,WAAW,EACX,YAAY,EACZ,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,SAAS,EACT,UAAU,GACX,MAAM,mCAAmC,CAAC;AAG3C,MAAM,OAAO,GAAG;IACd,GAAG,EAAE,KAAK;IACV,KAAK,EAAE,mBAAmB;IAC1B,KAAK,EAAE,aAAa;IACpB,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE,aAAa;IACpB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,iBAAiB;IACxB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,WAAW;IACjB,UAAU,EAAE,YAAY;IACxB,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,aAAa;IAC1B,IAAI,EAAE,YAAY;IAClB,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAA6B,CAAC;AAE/E,OAAO,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;AAQvC,MAAM,OAAO,IAAK,SAAQ,UAAU;IAApC;;QAC8B,SAAI,GAAmB,MAAM,CAAC;IAoB5D,CAAC;IANC,MAAM;QACJ,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACnC,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC;QAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7B,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACjD,CAAC;;AAjBM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;GAUlB,AAVY,CAUX;AAZ0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kCAA+B;AAsB5D,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { Selector } from './selector';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/selector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { Selector } from './selector';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/selector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
@@ -0,0 +1,33 @@
1
+ import { LitElement, TemplateResult } from 'lit';
2
+ import '../icon/icon';
3
+ export interface SelectorProps {
4
+ text: string;
5
+ subtext: string;
6
+ description: string;
7
+ disabled: boolean;
8
+ checked: boolean;
9
+ name: string;
10
+ value: string;
11
+ }
12
+ export declare class Selector extends LitElement {
13
+ static formAssociated: boolean;
14
+ text: string;
15
+ subtext: string;
16
+ description: string;
17
+ checked: boolean;
18
+ disabled: boolean;
19
+ name: string;
20
+ value: string;
21
+ private internals;
22
+ constructor();
23
+ static styles: import("lit").CSSResult;
24
+ connectedCallback(): void;
25
+ private emitChangeEvent;
26
+ private handleChange;
27
+ private updateFormValue;
28
+ formResetCallback(): void;
29
+ formDisableCallback(disabled: boolean): void;
30
+ updated(changedProperties: Map<string, any>): void;
31
+ render(): TemplateResult;
32
+ }
33
+ //# sourceMappingURL=selector.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"selector.d.ts","sourceRoot":"","sources":["../../../src/components/selector/selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAG7B,IAAI,SAAM;IAGV,OAAO,SAAM;IAGb,WAAW,SAAM;IAGjB,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,OAAO,CAAC,SAAS,CAAmB;;IAOpC,MAAM,CAAC,MAAM,0BA8FX;IAEF,iBAAiB;IASjB,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,YAAY;IAqBpB,OAAO,CAAC,eAAe;IAQvB,iBAAiB;IAKjB,mBAAmB,CAAC,QAAQ,EAAE,OAAO;IAIrC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAO3C,MAAM,IAAI,cAAc;CAuBzB"}
@@ -0,0 +1,225 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ 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;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { LitElement, html, css } from 'lit';
8
+ import { property } from 'lit/decorators.js';
9
+ import '../icon/icon';
10
+ export class Selector extends LitElement {
11
+ constructor() {
12
+ super();
13
+ this.text = '';
14
+ this.subtext = '';
15
+ this.description = '';
16
+ this.checked = false;
17
+ this.disabled = false;
18
+ this.name = '';
19
+ this.value = '';
20
+ this.internals = this.attachInternals();
21
+ }
22
+ connectedCallback() {
23
+ super.connectedCallback();
24
+ // Check if we're in a disabled fieldset on initial connection
25
+ const fieldset = this.closest('fieldset');
26
+ if (fieldset?.disabled) {
27
+ this.disabled = true;
28
+ }
29
+ }
30
+ emitChangeEvent() {
31
+ // emit native change event for form integration
32
+ this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
33
+ // emit a custom event with the current state of the selector
34
+ this.dispatchEvent(new CustomEvent('selector-change', {
35
+ bubbles: true,
36
+ composed: true,
37
+ detail: {
38
+ checked: this.checked,
39
+ name: this.name,
40
+ value: this.value,
41
+ },
42
+ }));
43
+ }
44
+ handleChange(e) {
45
+ if (this.disabled)
46
+ return;
47
+ const input = e.target;
48
+ this.checked = input.checked;
49
+ // Uncheck all other selectors with the same name in the same root
50
+ if (this.checked) {
51
+ const root = this.getRootNode();
52
+ root
53
+ .querySelectorAll(`trailhand-selector[name="${this.name}"]`)
54
+ .forEach((el) => {
55
+ if (el !== this)
56
+ el.checked = false;
57
+ });
58
+ }
59
+ this.updateFormValue();
60
+ this.emitChangeEvent();
61
+ }
62
+ updateFormValue() {
63
+ if (this.checked) {
64
+ this.internals.setFormValue(this.value);
65
+ }
66
+ else {
67
+ this.internals.setFormValue(null);
68
+ }
69
+ }
70
+ formResetCallback() {
71
+ this.checked = false;
72
+ this.updateFormValue();
73
+ }
74
+ formDisableCallback(disabled) {
75
+ this.disabled = disabled;
76
+ }
77
+ updated(changedProperties) {
78
+ // Update form value whenever checked or value changes
79
+ if (changedProperties.has('checked') || changedProperties.has('value')) {
80
+ this.updateFormValue();
81
+ }
82
+ }
83
+ render() {
84
+ return html `
85
+ <label class="wrapper">
86
+ <input
87
+ type="radio"
88
+ name=${this.name}
89
+ value=${this.value}
90
+ .checked=${this.checked}
91
+ ?disabled=${this.disabled}
92
+ aria-checked=${this.checked ? 'true' : 'false'}
93
+ @change=${this.handleChange}
94
+ />
95
+
96
+ <div class="control">
97
+ <span class="icon"><slot name="icon"></slot></span>
98
+ <p class="text">
99
+ ${this.text}<span class="subtext">${this.subtext}</span>
100
+ </p>
101
+ <p class="description">${this.description}</p>
102
+ </div>
103
+ </label>
104
+ `;
105
+ }
106
+ }
107
+ Selector.formAssociated = true;
108
+ Selector.styles = css `
109
+ :host {
110
+ display: block;
111
+ width: 100%;
112
+ box-sizing: border-box;
113
+ font-family: 'Montserrat', system-ui, sans-serif;
114
+ }
115
+
116
+ .wrapper {
117
+ cursor: pointer;
118
+ }
119
+
120
+ /* Hide native Selector */
121
+ input {
122
+ position: absolute;
123
+ opacity: 0;
124
+ pointer-events: none;
125
+ }
126
+
127
+ /* Custom box */
128
+ .control {
129
+ border-radius: 8px;
130
+ padding: 16px;
131
+ border: 1px solid var(--th-selector-border, #d7d7d7);
132
+ display: flex;
133
+ flex-direction: column;
134
+ justify-content: center;
135
+ transition: all 0.15s ease;
136
+ background-color: transparent;
137
+ gap: 8px;
138
+ }
139
+
140
+ .text {
141
+ font-size: 14px;
142
+ color: var(--th-selector-text-color, #000000);
143
+ font-weight: 500;
144
+ display: flex;
145
+ align-items: baseline;
146
+ gap: 4px;
147
+ margin: 0;
148
+ }
149
+
150
+ .subtext {
151
+ font-size: 11px;
152
+ font-weight: 600;
153
+ color: var(--th-selector-subtext-color, #666666);
154
+ }
155
+
156
+ .description {
157
+ font-size: 12px;
158
+ color: var(--th-selector-description-color, #666666);
159
+ font-weight: 500;
160
+ margin: 0;
161
+ }
162
+
163
+ .icon {
164
+ color: var(--th-selector-icon-color, #333333);
165
+ }
166
+
167
+ /* Focus */
168
+ input:focus-visible + .control {
169
+ outline: 2px solid var(--th-selector-checked-bg, #005cb9);
170
+ outline-offset: 2px;
171
+ }
172
+
173
+ /* Checked state */
174
+ :host([checked]) .control {
175
+ background-color: color-mix(
176
+ in srgb,
177
+ var(--th-selector-checked-bg, #005cb9) 10%,
178
+ transparent
179
+ );
180
+ border-color: var(--th-selector-checked-bg, #005cb9);
181
+ }
182
+
183
+ /* Disabled */
184
+ :host([disabled]) .control {
185
+ color: var(--th-selector-disabled-color);
186
+ opacity: 0.6;
187
+ background-color: color-mix(
188
+ in srgb,
189
+ var(--th-selector-disabled-bg, #d7d7d7) 10%,
190
+ transparent
191
+ );
192
+ }
193
+ :host([disabled]) .text,
194
+ :host([disabled]) .subtext,
195
+ :host([disabled]) .description,
196
+ :host([disabled]) .icon {
197
+ color: var(--th-selector-disabled-color);
198
+ }
199
+ :host([disabled]) .wrapper {
200
+ cursor: not-allowed;
201
+ }
202
+ `;
203
+ __decorate([
204
+ property({ type: String })
205
+ ], Selector.prototype, "text", void 0);
206
+ __decorate([
207
+ property({ type: String })
208
+ ], Selector.prototype, "subtext", void 0);
209
+ __decorate([
210
+ property({ type: String })
211
+ ], Selector.prototype, "description", void 0);
212
+ __decorate([
213
+ property({ type: Boolean, reflect: true })
214
+ ], Selector.prototype, "checked", void 0);
215
+ __decorate([
216
+ property({ type: Boolean, reflect: true })
217
+ ], Selector.prototype, "disabled", void 0);
218
+ __decorate([
219
+ property({ type: String, reflect: true })
220
+ ], Selector.prototype, "name", void 0);
221
+ __decorate([
222
+ property({ type: String, reflect: true })
223
+ ], Selector.prototype, "value", void 0);
224
+ customElements.define('trailhand-selector', Selector);
225
+ //# sourceMappingURL=selector.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"selector.js","sourceRoot":"","sources":["../../../src/components/selector/selector.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,cAAc,CAAC;AAYtB,MAAM,OAAO,QAAS,SAAQ,UAAU;IA2BtC;QACE,KAAK,EAAE,CAAC;QAxBV,SAAI,GAAG,EAAE,CAAC;QAGV,YAAO,GAAG,EAAE,CAAC;QAGb,gBAAW,GAAG,EAAE,CAAC;QAGjB,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,EAAE,CAAC;QAGV,UAAK,GAAG,EAAE,CAAC;QAOT,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1C,CAAC;IAkGD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,8DAA8D;QAC9D,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAC1C,IAAI,QAAQ,EAAE,QAAQ,EAAE,CAAC;YACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,gDAAgD;QAChD,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC3E,6DAA6D;QAC7D,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,CAAQ;QAC3B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;QAE7B,kEAAkE;QAClE,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAA2B,CAAC;YACzD,IAAI;iBACD,gBAAgB,CAAW,4BAA4B,IAAI,CAAC,IAAI,IAAI,CAAC;iBACrE,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;gBACd,IAAI,EAAE,KAAK,IAAI;oBAAE,EAAE,CAAC,OAAO,GAAG,KAAK,CAAC;YACtC,CAAC,CAAC,CAAC;QACP,CAAC;QAED,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,eAAe;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,mBAAmB,CAAC,QAAiB;QACnC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IAED,OAAO,CAAC,iBAAmC;QACzC,sDAAsD;QACtD,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACvE,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,IAAI;kBACR,IAAI,CAAC,KAAK;qBACP,IAAI,CAAC,OAAO;sBACX,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBACpC,IAAI,CAAC,YAAY;;;;;;cAMvB,IAAI,CAAC,IAAI,yBAAyB,IAAI,CAAC,OAAO;;mCAEzB,IAAI,CAAC,WAAW;;;KAG9C,CAAC;IACJ,CAAC;;AA5NM,uBAAc,GAAG,IAAI,AAAP,CAAQ;AA+BtB,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FlB,AA9FY,CA8FX;AA1HF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAChC;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC/B;AA0Mb,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { TextInput } from './text-input';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/text-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { TextInput } from './text-input';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/text-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}
@@ -0,0 +1,36 @@
1
+ import { LitElement, TemplateResult } from 'lit';
2
+ export interface TextInputProps {
3
+ name: string;
4
+ value: string;
5
+ placeholder: string;
6
+ disabled: boolean;
7
+ size: 'small' | 'medium' | 'large';
8
+ label?: string;
9
+ required?: boolean;
10
+ invalid?: boolean;
11
+ }
12
+ export declare class TextInput extends LitElement {
13
+ static formAssociated: boolean;
14
+ name: string;
15
+ value: string;
16
+ placeholder: string;
17
+ disabled: boolean;
18
+ size: 'small' | 'medium' | 'large';
19
+ label: string;
20
+ required: boolean;
21
+ invalid: boolean;
22
+ private internals;
23
+ private _input;
24
+ constructor();
25
+ static styles: import("lit").CSSResult;
26
+ connectedCallback(): void;
27
+ private emitChangeEvent;
28
+ private handleInput;
29
+ firstUpdated(): void;
30
+ private _updateValidity;
31
+ formResetCallback(): void;
32
+ formDisableCallback(disabled: boolean): void;
33
+ formAssociatedCallback(form: HTMLFormElement | null): void;
34
+ render(): TemplateResult;
35
+ }
36
+ //# sourceMappingURL=text-input.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../../src/components/text-input/text-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,cAAc,UAAQ;IAG7B,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,QAAQ,UAAS;IAGjB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9C,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAEhB,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,MAAM,CAAmB;;IAOjC,MAAM,CAAC,MAAM,0BAqFX;IAEF,iBAAiB;IASjB,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,WAAW;IAYnB,YAAY;IAQZ,OAAO,CAAC,eAAe;IAcvB,iBAAiB;IAKjB,mBAAmB,CAAC,QAAQ,EAAE,OAAO;IAIrC,sBAAsB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI;IAMnD,MAAM,IAAI,cAAc;CAwBzB"}
@@ -0,0 +1,216 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ 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;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { LitElement, html, css } from 'lit';
8
+ import { property } from 'lit/decorators.js';
9
+ export class TextInput extends LitElement {
10
+ constructor() {
11
+ super();
12
+ this.name = '';
13
+ this.value = '';
14
+ this.placeholder = '';
15
+ this.disabled = false;
16
+ this.size = 'medium';
17
+ this.label = '';
18
+ this.required = false;
19
+ this.invalid = false;
20
+ this.internals = this.attachInternals();
21
+ }
22
+ connectedCallback() {
23
+ super.connectedCallback();
24
+ // Check if we're in a disabled fieldset on initial connection
25
+ const fieldset = this.closest('fieldset');
26
+ if (fieldset?.disabled) {
27
+ this.disabled = true;
28
+ }
29
+ }
30
+ emitChangeEvent() {
31
+ // emit native change event for form integration
32
+ this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
33
+ // emit a custom event with the current value of the input
34
+ this.dispatchEvent(new CustomEvent('text-input-change', {
35
+ detail: { value: this.value, name: this.name },
36
+ bubbles: true,
37
+ composed: true,
38
+ }));
39
+ }
40
+ handleInput(e) {
41
+ const target = e.target;
42
+ this.value = target.value;
43
+ if (this.value) {
44
+ this.internals.setFormValue(this.value);
45
+ }
46
+ else {
47
+ this.internals.setFormValue(null);
48
+ }
49
+ this.emitChangeEvent();
50
+ }
51
+ firstUpdated() {
52
+ this._input = this.shadowRoot.querySelector('input');
53
+ this._input.addEventListener('input', () => {
54
+ this._updateValidity();
55
+ });
56
+ }
57
+ _updateValidity() {
58
+ const isValid = this._input.validity.valid;
59
+ this.invalid = !isValid;
60
+ if (isValid) {
61
+ this.internals.setValidity({});
62
+ }
63
+ else {
64
+ this.internals.setValidity(this._input.validity, this._input.validationMessage, this._input);
65
+ }
66
+ }
67
+ formResetCallback() {
68
+ this.value = '';
69
+ this.internals.setFormValue(this.value);
70
+ }
71
+ formDisableCallback(disabled) {
72
+ this.disabled = disabled;
73
+ }
74
+ formAssociatedCallback(form) {
75
+ form?.addEventListener('submit', () => {
76
+ this._updateValidity();
77
+ });
78
+ }
79
+ render() {
80
+ return html `
81
+ <div class="wrapper">
82
+ <label for=${this.name} class="input-label"
83
+ >${this.label}
84
+ <span class="required-indicator"
85
+ >${this.required ? '*' : ''}</span
86
+ ></label
87
+ >
88
+ <div class="input-wrapper">
89
+ <input
90
+ type="text"
91
+ name=${this.name}
92
+ .value=${this.value}
93
+ placeholder=${this.placeholder}
94
+ ?disabled=${this.disabled}
95
+ ?required=${this.required}
96
+ @input=${this.handleInput}
97
+ />
98
+ <span class="icon"><slot name="icon"></slot></span>
99
+ </div>
100
+ </div>
101
+ `;
102
+ }
103
+ }
104
+ TextInput.formAssociated = true;
105
+ TextInput.styles = css `
106
+ :host {
107
+ display: inline-block;
108
+ font-family: 'Montserrat', system-ui, sans-serif;
109
+ }
110
+
111
+ .wrapper {
112
+ display: flex;
113
+ flex-direction: column;
114
+ gap: 0.25rem;
115
+ }
116
+
117
+ label {
118
+ font-size: 11px;
119
+ color: var(--th-input-label, #000000);
120
+ }
121
+
122
+ label .required-indicator {
123
+ color: var(--th-color-red, #bf1e1e);
124
+ }
125
+
126
+ .input-wrapper {
127
+ position: relative;
128
+ display: flex;
129
+ align-items: center;
130
+ font-size: 14px;
131
+ }
132
+
133
+ input {
134
+ width: 100%;
135
+ padding: 0.75em 3em 0.75em 16px;
136
+ border-radius: 8px;
137
+ border: 1px solid var(--th-input-border, #d7d7d7);
138
+ outline: none;
139
+ background: transparent;
140
+ transition: 0.2s ease;
141
+ font-size: 14px;
142
+ color: var(--th-input-text, #333);
143
+ }
144
+
145
+ input:disabled {
146
+ background-color: var(--th-input-bg, transparent);
147
+ }
148
+
149
+ input::placeholder {
150
+ color: var(--th-input-placeholder, #d7d7d7);
151
+ }
152
+
153
+ input:focus {
154
+ border-color: var(--th-input-focus-border, #005cb9);
155
+ }
156
+
157
+ .icon {
158
+ position: absolute;
159
+ right: 1em;
160
+ pointer-events: none;
161
+ color: var(--th-input-icon-color, #d7d7d7);
162
+ }
163
+
164
+ /* Sizes */
165
+ :host([size='small']) .input-wrapper {
166
+ font-size: 12px;
167
+ }
168
+ :host([size='small']) input {
169
+ font-size: 12px;
170
+ }
171
+ :host([size='large']) .input-wrapper {
172
+ font-size: 16px;
173
+ }
174
+ :host([size='large']) input {
175
+ font-size: 16px;
176
+ }
177
+
178
+ /* Disabled */
179
+ input:disabled {
180
+ cursor: not-allowed;
181
+ }
182
+ :host([disabled]) label {
183
+ color: var(--th-input-label-disabled, #999);
184
+ }
185
+
186
+ /* Invalid */
187
+ :host([invalid]) input {
188
+ border-color: var(--th-input-border-invalid, #9f3a3a);
189
+ }
190
+ `;
191
+ __decorate([
192
+ property({ type: String })
193
+ ], TextInput.prototype, "name", void 0);
194
+ __decorate([
195
+ property({ type: String })
196
+ ], TextInput.prototype, "value", void 0);
197
+ __decorate([
198
+ property({ type: String })
199
+ ], TextInput.prototype, "placeholder", void 0);
200
+ __decorate([
201
+ property({ type: Boolean, reflect: true })
202
+ ], TextInput.prototype, "disabled", void 0);
203
+ __decorate([
204
+ property({ type: String, reflect: true })
205
+ ], TextInput.prototype, "size", void 0);
206
+ __decorate([
207
+ property({ type: String })
208
+ ], TextInput.prototype, "label", void 0);
209
+ __decorate([
210
+ property({ type: Boolean })
211
+ ], TextInput.prototype, "required", void 0);
212
+ __decorate([
213
+ property({ type: Boolean, reflect: true })
214
+ ], TextInput.prototype, "invalid", void 0);
215
+ customElements.define('trailhand-text-input', TextInput);
216
+ //# sourceMappingURL=text-input.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../../src/components/text-input/text-input.ts"],"names":[],"mappings":"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"}
@@ -114,6 +114,35 @@
114
114
  --th-progress-bar-title-color: var(--th-color-text-primary);
115
115
  --th-progress-bar-label-color: var(--th-color-text-secondary);
116
116
 
117
+ /* Checkbox */
118
+ --th-checkbox-border: var(--th-color-grey-300);
119
+ --th-checkbox-checked-bg: var(--th-color-dark-primary);
120
+ --th-checkbox-disabled-bg: var(--th-color-grey-300);
121
+ --th-checkbox-disabled-border: var(--th-color-grey-300);
122
+ --th-checkbox-disabled-check: var(--th-color-grey-500);
123
+
124
+ /* Text Input */
125
+ --th-input-border: var(--th-color-grey-300);
126
+ --th-input-focus-border: var(--th-color-dark-primary);
127
+ --th-input-border-invalid: var(--th-color-red);
128
+ --th-input-label: var(--th-color-grey-700);
129
+ --th-input-label-disabled: var(--th-color-grey-500);
130
+ --th-input-placeholder: var(--th-color-grey-400);
131
+ --th-input-text: var(--th-color-black);
132
+ --th-input-bg: 'transparent';
133
+ --th-input-icon-color: var(--th-color-grey-400);
134
+
135
+ /* Selector */
136
+ --th-selector-border: var(--th-color-grey-300);
137
+ --th-selector-text-color: var(--th-color-text-primary);
138
+ --th-selector-subtext-color: var(--th-color-primary);
139
+ --th-selector-description-color: var(--th-color-text-secondary);
140
+ --th-selector-icon-color: var(--th-color-dark-primary);
141
+ --th-selector-checked-border: var(--th-color-dark-primary);
142
+ --th-selector-checked-bg: var(--th-color-primary);
143
+ --th-selector-disabled-color: var(--th-color-grey-500);
144
+ --th-selector-disabled-bg: transparent;
145
+
117
146
  /* Shadow colors using opacity */
118
147
  --th-color-shadow: rgba(0, 0, 0, 0.1);
119
148
  --th-color-shadow-medium: rgba(0, 0, 0, 0.15);
@@ -145,6 +174,34 @@
145
174
  --th-button-disabled-bg: var(--th-color-grey-700);
146
175
  --th-button-disabled-color: var(--th-color-grey-500);
147
176
 
177
+ /* Checkbox */
178
+ --th-checkbox-border: var(--th-color-grey-600);
179
+ --th-checkbox-checked-bg: var(--th-color-primary);
180
+ --th-checkbox-disabled-bg: var(--th-color-grey-600);
181
+ --th-checkbox-disabled-border: var(--th-color-grey-600);
182
+ --th-checkbox-disabled-check: var(--th-color-grey-300);
183
+
184
+ /* Text Input */
185
+ --th-input-border: var(--th-color-grey-600);
186
+ --th-input-focus-border: var(--th-color-primary);
187
+ --th-input-label: var(--th-color-white);
188
+ --th-input-label-disabled: var(--th-color-grey-500);
189
+ --th-input-placeholder: var(--th-color-grey-300);
190
+ --th-input-text: var(--th-color-white);
191
+ --th-input-bg: var(--th-color-grey-700);
192
+ --th-input-icon-color: var(--th-color-grey-300);
193
+
194
+ /* Selector */
195
+ --th-selector-border: var(--th-color-grey-600);
196
+ --th-selector-text-color: var(--th-color-text-primary);
197
+ --th-selector-subtext-color: var(--th-color-primary);
198
+ --th-selector-description-color: var(--th-color-text-secondary);
199
+ --th-selector-icon-color: var(--th-color-primary);
200
+ --th-selector-checked-border: var(--th-color-primary);
201
+ --th-selector-checked-bg: var(--th-color-primary);
202
+ --th-selector-disabled-color: var(--th-color-grey-500);
203
+ --th-selector-disabled-bg: var(--th-color-grey-100);
204
+
148
205
  /* Cards */
149
206
  --th-card-bg: var(--th-color-grey-700);
150
207
  --th-card-border: var(--th-color-grey-600);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@krumio/trailhand-ui",
3
- "version": "1.8.1",
3
+ "version": "1.9.0",
4
4
  "type": "module",
5
5
  "description": "Reusable web components built with Lit Element",
6
6
  "main": "./dist/index.js",
@@ -55,7 +55,6 @@
55
55
  "dependencies": {
56
56
  "@fortawesome/fontawesome-svg-core": "^7.1.0",
57
57
  "@fortawesome/free-solid-svg-icons": "^7.1.0",
58
- "@fortawesome/pro-duotone-svg-icons": "^7.1.0",
59
58
  "@iconify/icons-heroicons": "^1.2.9",
60
59
  "iconify-icon": "^3.0.2",
61
60
  "lit": "^3.3.1"
@@ -76,4 +75,4 @@
76
75
  "vite": "^6.4.1",
77
76
  "vitest": "^4.0.17"
78
77
  }
79
- }
78
+ }