@nysds/nys-button 1.7.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 +631 -395
  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 * {
@@ -721,11 +958,10 @@ const xt = lt`
721
958
  cursor: not-allowed;
722
959
  }
723
960
 
724
- /* The .active-focus comes from components that wants to focus on the <nys-button>'s inner native button (e.g. <nys-fileinput> for form validation) */
725
- .nys-button:focus-visible,
726
- .active-focus {
727
- outline-offset: var(--_nys-button-offset-focus);
728
- outline: solid var(--_nys-button-width-focus) var(--_nys-button-color-focus);
961
+ .nys-button:focus-visible {
962
+ outline-offset: var(--_nys-button-outline-offset);
963
+ outline: solid var(--_nys-button-outline-width)
964
+ var(--_nys-button-outline-color);
729
965
  }
730
966
 
731
967
  .nys-button__text {
@@ -739,70 +975,70 @@ const xt = lt`
739
975
  * Copyright 2017 Google LLC
740
976
  * SPDX-License-Identifier: BSD-3-Clause
741
977
  */
742
- 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, R = () => 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 = `[
743
- \f\r]`, I = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Q = /-->/g, X = />/g, A = RegExp(`>|${F}(?:([^\\s"'>=/]+)(${F}*=${F}*(?:[^
744
- \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);
745
- function at(r, t) {
746
- 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");
747
983
  return Y !== void 0 ? Y.createHTML(t) : t;
748
984
  }
749
- const wt = (r, t) => {
750
- const e = r.length - 1, o = [];
751
- 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;
752
988
  for (let l = 0; l < e; l++) {
753
- const a = r[l];
754
- let y, b, c = -1, g = 0;
755
- 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);
756
- const $ = n === A && r[l + 1].startsWith("/>") ? " " : "";
757
- 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 : $);
758
994
  }
759
- 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];
760
996
  };
761
997
  class U {
762
998
  constructor({ strings: t, _$litType$: e }, o) {
763
- let s;
999
+ let r;
764
1000
  this.parts = [];
765
- let i = 0, n = 0;
766
- const l = t.length - 1, a = this.parts, [y, b] = wt(t, e);
767
- 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) {
768
1004
  const c = this.el.content.firstChild;
769
1005
  c.replaceWith(...c.childNodes);
770
1006
  }
771
- for (; (s = S.nextNode()) !== null && a.length < l; ) {
772
- if (s.nodeType === 1) {
773
- if (s.hasAttributes()) for (const c of s.getAttributeNames()) if (c.endsWith(rt)) {
774
- const g = b[n++], $ = s.getAttribute(c).split(m), H = /([.?@])?(.*)/.exec(g);
775
- a.push({ type: 1, index: i, name: H[2], strings: $, ctor: H[1] === "." ? Pt : H[1] === "?" ? It : H[1] === "@" ? Ct : L }), s.removeAttribute(c);
776
- } else c.startsWith(m) && (a.push({ type: 6, index: i }), s.removeAttribute(c));
777
- if (it.test(s.tagName)) {
778
- 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;
779
1015
  if (g > 0) {
780
- s.textContent = N ? N.emptyScript : "";
781
- for (let $ = 0; $ < g; $++) s.append(c[$], R()), S.nextNode(), a.push({ type: 2, index: ++i });
782
- s.append(c[g], R());
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());
783
1019
  }
784
1020
  }
785
- } 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 });
786
1022
  else {
787
1023
  let c = -1;
788
- 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;
789
1025
  }
790
1026
  i++;
791
1027
  }
792
1028
  }
793
1029
  static createElement(t, e) {
794
- const o = w.createElement("template");
1030
+ const o = S.createElement("template");
795
1031
  return o.innerHTML = t, o;
796
1032
  }
797
1033
  }
798
- function E(r, t, e = r, o) {
799
- var n, l;
1034
+ function w(n, t, e = n, o) {
1035
+ var s, l;
800
1036
  if (t === O) return t;
801
- let s = o !== void 0 ? (n = e._$Co) == null ? void 0 : n[o] : e._$Cl;
802
- const i = k(t) ? void 0 : t._$litDirective$;
803
- 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;
804
1040
  }
805
- class Et {
1041
+ class wt {
806
1042
  constructor(t, e) {
807
1043
  this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = e;
808
1044
  }
@@ -813,17 +1049,17 @@ class Et {
813
1049
  return this._$AM._$AU;
814
1050
  }
815
1051
  u(t) {
816
- const { el: { content: e }, parts: o } = this._$AD, s = ((t == null ? void 0 : t.creationScope) ?? w).importNode(e, !0);
817
- S.currentNode = s;
818
- 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];
819
1055
  for (; a !== void 0; ) {
820
- if (n === a.index) {
1056
+ if (s === a.index) {
821
1057
  let y;
822
- 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 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];
823
1059
  }
824
- n !== (a == null ? void 0 : a.index) && (i = S.nextNode(), n++);
1060
+ s !== (a == null ? void 0 : a.index) && (i = k.nextNode(), s++);
825
1061
  }
826
- return S.currentNode = w, s;
1062
+ return k.currentNode = S, r;
827
1063
  }
828
1064
  p(t) {
829
1065
  let e = 0;
@@ -835,8 +1071,8 @@ class M {
835
1071
  var t;
836
1072
  return ((t = this._$AM) == null ? void 0 : t._$AU) ?? this._$Cv;
837
1073
  }
838
- constructor(t, e, o, s) {
839
- 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;
840
1076
  }
841
1077
  get parentNode() {
842
1078
  let t = this._$AA.parentNode;
@@ -850,7 +1086,7 @@ class M {
850
1086
  return this._$AB;
851
1087
  }
852
1088
  _$AI(t, e = this) {
853
- 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);
854
1090
  }
855
1091
  O(t) {
856
1092
  return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -859,15 +1095,15 @@ class M {
859
1095
  this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
860
1096
  }
861
1097
  _(t) {
862
- 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;
863
1099
  }
864
1100
  $(t) {
865
1101
  var i;
866
- 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);
867
- 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);
868
1104
  else {
869
- const n = new Et(s, this), l = n.u(this.options);
870
- 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;
871
1107
  }
872
1108
  }
873
1109
  _$AC(t) {
@@ -877,15 +1113,15 @@ class M {
877
1113
  k(t) {
878
1114
  W(this._$AH) || (this._$AH = [], this._$AR());
879
1115
  const e = this._$AH;
880
- let o, s = 0;
881
- for (const i of t) s === e.length ? e.push(o = new M(this.O(R()), this.O(R()), this, this.options)) : o = e[s], o._$AI(i), s++;
882
- 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);
883
1119
  }
884
1120
  _$AR(t = this._$AA.nextSibling, e) {
885
1121
  var o;
886
1122
  for ((o = this._$AP) == null ? void 0 : o.call(this, !1, !0, e); t && t !== this._$AB; ) {
887
- const s = t.nextSibling;
888
- t.remove(), t = s;
1123
+ const r = t.nextSibling;
1124
+ t.remove(), t = r;
889
1125
  }
890
1126
  }
891
1127
  setConnected(t) {
@@ -900,55 +1136,55 @@ class L {
900
1136
  get _$AU() {
901
1137
  return this._$AM._$AU;
902
1138
  }
903
- constructor(t, e, o, s, i) {
904
- 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;
905
1141
  }
906
- _$AI(t, e = this, o, s) {
1142
+ _$AI(t, e = this, o, r) {
907
1143
  const i = this.strings;
908
- let n = !1;
909
- 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);
910
1146
  else {
911
1147
  const l = t;
912
1148
  let a, y;
913
- 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;
914
1150
  }
915
- n && !s && this.j(t);
1151
+ s && !r && this.j(t);
916
1152
  }
917
1153
  j(t) {
918
- 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 ?? "");
919
1155
  }
920
1156
  }
921
- class Pt extends L {
1157
+ class Et extends L {
922
1158
  constructor() {
923
1159
  super(...arguments), this.type = 3;
924
1160
  }
925
1161
  j(t) {
926
- this.element[this.name] = t === u ? void 0 : t;
1162
+ this.element[this.name] = t === b ? void 0 : t;
927
1163
  }
928
1164
  }
929
- class It extends L {
1165
+ class Pt extends L {
930
1166
  constructor() {
931
1167
  super(...arguments), this.type = 4;
932
1168
  }
933
1169
  j(t) {
934
- this.element.toggleAttribute(this.name, !!t && t !== u);
1170
+ this.element.toggleAttribute(this.name, !!t && t !== b);
935
1171
  }
936
1172
  }
937
- class Ct extends L {
938
- constructor(t, e, o, s, i) {
939
- 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;
940
1176
  }
941
1177
  _$AI(t, e = this) {
942
- if ((t = E(this, t, e, 0) ?? u) === O) return;
943
- 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);
944
- 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;
945
1181
  }
946
1182
  handleEvent(t) {
947
1183
  var e;
948
1184
  typeof this._$AH == "function" ? this._$AH.call(((e = this.options) == null ? void 0 : e.host) ?? this.element, t) : this._$AH.handleEvent(t);
949
1185
  }
950
1186
  }
951
- class Tt {
1187
+ class Ct {
952
1188
  constructor(t, e, o) {
953
1189
  this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = o;
954
1190
  }
@@ -956,25 +1192,25 @@ class Tt {
956
1192
  return this._$AM._$AU;
957
1193
  }
958
1194
  _$AI(t) {
959
- E(this, t);
1195
+ w(this, t);
960
1196
  }
961
1197
  }
962
- const j = T.litHtmlPolyfillSupport;
963
- j == null || j(U, M), (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");
964
1200
  /**
965
1201
  * @license
966
1202
  * Copyright 2018 Google LLC
967
1203
  * SPDX-License-Identifier: BSD-3-Clause
968
1204
  */
969
- const p = (r) => r ?? u;
970
- var kt = Object.defineProperty, Ot = Object.getOwnPropertyDescriptor, f = (r, t, e, o) => {
971
- for (var s = o > 1 ? void 0 : o ? Ot(t, e) : t, i = r.length - 1, n; i >= 0; i--)
972
- (n = r[i]) && (s = (o ? n(t, e, s) : n(s)) || s);
973
- 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;
974
1210
  };
975
1211
  let Ut = 0;
976
1212
  var v;
977
- const h = (v = class extends ct {
1213
+ const d = (v = class extends ct {
978
1214
  // allows use of elementInternals' API
979
1215
  constructor() {
980
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 = () => {
@@ -1151,67 +1387,67 @@ const h = (v = class extends ct {
1151
1387
  "_top",
1152
1388
  "framename"
1153
1389
  ], v.styles = xt, v.formAssociated = !0, v);
1154
- f([
1155
- d({ type: String })
1156
- ], h.prototype, "id", 2);
1157
- f([
1158
- d({ type: String, reflect: !0 })
1159
- ], h.prototype, "name", 2);
1160
- f([
1161
- d({ reflect: !0 })
1162
- ], h.prototype, "size", 1);
1163
- f([
1164
- d({ type: Boolean, reflect: !0 })
1165
- ], h.prototype, "fullWidth", 2);
1166
- f([
1167
- d({ reflect: !0 })
1168
- ], h.prototype, "variant", 1);
1169
- f([
1170
- d({ type: Boolean, reflect: !0 })
1171
- ], h.prototype, "inverted", 2);
1172
- f([
1173
- d({ type: String })
1174
- ], h.prototype, "label", 2);
1175
- f([
1176
- d({ type: String })
1177
- ], h.prototype, "ariaLabel", 2);
1178
- f([
1179
- d({ type: String })
1180
- ], h.prototype, "prefixIcon", 2);
1181
- f([
1182
- d({ type: String })
1183
- ], h.prototype, "suffixIcon", 2);
1184
- f([
1185
- d({ type: Boolean, reflect: !0 })
1186
- ], h.prototype, "circle", 2);
1187
- f([
1188
- d({ type: String })
1189
- ], h.prototype, "icon", 2);
1190
- f([
1191
- d({ type: Boolean, reflect: !0 })
1192
- ], h.prototype, "disabled", 2);
1193
- f([
1194
- d({ type: String })
1195
- ], h.prototype, "form", 2);
1196
- f([
1197
- d({ type: String })
1198
- ], h.prototype, "value", 2);
1199
- f([
1200
- d({ type: String })
1201
- ], h.prototype, "ariaDescription", 2);
1202
- f([
1203
- d({ reflect: !0 })
1204
- ], h.prototype, "type", 1);
1205
- f([
1206
- d({ type: Function })
1207
- ], h.prototype, "onClick", 2);
1208
- f([
1209
- d({ type: String })
1210
- ], h.prototype, "href", 2);
1211
- f([
1212
- d({ reflect: !0 })
1213
- ], h.prototype, "target", 1);
1214
- 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;
1215
1451
  customElements.get("nys-button") || customElements.define("nys-button", Ht);
1216
1452
  export {
1217
1453
  Ht as NysButton