@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.
- package/dist/base-DQtCQ-dP.d.cts +22 -0
- package/dist/base-DQtCQ-dP.d.ts +22 -0
- package/dist/button.cjs +149 -124
- package/dist/button.cjs.map +1 -1
- package/dist/button.d.cts +15 -40
- package/dist/button.d.ts +15 -40
- package/dist/button.js +150 -125
- package/dist/button.js.map +1 -1
- package/dist/checkbox.cjs +140 -25
- package/dist/checkbox.cjs.map +1 -1
- package/dist/checkbox.d.cts +32 -32
- package/dist/checkbox.d.ts +32 -32
- package/dist/checkbox.js +141 -26
- package/dist/checkbox.js.map +1 -1
- package/dist/fieldset.cjs +96 -50
- package/dist/fieldset.cjs.map +1 -1
- package/dist/fieldset.d.cts +24 -36
- package/dist/fieldset.d.ts +24 -36
- package/dist/fieldset.js +96 -50
- package/dist/fieldset.js.map +1 -1
- package/dist/form-iI7vV-3W.d.cts +6 -0
- package/dist/form-iI7vV-3W.d.ts +6 -0
- package/dist/index.cjs +298 -826
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -2
- package/dist/index.d.ts +5 -2
- package/dist/index.js +300 -827
- package/dist/index.js.map +1 -1
- package/dist/input.cjs +70 -59
- package/dist/input.cjs.map +1 -1
- package/dist/input.d.cts +25 -36
- package/dist/input.d.ts +25 -36
- package/dist/input.js +70 -59
- package/dist/input.js.map +1 -1
- package/dist/label.cjs +101 -38
- package/dist/label.cjs.map +1 -1
- package/dist/label.d.cts +16 -20
- package/dist/label.d.ts +16 -20
- package/dist/label.js +101 -38
- package/dist/label.js.map +1 -1
- package/dist/projectable-DcnBRiko.d.cts +17 -0
- package/dist/projectable-SzbPvXfM.d.ts +17 -0
- package/dist/radio.cjs +140 -25
- package/dist/radio.cjs.map +1 -1
- package/dist/radio.d.cts +32 -32
- package/dist/radio.d.ts +32 -32
- package/dist/radio.js +141 -26
- package/dist/radio.js.map +1 -1
- package/dist/select.cjs +142 -113
- package/dist/select.cjs.map +1 -1
- package/dist/select.d.cts +23 -41
- package/dist/select.d.ts +23 -41
- package/dist/select.js +143 -113
- package/dist/select.js.map +1 -1
- package/dist/textarea.cjs +24 -223
- package/dist/textarea.cjs.map +1 -1
- package/dist/textarea.d.cts +20 -32
- package/dist/textarea.d.ts +20 -32
- package/dist/textarea.js +24 -223
- package/dist/textarea.js.map +1 -1
- package/package.json +11 -11
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { LitElement, PropertyDeclarations } from 'lit';
|
|
2
|
+
|
|
3
|
+
declare class SpectreBaseElement extends LitElement {
|
|
4
|
+
static properties: PropertyDeclarations;
|
|
5
|
+
ariaLabel: string | null;
|
|
6
|
+
ariaLabelledBy: string | null;
|
|
7
|
+
ariaDescribedBy: string | null;
|
|
8
|
+
private _id?;
|
|
9
|
+
get id(): string;
|
|
10
|
+
set id(value: string);
|
|
11
|
+
createRenderRoot(): this;
|
|
12
|
+
connectedCallback(): void;
|
|
13
|
+
getAttribute(qualifiedName: string): string | null;
|
|
14
|
+
hasAttribute(qualifiedName: string): boolean;
|
|
15
|
+
setAttribute(qualifiedName: string, value: string): void;
|
|
16
|
+
removeAttribute(qualifiedName: string): void;
|
|
17
|
+
protected get forwardedAriaLabel(): string | undefined;
|
|
18
|
+
protected get forwardedAriaLabelledBy(): string | undefined;
|
|
19
|
+
protected get forwardedAriaDescribedBy(): string | undefined;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export { SpectreBaseElement as S };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { LitElement, PropertyDeclarations } from 'lit';
|
|
2
|
+
|
|
3
|
+
declare class SpectreBaseElement extends LitElement {
|
|
4
|
+
static properties: PropertyDeclarations;
|
|
5
|
+
ariaLabel: string | null;
|
|
6
|
+
ariaLabelledBy: string | null;
|
|
7
|
+
ariaDescribedBy: string | null;
|
|
8
|
+
private _id?;
|
|
9
|
+
get id(): string;
|
|
10
|
+
set id(value: string);
|
|
11
|
+
createRenderRoot(): this;
|
|
12
|
+
connectedCallback(): void;
|
|
13
|
+
getAttribute(qualifiedName: string): string | null;
|
|
14
|
+
hasAttribute(qualifiedName: string): boolean;
|
|
15
|
+
setAttribute(qualifiedName: string, value: string): void;
|
|
16
|
+
removeAttribute(qualifiedName: string): void;
|
|
17
|
+
protected get forwardedAriaLabel(): string | undefined;
|
|
18
|
+
protected get forwardedAriaLabelledBy(): string | undefined;
|
|
19
|
+
protected get forwardedAriaDescribedBy(): string | undefined;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export { SpectreBaseElement as S };
|
package/dist/button.cjs
CHANGED
|
@@ -5,56 +5,12 @@ var ifDefined_js = require('lit/directives/if-defined.js');
|
|
|
5
5
|
var spectreUi = require('@phcdevworks/spectre-ui');
|
|
6
6
|
|
|
7
7
|
// src/components/button/sp-button.ts
|
|
8
|
-
var
|
|
9
|
-
"primary",
|
|
10
|
-
"secondary",
|
|
11
|
-
"ghost",
|
|
12
|
-
"danger",
|
|
13
|
-
"success",
|
|
14
|
-
"cta",
|
|
15
|
-
"accent"
|
|
16
|
-
];
|
|
17
|
-
var spectreButtonSizes = ["sm", "md", "lg"];
|
|
18
|
-
var spectreButtonTypes = ["button", "submit", "reset"];
|
|
19
|
-
function isButtonVariant(value) {
|
|
20
|
-
return spectreButtonVariants.includes(value);
|
|
21
|
-
}
|
|
22
|
-
function isButtonSize(value) {
|
|
23
|
-
return spectreButtonSizes.includes(value);
|
|
24
|
-
}
|
|
25
|
-
function isButtonType(value) {
|
|
26
|
-
return spectreButtonTypes.includes(value);
|
|
27
|
-
}
|
|
28
|
-
function hasMeaningfulContent(nodes) {
|
|
29
|
-
return nodes.some((node) => {
|
|
30
|
-
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
31
|
-
return true;
|
|
32
|
-
}
|
|
33
|
-
if (node.nodeType === Node.TEXT_NODE) {
|
|
34
|
-
return (node.textContent?.trim().length ?? 0) > 0;
|
|
35
|
-
}
|
|
36
|
-
return false;
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
var SpectreButtonElement = class extends lit.LitElement {
|
|
8
|
+
var SpectreBaseElement = class extends lit.LitElement {
|
|
40
9
|
constructor() {
|
|
41
10
|
super(...arguments);
|
|
42
11
|
this.ariaLabel = null;
|
|
43
12
|
this.ariaLabelledBy = null;
|
|
44
13
|
this.ariaDescribedBy = null;
|
|
45
|
-
this.autofocus = false;
|
|
46
|
-
this.disabled = false;
|
|
47
|
-
this.fullWidth = false;
|
|
48
|
-
this.loading = false;
|
|
49
|
-
this.loadingLabel = "Loading";
|
|
50
|
-
this.pill = false;
|
|
51
|
-
this.size = "md";
|
|
52
|
-
this.title = "";
|
|
53
|
-
this.type = "button";
|
|
54
|
-
this.variant = "primary";
|
|
55
|
-
// Native slot projection is a Shadow DOM feature, so in light DOM we keep
|
|
56
|
-
// host-provided content reactive by tracking and reusing the host nodes.
|
|
57
|
-
this.projectedContent = [];
|
|
58
14
|
}
|
|
59
15
|
get id() {
|
|
60
16
|
return this._id ?? "";
|
|
@@ -70,6 +26,8 @@ var SpectreButtonElement = class extends lit.LitElement {
|
|
|
70
26
|
}
|
|
71
27
|
this.requestUpdate();
|
|
72
28
|
}
|
|
29
|
+
// Spectre components intentionally render in light DOM so the global
|
|
30
|
+
// `@phcdevworks/spectre-ui` styling contract can apply directly.
|
|
73
31
|
createRenderRoot() {
|
|
74
32
|
return this;
|
|
75
33
|
}
|
|
@@ -79,8 +37,6 @@ var SpectreButtonElement = class extends lit.LitElement {
|
|
|
79
37
|
if (hostId !== null) {
|
|
80
38
|
this.id = hostId;
|
|
81
39
|
}
|
|
82
|
-
this.syncProjectedContent();
|
|
83
|
-
this.startContentObserver();
|
|
84
40
|
}
|
|
85
41
|
getAttribute(qualifiedName) {
|
|
86
42
|
if (qualifiedName === "id") {
|
|
@@ -108,10 +64,147 @@ var SpectreButtonElement = class extends lit.LitElement {
|
|
|
108
64
|
}
|
|
109
65
|
super.removeAttribute(qualifiedName);
|
|
110
66
|
}
|
|
67
|
+
get forwardedAriaLabel() {
|
|
68
|
+
const value = this.ariaLabel?.trim();
|
|
69
|
+
return value ? value : void 0;
|
|
70
|
+
}
|
|
71
|
+
get forwardedAriaLabelledBy() {
|
|
72
|
+
const value = this.ariaLabelledBy?.trim();
|
|
73
|
+
return value ? value : void 0;
|
|
74
|
+
}
|
|
75
|
+
get forwardedAriaDescribedBy() {
|
|
76
|
+
const value = this.ariaDescribedBy?.trim();
|
|
77
|
+
return value ? value : void 0;
|
|
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
|
+
}
|
|
111
113
|
disconnectedCallback() {
|
|
112
114
|
this.stopContentObserver();
|
|
113
115
|
super.disconnectedCallback();
|
|
114
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
|
+
var spectreButtonVariants = [
|
|
164
|
+
"primary",
|
|
165
|
+
"secondary",
|
|
166
|
+
"ghost",
|
|
167
|
+
"danger",
|
|
168
|
+
"success",
|
|
169
|
+
"cta",
|
|
170
|
+
"accent"
|
|
171
|
+
];
|
|
172
|
+
var spectreButtonSizes = ["sm", "md", "lg"];
|
|
173
|
+
var spectreButtonTypes = ["button", "submit", "reset"];
|
|
174
|
+
function isButtonVariant(value) {
|
|
175
|
+
return spectreButtonVariants.includes(value);
|
|
176
|
+
}
|
|
177
|
+
function isButtonSize(value) {
|
|
178
|
+
return spectreButtonSizes.includes(value);
|
|
179
|
+
}
|
|
180
|
+
function isButtonType(value) {
|
|
181
|
+
return spectreButtonTypes.includes(value);
|
|
182
|
+
}
|
|
183
|
+
var SpectreButtonElement = class extends SpectreProjectableElement {
|
|
184
|
+
constructor() {
|
|
185
|
+
super(...arguments);
|
|
186
|
+
this.autofocus = false;
|
|
187
|
+
this.disabled = false;
|
|
188
|
+
this.fullWidth = false;
|
|
189
|
+
this.loading = false;
|
|
190
|
+
this.loadingLabel = "Loading";
|
|
191
|
+
this.pill = false;
|
|
192
|
+
this.size = "md";
|
|
193
|
+
this.title = "";
|
|
194
|
+
this.type = "button";
|
|
195
|
+
this.variant = "primary";
|
|
196
|
+
this.value = "";
|
|
197
|
+
}
|
|
198
|
+
getContentContainer() {
|
|
199
|
+
return this.querySelector("[data-sp-button-native]");
|
|
200
|
+
}
|
|
201
|
+
isInternalNode(node) {
|
|
202
|
+
if (node.nodeType !== Node.ELEMENT_NODE) {
|
|
203
|
+
return false;
|
|
204
|
+
}
|
|
205
|
+
const el = node;
|
|
206
|
+
return el.hasAttribute("data-sp-button-native") || el.hasAttribute("data-sp-button-loading-label") || el.hasAttribute("data-sp-button-label-fallback");
|
|
207
|
+
}
|
|
115
208
|
willUpdate(changedProperties) {
|
|
116
209
|
if (changedProperties.has("variant") && !isButtonVariant(this.variant)) {
|
|
117
210
|
this.variant = "primary";
|
|
@@ -127,11 +220,9 @@ var SpectreButtonElement = class extends lit.LitElement {
|
|
|
127
220
|
this.loadingLabel = "Loading";
|
|
128
221
|
}
|
|
129
222
|
}
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
super.update(changedProperties);
|
|
134
|
-
this.startContentObserver();
|
|
223
|
+
if (changedProperties.has("value") && this.value == null) {
|
|
224
|
+
this.value = "";
|
|
225
|
+
}
|
|
135
226
|
}
|
|
136
227
|
get buttonClasses() {
|
|
137
228
|
return spectreUi.getButtonClasses({
|
|
@@ -146,89 +237,24 @@ var SpectreButtonElement = class extends lit.LitElement {
|
|
|
146
237
|
get isDisabled() {
|
|
147
238
|
return this.disabled || this.loading;
|
|
148
239
|
}
|
|
149
|
-
get hasProjectedContent() {
|
|
150
|
-
return hasMeaningfulContent(this.projectedContent);
|
|
151
|
-
}
|
|
152
240
|
get visibleLabelFallback() {
|
|
153
241
|
const trimmedLabel = this.label?.trim();
|
|
154
242
|
return trimmedLabel ? trimmedLabel : void 0;
|
|
155
243
|
}
|
|
156
|
-
get forwardedAriaLabel() {
|
|
157
|
-
const ariaLabel = this.ariaLabel?.trim();
|
|
158
|
-
return ariaLabel ? ariaLabel : void 0;
|
|
159
|
-
}
|
|
160
|
-
get forwardedAriaLabelledBy() {
|
|
161
|
-
const ariaLabelledBy = this.ariaLabelledBy?.trim();
|
|
162
|
-
return ariaLabelledBy ? ariaLabelledBy : void 0;
|
|
163
|
-
}
|
|
164
|
-
get forwardedAriaDescribedBy() {
|
|
165
|
-
const ariaDescribedBy = this.ariaDescribedBy?.trim();
|
|
166
|
-
return ariaDescribedBy ? ariaDescribedBy : void 0;
|
|
167
|
-
}
|
|
168
|
-
startContentObserver() {
|
|
169
|
-
if (this.contentObserver) {
|
|
170
|
-
return;
|
|
171
|
-
}
|
|
172
|
-
this.contentObserver = new MutationObserver((mutations) => {
|
|
173
|
-
const isInternalMovement = mutations.every((mutation) => {
|
|
174
|
-
return Array.from(mutation.removedNodes).every(
|
|
175
|
-
(node) => this.isInternalButtonNode(node) || this.contains(node)
|
|
176
|
-
) && Array.from(mutation.addedNodes).every((node) => this.isInternalButtonNode(node));
|
|
177
|
-
});
|
|
178
|
-
if (isInternalMovement) {
|
|
179
|
-
return;
|
|
180
|
-
}
|
|
181
|
-
if (this.syncProjectedContent()) {
|
|
182
|
-
this.requestUpdate();
|
|
183
|
-
}
|
|
184
|
-
});
|
|
185
|
-
this.contentObserver.observe(this, {
|
|
186
|
-
childList: true
|
|
187
|
-
});
|
|
188
|
-
}
|
|
189
|
-
stopContentObserver() {
|
|
190
|
-
this.contentObserver?.disconnect();
|
|
191
|
-
this.contentObserver = void 0;
|
|
192
|
-
}
|
|
193
|
-
syncProjectedContent() {
|
|
194
|
-
const nextProjectedContent = [];
|
|
195
|
-
Array.from(this.childNodes).forEach((node) => {
|
|
196
|
-
if (this.isInternalButtonNode(node)) {
|
|
197
|
-
this.projectedContent.forEach((pNode) => {
|
|
198
|
-
if (pNode.parentNode !== this && this.contains(pNode)) {
|
|
199
|
-
nextProjectedContent.push(pNode);
|
|
200
|
-
}
|
|
201
|
-
});
|
|
202
|
-
} else {
|
|
203
|
-
nextProjectedContent.push(node);
|
|
204
|
-
}
|
|
205
|
-
});
|
|
206
|
-
const hasChanged = nextProjectedContent.length !== this.projectedContent.length || nextProjectedContent.some((node, index) => node !== this.projectedContent[index]);
|
|
207
|
-
if (hasChanged) {
|
|
208
|
-
this.projectedContent = nextProjectedContent;
|
|
209
|
-
}
|
|
210
|
-
return hasChanged;
|
|
211
|
-
}
|
|
212
|
-
isInternalButtonNode(node) {
|
|
213
|
-
return node.nodeType === Node.ELEMENT_NODE && node.hasAttribute("data-sp-button-native");
|
|
214
|
-
}
|
|
215
|
-
get nativeButton() {
|
|
216
|
-
return this.querySelector("[data-sp-button-native]");
|
|
217
|
-
}
|
|
218
244
|
focus(options) {
|
|
219
|
-
this.
|
|
245
|
+
this.getContentContainer()?.focus(options);
|
|
220
246
|
}
|
|
221
247
|
blur() {
|
|
222
|
-
this.
|
|
248
|
+
this.getContentContainer()?.blur();
|
|
223
249
|
}
|
|
224
250
|
renderButtonContent() {
|
|
225
251
|
if (this.loading) {
|
|
226
|
-
return this.loadingLabel
|
|
252
|
+
return lit.html`<span data-sp-button-loading-label>${this.loadingLabel}</span>`;
|
|
227
253
|
}
|
|
228
254
|
if (this.hasProjectedContent) {
|
|
229
255
|
return this.projectedContent;
|
|
230
256
|
}
|
|
231
|
-
return this.visibleLabelFallback
|
|
257
|
+
return this.visibleLabelFallback ? lit.html`<span data-sp-button-label-fallback>${this.visibleLabelFallback}</span>` : lit.nothing;
|
|
232
258
|
}
|
|
233
259
|
render() {
|
|
234
260
|
return lit.html`
|
|
@@ -241,6 +267,7 @@ var SpectreButtonElement = class extends lit.LitElement {
|
|
|
241
267
|
class=${this.buttonClasses}
|
|
242
268
|
data-sp-button-native
|
|
243
269
|
?disabled=${this.isDisabled}
|
|
270
|
+
form=${ifDefined_js.ifDefined(this.form)}
|
|
244
271
|
id=${ifDefined_js.ifDefined(this.id || void 0)}
|
|
245
272
|
name=${ifDefined_js.ifDefined(this.name)}
|
|
246
273
|
title=${ifDefined_js.ifDefined(this.title || void 0)}
|
|
@@ -253,11 +280,9 @@ var SpectreButtonElement = class extends lit.LitElement {
|
|
|
253
280
|
}
|
|
254
281
|
};
|
|
255
282
|
SpectreButtonElement.properties = {
|
|
256
|
-
ariaLabel: { attribute: "aria-label", type: String },
|
|
257
|
-
ariaLabelledBy: { attribute: "aria-labelledby", type: String },
|
|
258
|
-
ariaDescribedBy: { attribute: "aria-describedby", type: String },
|
|
259
283
|
autofocus: { type: Boolean, reflect: true },
|
|
260
284
|
disabled: { type: Boolean, reflect: true },
|
|
285
|
+
form: { type: String },
|
|
261
286
|
fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
|
|
262
287
|
label: { type: String, reflect: true },
|
|
263
288
|
loading: { type: Boolean, reflect: true },
|
package/dist/button.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/button/sp-button.ts"],"names":["LitElement","getButtonClasses","html","ifDefined","nothing"],"mappings":"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","file":"button.cjs","sourcesContent":["import { LitElement, html, nothing, type TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\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 autofocus?: boolean;\n disabled?: boolean;\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\nfunction 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\nexport class SpectreButtonElement extends LitElement implements SpectreButtonProps {\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 disabled: { type: Boolean, reflect: true },\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 ariaLabel: string | null = null;\n ariaLabelledBy: string | null = null;\n ariaDescribedBy: string | null = null;\n autofocus = false;\n disabled = false;\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?: string;\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 // Native slot projection is a Shadow DOM feature, so in light DOM we keep\n // host-provided content reactive by tracking and reusing the host nodes.\n private projectedContent: Node[] = [];\n private contentObserver?: MutationObserver | undefined;\n\n createRenderRoot(): this {\n // Spectre components intentionally render in light DOM so the global\n // `@phcdevworks/spectre-ui` styling contract can apply directly.\n return this;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n const hostId = super.getAttribute('id');\n\n if (hostId !== null) {\n this.id = hostId;\n }\n\n this.syncProjectedContent();\n this.startContentObserver();\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 override disconnectedCallback(): void {\n this.stopContentObserver();\n super.disconnectedCallback();\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\n protected override update(changedProperties: Map<PropertyKey, unknown>): void {\n this.stopContentObserver();\n super.update(changedProperties);\n this.startContentObserver();\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 hasProjectedContent(): boolean {\n return hasMeaningfulContent(this.projectedContent);\n }\n\n private get visibleLabelFallback(): string | undefined {\n const trimmedLabel = this.label?.trim();\n return trimmedLabel ? trimmedLabel : undefined;\n }\n\n private get forwardedAriaLabel(): string | undefined {\n const ariaLabel = this.ariaLabel?.trim();\n return ariaLabel ? ariaLabel : undefined;\n }\n\n private get forwardedAriaLabelledBy(): string | undefined {\n const ariaLabelledBy = this.ariaLabelledBy?.trim();\n return ariaLabelledBy ? ariaLabelledBy : undefined;\n }\n\n private get forwardedAriaDescribedBy(): string | undefined {\n const ariaDescribedBy = this.ariaDescribedBy?.trim();\n return ariaDescribedBy ? ariaDescribedBy : undefined;\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 return (\n Array.from(mutation.removedNodes).every(\n (node) => this.isInternalButtonNode(node) || this.contains(node),\n ) &&\n Array.from(mutation.addedNodes).every((node) => this.isInternalButtonNode(node))\n );\n });\n\n if (isInternalMovement) {\n return;\n }\n\n if (this.syncProjectedContent()) {\n this.requestUpdate();\n }\n });\n\n this.contentObserver.observe(this, {\n childList: true,\n });\n }\n\n private stopContentObserver(): void {\n this.contentObserver?.disconnect();\n this.contentObserver = undefined;\n }\n\n private syncProjectedContent(): boolean {\n const nextProjectedContent: Node[] = [];\n\n Array.from(this.childNodes).forEach((node) => {\n if (this.isInternalButtonNode(node)) {\n this.projectedContent.forEach((pNode) => {\n if (pNode.parentNode !== this && this.contains(pNode)) {\n nextProjectedContent.push(pNode);\n }\n });\n } else {\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 isInternalButtonNode(node: Node): boolean {\n return (\n node.nodeType === Node.ELEMENT_NODE && (node as Element).hasAttribute('data-sp-button-native')\n );\n }\n\n private get nativeButton(): HTMLButtonElement | null {\n return this.querySelector('[data-sp-button-native]');\n }\n\n override focus(options?: FocusOptions): void {\n this.nativeButton?.focus(options);\n }\n\n override blur(): void {\n this.nativeButton?.blur();\n }\n\n private renderButtonContent(): TemplateResult | Node[] | string {\n if (this.loading) {\n return this.loadingLabel;\n }\n\n if (this.hasProjectedContent) {\n return this.projectedContent;\n }\n\n return this.visibleLabelFallback ?? '';\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 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 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"]}
|
package/dist/button.d.cts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
|
+
import { S as SpectreProjectableElement } from './projectable-DcnBRiko.cjs';
|
|
3
|
+
import './base-DQtCQ-dP.cjs';
|
|
2
4
|
|
|
3
5
|
declare const spectreButtonVariants: readonly ["primary", "secondary", "ghost", "danger", "success", "cta", "accent"];
|
|
4
6
|
declare const spectreButtonSizes: readonly ["sm", "md", "lg"];
|
|
@@ -7,8 +9,12 @@ type SpectreButtonVariant = (typeof spectreButtonVariants)[number];
|
|
|
7
9
|
type SpectreButtonSize = (typeof spectreButtonSizes)[number];
|
|
8
10
|
type SpectreButtonType = (typeof spectreButtonTypes)[number];
|
|
9
11
|
interface SpectreButtonProps {
|
|
12
|
+
ariaLabel?: string | null;
|
|
13
|
+
ariaLabelledBy?: string | null;
|
|
14
|
+
ariaDescribedBy?: string | null;
|
|
10
15
|
autofocus?: boolean;
|
|
11
16
|
disabled?: boolean;
|
|
17
|
+
form?: string;
|
|
12
18
|
fullWidth?: boolean;
|
|
13
19
|
label?: string;
|
|
14
20
|
loading?: boolean;
|
|
@@ -21,20 +27,8 @@ interface SpectreButtonProps {
|
|
|
21
27
|
variant?: SpectreButtonVariant;
|
|
22
28
|
value?: string;
|
|
23
29
|
}
|
|
24
|
-
declare class SpectreButtonElement extends
|
|
30
|
+
declare class SpectreButtonElement extends SpectreProjectableElement implements SpectreButtonProps {
|
|
25
31
|
static properties: {
|
|
26
|
-
ariaLabel: {
|
|
27
|
-
attribute: string;
|
|
28
|
-
type: StringConstructor;
|
|
29
|
-
};
|
|
30
|
-
ariaLabelledBy: {
|
|
31
|
-
attribute: string;
|
|
32
|
-
type: StringConstructor;
|
|
33
|
-
};
|
|
34
|
-
ariaDescribedBy: {
|
|
35
|
-
attribute: string;
|
|
36
|
-
type: StringConstructor;
|
|
37
|
-
};
|
|
38
32
|
autofocus: {
|
|
39
33
|
type: BooleanConstructor;
|
|
40
34
|
reflect: boolean;
|
|
@@ -43,6 +37,9 @@ declare class SpectreButtonElement extends LitElement implements SpectreButtonPr
|
|
|
43
37
|
type: BooleanConstructor;
|
|
44
38
|
reflect: boolean;
|
|
45
39
|
};
|
|
40
|
+
form: {
|
|
41
|
+
type: StringConstructor;
|
|
42
|
+
};
|
|
46
43
|
fullWidth: {
|
|
47
44
|
attribute: string;
|
|
48
45
|
type: BooleanConstructor;
|
|
@@ -90,11 +87,9 @@ declare class SpectreButtonElement extends LitElement implements SpectreButtonPr
|
|
|
90
87
|
reflect: boolean;
|
|
91
88
|
};
|
|
92
89
|
};
|
|
93
|
-
ariaLabel: string | null;
|
|
94
|
-
ariaLabelledBy: string | null;
|
|
95
|
-
ariaDescribedBy: string | null;
|
|
96
90
|
autofocus: boolean;
|
|
97
91
|
disabled: boolean;
|
|
92
|
+
form?: string;
|
|
98
93
|
fullWidth: boolean;
|
|
99
94
|
label?: string;
|
|
100
95
|
loading: boolean;
|
|
@@ -105,33 +100,13 @@ declare class SpectreButtonElement extends LitElement implements SpectreButtonPr
|
|
|
105
100
|
title: string;
|
|
106
101
|
type: SpectreButtonType;
|
|
107
102
|
variant: SpectreButtonVariant;
|
|
108
|
-
value
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
set id(value: string);
|
|
112
|
-
private projectedContent;
|
|
113
|
-
private contentObserver?;
|
|
114
|
-
createRenderRoot(): this;
|
|
115
|
-
connectedCallback(): void;
|
|
116
|
-
getAttribute(qualifiedName: string): string | null;
|
|
117
|
-
hasAttribute(qualifiedName: string): boolean;
|
|
118
|
-
setAttribute(qualifiedName: string, value: string): void;
|
|
119
|
-
removeAttribute(qualifiedName: string): void;
|
|
120
|
-
disconnectedCallback(): void;
|
|
103
|
+
value: string;
|
|
104
|
+
protected getContentContainer(): Element | null;
|
|
105
|
+
protected isInternalNode(node: Node): boolean;
|
|
121
106
|
protected willUpdate(changedProperties: Map<PropertyKey, unknown>): void;
|
|
122
|
-
protected update(changedProperties: Map<PropertyKey, unknown>): void;
|
|
123
107
|
private get buttonClasses();
|
|
124
108
|
private get isDisabled();
|
|
125
|
-
private get hasProjectedContent();
|
|
126
109
|
private get visibleLabelFallback();
|
|
127
|
-
private get forwardedAriaLabel();
|
|
128
|
-
private get forwardedAriaLabelledBy();
|
|
129
|
-
private get forwardedAriaDescribedBy();
|
|
130
|
-
private startContentObserver;
|
|
131
|
-
private stopContentObserver;
|
|
132
|
-
private syncProjectedContent;
|
|
133
|
-
private isInternalButtonNode;
|
|
134
|
-
private get nativeButton();
|
|
135
110
|
focus(options?: FocusOptions): void;
|
|
136
111
|
blur(): void;
|
|
137
112
|
private renderButtonContent;
|