@govtechsg/sgds-web-component 3.3.2 → 3.3.3-rc.0

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

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-color-fixed-light);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-fixed-light);text-decoration:none!important;width:fit-content}.links slot::slotted(a[target=_blank]){align-items:center;display:flex;gap:var(--sgds-gap-2-xs);justify-content:center}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible),slot::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible){outline:0}.links slot::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
+var css_248z = css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-color-fixed-light);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-fixed-light);text-decoration:none!important;width:fit-content}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible),slot::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible){outline:0}.links slot::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=footer-item.js.map

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

@@ -7,6 +7,7 @@ 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');
 
 /**
@@ -45,60 +46,54 @@ class SgdsFooter extends sgdsElement["default"] {
          * 	href link for terms of use
          */
         this.termsOfUseHref = "#";
-    }
-    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";
-        }
+        this.hasSlotController = new slot.HasSlotController(this, "social-media", "title", "description", "items");
     }
     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">
-        <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>
+        ${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-bottom">
-          <div class="social-media">
-            <slot name="social-media"></slot>
-          </div>
+          ${displaySocialMedia
+            ? lit.html `
+                <div class="social-media">
+                  <slot name="social-media"></slot>
+                </div>
+              `
+            : lit.nothing}
           <div class="footer-mandatory-links">
             <ul>
               <li><a href=${this.contactHref}>Contact</a></li>
               <li><a href=${this.feedbackHref}>Feedback</a></li>
               <li><a href=${this.faqHref}>FAQ</a></li>
               <li>
-                <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer">
-                  Report Vulnerability
-                </a>
+                <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer"
+                  >Report Vulnerability</a
+                >
               </li>
               <li><a href=${this.privacyHref}>Privacy Statement</a></li>
               <li><a href=${this.termsOfUseHref}>Terms of use</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 } 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":"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"}
+{"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</a\n                >\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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"}

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

@@ -1,8 +1,9 @@
 'use client';
 import { __decorate } from 'tslib';
-import { html } from 'lit';
+import { html, nothing } 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';
 
 /**
@@ -41,60 +42,54 @@ class SgdsFooter extends SgdsElement {
          * 	href link for terms of use
          */
         this.termsOfUseHref = "#";
-    }
-    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";
-        }
+        this.hasSlotController = new HasSlotController(this, "social-media", "title", "description", "items");
     }
     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">
-        <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>
+        ${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-bottom">
-          <div class="social-media">
-            <slot name="social-media"></slot>
-          </div>
+          ${displaySocialMedia
+            ? html `
+                <div class="social-media">
+                  <slot name="social-media"></slot>
+                </div>
+              `
+            : nothing}
           <div class="footer-mandatory-links">
             <ul>
               <li><a href=${this.contactHref}>Contact</a></li>
               <li><a href=${this.feedbackHref}>Feedback</a></li>
               <li><a href=${this.faqHref}>FAQ</a></li>
               <li>
-                <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer">
-                  Report Vulnerability
-                </a>
+                <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer"
+                  >Report Vulnerability</a
+                >
               </li>
               <li><a href=${this.privacyHref}>Privacy Statement</a></li>
               <li><a href=${this.termsOfUseHref}>Terms of use</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 } 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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"}
