@nysds/components 1.1.2 → 1.1.5

package/dist/nysds.es.js

@@ -7,7 +7,7 @@ import "@nysds/nys-label";
 import "@nysds/nys-errormessage";
 import "@nysds/nys-textinput";
 /*!
-   * New York State Design System (v1.1.2)
+   * 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
@@ -72,10 +72,6 @@ const w1 = f`
     --_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;
@@ -140,6 +136,7 @@ const w1 = f`
 
   .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. */
@@ -331,7 +328,7 @@ const m = (F = class extends p {
             <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>
@@ -543,14 +540,14 @@ const N = (G = class extends p {
                       <nys-icon
                         label="nys-avatar__icon"
                         name=${this.icon}
-                        size="md"
+                        size="xl"
                       ></nys-icon>
                     </div>` : i`<div part="nys-avatar__icon">
                       <slot>
                         <nys-icon
                           label="nys-avatar__icon"
                           name="account_circle"
-                          size="md"
+                          size="xl"
                         ></nys-icon>
                       </slot>
                     </div>`}
@@ -1311,7 +1308,9 @@ const b1 = f`
   /* 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);
   }
 
@@ -1319,7 +1318,7 @@ const b1 = f`
     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;
   }
@@ -1709,7 +1708,7 @@ const k = (B = class extends p {
             ${this.checked ? i`<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>
@@ -1834,7 +1833,7 @@ const l1 = class l1 extends p {
   }
   render() {
     return i`${this.showError ? i`<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>` : ""}`;
   }
@@ -3478,7 +3477,7 @@ const L = (O = class extends p {
           ></slot>
           <nys-icon
             name="chevron_down"
-            size="lg"
+            size="xl"
             class="nys-select__icon"
           ></nys-icon>
         </div>
@@ -4547,7 +4546,7 @@ const L2 = f`
     --_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);
   }
 
@@ -4555,7 +4554,7 @@ const L2 = f`
     --_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) {
@@ -4647,6 +4646,7 @@ const D = (P = class extends p {
                 ${this.noIcon ? "" : i`<nys-icon
                       class="toggle-icon"
                       name="${this.checked ? "check" : "close"}"
+                      size="2xl"
                     ></nys-icon>`}
               </div>
             </span>