@govtechsg/sgds-web-component 3.0.4 → 3.0.6

package/components/index.umd.js

@@ -10109,7 +10109,7 @@
           this.orientation = "vertical";
           /** Sets the image position of the card. Available options: `before`, `after` */
           this.imagePosition = "before";
-          /** Sets the orientation of the card. Available options: `default`, `padding around`, `aspect ratio` */
+          /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
           this.imageAdjustment = "default";
       }
       firstUpdated() {
@@ -10140,7 +10140,7 @@
           if (childNodes.length > 1) {
               return console.error("Multiple elements passed into SgdsCard's link slot");
           }
-          if (this.stretchedLink) {
+          if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {
               const hyperlink = childNodes[0].querySelector("a") || childNodes[0];
               this.card.setAttribute("href", hyperlink.href);
               const linkSlot = this.shadowRoot.querySelector("slot[name='link']");
@@ -21517,16 +21517,6 @@
       blur() {
           this.input.blur();
       }
-      /** Programatically sets the invalid state of the input. Pass in boolean value in the argument */
-      setInvalid(bool) {
-          this.invalid = bool;
-          if (bool) {
-              this.emit("sgds-invalid");
-          }
-          else {
-              this.emit("sgds-valid");
-          }
-      }
       /**
        * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
        * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
@@ -21563,6 +21553,7 @@
       }
       _handleBlur() {
           const sgdsBlur = this.emit("sgds-blur", { cancelable: true });
+          this.setInvalid(!this._mixinCheckValidity());
           if (sgdsBlur.defaultPrevented)
               return;
           this._isTouched = true;
@@ -24396,7 +24387,7 @@
       watch("disabled")
   ], SgdsMainnavItem.prototype, "_handleDisabled", null);
 
-  var css_248z$m = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#f3f3f3,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width);padding:.25rem var(--sgds-mainnav-padding-x);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(oklch(from #0e0e0e l c h/.1),oklch(from #fff l c h/.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
+  var css_248z$m = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#f3f3f3,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width);padding:.25rem var(--sgds-mainnav-padding-x);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(oklch(from #0e0e0e l c h/.1),oklch(from #fff l c h/.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus,.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus,a.trusted-websites-link:focus-visible{box-shadow:0 0 0 4px #60aaf4;outline:0}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
 
   var css_248z$l = css`svg{vertical-align:middle}`;
 
@@ -24410,6 +24401,13 @@
           this.toggleVisibility = false;
       }
       /** @internal */
+      _handleKeydown(event) {
+          if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              this._toggleVisibility();
+          }
+      }
+      /** @internal */
       _toggleVisibility() {
           this.toggleVisibility = !this.toggleVisibility;
       }
@@ -24458,9 +24456,11 @@
                   class="sgds-masthead-button"
                   id="sgds-masthead-identify"
                   role="button"
+                  tabindex="0"
                   aria-expanded="${this.toggleVisibility}"
                   aria-controls="sgds-masthead-content"
-                  @click=${() => this._toggleVisibility()}
+                  @keydown=${this._handleKeydown}
+                  @click=${this._toggleVisibility}
                 >
                   <span>How to identify</span>
                   <svg