@nysds/nys-button 1.0.0 → 1.1.0

package/dist/nys-button.d.ts

@@ -26,12 +26,18 @@ export declare class NysButton extends LitElement {
     onClick: (event: Event) => void;
     href: string;
     static styles: import("lit").CSSResult;
+    private _internals;
     /**************** Lifecycle Methods ****************/
+    static formAssociated: boolean;
+    constructor();
     connectedCallback(): void;
     /******************** Functions ********************/
     private _generateUniqueId;
+    private _manageFormAction;
+    /******************** Event Handlers ********************/
     private _handleFocus;
     private _handleBlur;
     private _handleClick;
+    private _handleKeydown;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/nys-button.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/nys-button.js

@@ -5,7 +5,7 @@ import { css as b1, LitElement as _1, html as y } from "lit";
    * ▒█▒█▒█ ▒█▄▄▄█ ░▀▀▀▄▄ ▒█░▒█ ░▀▀▀▄▄ 
    * ▒█░░▀█ ░░▒█░░ ▒█▄▄▄█ ▒█▄▄▀ ▒█▄▄▄█
    * 
-   * Button Component v1.0.0
+   * Button Component v1.1.0
    * Part of the New York State Design System
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT
@@ -50,7 +50,7 @@ const H1 = (s) => new Z1(typeof s == "string" ? s : s + "", void 0, w1), A1 = (s
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: V1, defineProperty: S1, getOwnPropertyDescriptor: E1, getOwnPropertyNames: P1, getOwnPropertySymbols: k1, getPrototypeOf: U1 } = Object, m = globalThis, i1 = m.trustedTypes, z1 = i1 ? i1.emptyScript : "", J = m.reactiveElementPolyfillSupport, U = (s, t) => s, D = { toAttribute(s, t) {
+const { is: V1, defineProperty: S1, getOwnPropertyDescriptor: E1, getOwnPropertyNames: P1, getOwnPropertySymbols: k1, getPrototypeOf: U1 } = Object, m = globalThis, i1 = m.trustedTypes, z1 = i1 ? i1.emptyScript : "", G = m.reactiveElementPolyfillSupport, U = (s, t) => s, j = { toAttribute(s, t) {
   switch (t) {
     case Boolean:
       s = s ? z1 : null;
@@ -78,7 +78,7 @@ const { is: V1, defineProperty: S1, getOwnPropertyDescriptor: E1, getOwnProperty
       }
   }
   return e;
-} }, t1 = (s, t) => !V1(s, t), C1 = { attribute: !0, type: String, converter: D, reflect: !1, hasChanged: t1 };
+} }, t1 = (s, t) => !V1(s, t), C1 = { attribute: !0, type: String, converter: j, reflect: !1, hasChanged: t1 };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), m.litPropertyMetadata ?? (m.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 class S extends HTMLElement {
   static addInitializer(t) {
@@ -191,7 +191,7 @@ class S extends HTMLElement {
     var i;
     const o = this.constructor.elementProperties.get(t), r = this.constructor._$Eu(t, o);
     if (r !== void 0 && o.reflect === !0) {
-      const n = (((i = o.converter) == null ? void 0 : i.toAttribute) !== void 0 ? o.converter : D).toAttribute(e, o.type);
+      const n = (((i = o.converter) == null ? void 0 : i.toAttribute) !== void 0 ? o.converter : j).toAttribute(e, o.type);
       this._$Em = t, n == null ? this.removeAttribute(r) : this.setAttribute(r, n), this._$Em = null;
     }
   }
@@ -199,7 +199,7 @@ class S extends HTMLElement {
     var i;
     const o = this.constructor, r = o._$Eh.get(t);
     if (r !== void 0 && this._$Em !== r) {
-      const n = o.getPropertyOptions(r), l = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((i = n.converter) == null ? void 0 : i.fromAttribute) !== void 0 ? n.converter : D;
+      const n = o.getPropertyOptions(r), l = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((i = n.converter) == null ? void 0 : i.fromAttribute) !== void 0 ? n.converter : j;
       this._$Em = r, this[r] = l.fromAttribute(e, n.type), this._$Em = null;
     }
   }
@@ -278,13 +278,13 @@ class S extends HTMLElement {
   firstUpdated(t) {
   }
 }
-S.elementStyles = [], S.shadowRootOptions = { mode: "open" }, S[U("elementProperties")] = /* @__PURE__ */ new Map(), S[U("finalized")] = /* @__PURE__ */ new Map(), J == null || J({ ReactiveElement: S }), (m.reactiveElementVersions ?? (m.reactiveElementVersions = [])).push("2.0.4");
+S.elementStyles = [], S.shadowRootOptions = { mode: "open" }, S[U("elementProperties")] = /* @__PURE__ */ new Map(), S[U("finalized")] = /* @__PURE__ */ new Map(), G == null || G({ ReactiveElement: S }), (m.reactiveElementVersions ?? (m.reactiveElementVersions = [])).push("2.0.4");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const B1 = { attribute: !0, type: String, converter: D, reflect: !1, hasChanged: t1 }, O1 = (s = B1, t, e) => {
+const B1 = { attribute: !0, type: String, converter: j, reflect: !1, hasChanged: t1 }, O1 = (s = B1, t, e) => {
   const { kind: o, metadata: r } = e;
   let i = globalThis.litPropertyMetadata.get(r);
   if (i === void 0 && globalThis.litPropertyMetadata.set(r, i = /* @__PURE__ */ new Map()), i.set(e.name, s), o === "accessor") {
@@ -641,7 +641,7 @@ const T1 = b1`
    * ▒█▒█▒█ ▒█▄▄▄█ ░▀▀▀▄▄ ▒█░▒█ ░▀▀▀▄▄ 
    * ▒█░░▀█ ░░▒█░░ ▒█▄▄▄█ ▒█▄▄▀ ▒█▄▄▄█
    * 
-   * Icon Component v1.0.0
+   * Icon Component v1.1.0
    * Part of the New York State Design System
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT
@@ -651,7 +651,7 @@ const T1 = b1`
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const j = globalThis, e1 = j.ShadowRoot && (j.ShadyCSS === void 0 || j.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, m1 = Symbol(), l1 = /* @__PURE__ */ new WeakMap();
+const D = globalThis, e1 = D.ShadowRoot && (D.ShadyCSS === void 0 || D.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, m1 = Symbol(), l1 = /* @__PURE__ */ new WeakMap();
 let R1 = class {
   constructor(t, e, o) {
     if (this._$cssResult$ = !0, o !== m1) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -673,7 +673,7 @@ let R1 = class {
 const I1 = (s) => new R1(typeof s == "string" ? s : s + "", void 0, m1), N1 = (s, t) => {
   if (e1) s.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
   else for (const e of t) {
-    const o = document.createElement("style"), r = j.litNonce;
+    const o = document.createElement("style"), r = D.litNonce;
     r !== void 0 && o.setAttribute("nonce", r), o.textContent = e.cssText, s.appendChild(o);
   }
 }, a1 = e1 ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((t) => {
@@ -686,10 +686,10 @@ const I1 = (s) => new R1(typeof s == "string" ? s : s + "", void 0, m1), N1 = (s
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: j1, defineProperty: D1, getOwnPropertyDescriptor: q1, getOwnPropertyNames: W1, getOwnPropertySymbols: F1, getPrototypeOf: Y1 } = Object, Z = globalThis, c1 = Z.trustedTypes, G1 = c1 ? c1.emptyScript : "", h1 = Z.reactiveElementPolyfillSupport, z = (s, t) => s, q = { toAttribute(s, t) {
+const { is: D1, defineProperty: j1, getOwnPropertyDescriptor: q1, getOwnPropertyNames: W1, getOwnPropertySymbols: F1, getPrototypeOf: K1 } = Object, Z = globalThis, c1 = Z.trustedTypes, Y1 = c1 ? c1.emptyScript : "", h1 = Z.reactiveElementPolyfillSupport, z = (s, t) => s, q = { toAttribute(s, t) {
   switch (t) {
     case Boolean:
-      s = s ? G1 : null;
+      s = s ? Y1 : null;
       break;
     case Object:
     case Array:
@@ -714,7 +714,7 @@ const { is: j1, defineProperty: D1, getOwnPropertyDescriptor: q1, getOwnProperty
       }
   }
   return e;
-} }, o1 = (s, t) => !j1(s, t), d1 = { attribute: !0, type: String, converter: q, reflect: !1, hasChanged: o1 };
+} }, o1 = (s, t) => !D1(s, t), d1 = { attribute: !0, type: String, converter: q, reflect: !1, hasChanged: o1 };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), Z.litPropertyMetadata ?? (Z.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 let E = class extends HTMLElement {
   static addInitializer(t) {
@@ -726,7 +726,7 @@ let E = class extends HTMLElement {
   static createProperty(t, e = d1) {
     if (e.state && (e.attribute = !1), this._$Ei(), this.elementProperties.set(t, e), !e.noAccessor) {
       const o = Symbol(), r = this.getPropertyDescriptor(t, o, e);
-      r !== void 0 && D1(this.prototype, t, r);
+      r !== void 0 && j1(this.prototype, t, r);
     }
   }
   static getPropertyDescriptor(t, e, o) {
@@ -747,7 +747,7 @@ let E = class extends HTMLElement {
   }
   static _$Ei() {
     if (this.hasOwnProperty(z("elementProperties"))) return;
-    const t = Y1(this);
+    const t = K1(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
@@ -920,7 +920,7 @@ E.elementStyles = [], E.shadowRootOptions = { mode: "open" }, E[z("elementProper
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const J1 = { attribute: !0, type: String, converter: q, reflect: !1, hasChanged: o1 }, K1 = (s = J1, t, e) => {
+const G1 = { attribute: !0, type: String, converter: q, reflect: !1, hasChanged: o1 }, J1 = (s = G1, t, e) => {
   const { kind: o, metadata: r } = e;
   let i = globalThis.litPropertyMetadata.get(r);
   if (i === void 0 && globalThis.litPropertyMetadata.set(r, i = /* @__PURE__ */ new Map()), i.set(e.name, s), o === "accessor") {
@@ -942,7 +942,7 @@ const J1 = { attribute: !0, type: String, converter: q, reflect: !1, hasChanged:
   throw Error("Unsupported decorator location: " + o);
 };
 function A(s) {
-  return (t, e) => typeof e == "object" ? K1(s, t, e) : ((o, r, i) => {
+  return (t, e) => typeof e == "object" ? J1(s, t, e) : ((o, r, i) => {
     const n = r.hasOwnProperty(i);
     return r.constructor.createProperty(i, n ? { ...o, wrapped: !0 } : o), n ? Object.getOwnPropertyDescriptor(r, i) : void 0;
   })(s, t, e);
@@ -1312,8 +1312,8 @@ customElements.get("nys-icon") || customElements.define("nys-icon", o5);
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const B = globalThis, W = B.trustedTypes, f1 = W ? W.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, $1 = "$lit$", w = `lit$${Math.random().toFixed(9).slice(2)}$`, x1 = "?" + w, r5 = `<${x1}>`, L = document, F = () => L.createComment(""), O = (s) => s === null || typeof s != "object" && typeof s != "function", r1 = Array.isArray, s5 = (s) => r1(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", K = `[ 	
-\f\r]`, k = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v1 = /-->/g, u1 = />/g, $ = RegExp(`>|${K}(?:([^\\s"'>=/]+)(${K}*=${K}*(?:[^ 	
+const B = globalThis, W = B.trustedTypes, f1 = W ? W.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, $1 = "$lit$", w = `lit$${Math.random().toFixed(9).slice(2)}$`, x1 = "?" + w, r5 = `<${x1}>`, L = document, F = () => L.createComment(""), O = (s) => s === null || typeof s != "object" && typeof s != "function", r1 = Array.isArray, s5 = (s) => r1(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", J = `[ 	
+\f\r]`, k = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v1 = /-->/g, u1 = />/g, $ = RegExp(`>|${J}(?:([^\\s"'>=/]+)(${J}*=${J}*(?:[^ 	
 \f\r"'\`<>=]|("|')|))|$)`, "g"), p1 = /'/g, y1 = /"/g, L1 = /^(?:script|style|textarea|title)$/i, T = Symbol.for("lit-noChange"), c = Symbol.for("lit-nothing"), g1 = /* @__PURE__ */ new WeakMap(), x = L.createTreeWalker(L, 129);
 function M1(s, t) {
   if (!r1(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
@@ -1345,7 +1345,7 @@ class R {
       if (r.nodeType === 1) {
         if (r.hasAttributes()) for (const a of r.getAttributeNames()) if (a.endsWith($1)) {
           const g = d[n++], b = r.getAttribute(a).split(w), I = /([.?@])?(.*)/.exec(g);
-          C.push({ type: 1, index: i, name: I[2], strings: b, ctor: I[1] === "." ? C5 : I[1] === "?" ? l5 : I[1] === "@" ? a5 : G }), r.removeAttribute(a);
+          C.push({ type: 1, index: i, name: I[2], strings: b, ctor: I[1] === "." ? C5 : I[1] === "?" ? l5 : I[1] === "@" ? a5 : Y }), r.removeAttribute(a);
         } else a.startsWith(w) && (C.push({ type: 6, index: i }), r.removeAttribute(a));
         if (L1.test(r.tagName)) {
           const a = r.textContent.split(w), g = a.length - 1;
@@ -1392,7 +1392,7 @@ class i5 {
     for (; C !== void 0; ) {
       if (n === C.index) {
         let h;
-        C.type === 2 ? h = new Y(i, i.nextSibling, this, t) : C.type === 1 ? h = new C.ctor(i, C.name, C.strings, this, t) : C.type === 6 && (h = new c5(i, this, t)), this._$AV.push(h), C = o[++l];
+        C.type === 2 ? h = new K(i, i.nextSibling, this, t) : C.type === 1 ? h = new C.ctor(i, C.name, C.strings, this, t) : C.type === 6 && (h = new c5(i, this, t)), this._$AV.push(h), C = o[++l];
       }
       n !== (C == null ? void 0 : C.index) && (i = x.nextNode(), n++);
     }
@@ -1403,7 +1403,7 @@ class i5 {
     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++;
   }
 }
-class Y {
+class K {
   get _$AU() {
     var t;
     return ((t = this._$AM) == null ? void 0 : t._$AU) ?? this._$Cv;
@@ -1451,7 +1451,7 @@ class Y {
     r1(this._$AH) || (this._$AH = [], this._$AR());
     const e = this._$AH;
     let o, r = 0;
-    for (const i of t) r === e.length ? e.push(o = new Y(this.O(F()), this.O(F()), this, this.options)) : o = e[r], o._$AI(i), r++;
+    for (const i of t) r === e.length ? e.push(o = new K(this.O(F()), this.O(F()), this, this.options)) : o = e[r], o._$AI(i), r++;
     r < e.length && (this._$AR(o && o._$AB.nextSibling, r), e.length = r);
   }
   _$AR(t = this._$AA.nextSibling, e) {
@@ -1466,7 +1466,7 @@ class Y {
     this._$AM === void 0 && (this._$Cv = t, (e = this._$AP) == null || e.call(this, t));
   }
 }
-class G {
+class Y {
   get tagName() {
     return this.element.tagName;
   }
@@ -1491,7 +1491,7 @@ class G {
     t === c ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
   }
 }
-class C5 extends G {
+class C5 extends Y {
   constructor() {
     super(...arguments), this.type = 3;
   }
@@ -1499,7 +1499,7 @@ class C5 extends G {
     this.element[this.name] = t === c ? void 0 : t;
   }
 }
-class l5 extends G {
+class l5 extends Y {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -1507,7 +1507,7 @@ class l5 extends G {
     this.element.toggleAttribute(this.name, !!t && t !== c);
   }
 }
-class a5 extends G {
+class a5 extends Y {
   constructor(t, e, o, r, i) {
     super(t, e, o, r, i), this.type = 5;
   }
@@ -1533,7 +1533,7 @@ class c5 {
   }
 }
 const X = B.litHtmlPolyfillSupport;
-X == null || X(R, Y), (B.litHtmlVersions ?? (B.litHtmlVersions = [])).push("3.2.1");
+X == null || X(R, K), (B.litHtmlVersions ?? (B.litHtmlVersions = [])).push("3.2.1");
 /**
  * @license
  * Copyright 2018 Google LLC
@@ -1548,9 +1548,10 @@ var h5 = Object.defineProperty, d5 = Object.getOwnPropertyDescriptor, u = (s, t,
 let f5 = 0;
 var p;
 const f = (p = class extends _1 {
+  // allows use of elementInternals' API
   constructor() {
-    super(...arguments), this.id = "", this.name = "", this._size = "md", this.fullWidth = !1, this._variant = "filled", this.inverted = !1, this.label = "", this.prefixIcon = "", this.suffixIcon = "", this.disabled = !1, this.form = "", this.value = "", this._type = "button", this.onClick = () => {
-    }, this.href = "";
+    super(), this.id = "", this.name = "", this._size = "md", this.fullWidth = !1, this._variant = "filled", this.inverted = !1, this.label = "", this.prefixIcon = "", this.suffixIcon = "", this.disabled = !1, this.form = "", this.value = "", this._type = "button", this.onClick = () => {
+    }, this.href = "", this._internals = this.attachInternals();
   }
   get size() {
     return this._size;
@@ -1576,7 +1577,6 @@ const f = (p = class extends _1 {
       t
     ) ? t : "button";
   }
-  /**************** Lifecycle Methods ****************/
   connectedCallback() {
     super.connectedCallback(), this.id || (this.id = this._generateUniqueId());
   }
@@ -1584,6 +1584,20 @@ const f = (p = class extends _1 {
   _generateUniqueId() {
     return `nys-button-${Date.now()}-${f5++}`;
   }
+  _manageFormAction(t) {
+    typeof this.onClick == "function" && this.onClick(t);
+    const e = this._internals.form;
+    if (e)
+      switch (this.type) {
+        case "submit":
+          e.requestSubmit();
+          break;
+        case "reset":
+          e.reset();
+          break;
+      }
+  }
+  /******************** Event Handlers ********************/
   // Handle focus event
   _handleFocus() {
     this.dispatchEvent(new Event("focus"));
@@ -1593,7 +1607,15 @@ const f = (p = class extends _1 {
     this.dispatchEvent(new Event("blur"));
   }
   _handleClick(t) {
-    typeof this.onClick == "function" && this.onClick(t);
+    if (this.disabled) {
+      t.preventDefault();
+      return;
+    }
+    this._manageFormAction(t);
+  }
+  // Handle keydown for keyboard accessibility
+  _handleKeydown(t) {
+    (t.code === "Space" || t.code === "Enter") && (t.preventDefault(), this.disabled || this._manageFormAction(t));
   }
   render() {
     return y`
@@ -1602,10 +1624,11 @@ const f = (p = class extends _1 {
               <a
                 class="nys-button"
                 id=${_(this.id)}
-                name=${_(this.name)}
+                name=${_(this.name ? this.name : void 0)}
                 ?disabled=${this.disabled}
-                form=${_(this.form)}
-                value=${_(this.value)}
+                aria-disabled="${this.disabled ? "true" : "false"}"
+                form=${_(this.form ? this.form : void 0)}
+                value=${_(this.value ? this.value : void 0)}
                 href=${this.href}
                 target="_blank"
                 @click=${this._handleClick}
@@ -1625,14 +1648,15 @@ const f = (p = class extends _1 {
             <button
               class="nys-button"
               id=${_(this.id)}
-              name=${_(this.name)}
+              name=${_(this.name ? this.name : void 0)}
               ?disabled=${this.disabled}
-              form=${_(this.form)}
-              value=${_(this.value)}
+              form=${_(this.form ? this.form : void 0)}
+              value=${_(this.value ? this.value : void 0)}
               type=${this.type}
               @click=${this._handleClick}
               @focus="${this._handleFocus}"
               @blur="${this._handleBlur}"
+              @keydown="${this._handleKeydown}"
             >
               ${this.prefixIcon && this.variant !== "text" ? y`<slot name="prefix-icon">
                     <nys-icon size="16" name=${this.prefixIcon}></nys-icon>
@@ -1650,7 +1674,7 @@ const f = (p = class extends _1 {
   "outline",
   "ghost",
   "text"
-], p.VALID_TYPES = ["submit", "reset", "button"], p.styles = T1, p);
+], p.VALID_TYPES = ["submit", "reset", "button"], p.styles = T1, p.formAssociated = !0, p);
 u([
   v({ type: String })
 ], f.prototype, "id", 2);