@phcdevworks/spectre-components 1.0.0 → 1.1.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.
- package/README.md +113 -40
- package/dist/{base-DQtCQ-dP.d.cts → base-2rD8EmdC.d.cts} +15 -5
- package/dist/{base-DQtCQ-dP.d.ts → base-2rD8EmdC.d.ts} +15 -5
- package/dist/button.cjs +158 -58
- package/dist/button.cjs.map +1 -1
- package/dist/button.d.cts +22 -28
- package/dist/button.d.ts +22 -28
- package/dist/button.js +158 -58
- package/dist/button.js.map +1 -1
- package/dist/checkbox.cjs +164 -64
- package/dist/checkbox.cjs.map +1 -1
- package/dist/checkbox.d.cts +18 -23
- package/dist/checkbox.d.ts +18 -23
- package/dist/checkbox.js +164 -64
- package/dist/checkbox.js.map +1 -1
- package/dist/fieldset.cjs +154 -55
- package/dist/fieldset.cjs.map +1 -1
- package/dist/fieldset.d.cts +13 -18
- package/dist/fieldset.d.ts +13 -18
- package/dist/fieldset.js +154 -55
- package/dist/fieldset.js.map +1 -1
- package/dist/index.cjs +324 -261
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +324 -261
- package/dist/index.js.map +1 -1
- package/dist/input.cjs +174 -72
- package/dist/input.cjs.map +1 -1
- package/dist/input.d.cts +33 -38
- package/dist/input.d.ts +33 -38
- package/dist/input.js +174 -72
- package/dist/input.js.map +1 -1
- package/dist/label.cjs +152 -56
- package/dist/label.cjs.map +1 -1
- package/dist/label.d.cts +8 -13
- package/dist/label.d.ts +8 -13
- package/dist/label.js +152 -56
- package/dist/label.js.map +1 -1
- package/dist/{projectable-DcnBRiko.d.cts → projectable-BzDQ4xp_.d.cts} +1 -1
- package/dist/{projectable-SzbPvXfM.d.ts → projectable-s3SgvjGX.d.ts} +1 -1
- package/dist/radio.cjs +164 -64
- package/dist/radio.cjs.map +1 -1
- package/dist/radio.d.cts +18 -23
- package/dist/radio.d.ts +18 -23
- package/dist/radio.js +164 -64
- package/dist/radio.js.map +1 -1
- package/dist/select.cjs +161 -61
- package/dist/select.cjs.map +1 -1
- package/dist/select.d.cts +22 -27
- package/dist/select.d.ts +22 -27
- package/dist/select.js +161 -61
- package/dist/select.js.map +1 -1
- package/dist/textarea.cjs +172 -72
- package/dist/textarea.cjs.map +1 -1
- package/dist/textarea.d.cts +27 -32
- package/dist/textarea.d.ts +27 -32
- package/dist/textarea.js +172 -72
- package/dist/textarea.js.map +1 -1
- package/package.json +9 -8
package/README.md
CHANGED
|
@@ -48,22 +48,30 @@ Use the components in markup:
|
|
|
48
48
|
<sp-button variant="primary" size="md">Save</sp-button>
|
|
49
49
|
<sp-button variant="ghost" size="sm">Cancel</sp-button>
|
|
50
50
|
<sp-input name="email" type="email" placeholder="Email address"></sp-input>
|
|
51
|
+
<sp-textarea name="bio" rows="4" placeholder="Short bio"></sp-textarea>
|
|
52
|
+
<sp-select name="role">
|
|
53
|
+
<option value="admin">Admin</option>
|
|
54
|
+
<option value="user">User</option>
|
|
55
|
+
</sp-select>
|
|
56
|
+
<sp-checkbox name="terms" value="accepted">Accept terms</sp-checkbox>
|
|
57
|
+
<sp-radio name="plan" value="monthly">Monthly</sp-radio>
|
|
58
|
+
<sp-label for="email">Email address</sp-label>
|
|
59
|
+
<sp-fieldset legend="Contact preferences">
|
|
60
|
+
<sp-checkbox name="email-updates">Email updates</sp-checkbox>
|
|
61
|
+
</sp-fieldset>
|
|
51
62
|
```
|
|
52
63
|
|
|
53
|
-
Register only
|
|
64
|
+
Register only what you need using the per-component entry points:
|
|
54
65
|
|
|
55
66
|
```ts
|
|
56
67
|
import { defineSpectreButton } from "@phcdevworks/spectre-components/button";
|
|
57
|
-
|
|
58
|
-
defineSpectreButton();
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
Register only the input when you want the input-only entry point:
|
|
62
|
-
|
|
63
|
-
```ts
|
|
64
68
|
import { defineSpectreInput } from "@phcdevworks/spectre-components/input";
|
|
65
|
-
|
|
66
|
-
|
|
69
|
+
import { defineSpectreTextarea } from "@phcdevworks/spectre-components/textarea";
|
|
70
|
+
import { defineSpectreSelect } from "@phcdevworks/spectre-components/select";
|
|
71
|
+
import { defineSpectreCheckbox } from "@phcdevworks/spectre-components/checkbox";
|
|
72
|
+
import { defineSpectreRadio } from "@phcdevworks/spectre-components/radio";
|
|
73
|
+
import { defineSpectreLabel } from "@phcdevworks/spectre-components/label";
|
|
74
|
+
import { defineSpectreFieldset } from "@phcdevworks/spectre-components/fieldset";
|
|
67
75
|
```
|
|
68
76
|
|
|
69
77
|
## What this package owns
|
|
@@ -91,32 +99,95 @@ contracts locally.
|
|
|
91
99
|
|
|
92
100
|
### Root package
|
|
93
101
|
|
|
94
|
-
`@phcdevworks/spectre-components` exports
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
- `
|
|
100
|
-
- `
|
|
101
|
-
- `
|
|
102
|
-
- `
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
- `
|
|
107
|
-
- `
|
|
102
|
+
`@phcdevworks/spectre-components` exports everything from all component entry
|
|
103
|
+
points plus the `defineSpectreComponents()` bulk registration helper.
|
|
104
|
+
|
|
105
|
+
**Registration helpers**
|
|
106
|
+
|
|
107
|
+
- `defineSpectreComponents()` — registers all components at once
|
|
108
|
+
- `defineSpectreButton()`, `defineSpectreInput()`, `defineSpectreTextarea()`
|
|
109
|
+
- `defineSpectreSelect()`, `defineSpectreCheckbox()`, `defineSpectreRadio()`
|
|
110
|
+
- `defineSpectreLabel()`, `defineSpectreFieldset()`
|
|
111
|
+
|
|
112
|
+
**Element classes**
|
|
113
|
+
|
|
114
|
+
- `SpectreButtonElement`, `SpectreInputElement`, `SpectreTextareaElement`
|
|
115
|
+
- `SpectreSelectElement`, `SpectreCheckboxElement`, `SpectreRadioElement`
|
|
116
|
+
- `SpectreLabelElement`, `SpectreFieldsetElement`
|
|
117
|
+
|
|
118
|
+
**Constants and types (button)**
|
|
119
|
+
|
|
120
|
+
- `spectreButtonVariants`, `spectreButtonSizes`, `spectreButtonTypes`
|
|
121
|
+
- `SpectreButtonVariant`, `SpectreButtonSize`, `SpectreButtonType`
|
|
122
|
+
- `SpectreButtonProps`
|
|
123
|
+
|
|
124
|
+
**Constants and types (input / textarea / select)**
|
|
125
|
+
|
|
126
|
+
- `spectreInputSizes`, `spectreInputTypes`
|
|
127
|
+
- `SpectreInputSize`, `SpectreInputType`
|
|
128
|
+
- `SpectreInputProps`, `SpectreTextareaProps`, `SpectreSelectProps`
|
|
129
|
+
|
|
130
|
+
**Props interfaces (checkbox / radio / label / fieldset)**
|
|
131
|
+
|
|
132
|
+
- `SpectreCheckboxProps`, `SpectreRadioProps`
|
|
133
|
+
- `SpectreLabelProps`, `SpectreFieldsetProps`
|
|
108
134
|
|
|
109
135
|
### Button entry point
|
|
110
136
|
|
|
111
|
-
`@phcdevworks/spectre-components/button`
|
|
112
|
-
|
|
113
|
-
|
|
137
|
+
`@phcdevworks/spectre-components/button` — registers only `sp-button`.
|
|
138
|
+
|
|
139
|
+
Exports: `defineSpectreButton`, `SpectreButtonElement`, `SpectreButtonProps`,
|
|
140
|
+
`spectreButtonVariants`, `spectreButtonSizes`, `spectreButtonTypes`,
|
|
141
|
+
`SpectreButtonVariant`, `SpectreButtonSize`, `SpectreButtonType`.
|
|
114
142
|
|
|
115
143
|
### Input entry point
|
|
116
144
|
|
|
117
|
-
`@phcdevworks/spectre-components/input`
|
|
118
|
-
|
|
119
|
-
|
|
145
|
+
`@phcdevworks/spectre-components/input` — registers only `sp-input`.
|
|
146
|
+
|
|
147
|
+
Exports: `defineSpectreInput`, `SpectreInputElement`, `SpectreInputProps`,
|
|
148
|
+
`spectreInputSizes`, `spectreInputTypes`, `SpectreInputSize`, `SpectreInputType`.
|
|
149
|
+
|
|
150
|
+
### Textarea entry point
|
|
151
|
+
|
|
152
|
+
`@phcdevworks/spectre-components/textarea` — registers only `sp-textarea`.
|
|
153
|
+
|
|
154
|
+
Exports: `defineSpectreTextarea`, `SpectreTextareaElement`, `SpectreTextareaProps`.
|
|
155
|
+
|
|
156
|
+
Size constants shared with input: import `spectreInputSizes` / `SpectreInputSize`
|
|
157
|
+
from `@phcdevworks/spectre-components/input`.
|
|
158
|
+
|
|
159
|
+
### Select entry point
|
|
160
|
+
|
|
161
|
+
`@phcdevworks/spectre-components/select` — registers only `sp-select`.
|
|
162
|
+
|
|
163
|
+
Exports: `defineSpectreSelect`, `SpectreSelectElement`, `SpectreSelectProps`.
|
|
164
|
+
|
|
165
|
+
Size constants shared with input: import `spectreInputSizes` / `SpectreInputSize`
|
|
166
|
+
from `@phcdevworks/spectre-components/input`.
|
|
167
|
+
|
|
168
|
+
### Checkbox entry point
|
|
169
|
+
|
|
170
|
+
`@phcdevworks/spectre-components/checkbox` — registers only `sp-checkbox`.
|
|
171
|
+
|
|
172
|
+
Exports: `defineSpectreCheckbox`, `SpectreCheckboxElement`, `SpectreCheckboxProps`.
|
|
173
|
+
|
|
174
|
+
### Radio entry point
|
|
175
|
+
|
|
176
|
+
`@phcdevworks/spectre-components/radio` — registers only `sp-radio`.
|
|
177
|
+
|
|
178
|
+
Exports: `defineSpectreRadio`, `SpectreRadioElement`, `SpectreRadioProps`.
|
|
179
|
+
|
|
180
|
+
### Label entry point
|
|
181
|
+
|
|
182
|
+
`@phcdevworks/spectre-components/label` — registers only `sp-label`.
|
|
183
|
+
|
|
184
|
+
Exports: `defineSpectreLabel`, `SpectreLabelElement`, `SpectreLabelProps`.
|
|
185
|
+
|
|
186
|
+
### Fieldset entry point
|
|
187
|
+
|
|
188
|
+
`@phcdevworks/spectre-components/fieldset` — registers only `sp-fieldset`.
|
|
189
|
+
|
|
190
|
+
Exports: `defineSpectreFieldset`, `SpectreFieldsetElement`, `SpectreFieldsetProps`.
|
|
120
191
|
|
|
121
192
|
## Relationship to the rest of Spectre
|
|
122
193
|
|
|
@@ -132,16 +203,18 @@ Spectre keeps responsibilities separate:
|
|
|
132
203
|
That separation keeps visual meaning centralized, styling contracts stable, and
|
|
133
204
|
component behavior reusable across frameworks.
|
|
134
205
|
|
|
135
|
-
##
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
-
|
|
140
|
-
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
-
|
|
144
|
-
-
|
|
206
|
+
## Components
|
|
207
|
+
|
|
208
|
+
| Element | Tag | Description |
|
|
209
|
+
|---|---|---|
|
|
210
|
+
| `SpectreButtonElement` | `sp-button` | Button with variant, size, loading, and pill support |
|
|
211
|
+
| `SpectreInputElement` | `sp-input` | Text input with state, size, and type support |
|
|
212
|
+
| `SpectreTextareaElement` | `sp-textarea` | Multiline text input with resizable rows |
|
|
213
|
+
| `SpectreSelectElement` | `sp-select` | Native select with projected option elements |
|
|
214
|
+
| `SpectreCheckboxElement` | `sp-checkbox` | Checkbox with projected or property-based label |
|
|
215
|
+
| `SpectreRadioElement` | `sp-radio` | Radio button with projected or property-based label |
|
|
216
|
+
| `SpectreLabelElement` | `sp-label` | Accessible label with `for` forwarding |
|
|
217
|
+
| `SpectreFieldsetElement` | `sp-fieldset` | Fieldset group with legend text and slot support |
|
|
145
218
|
|
|
146
219
|
## Development
|
|
147
220
|
|
|
@@ -2,18 +2,28 @@ import { LitElement, PropertyDeclarations } from 'lit';
|
|
|
2
2
|
|
|
3
3
|
declare class SpectreBaseElement extends LitElement {
|
|
4
4
|
static properties: PropertyDeclarations;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
private
|
|
5
|
+
private _ariaLabel;
|
|
6
|
+
private _ariaLabelledBy;
|
|
7
|
+
private _ariaDescribedBy;
|
|
8
|
+
private _title;
|
|
9
|
+
private _id;
|
|
10
|
+
get ariaLabel(): string | null;
|
|
11
|
+
set ariaLabel(value: string | null);
|
|
12
|
+
get ariaLabelledBy(): string | null;
|
|
13
|
+
set ariaLabelledBy(value: string | null);
|
|
14
|
+
get ariaDescribedBy(): string | null;
|
|
15
|
+
set ariaDescribedBy(value: string | null);
|
|
16
|
+
get title(): string;
|
|
17
|
+
set title(value: string | undefined | null);
|
|
9
18
|
get id(): string;
|
|
10
|
-
set id(value: string);
|
|
19
|
+
set id(value: string | undefined | null);
|
|
11
20
|
createRenderRoot(): this;
|
|
12
21
|
connectedCallback(): void;
|
|
13
22
|
getAttribute(qualifiedName: string): string | null;
|
|
14
23
|
hasAttribute(qualifiedName: string): boolean;
|
|
15
24
|
setAttribute(qualifiedName: string, value: string): void;
|
|
16
25
|
removeAttribute(qualifiedName: string): void;
|
|
26
|
+
private _removeHostAttribute;
|
|
17
27
|
protected get forwardedAriaLabel(): string | undefined;
|
|
18
28
|
protected get forwardedAriaLabelledBy(): string | undefined;
|
|
19
29
|
protected get forwardedAriaDescribedBy(): string | undefined;
|
|
@@ -2,18 +2,28 @@ import { LitElement, PropertyDeclarations } from 'lit';
|
|
|
2
2
|
|
|
3
3
|
declare class SpectreBaseElement extends LitElement {
|
|
4
4
|
static properties: PropertyDeclarations;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
private
|
|
5
|
+
private _ariaLabel;
|
|
6
|
+
private _ariaLabelledBy;
|
|
7
|
+
private _ariaDescribedBy;
|
|
8
|
+
private _title;
|
|
9
|
+
private _id;
|
|
10
|
+
get ariaLabel(): string | null;
|
|
11
|
+
set ariaLabel(value: string | null);
|
|
12
|
+
get ariaLabelledBy(): string | null;
|
|
13
|
+
set ariaLabelledBy(value: string | null);
|
|
14
|
+
get ariaDescribedBy(): string | null;
|
|
15
|
+
set ariaDescribedBy(value: string | null);
|
|
16
|
+
get title(): string;
|
|
17
|
+
set title(value: string | undefined | null);
|
|
9
18
|
get id(): string;
|
|
10
|
-
set id(value: string);
|
|
19
|
+
set id(value: string | undefined | null);
|
|
11
20
|
createRenderRoot(): this;
|
|
12
21
|
connectedCallback(): void;
|
|
13
22
|
getAttribute(qualifiedName: string): string | null;
|
|
14
23
|
hasAttribute(qualifiedName: string): boolean;
|
|
15
24
|
setAttribute(qualifiedName: string, value: string): void;
|
|
16
25
|
removeAttribute(qualifiedName: string): void;
|
|
26
|
+
private _removeHostAttribute;
|
|
17
27
|
protected get forwardedAriaLabel(): string | undefined;
|
|
18
28
|
protected get forwardedAriaLabelledBy(): string | undefined;
|
|
19
29
|
protected get forwardedAriaDescribedBy(): string | undefined;
|
package/dist/button.cjs
CHANGED
|
@@ -8,22 +8,67 @@ var spectreUi = require('@phcdevworks/spectre-ui');
|
|
|
8
8
|
var SpectreBaseElement = class extends lit.LitElement {
|
|
9
9
|
constructor() {
|
|
10
10
|
super(...arguments);
|
|
11
|
-
this.
|
|
12
|
-
this.
|
|
13
|
-
this.
|
|
11
|
+
this._ariaLabel = null;
|
|
12
|
+
this._ariaLabelledBy = null;
|
|
13
|
+
this._ariaDescribedBy = null;
|
|
14
|
+
this._title = "";
|
|
15
|
+
this._id = "";
|
|
16
|
+
}
|
|
17
|
+
get ariaLabel() {
|
|
18
|
+
return this._ariaLabel;
|
|
19
|
+
}
|
|
20
|
+
set ariaLabel(value) {
|
|
21
|
+
if (this._ariaLabel === value) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
this._ariaLabel = value;
|
|
25
|
+
this._removeHostAttribute("aria-label");
|
|
26
|
+
this.requestUpdate();
|
|
27
|
+
}
|
|
28
|
+
get ariaLabelledBy() {
|
|
29
|
+
return this._ariaLabelledBy;
|
|
30
|
+
}
|
|
31
|
+
set ariaLabelledBy(value) {
|
|
32
|
+
if (this._ariaLabelledBy === value) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
this._ariaLabelledBy = value;
|
|
36
|
+
this._removeHostAttribute("aria-labelledby");
|
|
37
|
+
this.requestUpdate();
|
|
38
|
+
}
|
|
39
|
+
get ariaDescribedBy() {
|
|
40
|
+
return this._ariaDescribedBy;
|
|
41
|
+
}
|
|
42
|
+
set ariaDescribedBy(value) {
|
|
43
|
+
if (this._ariaDescribedBy === value) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
this._ariaDescribedBy = value;
|
|
47
|
+
this._removeHostAttribute("aria-describedby");
|
|
48
|
+
this.requestUpdate();
|
|
49
|
+
}
|
|
50
|
+
get title() {
|
|
51
|
+
return this._title;
|
|
52
|
+
}
|
|
53
|
+
set title(value) {
|
|
54
|
+
const normalizedValue = value ?? "";
|
|
55
|
+
if (this._title === normalizedValue) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
this._title = normalizedValue;
|
|
59
|
+
this._removeHostAttribute("title");
|
|
60
|
+
this.requestUpdate();
|
|
14
61
|
}
|
|
15
62
|
get id() {
|
|
16
|
-
return this._id
|
|
63
|
+
return this._id;
|
|
17
64
|
}
|
|
18
65
|
set id(value) {
|
|
19
|
-
|
|
66
|
+
const normalizedValue = value ?? "";
|
|
67
|
+
if (this._id === normalizedValue) {
|
|
20
68
|
return;
|
|
21
69
|
}
|
|
22
|
-
this._id =
|
|
23
|
-
|
|
24
|
-
if (HTMLElement.prototype.hasAttribute.call(host, "id")) {
|
|
25
|
-
HTMLElement.prototype.removeAttribute.call(host, "id");
|
|
26
|
-
}
|
|
70
|
+
this._id = normalizedValue;
|
|
71
|
+
this._removeHostAttribute("id");
|
|
27
72
|
this.requestUpdate();
|
|
28
73
|
}
|
|
29
74
|
// Spectre components intentionally render in light DOM so the global
|
|
@@ -33,36 +78,99 @@ var SpectreBaseElement = class extends lit.LitElement {
|
|
|
33
78
|
}
|
|
34
79
|
connectedCallback() {
|
|
35
80
|
super.connectedCallback();
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
81
|
+
const proxiedAttributes = [
|
|
82
|
+
"id",
|
|
83
|
+
"title",
|
|
84
|
+
"aria-label",
|
|
85
|
+
"aria-labelledby",
|
|
86
|
+
"aria-describedby"
|
|
87
|
+
];
|
|
88
|
+
proxiedAttributes.forEach((attr) => {
|
|
89
|
+
const value = super.getAttribute(attr);
|
|
90
|
+
if (value !== null) {
|
|
91
|
+
this.setAttribute(attr, value);
|
|
92
|
+
}
|
|
93
|
+
});
|
|
40
94
|
}
|
|
41
95
|
getAttribute(qualifiedName) {
|
|
42
|
-
|
|
43
|
-
|
|
96
|
+
switch (qualifiedName) {
|
|
97
|
+
case "id":
|
|
98
|
+
return this.id || null;
|
|
99
|
+
case "title":
|
|
100
|
+
return this.title || null;
|
|
101
|
+
case "aria-label":
|
|
102
|
+
return this.ariaLabel;
|
|
103
|
+
case "aria-labelledby":
|
|
104
|
+
return this.ariaLabelledBy;
|
|
105
|
+
case "aria-describedby":
|
|
106
|
+
return this.ariaDescribedBy;
|
|
107
|
+
default:
|
|
108
|
+
return super.getAttribute(qualifiedName);
|
|
44
109
|
}
|
|
45
|
-
return super.getAttribute(qualifiedName);
|
|
46
110
|
}
|
|
47
111
|
hasAttribute(qualifiedName) {
|
|
48
|
-
|
|
49
|
-
|
|
112
|
+
switch (qualifiedName) {
|
|
113
|
+
case "id":
|
|
114
|
+
return this.id !== "";
|
|
115
|
+
case "title":
|
|
116
|
+
return this.title !== "";
|
|
117
|
+
case "aria-label":
|
|
118
|
+
return this.ariaLabel !== null;
|
|
119
|
+
case "aria-labelledby":
|
|
120
|
+
return this.ariaLabelledBy !== null;
|
|
121
|
+
case "aria-describedby":
|
|
122
|
+
return this.ariaDescribedBy !== null;
|
|
123
|
+
default:
|
|
124
|
+
return super.hasAttribute(qualifiedName);
|
|
50
125
|
}
|
|
51
|
-
return super.hasAttribute(qualifiedName);
|
|
52
126
|
}
|
|
53
127
|
setAttribute(qualifiedName, value) {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
128
|
+
switch (qualifiedName) {
|
|
129
|
+
case "id":
|
|
130
|
+
this.id = value;
|
|
131
|
+
break;
|
|
132
|
+
case "title":
|
|
133
|
+
this.title = value;
|
|
134
|
+
break;
|
|
135
|
+
case "aria-label":
|
|
136
|
+
this.ariaLabel = value;
|
|
137
|
+
break;
|
|
138
|
+
case "aria-labelledby":
|
|
139
|
+
this.ariaLabelledBy = value;
|
|
140
|
+
break;
|
|
141
|
+
case "aria-describedby":
|
|
142
|
+
this.ariaDescribedBy = value;
|
|
143
|
+
break;
|
|
144
|
+
default:
|
|
145
|
+
super.setAttribute(qualifiedName, value);
|
|
57
146
|
}
|
|
58
|
-
super.setAttribute(qualifiedName, value);
|
|
59
147
|
}
|
|
60
148
|
removeAttribute(qualifiedName) {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
149
|
+
switch (qualifiedName) {
|
|
150
|
+
case "id":
|
|
151
|
+
this.id = "";
|
|
152
|
+
break;
|
|
153
|
+
case "title":
|
|
154
|
+
this.title = "";
|
|
155
|
+
break;
|
|
156
|
+
case "aria-label":
|
|
157
|
+
this.ariaLabel = null;
|
|
158
|
+
break;
|
|
159
|
+
case "aria-labelledby":
|
|
160
|
+
this.ariaLabelledBy = null;
|
|
161
|
+
break;
|
|
162
|
+
case "aria-describedby":
|
|
163
|
+
this.ariaDescribedBy = null;
|
|
164
|
+
break;
|
|
165
|
+
default:
|
|
166
|
+
super.removeAttribute(qualifiedName);
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
_removeHostAttribute(name) {
|
|
170
|
+
const host = this;
|
|
171
|
+
if (HTMLElement.prototype.hasAttribute.call(host, name)) {
|
|
172
|
+
HTMLElement.prototype.removeAttribute.call(host, name);
|
|
64
173
|
}
|
|
65
|
-
super.removeAttribute(qualifiedName);
|
|
66
174
|
}
|
|
67
175
|
get forwardedAriaLabel() {
|
|
68
176
|
const value = this.ariaLabel?.trim();
|
|
@@ -77,11 +185,7 @@ var SpectreBaseElement = class extends lit.LitElement {
|
|
|
77
185
|
return value ? value : void 0;
|
|
78
186
|
}
|
|
79
187
|
};
|
|
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
|
-
};
|
|
188
|
+
SpectreBaseElement.properties = {};
|
|
85
189
|
|
|
86
190
|
// src/utils/dom.ts
|
|
87
191
|
function hasMeaningfulContent(nodes) {
|
|
@@ -142,9 +246,9 @@ var SpectreProjectableElement = class extends SpectreBaseElement {
|
|
|
142
246
|
}
|
|
143
247
|
this.contentObserver = new MutationObserver((mutations) => {
|
|
144
248
|
const isInternalMovement = mutations.every(
|
|
145
|
-
(mutation) =>
|
|
249
|
+
(mutation) => [...mutation.removedNodes].every(
|
|
146
250
|
(node) => this.isInternalNode(node) || this.contains(node)
|
|
147
|
-
) &&
|
|
251
|
+
) && [...mutation.addedNodes].every((node) => this.isInternalNode(node))
|
|
148
252
|
);
|
|
149
253
|
if (isInternalMovement) {
|
|
150
254
|
return;
|
|
@@ -190,7 +294,6 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
|
|
|
190
294
|
this.loadingLabel = "Loading";
|
|
191
295
|
this.pill = false;
|
|
192
296
|
this.size = "md";
|
|
193
|
-
this.title = "";
|
|
194
297
|
this.type = "button";
|
|
195
298
|
this.variant = "primary";
|
|
196
299
|
this.value = "";
|
|
@@ -257,26 +360,24 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
|
|
|
257
360
|
return this.visibleLabelFallback ? lit.html`<span data-sp-button-label-fallback>${this.visibleLabelFallback}</span>` : lit.nothing;
|
|
258
361
|
}
|
|
259
362
|
render() {
|
|
260
|
-
return lit.html
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
</button>
|
|
279
|
-
`;
|
|
363
|
+
return lit.html`<button
|
|
364
|
+
aria-busy="${this.loading ? "true" : "false"}"
|
|
365
|
+
aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
|
|
366
|
+
aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
|
|
367
|
+
aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
|
|
368
|
+
?autofocus="${this.autofocus}"
|
|
369
|
+
class="${this.buttonClasses}"
|
|
370
|
+
data-sp-button-native
|
|
371
|
+
?disabled="${this.isDisabled}"
|
|
372
|
+
form="${ifDefined_js.ifDefined(this.form || void 0)}"
|
|
373
|
+
id="${ifDefined_js.ifDefined(this.id || void 0)}"
|
|
374
|
+
name="${ifDefined_js.ifDefined(this.name || void 0)}"
|
|
375
|
+
title="${ifDefined_js.ifDefined(this.title || void 0)}"
|
|
376
|
+
type="${this.type}"
|
|
377
|
+
value="${ifDefined_js.ifDefined(this.value || void 0)}"
|
|
378
|
+
>
|
|
379
|
+
${this.renderButtonContent()}
|
|
380
|
+
</button>`;
|
|
280
381
|
}
|
|
281
382
|
};
|
|
282
383
|
SpectreButtonElement.properties = {
|
|
@@ -290,10 +391,9 @@ SpectreButtonElement.properties = {
|
|
|
290
391
|
name: { type: String, reflect: true },
|
|
291
392
|
pill: { type: Boolean, reflect: true },
|
|
292
393
|
size: { type: String, reflect: true },
|
|
293
|
-
title: { type: String, reflect: true },
|
|
294
394
|
type: { type: String, reflect: true },
|
|
295
395
|
variant: { type: String, reflect: true },
|
|
296
|
-
value: { type: String
|
|
396
|
+
value: { type: String }
|
|
297
397
|
};
|
|
298
398
|
function defineSpectreButton(tagName = "sp-button") {
|
|
299
399
|
const existingElement = customElements.get(tagName);
|
package/dist/button.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/base.ts","../src/utils/dom.ts","../src/utils/projectable.ts","../src/components/button/sp-button.ts"],"names":["LitElement","getButtonClasses","html","nothing","ifDefined"],"mappings":"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","file":"button.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, type TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { SpectreProjectableElement } from '../../utils/projectable';\n\nimport {\n getButtonClasses,\n type ButtonSize,\n type ButtonVariant,\n} from '@phcdevworks/spectre-ui';\n\nexport const spectreButtonVariants = [\n 'primary',\n 'secondary',\n 'ghost',\n 'danger',\n 'success',\n 'cta',\n 'accent',\n] as const;\n\nexport const spectreButtonSizes = ['sm', 'md', 'lg'] as const;\nexport const spectreButtonTypes = ['button', 'submit', 'reset'] as const;\n\nexport type SpectreButtonVariant = (typeof spectreButtonVariants)[number];\nexport type SpectreButtonSize = (typeof spectreButtonSizes)[number];\nexport type SpectreButtonType = (typeof spectreButtonTypes)[number];\n\nexport interface SpectreButtonProps {\n ariaLabel?: string | null;\n ariaLabelledBy?: string | null;\n ariaDescribedBy?: string | null;\n autofocus?: boolean;\n disabled?: boolean;\n form?: string;\n fullWidth?: boolean;\n label?: string;\n loading?: boolean;\n loadingLabel?: string;\n name?: string;\n pill?: boolean;\n size?: SpectreButtonSize;\n title?: string;\n type?: SpectreButtonType;\n variant?: SpectreButtonVariant;\n value?: string;\n}\n\nfunction isButtonVariant(value: string): value is ButtonVariant {\n return (spectreButtonVariants as readonly string[]).includes(value);\n}\n\nfunction isButtonSize(value: string): value is ButtonSize {\n return (spectreButtonSizes as readonly string[]).includes(value);\n}\n\nfunction isButtonType(value: string): value is SpectreButtonType {\n return (spectreButtonTypes as readonly string[]).includes(value);\n}\n\nexport class SpectreButtonElement extends SpectreProjectableElement implements SpectreButtonProps {\n static properties = {\n autofocus: { type: Boolean, reflect: true },\n disabled: { type: Boolean, reflect: true },\n form: { type: String },\n fullWidth: { attribute: 'full-width', type: Boolean, reflect: true },\n label: { type: String, reflect: true },\n loading: { type: Boolean, reflect: true },\n loadingLabel: { attribute: 'loading-label', type: String, reflect: true },\n name: { type: String, reflect: true },\n pill: { type: Boolean, reflect: true },\n size: { type: String, reflect: true },\n title: { type: String, reflect: true },\n type: { type: String, reflect: true },\n variant: { type: String, reflect: true },\n value: { type: String, reflect: true },\n };\n\n autofocus = false;\n disabled = false;\n form?: string;\n fullWidth = false;\n label?: string;\n loading = false;\n loadingLabel = 'Loading';\n name?: string;\n pill = false;\n size: SpectreButtonSize = 'md';\n override title = '';\n type: SpectreButtonType = 'button';\n variant: SpectreButtonVariant = 'primary';\n value = '';\n\n protected override getContentContainer(): Element | null {\n return this.querySelector('[data-sp-button-native]');\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-button-native') ||\n el.hasAttribute('data-sp-button-loading-label') ||\n el.hasAttribute('data-sp-button-label-fallback')\n );\n }\n\n protected override willUpdate(changedProperties: Map<PropertyKey, unknown>): void {\n if (changedProperties.has('variant') && !isButtonVariant(this.variant)) {\n this.variant = 'primary';\n }\n\n if (changedProperties.has('size') && !isButtonSize(this.size)) {\n this.size = 'md';\n }\n\n if (changedProperties.has('type') && !isButtonType(this.type)) {\n this.type = 'button';\n }\n\n if (changedProperties.has('loadingLabel')) {\n if (this.loadingLabel == null || this.loadingLabel.trim() === '') {\n this.loadingLabel = 'Loading';\n }\n }\n\n if (changedProperties.has('value') && this.value == null) {\n this.value = '';\n }\n }\n\n private get buttonClasses(): string {\n return getButtonClasses({\n disabled: this.isDisabled,\n fullWidth: this.fullWidth,\n loading: this.loading,\n pill: this.pill,\n size: this.size,\n variant: this.variant,\n });\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 override focus(options?: FocusOptions): void {\n (this.getContentContainer() as HTMLButtonElement | null)?.focus(options);\n }\n\n override blur(): void {\n (this.getContentContainer() as HTMLButtonElement | null)?.blur();\n }\n\n private renderButtonContent(): TemplateResult | Node[] | typeof nothing {\n if (this.loading) {\n return html`<span data-sp-button-loading-label>${this.loadingLabel}</span>`;\n }\n\n if (this.hasProjectedContent) {\n return this.projectedContent as Node[];\n }\n\n return this.visibleLabelFallback\n ? html`<span data-sp-button-label-fallback>${this.visibleLabelFallback}</span>`\n : nothing;\n }\n\n override render() {\n return html`\n <button\n aria-busy=${this.loading ? 'true' : 'false'}\n aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}\n aria-label=${ifDefined(this.forwardedAriaLabel)}\n aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}\n ?autofocus=${this.autofocus}\n class=${this.buttonClasses}\n data-sp-button-native\n ?disabled=${this.isDisabled}\n form=${ifDefined(this.form)}\n id=${ifDefined(this.id || undefined)}\n name=${ifDefined(this.name)}\n title=${ifDefined(this.title || undefined)}\n type=${this.type}\n value=${ifDefined(this.value)}\n >\n ${this.renderButtonContent() || nothing}\n </button>\n `;\n }\n}\n\nexport function defineSpectreButton(tagName = 'sp-button'): typeof SpectreButtonElement {\n const existingElement = customElements.get(tagName);\n\n if (existingElement) {\n return existingElement as unknown as typeof SpectreButtonElement;\n }\n\n customElements.define(tagName, SpectreButtonElement);\n return SpectreButtonElement;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/utils/base.ts","../src/utils/dom.ts","../src/utils/projectable.ts","../src/components/button/sp-button.ts"],"names":["LitElement","getButtonClasses","html","nothing","ifDefined"],"mappings":"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","file":"button.cjs","sourcesContent":["import { LitElement, type PropertyDeclarations } from 'lit';\n\nexport class SpectreBaseElement extends LitElement {\n static properties: PropertyDeclarations = {};\n\n private _ariaLabel: string | null = null;\n private _ariaLabelledBy: string | null = null;\n private _ariaDescribedBy: string | null = null;\n private _title = '';\n private _id = '';\n\n get ariaLabel(): string | null {\n return this._ariaLabel;\n }\n\n set ariaLabel(value: string | null) {\n if (this._ariaLabel === value) {\n return;\n }\n this._ariaLabel = value;\n this._removeHostAttribute('aria-label');\n this.requestUpdate();\n }\n\n get ariaLabelledBy(): string | null {\n return this._ariaLabelledBy;\n }\n\n set ariaLabelledBy(value: string | null) {\n if (this._ariaLabelledBy === value) {\n return;\n }\n this._ariaLabelledBy = value;\n this._removeHostAttribute('aria-labelledby');\n this.requestUpdate();\n }\n\n get ariaDescribedBy(): string | null {\n return this._ariaDescribedBy;\n }\n\n set ariaDescribedBy(value: string | null) {\n if (this._ariaDescribedBy === value) {\n return;\n }\n this._ariaDescribedBy = value;\n this._removeHostAttribute('aria-describedby');\n this.requestUpdate();\n }\n\n override get title(): string {\n return this._title;\n }\n\n override set title(value: string | undefined | null) {\n const normalizedValue = value ?? '';\n if (this._title === normalizedValue) {\n return;\n }\n this._title = normalizedValue;\n this._removeHostAttribute('title');\n this.requestUpdate();\n }\n\n override get id(): string {\n return this._id;\n }\n\n override set id(value: string | undefined | null) {\n const normalizedValue = value ?? '';\n if (this._id === normalizedValue) {\n return;\n }\n this._id = normalizedValue;\n this._removeHostAttribute('id');\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 proxiedAttributes = [\n 'id',\n 'title',\n 'aria-label',\n 'aria-labelledby',\n 'aria-describedby',\n ];\n\n proxiedAttributes.forEach((attr) => {\n const value = super.getAttribute(attr);\n if (value !== null) {\n this.setAttribute(attr, value);\n }\n });\n }\n\n override getAttribute(qualifiedName: string): string | null {\n switch (qualifiedName) {\n case 'id':\n return this.id || null;\n case 'title':\n return this.title || null;\n case 'aria-label':\n return this.ariaLabel;\n case 'aria-labelledby':\n return this.ariaLabelledBy;\n case 'aria-describedby':\n return this.ariaDescribedBy;\n default:\n return super.getAttribute(qualifiedName);\n }\n }\n\n override hasAttribute(qualifiedName: string): boolean {\n switch (qualifiedName) {\n case 'id':\n return this.id !== '';\n case 'title':\n return this.title !== '';\n case 'aria-label':\n return this.ariaLabel !== null;\n case 'aria-labelledby':\n return this.ariaLabelledBy !== null;\n case 'aria-describedby':\n return this.ariaDescribedBy !== null;\n default:\n return super.hasAttribute(qualifiedName);\n }\n }\n\n override setAttribute(qualifiedName: string, value: string): void {\n switch (qualifiedName) {\n case 'id':\n this.id = value;\n break;\n case 'title':\n this.title = value;\n break;\n case 'aria-label':\n this.ariaLabel = value;\n break;\n case 'aria-labelledby':\n this.ariaLabelledBy = value;\n break;\n case 'aria-describedby':\n this.ariaDescribedBy = value;\n break;\n default:\n super.setAttribute(qualifiedName, value);\n }\n }\n\n override removeAttribute(qualifiedName: string): void {\n switch (qualifiedName) {\n case 'id':\n this.id = '';\n break;\n case 'title':\n this.title = '';\n break;\n case 'aria-label':\n this.ariaLabel = null;\n break;\n case 'aria-labelledby':\n this.ariaLabelledBy = null;\n break;\n case 'aria-describedby':\n this.ariaDescribedBy = null;\n break;\n default:\n super.removeAttribute(qualifiedName);\n }\n }\n\n private _removeHostAttribute(name: string): void {\n const host = this as unknown as HTMLElement;\n if (HTMLElement.prototype.hasAttribute.call(host, name)) {\n HTMLElement.prototype.removeAttribute.call(host, name);\n }\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 [...mutation.removedNodes].every(\n (node) => this.isInternalNode(node) || this.contains(node),\n ) &&\n [...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, type TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { SpectreProjectableElement } from '../../utils/projectable';\n\nimport {\n getButtonClasses,\n type ButtonSize,\n type ButtonVariant,\n} from '@phcdevworks/spectre-ui';\n\nexport const spectreButtonVariants = [\n 'primary',\n 'secondary',\n 'ghost',\n 'danger',\n 'success',\n 'cta',\n 'accent',\n] as const;\n\nexport const spectreButtonSizes = ['sm', 'md', 'lg'] as const;\nexport const spectreButtonTypes = ['button', 'submit', 'reset'] as const;\n\nexport type SpectreButtonVariant = (typeof spectreButtonVariants)[number];\nexport type SpectreButtonSize = (typeof spectreButtonSizes)[number];\nexport type SpectreButtonType = (typeof spectreButtonTypes)[number];\n\nexport interface SpectreButtonProps {\n ariaLabel: string | null;\n ariaLabelledBy: string | null;\n ariaDescribedBy: string | null;\n autofocus?: boolean | undefined;\n disabled?: boolean | undefined;\n form?: string | undefined;\n fullWidth?: boolean | undefined;\n label?: string | undefined;\n loading?: boolean | undefined;\n loadingLabel?: string | undefined;\n name?: string | undefined;\n pill?: boolean | undefined;\n size?: SpectreButtonSize | undefined;\n title?: string | undefined;\n type?: SpectreButtonType | undefined;\n variant?: SpectreButtonVariant | undefined;\n value?: string | undefined;\n}\n\nfunction isButtonVariant(value: string): value is ButtonVariant {\n return (spectreButtonVariants as readonly string[]).includes(value);\n}\n\nfunction isButtonSize(value: string): value is ButtonSize {\n return (spectreButtonSizes as readonly string[]).includes(value);\n}\n\nfunction isButtonType(value: string): value is SpectreButtonType {\n return (spectreButtonTypes as readonly string[]).includes(value);\n}\n\nexport class SpectreButtonElement extends SpectreProjectableElement implements SpectreButtonProps {\n static properties = {\n autofocus: { type: Boolean, reflect: true },\n disabled: { type: Boolean, reflect: true },\n form: { type: String },\n fullWidth: { attribute: 'full-width', type: Boolean, reflect: true },\n label: { type: String, reflect: true },\n loading: { type: Boolean, reflect: true },\n loadingLabel: { attribute: 'loading-label', type: String, reflect: true },\n name: { type: String, reflect: true },\n pill: { type: Boolean, reflect: true },\n size: { type: String, reflect: true },\n type: { type: String, reflect: true },\n variant: { type: String, reflect: true },\n value: { type: String },\n };\n\n autofocus = false;\n disabled = false;\n form: string | undefined;\n fullWidth = false;\n label: string | undefined;\n loading = false;\n loadingLabel = 'Loading';\n name: string | undefined;\n pill = false;\n size: SpectreButtonSize = 'md';\n type: SpectreButtonType = 'button';\n variant: SpectreButtonVariant = 'primary';\n value = '';\n\n protected override getContentContainer(): Element | null {\n return this.querySelector('[data-sp-button-native]');\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-button-native') ||\n el.hasAttribute('data-sp-button-loading-label') ||\n el.hasAttribute('data-sp-button-label-fallback')\n );\n }\n\n protected override willUpdate(changedProperties: Map<PropertyKey, unknown>): void {\n if (changedProperties.has('variant') && !isButtonVariant(this.variant)) {\n this.variant = 'primary';\n }\n\n if (changedProperties.has('size') && !isButtonSize(this.size)) {\n this.size = 'md';\n }\n\n if (changedProperties.has('type') && !isButtonType(this.type)) {\n this.type = 'button';\n }\n\n if (changedProperties.has('loadingLabel')) {\n if (this.loadingLabel == null || this.loadingLabel.trim() === '') {\n this.loadingLabel = 'Loading';\n }\n }\n\n if (changedProperties.has('value') && this.value == null) {\n this.value = '';\n }\n }\n\n private get buttonClasses(): string {\n return getButtonClasses({\n disabled: this.isDisabled,\n fullWidth: this.fullWidth,\n loading: this.loading,\n pill: this.pill,\n size: this.size,\n variant: this.variant,\n });\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 override focus(options?: FocusOptions): void {\n (this.getContentContainer() as HTMLButtonElement | null)?.focus(options);\n }\n\n override blur(): void {\n (this.getContentContainer() as HTMLButtonElement | null)?.blur();\n }\n\n private renderButtonContent(): TemplateResult | Node[] | typeof nothing {\n if (this.loading) {\n return html`<span data-sp-button-loading-label>${this.loadingLabel}</span>`;\n }\n\n if (this.hasProjectedContent) {\n return this.projectedContent as Node[];\n }\n\n return this.visibleLabelFallback\n ? html`<span data-sp-button-label-fallback>${this.visibleLabelFallback}</span>`\n : nothing;\n }\n\n override render() {\n return html`<button\n aria-busy=\"${this.loading ? 'true' : 'false'}\"\n aria-describedby=\"${ifDefined(this.forwardedAriaDescribedBy)}\"\n aria-label=\"${ifDefined(this.forwardedAriaLabel)}\"\n aria-labelledby=\"${ifDefined(this.forwardedAriaLabelledBy)}\"\n ?autofocus=\"${this.autofocus}\"\n class=\"${this.buttonClasses}\"\n data-sp-button-native\n ?disabled=\"${this.isDisabled}\"\n form=\"${ifDefined(this.form || undefined)}\"\n id=\"${ifDefined(this.id || undefined)}\"\n name=\"${ifDefined(this.name || undefined)}\"\n title=\"${ifDefined(this.title || undefined)}\"\n type=\"${this.type}\"\n value=\"${ifDefined(this.value || undefined)}\"\n >\n ${this.renderButtonContent()}\n </button>`;\n }\n}\n\nexport function defineSpectreButton(tagName = 'sp-button'): typeof SpectreButtonElement {\n const existingElement = customElements.get(tagName);\n\n if (existingElement) {\n return existingElement as unknown as typeof SpectreButtonElement;\n }\n\n customElements.define(tagName, SpectreButtonElement);\n return SpectreButtonElement;\n}\n"]}
|