@govtechsg/sgds-web-component 3.2.0-rc.4 → 3.3.0

package/react/components/Card/sgds-card.js

@@ -1,26 +1,30 @@
 'use client';
 import { __decorate } from 'tslib';
 import { literal, html } from 'lit/static-html.js';
-import { queryAssignedNodes, property } from 'lit/decorators.js';
+import { query, queryAssignedNodes, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { CardElement } from '../../base/card-element.js';
+import { SgdsLink } from '../Link/sgds-link.js';
 import css_248z from './card.js';
 
 /**
  * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
- * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
- * @slot menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.
  * @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
- * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
  * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
  */
 class SgdsCard extends CardElement {
     constructor() {
         super(...arguments);
+        /** Extends the link passed in slot[name="link"] to the entire card */
+        this.stretchedLink = false;
+        /** Disables the card  */
+        this.disabled = false;
+        /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
+        this.orientation = "vertical";
         /** Sets the image position of the card. Available options: `before`, `after` */
         this.imagePosition = "before";
         /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
@@ -32,8 +36,35 @@ class SgdsCard extends CardElement {
             icon.style.display = "none";
         }
         if (this._iconNode.length === 0) {
-            const media = this.shadowRoot.querySelector(".card-media");
-            media.style.display = "none";
+            const icon = this.shadowRoot.querySelector(".card-icon");
+            icon.style.display = "none";
+        }
+        if (this.disabled && this._linkNode.length > 0) {
+            const hyperlink = this._linkNode[0].querySelector("a");
+            hyperlink.setAttribute("disabled", "true");
+            hyperlink.removeAttribute("href");
+        }
+    }
+    handleTitleSlotChange(e) {
+        const childNodes = e.target.assignedNodes({ flatten: true });
+        if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {
+            const hyperlink = childNodes[0].querySelector("a") || childNodes[0];
+            hyperlink.removeAttribute("href");
+        }
+        return;
+    }
+    handleLinkSlotChange(e) {
+        const childNodes = e.target.assignedNodes({ flatten: true });
+        if (childNodes.length > 1) {
+            return console.error("Multiple elements passed into SgdsCard's link slot");
+        }
+        if (!this.stretchedLink)
+            return;
+        if (childNodes[0] instanceof HTMLAnchorElement || childNodes[0] instanceof SgdsLink) {
+            const hyperlink = (childNodes[0].querySelector("a") || childNodes[0]);
+            this.card.setAttribute("href", hyperlink.href);
+            const linkSlot = this.shadowRoot.querySelector("slot[name='link']");
+            linkSlot.style.display = "none";
         }
     }
     handleImgSlotChange(e) {
@@ -52,26 +83,20 @@ class SgdsCard extends CardElement {
         })}"
         tabindex=${cardTabIndex}
       >
-        <div class="card-tinted-bg"></div>
-        <slot name="menu"></slot>
         <div class="card-image">
           <slot name="image" @slotchange=${this.handleImgSlotChange}></slot>
         </div>
-        <div class="card-media">
+        <div class="card-icon">
           <slot name="icon"></slot>
         </div>
         <div class="card-body">
-          <div class="card-header-container">
-            <div class="card-header">
-              <slot name="subtitle"></slot>
-              <h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
-            </div>
-            <slot></slot>
+          <div class="card-header">
+            <slot name="subtitle"></slot>
+            <h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
           </div>
           <p class="card-text">
             <slot name="description"></slot>
           </p>
-          <slot name="lower"></slot>
           <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
         </div>
       </${tag}>
@@ -79,12 +104,27 @@ class SgdsCard extends CardElement {
     }
 }
 SgdsCard.styles = [...CardElement.styles, css_248z];
+__decorate([
+    query("a.card")
+], SgdsCard.prototype, "card", void 0);
 __decorate([
     queryAssignedNodes({ slot: "image", flatten: true })
 ], SgdsCard.prototype, "_imageNode", void 0);
 __decorate([
     queryAssignedNodes({ slot: "icon", flatten: true })
 ], SgdsCard.prototype, "_iconNode", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "link", flatten: true })
+], SgdsCard.prototype, "_linkNode", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsCard.prototype, "stretchedLink", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsCard.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsCard.prototype, "orientation", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], SgdsCard.prototype, "imagePosition", void 0);

