@nysds/nys-button 1.11.2 → 1.11.3

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.
@@ -1,1209 +1,15 @@
1
- import { css as it, LitElement as at, html as _ } from "lit";
2
- /*!
3
- *
4
- * ▒█▄░▒█ ▒█░░▒█ ▒█▀▀▀█ ▒█▀▀▄ ▒█▀▀▀█
5
- * ▒█▒█▒█ ▒█▄▄▄█ ░▀▀▀▄▄ ▒█░▒█ ░▀▀▀▄▄
6
- * ▒█░░▀█ ░░▒█░░ ▒█▄▄▄█ ▒█▄▄▀ ▒█▄▄▄█
7
- *
8
- * Button Component
9
- * Part of the New York State Design System
10
- * Repository: https://github.com/its-hcd/nysds
11
- * License: MIT
12
- */
13
- /**
14
- * @license
15
- * Copyright 2019 Google LLC
16
- * SPDX-License-Identifier: BSD-3-Clause
17
- */
18
- const D = globalThis, j = D.ShadowRoot && (D.ShadyCSS === void 0 || D.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, et = Symbol(), B = /* @__PURE__ */ new WeakMap();
19
- let lt = class {
20
- constructor(t, e, o) {
21
- if (this._$cssResult$ = !0, o !== et) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
22
- this.cssText = t, this.t = e;
23
- }
24
- get styleSheet() {
25
- let t = this.o;
26
- const e = this.t;
27
- if (j && t === void 0) {
28
- const o = e !== void 0 && e.length === 1;
29
- o && (t = B.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), o && B.set(e, t));
30
- }
31
- return t;
32
- }
33
- toString() {
34
- return this.cssText;
35
- }
36
- };
37
- const ct = (n) => new lt(typeof n == "string" ? n : n + "", void 0, et), dt = (n, t) => {
38
- if (j) n.adoptedStyleSheets = t.map(((e) => e instanceof CSSStyleSheet ? e : e.styleSheet));
39
- else for (const e of t) {
40
- const o = document.createElement("style"), r = D.litNonce;
41
- r !== void 0 && o.setAttribute("nonce", r), o.textContent = e.cssText, n.appendChild(o);
42
- }
43
- }, G = j ? (n) => n : (n) => n instanceof CSSStyleSheet ? ((t) => {
44
- let e = "";
45
- for (const o of t.cssRules) e += o.cssText;
46
- return ct(e);
47
- })(n) : n;
48
- /**
49
- * @license
50
- * Copyright 2017 Google LLC
51
- * SPDX-License-Identifier: BSD-3-Clause
52
- */
53
- const { is: ut, defineProperty: ht, getOwnPropertyDescriptor: bt, getOwnPropertyNames: yt, getOwnPropertySymbols: ft, getPrototypeOf: vt } = Object, M = globalThis, W = M.trustedTypes, pt = W ? W.emptyScript : "", _t = M.reactiveElementPolyfillSupport, C = (n, t) => n, H = { toAttribute(n, t) {
54
- switch (t) {
55
- case Boolean:
56
- n = n ? pt : null;
57
- break;
58
- case Object:
59
- case Array:
60
- n = n == null ? n : JSON.stringify(n);
61
- }
62
- return n;
63
- }, fromAttribute(n, t) {
64
- let e = n;
65
- switch (t) {
66
- case Boolean:
67
- e = n !== null;
68
- break;
69
- case Number:
70
- e = n === null ? null : Number(n);
71
- break;
72
- case Object:
73
- case Array:
74
- try {
75
- e = JSON.parse(n);
76
- } catch {
77
- e = null;
78
- }
79
- }
80
- return e;
81
- } }, F = (n, t) => !ut(n, t), K = { attribute: !0, type: String, converter: H, reflect: !1, useDefault: !1, hasChanged: F };
82
- Symbol.metadata ??= Symbol("metadata"), M.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
83
- class w extends HTMLElement {
84
- static addInitializer(t) {
85
- this._$Ei(), (this.l ??= []).push(t);
86
- }
87
- static get observedAttributes() {
88
- return this.finalize(), this._$Eh && [...this._$Eh.keys()];
89
- }
90
- static createProperty(t, e = K) {
91
- if (e.state && (e.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((e = Object.create(e)).wrapped = !0), this.elementProperties.set(t, e), !e.noAccessor) {
92
- const o = Symbol(), r = this.getPropertyDescriptor(t, o, e);
93
- r !== void 0 && ht(this.prototype, t, r);
94
- }
95
- }
96
- static getPropertyDescriptor(t, e, o) {
97
- const { get: r, set: s } = bt(this.prototype, t) ?? { get() {
98
- return this[e];
99
- }, set(i) {
100
- this[e] = i;
101
- } };
102
- return { get: r, set(i) {
103
- const l = r?.call(this);
104
- s?.call(this, i), this.requestUpdate(t, l, o);
105
- }, configurable: !0, enumerable: !0 };
106
- }
107
- static getPropertyOptions(t) {
108
- return this.elementProperties.get(t) ?? K;
109
- }
110
- static _$Ei() {
111
- if (this.hasOwnProperty(C("elementProperties"))) return;
112
- const t = vt(this);
113
- t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
114
- }
115
- static finalize() {
116
- if (this.hasOwnProperty(C("finalized"))) return;
117
- if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(C("properties"))) {
118
- const e = this.properties, o = [...yt(e), ...ft(e)];
119
- for (const r of o) this.createProperty(r, e[r]);
120
- }
121
- const t = this[Symbol.metadata];
122
- if (t !== null) {
123
- const e = litPropertyMetadata.get(t);
124
- if (e !== void 0) for (const [o, r] of e) this.elementProperties.set(o, r);
125
- }
126
- this._$Eh = /* @__PURE__ */ new Map();
127
- for (const [e, o] of this.elementProperties) {
128
- const r = this._$Eu(e, o);
129
- r !== void 0 && this._$Eh.set(r, e);
130
- }
131
- this.elementStyles = this.finalizeStyles(this.styles);
132
- }
133
- static finalizeStyles(t) {
134
- const e = [];
135
- if (Array.isArray(t)) {
136
- const o = new Set(t.flat(1 / 0).reverse());
137
- for (const r of o) e.unshift(G(r));
138
- } else t !== void 0 && e.push(G(t));
139
- return e;
140
- }
141
- static _$Eu(t, e) {
142
- const o = e.attribute;
143
- return o === !1 ? void 0 : typeof o == "string" ? o : typeof t == "string" ? t.toLowerCase() : void 0;
144
- }
145
- constructor() {
146
- super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
147
- }
148
- _$Ev() {
149
- this._$ES = new Promise(((t) => this.enableUpdating = t)), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((t) => t(this)));
150
- }
151
- addController(t) {
152
- (this._$EO ??= /* @__PURE__ */ new Set()).add(t), this.renderRoot !== void 0 && this.isConnected && t.hostConnected?.();
153
- }
154
- removeController(t) {
155
- this._$EO?.delete(t);
156
- }
157
- _$E_() {
158
- const t = /* @__PURE__ */ new Map(), e = this.constructor.elementProperties;
159
- for (const o of e.keys()) this.hasOwnProperty(o) && (t.set(o, this[o]), delete this[o]);
160
- t.size > 0 && (this._$Ep = t);
161
- }
162
- createRenderRoot() {
163
- const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
164
- return dt(t, this.constructor.elementStyles), t;
165
- }
166
- connectedCallback() {
167
- this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach(((t) => t.hostConnected?.()));
168
- }
169
- enableUpdating(t) {
170
- }
171
- disconnectedCallback() {
172
- this._$EO?.forEach(((t) => t.hostDisconnected?.()));
173
- }
174
- attributeChangedCallback(t, e, o) {
175
- this._$AK(t, o);
176
- }
177
- _$ET(t, e) {
178
- const o = this.constructor.elementProperties.get(t), r = this.constructor._$Eu(t, o);
179
- if (r !== void 0 && o.reflect === !0) {
180
- const s = (o.converter?.toAttribute !== void 0 ? o.converter : H).toAttribute(e, o.type);
181
- this._$Em = t, s == null ? this.removeAttribute(r) : this.setAttribute(r, s), this._$Em = null;
182
- }
183
- }
184
- _$AK(t, e) {
185
- const o = this.constructor, r = o._$Eh.get(t);
186
- if (r !== void 0 && this._$Em !== r) {
187
- const s = o.getPropertyOptions(r), i = typeof s.converter == "function" ? { fromAttribute: s.converter } : s.converter?.fromAttribute !== void 0 ? s.converter : H;
188
- this._$Em = r;
189
- const l = i.fromAttribute(e, s.type);
190
- this[r] = l ?? this._$Ej?.get(r) ?? l, this._$Em = null;
191
- }
192
- }
193
- requestUpdate(t, e, o) {
194
- if (t !== void 0) {
195
- const r = this.constructor, s = this[t];
196
- if (o ??= r.getPropertyOptions(t), !((o.hasChanged ?? F)(s, e) || o.useDefault && o.reflect && s === this._$Ej?.get(t) && !this.hasAttribute(r._$Eu(t, o)))) return;
197
- this.C(t, e, o);
198
- }
199
- this.isUpdatePending === !1 && (this._$ES = this._$EP());
200
- }
201
- C(t, e, { useDefault: o, reflect: r, wrapped: s }, i) {
202
- o && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(t) && (this._$Ej.set(t, i ?? e ?? this[t]), s !== !0 || i !== void 0) || (this._$AL.has(t) || (this.hasUpdated || o || (e = void 0), this._$AL.set(t, e)), r === !0 && this._$Em !== t && (this._$Eq ??= /* @__PURE__ */ new Set()).add(t));
203
- }
204
- async _$EP() {
205
- this.isUpdatePending = !0;
206
- try {
207
- await this._$ES;
208
- } catch (e) {
209
- Promise.reject(e);
210
- }
211
- const t = this.scheduleUpdate();
212
- return t != null && await t, !this.isUpdatePending;
213
- }
214
- scheduleUpdate() {
215
- return this.performUpdate();
216
- }
217
- performUpdate() {
218
- if (!this.isUpdatePending) return;
219
- if (!this.hasUpdated) {
220
- if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
221
- for (const [r, s] of this._$Ep) this[r] = s;
222
- this._$Ep = void 0;
223
- }
224
- const o = this.constructor.elementProperties;
225
- if (o.size > 0) for (const [r, s] of o) {
226
- const { wrapped: i } = s, l = this[r];
227
- i !== !0 || this._$AL.has(r) || l === void 0 || this.C(r, void 0, s, l);
228
- }
229
- }
230
- let t = !1;
231
- const e = this._$AL;
232
- try {
233
- t = this.shouldUpdate(e), t ? (this.willUpdate(e), this._$EO?.forEach(((o) => o.hostUpdate?.())), this.update(e)) : this._$EM();
234
- } catch (o) {
235
- throw t = !1, this._$EM(), o;
236
- }
237
- t && this._$AE(e);
238
- }
239
- willUpdate(t) {
240
- }
241
- _$AE(t) {
242
- this._$EO?.forEach(((e) => e.hostUpdated?.())), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
243
- }
244
- _$EM() {
245
- this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
246
- }
247
- get updateComplete() {
248
- return this.getUpdateComplete();
249
- }
250
- getUpdateComplete() {
251
- return this._$ES;
252
- }
253
- shouldUpdate(t) {
254
- return !0;
255
- }
256
- update(t) {
257
- this._$Eq &&= this._$Eq.forEach(((e) => this._$ET(e, this[e]))), this._$EM();
258
- }
259
- updated(t) {
260
- }
261
- firstUpdated(t) {
262
- }
263
- }
264
- w.elementStyles = [], w.shadowRootOptions = { mode: "open" }, w[C("elementProperties")] = /* @__PURE__ */ new Map(), w[C("finalized")] = /* @__PURE__ */ new Map(), _t?.({ ReactiveElement: w }), (M.reactiveElementVersions ??= []).push("2.1.1");
265
- /**
266
- * @license
267
- * Copyright 2017 Google LLC
268
- * SPDX-License-Identifier: BSD-3-Clause
269
- */
270
- const gt = { attribute: !0, type: String, converter: H, reflect: !1, hasChanged: F }, $t = (n = gt, t, e) => {
271
- const { kind: o, metadata: r } = e;
272
- let s = globalThis.litPropertyMetadata.get(r);
273
- if (s === void 0 && globalThis.litPropertyMetadata.set(r, s = /* @__PURE__ */ new Map()), o === "setter" && ((n = Object.create(n)).wrapped = !0), s.set(e.name, n), o === "accessor") {
274
- const { name: i } = e;
275
- return { set(l) {
276
- const a = t.get.call(this);
277
- t.set.call(this, l), this.requestUpdate(i, a, n);
278
- }, init(l) {
279
- return l !== void 0 && this.C(i, void 0, n, l), l;
280
- } };
281
- }
282
- if (o === "setter") {
283
- const { name: i } = e;
284
- return function(l) {
285
- const a = this[i];
286
- t.call(this, l), this.requestUpdate(i, a, n);
287
- };
288
- }
289
- throw Error("Unsupported decorator location: " + o);
290
- };
291
- function u(n) {
292
- return (t, e) => typeof e == "object" ? $t(n, t, e) : ((o, r, s) => {
293
- const i = r.hasOwnProperty(s);
294
- return r.constructor.createProperty(s, o), i ? Object.getOwnPropertyDescriptor(r, s) : void 0;
295
- })(n, t, e);
296
- }
297
- const mt = it`
298
- :host {
299
- /* Anything that can be overridden should be defined here */
300
-
301
- /* Global Button Styles */
302
- --_nys-button-width: fit-content;
303
- --_nys-button-height: var(--nys-size-600, 48px);
304
- --_nys-button-border-radius--start: var(--nys-radius-xl, 12px);
305
- --_nys-button-border-radius--end: var(--nys-radius-xl, 12px);
306
- --_nys-button-padding--y: calc(
307
- var(--nys-space-150, 12px) - var(--nys-border-width-md, 2px)
308
- ); /* remove calc when SASS'd */
309
- --_nys-button-padding--x: calc(
310
- var(--nys-space-250, 20px) - var(--nys-border-width-md, 2px)
311
- ); /* remove calc when SASS'd */
312
- --_nys-button-gap: var(--nys-space-100, 8px);
313
- --_nys-button-border-width: var(--nys-border-width-md, 2px);
314
- --_nys-button-outline-width: var(--nys-border-width-md, 2px);
315
- --_nys-button-outline-offset: var(--nys-space-2px, 2px);
316
- --_nys-button-outline-color: var(--nys-color-focus, #004dd1);
317
-
318
- /* Global Button Colors */
319
- --_nys-button-background-color: var(
320
- --nys-button-background-color,
321
- var(--nys-color-theme, #154973)
322
- );
323
- --_nys-button-color: var(
324
- --nys-button-color,
325
- var(--nys-color-text-reverse, #ffffff)
326
- );
327
- --_nys-button-border-color: var(
328
- --nys-button-border-color,
329
- var(--nys-color-theme, #154973)
330
- );
331
-
332
- --_nys-button-background-color--hover: var(
333
- --nys-button-background-color--hover,
334
- var(--nys-color-theme-strong, #0e324f)
335
- );
336
- --_nys-button-color--hover: var(
337
- --nys-button-color--hover,
338
- var(--nys-color-text-reverse, #ffffff)
339
- );
340
- --_nys-button-border-color--hover: var(
341
- --nys-button-border-color--hover,
342
- var(--nys-color-theme-strong, #0e324f)
343
- );
344
-
345
- --_nys-button-background-color--active: var(
346
- --nys-button-background-color--active,
347
- var(--nys-color-theme-stronger, #081b2b)
348
- );
349
- --_nys-button-color--active: var(
350
- --nys-button-color--active,
351
- var(--nys-color-text-reverse, #ffffff)
352
- );
353
- --_nys-button-border-color--active: var(
354
- --nys-button-border-color--active,
355
- var(--nys-color-theme-stronger, #081b2b)
356
- );
357
-
358
- --_nys-button-background-color--disabled: var(
359
- --nys-color-neutral-10,
360
- #f6f6f6
361
- );
362
- --_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);
363
- --_nys-button-border-color--disabled: var(--nys-color-neutral-10, #f6f6f6);
364
-
365
- /* Typography */
366
- --_nys-button-font-size: var(--nys-font-size-ui-md, 16px);
367
- --_nys-button-font-weight: var(--nys-font-weight-semibold, 600);
368
- --_nys-button-line-height: var(--nys-font-lineheight-ui-md, 24px);
369
- --_nys-button-font-family: var(
370
- --nys-font-family-ui,
371
- var(
372
- --nys-font-family-sans,
373
- "Proxima Nova",
374
- "Helvetica Neue",
375
- "Helvetica",
376
- "Arial",
377
- sans-serif
378
- )
379
- );
380
- }
381
-
382
- /* Sizes */
383
- :host([size="sm"]) {
384
- --_nys-button-height: var(--nys-size-500, 40px);
385
- --_nys-button-padding--y: calc(
386
- var(--nys-space-100, 8px) - var(--nys-border-width-md, 2px)
387
- ); /* remove calc when SASS'd */
388
- --_nys-button-padding--x: calc(
389
- var(--nys-space-200, 16px) - var(--nys-border-width-md, 2px)
390
- ); /* remove calc when SASS'd */
391
- }
392
- :host([size="md"]) {
393
- --_nys-button-height: var(--nys-size-600, 48px);
394
- --_nys-button-padding--y: calc(
395
- var(--nys-space-150, 12px) - var(--nys-border-width-md, 2px)
396
- ); /* remove calc when SASS'd */
397
- --_nys-button-padding--x: calc(
398
- var(--nys-space-250, 20px) - var(--nys-border-width-md, 2px)
399
- ); /* remove calc when SASS'd */
400
- }
401
- :host([size="lg"]) {
402
- --_nys-button-height: var(--nys-size-700, 56px);
403
- --_nys-button-padding--y: calc(
404
- var(--nys-space-200, 16px) - var(--nys-border-width-md, 2px)
405
- ); /* remove calc when SASS'd */
406
- --_nys-button-padding--x: calc(
407
- var(--nys-space-300, 24px) - var(--nys-border-width-md, 2px)
408
- ); /* remove calc when SASS'd */
409
- }
410
- :host([fullWidth]) {
411
- --_nys-button-width: 100%;
412
- }
413
-
414
- /* VARIANTS */
415
-
416
- /* Filled */
417
- :host([variant="filled"]) {
418
- /* Filled - Default */
419
- --_nys-button-background-color: var(
420
- --nys-button-background-color,
421
- var(--nys-color-theme, #154973)
422
- );
423
- --_nys-button-color: var(
424
- --nys-button-color,
425
- var(--nys-color-text-reverse, #ffffff)
426
- );
427
- --_nys-button-border-color: var(
428
- --nys-button-border-color,
429
- var(--nys-color-transparent, #ffffff00)
430
- );
431
-
432
- /* Filled - Hover */
433
- --_nys-button-background-color--hover: var(
434
- --nys-button-background-color--hover,
435
- var(--nys-color-theme-strong, #0e324f)
436
- );
437
- --_nys-button-color--hover: var(
438
- --nys-button-color--hover,
439
- var(--nys-color-text-reverse, #ffffff)
440
- );
441
- --_nys-button-border-color: var(
442
- --nys-button-border-color,
443
- var(--nys-color-transparent, #ffffff00)
444
- );
445
-
446
- /* Filled - Pressed/Active */
447
- --_nys-button-background-color--active: var(
448
- --nys-button-background-color--active,
449
- var(--nys-color-theme-stronger, #081b2b)
450
- );
451
- --_nys-button-color--active: var(
452
- --nys-button-color--active,
453
- var(--nys-color-text-reverse, #ffffff)
454
- );
455
- --_nys-button-border-color: var(
456
- --nys-button-border-color,
457
- var(--nys-color-transparent, #ffffff00)
458
- );
459
-
460
- /* Filled - Disabled */
461
- --_nys-button-background-color--disabled: var(
462
- --nys-color-neutral-10,
463
- #f6f6f6
464
- );
465
- --_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);
466
- --_nys-button-border-color: var(
467
- --nys-button-border-color,
468
- var(--nys-color-transparent, #ffffff00)
469
- );
470
- }
471
-
472
- /* Outline */
473
- :host([variant="outline"]) {
474
- /* Outline - Default */
475
- --_nys-button-background-color: var(
476
- --nys-button-background-color,
477
- var(--nys-color-surface, #ffffff)
478
- );
479
- --_nys-button-color: var(
480
- --nys-button-color,
481
- var(--nys-color-theme, #154973)
482
- );
483
- --_nys-button-border-color: var(
484
- --nys-button-border-color,
485
- var(--nys-color-theme, #154973)
486
- );
487
-
488
- /* Outline - Hover */
489
- --_nys-button-background-color--hover: var(
490
- --nys-button-background-color--hover,
491
- var(--nys-color-theme-weaker, #eff6fb)
492
- );
493
- --_nys-button-color--hover: var(
494
- --nys-button-color--hover,
495
- var(--nys-color-theme, #154973)
496
- );
497
- --_nys-button-border-color--hover: var(
498
- --nys-button-border-color--hover,
499
- var(--nys-color-theme, #154973)
500
- );
501
-
502
- /* Outline - Pressed/Active */
503
- --_nys-button-background-color--active: var(
504
- --nys-button-background-color--active,
505
- var(--nys-color-theme-weak, #cddde9)
506
- );
507
- --_nys-button-color--active: var(
508
- --nys-button-color--active,
509
- var(--nys-color-theme, #154973)
510
- );
511
- --_nys-button-border-color--active: var(
512
- --nys-button-border-color--active,
513
- var(--nys-color-theme, #154973)
514
- );
515
-
516
- /* Outline - Disabled */
517
- --_nys-button-background-color--disabled: var(--nys-color-surface, #ffffff);
518
- --_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);
519
- --_nys-button-border-color--disabled: var(--nys-color-neutral-100, #d0d0ce);
520
- }
521
-
522
- /* Text */
523
- :host([variant="text"]) {
524
- --_nys-button-height: fit-content;
525
- --_nys-button-border-radius--start: var(--nys-radius-md, 4px);
526
- --_nys-button-border-radius--end: var(--nys-radius-md, 4px);
527
- --_nys-button-padding--y: var(--nys-space-2px, 2px);
528
- --_nys-button-padding--x: var(--nys-space-50, 4px);
529
- --_nys-button-border-width: 0px;
530
- --_nys-button-text-decoration: underline;
531
-
532
- /* Text - Default */
533
- --_nys-button-background-color: var(
534
- --nys-button-background-color,
535
- var(--nys-color-transparent, #ffffff00)
536
- );
537
- --_nys-button-color: var(
538
- --nys-button-color,
539
- var(--nys-color-link, #004dd1)
540
- );
541
- --_nys-button-border-color: var(
542
- --nys-button-border-color,
543
- var(--nys-color-transparent, #ffffff00)
544
- );
545
-
546
- /* Text - Hover */
547
- --_nys-button-background-color--hover: var(
548
- --nys-button-background-color--hover,
549
- var(--nys-color-transparent, #ffffff00)
550
- );
551
- --_nys-button-color--hover: var(
552
- --nys-button-color--hover,
553
- var(--nys-color-link-strong, #003ba1)
554
- );
555
- --_nys-button-border-color--hover: var(
556
- --nys-button-border-color--hover,
557
- var(--nys-color-transparent, #ffffff00)
558
- );
559
-
560
- /* Text - Pressed/Active */
561
- --_nys-button-background-color--active: var(
562
- --nys-button-background-color--active,
563
- var(--nys-color-transparent, #ffffff00)
564
- );
565
- --_nys-button-color--active: var(
566
- --nys-button-color--active,
567
- var(--nys-color-link-strongest, #002971)
568
- );
569
- --_nys-button-border-color--active: var(
570
- --nys-button-border-color--active,
571
- var(--nys-color-transparent, #ffffff00)
572
- );
573
-
574
- /* Text - Disabled */
575
- --_nys-button-background-color--disabled: var(
576
- --nys-color-transparent,
577
- #ffffff00
578
- );
579
- --_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);
580
- --_nys-button-border-color--disabled: var(
581
- --nys-color-transparent,
582
- #ffffff00
583
- );
584
- }
585
-
586
- /* Ghost */
587
- :host([variant="ghost"]) {
588
- /* Ghost - Default */
589
- --_nys-button-background-color: var(
590
- --nys-button-background-color,
591
- var(--nys-color-transparent, #ffffff00)
592
- );
593
- --_nys-button-color: var(
594
- --nys-button-color,
595
- var(--nys-color-text, #1b1b1b)
596
- );
597
- --_nys-button-border-color: var(
598
- --nys-button-border-color,
599
- var(--nys-color-transparent, #ffffff00)
600
- );
601
-
602
- /* Ghost - Hover */
603
- --_nys-button-background-color--hover: var(
604
- --nys-button-background-color--hover,
605
- var(--nys-color-black-transparent-100, #0000001a)
606
- );
607
- --_nys-button-color--hover: var(
608
- --nys-button-color--hover,
609
- var(--nys-color-text, #1b1b1b)
610
- );
611
- --_nys-button-border-color--hover: var(
612
- --nys-button-border-color--hover,
613
- var(--nys-color-transparent, #ffffff00)
614
- );
615
-
616
- /* Ghost - Active */
617
- --_nys-button-background-color--active: var(
618
- --nys-button-background-color--active,
619
- var(--nys-color-black-transparent-200, #00000033)
620
- );
621
- --_nys-button-color--active: var(
622
- --nys-button-color--active,
623
- var(--nys-color-text, #1b1b1b)
624
- );
625
- --_nys-button-border-color--active: var(
626
- --nys-button-border-color--active,
627
- var(--nys-color-transparent, #ffffff00)
628
- );
629
-
630
- /* Ghost - Disabled */
631
- --_nys-button-background-color--disabled: var(
632
- --nys-color-transparent,
633
- #ffffff00
634
- );
635
- --_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);
636
- --_nys-button-border-color--disabled: var(
637
- --nys-color-transparent,
638
- #ffffff00
639
- );
640
- }
641
-
642
- /* INVERTED VARIANTS */
643
-
644
- /* Filled Inverted */
645
- :host([variant="filled"][inverted]) {
646
- /* Filled Inverted - Default */
647
- --_nys-button-background-color: var(
648
- --nys-button-background-color,
649
- var(--nys-color-surface, #ffffff)
650
- );
651
- --_nys-button-color: var(
652
- --nys-button-color,
653
- var(--nys-color-text, #1b1b1b)
654
- );
655
- --_nys-button-border-color--disabled: var(
656
- --nys-color-transparent,
657
- #ffffff00
658
- );
659
-
660
- /* Filled Inverted - Hover */
661
- --_nys-button-background-color--hover: var(
662
- --nys-button-background-color--hover,
663
- var(--nys-color-neutral-100, #d0d0ce)
664
- );
665
- --_nys-button-color--hover: var(
666
- --nys-button-color--hover,
667
- var(--nys-color-text, #1b1b1b)
668
- );
669
- --_nys-button-border-color--disabled: var(
670
- --nys-color-transparent,
671
- #ffffff00
672
- );
673
-
674
- /* Filled Inverted - Pressed/Active */
675
- --_nys-button-background-color--active: var(
676
- --nys-button-background-color--active,
677
- var(--nys-color-neutral-300, #a7a9ab)
678
- );
679
- --_nys-button-color--active: var(
680
- --nys-button-color--active,
681
- var(--nys-color-text, #1b1b1b)
682
- );
683
- --_nys-button-border-color--disabled: var(
684
- --nys-color-transparent,
685
- #ffffff00
686
- );
687
-
688
- /* Filled Inverted - Disabled */
689
- --_nys-button-background-color--disabled: var(--nys-color-text, #1b1b1b);
690
- --_nys-button-color--disabled: var(--nys-color-text-disabled, #62666a);
691
- --_nys-button-border-color--disabled: var(
692
- --nys-color-transparent,
693
- #ffffff00
694
- );
695
- }
696
-
697
- /* Outline Inverted */
698
- :host([variant="outline"][inverted]) {
699
- /* Outline Inverted - Default */
700
- --_nys-button-background-color: var(
701
- --nys-button-background-color,
702
- var(--nys-color-surface-reverse, #1b1b1b)
703
- );
704
- --_nys-button-color: var(
705
- --nys-button-color,
706
- var(--nys-color-text-reverse, #ffffff)
707
- );
708
- --_nys-button-border-color: var(
709
- --nys-button-border-color,
710
- var(--nys-color-ink-reverse, #ffffff)
711
- );
712
-
713
- /* Outline Inverted - Hover */
714
- --_nys-button-background-color--hover: var(
715
- --nys-button-background-color--hover,
716
- var(--nys-color-surface-reverse, #1b1b1b)
717
- );
718
- --_nys-button-color--hover: var(
719
- --nys-button-color--hover,
720
- var(--nys-color-text-reverse-weak, #d0d0ce)
721
- );
722
- --_nys-button-border-color--hover: var(
723
- --nys-button-border-color--hover,
724
- var(--nys-color-neutral-100, #d0d0ce)
725
- );
726
-
727
- /* Outline Inverted - Pressed/Active */
728
- --_nys-button-background-color--active: var(
729
- --nys-button-background-color--active,
730
- var(--nys-color-surface-reverse, #1b1b1b)
731
- );
732
- --_nys-button-color--active: var(
733
- --nys-button-color--active,
734
- var(--nys-color-text-reverse-weaker, #bec0c1)
735
- );
736
- --_nys-button-border-color--active: var(
737
- --nys-button-border-color--active,
738
- var(--nys-color-neutral-300, #a7a9ab)
739
- );
740
-
741
- /* Outline Inverted - Disabled */
742
- --_nys-button-background-color--disabled: var(
743
- --nys-color-surface-reverse,
744
- #1b1b1b
745
- );
746
- --_nys-button-color--disabled: var(
747
- --nys-color-text-reverse-disabled,
748
- #62666a
749
- );
750
- --_nys-button-border-color--disabled: var(--nys-color-neutral-600, #62666a);
751
- }
752
-
753
- /* Text Inverted */
754
- :host([variant="text"][inverted]) {
755
- --_nys-button-height: fit-content;
756
- --_nys-button-border-radius--start: var(--nys-radius-md, 4px);
757
- --_nys-button-border-radius--end: var(--nys-radius-md, 4px);
758
- --_nys-button-padding--y: var(--nys-space-2px, 2px);
759
- --_nys-button-padding--x: var(--nys-space-50, 4px);
760
- --_nys-button-border-width: 0px;
761
- --_nys-button-text-decoration: underline;
762
-
763
- /* Text Inverted - Default */
764
- --_nys-button-background-color: var(
765
- --nys-button-background-color,
766
- var(--nys-color-transparent, #ffffff00)
767
- );
768
- --_nys-button-color: var(
769
- --nys-button-color,
770
- var(--nys-color-link-reverse, #a7a9ab)
771
- );
772
- --_nys-button-border-color: var(
773
- --nys-button-border-color,
774
- var(--nys-color-transparent, #ffffff00)
775
- );
776
-
777
- /* Text Inverted - Hover */
778
- --_nys-button-background-color--hover: var(
779
- --nys-button-background-color--hover,
780
- var(--nys-color-transparent, #ffffff00)
781
- );
782
- --_nys-button-color--hover: var(
783
- --nys-button-color--hover,
784
- var(--nys-color-link-reverse-strong, #ededed)
785
- );
786
- --_nys-button-border-color--hover: var(
787
- --nys-button-border-color--hover,
788
- var(--nys-color-transparent, #ffffff00)
789
- );
790
-
791
- /* Text Inverted - Pressed/Active */
792
- --_nys-button-background-color--active: var(
793
- --nys-button-background-color--active,
794
- var(--nys-color-transparent, #ffffff00)
795
- );
796
- --_nys-button-color--active: var(
797
- --nys-button-color--active,
798
- var(--nys-color-reverse-strongest, #ffffff)
799
- );
800
- --_nys-button-border-color--active: var(
801
- --nys-button-border-color--active,
802
- var(--nys-color-transparent, #ffffff00)
803
- );
804
-
805
- /* Text Inverted - Disabled */
806
- --_nys-button-background-color--disabled: var(
807
- --nys-color-transparent,
808
- #ffffff00
809
- );
810
- --_nys-button-color--disabled: var(
811
- --nys-color-text-reverse-disabled,
812
- #62666a
813
- );
814
- --_nys-button-border-color--disabled: var(
815
- --nys-color-transparent,
816
- #ffffff00
817
- );
818
- }
819
-
820
- /* Ghost Inverted */
821
- :host([variant="ghost"][inverted]) {
822
- /* Ghost Inverted - Default */
823
- --_nys-button-background-color: var(
824
- --nys-button-background-color,
825
- var(--nys-color-transparent, #ffffff00)
826
- );
827
- --_nys-button-color: var(
828
- --nys-button-color,
829
- var(--nys-color-text-reverse, #ffffff)
830
- );
831
- --_nys-button-border-color: var(
832
- --nys-button-border-color,
833
- var(--nys-color-transparent, #ffffff00)
834
- );
835
-
836
- /* Ghost Inverted - Hover */
837
- --_nys-button-background-color--hover: var(
838
- --nys-button-background-color--hover,
839
- var(--nys-color-white-transparent-100, #ffffff1a)
840
- );
841
- --_nys-button-color--hover: var(
842
- --nys-button-color--hover,
843
- var(--nys-color-text-reverse, #ffffff)
844
- );
845
- --_nys-button-border-color--hover: var(
846
- --nys-button-border-color--hover,
847
- var(--nys-color-transparent, #ffffff00)
848
- );
849
-
850
- /* Ghost Inverted - Pressed/Active */
851
- --_nys-button-background-color--active: var(
852
- --nys-button-background-color--active,
853
- var(--nys-color-white-transparent-200, #ffffff33)
854
- );
855
- --_nys-button-color--active: var(
856
- --nys-button-color--active,
857
- var(--nys-color-text-reverse, #ffffff)
858
- );
859
- --_nys-button-border-color--active: var(
860
- --nys-button-border-color--active,
861
- var(--nys-color-transparent, #ffffff00)
862
- );
863
-
864
- /* Ghost Inverted - Disabled */
865
- --_nys-button-background-color--disabled: var(
866
- --nys-color-transparent,
867
- #ffffff00
868
- );
869
- --_nys-button-color--disabled: var(--nys-color-text-disabled, #62666a);
870
- --_nys-button-border-color--disabled: var(
871
- --nys-color-transparent,
872
- #ffffff00
873
- );
874
- }
875
-
876
- /* Circle */
877
- :host([circle]) {
878
- --_nys-button-width: var(--_nys-button-height);
879
- --_nys-button-border-radius--start: var(--nys-radius-round, 1776px);
880
- --_nys-button-border-radius--end: var(--nys-radius-round, 1776px);
881
- --_nys-button-padding--y: 0;
882
- --_nys-button-padding--x: 0;
883
- }
884
-
885
- .nys-button {
886
- width: var(--_nys-button-width);
887
- min-height: var(--_nys-button-height);
888
- /* set every corner individually */
889
- border-start-start-radius: var(--_nys-button-border-radius--start);
890
- border-end-start-radius: var(--_nys-button-border-radius--start);
891
- border-start-end-radius: var(--_nys-button-border-radius--end);
892
- border-end-end-radius: var(--_nys-button-border-radius--end);
893
- padding: var(--_nys-button-padding--y) var(--_nys-button-padding--x);
894
- display: flex;
895
- align-items: center;
896
- justify-content: center;
897
- gap: var(--_nys-button-gap);
898
- font-family: var(--_nys-button-font-family);
899
- font-size: var(--_nys-button-font-size);
900
- font-weight: var(--_nys-button-font-weight);
901
- line-height: var(--_nys-button-line-height);
902
- text-decoration: var(--_nys-button-text-decoration);
903
- box-sizing: border-box;
904
- background-color: var(--_nys-button-background-color);
905
- color: var(--_nys-button-color);
906
- border: solid var(--_nys-button-border-width)
907
- var(--_nys-button-border-color);
908
- cursor: var(--_nys-button-cursor, pointer);
909
- }
910
-
911
- :host([circle]) .nys-button {
912
- max-width: var(--_nys-button-height);
913
- max-height: var(--_nys-button-height);
914
- }
915
-
916
- .nys-button:hover {
917
- background-color: var(--_nys-button-background-color--hover);
918
- color: var(--_nys-button-color--hover);
919
- border-color: var(--_nys-button-border-color--hover);
920
- }
921
-
922
- .nys-button:active {
923
- background-color: var(--_nys-button-background-color--active);
924
- color: var(--_nys-button-color--active);
925
- border-color: var(--_nys-button-border-color--active);
926
- }
927
-
928
- .nys-button:disabled,
929
- a[disabled] {
930
- background-color: var(--_nys-button-background-color--disabled);
931
- color: var(--_nys-button-color--disabled);
932
- border-color: var(--_nys-button-border-color--disabled);
933
- cursor: not-allowed;
934
- }
935
-
936
- .nys-button__linkwrapper:has([disabled]) {
937
- cursor: not-allowed;
938
- width: fit-content;
939
- }
940
-
941
- /* Remove click functionality from disabled link button */
942
- a[disabled] {
943
- pointer-events: none;
944
- }
945
-
946
- a[disabled]:hover {
947
- background-color: var(--_nys-button-background-color--disabled);
948
- color: var(--_nys-button-color--disabled);
949
- border-color: var(--_nys-button-border-color--disabled);
950
- }
951
-
952
- .nys-button * {
953
- cursor: var(--_nys-button-cursor, pointer);
954
- }
955
-
956
- .nys-button:disabled * {
957
- cursor: not-allowed;
958
- }
959
-
960
- .nys-button:focus-visible {
961
- outline-offset: var(--_nys-button-outline-offset);
962
- outline: solid var(--_nys-button-outline-width)
963
- var(--_nys-button-outline-color);
964
- }
965
-
966
- .nys-button__text {
967
- display: flex;
968
- align-items: center;
969
- user-select: none;
970
- }
971
- `;
972
- /**
973
- * @license
974
- * Copyright 2017 Google LLC
975
- * SPDX-License-Identifier: BSD-3-Clause
976
- */
977
- const V = globalThis, U = V.trustedTypes, Z = U ? U.createPolicy("lit-html", { createHTML: (n) => n }) : void 0, ot = "$lit$", m = `lit$${Math.random().toFixed(9).slice(2)}$`, rt = "?" + m, At = `<${rt}>`, S = document, z = () => S.createComment(""), P = (n) => n === null || typeof n != "object" && typeof n != "function", q = Array.isArray, xt = (n) => q(n) || typeof n?.[Symbol.iterator] == "function", L = `[
978
- \f\r]`, E = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, J = /-->/g, Y = />/g, A = RegExp(`>|${L}(?:([^\\s"'>=/]+)(${L}*=${L}*(?:[^
979
- \f\r"'\`<>=]|("|')|))|$)`, "g"), Q = /'/g, X = /"/g, nt = /^(?:script|style|textarea|title)$/i, I = Symbol.for("lit-noChange"), b = Symbol.for("lit-nothing"), tt = /* @__PURE__ */ new WeakMap(), x = S.createTreeWalker(S, 129);
980
- function st(n, t) {
981
- if (!q(n) || !n.hasOwnProperty("raw")) throw Error("invalid template strings array");
982
- return Z !== void 0 ? Z.createHTML(t) : t;
983
- }
984
- const St = (n, t) => {
985
- const e = n.length - 1, o = [];
986
- let r, s = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", i = E;
987
- for (let l = 0; l < e; l++) {
988
- const a = n[l];
989
- let y, f, c = -1, g = 0;
990
- for (; g < a.length && (i.lastIndex = g, f = i.exec(a), f !== null); ) g = i.lastIndex, i === E ? f[1] === "!--" ? i = J : f[1] !== void 0 ? i = Y : f[2] !== void 0 ? (nt.test(f[2]) && (r = RegExp("</" + f[2], "g")), i = A) : f[3] !== void 0 && (i = A) : i === A ? f[0] === ">" ? (i = r ?? E, c = -1) : f[1] === void 0 ? c = -2 : (c = i.lastIndex - f[2].length, y = f[1], i = f[3] === void 0 ? A : f[3] === '"' ? X : Q) : i === X || i === Q ? i = A : i === J || i === Y ? i = E : (i = A, r = void 0);
991
- const $ = i === A && n[l + 1].startsWith("/>") ? " " : "";
992
- s += i === E ? a + At : c >= 0 ? (o.push(y), a.slice(0, c) + ot + a.slice(c) + m + $) : a + m + (c === -2 ? l : $);
993
- }
994
- return [st(n, s + (n[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), o];
995
- };
996
- class T {
997
- constructor({ strings: t, _$litType$: e }, o) {
998
- let r;
999
- this.parts = [];
1000
- let s = 0, i = 0;
1001
- const l = t.length - 1, a = this.parts, [y, f] = St(t, e);
1002
- if (this.el = T.createElement(y, o), x.currentNode = this.el.content, e === 2 || e === 3) {
1003
- const c = this.el.content.firstChild;
1004
- c.replaceWith(...c.childNodes);
1005
- }
1006
- for (; (r = x.nextNode()) !== null && a.length < l; ) {
1007
- if (r.nodeType === 1) {
1008
- if (r.hasAttributes()) for (const c of r.getAttributeNames()) if (c.endsWith(ot)) {
1009
- const g = f[i++], $ = r.getAttribute(c).split(m), O = /([.?@])?(.*)/.exec(g);
1010
- a.push({ type: 1, index: s, name: O[2], strings: $, ctor: O[1] === "." ? wt : O[1] === "?" ? Et : O[1] === "@" ? Ct : N }), r.removeAttribute(c);
1011
- } else c.startsWith(m) && (a.push({ type: 6, index: s }), r.removeAttribute(c));
1012
- if (nt.test(r.tagName)) {
1013
- const c = r.textContent.split(m), g = c.length - 1;
1014
- if (g > 0) {
1015
- r.textContent = U ? U.emptyScript : "";
1016
- for (let $ = 0; $ < g; $++) r.append(c[$], z()), x.nextNode(), a.push({ type: 2, index: ++s });
1017
- r.append(c[g], z());
1018
- }
1019
- }
1020
- } else if (r.nodeType === 8) if (r.data === rt) a.push({ type: 2, index: s });
1021
- else {
1022
- let c = -1;
1023
- for (; (c = r.data.indexOf(m, c + 1)) !== -1; ) a.push({ type: 7, index: s }), c += m.length - 1;
1024
- }
1025
- s++;
1026
- }
1027
- }
1028
- static createElement(t, e) {
1029
- const o = S.createElement("template");
1030
- return o.innerHTML = t, o;
1031
- }
1032
- }
1033
- function k(n, t, e = n, o) {
1034
- if (t === I) return t;
1035
- let r = o !== void 0 ? e._$Co?.[o] : e._$Cl;
1036
- const s = P(t) ? void 0 : t._$litDirective$;
1037
- return r?.constructor !== s && (r?._$AO?.(!1), s === void 0 ? r = void 0 : (r = new s(n), r._$AT(n, e, o)), o !== void 0 ? (e._$Co ??= [])[o] = r : e._$Cl = r), r !== void 0 && (t = k(n, r._$AS(n, t.values), r, o)), t;
1038
- }
1039
- class kt {
1040
- constructor(t, e) {
1041
- this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = e;
1042
- }
1043
- get parentNode() {
1044
- return this._$AM.parentNode;
1045
- }
1046
- get _$AU() {
1047
- return this._$AM._$AU;
1048
- }
1049
- u(t) {
1050
- const { el: { content: e }, parts: o } = this._$AD, r = (t?.creationScope ?? S).importNode(e, !0);
1051
- x.currentNode = r;
1052
- let s = x.nextNode(), i = 0, l = 0, a = o[0];
1053
- for (; a !== void 0; ) {
1054
- if (i === a.index) {
1055
- let y;
1056
- a.type === 2 ? y = new R(s, s.nextSibling, this, t) : a.type === 1 ? y = new a.ctor(s, a.name, a.strings, this, t) : a.type === 6 && (y = new Pt(s, this, t)), this._$AV.push(y), a = o[++l];
1057
- }
1058
- i !== a?.index && (s = x.nextNode(), i++);
1059
- }
1060
- return x.currentNode = S, r;
1061
- }
1062
- p(t) {
1063
- let e = 0;
1064
- for (const o of this._$AV) o !== void 0 && (o.strings !== void 0 ? (o._$AI(t, o, e), e += o.strings.length - 2) : o._$AI(t[e])), e++;
1065
- }
1066
- }
1067
- class R {
1068
- get _$AU() {
1069
- return this._$AM?._$AU ?? this._$Cv;
1070
- }
1071
- constructor(t, e, o, r) {
1072
- this.type = 2, this._$AH = b, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = o, this.options = r, this._$Cv = r?.isConnected ?? !0;
1073
- }
1074
- get parentNode() {
1075
- let t = this._$AA.parentNode;
1076
- const e = this._$AM;
1077
- return e !== void 0 && t?.nodeType === 11 && (t = e.parentNode), t;
1078
- }
1079
- get startNode() {
1080
- return this._$AA;
1081
- }
1082
- get endNode() {
1083
- return this._$AB;
1084
- }
1085
- _$AI(t, e = this) {
1086
- t = k(this, t, e), P(t) ? t === b || t == null || t === "" ? (this._$AH !== b && this._$AR(), this._$AH = b) : t !== this._$AH && t !== I && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : xt(t) ? this.k(t) : this._(t);
1087
- }
1088
- O(t) {
1089
- return this._$AA.parentNode.insertBefore(t, this._$AB);
1090
- }
1091
- T(t) {
1092
- this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
1093
- }
1094
- _(t) {
1095
- this._$AH !== b && P(this._$AH) ? this._$AA.nextSibling.data = t : this.T(S.createTextNode(t)), this._$AH = t;
1096
- }
1097
- $(t) {
1098
- const { values: e, _$litType$: o } = t, r = typeof o == "number" ? this._$AC(t) : (o.el === void 0 && (o.el = T.createElement(st(o.h, o.h[0]), this.options)), o);
1099
- if (this._$AH?._$AD === r) this._$AH.p(e);
1100
- else {
1101
- const s = new kt(r, this), i = s.u(this.options);
1102
- s.p(e), this.T(i), this._$AH = s;
1103
- }
1104
- }
1105
- _$AC(t) {
1106
- let e = tt.get(t.strings);
1107
- return e === void 0 && tt.set(t.strings, e = new T(t)), e;
1108
- }
1109
- k(t) {
1110
- q(this._$AH) || (this._$AH = [], this._$AR());
1111
- const e = this._$AH;
1112
- let o, r = 0;
1113
- for (const s of t) r === e.length ? e.push(o = new R(this.O(z()), this.O(z()), this, this.options)) : o = e[r], o._$AI(s), r++;
1114
- r < e.length && (this._$AR(o && o._$AB.nextSibling, r), e.length = r);
1115
- }
1116
- _$AR(t = this._$AA.nextSibling, e) {
1117
- for (this._$AP?.(!1, !0, e); t !== this._$AB; ) {
1118
- const o = t.nextSibling;
1119
- t.remove(), t = o;
1120
- }
1121
- }
1122
- setConnected(t) {
1123
- this._$AM === void 0 && (this._$Cv = t, this._$AP?.(t));
1124
- }
1125
- }
1126
- class N {
1127
- get tagName() {
1128
- return this.element.tagName;
1129
- }
1130
- get _$AU() {
1131
- return this._$AM._$AU;
1132
- }
1133
- constructor(t, e, o, r, s) {
1134
- this.type = 1, this._$AH = b, this._$AN = void 0, this.element = t, this.name = e, this._$AM = r, this.options = s, o.length > 2 || o[0] !== "" || o[1] !== "" ? (this._$AH = Array(o.length - 1).fill(new String()), this.strings = o) : this._$AH = b;
1135
- }
1136
- _$AI(t, e = this, o, r) {
1137
- const s = this.strings;
1138
- let i = !1;
1139
- if (s === void 0) t = k(this, t, e, 0), i = !P(t) || t !== this._$AH && t !== I, i && (this._$AH = t);
1140
- else {
1141
- const l = t;
1142
- let a, y;
1143
- for (t = s[0], a = 0; a < s.length - 1; a++) y = k(this, l[o + a], e, a), y === I && (y = this._$AH[a]), i ||= !P(y) || y !== this._$AH[a], y === b ? t = b : t !== b && (t += (y ?? "") + s[a + 1]), this._$AH[a] = y;
1144
- }
1145
- i && !r && this.j(t);
1146
- }
1147
- j(t) {
1148
- t === b ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
1149
- }
1150
- }
1151
- class wt extends N {
1152
- constructor() {
1153
- super(...arguments), this.type = 3;
1154
- }
1155
- j(t) {
1156
- this.element[this.name] = t === b ? void 0 : t;
1157
- }
1158
- }
1159
- class Et extends N {
1160
- constructor() {
1161
- super(...arguments), this.type = 4;
1162
- }
1163
- j(t) {
1164
- this.element.toggleAttribute(this.name, !!t && t !== b);
1165
- }
1166
- }
1167
- class Ct extends N {
1168
- constructor(t, e, o, r, s) {
1169
- super(t, e, o, r, s), this.type = 5;
1170
- }
1171
- _$AI(t, e = this) {
1172
- if ((t = k(this, t, e, 0) ?? b) === I) return;
1173
- const o = this._$AH, r = t === b && o !== b || t.capture !== o.capture || t.once !== o.once || t.passive !== o.passive, s = t !== b && (o === b || r);
1174
- r && this.element.removeEventListener(this.name, this, o), s && this.element.addEventListener(this.name, this, t), this._$AH = t;
1175
- }
1176
- handleEvent(t) {
1177
- typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, t) : this._$AH.handleEvent(t);
1178
- }
1179
- }
1180
- class Pt {
1181
- constructor(t, e, o) {
1182
- this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = o;
1183
- }
1184
- get _$AU() {
1185
- return this._$AM._$AU;
1186
- }
1187
- _$AI(t) {
1188
- k(this, t);
1189
- }
1190
- }
1191
- const It = V.litHtmlPolyfillSupport;
1192
- It?.(T, R), (V.litHtmlVersions ??= []).push("3.3.1");
1193
- /**
1194
- * @license
1195
- * Copyright 2018 Google LLC
1196
- * SPDX-License-Identifier: BSD-3-Clause
1197
- */
1198
- const p = (n) => n ?? b;
1199
- var Tt = Object.defineProperty, Ot = Object.getOwnPropertyDescriptor, h = (n, t, e, o) => {
1200
- for (var r = o > 1 ? void 0 : o ? Ot(t, e) : t, s = n.length - 1, i; s >= 0; s--)
1201
- (i = n[s]) && (r = (o ? i(t, e, r) : i(r)) || r);
1202
- return o && r && Tt(t, e, r), r;
1
+ import { LitElement as d, unsafeCSS as v, html as a } from "lit";
2
+ import { property as r } from "lit/decorators.js";
3
+ import { ifDefined as c } from "lit/directives/if-defined.js";
4
+ const f = ':host{--_nys-button-width: fit-content;--_nys-button-height: var(--nys-size-600, 48px);--_nys-button-border-radius--start: var(--nys-radius-xl, 12px);--_nys-button-border-radius--end: var(--nys-radius-xl, 12px);--_nys-button-padding--y: calc( var(--nys-space-150, 12px) - var(--nys-border-width-md, 2px) );--_nys-button-padding--x: calc( var(--nys-space-250, 20px) - var(--nys-border-width-md, 2px) );--_nys-button-gap: var(--nys-space-100, 8px);--_nys-button-border-width: var(--nys-border-width-md, 2px);--_nys-button-outline-width: var(--nys-border-width-md, 2px);--_nys-button-outline-offset: var(--nys-space-2px, 2px);--_nys-button-outline-color: var(--nys-color-focus, #004dd1);--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-theme, #154973) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-theme, #154973) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-theme-strong, #0e324f) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-theme-strong, #0e324f) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-theme-stronger, #081b2b) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-theme-stronger, #081b2b) );--_nys-button-background-color--disabled: var( --nys-color-neutral-10, #f6f6f6 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-neutral-10, #f6f6f6);--_nys-button-font-size: var(--nys-font-size-ui-md, 16px);--_nys-button-font-weight: var(--nys-font-weight-semibold, 600);--_nys-button-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-button-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) )}:host([size=sm]){--_nys-button-height: var(--nys-size-500, 40px);--_nys-button-padding--y: calc( var(--nys-space-100, 8px) - var(--nys-border-width-md, 2px) );--_nys-button-padding--x: calc( var(--nys-space-200, 16px) - var(--nys-border-width-md, 2px) )}:host([size=md]){--_nys-button-height: var(--nys-size-600, 48px);--_nys-button-padding--y: calc( var(--nys-space-150, 12px) - var(--nys-border-width-md, 2px) );--_nys-button-padding--x: calc( var(--nys-space-250, 20px) - var(--nys-border-width-md, 2px) )}:host([size=lg]){--_nys-button-height: var(--nys-size-700, 56px);--_nys-button-padding--y: calc( var(--nys-space-200, 16px) - var(--nys-border-width-md, 2px) );--_nys-button-padding--x: calc( var(--nys-space-300, 24px) - var(--nys-border-width-md, 2px) )}:host([fullWidth]){--_nys-button-width: 100%}:host([variant=filled]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-theme, #154973) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text-reverse, #ffffff) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-theme-strong, #0e324f) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text-reverse, #ffffff) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-theme-stronger, #081b2b) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text-reverse, #ffffff) );--_nys-button-background-color--disabled: var( --nys-color-neutral-10, #f6f6f6 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) )}:host([variant=outline]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-surface, #ffffff) );--_nys-button-color: var( --nys-button-color, var(--nys-color-theme, #154973) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-theme, #154973) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-theme-weaker, #eff6fb) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-theme, #154973) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-theme, #154973) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-theme-weak, #cddde9) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-theme, #154973) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-theme, #154973) );--_nys-button-background-color--disabled: var(--nys-color-surface, #ffffff);--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var(--nys-color-neutral-100, #d0d0ce)}:host([variant=text]){--_nys-button-height: fit-content;--_nys-button-border-radius--start: var(--nys-radius-md, 4px);--_nys-button-border-radius--end: var(--nys-radius-md, 4px);--_nys-button-padding--y: var(--nys-space-2px, 2px);--_nys-button-padding--x: var(--nys-space-50, 4px);--_nys-button-border-width: 0px;--_nys-button-text-decoration: underline;--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-color: var( --nys-button-color, var(--nys-color-link, #004dd1) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-link-strong, #003ba1) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-link-strongest, #002971) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-transparent, #ffffff00 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var( --nys-color-transparent, #ffffff00 )}:host([variant=ghost]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text, #1b1b1b) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-black-transparent-100, #0000001a) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text, #1b1b1b) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-black-transparent-200, #00000033) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text, #1b1b1b) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-transparent, #ffffff00 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-button-border-color--disabled: var( --nys-color-transparent, #ffffff00 )}:host([variant=filled][inverted]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-surface, #ffffff) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text, #1b1b1b) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-neutral-100, #d0d0ce) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text, #1b1b1b) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-neutral-300, #a7a9ab) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text, #1b1b1b) );--_nys-button-background-color--disabled: var(--nys-color-text, #1b1b1b);--_nys-button-color--disabled: var(--nys-color-text-disabled, #62666a);--_nys-button-border-color--disabled: var( --nys-color-transparent, #ffffff00 )}:host([variant=outline][inverted]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-surface-reverse, #1b1b1b) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-ink-reverse, #ffffff) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-surface-reverse, #1b1b1b) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text-reverse-weak, #d0d0ce) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-neutral-100, #d0d0ce) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-surface-reverse, #1b1b1b) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text-reverse-weaker, #bec0c1) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-neutral-300, #a7a9ab) );--_nys-button-background-color--disabled: var( --nys-color-surface-reverse, #1b1b1b );--_nys-button-color--disabled: var( --nys-color-text-reverse-disabled, #62666a );--_nys-button-border-color--disabled: var(--nys-color-neutral-600, #62666a)}:host([variant=text][inverted]){--_nys-button-height: fit-content;--_nys-button-border-radius--start: var(--nys-radius-md, 4px);--_nys-button-border-radius--end: var(--nys-radius-md, 4px);--_nys-button-padding--y: var(--nys-space-2px, 2px);--_nys-button-padding--x: var(--nys-space-50, 4px);--_nys-button-border-width: 0px;--_nys-button-text-decoration: underline;--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-color: var( --nys-button-color, var(--nys-color-link-reverse, #a7a9ab) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-link-reverse-strong, #ededed) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-reverse-strongest, #ffffff) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-transparent, #ffffff00 );--_nys-button-color--disabled: var( --nys-color-text-reverse-disabled, #62666a );--_nys-button-border-color--disabled: var( --nys-color-transparent, #ffffff00 )}:host([variant=ghost][inverted]){--_nys-button-background-color: var( --nys-button-background-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-color: var( --nys-button-color, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color: var( --nys-button-border-color, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--hover: var( --nys-button-background-color--hover, var(--nys-color-white-transparent-100, #ffffff1a) );--_nys-button-color--hover: var( --nys-button-color--hover, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--hover: var( --nys-button-border-color--hover, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--active: var( --nys-button-background-color--active, var(--nys-color-white-transparent-200, #ffffff33) );--_nys-button-color--active: var( --nys-button-color--active, var(--nys-color-text-reverse, #ffffff) );--_nys-button-border-color--active: var( --nys-button-border-color--active, var(--nys-color-transparent, #ffffff00) );--_nys-button-background-color--disabled: var( --nys-color-transparent, #ffffff00 );--_nys-button-color--disabled: var(--nys-color-text-disabled, #62666a);--_nys-button-border-color--disabled: var( --nys-color-transparent, #ffffff00 )}:host([circle]){--_nys-button-width: var(--_nys-button-height);--_nys-button-border-radius--start: var(--nys-radius-round, 1776px);--_nys-button-border-radius--end: var(--nys-radius-round, 1776px);--_nys-button-padding--y: 0;--_nys-button-padding--x: 0}.nys-button{width:var(--_nys-button-width);min-height:var(--_nys-button-height);border-start-start-radius:var(--_nys-button-border-radius--start);border-end-start-radius:var(--_nys-button-border-radius--start);border-start-end-radius:var(--_nys-button-border-radius--end);border-end-end-radius:var(--_nys-button-border-radius--end);padding:var(--_nys-button-padding--y) var(--_nys-button-padding--x);display:flex;align-items:center;justify-content:center;gap:var(--_nys-button-gap);font-family:var(--_nys-button-font-family);font-size:var(--_nys-button-font-size);font-weight:var(--_nys-button-font-weight);line-height:var(--_nys-button-line-height);text-decoration:var(--_nys-button-text-decoration);box-sizing:border-box;background-color:var(--_nys-button-background-color);color:var(--_nys-button-color);border:solid var(--_nys-button-border-width) var(--_nys-button-border-color);cursor:var(--_nys-button-cursor, pointer)}:host([circle]) .nys-button{max-width:var(--_nys-button-height);max-height:var(--_nys-button-height)}.nys-button:hover{background-color:var(--_nys-button-background-color--hover);color:var(--_nys-button-color--hover);border-color:var(--_nys-button-border-color--hover)}.nys-button:active{background-color:var(--_nys-button-background-color--active);color:var(--_nys-button-color--active);border-color:var(--_nys-button-border-color--active)}.nys-button:disabled,a[disabled]{background-color:var(--_nys-button-background-color--disabled);color:var(--_nys-button-color--disabled);border-color:var(--_nys-button-border-color--disabled);cursor:not-allowed}.nys-button__linkwrapper:has([disabled]){cursor:not-allowed;width:fit-content}a[disabled]{pointer-events:none}a[disabled]:hover{background-color:var(--_nys-button-background-color--disabled);color:var(--_nys-button-color--disabled);border-color:var(--_nys-button-border-color--disabled)}.nys-button *{cursor:var(--_nys-button-cursor, pointer)}.nys-button:disabled *{cursor:not-allowed}.nys-button:focus-visible{outline-offset:var(--_nys-button-outline-offset);outline:solid var(--_nys-button-outline-width) var(--_nys-button-outline-color)}.nys-button__text{display:flex;align-items:center;-webkit-user-select:none;user-select:none}';
5
+ var h = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (y, o, s, i) => {
6
+ for (var l = i > 1 ? void 0 : i ? _(o, s) : o, b = y.length - 1, u; b >= 0; b--)
7
+ (u = y[b]) && (l = (i ? u(o, s, l) : u(l)) || l);
8
+ return i && l && h(o, s, l), l;
1203
9
  };
1204
- let Dt = 0;
1205
- var v;
1206
- const d = (v = class extends at {
10
+ let p = 0;
11
+ var e;
12
+ const t = (e = class extends d {
1207
13
  // allows use of elementInternals' API
1208
14
  constructor() {
1209
15
  super(), this.id = "", this.name = "", this._size = "md", this.fullWidth = !1, this._variant = "filled", this.inverted = !1, this.label = "", this.ariaLabel = "", this.ariaControls = "", this.prefixIcon = "", this.suffixIcon = "", this.circle = !1, this.icon = "", this.disabled = !1, this.form = null, this.value = "", this.ariaDescription = "", this._type = "button", this.onClick = null, this.href = "", this._target = "_self", this._internals = this.attachInternals();
@@ -1211,59 +17,59 @@ const d = (v = class extends at {
1211
17
  get size() {
1212
18
  return this._size;
1213
19
  }
1214
- set size(t) {
1215
- this._size = v.VALID_SIZES.includes(
1216
- t
1217
- ) ? t : "md";
20
+ set size(o) {
21
+ this._size = e.VALID_SIZES.includes(
22
+ o
23
+ ) ? o : "md";
1218
24
  }
1219
25
  get variant() {
1220
26
  return this._variant;
1221
27
  }
1222
- set variant(t) {
1223
- this._variant = v.VALID_VARIANTS.includes(
1224
- t
1225
- ) ? t : "filled";
28
+ set variant(o) {
29
+ this._variant = e.VALID_VARIANTS.includes(
30
+ o
31
+ ) ? o : "filled";
1226
32
  }
1227
33
  get type() {
1228
34
  return this._type;
1229
35
  }
1230
- set type(t) {
1231
- this._type = v.VALID_TYPES.includes(
1232
- t
1233
- ) ? t : "button";
36
+ set type(o) {
37
+ this._type = e.VALID_TYPES.includes(
38
+ o
39
+ ) ? o : "button";
1234
40
  }
1235
41
  get target() {
1236
42
  return this._target;
1237
43
  }
1238
- set target(t) {
1239
- this._target = v.VALID_TARGETS.includes(
1240
- t
1241
- ) ? t : "_self";
44
+ set target(o) {
45
+ this._target = e.VALID_TARGETS.includes(
46
+ o
47
+ ) ? o : "_self";
1242
48
  }
1243
49
  async getButtonElement() {
1244
50
  await this.updateComplete;
1245
- const t = this.shadowRoot?.querySelector("a.nys-button") || null;
1246
- if (t) return t;
1247
- const e = this.shadowRoot?.querySelector("button.nys-button") || null;
1248
- return e || null;
51
+ const o = this.shadowRoot?.querySelector("a.nys-button") || null;
52
+ if (o) return o;
53
+ const s = this.shadowRoot?.querySelector("button.nys-button") || null;
54
+ return s || null;
1249
55
  }
1250
56
  connectedCallback() {
1251
57
  super.connectedCallback(), this.id || (this.id = this._generateUniqueId());
1252
58
  }
1253
59
  /******************** Functions ********************/
1254
60
  _generateUniqueId() {
1255
- return `nys-button-${Date.now()}-${Dt++}`;
61
+ return `nys-button-${Date.now()}-${p++}`;
1256
62
  }
1257
63
  _manageFormAction() {
1258
64
  typeof this.onClick == "function" && this.onClick !== null && this.onClick(new Event("click"));
1259
- const t = this._internals.form;
1260
- if (t)
65
+ const o = this._internals.form;
66
+ if (o)
1261
67
  switch (this.type) {
1262
68
  case "submit":
1263
- t.requestSubmit();
69
+ o.requestSubmit();
1264
70
  break;
1265
71
  case "reset":
1266
- t.reset();
72
+ o.reset();
1267
73
  break;
1268
74
  }
1269
75
  }
@@ -1276,24 +82,24 @@ const d = (v = class extends at {
1276
82
  _handleBlur() {
1277
83
  this.shadowRoot?.querySelector(".nys-button")?.classList.remove("active-focus"), this.dispatchEvent(new Event("nys-blur"));
1278
84
  }
1279
- _handleClick(t) {
85
+ _handleClick(o) {
1280
86
  if (this.disabled) {
1281
- t.preventDefault();
87
+ o.preventDefault();
1282
88
  return;
1283
89
  }
1284
90
  this._manageFormAction(), this.dispatchEvent(new Event("nys-click"));
1285
91
  }
1286
92
  // Handle keydown for keyboard accessibility
1287
- _handleKeydown(t) {
1288
- if (t.code === "Space" || t.code === "Enter" || t.key === " " || t.key === "Enter") {
93
+ _handleKeydown(o) {
94
+ if (o.code === "Space" || o.code === "Enter" || o.key === " " || o.key === "Enter") {
1289
95
  if (this.disabled) return;
1290
- if (t.preventDefault(), this.href) {
1291
- const e = this.renderRoot.querySelector(
96
+ if (o.preventDefault(), this.href) {
97
+ const s = this.renderRoot.querySelector(
1292
98
  "a.nys-button"
1293
99
  );
1294
- e && e.click();
100
+ s && s.click();
1295
101
  } else
1296
- this._handleAnyAttributeFunction(), this._handleClick(t);
102
+ this._handleAnyAttributeFunction(), this._handleClick(o);
1297
103
  }
1298
104
  }
1299
105
  /**
@@ -1303,33 +109,32 @@ const d = (v = class extends at {
1303
109
  * In vanilla HTML/JS, clicking with execute the attribute function, BUT now with keydown, hence this solution.
1304
110
  */
1305
111
  _handleAnyAttributeFunction() {
1306
- const t = this.getAttribute("onClick");
1307
- t && new Function("return " + t)();
112
+ const o = this.getAttribute("onClick");
113
+ o && new Function("return " + o)();
1308
114
  }
1309
115
  /******************** Public Methods ********************/
1310
- focus(t) {
1311
- const e = this.renderRoot.querySelector(
116
+ focus(o) {
117
+ const s = this.renderRoot.querySelector(
1312
118
  this.href ? "a.nys-button" : "button.nys-button"
1313
119
  );
1314
- e ? e.focus(t) : super.focus(t);
120
+ s ? s.focus(o) : super.focus(o);
1315
121
  }
1316
122
  render() {
1317
- return _`
1318
- ${this.href ? _`
123
+ return a`
124
+ ${this.href ? a`
1319
125
  <div class="nys-button__linkwrapper">
1320
126
  <a
1321
127
  class="nys-button"
1322
- id=${p(this.id)}
1323
- name=${p(this.name ? this.name : void 0)}
128
+ name=${c(this.name ? this.name : void 0)}
1324
129
  ?disabled=${this.disabled}
1325
130
  aria-disabled="${this.disabled ? "true" : "false"}"
1326
- value=${p(this.value ? this.value : void 0)}
131
+ value=${c(this.value ? this.value : void 0)}
1327
132
  href=${this.href}
1328
133
  target=${this.target}
1329
- aria-label=${p(
134
+ aria-label=${c(
1330
135
  this.ariaLabel || this.label || (this.circle ? this.icon : null) || "button"
1331
136
  )}
1332
- aria-description=${p(this.ariaDescription || void 0)}
137
+ aria-description=${c(this.ariaDescription || void 0)}
1333
138
  @click=${this._handleClick}
1334
139
  @focus="${this._handleFocus}"
1335
140
  @blur="${this._handleBlur}"
@@ -1337,14 +142,14 @@ const d = (v = class extends at {
1337
142
  role="button"
1338
143
  tabindex="${this.disabled ? -1 : 0}"
1339
144
  >
1340
- ${this.prefixIcon && this.variant !== "text" ? _`<slot name="prefix-icon">
145
+ ${this.prefixIcon && this.variant !== "text" ? a`<slot name="prefix-icon">
1341
146
  <nys-icon size="16" name=${this.prefixIcon}></nys-icon>
1342
147
  </slot>` : ""}
1343
- ${this.label && !this.circle ? _`<div class="nys-button__text">${this.label}</div>` : ""}
1344
- ${this.suffixIcon && this.variant !== "text" ? _`<slot name="suffix-icon">
148
+ ${this.label && !this.circle ? a`<div class="nys-button__text">${this.label}</div>` : ""}
149
+ ${this.suffixIcon && this.variant !== "text" ? a`<slot name="suffix-icon">
1345
150
  <nys-icon size="16" name=${this.suffixIcon}></nys-icon>
1346
151
  </slot>` : ""}
1347
- ${this.circle && this.icon ? _`<slot name="circle-icon"
152
+ ${this.circle && this.icon ? a`<slot name="circle-icon"
1348
153
  ><nys-icon
1349
154
  size=${this.size === "sm" ? "24" : this.size === "lg" ? "40" : "32"}
1350
155
  name=${this.icon}
@@ -1352,34 +157,33 @@ const d = (v = class extends at {
1352
157
  ></slot>` : ""}
1353
158
  </a>
1354
159
  </div>
1355
- ` : _`
160
+ ` : a`
1356
161
  <button
1357
162
  class="nys-button"
1358
- id=${p(this.id)}
1359
- name=${p(this.name ? this.name : void 0)}
163
+ name=${c(this.name ? this.name : void 0)}
1360
164
  ?disabled=${this.disabled}
1361
- form=${p(this.form || void 0)}
1362
- value=${p(this.value ? this.value : void 0)}
165
+ form=${c(this.form || void 0)}
166
+ value=${c(this.value ? this.value : void 0)}
1363
167
  type=${this.type}
1364
- aria-controls=${p(this.ariaControls || void 0)}
1365
- aria-label=${p(
168
+ aria-controls=${c(this.ariaControls || void 0)}
169
+ aria-label=${c(
1366
170
  this.ariaLabel || this.label || (this.circle ? this.icon : null) || this.prefixIcon || this.suffixIcon || "button"
1367
171
  )}
1368
- aria-description=${p(this.ariaDescription || void 0)}
172
+ aria-description=${c(this.ariaDescription || void 0)}
1369
173
  @click=${this._handleClick}
1370
174
  @focus="${this._handleFocus}"
1371
175
  @blur="${this._handleBlur}"
1372
176
  @keydown="${this._handleKeydown}"
1373
177
  role="button"
1374
178
  >
1375
- ${this.prefixIcon && this.variant !== "text" ? _`<slot name="prefix-icon">
179
+ ${this.prefixIcon && this.variant !== "text" ? a`<slot name="prefix-icon">
1376
180
  <nys-icon size="16" name=${this.prefixIcon}></nys-icon>
1377
181
  </slot>` : ""}
1378
- ${this.label && !this.circle ? _`<div class="nys-button__text">${this.label}</div>` : ""}
1379
- ${this.suffixIcon && this.variant !== "text" ? _`<slot name="suffix-icon">
182
+ ${this.label && !this.circle ? a`<div class="nys-button__text">${this.label}</div>` : ""}
183
+ ${this.suffixIcon && this.variant !== "text" ? a`<slot name="suffix-icon">
1380
184
  <nys-icon size="16" name=${this.suffixIcon}></nys-icon>
1381
185
  </slot>` : ""}
1382
- ${this.circle && this.icon ? _`<slot name="circle-icon">
186
+ ${this.circle && this.icon ? a`<slot name="circle-icon">
1383
187
  <nys-icon
1384
188
  size=${this.size === "sm" ? "24" : this.size === "lg" ? "40" : "32"}
1385
189
  name=${this.icon}
@@ -1389,84 +193,84 @@ const d = (v = class extends at {
1389
193
  `}
1390
194
  `;
1391
195
  }
1392
- }, v.VALID_SIZES = ["sm", "md", "lg"], v.VALID_VARIANTS = [
196
+ }, e.styles = v(f), e.VALID_SIZES = ["sm", "md", "lg"], e.VALID_VARIANTS = [
1393
197
  "filled",
1394
198
  "outline",
1395
199
  "ghost",
1396
200
  "text"
1397
- ], v.VALID_TYPES = ["submit", "reset", "button"], v.VALID_TARGETS = [
201
+ ], e.VALID_TYPES = ["submit", "reset", "button"], e.VALID_TARGETS = [
1398
202
  "_self",
1399
203
  "_blank",
1400
204
  "_parent",
1401
205
  "_top",
1402
206
  "framename"
1403
- ], v.styles = mt, v.formAssociated = !0, v);
1404
- h([
1405
- u({ type: String })
1406
- ], d.prototype, "id", 2);
1407
- h([
1408
- u({ type: String, reflect: !0 })
1409
- ], d.prototype, "name", 2);
1410
- h([
1411
- u({ reflect: !0 })
1412
- ], d.prototype, "size", 1);
1413
- h([
1414
- u({ type: Boolean, reflect: !0 })
1415
- ], d.prototype, "fullWidth", 2);
1416
- h([
1417
- u({ reflect: !0 })
1418
- ], d.prototype, "variant", 1);
1419
- h([
1420
- u({ type: Boolean, reflect: !0 })
1421
- ], d.prototype, "inverted", 2);
1422
- h([
1423
- u({ type: String })
1424
- ], d.prototype, "label", 2);
1425
- h([
1426
- u({ type: String })
1427
- ], d.prototype, "ariaLabel", 2);
1428
- h([
1429
- u({ type: String })
1430
- ], d.prototype, "ariaControls", 2);
1431
- h([
1432
- u({ type: String })
1433
- ], d.prototype, "prefixIcon", 2);
1434
- h([
1435
- u({ type: String })
1436
- ], d.prototype, "suffixIcon", 2);
1437
- h([
1438
- u({ type: Boolean, reflect: !0 })
1439
- ], d.prototype, "circle", 2);
1440
- h([
1441
- u({ type: String })
1442
- ], d.prototype, "icon", 2);
1443
- h([
1444
- u({ type: Boolean, reflect: !0 })
1445
- ], d.prototype, "disabled", 2);
1446
- h([
1447
- u({ type: String, reflect: !0 })
1448
- ], d.prototype, "form", 2);
1449
- h([
1450
- u({ type: String })
1451
- ], d.prototype, "value", 2);
1452
- h([
1453
- u({ type: String })
1454
- ], d.prototype, "ariaDescription", 2);
1455
- h([
1456
- u({ reflect: !0 })
1457
- ], d.prototype, "type", 1);
1458
- h([
1459
- u({ attribute: !1 })
1460
- ], d.prototype, "onClick", 2);
1461
- h([
1462
- u({ type: String })
1463
- ], d.prototype, "href", 2);
1464
- h([
1465
- u({ reflect: !0 })
1466
- ], d.prototype, "target", 1);
1467
- let Ht = d;
1468
- customElements.get("nys-button") || customElements.define("nys-button", Ht);
207
+ ], e.formAssociated = !0, e);
208
+ n([
209
+ r({ type: String, reflect: !0 })
210
+ ], t.prototype, "id", 2);
211
+ n([
212
+ r({ type: String, reflect: !0 })
213
+ ], t.prototype, "name", 2);
214
+ n([
215
+ r({ reflect: !0 })
216
+ ], t.prototype, "size", 1);
217
+ n([
218
+ r({ type: Boolean, reflect: !0 })
219
+ ], t.prototype, "fullWidth", 2);
220
+ n([
221
+ r({ reflect: !0 })
222
+ ], t.prototype, "variant", 1);
223
+ n([
224
+ r({ type: Boolean, reflect: !0 })
225
+ ], t.prototype, "inverted", 2);
226
+ n([
227
+ r({ type: String })
228
+ ], t.prototype, "label", 2);
229
+ n([
230
+ r({ type: String })
231
+ ], t.prototype, "ariaLabel", 2);
232
+ n([
233
+ r({ type: String })
234
+ ], t.prototype, "ariaControls", 2);
235
+ n([
236
+ r({ type: String })
237
+ ], t.prototype, "prefixIcon", 2);
238
+ n([
239
+ r({ type: String })
240
+ ], t.prototype, "suffixIcon", 2);
241
+ n([
242
+ r({ type: Boolean, reflect: !0 })
243
+ ], t.prototype, "circle", 2);
244
+ n([
245
+ r({ type: String })
246
+ ], t.prototype, "icon", 2);
247
+ n([
248
+ r({ type: Boolean, reflect: !0 })
249
+ ], t.prototype, "disabled", 2);
250
+ n([
251
+ r({ type: String, reflect: !0 })
252
+ ], t.prototype, "form", 2);
253
+ n([
254
+ r({ type: String })
255
+ ], t.prototype, "value", 2);
256
+ n([
257
+ r({ type: String })
258
+ ], t.prototype, "ariaDescription", 2);
259
+ n([
260
+ r({ reflect: !0 })
261
+ ], t.prototype, "type", 1);
262
+ n([
263
+ r({ attribute: !1 })
264
+ ], t.prototype, "onClick", 2);
265
+ n([
266
+ r({ type: String })
267
+ ], t.prototype, "href", 2);
268
+ n([
269
+ r({ reflect: !0 })
270
+ ], t.prototype, "target", 1);
271
+ let g = t;
272
+ customElements.get("nys-button") || customElements.define("nys-button", g);
1469
273
  export {
1470
- Ht as NysButton
274
+ g as NysButton
1471
275
  };
1472
276
  //# sourceMappingURL=nys-button.js.map