+{"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</a\n                >\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/Icon/icon.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{color:inherit;display:inline-flex}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
+var css_248z = lit.css`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=icon.cjs.js.map

package/react/components/Icon/icon.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{color:inherit;display:inline-flex}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
+var css_248z = css`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=icon.js.map

package/react/components/IconCard/sgds-icon-card.cjs.js

@@ -9,6 +9,7 @@ var staticHtml_js = require('lit/static-html.js');
 var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
 var cardElement = require('../../base/card-element.cjs.js');
+var slot = require('../../utils/slot.cjs.js');
 var iconCard = require('./icon-card.cjs.js');
 
 /**
@@ -27,6 +28,7 @@ class SgdsIconCard extends cardElement.CardElement {
         super(...arguments);
         /** Removes the card's internal padding when set to true.  */
         this.noPadding = false;
+        this.hasSlotController = new slot.HasSlotController(this, "description");
     }
     firstUpdated() {
         if (this._iconNode.length === 0) {
@@ -42,6 +44,7 @@ class SgdsIconCard extends cardElement.CardElement {
     render() {
         const tag = this.stretchedLink ? staticHtml_js.literal `a` : staticHtml_js.literal `div`;
         const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
+        const hasDescriptionSlot = this.hasSlotController.test("description");
         return staticHtml_js.html `
       <${tag} 
         class="card ${classMap_js.classMap({
@@ -63,9 +66,11 @@ class SgdsIconCard extends cardElement.CardElement {
             </div>
             <slot></slot>
           </div>
-          <p class="card-text">
-            <slot name="description"></slot>
-          </p>
+          ${hasDescriptionSlot
+            ? staticHtml_js.html `<p class="card-text">
+                  <slot name="description"></slot>
+                </p>`
+            : lit.nothing}
           <slot name="lower"></slot>
           <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
         </div>

package/react/components/IconCard/sgds-icon-card.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-icon-card.cjs.js","sources":["../../../../src/components/IconCard/sgds-icon-card.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { 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 IconCardStyle from \"./icon-card.css\";\n\n/**\n * @summary Icon 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 icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.\n * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.\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 SgdsIconCard extends CardElement {\n  static styles = [...CardElement.styles, IconCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"icon\", flatten: true })\n  _iconNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"upper\", flatten: true })\n  _upperNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\n\n  protected firstUpdated() {\n    if (this._iconNode.length === 0) {\n      if ((this.orientation === \"vertical\" && this._upperNode.length === 0) || this.orientation === \"horizontal\") {\n        const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n        media.style.display = \"none\";\n\n        const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n        if (this.noPadding) body.style.padding = \"0px\";\n      }\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        ${this.tinted && !this.noPadding ? html`<div class=\"card-tinted-bg\"></div>` : nothing}\n        <div class=\"card-media\">\n          <slot name=\"icon\"></slot>\n          ${this.orientation === \"vertical\" ? html`<slot name=\"upper\"></slot>` : nothing}\n        </div>\n        <div class=\"card-body\">\n          ${this.orientation === \"horizontal\" ? html`<slot name=\"upper\"></slot>` : nothing}\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 SgdsIconCard;\n"],"names":["CardElement","literal","html","classMap","nothing","IconCardStyle","__decorate","queryAssignedNodes","property"],"mappings":";;;;;;;;;;;;;AAOA;;;;;;;;;;AAUG;AACG,MAAO,YAAa,SAAQA,uBAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;;QAW8C,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;KAgD/D;IA9CW,YAAY,GAAA;QACpB,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;YAC/B,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,KAAK,IAAI,CAAC,WAAW,KAAK,YAAY,EAAE;gBAC1G,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;AAC7E,gBAAA,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBAE7B,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAmB,CAAC;gBAC3E,IAAI,IAAI,CAAC,SAAS;AAAE,oBAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;aAChD;SACF;KACF;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,GAAGC,qBAAO,CAAA,GAAG,GAAGA,qBAAO,CAAA,KAAK,CAAC;AAC3D,QAAA,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAEnE,QAAA,OAAOC,kBAAI,CAAA,CAAA;SACN,GAAG,CAAA;AACU,oBAAA,EAAAC,oBAAQ,CAAC;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;mBACS,YAAY,CAAA;;AAErB,QAAA,EAAA,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,GAAGD,kBAAI,CAAA,CAAA,kCAAA,CAAoC,GAAGE,WAAO,CAAA;;;AAGjF,UAAA,EAAA,IAAI,CAAC,WAAW,KAAK,UAAU,GAAGF,kBAAI,CAAA,CAAA,0BAAA,CAA4B,GAAGE,WAAO,CAAA;;;AAG5E,UAAA,EAAA,IAAI,CAAC,WAAW,KAAK,YAAY,GAAGF,kBAAI,CAAA,CAAA,0BAAA,CAA4B,GAAGE,WAAO,CAAA;;;;AAIpB,oEAAA,EAAA,IAAI,CAAC,qBAAqB,CAAA;;;;;;;;AAQtD,wCAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;UAEzD,GAAG,CAAA;KACR,CAAC;KACH;;AAzDM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAGJ,uBAAW,CAAC,MAAM,EAAEK,mBAAa,CAAxC,CAA0C;AAIvDC,gBAAA,CAAA;IADCC,gCAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGxBD,gBAAA,CAAA;IADCC,gCAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGmBD,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-icon-card.cjs.js","sources":["../../../../src/components/IconCard/sgds-icon-card.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { 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 { HasSlotController } from \"../../utils/slot\";\nimport IconCardStyle from \"./icon-card.css\";\n\n/**\n * @summary Icon 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 icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.\n * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.\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 SgdsIconCard extends CardElement {\n  static styles = [...CardElement.styles, IconCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"icon\", flatten: true })\n  _iconNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"upper\", flatten: true })\n  _upperNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"description\");\n\n  protected firstUpdated() {\n    if (this._iconNode.length === 0) {\n      if ((this.orientation === \"vertical\" && this._upperNode.length === 0) || this.orientation === \"horizontal\") {\n        const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n        media.style.display = \"none\";\n\n        const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n        if (this.noPadding) body.style.padding = \"0px\";\n      }\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n    const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        ${this.tinted && !this.noPadding ? html`<div class=\"card-tinted-bg\"></div>` : nothing}\n        <div class=\"card-media\">\n          <slot name=\"icon\"></slot>\n          ${this.orientation === \"vertical\" ? html`<slot name=\"upper\"></slot>` : nothing}\n        </div>\n        <div class=\"card-body\">\n          ${this.orientation === \"horizontal\" ? html`<slot name=\"upper\"></slot>` : nothing}\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          ${\n            hasDescriptionSlot\n              ? html`<p class=\"card-text\">\n                  <slot name=\"description\"></slot>\n                </p>`\n              : nothing\n          }\n          <slot name=\"lower\"></slot>\n          <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsIconCard;\n"],"names":["CardElement","HasSlotController","literal","html","classMap","nothing","IconCardStyle","__decorate","queryAssignedNodes","property"],"mappings":"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"}

package/react/components/IconCard/sgds-icon-card.js

@@ -5,6 +5,7 @@ import { literal, html } from 'lit/static-html.js';
 import { queryAssignedNodes, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { CardElement } from '../../base/card-element.js';
+import { HasSlotController } from '../../utils/slot.js';
 import css_248z from './icon-card.js';
 
 /**
@@ -23,6 +24,7 @@ class SgdsIconCard extends CardElement {
         super(...arguments);
         /** Removes the card's internal padding when set to true.  */
         this.noPadding = false;
+        this.hasSlotController = new HasSlotController(this, "description");
     }
     firstUpdated() {
         if (this._iconNode.length === 0) {
@@ -38,6 +40,7 @@ class SgdsIconCard extends CardElement {
     render() {
         const tag = this.stretchedLink ? literal `a` : literal `div`;
         const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
+        const hasDescriptionSlot = this.hasSlotController.test("description");
         return html `
       <${tag} 
         class="card ${classMap({
@@ -59,9 +62,11 @@ class SgdsIconCard extends CardElement {
             </div>
             <slot></slot>
           </div>
-          <p class="card-text">
-            <slot name="description"></slot>
-          </p>
+          ${hasDescriptionSlot
+            ? html `<p class="card-text">
+                  <slot name="description"></slot>
+                </p>`
+            : nothing}
           <slot name="lower"></slot>
           <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
         </div>

package/react/components/IconCard/sgds-icon-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-icon-card.js","sources":["../../../../src/components/IconCard/sgds-icon-card.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { 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 IconCardStyle from \"./icon-card.css\";\n\n/**\n * @summary Icon 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 icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.\n * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.\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 SgdsIconCard extends CardElement {\n  static styles = [...CardElement.styles, IconCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"icon\", flatten: true })\n  _iconNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"upper\", flatten: true })\n  _upperNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\n\n  protected firstUpdated() {\n    if (this._iconNode.length === 0) {\n      if ((this.orientation === \"vertical\" && this._upperNode.length === 0) || this.orientation === \"horizontal\") {\n        const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n        media.style.display = \"none\";\n\n        const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n        if (this.noPadding) body.style.padding = \"0px\";\n      }\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        ${this.tinted && !this.noPadding ? html`<div class=\"card-tinted-bg\"></div>` : nothing}\n        <div class=\"card-media\">\n          <slot name=\"icon\"></slot>\n          ${this.orientation === \"vertical\" ? html`<slot name=\"upper\"></slot>` : nothing}\n        </div>\n        <div class=\"card-body\">\n          ${this.orientation === \"horizontal\" ? html`<slot name=\"upper\"></slot>` : nothing}\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 SgdsIconCard;\n"],"names":["IconCardStyle"],"mappings":";;;;;;;;;AAOA;;;;;;;;;;AAUG;AACG,MAAO,YAAa,SAAQ,WAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;;QAW8C,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;KAgD/D;IA9CW,YAAY,GAAA;QACpB,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;YAC/B,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,KAAK,IAAI,CAAC,WAAW,KAAK,YAAY,EAAE;gBAC1G,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;AAC7E,gBAAA,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBAE7B,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAmB,CAAC;gBAC3E,IAAI,IAAI,CAAC,SAAS;AAAE,oBAAA,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;aAChD;SACF;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;;AAErB,QAAA,EAAA,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA,CAAA,kCAAA,CAAoC,GAAG,OAAO,CAAA;;;AAGjF,UAAA,EAAA,IAAI,CAAC,WAAW,KAAK,UAAU,GAAG,IAAI,CAAA,CAAA,0BAAA,CAA4B,GAAG,OAAO,CAAA;;;AAG5E,UAAA,EAAA,IAAI,CAAC,WAAW,KAAK,YAAY,GAAG,IAAI,CAAA,CAAA,0BAAA,CAA4B,GAAG,OAAO,CAAA;;;;AAIpB,oEAAA,EAAA,IAAI,CAAC,qBAAqB,CAAA;;;;;;;;AAQtD,wCAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;UAEzD,GAAG,CAAA;KACR,CAAC;KACH;;AAzDM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAa,CAAxC,CAA0C;AAIvD,UAAA,CAAA;IADC,kBAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGxB,UAAA,CAAA;IADC,kBAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGmB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-icon-card.js","sources":["../../../../src/components/IconCard/sgds-icon-card.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { 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 { HasSlotController } from \"../../utils/slot\";\nimport IconCardStyle from \"./icon-card.css\";\n\n/**\n * @summary Icon 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 icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.\n * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.\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 SgdsIconCard extends CardElement {\n  static styles = [...CardElement.styles, IconCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"icon\", flatten: true })\n  _iconNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"upper\", flatten: true })\n  _upperNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"description\");\n\n  protected firstUpdated() {\n    if (this._iconNode.length === 0) {\n      if ((this.orientation === \"vertical\" && this._upperNode.length === 0) || this.orientation === \"horizontal\") {\n        const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n        media.style.display = \"none\";\n\n        const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n        if (this.noPadding) body.style.padding = \"0px\";\n      }\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n    const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        ${this.tinted && !this.noPadding ? html`<div class=\"card-tinted-bg\"></div>` : nothing}\n        <div class=\"card-media\">\n          <slot name=\"icon\"></slot>\n          ${this.orientation === \"vertical\" ? html`<slot name=\"upper\"></slot>` : nothing}\n        </div>\n        <div class=\"card-body\">\n          ${this.orientation === \"horizontal\" ? html`<slot name=\"upper\"></slot>` : nothing}\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          ${\n            hasDescriptionSlot\n              ? html`<p class=\"card-text\">\n                  <slot name=\"description\"></slot>\n                </p>`\n              : nothing\n          }\n          <slot name=\"lower\"></slot>\n          <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsIconCard;\n"],"names":["IconCardStyle"],"mappings":"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"}

package/react/components/ImageCard/sgds-image-card.cjs.js

@@ -9,6 +9,7 @@ var staticHtml_js = require('lit/static-html.js');
 var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
 var cardElement = require('../../base/card-element.cjs.js');
+var slot = require('../../utils/slot.cjs.js');
 var imageCard = require('./image-card.cjs.js');
 
 /**
@@ -33,6 +34,7 @@ class SgdsImageCard extends cardElement.CardElement {
         this.imagePosition = "before";
         /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
         this.imageAdjustment = "default";
+        this.hasSlotController = new slot.HasSlotController(this, "description");
     }
     firstUpdated() {
         if (this._imageNode.length === 0) {
@@ -52,6 +54,7 @@ class SgdsImageCard extends cardElement.CardElement {
     render() {
         const tag = this.stretchedLink ? staticHtml_js.literal `a` : staticHtml_js.literal `div`;
         const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
+        const hasDescriptionSlot = this.hasSlotController.test("description");
         return staticHtml_js.html `
       <${tag} 
         class="card ${classMap_js.classMap({
@@ -74,9 +77,11 @@ class SgdsImageCard extends cardElement.CardElement {
             </div>
             <slot></slot>
           </div>
-          <p class="card-text">
-            <slot name="description"></slot>
-          </p>
+          ${hasDescriptionSlot
+            ? staticHtml_js.html `<p class="card-text">
+                  <slot name="description"></slot>
+                </p>`
+            : lit.nothing}
           <slot name="lower"></slot>
           <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
         </div>

package/react/components/ImageCard/sgds-image-card.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-image-card.cjs.js","sources":["../../../../src/components/ImageCard/sgds-image-card.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { 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 \"../Card/types\";\nimport imageCardStyle from \"./image-card.css\";\n\n/**\n * @summary Image 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 image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot image-badge - Accepts an element for a badge, positioned at the top-left corner of the image.\n * @slot image-action - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the image. Typically used for action menu.\n * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.\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 SgdsImageCard extends CardElement {\n  static styles = [...CardElement.styles, imageCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"image\", flatten: true })\n  _imageNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\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 image = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n      const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n      image.style.display = \"none\";\n      if (this.noPadding) body.style.padding = \"0px\";\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        ${this.tinted && !this.noPadding ? html`<div class=\"card-tinted-bg\"></div>` : nothing}\n        <div class=\"card-image\">\n\t\t\t\t\t<slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n\t\t\t\t\t<slot name=\"image-badge\"></slot>\n\t\t\t\t\t<slot name=\"image-action\"></slot>\n        </div>\n        <div class=\"card-body\">\n\t\t\t\t\t<slot name=\"upper\"></slot>\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 SgdsImageCard;\n"],"names":["CardElement","literal","html","classMap","nothing","imageCardStyle","__decorate","queryAssignedNodes","property"],"mappings":"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"}
+{"version":3,"file":"sgds-image-card.cjs.js","sources":["../../../../src/components/ImageCard/sgds-image-card.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { 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 { HasSlotController } from \"../../utils/slot\";\nimport { CardImageAdjustment, CardImagePosition } from \"../Card/types\";\nimport imageCardStyle from \"./image-card.css\";\n\n/**\n * @summary Image 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 image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot image-badge - Accepts an element for a badge, positioned at the top-left corner of the image.\n * @slot image-action - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the image. Typically used for action menu.\n * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.\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 SgdsImageCard extends CardElement {\n  static styles = [...CardElement.styles, imageCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"image\", flatten: true })\n  _imageNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\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  private readonly hasSlotController = new HasSlotController(this, \"description\");\n\n  protected firstUpdated() {\n    if (this._imageNode.length === 0) {\n      const image = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n      const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n      image.style.display = \"none\";\n      if (this.noPadding) body.style.padding = \"0px\";\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    const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        ${this.tinted && !this.noPadding ? html`<div class=\"card-tinted-bg\"></div>` : nothing}\n        <div class=\"card-image\">\n\t\t\t\t\t<slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n\t\t\t\t\t<slot name=\"image-badge\"></slot>\n\t\t\t\t\t<slot name=\"image-action\"></slot>\n        </div>\n        <div class=\"card-body\">\n\t\t\t\t\t<slot name=\"upper\"></slot>\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          ${\n            hasDescriptionSlot\n              ? html`<p class=\"card-text\">\n                  <slot name=\"description\"></slot>\n                </p>`\n              : nothing\n          }\n          <slot name=\"lower\"></slot>\n          <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsImageCard;\n"],"names":["CardElement","HasSlotController","literal","html","classMap","nothing","imageCardStyle","__decorate","queryAssignedNodes","property"],"mappings":"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"}

package/react/components/ImageCard/sgds-image-card.js

@@ -5,6 +5,7 @@ import { literal, html } from 'lit/static-html.js';
 import { queryAssignedNodes, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { CardElement } from '../../base/card-element.js';
+import { HasSlotController } from '../../utils/slot.js';
 import css_248z from './image-card.js';
 
 /**
@@ -29,6 +30,7 @@ class SgdsImageCard extends CardElement {
         this.imagePosition = "before";
         /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
         this.imageAdjustment = "default";
+        this.hasSlotController = new HasSlotController(this, "description");
     }
     firstUpdated() {
         if (this._imageNode.length === 0) {
@@ -48,6 +50,7 @@ class SgdsImageCard extends CardElement {
     render() {
         const tag = this.stretchedLink ? literal `a` : literal `div`;
         const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
+        const hasDescriptionSlot = this.hasSlotController.test("description");
         return html `
       <${tag} 
         class="card ${classMap({
@@ -70,9 +73,11 @@ class SgdsImageCard extends CardElement {
             </div>
             <slot></slot>
           </div>
-          <p class="card-text">
-            <slot name="description"></slot>
-          </p>
+          ${hasDescriptionSlot
+            ? html `<p class="card-text">
+                  <slot name="description"></slot>
+                </p>`
+            : nothing}
           <slot name="lower"></slot>
           <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
         </div>