package/react/components/Card/sgds-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-card.js","sources":["../../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { html, literal } from \"lit/static-html.js\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { CardImageAdjustment, CardImagePosition } from \"./types\";\nimport cardStyle from \"./card.css\";\n\n/**\n * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.\n * @slot menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.\n * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"image\", flatten: true })\n  _imageNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"icon\", flatten: true })\n  _iconNode!: Array<Node>;\n\n  /** Sets the image position of the card. Available options: `before`, `after` */\n  @property({ type: String, reflect: true }) imagePosition: CardImagePosition = \"before\";\n\n  /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */\n  @property({ type: String, reflect: true }) imageAdjustment: CardImageAdjustment = \"default\";\n\n  protected firstUpdated() {\n    if (this._imageNode.length === 0) {\n      const icon = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n      icon.style.display = \"none\";\n    }\n    if (this._iconNode.length === 0) {\n      const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n      media.style.display = \"none\";\n    }\n  }\n\n  handleImgSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        <div class=\"card-tinted-bg\"></div>\n        <slot name=\"menu\"></slot>\n        <div class=\"card-image\">\n          <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n        </div>\n        <div class=\"card-media\">\n          <slot name=\"icon\"></slot>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"card-header-container\">\n            <div class=\"card-header\">\n              <slot name=\"subtitle\"></slot>\n              <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n            </div>\n            <slot></slot>\n          </div>\n          <p class=\"card-text\">\n            <slot name=\"description\"></slot>\n          </p>\n          <slot name=\"lower\"></slot>\n          <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["cardStyle"],"mappings":";;;;;;;;AAOA;;;;;;;;;;;AAWG;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAW6C,IAAa,CAAA,aAAA,GAAsB,QAAQ,CAAC;;QAG5C,IAAe,CAAA,eAAA,GAAwB,SAAS,CAAC;KAyD7F;IAvDW,YAAY,GAAA;QACpB,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE;YAChC,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;AAC5E,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;SAC7B;QACD,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;YAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;AAC7E,YAAA,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;SAC9B;KACF;AAED,IAAA,mBAAmB,CAAC,CAAQ,EAAA;AAC1B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAiC,CAAC;AAElH,QAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,qDAAqD,CAAC,CAAC;SAC7E;KACF;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,GAAG,OAAO,CAAA,GAAG,GAAG,OAAO,CAAA,KAAK,CAAC;AAC3D,QAAA,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAEnE,QAAA,OAAO,IAAI,CAAA,CAAA;SACN,GAAG,CAAA;AACU,oBAAA,EAAA,QAAQ,CAAC;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;mBACS,YAAY,CAAA;;;;;AAKY,yCAAA,EAAA,IAAI,CAAC,mBAAmB,CAAA;;;;;;;;;AASG,oEAAA,EAAA,IAAI,CAAC,qBAAqB,CAAA;;;;;;;;AAQtD,wCAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;UAEzD,GAAG,CAAA;KACR,CAAC;KACH;;AArEM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAS,CAApC,CAAsC;AAInD,UAAA,CAAA;IADC,kBAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGzB,UAAA,CAAA;IADC,kBAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGmB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA6C,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG5C,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkD,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-card.js","sources":["../../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { html, literal } from \"lit/static-html.js\";\nimport { property, query, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport SgdsLink from \"../Link/sgds-link\";\nimport cardStyle from \"./card.css\";\n\nexport type CardImageAdjustment = \"default\" | \"padding around\" | \"aspect ratio\";\nexport type CardImagePosition = \"before\" | \"after\";\nexport type CardOrientation = \"vertical\" | \"horizontal\";\n\n/**\n * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  /** @internal */\n  @query(\"a.card\") card: HTMLAnchorElement;\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"image\", flatten: true })\n  _imageNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"icon\", flatten: true })\n  _iconNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"link\", flatten: true })\n  _linkNode!: Array<Node>;\n\n  /** Extends the link passed in slot[name=\"link\"] to the entire card */\n  @property({ type: Boolean, reflect: true }) stretchedLink = false;\n\n  /** Disables the card  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */\n  @property({ type: String, reflect: true }) orientation: CardOrientation = \"vertical\";\n\n  /** Sets the image position of the card. Available options: `before`, `after` */\n  @property({ type: String, reflect: true }) imagePosition: CardImagePosition = \"before\";\n\n  /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */\n  @property({ type: String, reflect: true }) imageAdjustment: CardImageAdjustment = \"default\";\n\n  protected firstUpdated() {\n    if (this._imageNode.length === 0) {\n      const icon = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n      icon.style.display = \"none\";\n    }\n    if (this._iconNode.length === 0) {\n      const icon = this.shadowRoot.querySelector(\".card-icon\") as HTMLDivElement;\n      icon.style.display = \"none\";\n    }\n    if (this.disabled && this._linkNode.length > 0) {\n      const hyperlink = (this._linkNode[0] as HTMLLinkElement).querySelector(\"a\");\n      hyperlink.setAttribute(\"disabled\", \"true\");\n      hyperlink.removeAttribute(\"href\");\n    }\n  }\n\n  handleTitleSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLElement>;\n\n    if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {\n      const hyperlink = childNodes[0].querySelector(\"a\") || childNodes[0];\n      hyperlink.removeAttribute(\"href\");\n    }\n    return;\n  }\n\n  handleLinkSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as\n      | Array<HTMLLinkElement>\n      | Array<HTMLAnchorElement>\n      | Array<SgdsLink>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's link slot\");\n    }\n\n    if (!this.stretchedLink) return;\n\n    if (childNodes[0] instanceof HTMLAnchorElement || childNodes[0] instanceof SgdsLink) {\n      const hyperlink = (childNodes[0].querySelector(\"a\") || childNodes[0]) as HTMLAnchorElement;\n      this.card.setAttribute(\"href\", hyperlink.href);\n      const linkSlot = this.shadowRoot.querySelector(\"slot[name='link']\") as HTMLSlotElement;\n      linkSlot.style.display = \"none\";\n    }\n  }\n\n  handleImgSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        <div class=\"card-image\">\n          <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n        </div>\n        <div class=\"card-icon\">\n          <slot name=\"icon\"></slot>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"card-header\">\n            <slot name=\"subtitle\"></slot>\n            <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n          </div>\n          <p class=\"card-text\">\n            <slot name=\"description\"></slot>\n          </p>\n          <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["cardStyle"],"mappings":"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"}

package/react/components/Dropdown/dropdown.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.dropdown{display:flex;height:inherit;position:relative}`;
+var css_248z = lit.css`:host{position:relative}.dropdown{display:flex;height:inherit}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=dropdown.cjs.js.map

