@govtechsg/sgds-web-component 3.0.3 → 3.0.5

package/css/grid.css

@@ -34,8 +34,8 @@
   .sgds-col-sm-6 { grid-column: span 6; }
   .sgds-col-sm-7 { grid-column: span 7; }
   .sgds-col-sm-8 { grid-column: span 8; }
-  .sgds-col-sm-none { display: none; }
   .sgds-col-none { display: revert; }
+  .sgds-col-sm-none { display: none; }
 }
 
 @media (min-width: 1024px) {  /* sgds-breakpoint-md */
@@ -59,8 +59,8 @@
   .sgds-col-md-10 { grid-column: span 10; }
   .sgds-col-md-11 { grid-column: span 11; }
   .sgds-col-md-12 { grid-column: span 12; }
-  .sgds-col-md-none { display: none; }
   .sgds-col-sm-none { display: revert; }
+  .sgds-col-md-none { display: none; }
 }
 
 @media (min-width: 1280px) {  /* sgds-breakpoint-lg */
@@ -84,8 +84,8 @@
   .sgds-col-lg-10 { grid-column: span 10; }
   .sgds-col-lg-11 { grid-column: span 11; }
   .sgds-col-lg-12 { grid-column: span 12; }
-  .sgds-col-lg-none { display: none; }
   .sgds-col-md-none { display: revert; }
+  .sgds-col-lg-none { display: none; }
 }
 
 @media (min-width: 1440px) {  /* sgds-breakpoint-xl */
@@ -105,6 +105,6 @@
   .sgds-col-xl-10 { grid-column: span 10; }
   .sgds-col-xl-11 { grid-column: span 11; }
   .sgds-col-xl-12 { grid-column: span 12; }
-  .sgds-col-xl-none { display: none; }
   .sgds-col-lg-none { display: revert; }
+  .sgds-col-xl-none { display: none; }
 }

package/index.umd.js

@@ -10109,6 +10109,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
@@ -10125,7 +10126,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() {
@@ -10156,7 +10157,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']");
@@ -22455,7 +22456,7 @@
       _updateDescriptionLists() {
           if (!this._descriptionLists)
               return;
-          this._descriptionLists.forEach(descriptionList => {
+          this._descriptionLists.forEach((descriptionList, index) => {
               if (this.stacked) {
                   descriptionList.setAttribute("stacked", "");
               }
@@ -22468,6 +22469,9 @@
               else {
                   descriptionList.removeAttribute("bordered");
               }
+              if (index === this._descriptionLists.length - 1) {
+                  descriptionList.setAttribute("isLastChild", "");
+              }
           });
       }
       updated(_changedProperties) {
@@ -22519,7 +22523,7 @@
       queryAssignedElements({ flatten: true })
   ], SgdsDescriptionListGroup.prototype, "_descriptionLists", void 0);
 
-  var css_248z$w = css`:host([bordered]) .container:last-child{border-bottom:none}:host([stacked]) .container{align-items:flex-start;flex-direction:column;gap:var(--sgds-gap-xs);justify-content:flex-start}.container{align-items:flex-start;border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:flex;gap:var(--sgds-gap-xs);justify-content:space-between;padding:var(--sgds-padding-lg) var(--sgds-padding-xl)}.data-container,.label-container{flex:1}.label{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold)}.data,.label{font-size:var(--sgds-font-size-2)}.data{color:var(--sgds-color-subtle);font-weight:var(--sgds-font-weight-regular);margin:0}`;
+  var css_248z$w = css`:host([bordered][islastchild]) .container:last-child{border-bottom:none}:host([stacked]) .container{align-items:flex-start;flex-direction:column;gap:var(--sgds-gap-xs);justify-content:flex-start}.container{align-items:flex-start;border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:flex;gap:var(--sgds-gap-xs);justify-content:space-between;padding:var(--sgds-padding-lg) var(--sgds-padding-xl)}.data-container,.label-container{flex:1}.label{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold)}.data,.label{font-size:var(--sgds-font-size-2)}.data{color:var(--sgds-color-subtle);font-weight:var(--sgds-font-weight-regular);margin:0}`;
 
   let id$2 = 0;
   /**
@@ -24470,7 +24474,7 @@
   register("sgds-mainnav-dropdown", SgdsMainnavDropdown);
   register("sgds-mainnav-item", SgdsMainnavItem);
 
-  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}`;
 
@@ -24484,6 +24488,13 @@
           this.toggleVisibility = false;
       }
       /** @internal */
+      _handleKeydown(event) {
+          if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              this._toggleVisibility();
+          }
+      }
+      /** @internal */
       _toggleVisibility() {
           this.toggleVisibility = !this.toggleVisibility;
       }
@@ -24532,9 +24543,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