@nysds/nys-select 1.1.0 → 1.1.1

package/dist/index.d.ts

@@ -1 +1,2 @@
 export * from "./nys-select";
+export * from "./nys-option";

package/dist/nys-select.d.ts

@@ -10,6 +10,7 @@ export declare class NysSelect extends LitElement {
     value: string;
     disabled: boolean;
     required: boolean;
+    optional: boolean;
     form: string;
     showError: boolean;
     errorMessage: string;
@@ -34,6 +35,7 @@ export declare class NysSelect extends LitElement {
     private _setValidityMessage;
     private _validate;
     /********************** Functions **********************/
+    checkValidity(): boolean;
     private _handleInvalid;
     /******************** Event Handlers ********************/
     private _handleChange;

package/dist/nys-select.js

@@ -4,7 +4,7 @@ import { css as k, LitElement as L, html as p } from "lit";
    * ▒█▒█▒█ ▒█▄▄▄█ ░▀▀▀▄▄ ▒█░▒█ ░▀▀▀▄▄ 
    * ▒█░░▀█ ░░▒█░░ ▒█▄▄▄█ ▒█▄▄▀ ▒█▄▄▄█
    * 
-   * Select Component v1.1.0
+   * Select Component v1.1.1
    * Part of the New York State Design System
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT
@@ -328,13 +328,17 @@ const C5 = k`
     --_nys-select-font-size: var(--nys-font-size-ui-md, 16px);
     --_nys-select-font-weight: var(--nys-font-weight-regular, 400);
     --_nys-select-line-height: var(--nys-font-lineheight-ui-md, 24px);
-    --_nys-select-gap: var(--nys-space-100, 8px);
+    --_nys-select-gap: var(--nys-space-50, 4px);
     --_nys-select-radius: var(--nys-radius-md, var(--nys-space-50, 4px));
     --_nys-select-padding: var(--nys-space-100, 8px) var(--nys-space-400, 32px)
       var(--nys-space-100, 8px) var(--nys-space-100, 8px);
 
     /* Global Select Colors */
-    --_nys-select-color: var(
+    --_nys-select-text-color: var(
+      --nys-color-text,
+      var(--nys-color-neutral-900, #1b1b1b)
+    );
+    --_nys-select-icon-color: var(
       --nys-color-ink,
       var(--nys-color-neutral-900, #1b1b1b)
     );
@@ -344,7 +348,11 @@ const C5 = k`
     );
     --_nys-select-bg-color: var(--nys-color-ink-reverse, #fff);
     --_nys-select-bg-disabled-color: var(--nys-color-neutral-50, #ededed);
-    --_nys-select-icon-disabled-color: var(--nys-color-neutral-300, #a7a9ab);
+    --_nys-select-text-disabled-color: var(
+      --nys-color-text-disabled,
+      var(--nys-color-neutral-200, #bec0c1)
+    );
+    --_nys-select-icon-disabled-color: var(--nys-color-neutral-200, #bec0c1);
 
     /* Select Outline & Border States */
     --_nys-select-border-default: var(--nys-border-width-sm, 1px) solid
@@ -362,10 +370,10 @@ const C5 = k`
     flex-direction: column;
     gap: var(--_nys-select-gap);
     font-family: var(--_nys-select-font-family);
-    color: var(--_nys-select-color);
   }
 
   .nys-select__select {
+    color: var(--_nys-select-text-color);
     font-weight: var(--_nys-select-font-weight);
     border-radius: var(--_nys-select-radius);
     border: var(--_nys-select-border-default);
@@ -390,6 +398,7 @@ const C5 = k`
   }
 
   .nys-select__icon {
+    color: var(--_nys-select-icon-color);
     position: absolute;
     right: 10px;
     top: 50%;
@@ -438,6 +447,7 @@ const C5 = k`
     background-color: var(--_nys-select-bg-disabled-color);
     border: var(--_nys-select-border-disabled);
     cursor: not-allowed;
+    color: var(--_nys-select-text-disabled-color);
   }
   .nys-select__select:disabled ~ .nys-select__icon {
     color: var(--_nys-select-icon-disabled-color);
@@ -501,7 +511,7 @@ customElements.define("nys-option", u);
    * ▒█▒█▒█ ▒█▄▄▄█ ░▀▀▀▄▄ ▒█░▒█ ░▀▀▀▄▄ 
    * ▒█░░▀█ ░░▒█░░ ▒█▄▄▄█ ▒█▄▄▀ ▒█▄▄▄█
    * 
-   * Icon Component v1.1.0
+   * Icon Component v1.1.1
    * Part of the New York State Design System
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT
@@ -1148,7 +1158,7 @@ const g = (x = class extends L {
   "64"
 ], x);
 b([
-  M({ type: String })
+  M({ type: String, reflect: !0 })
 ], g.prototype, "name", 2);
 b([
   M({ type: String })
@@ -1168,7 +1178,7 @@ b([
 let _5 = g;
 customElements.get("nys-icon") || customElements.define("nys-icon", _5);
 /*!
-   * Label v1.1.0
+   * Label v1.1.1
    * Part of the New York State Design System
    * A design system for New York State's digital products.
    * Repository: https://github.com/its-hcd/nysds
@@ -1214,10 +1224,10 @@ const M5 = (o) => new L5(typeof o == "string" ? o : o + "", void 0, j1), b5 = (o
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: $5, defineProperty: Z5, getOwnPropertyDescriptor: E5, getOwnPropertyNames: S5, getOwnPropertySymbols: x5, getPrototypeOf: H5 } = Object, y = globalThis, Z1 = y.trustedTypes, V5 = Z1 ? Z1.emptyScript : "", E1 = y.reactiveElementPolyfillSupport, z = (o, t) => o, K = { toAttribute(o, t) {
+const { is: $5, defineProperty: Z5, getOwnPropertyDescriptor: E5, getOwnPropertyNames: S5, getOwnPropertySymbols: x5, getPrototypeOf: V5 } = Object, y = globalThis, Z1 = y.trustedTypes, H5 = Z1 ? Z1.emptyScript : "", E1 = y.reactiveElementPolyfillSupport, z = (o, t) => o, K = { toAttribute(o, t) {
   switch (t) {
     case Boolean:
-      o = o ? V5 : null;
+      o = o ? H5 : null;
       break;
     case Object:
     case Array:
@@ -1244,7 +1254,7 @@ const { is: $5, defineProperty: Z5, getOwnPropertyDescriptor: E5, getOwnProperty
   return e;
 } }, l1 = (o, t) => !$5(o, t), S1 = { attribute: !0, type: String, converter: K, reflect: !1, hasChanged: l1 };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), y.litPropertyMetadata ?? (y.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-let H = class extends HTMLElement {
+let V = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t);
   }
@@ -1275,7 +1285,7 @@ let H = class extends HTMLElement {
   }
   static _$Ei() {
     if (this.hasOwnProperty(z("elementProperties"))) return;
-    const t = H5(this);
+    const t = V5(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
@@ -1442,7 +1452,7 @@ let H = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-H.elementStyles = [], H.shadowRootOptions = { mode: "open" }, H[z("elementProperties")] = /* @__PURE__ */ new Map(), H[z("finalized")] = /* @__PURE__ */ new Map(), E1 == null || E1({ ReactiveElement: H }), (y.reactiveElementVersions ?? (y.reactiveElementVersions = [])).push("2.0.4");
+V.elementStyles = [], V.shadowRootOptions = { mode: "open" }, V[z("elementProperties")] = /* @__PURE__ */ new Map(), V[z("finalized")] = /* @__PURE__ */ new Map(), E1 == null || E1({ ReactiveElement: V }), (y.reactiveElementVersions ?? (y.reactiveElementVersions = [])).push("2.0.4");
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -1493,19 +1503,19 @@ const O5 = k`
     --_nys-label-font-size: var(--nys-font-size-ui-md, 16px);
     --_nys-label-line-height: var(--nys-font-lineheight-ui-md, 24px);
     --_nys-label-letter-spacing: var(--nys-font-letterspacing-ui-md, 0.044px);
-    --_nys-label-font-color: var(--nys-color-ink, #1b1b1b);
+    --_nys-label-font-color: var(--nys-color-text, #1b1b1b);
 
     /* Description */
     --nys-description-font-weight: var(--nys-font-weight-regular, 400);
     --nys-description-font-style: italic;
-    --nys-description-font-color: var(--nys-neutral-900, #1b1b1b);
+    --nys-description-font-color: var(--nys-color-text, #1b1b1b);
 
     /* Required Flag */
     --nys-required-font-color: var(--nys-color-danger, #b52c2c);
 
     /* Optional Flag */
     --nys-optional-font-weight: var(--nys-font-weight-regular, 400);
-    --nys-optional-font-color: var(--nys-color-neutral-700, #4a4d4f);
+    --nys-optional-font-color: var(--nys-color-text-weak, #4a4d4f);
 
     /* Spacing */
     --_nys-label-flag-gap: var(--nys-space-2px, 2px);
@@ -1587,7 +1597,7 @@ Q([
 ], j.prototype, "flag");
 customElements.get("nys-label") || customElements.define("nys-label", j);
 /*!
-   * Error Message v1.1.0
+   * Error Message v1.1.1
    * Part of the New York State Design System
    * A design system for New York State's digital products.
    * Repository: https://github.com/its-hcd/nysds
@@ -1623,7 +1633,7 @@ const B5 = (o) => new z5(typeof o == "string" ? o : o + "", void 0, D1), R5 = (o
     const s = document.createElement("style"), C = I.litNonce;
     C !== void 0 && s.setAttribute("nonce", C), s.textContent = e.cssText, o.appendChild(s);
   }
-}, H1 = a1 ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
+}, V1 = a1 ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
   let e = "";
   for (const s of t.cssRules) e += s.cssText;
   return B5(e);
@@ -1633,7 +1643,7 @@ const B5 = (o) => new z5(typeof o == "string" ? o : o + "", void 0, D1), R5 = (o
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: k5, defineProperty: T5, getOwnPropertyDescriptor: j5, getOwnPropertyNames: q5, getOwnPropertySymbols: D5, getPrototypeOf: N5 } = Object, m = globalThis, V1 = m.trustedTypes, I5 = V1 ? V1.emptyScript : "", P1 = m.reactiveElementPolyfillSupport, B = (o, t) => o, Y = { toAttribute(o, t) {
+const { is: k5, defineProperty: T5, getOwnPropertyDescriptor: j5, getOwnPropertyNames: q5, getOwnPropertySymbols: D5, getPrototypeOf: N5 } = Object, m = globalThis, H1 = m.trustedTypes, I5 = H1 ? H1.emptyScript : "", P1 = m.reactiveElementPolyfillSupport, B = (o, t) => o, Y = { toAttribute(o, t) {
   switch (t) {
     case Boolean:
       o = o ? I5 : null;
@@ -1663,7 +1673,7 @@ const { is: k5, defineProperty: T5, getOwnPropertyDescriptor: j5, getOwnProperty
   return e;
 } }, c1 = (o, t) => !k5(o, t), U1 = { attribute: !0, type: String, converter: Y, reflect: !1, hasChanged: c1 };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), m.litPropertyMetadata ?? (m.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-class V extends HTMLElement {
+class H extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t);
   }
@@ -1719,8 +1729,8 @@ class V extends HTMLElement {
     const e = [];
     if (Array.isArray(t)) {
       const s = new Set(t.flat(1 / 0).reverse());
-      for (const C of s) e.unshift(H1(C));
-    } else t !== void 0 && e.push(H1(t));
+      for (const C of s) e.unshift(V1(C));
+    } else t !== void 0 && e.push(V1(t));
     return e;
   }
   static _$Eu(t, e) {
@@ -1861,7 +1871,7 @@ class V extends HTMLElement {
   firstUpdated(t) {
   }
 }
-V.elementStyles = [], V.shadowRootOptions = { mode: "open" }, V[B("elementProperties")] = /* @__PURE__ */ new Map(), V[B("finalized")] = /* @__PURE__ */ new Map(), P1 == null || P1({ ReactiveElement: V }), (m.reactiveElementVersions ?? (m.reactiveElementVersions = [])).push("2.0.4");
+H.elementStyles = [], H.shadowRootOptions = { mode: "open" }, H[B("elementProperties")] = /* @__PURE__ */ new Map(), H[B("finalized")] = /* @__PURE__ */ new Map(), P1 == null || P1({ ReactiveElement: H }), (m.reactiveElementVersions ?? (m.reactiveElementVersions = [])).push("2.0.4");
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -1949,7 +1959,7 @@ const J5 = k`
    * ▒█▒█▒█ ▒█▄▄▄█ ░▀▀▀▄▄ ▒█░▒█ ░▀▀▀▄▄ 
    * ▒█░░▀█ ░░▒█░░ ▒█▄▄▄█ ▒█▄▄▀ ▒█▄▄▄█
    * 
-   * Icon Component v1.1.0
+   * Icon Component v1.1.1
    * Part of the New York State Design System
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT
@@ -2596,7 +2606,7 @@ const w = (U = class extends L {
   "64"
 ], U);
 Z([
-  $({ type: String })
+  $({ type: String, reflect: !0 })
 ], w.prototype, "name", 2);
 Z([
   $({ type: String })
@@ -2654,7 +2664,7 @@ var d;
 const c = (d = class extends L {
   // allows use of elementInternals' API
   constructor() {
-    super(), this.id = "", this.name = "", this.label = "", this.description = "", this.value = "", this.disabled = !1, this.required = !1, this.form = "", this.showError = !1, this.errorMessage = "", this._width = "md", this._hasUserInteracted = !1, this._internals = this.attachInternals();
+    super(), this.id = "", this.name = "", this.label = "", this.description = "", this.value = "", this.disabled = !1, this.required = !1, this.optional = !1, this.form = "", this.showError = !1, this.errorMessage = "", this._width = "md", this._hasUserInteracted = !1, this._internals = this.attachInternals();
   }
   get width() {
     return this._width;
@@ -2701,7 +2711,7 @@ const c = (d = class extends L {
     const t = (C = this.shadowRoot) == null ? void 0 : C.querySelector("select");
     if (!t) return;
     const e = this.errorMessage || "Please select an option.";
-    this.required && !this.value ? (this._internals.ariaRequired = "true", this._internals.setValidity({ valueMissing: !0 }, e, t), this.showError = !0) : (this._internals.ariaRequired = "false", this._internals.setValidity({}), this.showError = !1, this._hasUserInteracted = !1);
+    this.required && !this.value ? (this._internals.ariaRequired = "true", this._internals.setValidity({ valueMissing: !0 }, e, t)) : (this._internals.ariaRequired = "false", this._internals.setValidity({}), this._hasUserInteracted = !1);
   }
   _setValidityMessage(t = "") {
     var s;
@@ -2720,8 +2730,22 @@ const c = (d = class extends L {
     this._manageRequire(), this._setValidityMessage(e);
   }
   /********************** Functions **********************/
-  _handleInvalid() {
-    this._hasUserInteracted = !0, this._validate(), this.showError = !0;
+  // This helper function is called to perform the element's native validation.
+  checkValidity() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("select");
+    return t ? t.checkValidity() : !0;
+  }
+  _handleInvalid(t) {
+    var s;
+    t.preventDefault(), this._hasUserInteracted = !0, this._validate(), this.showError = !0;
+    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("select");
+    if (e) {
+      const C = this._internals.form;
+      C ? Array.from(C.elements).find(
+        (n) => typeof n.checkValidity == "function" && !n.checkValidity()
+      ) === this && e.focus() : e.focus();
+    }
   }
   /******************** Event Handlers ********************/
   // Handle change event to bubble up selected value
@@ -2761,7 +2785,7 @@ const c = (d = class extends L {
         <nys-label
           label=${this.label}
           description=${this.description}
-          flag=${this.required ? "required" : ""}
+          flag=${this.required ? "required" : this.optional ? "optional" : ""}
         >
           <slot name="description" slot="description">${this.description}</slot>
         </nys-label>
@@ -2804,7 +2828,7 @@ h([
   a({ type: String })
 ], c.prototype, "id", 2);
 h([
-  a({ type: String })
+  a({ type: String, reflect: !0 })
 ], c.prototype, "name", 2);
 h([
   a({ type: String })
@@ -2821,6 +2845,9 @@ h([
 h([
   a({ type: Boolean, reflect: !0 })
 ], c.prototype, "required", 2);
+h([
+  a({ type: Boolean, reflect: !0 })
+], c.prototype, "optional", 2);
 h([
   a({ type: String })
 ], c.prototype, "form", 2);
@@ -2836,6 +2863,7 @@ h([
 let g2 = c;
 customElements.get("nys-select") || customElements.define("nys-select", g2);
 export {
+  u as NysOption,
   g2 as NysSelect
 };
 //# sourceMappingURL=nys-select.js.map