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