@govtechsg/sgds-web-component 3.0.3 → 3.0.5

package/Masthead/index.js

@@ -4162,7 +4162,7 @@
   /** @internal */
   SgdsElement.dependencies = {};
 
-  var css_248z$2 = 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$2 = 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$1 = css`svg{vertical-align:middle}`;
 
@@ -4178,6 +4178,13 @@
           this.toggleVisibility = false;
       }
       /** @internal */
+      _handleKeydown(event) {
+          if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              this._toggleVisibility();
+          }
+      }
+      /** @internal */
       _toggleVisibility() {
           this.toggleVisibility = !this.toggleVisibility;
       }
@@ -4226,9 +4233,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

package/components/Card/index.umd.js

@@ -4594,6 +4594,7 @@
   /**
    * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
    * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
+   * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
    * @slot subtitle - The subtitle of the card
    * @slot title - The title of the card
    * @slot description - The paragrapher text of the card
@@ -4610,7 +4611,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() {
@@ -4641,7 +4642,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']");