@govtechsg/sgds-web-component 3.0.4 → 3.0.6

package/css/grid.css

@@ -15,6 +15,7 @@
 .sgds-col-2 { grid-column: span 2; }
 .sgds-col-3 { grid-column: span 3; }
 .sgds-col-4 { grid-column: span 4; }
+.sgds-col-center-2 { grid-column: 2 / span 2; }
 .sgds-col-none { display: none; }
 
 @media (min-width: 512px) {  /* sgds-breakpoint-sm */
@@ -23,7 +24,7 @@
   }
 
   .sgds-container {
-    max-width: calc(100% - 64px); /* outer margin of 32px on each side */
+    max-width: calc(100% - 48px); /* outer margin of 24px on each side */
   }
 
   .sgds-col-sm-1 { grid-column: span 1; }
@@ -34,17 +35,16 @@
   .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-center-2 { grid-column: 4 / span 2; }
+  .sgds-col-sm-center-4 { grid-column: 3 / span 4; }
+  .sgds-col-sm-center-6 { grid-column: 2 / span 6; }
   .sgds-col-none { display: revert; }
   .sgds-col-sm-none { display: none; }
 }
 
-@media (min-width: 1024px) {  /* sgds-breakpoint-md */
-  .sgds-grid {
-    grid-template-columns: repeat(12, 1fr);
-  }
-
+@media (min-width: 768px) {  /* sgds-breakpoint-md */
   .sgds-container {
-    max-width: 896px;
+    max-width: calc(100% - 64px); /* outer margin of 32px on each side */
   }
 
   .sgds-col-md-1 { grid-column: span 1; }
@@ -55,21 +55,20 @@
   .sgds-col-md-6 { grid-column: span 6; }
   .sgds-col-md-7 { grid-column: span 7; }
   .sgds-col-md-8 { grid-column: span 8; }
-  .sgds-col-md-9 { grid-column: span 9; }
-  .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-center-2 { grid-column: 4 / span 2; }
+  .sgds-col-md-center-4 { grid-column: 3 / span 4; }
+  .sgds-col-md-center-6 { grid-column: 2 / span 6; }
   .sgds-col-sm-none { display: revert; }
   .sgds-col-md-none { display: none; }
 }
 
-@media (min-width: 1280px) {  /* sgds-breakpoint-lg */
+@media (min-width: 1024px) {  /* sgds-breakpoint-lg */
   .sgds-grid {
-    gap: var(--sgds-gap-xl);
+    grid-template-columns: repeat(12, 1fr);
   }
 
   .sgds-container {
-    max-width: 1176px;
+    max-width: 896px;
   }
 
   .sgds-col-lg-1 { grid-column: span 1; }
@@ -84,13 +83,22 @@
   .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-center-2 { grid-column: 6 / span 2; }
+  .sgds-col-lg-center-4 { grid-column: 5 / span 4; }
+  .sgds-col-lg-center-6 { grid-column: 4 / span 6; }
+  .sgds-col-lg-center-8 { grid-column: 3 / span 8; }
+  .sgds-col-lg-center-10 { grid-column: 2 / span 10; }
   .sgds-col-md-none { display: revert; }
   .sgds-col-lg-none { display: none; }
 }
 
-@media (min-width: 1440px) {  /* sgds-breakpoint-xl */
+@media (min-width: 1280px) {  /* sgds-breakpoint-xl */
+  .sgds-grid {
+    gap: var(--sgds-gap-xl);
+  }
+
   .sgds-container {
-    max-width: 1320px;
+    max-width: 1176px;
   }
 
   .sgds-col-xl-1 { grid-column: span 1; }
@@ -105,6 +113,37 @@
   .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-center-2 { grid-column: 6 / span 2; }
+  .sgds-col-xl-center-4 { grid-column: 5 / span 4; }
+  .sgds-col-xl-center-6 { grid-column: 4 / span 6; }
+  .sgds-col-xl-center-8 { grid-column: 3 / span 8; }
+  .sgds-col-xl-center-10 { grid-column: 2 / span 10; }
   .sgds-col-lg-none { display: revert; }
   .sgds-col-xl-none { display: none; }
 }
+
+@media (min-width: 1440px) {  /* sgds-breakpoint-2-xl */
+  .sgds-container {
+    max-width: 1320px;
+  }
+
+  .sgds-col-2-xl-1 { grid-column: span 1; }
+  .sgds-col-2-xl-2 { grid-column: span 2; }
+  .sgds-col-2-xl-3 { grid-column: span 3; }
+  .sgds-col-2-xl-4 { grid-column: span 4; }
+  .sgds-col-2-xl-5 { grid-column: span 5; }
+  .sgds-col-2-xl-6 { grid-column: span 6; }
+  .sgds-col-2-xl-7 { grid-column: span 7; }
+  .sgds-col-2-xl-8 { grid-column: span 8; }
+  .sgds-col-2-xl-9 { grid-column: span 9; }
+  .sgds-col-2-xl-10 { grid-column: span 10; }
+  .sgds-col-2-xl-11 { grid-column: span 11; }
+  .sgds-col-2-xl-12 { grid-column: span 12; }
+  .sgds-col-2-xl-center-2 { grid-column: 6 / span 2; }
+  .sgds-col-2-xl-center-4 { grid-column: 5 / span 4; }
+  .sgds-col-2-xl-center-6 { grid-column: 4 / span 6; }
+  .sgds-col-2-xl-center-8 { grid-column: 3 / span 8; }
+  .sgds-col-2-xl-center-10 { grid-column: 2 / span 10; }
+  .sgds-col-xl-none { display: revert; }
+  .sgds-col-2-xl-none { display: none; }
+}

package/index.umd.js

@@ -10126,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() {
@@ -10157,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']");
@@ -21541,16 +21541,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
@@ -21587,6 +21577,7 @@
       }
       _handleBlur() {
           const sgdsBlur = this.emit("sgds-blur", { cancelable: true });
+          this.setInvalid(!this._mixinCheckValidity());
           if (sgdsBlur.defaultPrevented)
               return;
           this._isTouched = true;
@@ -24474,7 +24465,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}`;
 
@@ -24488,6 +24479,13 @@
           this.toggleVisibility = false;
       }
       /** @internal */
+      _handleKeydown(event) {
+          if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              this._toggleVisibility();
+          }
+      }
+      /** @internal */
       _toggleVisibility() {
           this.toggleVisibility = !this.toggleVisibility;
       }
@@ -24536,9 +24534,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