@phcdevworks/spectre-components 0.0.1 → 1.0.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 (61) hide show
  1. package/dist/base-DQtCQ-dP.d.cts +22 -0
  2. package/dist/base-DQtCQ-dP.d.ts +22 -0
  3. package/dist/button.cjs +149 -124
  4. package/dist/button.cjs.map +1 -1
  5. package/dist/button.d.cts +15 -40
  6. package/dist/button.d.ts +15 -40
  7. package/dist/button.js +150 -125
  8. package/dist/button.js.map +1 -1
  9. package/dist/checkbox.cjs +140 -25
  10. package/dist/checkbox.cjs.map +1 -1
  11. package/dist/checkbox.d.cts +32 -32
  12. package/dist/checkbox.d.ts +32 -32
  13. package/dist/checkbox.js +141 -26
  14. package/dist/checkbox.js.map +1 -1
  15. package/dist/fieldset.cjs +96 -50
  16. package/dist/fieldset.cjs.map +1 -1
  17. package/dist/fieldset.d.cts +24 -36
  18. package/dist/fieldset.d.ts +24 -36
  19. package/dist/fieldset.js +96 -50
  20. package/dist/fieldset.js.map +1 -1
  21. package/dist/form-iI7vV-3W.d.cts +6 -0
  22. package/dist/form-iI7vV-3W.d.ts +6 -0
  23. package/dist/index.cjs +298 -826
  24. package/dist/index.cjs.map +1 -1
  25. package/dist/index.d.cts +5 -2
  26. package/dist/index.d.ts +5 -2
  27. package/dist/index.js +300 -827
  28. package/dist/index.js.map +1 -1
  29. package/dist/input.cjs +70 -59
  30. package/dist/input.cjs.map +1 -1
  31. package/dist/input.d.cts +25 -36
  32. package/dist/input.d.ts +25 -36
  33. package/dist/input.js +70 -59
  34. package/dist/input.js.map +1 -1
  35. package/dist/label.cjs +101 -38
  36. package/dist/label.cjs.map +1 -1
  37. package/dist/label.d.cts +16 -20
  38. package/dist/label.d.ts +16 -20
  39. package/dist/label.js +101 -38
  40. package/dist/label.js.map +1 -1
  41. package/dist/projectable-DcnBRiko.d.cts +17 -0
  42. package/dist/projectable-SzbPvXfM.d.ts +17 -0
  43. package/dist/radio.cjs +140 -25
  44. package/dist/radio.cjs.map +1 -1
  45. package/dist/radio.d.cts +32 -32
  46. package/dist/radio.d.ts +32 -32
  47. package/dist/radio.js +141 -26
  48. package/dist/radio.js.map +1 -1
  49. package/dist/select.cjs +142 -113
  50. package/dist/select.cjs.map +1 -1
  51. package/dist/select.d.cts +23 -41
  52. package/dist/select.d.ts +23 -41
  53. package/dist/select.js +143 -113
  54. package/dist/select.js.map +1 -1
  55. package/dist/textarea.cjs +24 -223
  56. package/dist/textarea.cjs.map +1 -1
  57. package/dist/textarea.d.cts +20 -32
  58. package/dist/textarea.d.ts +20 -32
  59. package/dist/textarea.js +24 -223
  60. package/dist/textarea.js.map +1 -1
  61. package/package.json +11 -11
package/dist/checkbox.cjs CHANGED
@@ -1,23 +1,16 @@
1
1
  'use strict';
2
2
 
3
3
  var lit = require('lit');
4
+ var live_js = require('lit/directives/live.js');
4
5
  var ifDefined_js = require('lit/directives/if-defined.js');
5
6
 
6
7
  // src/components/checkbox/sp-checkbox.ts