package/react/components/Dropdown/dropdown.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.dropdown{display:flex;height:inherit;position:relative}`;
+var css_248z = css`:host{position:relative}.dropdown{display:flex;height:inherit}`;
 
 export { css_248z as default };
 //# sourceMappingURL=dropdown.js.map

package/react/components/Footer/sgds-footer.cjs.js

@@ -7,7 +7,6 @@ var tslib = require('tslib');
 var lit = require('lit');
 var decorators_js = require('lit/decorators.js');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
-var slot = require('../../utils/slot.cjs.js');
 var footer = require('./footer.cjs.js');
 
 /**
@@ -46,45 +45,51 @@ class SgdsFooter extends sgdsElement["default"] {
          * 	href link for terms of use
          */
         this.termsOfUseHref = "#";
-        this.hasSlotController = new slot.HasSlotController(this, "social-media", "title", "description", "items");
+    }
+    firstUpdated() {
+        const socialMediaSlot = this.shadowRoot.querySelector("slot[name='social-media']");
+        const footerTitleSlot = this.shadowRoot.querySelector("slot[name='title']");
+        const footerDescriptionSlot = this.shadowRoot.querySelector("slot[name='description']");
+        const footerItemsSlot = this.shadowRoot.querySelector("slot[name='items']");
+        const socialMediaChildNodes = socialMediaSlot.assignedNodes({ flatten: true });
+        const footerTitleChildNodes = footerTitleSlot.assignedNodes({ flatten: true });
+        const footerDescriptionChildNodes = footerDescriptionSlot.assignedNodes({ flatten: true });
+        const footerItemsChildNodes = footerItemsSlot.assignedNodes({ flatten: true });
+        if (socialMediaChildNodes.length === 0) {
+            const socialMediaContainer = this.shadowRoot.querySelector(".social-media");
+            socialMediaContainer.style.display = "none";
+        }
+        if (footerTitleChildNodes.length === 0 && footerDescriptionChildNodes.length === 0) {
+            const footerHeaderContainer = this.shadowRoot.querySelector(".footer-header");
+            footerHeaderContainer.style.display = "none";
+        }
+        if (footerItemsChildNodes.length === 0) {
+            const footerItemsContainer = this.shadowRoot.querySelector(".footer-items");
+            footerItemsContainer.style.display = "none";
+        }
+        if (footerTitleChildNodes.length === 0 &&
+            footerDescriptionChildNodes.length === 0 &&
+            footerItemsChildNodes.length === 0) {
+            const footerTopContainer = this.shadowRoot.querySelector(".footer-top");
+            footerTopContainer.style.display = "none";
+        }
     }
     render() {
-        const hasSocialMediaSlot = this.hasSlotController.test("social-media");
-        const hasTitleSlot = this.hasSlotController.test("title");
-        const hasDescriptionSlot = this.hasSlotController.test("description");
-        const hasItemsSlot = this.hasSlotController.test("items");
-        const displayFooterHeader = hasTitleSlot || hasDescriptionSlot;
-        const displayFooterItems = hasItemsSlot;
-        const displaySocialMedia = hasSocialMediaSlot;
-        const displayFooterTop = displayFooterHeader || displayFooterItems;
         return lit.html `
       <footer class="footer">
-        ${displayFooterTop
-            ? lit.html ` <section class="footer-top">
-              ${displayFooterHeader
-                ? lit.html `
-                    <div class="footer-header">
-                      <slot name="title"></slot>
-                      <slot name="description"></slot>
-                    </div>
-                  `
-                : lit.nothing}
-              ${displayFooterItems
-                ? lit.html ` <div class="footer-items">
-                    <slot name="items"></slot>
-                  </div>`
-                : lit.nothing}
-            </section>`
-            : lit.nothing}
-
+        <section class="footer-top">
+          <div class="footer-header">
+            <slot name="title"></slot>
+            <slot name="description"></slot>
+          </div>
+          <div class="footer-items">
+            <slot name="items"></slot>
+          </div>
+        </section>
         <section class="footer-bottom">
-          ${displaySocialMedia
-            ? lit.html `
-                <div class="social-media">
-                  <slot name="social-media"></slot>
-                </div>
-              `
-            : lit.nothing}
+          <div class="social-media">
+            <slot name="social-media"></slot>
+          </div>
           <div class="footer-mandatory-links">
             <ul>
               <li><a href=${this.contactHref}>Contact</a></li>

