@nysds/nys-button 1.6.0 → 1.8.0

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