@nysds/components 1.1.4 → 1.1.5

package/dist/nysds.js

@@ -1,5 +1,5 @@
 (function(_,c1){typeof exports=="object"&&typeof module<"u"?c1(exports):typeof define=="function"&&define.amd?define(["exports"],c1):(_=typeof globalThis<"u"?globalThis:_||self,c1(_.NYSDS={}))})(this,function(_){"use strict";/*!
-   * New York State Design System (v1.1.4)
+   * New York State Design System (v1.1.5)
    * Description: A design system for New York State's digital products.
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT
@@ -89,10 +89,6 @@
     --_nys-alert-gap-space-50: var(--nys-space-50, 4px);
   }
 
-  .nys-alert__icon {
-    margin-top: 1.5px; /* this margin is to just better align the icon with the texts */
-  }
-
   /* Main alert container */
   .nys-alert__container {
     display: flex;
@@ -157,6 +153,7 @@
 
   .close-container {
     margin-left: auto;
+    margin-top: -5px;
   }
 
   /* Centered variant: For no descriptions, we remove the <slot name="text"> via JS logic. In styling, centers the icon for a compact layout. */
@@ -1291,7 +1288,7 @@
             <div part="nys-alert__icon" class="nys-alert__icon">
               <nys-icon
                 name="${this._getIconName()}"
-                size="2xl"
+                size="3xl"
                 label="${this.type} icon"
               ></nys-icon>
             </div>
@@ -1424,14 +1421,14 @@
                       <nys-icon
                         label="nys-avatar__icon"
                         name=${this.icon}
-                        size="md"
+                        size="xl"
                       ></nys-icon>
                     </div>`:h`<div part="nys-avatar__icon">
                       <slot>
                         <nys-icon
                           label="nys-avatar__icon"
                           name="account_circle"
-                          size="md"
+                          size="xl"
                         ></nys-icon>
                       </slot>
                     </div>`}
@@ -2025,7 +2022,9 @@
   /* wraps the native checkbox and it's icon */
   .nys-checkbox__checkboxwrapper {
     position: relative;
-    display: inline-block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     max-height: var(--_nys-checkbox-size);
   }
 
@@ -2033,7 +2032,7 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate3d(-50%, -35%, 0); /* Centering the icon visually */
+    transform: translate(-50%, -50%); /* Centering the icon visually */
     pointer-events: none;
     color: white;
   }
@@ -2300,7 +2299,7 @@
       var(--_nys-errormessage-color);
   }
 `;var is=Object.defineProperty,_t=(o,t,e,s)=>{for(var r=void 0,i=o.length-1,n;i>=0;i--)(n=o[i])&&(r=n(t,e,r)||r);return r&&is(t,e,r),r};const bt=class extends p{constructor(){super(),this.showError=!1,this.errorMessage="",this.showDivider=!1,this._internals=this.attachInternals()}render(){return h`${this.showError?h`<div class="nys-errormessage" ?showDivider=${this.showDivider}>
-          <nys-icon name="error" size="xl"></nys-icon>
+          <nys-icon name="error" size="2xl"></nys-icon>
           ${this._internals.validationMessage||this.errorMessage}
         </div>`:""}`}};bt.styles=ns,bt.formAssociated=!0;let T2=bt;_t([vt({type:Boolean})],T2.prototype,"showError"),_t([vt({type:String})],T2.prototype,"errorMessage"),_t([vt({type:Boolean,reflect:!0})],T2.prototype,"showDivider"),customElements.get("nys-errormessage")||customElements.define("nys-errormessage",T2);var as=Object.defineProperty,ls=Object.getOwnPropertyDescriptor,e1=(o,t,e,s)=>{for(var r=s>1?void 0:s?ls(t,e):t,i=o.length-1,n;i>=0;i--)(n=o[i])&&(r=(s?n(t,e,r):n(r))||r);return s&&r&&as(t,e,r),r};let cs=0;const K=(o1=class extends p{constructor(){super(),this.id="",this.name="",this.required=!1,this.optional=!1,this.showError=!1,this.errorMessage="",this.label="",this.description="",this._size="md",this._internals=this.attachInternals()}get size(){return this._size}set size(t){this._size=o1.VALID_SIZES.includes(t)?t:"md"}connectedCallback(){super.connectedCallback(),this.id||(this.id=`nys-checkbox-${Date.now()}-${cs++}`),this.addEventListener("change",this._handleCheckboxChange),this.addEventListener("invalid",this._handleInvalid)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("change",this._handleCheckboxChange),this.removeEventListener("invalid",this._handleInvalid)}firstUpdated(){this._setGroupExist()}updated(t){t.has("required")&&this.required&&this._setupCheckboxRequired(),t.has("size")&&this.updateCheckboxSize()}_setGroupExist(){this.querySelectorAll("nys-checkbox").forEach(e=>{e.groupExist=!0})}async _handleInvalid(t){t.preventDefault(),this.showError=!0,this._manageCheckboxRequired();const e=this.querySelector("nys-checkbox"),s=e?await e.getInputElement():null;if(s){const r=this._internals.form;r?Array.from(r.elements).find(l=>{if(l.tagName.toLowerCase()==="nys-checkboxgroup"){if(Array.from(this.querySelectorAll("nys-checkbox")).filter(y=>y.checked).length===0)return l}else return typeof l.checkValidity=="function"&&!l.checkValidity()})===this&&s.focus():s.focus()}}async _setupCheckboxRequired(){const t=this.querySelector("nys-checkbox"),e=this.errorMessage||"This field is required",s=t?await t.getInputElement():null;this._internals.setValidity({valueMissing:!0},e,s||this)}_handleCheckboxChange(t){const e=t,{name:s}=e.detail,i=Array.from(this.querySelectorAll("nys-checkbox")).filter(n=>n.checked).map(n=>n.value);this.name=s,this._internals.setFormValue(i.join(", ")),this._manageCheckboxRequired()}async _manageCheckboxRequired(){if(this.required){const t=this.errorMessage||"Please select at least one option.",e=this.querySelector("nys-checkbox"),s=e?await e.getInputElement():null;let r=!1;this.querySelectorAll("nys-checkbox").forEach(n=>{n.checked&&(r=!0)}),r?(this._internals.setValidity({}),this.showError=!1):(this._internals.setValidity({valueMissing:!0},t,s||this),this.showError=!0)}}updateCheckboxSize(){this.querySelectorAll("nys-checkbox").forEach(e=>{e.setAttribute("size",this.size)})}render(){return h` <div
       class="nys-checkboxgroup"
@@ -2346,7 +2345,7 @@
             ${this.checked?h`<nys-icon
                   for="${this.id}"
                   name="check"
-                  size="${this.size==="md"?"2xl":this.size==="sm"?"sm":"md"}"
+                  size="${this.size==="md"?"4xl":this.size==="sm"?"2xl":"xl"}"
                   class="nys-checkbox__icon"
                 ></nys-icon>`:""}
           </div>
@@ -2418,7 +2417,7 @@
       var(--_nys-errormessage-color);
   }
 `;var us=Object.defineProperty,mt=(o,t,e,s)=>{for(var r=void 0,i=o.length-1,n;i>=0;i--)(n=o[i])&&(r=n(t,e,r)||r);return r&&us(t,e,r),r};const K2=class K2 extends p{constructor(){super(),this.showError=!1,this.errorMessage="",this.showDivider=!1,this._internals=this.attachInternals()}render(){return h`${this.showError?h`<div class="nys-errormessage" ?showDivider=${this.showDivider}>
-          <nys-icon name="error" size="xl"></nys-icon>
+          <nys-icon name="error" size="2xl"></nys-icon>
           ${this._internals.validationMessage||this.errorMessage}
         </div>`:""}`}};K2.styles=ys,K2.formAssociated=!0;let A1=K2;mt([a({type:Boolean})],A1.prototype,"showError"),mt([a({type:String})],A1.prototype,"errorMessage"),mt([a({type:Boolean,reflect:!0})],A1.prototype,"showDivider"),customElements.get("nys-errormessage")||customElements.define("nys-errormessage",A1);const ps={account_circle:`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
   <mask id="mask0_12372_781" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
@@ -3485,7 +3484,7 @@
           ></slot>
           <nys-icon
             name="chevron_down"
-            size="lg"
+            size="xl"
             class="nys-select__icon"
           ></nys-icon>
         </div>
@@ -4133,7 +4132,7 @@
     --_nys-toggle-width: var(--nys-toggle-font-size-6xl, 36px);
     --_nys-toggle-height: var(--nys-toggle-size-250, 20px);
     --_nys-toggle-slider-diameter: var(--nys-toggle--font-size-md, 16px);
-    --_nys-icon-font-size: var(--nys-toggle-font-size-sm, 14px);
+    --_nys-toggle-icon-font-size: var(--nys-toggle-font-size-sm, 14px);
     --_nys-toggle-gap: var(--nys-space-100, 8px);
   }
 
@@ -4141,7 +4140,7 @@
     --_nys-toggle-width: var(--nys-toggle-font-size-8xl, 44px);
     --_nys-toggle-height: var(--nys-toggle-size-300, 24px);
     --_nys-toggle-slider-diameter: var(--nys-toggle-font-size-xl, 20px);
-    --_nys-icon-font-size: var(--nys-toggle-font-size-md, 16px);
+    --_nys-toggle-icon-font-size: var(--nys-toggle-font-size-md, 16px);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -4174,6 +4173,7 @@
                 ${this.noIcon?"":h`<nys-icon
                       class="toggle-icon"
                       name="${this.checked?"check":"close"}"
+                      size="2xl"
                     ></nys-icon>`}
               </div>
             </span>