package/react/components/Footer/sgds-footer.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-footer.cjs.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport footerStyle from \"./footer.css\";\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @slot title - The slot for title\n * @slot description - The slot for description\n * @slot items - The slot for the list of footer items\n * @slot social-media - The slot for the list of social media with icons\n *\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for faq\n   */\n  @property({ type: String })\n  faqHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  private readonly hasSlotController = new HasSlotController(this, \"social-media\", \"title\", \"description\", \"items\");\n\n  render() {\n    const hasSocialMediaSlot = this.hasSlotController.test(\"social-media\");\n    const hasTitleSlot = this.hasSlotController.test(\"title\");\n    const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n    const hasItemsSlot = this.hasSlotController.test(\"items\");\n\n    const displayFooterHeader = hasTitleSlot || hasDescriptionSlot;\n    const displayFooterItems = hasItemsSlot;\n    const displaySocialMedia = hasSocialMediaSlot;\n    const displayFooterTop = displayFooterHeader || displayFooterItems;\n\n    return html`\n      <footer class=\"footer\">\n        ${displayFooterTop\n          ? html` <section class=\"footer-top\">\n              ${displayFooterHeader\n                ? html`\n                    <div class=\"footer-header\">\n                      <slot name=\"title\"></slot>\n                      <slot name=\"description\"></slot>\n                    </div>\n                  `\n                : nothing}\n              ${displayFooterItems\n                ? html` <div class=\"footer-items\">\n                    <slot name=\"items\"></slot>\n                  </div>`\n                : nothing}\n            </section>`\n          : nothing}\n\n        <section class=\"footer-bottom\">\n          ${displaySocialMedia\n            ? html`\n                <div class=\"social-media\">\n                  <slot name=\"social-media\"></slot>\n                </div>\n              `\n            : nothing}\n          <div class=\"footer-mandatory-links\">\n            <ul>\n              <li><a href=${this.contactHref}>Contact</a></li>\n              <li><a href=${this.feedbackHref}>Feedback</a></li>\n              <li><a href=${this.faqHref}>FAQ</a></li>\n              <li>\n                <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\">\n                  Report Vulnerability\n                </a>\n              </li>\n              <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n              <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n            </ul>\n            <div class=\"footer-copyrights\">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["SgdsElement","HasSlotController","html","nothing","footerStyle","__decorate","property"],"mappings":"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"}
+{"version":3,"file":"sgds-footer.cjs.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport footerStyle from \"./footer.css\";\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @slot title - The slot for title\n * @slot description - The slot for description\n * @slot items - The slot for the list of footer items\n * @slot social-media - The slot for the list of social media with icons\n *\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for faq\n   */\n  @property({ type: String })\n  faqHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  firstUpdated() {\n    const socialMediaSlot = this.shadowRoot.querySelector(\"slot[name='social-media']\") as HTMLSlotElement;\n    const footerTitleSlot = this.shadowRoot.querySelector(\"slot[name='title']\") as HTMLSlotElement;\n    const footerDescriptionSlot = this.shadowRoot.querySelector(\"slot[name='description']\") as HTMLSlotElement;\n    const footerItemsSlot = this.shadowRoot.querySelector(\"slot[name='items']\") as HTMLSlotElement;\n    const socialMediaChildNodes = socialMediaSlot.assignedNodes({ flatten: true });\n    const footerTitleChildNodes = footerTitleSlot.assignedNodes({ flatten: true });\n    const footerDescriptionChildNodes = footerDescriptionSlot.assignedNodes({ flatten: true });\n    const footerItemsChildNodes = footerItemsSlot.assignedNodes({ flatten: true });\n    if (socialMediaChildNodes.length === 0) {\n      const socialMediaContainer = this.shadowRoot.querySelector(\".social-media\") as HTMLDivElement;\n      socialMediaContainer.style.display = \"none\";\n    }\n\n    if (footerTitleChildNodes.length === 0 && footerDescriptionChildNodes.length === 0) {\n      const footerHeaderContainer = this.shadowRoot.querySelector(\".footer-header\") as HTMLDivElement;\n      footerHeaderContainer.style.display = \"none\";\n    }\n\n    if (footerItemsChildNodes.length === 0) {\n      const footerItemsContainer = this.shadowRoot.querySelector(\".footer-items\") as HTMLDivElement;\n      footerItemsContainer.style.display = \"none\";\n    }\n\n    if (\n      footerTitleChildNodes.length === 0 &&\n      footerDescriptionChildNodes.length === 0 &&\n      footerItemsChildNodes.length === 0\n    ) {\n      const footerTopContainer = this.shadowRoot.querySelector(\".footer-top\") as HTMLDivElement;\n      footerTopContainer.style.display = \"none\";\n    }\n  }\n\n  render() {\n    return html`\n      <footer class=\"footer\">\n        <section class=\"footer-top\">\n          <div class=\"footer-header\">\n            <slot name=\"title\"></slot>\n            <slot name=\"description\"></slot>\n          </div>\n          <div class=\"footer-items\">\n            <slot name=\"items\"></slot>\n          </div>\n        </section>\n        <section class=\"footer-bottom\">\n          <div class=\"social-media\">\n            <slot name=\"social-media\"></slot>\n          </div>\n          <div class=\"footer-mandatory-links\">\n            <ul>\n              <li><a href=${this.contactHref}>Contact</a></li>\n              <li><a href=${this.feedbackHref}>Feedback</a></li>\n              <li><a href=${this.faqHref}>FAQ</a></li>\n              <li>\n                <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\">\n                  Report Vulnerability\n                </a>\n              </li>\n              <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n              <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n            </ul>\n            <div class=\"footer-copyrights\">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["SgdsElement","html","footerStyle","__decorate","property"],"mappings":";;;;;;;;;;;AAKA;;;;;;;;AAQG;AACG,MAAO,UAAW,SAAQA,sBAAW,CAAA;AAA3C,IAAA,WAAA,GAAA;;AAGE;;AAEG;QAEH,IAAc,CAAA,cAAA,GAAG,yBAAyB,CAAC;AAE3C;;AAEG;QAEH,IAAW,CAAA,WAAA,GAAG,GAAG,CAAC;AAElB;;AAEG;QAEH,IAAY,CAAA,YAAA,GAAG,GAAG,CAAC;AAEnB;;AAEG;QAEH,IAAO,CAAA,OAAA,GAAG,GAAG,CAAC;AAEd;;AAEG;QAEH,IAAW,CAAA,WAAA,GAAG,GAAG,CAAC;AAElB;;AAEG;QAEH,IAAc,CAAA,cAAA,GAAG,GAAG,CAAC;KAuEtB;IArEC,YAAY,GAAA;QACV,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,2BAA2B,CAAoB,CAAC;QACtG,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAoB,CAAC;QAC/F,MAAM,qBAAqB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,0BAA0B,CAAoB,CAAC;QAC3G,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAoB,CAAC;AAC/F,QAAA,MAAM,qBAAqB,GAAG,eAAe,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAC/E,QAAA,MAAM,qBAAqB,GAAG,eAAe,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAC/E,QAAA,MAAM,2BAA2B,GAAG,qBAAqB,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAC3F,QAAA,MAAM,qBAAqB,GAAG,eAAe,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAC/E,QAAA,IAAI,qBAAqB,CAAC,MAAM,KAAK,CAAC,EAAE;YACtC,MAAM,oBAAoB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAmB,CAAC;AAC9F,YAAA,oBAAoB,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;SAC7C;AAED,QAAA,IAAI,qBAAqB,CAAC,MAAM,KAAK,CAAC,IAAI,2BAA2B,CAAC,MAAM,KAAK,CAAC,EAAE;YAClF,MAAM,qBAAqB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAmB,CAAC;AAChG,YAAA,qBAAqB,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;SAC9C;AAED,QAAA,IAAI,qBAAqB,CAAC,MAAM,KAAK,CAAC,EAAE;YACtC,MAAM,oBAAoB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAmB,CAAC;AAC9F,YAAA,oBAAoB,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;SAC7C;AAED,QAAA,IACE,qBAAqB,CAAC,MAAM,KAAK,CAAC;YAClC,2BAA2B,CAAC,MAAM,KAAK,CAAC;AACxC,YAAA,qBAAqB,CAAC,MAAM,KAAK,CAAC,EAClC;YACA,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;AAC1F,YAAA,kBAAkB,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;SAC3C;KACF;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;;;;;;;;;;;;;;;;AAiBa,0BAAA,EAAA,IAAI,CAAC,WAAW,CAAA;AAChB,0BAAA,EAAA,IAAI,CAAC,YAAY,CAAA;AACjB,0BAAA,EAAA,IAAI,CAAC,OAAO,CAAA;;;;;;AAMZ,0BAAA,EAAA,IAAI,CAAC,WAAW,CAAA;AAChB,0BAAA,EAAA,IAAI,CAAC,cAAc,CAAA;;+CAEA,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAK,EAAA,EAAA,IAAI,CAAC,cAAc,CAAA;;;;KAI1F,CAAC;KACH;;AA1GM,UAAM,CAAA,MAAA,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,iBAAW,CAAtC,CAAwC;AAMrDC,gBAAA,CAAA;AADC,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACgB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAM3CD,gBAAA,CAAA;AADC,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACT,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMlBD,gBAAA,CAAA;AADC,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACR,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMnBD,gBAAA,CAAA;AADC,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACb,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMdD,gBAAA,CAAA;AADC,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACT,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMlBD,gBAAA,CAAA;AADC,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACN,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Footer/sgds-footer.js

@@ -1,9 +1,8 @@
 'use client';
 import { __decorate } from 'tslib';
-import { html, nothing } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import SgdsElement from '../../base/sgds-element.js';
-import { HasSlotController } from '../../utils/slot.js';
 import css_248z from './footer.js';
 
 /**
@@ -42,45 +41,51 @@ class SgdsFooter extends SgdsElement {
          * 	href link for terms of use
          */
         this.termsOfUseHref = "#";
-        this.hasSlotController = new HasSlotController(this, "social-media", "title", "description", "items");
+    }
+    firstUpdated() {
+        const socialMediaSlot = this.shadowRoot.querySelector("slot[name='social-media']");
+        const footerTitleSlot = this.shadowRoot.querySelector("slot[name='title']");
+        const footerDescriptionSlot = this.shadowRoot.querySelector("slot[name='description']");
+        const footerItemsSlot = this.shadowRoot.querySelector("slot[name='items']");
+        const socialMediaChildNodes = socialMediaSlot.assignedNodes({ flatten: true });
+        const footerTitleChildNodes = footerTitleSlot.assignedNodes({ flatten: true });
+        const footerDescriptionChildNodes = footerDescriptionSlot.assignedNodes({ flatten: true });
+        const footerItemsChildNodes = footerItemsSlot.assignedNodes({ flatten: true });
+        if (socialMediaChildNodes.length === 0) {
+            const socialMediaContainer = this.shadowRoot.querySelector(".social-media");
+            socialMediaContainer.style.display = "none";
+        }
+        if (footerTitleChildNodes.length === 0 && footerDescriptionChildNodes.length === 0) {
+            const footerHeaderContainer = this.shadowRoot.querySelector(".footer-header");
+            footerHeaderContainer.style.display = "none";
+        }
+        if (footerItemsChildNodes.length === 0) {
+            const footerItemsContainer = this.shadowRoot.querySelector(".footer-items");
+            footerItemsContainer.style.display = "none";
+        }
+        if (footerTitleChildNodes.length === 0 &&
+            footerDescriptionChildNodes.length === 0 &&
+            footerItemsChildNodes.length === 0) {
+            const footerTopContainer = this.shadowRoot.querySelector(".footer-top");
+            footerTopContainer.style.display = "none";
+        }
     }
     render() {
-        const hasSocialMediaSlot = this.hasSlotController.test("social-media");
-        const hasTitleSlot = this.hasSlotController.test("title");
-        const hasDescriptionSlot = this.hasSlotController.test("description");
-        const hasItemsSlot = this.hasSlotController.test("items");
-        const displayFooterHeader = hasTitleSlot || hasDescriptionSlot;
-        const displayFooterItems = hasItemsSlot;
-        const displaySocialMedia = hasSocialMediaSlot;
-        const displayFooterTop = displayFooterHeader || displayFooterItems;
         return html `
       <footer class="footer">
-        ${displayFooterTop
-            ? html ` <section class="footer-top">
-              ${displayFooterHeader
-                ? html `
-                    <div class="footer-header">
-                      <slot name="title"></slot>
-                      <slot name="description"></slot>
-                    </div>
-                  `
-                : nothing}
-              ${displayFooterItems
-                ? html ` <div class="footer-items">
-                    <slot name="items"></slot>
-                  </div>`
-                : nothing}
-            </section>`
-            : nothing}
-
+        <section class="footer-top">
+          <div class="footer-header">
+            <slot name="title"></slot>
+            <slot name="description"></slot>
+          </div>
+          <div class="footer-items">
+            <slot name="items"></slot>
+          </div>
+        </section>
         <section class="footer-bottom">
-          ${displaySocialMedia
-            ? html `
-                <div class="social-media">
-                  <slot name="social-media"></slot>
-                </div>
-              `
-            : nothing}
+          <div class="social-media">
+            <slot name="social-media"></slot>
+          </div>
           <div class="footer-mandatory-links">
             <ul>
               <li><a href=${this.contactHref}>Contact</a></li>

package/react/components/Footer/sgds-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-footer.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport footerStyle from \"./footer.css\";\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @slot title - The slot for title\n * @slot description - The slot for description\n * @slot items - The slot for the list of footer items\n * @slot social-media - The slot for the list of social media with icons\n *\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for faq\n   */\n  @property({ type: String })\n  faqHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  private readonly hasSlotController = new HasSlotController(this, \"social-media\", \"title\", \"description\", \"items\");\n\n  render() {\n    const hasSocialMediaSlot = this.hasSlotController.test(\"social-media\");\n    const hasTitleSlot = this.hasSlotController.test(\"title\");\n    const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n    const hasItemsSlot = this.hasSlotController.test(\"items\");\n\n    const displayFooterHeader = hasTitleSlot || hasDescriptionSlot;\n    const displayFooterItems = hasItemsSlot;\n    const displaySocialMedia = hasSocialMediaSlot;\n    const displayFooterTop = displayFooterHeader || displayFooterItems;\n\n    return html`\n      <footer class=\"footer\">\n        ${displayFooterTop\n          ? html` <section class=\"footer-top\">\n              ${displayFooterHeader\n                ? html`\n                    <div class=\"footer-header\">\n                      <slot name=\"title\"></slot>\n                      <slot name=\"description\"></slot>\n                    </div>\n                  `\n                : nothing}\n              ${displayFooterItems\n                ? html` <div class=\"footer-items\">\n                    <slot name=\"items\"></slot>\n                  </div>`\n                : nothing}\n            </section>`\n          : nothing}\n\n        <section class=\"footer-bottom\">\n          ${displaySocialMedia\n            ? html`\n                <div class=\"social-media\">\n                  <slot name=\"social-media\"></slot>\n                </div>\n              `\n            : nothing}\n          <div class=\"footer-mandatory-links\">\n            <ul>\n              <li><a href=${this.contactHref}>Contact</a></li>\n              <li><a href=${this.feedbackHref}>Feedback</a></li>\n              <li><a href=${this.faqHref}>FAQ</a></li>\n              <li>\n                <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\">\n                  Report Vulnerability\n                </a>\n              </li>\n              <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n              <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n            </ul>\n            <div class=\"footer-copyrights\">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["footerStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-footer.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport footerStyle from \"./footer.css\";\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @slot title - The slot for title\n * @slot description - The slot for description\n * @slot items - The slot for the list of footer items\n * @slot social-media - The slot for the list of social media with icons\n *\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for faq\n   */\n  @property({ type: String })\n  faqHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  firstUpdated() {\n    const socialMediaSlot = this.shadowRoot.querySelector(\"slot[name='social-media']\") as HTMLSlotElement;\n    const footerTitleSlot = this.shadowRoot.querySelector(\"slot[name='title']\") as HTMLSlotElement;\n    const footerDescriptionSlot = this.shadowRoot.querySelector(\"slot[name='description']\") as HTMLSlotElement;\n    const footerItemsSlot = this.shadowRoot.querySelector(\"slot[name='items']\") as HTMLSlotElement;\n    const socialMediaChildNodes = socialMediaSlot.assignedNodes({ flatten: true });\n    const footerTitleChildNodes = footerTitleSlot.assignedNodes({ flatten: true });\n    const footerDescriptionChildNodes = footerDescriptionSlot.assignedNodes({ flatten: true });\n    const footerItemsChildNodes = footerItemsSlot.assignedNodes({ flatten: true });\n    if (socialMediaChildNodes.length === 0) {\n      const socialMediaContainer = this.shadowRoot.querySelector(\".social-media\") as HTMLDivElement;\n      socialMediaContainer.style.display = \"none\";\n    }\n\n    if (footerTitleChildNodes.length === 0 && footerDescriptionChildNodes.length === 0) {\n      const footerHeaderContainer = this.shadowRoot.querySelector(\".footer-header\") as HTMLDivElement;\n      footerHeaderContainer.style.display = \"none\";\n    }\n\n    if (footerItemsChildNodes.length === 0) {\n      const footerItemsContainer = this.shadowRoot.querySelector(\".footer-items\") as HTMLDivElement;\n      footerItemsContainer.style.display = \"none\";\n    }\n\n    if (\n      footerTitleChildNodes.length === 0 &&\n      footerDescriptionChildNodes.length === 0 &&\n      footerItemsChildNodes.length === 0\n    ) {\n      const footerTopContainer = this.shadowRoot.querySelector(\".footer-top\") as HTMLDivElement;\n      footerTopContainer.style.display = \"none\";\n    }\n  }\n\n  render() {\n    return html`\n      <footer class=\"footer\">\n        <section class=\"footer-top\">\n          <div class=\"footer-header\">\n            <slot name=\"title\"></slot>\n            <slot name=\"description\"></slot>\n          </div>\n          <div class=\"footer-items\">\n            <slot name=\"items\"></slot>\n          </div>\n        </section>\n        <section class=\"footer-bottom\">\n          <div class=\"social-media\">\n            <slot name=\"social-media\"></slot>\n          </div>\n          <div class=\"footer-mandatory-links\">\n            <ul>\n              <li><a href=${this.contactHref}>Contact</a></li>\n              <li><a href=${this.feedbackHref}>Feedback</a></li>\n              <li><a href=${this.faqHref}>FAQ</a></li>\n              <li>\n                <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\">\n                  Report Vulnerability\n                </a>\n              </li>\n              <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n              <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n            </ul>\n            <div class=\"footer-copyrights\">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["footerStyle"],"mappings":"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"}

package/react/components/Link/link.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.nav-link::slotted(a){align-items:center;color:var(--sgds-link-color-default);cursor:pointer;display:inline-flex;flex-shrink:0;gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-24);justify-content:center;text-decoration:none!important}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),.nav-link::slotted(a[active]){color:var( --sgds-link-color-emphasis)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus);outline:0}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-danger-color-emphasis);color:var(--sgds-link-color-emphasis,--sgds-danger-color-emphasis)}:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-dark)}:host([size=lg]) .nav-link::slotted(a){font-size:var(--sgds-font-size-3)!important;height:var(--sgds-dimension-32)}:host([size=sm]) .nav-link::slotted(a){font-size:var(--sgds-font-size-1)!important;height:var(--sgds-dimension-20)}`;
+var css_248z = lit.css`.nav-link::slotted(a){align-items:center;color:var(--sgds-link-color-default);cursor:pointer;display:inline-flex;flex-shrink:0;gap:var(--sgds-gap-2-xs);justify-content:center;line-height:var(--sgds-line-height-body);text-decoration:none!important}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),.nav-link::slotted(a[active]){color:var( --sgds-link-color-emphasis)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible){outline:0}.nav-link::slotted(a:focus-visible:not([disabled])),.nav-link::slotted(a:focus:not([disabled])){box-shadow:var(--sgds-box-shadow-focus)}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-danger-color-emphasis);color:var(--sgds-link-color-emphasis,--sgds-danger-color-emphasis)}:host([variant=neutral]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,--sgds-color-default)}:host([variant=neutral]) .nav-link::slotted(a:focus),:host([variant=neutral]) .nav-link::slotted(a:focus-visible),:host([variant=neutral]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,--sgds-color-default)}:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-dark)}:host([size=lg]) .nav-link::slotted(a){font-size:var(--sgds-font-size-3)!important}:host([size=sm]) .nav-link::slotted(a){font-size:var(--sgds-font-size-1)!important;line-height:var(--sgds-line-height-min)}:host([size=xs]) .nav-link::slotted(a){font-size:var(--sgds-font-size-0)!important;line-height:var(--sgds-line-height-16)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=link.cjs.js.map

package/react/components/Link/link.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.nav-link::slotted(a){align-items:center;color:var(--sgds-link-color-default);cursor:pointer;display:inline-flex;flex-shrink:0;gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-24);justify-content:center;text-decoration:none!important}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),.nav-link::slotted(a[active]){color:var( --sgds-link-color-emphasis)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus);outline:0}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-danger-color-emphasis);color:var(--sgds-link-color-emphasis,--sgds-danger-color-emphasis)}:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-dark)}:host([size=lg]) .nav-link::slotted(a){font-size:var(--sgds-font-size-3)!important;height:var(--sgds-dimension-32)}:host([size=sm]) .nav-link::slotted(a){font-size:var(--sgds-font-size-1)!important;height:var(--sgds-dimension-20)}`;
+var css_248z = css`.nav-link::slotted(a){align-items:center;color:var(--sgds-link-color-default);cursor:pointer;display:inline-flex;flex-shrink:0;gap:var(--sgds-gap-2-xs);justify-content:center;line-height:var(--sgds-line-height-body);text-decoration:none!important}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),.nav-link::slotted(a[active]){color:var( --sgds-link-color-emphasis)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible){outline:0}.nav-link::slotted(a:focus-visible:not([disabled])),.nav-link::slotted(a:focus:not([disabled])){box-shadow:var(--sgds-box-shadow-focus)}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-danger-color-emphasis);color:var(--sgds-link-color-emphasis,--sgds-danger-color-emphasis)}:host([variant=neutral]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,--sgds-color-default)}:host([variant=neutral]) .nav-link::slotted(a:focus),:host([variant=neutral]) .nav-link::slotted(a:focus-visible),:host([variant=neutral]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,--sgds-color-default)}:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-dark)}:host([size=lg]) .nav-link::slotted(a){font-size:var(--sgds-font-size-3)!important}:host([size=sm]) .nav-link::slotted(a){font-size:var(--sgds-font-size-1)!important;line-height:var(--sgds-line-height-min)}:host([size=xs]) .nav-link::slotted(a){font-size:var(--sgds-font-size-0)!important;line-height:var(--sgds-line-height-16)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=link.js.map

package/react/components/Link/sgds-link.cjs.js

@@ -22,7 +22,7 @@ class SgdsLink extends sgdsElement["default"] {
         /** when true, sets the active stylings of the link */
         this.variant = "primary";
     }
-    _handleSlotChange(e) {
+    _handleSlotChange() {
         const anchor = this.querySelector("a");
         if (anchor) {
             if (anchor.hasAttribute("disabled")) {

package/react/components/Link/sgds-link.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-link.cjs.js","sources":["../../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\n/**\n * @summary Link allows users to click and navigate their way from page to page\n *\n * @slot default - Pass in a single anchor tag here\n */\nexport class SgdsLink extends SgdsElement {\n  static styles = [...SgdsElement.styles, linkStyles];\n  /** Determines the size of the link */\n  @property({ type: String, reflect: true })\n  size: \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** when true, sets the active stylings of the link */\n  @property({ type: String, reflect: true })\n  variant: \"primary\" | \"danger\" | \"light\" | \"dark\" = \"primary\";\n\n  private _handleSlotChange(e: Event) {\n    const anchor = this.querySelector(\"a\");\n    if (anchor) {\n      if (anchor.hasAttribute(\"disabled\")) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n      } else {\n        anchor.setAttribute(\"tabindex\", \"0\");\n      }\n    }\n  }\n\n  render() {\n    /** When removing href, link is no longer focusable */\n    return html`<slot class=\"nav-link\" @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsLink;\n"],"names":["SgdsElement","html","linkStyles","__decorate","property"],"mappings":";;;;;;;;;;;AAIA;;;;AAIG;AACG,MAAO,QAAS,SAAQA,sBAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAIE,IAAI,CAAA,IAAA,GAAuB,IAAI,CAAC;;QAGhC,IAAO,CAAA,OAAA,GAA4C,SAAS,CAAC;KAkB9D;AAhBS,IAAA,iBAAiB,CAAC,CAAQ,EAAA;QAChC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AACnC,gBAAA,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;AAClD,gBAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;aACvC;iBAAM;AACL,gBAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;aACtC;SACF;KACF;IAED,MAAM,GAAA;;AAEJ,QAAA,OAAOC,QAAI,CAAA,CAAA,mCAAA,EAAsC,IAAI,CAAC,iBAAiB,UAAU,CAAC;KACnF;;AAvBM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,eAAU,CAArC,CAAuC;AAGpDC,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACV,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhCD,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACmB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-link.cjs.js","sources":["../../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\n/**\n * @summary Link allows users to click and navigate their way from page to page\n *\n * @slot default - Pass in a single anchor tag here\n */\nexport class SgdsLink extends SgdsElement {\n  static styles = [...SgdsElement.styles, linkStyles];\n  /** Determines the size of the link */\n  @property({ type: String, reflect: true })\n  size: \"xs\" | \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** when true, sets the active stylings of the link */\n  @property({ type: String, reflect: true })\n  variant: \"primary\" | \"danger\" | \"neutral\" | \"light\" | \"dark\" = \"primary\";\n\n  private _handleSlotChange() {\n    const anchor = this.querySelector(\"a\");\n    if (anchor) {\n      if (anchor.hasAttribute(\"disabled\")) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n      } else {\n        anchor.setAttribute(\"tabindex\", \"0\");\n      }\n    }\n  }\n\n  render() {\n    /** When removing href, link is no longer focusable */\n    return html`<slot class=\"nav-link\" @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsLink;\n"],"names":["SgdsElement","html","linkStyles","__decorate","property"],"mappings":";;;;;;;;;;;AAIA;;;;AAIG;AACG,MAAO,QAAS,SAAQA,sBAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAIE,IAAI,CAAA,IAAA,GAA8B,IAAI,CAAC;;QAGvC,IAAO,CAAA,OAAA,GAAwD,SAAS,CAAC;KAkB1E;IAhBS,iBAAiB,GAAA;QACvB,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AACnC,gBAAA,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;AAClD,gBAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;aACvC;iBAAM;AACL,gBAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;aACtC;SACF;KACF;IAED,MAAM,GAAA;;AAEJ,QAAA,OAAOC,QAAI,CAAA,CAAA,mCAAA,EAAsC,IAAI,CAAC,iBAAiB,UAAU,CAAC;KACnF;;AAvBM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,eAAU,CAArC,CAAuC;AAGpDC,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACH,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGvCD,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC+B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Link/sgds-link.js

@@ -18,7 +18,7 @@ class SgdsLink extends SgdsElement {
         /** when true, sets the active stylings of the link */
         this.variant = "primary";
     }
-    _handleSlotChange(e) {
+    _handleSlotChange() {
         const anchor = this.querySelector("a");
         if (anchor) {
             if (anchor.hasAttribute("disabled")) {

package/react/components/Link/sgds-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-link.js","sources":["../../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\n/**\n * @summary Link allows users to click and navigate their way from page to page\n *\n * @slot default - Pass in a single anchor tag here\n */\nexport class SgdsLink extends SgdsElement {\n  static styles = [...SgdsElement.styles, linkStyles];\n  /** Determines the size of the link */\n  @property({ type: String, reflect: true })\n  size: \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** when true, sets the active stylings of the link */\n  @property({ type: String, reflect: true })\n  variant: \"primary\" | \"danger\" | \"light\" | \"dark\" = \"primary\";\n\n  private _handleSlotChange(e: Event) {\n    const anchor = this.querySelector(\"a\");\n    if (anchor) {\n      if (anchor.hasAttribute(\"disabled\")) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n      } else {\n        anchor.setAttribute(\"tabindex\", \"0\");\n      }\n    }\n  }\n\n  render() {\n    /** When removing href, link is no longer focusable */\n    return html`<slot class=\"nav-link\" @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsLink;\n"],"names":["linkStyles"],"mappings":";;;;;;;AAIA;;;;AAIG;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAIE,IAAI,CAAA,IAAA,GAAuB,IAAI,CAAC;;QAGhC,IAAO,CAAA,OAAA,GAA4C,SAAS,CAAC;KAkB9D;AAhBS,IAAA,iBAAiB,CAAC,CAAQ,EAAA;QAChC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AACnC,gBAAA,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;AAClD,gBAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;aACvC;iBAAM;AACL,gBAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;aACtC;SACF;KACF;IAED,MAAM,GAAA;;AAEJ,QAAA,OAAO,IAAI,CAAA,CAAA,mCAAA,EAAsC,IAAI,CAAC,iBAAiB,UAAU,CAAC;KACnF;;AAvBM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAGpD,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACV,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhC,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACmB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-link.js","sources":["../../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\n/**\n * @summary Link allows users to click and navigate their way from page to page\n *\n * @slot default - Pass in a single anchor tag here\n */\nexport class SgdsLink extends SgdsElement {\n  static styles = [...SgdsElement.styles, linkStyles];\n  /** Determines the size of the link */\n  @property({ type: String, reflect: true })\n  size: \"xs\" | \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** when true, sets the active stylings of the link */\n  @property({ type: String, reflect: true })\n  variant: \"primary\" | \"danger\" | \"neutral\" | \"light\" | \"dark\" = \"primary\";\n\n  private _handleSlotChange() {\n    const anchor = this.querySelector(\"a\");\n    if (anchor) {\n      if (anchor.hasAttribute(\"disabled\")) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n      } else {\n        anchor.setAttribute(\"tabindex\", \"0\");\n      }\n    }\n  }\n\n  render() {\n    /** When removing href, link is no longer focusable */\n    return html`<slot class=\"nav-link\" @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsLink;\n"],"names":["linkStyles"],"mappings":";;;;;;;AAIA;;;;AAIG;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAIE,IAAI,CAAA,IAAA,GAA8B,IAAI,CAAC;;QAGvC,IAAO,CAAA,OAAA,GAAwD,SAAS,CAAC;KAkB1E;IAhBS,iBAAiB,GAAA;QACvB,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AACnC,gBAAA,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;AAClD,gBAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;aACvC;iBAAM;AACL,gBAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;aACtC;SACF;KACF;IAED,MAAM,GAAA;;AAEJ,QAAA,OAAO,IAAI,CAAA,CAAA,mCAAA,EAAsC,IAAI,CAAC,iBAAiB,UAAU,CAAC;KACnF;;AAvBM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAGpD,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACH,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGvC,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC+B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/components/Mainnav/mainnav-item.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=sm]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=md]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=lg]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=xl]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=xxl]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;height:auto!important;padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none!important;text-decoration:none}@media screen and (max-width:767px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus),::slotted(a:focus-visible){outline:0}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;
+var css_248z = lit.css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=sm]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=md]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=lg]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=xl]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}:host([expand=xxl]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;height:auto!important;min-height:100%;padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none!important;text-decoration:none}@media screen and (max-width:767px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus),::slotted(a:focus-visible){outline:0}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=mainnav-item.cjs.js.map