7
- var SpectreCheckboxElement = class extends lit.LitElement {
8
+ var SpectreBaseElement = class extends lit.LitElement {
8
9
  constructor() {
9
10
  super(...arguments);
10
11
  this.ariaLabel = null;
11
12
  this.ariaLabelledBy = null;
12
13
  this.ariaDescribedBy = null;
13
- this.autofocus = false;
14
- this.checked = false;
15
- this.disabled = false;
16
- this.invalid = false;
17
- this.label = "";
18
- this.required = false;
19
- this.title = "";
20
- this.value = "on";
21
14
  }
22
15
  get id() {
23
16
  return this._id ?? "";
@@ -33,6 +26,8 @@ var SpectreCheckboxElement = class extends lit.LitElement {
33
26
  }
34
27
  this.requestUpdate();
35
28
  }
29
+ // Spectre components intentionally render in light DOM so the global
30
+ // `@phcdevworks/spectre-ui` styling contract can apply directly.
36
31
  createRenderRoot() {
37
32
  return this;
38
33
  }
@@ -69,14 +64,6 @@ var SpectreCheckboxElement = class extends lit.LitElement {
69
64
  }
70
65
  super.removeAttribute(qualifiedName);
71
66
  }
72
- willUpdate(changedProperties) {
73
- if (changedProperties.has("value") && this.value == null) {
74
- this.value = "on";
75
- }
76
- }
77
- get nativeInput() {
78
- return this.querySelector("[data-sp-checkbox-native]");
79
- }
80
67
  get forwardedAriaLabel() {
81
68
  const value = this.ariaLabel?.trim();
82
69
  return value ? value : void 0;
@@ -89,6 +76,130 @@ var SpectreCheckboxElement = class extends lit.LitElement {
89
76
  const value = this.ariaDescribedBy?.trim();
90
77
  return value ? value : void 0;
91
78
  }
79
+ };
80
+ SpectreBaseElement.properties = {
81
+ ariaLabel: { attribute: "aria-label", type: String },
82
+ ariaLabelledBy: { attribute: "aria-labelledby", type: String },
83
+ ariaDescribedBy: { attribute: "aria-describedby", type: String }
84
+ };
85
+
86
+ // src/utils/dom.ts
87
+ function hasMeaningfulContent(nodes) {
88
+ return nodes.some((node) => {
89
+ if (node.nodeType === Node.ELEMENT_NODE) {
90
+ return true;
91
+ }
92
+ if (node.nodeType === Node.TEXT_NODE) {
93
+ return (node.textContent?.trim().length ?? 0) > 0;
94
+ }
95
+ return false;
96
+ });
97
+ }
98
+
99
+ // src/utils/projectable.ts
100
+ var SpectreProjectableElement = class extends SpectreBaseElement {
101
+ constructor() {
102
+ super(...arguments);
103
+ this.projectedContent = [];
104
+ }
105
+ get hasProjectedContent() {
106
+ return hasMeaningfulContent(this.projectedContent);
107
+ }
108
+ connectedCallback() {
109
+ super.connectedCallback();
110
+ this.syncProjectedContent();
111
+ this.startContentObserver();
112
+ }
113
+ disconnectedCallback() {
114
+ this.stopContentObserver();
115
+ super.disconnectedCallback();
116
+ }
117
+ update(changedProperties) {
118
+ this.stopContentObserver();
119
+ super.update(changedProperties);
120
+ this.startContentObserver();
121
+ }
122
+ syncProjectedContent() {
123
+ const nextProjectedContent = [];
124
+ const sourceNodes = [
125
+ ...this.childNodes,
126
+ ...this.getContentContainer()?.childNodes ?? []
127
+ ];
128
+ sourceNodes.forEach((node) => {
129
+ if (!this.isInternalNode(node) && !nextProjectedContent.includes(node)) {
130
+ nextProjectedContent.push(node);
131
+ }
132
+ });
133
+ const hasChanged = nextProjectedContent.length !== this.projectedContent.length || nextProjectedContent.some((node, index) => node !== this.projectedContent[index]);
134
+ if (hasChanged) {
135
+ this.projectedContent = nextProjectedContent;
136
+ }
137
+ return hasChanged;
138
+ }
139
+ startContentObserver() {
140
+ if (this.contentObserver) {
141
+ return;
142
+ }
143
+ this.contentObserver = new MutationObserver((mutations) => {
144
+ const isInternalMovement = mutations.every(
145
+ (mutation) => Array.from(mutation.removedNodes).every(
146
+ (node) => this.isInternalNode(node) || this.contains(node)
147
+ ) && Array.from(mutation.addedNodes).every((node) => this.isInternalNode(node))
148
+ );
149
+ if (isInternalMovement) {
150
+ return;
151
+ }
152
+ if (this.syncProjectedContent()) {
153
+ this.requestUpdate();
154
+ }
155
+ });
156
+ this.contentObserver.observe(this, { childList: true });
157
+ }
158
+ stopContentObserver() {
159
+ this.contentObserver?.disconnect();
160
+ this.contentObserver = void 0;
161
+ }
162
+ };
163
+
164
+ // src/components/checkbox/sp-checkbox.ts
165
+ var SpectreCheckboxElement = class extends SpectreProjectableElement {
166
+ constructor() {
167
+ super(...arguments);
168
+ this.autofocus = false;
169
+ this.checked = false;
170
+ this.disabled = false;
171
+ this.invalid = false;
172
+ this.loading = false;
173
+ this.required = false;
174
+ this.success = false;
175
+ this.title = "";
176
+ this.value = "on";
177
+ }
178
+ getContentContainer() {
179
+ return this.querySelector("[data-sp-checkbox-label]");
180
+ }
181
+ isInternalNode(node) {
182
+ if (node.nodeType !== Node.ELEMENT_NODE) {
183
+ return false;
184
+ }
185
+ const el = node;
186
+ return el.hasAttribute("data-sp-checkbox-label") || el.hasAttribute("data-sp-checkbox-native") || el.hasAttribute("data-sp-checkbox-label-fallback") || el.hasAttribute("data-sp-checkbox-indicator");
187
+ }
188
+ willUpdate(changedProperties) {
189
+ if (changedProperties.has("value") && this.value == null) {
190
+ this.value = "on";
191
+ }
192
+ }
193
+ get nativeInput() {
194
+ return this.querySelector("[data-sp-checkbox-native]");
195
+ }
196
+ get isDisabled() {
197
+ return this.disabled || this.loading;
198
+ }
199
+ get visibleLabelFallback() {
200
+ const trimmedLabel = this.label?.trim();
201
+ return trimmedLabel ? trimmedLabel : void 0;
202
+ }
92
203
  handleInput(event) {
93
204
  const input = event.currentTarget;
94
205
  this.checked = input.checked;
@@ -104,17 +215,20 @@ var SpectreCheckboxElement = class extends lit.LitElement {
104
215
  this.nativeInput?.blur();
105
216
  }
106
217
  render() {
218
+ const labelContent = this.hasProjectedContent ? this.projectedContent : this.visibleLabelFallback ? lit.html`<span class='sp-label' data-sp-checkbox-label-fallback>${this.visibleLabelFallback}</span>` : lit.nothing;
107
219
  return lit.html`
108
- <label>
220
+ <label data-sp-checkbox-label>
109
221
  <input
222
+ aria-busy=${this.loading ? "true" : "false"}
110
223
  aria-describedby=${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}
111
224
  aria-invalid=${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}
112
225
  aria-label=${ifDefined_js.ifDefined(this.forwardedAriaLabel)}
113
226
  aria-labelledby=${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}
114
227
  ?autofocus=${this.autofocus}
115
228
  data-sp-checkbox-native
116
- ?checked=${this.checked}
117
- ?disabled=${this.disabled}
229
+ .checked=${live_js.live(this.checked)}
230
+ ?disabled=${this.isDisabled}
231
+ form=${ifDefined_js.ifDefined(this.form)}
118
232
  id=${ifDefined_js.ifDefined(this.id || void 0)}
119
233
  name=${ifDefined_js.ifDefined(this.name)}
120
234
  ?required=${this.required}
@@ -124,22 +238,23 @@ var SpectreCheckboxElement = class extends lit.LitElement {
124
238
  @change=${this.handleChange}
125
239
  @input=${this.handleInput}
126
240
  />
127
- <span class='sp-label'>${this.label}</span>
241
+ <span class="sp-checkbox-indicator" data-sp-checkbox-indicator></span>
242
+ ${labelContent}
128
243
  </label>
129
244
  `;
130
245
  }
131
246
  };
132
247
  SpectreCheckboxElement.properties = {
133
- ariaLabel: { attribute: "aria-label", type: String },
134
- ariaLabelledBy: { attribute: "aria-labelledby", type: String },
135
- ariaDescribedBy: { attribute: "aria-describedby", type: String },
136
248
  autofocus: { type: Boolean, reflect: true },
137
249
  checked: { type: Boolean, reflect: true },
138
250
  disabled: { type: Boolean, reflect: true },
251
+ form: { type: String },
139
252
  invalid: { type: Boolean, reflect: true },
253
+ loading: { type: Boolean, reflect: true },
140
254
  label: { type: String, reflect: true },
141
- name: { type: String },
255
+ name: { type: String, reflect: true },
142
256
  required: { type: Boolean, reflect: true },
257
+ success: { type: Boolean, reflect: true },
143
258
  title: { type: String, reflect: true },
144
259
  value: { type: String }
145
260
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/checkbox/sp-checkbox.ts"],"names":["LitElement","html","ifDefined"],"mappings":"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","file":"checkbox.cjs","sourcesContent":["import { LitElement, html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport interface SpectreCheckboxProps {\n autofocus?: boolean;\n checked?: boolean;\n disabled?: boolean;\n invalid?: boolean;\n label?: string;\n name?: string;\n required?: boolean;\n title?: string;\n value?: string;\n}\n\nexport class SpectreCheckboxElement extends LitElement implements SpectreCheckboxProps {\n static properties = {\n ariaLabel: { attribute: 'aria-label', type: String },\n ariaLabelledBy: { attribute: 'aria-labelledby', type: String },\n ariaDescribedBy: { attribute: 'aria-describedby', type: String },\n autofocus: { type: Boolean, reflect: true },\n checked: { type: Boolean, reflect: true },\n disabled: { type: Boolean, reflect: true },\n invalid: { type: Boolean, reflect: true },\n label: { type: String, reflect: true },\n name: { type: String },\n required: { type: Boolean, reflect: true },\n title: { type: String, reflect: true },\n value: { type: String },\n };\n\n ariaLabel: string | null = null;\n ariaLabelledBy: string | null = null;\n ariaDescribedBy: string | null = null;\n autofocus = false;\n checked = false;\n disabled = false;\n invalid = false;\n label = '';\n name?: string;\n required = false;\n override title = '';\n value = 'on';\n private _id?: string;\n\n override get id(): string {\n return this._id ?? '';\n }\n\n override set id(value: string) {\n if ((this._id ?? '') === value) {\n return;\n }\n\n this._id = value;\n\n const host = this as unknown as HTMLElement;\n if (HTMLElement.prototype.hasAttribute.call(host, 'id')) {\n HTMLElement.prototype.removeAttribute.call(host, 'id');\n }\n\n this.requestUpdate();\n }\n\n createRenderRoot(): this {\n return this;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n const hostId = super.getAttribute('id');\n\n if (hostId !== null) {\n this.id = hostId;\n }\n }\n\n override getAttribute(qualifiedName: string): string | null {\n if (qualifiedName === 'id') {\n return this.id || null;\n }\n\n return super.getAttribute(qualifiedName);\n }\n\n override hasAttribute(qualifiedName: string): boolean {\n if (qualifiedName === 'id') {\n return this.id !== '';\n }\n\n return super.hasAttribute(qualifiedName);\n }\n\n override setAttribute(qualifiedName: string, value: string): void {\n if (qualifiedName === 'id') {\n this.id = value;\n return;\n }\n\n super.setAttribute(qualifiedName, value);\n }\n\n override removeAttribute(qualifiedName: string): void {\n if (qualifiedName === 'id') {\n this.id = '';\n return;\n }\n\n super.removeAttribute(qualifiedName);\n }\n\n protected override willUpdate(changedProperties: Map<PropertyKey, unknown>): void {\n if (changedProperties.has('value') && this.value == null) {\n this.value = 'on';\n }\n }\n\n private get nativeInput(): HTMLInputElement | null {\n return this.querySelector('[data-sp-checkbox-native]');\n }\n\n private get forwardedAriaLabel(): string | undefined {\n const value = this.ariaLabel?.trim();\n return value ? value : undefined;\n }\n\n private get forwardedAriaLabelledBy(): string | undefined {\n const value = this.ariaLabelledBy?.trim();\n return value ? value : undefined;\n }\n\n private get forwardedAriaDescribedBy(): string | undefined {\n const value = this.ariaDescribedBy?.trim();\n return value ? value : undefined;\n }\n\n private handleInput(event: Event): void {\n const input = event.currentTarget as HTMLInputElement;\n this.checked = input.checked;\n }\n\n private handleChange(event: Event): void {\n const input = event.currentTarget as HTMLInputElement;\n this.checked = input.checked;\n }\n\n override focus(options?: FocusOptions): void {\n this.nativeInput?.focus(options);\n }\n\n override blur(): void {\n this.nativeInput?.blur();\n }\n\n override render() {\n return html`\n <label>\n <input\n aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}\n aria-invalid=${ifDefined(this.invalid ? 'true' : undefined)}\n aria-label=${ifDefined(this.forwardedAriaLabel)}\n aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}\n ?autofocus=${this.autofocus}\n data-sp-checkbox-native\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n id=${ifDefined(this.id || undefined)}\n name=${ifDefined(this.name)}\n ?required=${this.required}\n title=${ifDefined(this.title || undefined)}\n type='checkbox'\n value=${ifDefined(this.value || undefined)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n />\n <span class='sp-label'>${this.label}</span>\n </label>\n `;\n }\n}\n\nexport function defineSpectreCheckbox(tagName = 'sp-checkbox'): typeof SpectreCheckboxElement {\n const existingElement = customElements.get(tagName);\n\n if (existingElement) {\n return existingElement as unknown as typeof SpectreCheckboxElement;\n }\n\n customElements.define(tagName, SpectreCheckboxElement);\n return SpectreCheckboxElement;\n}\n"]}
1
+ {"version":3,"sources":["../src/utils/base.ts","../src/utils/dom.ts","../src/utils/projectable.ts","../src/components/checkbox/sp-checkbox.ts"],"names":["LitElement","html","nothing","ifDefined","live"],"mappings":"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","file":"checkbox.cjs","sourcesContent":["import { LitElement, type PropertyDeclarations } from 'lit';\n\nexport class SpectreBaseElement extends LitElement {\n static properties: PropertyDeclarations = {\n ariaLabel: { attribute: 'aria-label', type: String },\n ariaLabelledBy: { attribute: 'aria-labelledby', type: String },\n ariaDescribedBy: { attribute: 'aria-describedby', type: String },\n };\n\n ariaLabel: string | null = null;\n ariaLabelledBy: string | null = null;\n ariaDescribedBy: string | null = null;\n\n private _id?: string;\n\n override get id(): string {\n return this._id ?? '';\n }\n\n override set id(value: string) {\n if ((this._id ?? '') === value) {\n return;\n }\n\n this._id = value;\n\n const host = this as unknown as HTMLElement;\n if (HTMLElement.prototype.hasAttribute.call(host, 'id')) {\n HTMLElement.prototype.removeAttribute.call(host, 'id');\n }\n\n this.requestUpdate();\n }\n\n // Spectre components intentionally render in light DOM so the global\n // `@phcdevworks/spectre-ui` styling contract can apply directly.\n createRenderRoot(): this {\n return this;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n const hostId = super.getAttribute('id');\n if (hostId !== null) {\n this.id = hostId;\n }\n }\n\n override getAttribute(qualifiedName: string): string | null {\n if (qualifiedName === 'id') {\n return this.id || null;\n }\n\n return super.getAttribute(qualifiedName);\n }\n\n override hasAttribute(qualifiedName: string): boolean {\n if (qualifiedName === 'id') {\n return this.id !== '';\n }\n\n return super.hasAttribute(qualifiedName);\n }\n\n override setAttribute(qualifiedName: string, value: string): void {\n if (qualifiedName === 'id') {\n this.id = value;\n return;\n }\n\n super.setAttribute(qualifiedName, value);\n }\n\n override removeAttribute(qualifiedName: string): void {\n if (qualifiedName === 'id') {\n this.id = '';\n return;\n }\n\n super.removeAttribute(qualifiedName);\n }\n\n protected get forwardedAriaLabel(): string | undefined {\n const value = this.ariaLabel?.trim();\n return value ? value : undefined;\n }\n\n protected get forwardedAriaLabelledBy(): string | undefined {\n const value = this.ariaLabelledBy?.trim();\n return value ? value : undefined;\n }\n\n protected get forwardedAriaDescribedBy(): string | undefined {\n const value = this.ariaDescribedBy?.trim();\n return value ? value : undefined;\n }\n}\n","export function hasMeaningfulContent(nodes: readonly Node[]): boolean {\n return nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n return true;\n }\n\n if (node.nodeType === Node.TEXT_NODE) {\n return (node.textContent?.trim().length ?? 0) > 0;\n }\n\n return false;\n });\n}\n","import { SpectreBaseElement } from './base';\nimport { hasMeaningfulContent } from './dom';\n\nexport abstract class SpectreProjectableElement extends SpectreBaseElement {\n protected projectedContent: Node[] = [];\n private contentObserver?: MutationObserver | undefined;\n\n // Return the native container whose existing children are also treated as\n // projected content sources (e.g. the rendered <button>, <select>, <label>).\n protected abstract getContentContainer(): Element | null;\n\n // Return true if the node was rendered by this component and should not be\n // treated as external projected content.\n protected abstract isInternalNode(node: Node): boolean;\n\n protected get hasProjectedContent(): boolean {\n return hasMeaningfulContent(this.projectedContent);\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.syncProjectedContent();\n this.startContentObserver();\n }\n\n override disconnectedCallback(): void {\n this.stopContentObserver();\n super.disconnectedCallback();\n }\n\n protected override update(changedProperties: Map<PropertyKey, unknown>): void {\n this.stopContentObserver();\n super.update(changedProperties);\n this.startContentObserver();\n }\n\n protected syncProjectedContent(): boolean {\n const nextProjectedContent: Node[] = [];\n const sourceNodes = [\n ...this.childNodes,\n ...(this.getContentContainer()?.childNodes ?? []),\n ];\n\n sourceNodes.forEach((node) => {\n if (!this.isInternalNode(node) && !nextProjectedContent.includes(node)) {\n nextProjectedContent.push(node);\n }\n });\n\n const hasChanged =\n nextProjectedContent.length !== this.projectedContent.length ||\n nextProjectedContent.some((node, index) => node !== this.projectedContent[index]);\n\n if (hasChanged) {\n this.projectedContent = nextProjectedContent;\n }\n\n return hasChanged;\n }\n\n private startContentObserver(): void {\n if (this.contentObserver) {\n return;\n }\n\n this.contentObserver = new MutationObserver((mutations) => {\n const isInternalMovement = mutations.every((mutation) =>\n Array.from(mutation.removedNodes).every(\n (node) => this.isInternalNode(node) || this.contains(node),\n ) &&\n Array.from(mutation.addedNodes).every((node) => this.isInternalNode(node)),\n );\n\n if (isInternalMovement) {\n return;\n }\n\n if (this.syncProjectedContent()) {\n this.requestUpdate();\n }\n });\n\n this.contentObserver.observe(this, { childList: true });\n }\n\n private stopContentObserver(): void {\n this.contentObserver?.disconnect();\n this.contentObserver = undefined;\n }\n}\n","import { html, nothing } from 'lit';\nimport { live } from 'lit/directives/live.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { SpectreProjectableElement } from '../../utils/projectable';\n\nexport interface SpectreCheckboxProps {\n ariaLabel?: string | null;\n ariaLabelledBy?: string | null;\n ariaDescribedBy?: string | null;\n autofocus?: boolean;\n checked?: boolean;\n disabled?: boolean;\n form?: string;\n invalid?: boolean;\n loading?: boolean;\n label?: string | undefined;\n name?: string | undefined;\n required?: boolean;\n success?: boolean;\n title?: string;\n value?: string;\n}\n\nexport class SpectreCheckboxElement extends SpectreProjectableElement implements SpectreCheckboxProps {\n static properties = {\n autofocus: { type: Boolean, reflect: true },\n checked: { type: Boolean, reflect: true },\n disabled: { type: Boolean, reflect: true },\n form: { type: String },\n invalid: { type: Boolean, reflect: true },\n loading: { type: Boolean, reflect: true },\n label: { type: String, reflect: true },\n name: { type: String, reflect: true },\n required: { type: Boolean, reflect: true },\n success: { type: Boolean, reflect: true },\n title: { type: String, reflect: true },\n value: { type: String },\n };\n\n autofocus = false;\n checked = false;\n disabled = false;\n form?: string;\n invalid = false;\n loading = false;\n label?: string;\n name?: string;\n required = false;\n success = false;\n override title = '';\n value = 'on';\n\n protected override getContentContainer(): Element | null {\n return this.querySelector('[data-sp-checkbox-label]');\n }\n\n protected override isInternalNode(node: Node): boolean {\n if (node.nodeType !== Node.ELEMENT_NODE) {\n return false;\n }\n\n const el = node as Element;\n return (\n el.hasAttribute('data-sp-checkbox-label') ||\n el.hasAttribute('data-sp-checkbox-native') ||\n el.hasAttribute('data-sp-checkbox-label-fallback') ||\n el.hasAttribute('data-sp-checkbox-indicator')\n );\n }\n\n protected override willUpdate(changedProperties: Map<PropertyKey, unknown>): void {\n if (changedProperties.has('value') && this.value == null) {\n this.value = 'on';\n }\n }\n\n private get nativeInput(): HTMLInputElement | null {\n return this.querySelector('[data-sp-checkbox-native]');\n }\n\n private get isDisabled(): boolean {\n return this.disabled || this.loading;\n }\n\n private get visibleLabelFallback(): string | undefined {\n const trimmedLabel = this.label?.trim();\n return trimmedLabel ? trimmedLabel : undefined;\n }\n\n private handleInput(event: Event): void {\n const input = event.currentTarget as HTMLInputElement;\n this.checked = input.checked;\n }\n\n private handleChange(event: Event): void {\n const input = event.currentTarget as HTMLInputElement;\n this.checked = input.checked;\n }\n\n override focus(options?: FocusOptions): void {\n this.nativeInput?.focus(options);\n }\n\n override blur(): void {\n this.nativeInput?.blur();\n }\n\n override render() {\n const labelContent = this.hasProjectedContent\n ? this.projectedContent\n : this.visibleLabelFallback\n ? html`<span class='sp-label' data-sp-checkbox-label-fallback>${this.visibleLabelFallback}</span>`\n : nothing;\n\n return html`\n <label data-sp-checkbox-label>\n <input\n aria-busy=${this.loading ? 'true' : 'false'}\n aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}\n aria-invalid=${ifDefined(this.invalid ? 'true' : undefined)}\n aria-label=${ifDefined(this.forwardedAriaLabel)}\n aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}\n ?autofocus=${this.autofocus}\n data-sp-checkbox-native\n .checked=${live(this.checked)}\n ?disabled=${this.isDisabled}\n form=${ifDefined(this.form)}\n id=${ifDefined(this.id || undefined)}\n name=${ifDefined(this.name)}\n ?required=${this.required}\n title=${ifDefined(this.title || undefined)}\n type='checkbox'\n value=${ifDefined(this.value || undefined)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n />\n <span class=\"sp-checkbox-indicator\" data-sp-checkbox-indicator></span>\n ${labelContent}\n </label>\n `;\n }\n}\n\nexport function defineSpectreCheckbox(tagName = 'sp-checkbox'): typeof SpectreCheckboxElement {\n const existingElement = customElements.get(tagName);\n\n if (existingElement) {\n return existingElement as unknown as typeof SpectreCheckboxElement;\n }\n\n customElements.define(tagName, SpectreCheckboxElement);\n return SpectreCheckboxElement;\n}\n"]}
@@ -1,31 +1,27 @@
1
1
  import * as lit_html from 'lit-html';
2
- import { LitElement } from 'lit';
2
+ import { S as SpectreProjectableElement } from './projectable-DcnBRiko.cjs';
3
+ import './base-DQtCQ-dP.cjs';
4
+ import 'lit';
3
5
 
4
6
  interface SpectreCheckboxProps {
7
+ ariaLabel?: string | null;
8
+ ariaLabelledBy?: string | null;
9
+ ariaDescribedBy?: string | null;
5
10
  autofocus?: boolean;
6
11
  checked?: boolean;
7
12
  disabled?: boolean;
13
+ form?: string;
8
14
  invalid?: boolean;
9
- label?: string;
10
- name?: string;
15
+ loading?: boolean;
16
+ label?: string | undefined;
17
+ name?: string | undefined;
11
18
  required?: boolean;
19
+ success?: boolean;
12
20
  title?: string;
13
21
  value?: string;
14
22
  }
15
- declare class SpectreCheckboxElement extends LitElement implements SpectreCheckboxProps {
23
+ declare class SpectreCheckboxElement extends SpectreProjectableElement implements SpectreCheckboxProps {
16
24
  static properties: {
17
- ariaLabel: {
18
- attribute: string;
19
- type: StringConstructor;
20
- };
21
- ariaLabelledBy: {
22
- attribute: string;
23
- type: StringConstructor;
24
- };
25
- ariaDescribedBy: {
26
- attribute: string;
27
- type: StringConstructor;
28
- };
29
25
  autofocus: {
30
26
  type: BooleanConstructor;
31
27
  reflect: boolean;
@@ -38,21 +34,33 @@ declare class SpectreCheckboxElement extends LitElement implements SpectreCheckb
38
34
  type: BooleanConstructor;
39
35
  reflect: boolean;
40
36
  };
37
+ form: {
38
+ type: StringConstructor;
39
+ };
41
40
  invalid: {
42
41
  type: BooleanConstructor;
43
42
  reflect: boolean;
44
43
  };
44
+ loading: {
45
+ type: BooleanConstructor;
46
+ reflect: boolean;
47
+ };
45
48
  label: {
46
49
  type: StringConstructor;
47
50
  reflect: boolean;
48
51
  };
49
52
  name: {
50
53
  type: StringConstructor;
54
+ reflect: boolean;
51
55
  };
52
56
  required: {
53
57
  type: BooleanConstructor;
54
58
  reflect: boolean;
55
59
  };
60
+ success: {
61
+ type: BooleanConstructor;
62
+ reflect: boolean;
63
+ };
56
64
  title: {
57
65
  type: StringConstructor;
58
66
  reflect: boolean;
@@ -61,32 +69,24 @@ declare class SpectreCheckboxElement extends LitElement implements SpectreCheckb
61
69
  type: StringConstructor;
62
70
  };
63
71
  };
64
- ariaLabel: string | null;
65
- ariaLabelledBy: string | null;
66
- ariaDescribedBy: string | null;
67
72
  autofocus: boolean;
68
73
  checked: boolean;
69
74
  disabled: boolean;
75
+ form?: string;
70
76
  invalid: boolean;
71
- label: string;
77
+ loading: boolean;
78
+ label?: string;
72
79
  name?: string;
73
80
  required: boolean;
81
+ success: boolean;
74
82
  title: string;
75
83
  value: string;
76
- private _id?;
77
- get id(): string;
78
- set id(value: string);
79
- createRenderRoot(): this;
80
- connectedCallback(): void;
81
- getAttribute(qualifiedName: string): string | null;
82
- hasAttribute(qualifiedName: string): boolean;
83
- setAttribute(qualifiedName: string, value: string): void;
84
- removeAttribute(qualifiedName: string): void;
84
+ protected getContentContainer(): Element | null;
85
+ protected isInternalNode(node: Node): boolean;
85
86
  protected willUpdate(changedProperties: Map<PropertyKey, unknown>): void;
86
87
  private get nativeInput();
87
- private get forwardedAriaLabel();
88
- private get forwardedAriaLabelledBy();
89
- private get forwardedAriaDescribedBy();
88
+ private get isDisabled();
89
+ private get visibleLabelFallback();
90
90
  private handleInput;
91
91
  private handleChange;
92
92
  focus(options?: FocusOptions): void;
@@ -1,31 +1,27 @@
1
1
  import * as lit_html from 'lit-html';
2
- import { LitElement } from 'lit';
2
+ import { S as SpectreProjectableElement } from './projectable-SzbPvXfM.js';
3
+ import './base-DQtCQ-dP.js';
4
+ import 'lit';
3
5
 
4
6
  interface SpectreCheckboxProps {
7
+ ariaLabel?: string | null;
8
+ ariaLabelledBy?: string | null;
9
+ ariaDescribedBy?: string | null;
5
10
  autofocus?: boolean;
6
11
  checked?: boolean;
7
12
  disabled?: boolean;
13
+ form?: string;
8
14
  invalid?: boolean;
9
- label?: string;
10
- name?: string;
15
+ loading?: boolean;
16
+ label?: string | undefined;
17
+ name?: string | undefined;
11
18
  required?: boolean;
19
+ success?: boolean;
12
20
  title?: string;
13
21
  value?: string;
14
22
  }
15
- declare class SpectreCheckboxElement extends LitElement implements SpectreCheckboxProps {
23
+ declare class SpectreCheckboxElement extends SpectreProjectableElement implements SpectreCheckboxProps {
16
24
  static properties: {
17
- ariaLabel: {
18
- attribute: string;
19
- type: StringConstructor;
20
- };
21
- ariaLabelledBy: {
22
- attribute: string;
23
- type: StringConstructor;
24
- };
25
- ariaDescribedBy: {
26
- attribute: string;
27
- type: StringConstructor;
28
- };
29
25
  autofocus: {
30
26
  type: BooleanConstructor;
31
27
  reflect: boolean;
@@ -38,21 +34,33 @@ declare class SpectreCheckboxElement extends LitElement implements SpectreCheckb
38
34
  type: BooleanConstructor;
39
35
  reflect: boolean;
40
36
  };
37
+ form: {
38
+ type: StringConstructor;
39
+ };
41
40
  invalid: {
42
41
  type: BooleanConstructor;
43
42
  reflect: boolean;
44
43
  };
44
+ loading: {
45
+ type: BooleanConstructor;
46
+ reflect: boolean;
47
+ };
45
48
  label: {
46
49
  type: StringConstructor;
47
50
  reflect: boolean;
48
51
  };
49
52
  name: {
50
53
  type: StringConstructor;
54
+ reflect: boolean;
51
55
  };
52
56
  required: {
53
57
  type: BooleanConstructor;
54
58
  reflect: boolean;
55
59
  };
60
+ success: {
61
+ type: BooleanConstructor;
62
+ reflect: boolean;
63
+ };
56
64
  title: {
57
65
  type: StringConstructor;
58
66
  reflect: boolean;
@@ -61,32 +69,24 @@ declare class SpectreCheckboxElement extends LitElement implements SpectreCheckb
61
69
  type: StringConstructor;
62
70
  };
63
71
  };
64
- ariaLabel: string | null;
65
- ariaLabelledBy: string | null;
66
- ariaDescribedBy: string | null;
67
72
  autofocus: boolean;
68
73
  checked: boolean;
69
74
  disabled: boolean;
75
+ form?: string;
70
76
  invalid: boolean;
71
- label: string;
77
+ loading: boolean;
78
+ label?: string;
72
79
  name?: string;
73
80
  required: boolean;
81
+ success: boolean;
74
82
  title: string;
75
83
  value: string;
76
- private _id?;
77
- get id(): string;
78
- set id(value: string);
79
- createRenderRoot(): this;
80
- connectedCallback(): void;
81
- getAttribute(qualifiedName: string): string | null;
82
- hasAttribute(qualifiedName: string): boolean;
83
- setAttribute(qualifiedName: string, value: string): void;
84
- removeAttribute(qualifiedName: string): void;
84
+ protected getContentContainer(): Element | null;
85
+ protected isInternalNode(node: Node): boolean;
85
86
  protected willUpdate(changedProperties: Map<PropertyKey, unknown>): void;
86
87
  private get nativeInput();
87
- private get forwardedAriaLabel();
88
- private get forwardedAriaLabelledBy();
89
- private get forwardedAriaDescribedBy();
88
+ private get isDisabled();
89
+ private get visibleLabelFallback();
90
90
  private handleInput;
91
91
  private handleChange;
92
92
  focus(options?: FocusOptions): void;