@govtechsg/sgds-web-component 3.17.1-rc.0 → 3.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.17.1-rc.0",
+  "version": "3.18.0",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/base/card-element.cjs.js

@@ -36,6 +36,20 @@ class CardElement extends sgdsElement["default"] {
         }
         return;
     }
+    _forwardAnchorAttributes(anchor) {
+        const SKIP = new Set(["class", "style", "id"]);
+        if (!(anchor === null || anchor === void 0 ? void 0 : anchor.href) ||
+            anchor.href.startsWith("javascript:") ||
+            anchor.href.startsWith("data:") ||
+            anchor.href.startsWith("vbscript:")) {
+            return;
+        }
+        for (const { name, value } of Array.from(anchor.attributes)) {
+            if (!SKIP.has(name) && !name.startsWith("on")) {
+                this.card.setAttribute(name, value);
+            }
+        }
+    }
     warnLinkSlotMisused(e) {
         const childNodes = e.target.assignedNodes({ flatten: true });
         if (childNodes.length > 1) {

package/react/base/card-element.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-element.cjs.js","sources":["../../../src/base/card-element.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { SgdsLink } from \"../components/Link/sgds-link\";\nimport { CardOrientation } from \"../components/Card/types\";\nimport SgdsElement from \"./sgds-element\";\nimport cardStyle from \"./card.css\";\nimport textStyles from \"../styles/text-variants.css\";\nimport bgStyles from \"../styles/bg-variants.css\";\nimport borderStyles from \"../styles/border-variants.css\";\nimport headerStyles from \"../styles/header-class.css\";\nimport paragraphStyles from \"../styles/paragraph.css\";\n\nexport class CardElement extends SgdsElement {\n  static styles = [...SgdsElement.styles, textStyles, bgStyles, borderStyles, headerStyles, paragraphStyles, cardStyle];\n\n  /** @internal */\n  @query(\"a.card\") card: HTMLAnchorElement;\n\n  /** Extends the link passed in either `footer` or `link`(deprecated) slot.\n   */\n  @property({ type: Boolean, reflect: true }) stretchedLink = false;\n\n  /** Disables the card  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** When true, hides the default border of the card. */\n  @property({ type: Boolean, reflect: true }) hideBorder = false;\n\n  /** When true, applies a tinted background color to the card. */\n  @property({ type: Boolean, reflect: true }) tinted = false;\n\n  /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */\n  @property({ type: String, reflect: true }) orientation: CardOrientation = \"vertical\";\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  warnLinkSlotMisused(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}\n"],"names":["SgdsElement","textStyles","bgStyles","borderStyles","headerStyles","paragraphStyles","cardStyle","__decorate","query","property"],"mappings":";;;;;;;;;;;;;;;AAWM,MAAO,WAAY,SAAQA,sBAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;AAME;AACG;QACyC,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;;QAGtB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;;QAGnB,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAGhB,IAAW,CAAA,WAAA,GAAoB,UAAU,CAAC;KAsBtF;AApBC,IAAA,qBAAqB,CAAC,CAAQ,EAAA;AAC5B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAuB,CAAC;QAExG,IAAI,IAAI,CAAC,aAAa,IAAI,UAAU,CAAC,CAAC,CAAC,YAAY,iBAAiB,EAAE;AACpE,YAAA,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC;AACpE,YAAA,SAAS,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;SACnC;QACD,OAAO;KACR;AAED,IAAA,mBAAmB,CAAC,CAAQ,EAAA;AAC1B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAG7D,CAAC;AAEpB,QAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC,CAAC;SAC5E;KACF;;AAxCM,WAAM,CAAA,MAAA,GAAG,CAAC,GAAGA,sBAAW,CAAC,MAAM,EAAEC,uBAAU,EAAEC,qBAAQ,EAAEC,yBAAY,EAAEC,sBAAY,EAAEC,oBAAe,EAAEC,eAAS,CAAC,CAAC;AAGrGC,gBAAA,CAAA;IAAhBC,mBAAK,CAAC,QAAQ,CAAC;AAAyB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIGD,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGtBF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjBF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAoB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGnBF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhBF,gBAAA,CAAA;IAA1CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA2C,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"card-element.cjs.js","sources":["../../../src/base/card-element.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { SgdsLink } from \"../components/Link/sgds-link\";\nimport { CardOrientation } from \"../components/Card/types\";\nimport SgdsElement from \"./sgds-element\";\nimport cardStyle from \"./card.css\";\nimport textStyles from \"../styles/text-variants.css\";\nimport bgStyles from \"../styles/bg-variants.css\";\nimport borderStyles from \"../styles/border-variants.css\";\nimport headerStyles from \"../styles/header-class.css\";\nimport paragraphStyles from \"../styles/paragraph.css\";\n\nexport class CardElement extends SgdsElement {\n  static styles = [...SgdsElement.styles, textStyles, bgStyles, borderStyles, headerStyles, paragraphStyles, cardStyle];\n\n  /** @internal */\n  @query(\"a.card\") card: HTMLAnchorElement;\n\n  /** Extends the link passed in either `footer` or `link`(deprecated) slot.\n   */\n  @property({ type: Boolean, reflect: true }) stretchedLink = false;\n\n  /** Disables the card  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** When true, hides the default border of the card. */\n  @property({ type: Boolean, reflect: true }) hideBorder = false;\n\n  /** When true, applies a tinted background color to the card. */\n  @property({ type: Boolean, reflect: true }) tinted = false;\n\n  /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */\n  @property({ type: String, reflect: true }) orientation: CardOrientation = \"vertical\";\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  protected _forwardAnchorAttributes(anchor: HTMLAnchorElement | null) {\n    const SKIP = new Set([\"class\", \"style\", \"id\"]);\n    if (\n      !anchor?.href ||\n      anchor.href.startsWith(\"javascript:\") ||\n      anchor.href.startsWith(\"data:\") ||\n      anchor.href.startsWith(\"vbscript:\")\n    ) {\n      return;\n    }\n\n    for (const { name, value } of Array.from(anchor.attributes)) {\n      if (!SKIP.has(name) && !name.startsWith(\"on\")) {\n        this.card.setAttribute(name, value);\n      }\n    }\n  }\n\n  warnLinkSlotMisused(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}\n"],"names":["SgdsElement","textStyles","bgStyles","borderStyles","headerStyles","paragraphStyles","cardStyle","__decorate","query","property"],"mappings":"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"}

package/react/base/card-element.js

@@ -32,6 +32,20 @@ class CardElement extends SgdsElement {
         }
         return;
     }
+    _forwardAnchorAttributes(anchor) {
+        const SKIP = new Set(["class", "style", "id"]);
+        if (!(anchor === null || anchor === void 0 ? void 0 : anchor.href) ||
+            anchor.href.startsWith("javascript:") ||
+            anchor.href.startsWith("data:") ||
+            anchor.href.startsWith("vbscript:")) {
+            return;
+        }
+        for (const { name, value } of Array.from(anchor.attributes)) {
+            if (!SKIP.has(name) && !name.startsWith("on")) {
+                this.card.setAttribute(name, value);
+            }
+        }
+    }
     warnLinkSlotMisused(e) {
         const childNodes = e.target.assignedNodes({ flatten: true });
         if (childNodes.length > 1) {

package/react/base/card-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-element.js","sources":["../../../src/base/card-element.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { SgdsLink } from \"../components/Link/sgds-link\";\nimport { CardOrientation } from \"../components/Card/types\";\nimport SgdsElement from \"./sgds-element\";\nimport cardStyle from \"./card.css\";\nimport textStyles from \"../styles/text-variants.css\";\nimport bgStyles from \"../styles/bg-variants.css\";\nimport borderStyles from \"../styles/border-variants.css\";\nimport headerStyles from \"../styles/header-class.css\";\nimport paragraphStyles from \"../styles/paragraph.css\";\n\nexport class CardElement extends SgdsElement {\n  static styles = [...SgdsElement.styles, textStyles, bgStyles, borderStyles, headerStyles, paragraphStyles, cardStyle];\n\n  /** @internal */\n  @query(\"a.card\") card: HTMLAnchorElement;\n\n  /** Extends the link passed in either `footer` or `link`(deprecated) slot.\n   */\n  @property({ type: Boolean, reflect: true }) stretchedLink = false;\n\n  /** Disables the card  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** When true, hides the default border of the card. */\n  @property({ type: Boolean, reflect: true }) hideBorder = false;\n\n  /** When true, applies a tinted background color to the card. */\n  @property({ type: Boolean, reflect: true }) tinted = false;\n\n  /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */\n  @property({ type: String, reflect: true }) orientation: CardOrientation = \"vertical\";\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  warnLinkSlotMisused(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}\n"],"names":["textStyles","bgStyles","borderStyles","headerStyles","paragraphStyles","cardStyle"],"mappings":";;;;;;;;;;;AAWM,MAAO,WAAY,SAAQ,WAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;AAME;AACG;QACyC,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;;QAGtB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;;QAGnB,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAGhB,IAAW,CAAA,WAAA,GAAoB,UAAU,CAAC;KAsBtF;AApBC,IAAA,qBAAqB,CAAC,CAAQ,EAAA;AAC5B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAuB,CAAC;QAExG,IAAI,IAAI,CAAC,aAAa,IAAI,UAAU,CAAC,CAAC,CAAC,YAAY,iBAAiB,EAAE;AACpE,YAAA,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC;AACpE,YAAA,SAAS,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;SACnC;QACD,OAAO;KACR;AAED,IAAA,mBAAmB,CAAC,CAAQ,EAAA;AAC1B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAG7D,CAAC;AAEpB,QAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC,CAAC;SAC5E;KACF;;AAxCM,WAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,EAAEC,UAAQ,EAAEC,UAAY,EAAEC,UAAY,EAAEC,UAAe,EAAEC,UAAS,CAAC,CAAC;AAGrG,UAAA,CAAA;IAAhB,KAAK,CAAC,QAAQ,CAAC;AAAyB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIG,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGtB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAoB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGnB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA2C,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"card-element.js","sources":["../../../src/base/card-element.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { SgdsLink } from \"../components/Link/sgds-link\";\nimport { CardOrientation } from \"../components/Card/types\";\nimport SgdsElement from \"./sgds-element\";\nimport cardStyle from \"./card.css\";\nimport textStyles from \"../styles/text-variants.css\";\nimport bgStyles from \"../styles/bg-variants.css\";\nimport borderStyles from \"../styles/border-variants.css\";\nimport headerStyles from \"../styles/header-class.css\";\nimport paragraphStyles from \"../styles/paragraph.css\";\n\nexport class CardElement extends SgdsElement {\n  static styles = [...SgdsElement.styles, textStyles, bgStyles, borderStyles, headerStyles, paragraphStyles, cardStyle];\n\n  /** @internal */\n  @query(\"a.card\") card: HTMLAnchorElement;\n\n  /** Extends the link passed in either `footer` or `link`(deprecated) slot.\n   */\n  @property({ type: Boolean, reflect: true }) stretchedLink = false;\n\n  /** Disables the card  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** When true, hides the default border of the card. */\n  @property({ type: Boolean, reflect: true }) hideBorder = false;\n\n  /** When true, applies a tinted background color to the card. */\n  @property({ type: Boolean, reflect: true }) tinted = false;\n\n  /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */\n  @property({ type: String, reflect: true }) orientation: CardOrientation = \"vertical\";\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  protected _forwardAnchorAttributes(anchor: HTMLAnchorElement | null) {\n    const SKIP = new Set([\"class\", \"style\", \"id\"]);\n    if (\n      !anchor?.href ||\n      anchor.href.startsWith(\"javascript:\") ||\n      anchor.href.startsWith(\"data:\") ||\n      anchor.href.startsWith(\"vbscript:\")\n    ) {\n      return;\n    }\n\n    for (const { name, value } of Array.from(anchor.attributes)) {\n      if (!SKIP.has(name) && !name.startsWith(\"on\")) {\n        this.card.setAttribute(name, value);\n      }\n    }\n  }\n\n  warnLinkSlotMisused(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}\n"],"names":["textStyles","bgStyles","borderStyles","headerStyles","paragraphStyles","cardStyle"],"mappings":"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"}

package/react/base/card.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([disabled]){cursor:not-allowed}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([stretchedLink]) slot[name=footer]::slotted(a),:host([stretchedLink]) slot[name=footer]::slotted(sgds-link),:host([stretchedLink]) slot[name=link]::slotted(a),:host([stretchedLink]) slot[name=link]::slotted(sgds-link){display:none}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:not(.disabled):focus-visible{--sgds-outline-offset-focus:-1px;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title,slot[name=title]::slotted(*){color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=subtitle]::slotted(*){color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-14)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-wide)!important;line-height:var(--sgds-line-height-20)!important;margin:var(--sgds-margin-none)!important;text-transform:uppercase}slot[name=title]::slotted(a){color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important;text-decoration:none!important}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=footer]::slotted(*),slot[name=link]::slotted(*){margin-top:auto;padding-top:var(--sgds-padding-sm);width:fit-content}slot[name=footer]::slotted(a),slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=footer]::slotted(a:focus),slot[name=footer]::slotted(a:hover),slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=footer]::slotted(a:focus-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
+var css_248z = lit.css`:host([disabled]){cursor:not-allowed}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([stretchedLink]) slot[name=footer]::slotted(a),:host([stretchedLink]) slot[name=footer]::slotted(sgds-link),:host([stretchedLink]) slot[name=link]::slotted(a),:host([stretchedLink]) slot[name=link]::slotted(sgds-link){display:none}:host([stretchedLink]) .card:after{display:none}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:not(.disabled):focus-visible{--sgds-outline-offset-focus:-1px;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title,slot[name=title]::slotted(*){color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=subtitle]::slotted(*){color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-14)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-wide)!important;line-height:var(--sgds-line-height-20)!important;margin:var(--sgds-margin-none)!important;text-transform:uppercase}slot[name=title]::slotted(a){color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important;text-decoration:none!important}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=footer]::slotted(*),slot[name=link]::slotted(*){margin-top:auto;padding-top:var(--sgds-padding-sm);width:fit-content}slot[name=footer]::slotted(a),slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=footer]::slotted(a:focus),slot[name=footer]::slotted(a:hover),slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=footer]::slotted(a:focus-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=card.cjs.js.map

package/react/base/card.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([disabled]){cursor:not-allowed}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([stretchedLink]) slot[name=footer]::slotted(a),:host([stretchedLink]) slot[name=footer]::slotted(sgds-link),:host([stretchedLink]) slot[name=link]::slotted(a),:host([stretchedLink]) slot[name=link]::slotted(sgds-link){display:none}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:not(.disabled):focus-visible{--sgds-outline-offset-focus:-1px;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title,slot[name=title]::slotted(*){color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=subtitle]::slotted(*){color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-14)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-wide)!important;line-height:var(--sgds-line-height-20)!important;margin:var(--sgds-margin-none)!important;text-transform:uppercase}slot[name=title]::slotted(a){color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important;text-decoration:none!important}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=footer]::slotted(*),slot[name=link]::slotted(*){margin-top:auto;padding-top:var(--sgds-padding-sm);width:fit-content}slot[name=footer]::slotted(a),slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=footer]::slotted(a:focus),slot[name=footer]::slotted(a:hover),slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=footer]::slotted(a:focus-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
+var css_248z = css`:host([disabled]){cursor:not-allowed}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([stretchedLink]) slot[name=footer]::slotted(a),:host([stretchedLink]) slot[name=footer]::slotted(sgds-link),:host([stretchedLink]) slot[name=link]::slotted(a),:host([stretchedLink]) slot[name=link]::slotted(sgds-link){display:none}:host([stretchedLink]) .card:after{display:none}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:not(.disabled):focus-visible{--sgds-outline-offset-focus:-1px;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title,slot[name=title]::slotted(*){color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=subtitle]::slotted(*){color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-14)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-wide)!important;line-height:var(--sgds-line-height-20)!important;margin:var(--sgds-margin-none)!important;text-transform:uppercase}slot[name=title]::slotted(a){color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important;text-decoration:none!important}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=footer]::slotted(*),slot[name=link]::slotted(*){margin-top:auto;padding-top:var(--sgds-padding-sm);width:fit-content}slot[name=footer]::slotted(a),slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=footer]::slotted(a:focus),slot[name=footer]::slotted(a:hover),slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=footer]::slotted(a:focus-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=card.js.map

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

@@ -54,17 +54,11 @@ class SgdsCard extends cardElement.CardElement {
         return (element.querySelector("a") || element);
     }
     firstUpdated(changedProperties) {
-        var _a, _b;
         super.firstUpdated(changedProperties);
         if (this.stretchedLink) {
-            const footerHref = (_a = this.footerSlotItems) === null || _a === void 0 ? void 0 : _a.href;
-            const linkHref = (_b = this.linkSlotItems) === null || _b === void 0 ? void 0 : _b.href;
-            if (footerHref) {
-                this.card.setAttribute("href", footerHref);
-            }
-            else if (linkHref) {
-                this.card.setAttribute("href", linkHref);
-            }
+            const footerAnchor = this.footerSlotItems;
+            const linkAnchor = this.linkSlotItems;
+            this._forwardAnchorAttributes((footerAnchor === null || footerAnchor === void 0 ? void 0 : footerAnchor.href) ? footerAnchor : linkAnchor);
         }
     }
     updated() {

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-card.cjs.js","sources":["../../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { CardImageAdjustment, CardImagePosition } from \"./types\";\nimport type SgdsLink from \"../Link/sgds-link\";\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 upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.\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 footer - Footer area of the card. Accepts links, actions, or any custom content.\n * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.\n *  Legacy slot for anchor elements. Use `footer` instead.\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  @queryAssignedElements({ slot: \"footer\" })\n  private footerNode!: HTMLElement[];\n  @queryAssignedElements({ slot: \"link\" })\n  private linkNode!: HTMLAnchorElement[] | SgdsLink[];\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  /** Used only for SSR to indicate the presence of the `image` slot. */\n  @property({ type: Boolean }) hasImageSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `icon` slot. */\n  @property({ type: Boolean }) hasIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `upper` slot. */\n  @property({ type: Boolean }) hasUpperSlot = false;\n\n  private get linkSlotItems(): HTMLAnchorElement | null {\n    if (!this.linkNode || this.linkNode.length === 0) return null;\n    const element = this.linkNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private get footerSlotItems(): HTMLAnchorElement | null {\n    if (!this.footerNode || this.footerNode.length === 0) return null;\n    const element = this.footerNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"image\", \"icon\", \"upper\");\n\n  protected firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.stretchedLink) {\n      const footerHref = this.footerSlotItems?.href;\n      const linkHref = this.linkSlotItems?.href;\n\n      if (footerHref) {\n        this.card.setAttribute(\"href\", footerHref);\n      } else if (linkHref) {\n        this.card.setAttribute(\"href\", linkHref);\n      }\n    }\n  }\n\n  updated() {\n    if (!this.hasImageSlot) this.hasImageSlot = this.hasSlotController.test(\"image\");\n    if (!this.hasIconSlot) this.hasIconSlot = this.hasSlotController.test(\"icon\");\n    if (!this.hasUpperSlot) this.hasUpperSlot = this.hasSlotController.test(\"upper\");\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      console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n\n    if (this.hasSlotController.test(\"image\") && this.hasSlotController.test(\"icon\")) {\n      console.error(\"Both image and icon slots cannot be used together in SgdsCard\");\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        \n        <slot name=\"menu\"></slot>\n        <div class=${classMap({\n          \"card-image\": this.hasImageSlot,\n          \"card-media\": this.hasIconSlot || this.hasUpperSlot\n        })}>\n          <slot name=\"upper\">\n            <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n            <slot name=\"icon\"></slot>\n          </slot>\n        </div>\n\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          <slot name=\"description\"></slot>\n          <slot name=\"lower\"></slot>\n          <slot name=\"footer\">\n            <slot name=\"link\" @slotchange=${this.warnLinkSlotMisused}></slot>\n          </slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["CardElement","HasSlotController","literal","html","classMap","cardStyle","__decorate","queryAssignedElements","property"],"mappings":"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"}
+{"version":3,"file":"sgds-card.cjs.js","sources":["../../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { CardImageAdjustment, CardImagePosition } from \"./types\";\nimport type SgdsLink from \"../Link/sgds-link\";\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 upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.\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 footer - Footer area of the card. Accepts links, actions, or any custom content.\n * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.\n *  Legacy slot for anchor elements. Use `footer` instead.\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  @queryAssignedElements({ slot: \"footer\" })\n  private footerNode!: HTMLElement[];\n  @queryAssignedElements({ slot: \"link\" })\n  private linkNode!: HTMLAnchorElement[] | SgdsLink[];\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  /** Used only for SSR to indicate the presence of the `image` slot. */\n  @property({ type: Boolean }) hasImageSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `icon` slot. */\n  @property({ type: Boolean }) hasIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `upper` slot. */\n  @property({ type: Boolean }) hasUpperSlot = false;\n\n  private get linkSlotItems(): HTMLAnchorElement | null {\n    if (!this.linkNode || this.linkNode.length === 0) return null;\n    const element = this.linkNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private get footerSlotItems(): HTMLAnchorElement | null {\n    if (!this.footerNode || this.footerNode.length === 0) return null;\n    const element = this.footerNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"image\", \"icon\", \"upper\");\n\n  protected firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.stretchedLink) {\n      const footerAnchor = this.footerSlotItems;\n      const linkAnchor = this.linkSlotItems;\n      this._forwardAnchorAttributes(footerAnchor?.href ? footerAnchor : linkAnchor);\n    }\n  }\n\n  updated() {\n    if (!this.hasImageSlot) this.hasImageSlot = this.hasSlotController.test(\"image\");\n    if (!this.hasIconSlot) this.hasIconSlot = this.hasSlotController.test(\"icon\");\n    if (!this.hasUpperSlot) this.hasUpperSlot = this.hasSlotController.test(\"upper\");\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      console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n\n    if (this.hasSlotController.test(\"image\") && this.hasSlotController.test(\"icon\")) {\n      console.error(\"Both image and icon slots cannot be used together in SgdsCard\");\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        \n        <slot name=\"menu\"></slot>\n        <div class=${classMap({\n          \"card-image\": this.hasImageSlot,\n          \"card-media\": this.hasIconSlot || this.hasUpperSlot\n        })}>\n          <slot name=\"upper\">\n            <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n            <slot name=\"icon\"></slot>\n          </slot>\n        </div>\n\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          <slot name=\"description\"></slot>\n          <slot name=\"lower\"></slot>\n          <slot name=\"footer\">\n            <slot name=\"link\" @slotchange=${this.warnLinkSlotMisused}></slot>\n          </slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["CardElement","HasSlotController","literal","html","classMap","cardStyle","__decorate","queryAssignedElements","property"],"mappings":"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"}

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

@@ -50,17 +50,11 @@ class SgdsCard extends CardElement {
         return (element.querySelector("a") || element);
     }
     firstUpdated(changedProperties) {
-        var _a, _b;
         super.firstUpdated(changedProperties);
         if (this.stretchedLink) {
-            const footerHref = (_a = this.footerSlotItems) === null || _a === void 0 ? void 0 : _a.href;
-            const linkHref = (_b = this.linkSlotItems) === null || _b === void 0 ? void 0 : _b.href;
-            if (footerHref) {
-                this.card.setAttribute("href", footerHref);
-            }
-            else if (linkHref) {
-                this.card.setAttribute("href", linkHref);
-            }
+            const footerAnchor = this.footerSlotItems;
+            const linkAnchor = this.linkSlotItems;
+            this._forwardAnchorAttributes((footerAnchor === null || footerAnchor === void 0 ? void 0 : footerAnchor.href) ? footerAnchor : linkAnchor);
         }
     }
     updated() {

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 { PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { CardImageAdjustment, CardImagePosition } from \"./types\";\nimport type SgdsLink from \"../Link/sgds-link\";\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 upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.\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 footer - Footer area of the card. Accepts links, actions, or any custom content.\n * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.\n *  Legacy slot for anchor elements. Use `footer` instead.\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  @queryAssignedElements({ slot: \"footer\" })\n  private footerNode!: HTMLElement[];\n  @queryAssignedElements({ slot: \"link\" })\n  private linkNode!: HTMLAnchorElement[] | SgdsLink[];\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  /** Used only for SSR to indicate the presence of the `image` slot. */\n  @property({ type: Boolean }) hasImageSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `icon` slot. */\n  @property({ type: Boolean }) hasIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `upper` slot. */\n  @property({ type: Boolean }) hasUpperSlot = false;\n\n  private get linkSlotItems(): HTMLAnchorElement | null {\n    if (!this.linkNode || this.linkNode.length === 0) return null;\n    const element = this.linkNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private get footerSlotItems(): HTMLAnchorElement | null {\n    if (!this.footerNode || this.footerNode.length === 0) return null;\n    const element = this.footerNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"image\", \"icon\", \"upper\");\n\n  protected firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.stretchedLink) {\n      const footerHref = this.footerSlotItems?.href;\n      const linkHref = this.linkSlotItems?.href;\n\n      if (footerHref) {\n        this.card.setAttribute(\"href\", footerHref);\n      } else if (linkHref) {\n        this.card.setAttribute(\"href\", linkHref);\n      }\n    }\n  }\n\n  updated() {\n    if (!this.hasImageSlot) this.hasImageSlot = this.hasSlotController.test(\"image\");\n    if (!this.hasIconSlot) this.hasIconSlot = this.hasSlotController.test(\"icon\");\n    if (!this.hasUpperSlot) this.hasUpperSlot = this.hasSlotController.test(\"upper\");\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      console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n\n    if (this.hasSlotController.test(\"image\") && this.hasSlotController.test(\"icon\")) {\n      console.error(\"Both image and icon slots cannot be used together in SgdsCard\");\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        \n        <slot name=\"menu\"></slot>\n        <div class=${classMap({\n          \"card-image\": this.hasImageSlot,\n          \"card-media\": this.hasIconSlot || this.hasUpperSlot\n        })}>\n          <slot name=\"upper\">\n            <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n            <slot name=\"icon\"></slot>\n          </slot>\n        </div>\n\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          <slot name=\"description\"></slot>\n          <slot name=\"lower\"></slot>\n          <slot name=\"footer\">\n            <slot name=\"link\" @slotchange=${this.warnLinkSlotMisused}></slot>\n          </slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["cardStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-card.js","sources":["../../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { CardImageAdjustment, CardImagePosition } from \"./types\";\nimport type SgdsLink from \"../Link/sgds-link\";\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 upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.\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 footer - Footer area of the card. Accepts links, actions, or any custom content.\n * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.\n *  Legacy slot for anchor elements. Use `footer` instead.\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  @queryAssignedElements({ slot: \"footer\" })\n  private footerNode!: HTMLElement[];\n  @queryAssignedElements({ slot: \"link\" })\n  private linkNode!: HTMLAnchorElement[] | SgdsLink[];\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  /** Used only for SSR to indicate the presence of the `image` slot. */\n  @property({ type: Boolean }) hasImageSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `icon` slot. */\n  @property({ type: Boolean }) hasIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `upper` slot. */\n  @property({ type: Boolean }) hasUpperSlot = false;\n\n  private get linkSlotItems(): HTMLAnchorElement | null {\n    if (!this.linkNode || this.linkNode.length === 0) return null;\n    const element = this.linkNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private get footerSlotItems(): HTMLAnchorElement | null {\n    if (!this.footerNode || this.footerNode.length === 0) return null;\n    const element = this.footerNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"image\", \"icon\", \"upper\");\n\n  protected firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.stretchedLink) {\n      const footerAnchor = this.footerSlotItems;\n      const linkAnchor = this.linkSlotItems;\n      this._forwardAnchorAttributes(footerAnchor?.href ? footerAnchor : linkAnchor);\n    }\n  }\n\n  updated() {\n    if (!this.hasImageSlot) this.hasImageSlot = this.hasSlotController.test(\"image\");\n    if (!this.hasIconSlot) this.hasIconSlot = this.hasSlotController.test(\"icon\");\n    if (!this.hasUpperSlot) this.hasUpperSlot = this.hasSlotController.test(\"upper\");\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      console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n\n    if (this.hasSlotController.test(\"image\") && this.hasSlotController.test(\"icon\")) {\n      console.error(\"Both image and icon slots cannot be used together in SgdsCard\");\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        \n        <slot name=\"menu\"></slot>\n        <div class=${classMap({\n          \"card-image\": this.hasImageSlot,\n          \"card-media\": this.hasIconSlot || this.hasUpperSlot\n        })}>\n          <slot name=\"upper\">\n            <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n            <slot name=\"icon\"></slot>\n          </slot>\n        </div>\n\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          <slot name=\"description\"></slot>\n          <slot name=\"lower\"></slot>\n          <slot name=\"footer\">\n            <slot name=\"link\" @slotchange=${this.warnLinkSlotMisused}></slot>\n          </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-menu.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{display:block}.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;max-height:var(--sgds-dimension-480);max-width:var(--sgds-dimension-320);min-width:var(--sgds-dimension-192);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:var(--sgds-z-index-floating)}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:512px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1024px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1280px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1440px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`;
+var css_248z = lit.css`:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{display:block}.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;max-height:var(--sgds-dimension-480);min-width:var(--sgds-dimension-192);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:var(--sgds-z-index-floating)}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:512px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1024px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1280px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1440px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=dropdown-menu.cjs.js.map

package/react/components/Dropdown/dropdown-menu.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{display:block}.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;max-height:var(--sgds-dimension-480);max-width:var(--sgds-dimension-320);min-width:var(--sgds-dimension-192);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:var(--sgds-z-index-floating)}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:512px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1024px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1280px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1440px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`;
+var css_248z = css`:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{display:block}.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;max-height:var(--sgds-dimension-480);min-width:var(--sgds-dimension-192);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:var(--sgds-z-index-floating)}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:512px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1024px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1280px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1440px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`;
 
 export { css_248z as default };
 //# sourceMappingURL=dropdown-menu.js.map

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`.dropdown{display:flex;height:inherit;position:relative}.dropdown-menu{max-width:var(--sgds-dimension-320)}.toggler-container{flex:1;pointer-events:none}.toggler-container ::slotted(*){pointer-events:auto}`;
 
 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`.dropdown{display:flex;height:inherit;position:relative}.dropdown-menu{max-width:var(--sgds-dimension-320)}.toggler-container{flex:1;pointer-events:none}.toggler-container ::slotted(*){pointer-events:auto}`;
 
 export { css_248z as default };
 //# sourceMappingURL=dropdown.js.map

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

@@ -29,11 +29,25 @@ class SgdsDropdown extends dropdownListElement.DropdownListElement {
         this.drop = "down";
         this.menuRef = ref_js.ref();
     }
-    async _handleClick() {
-        if (this.disabled) {
+    async _handleClick(e) {
+        if (this.disabled)
+            return;
+        const slottedToggler = this._toggler[0];
+        if (!slottedToggler) {
+            this.toggleMenu();
+            return;
+        }
+        if (e.composedPath().includes(slottedToggler)) {
+            this.toggleMenu();
             return;
         }
-        this.toggleMenu();
+        // Click landed in the toggler-container's empty area (passed through pointer-events: none)
+        if (!this.menuIsOpen)
+            return;
+        const menu = this.menuRef.value;
+        if (menu && e.composedPath().includes(menu))
+            return;
+        this.hideMenu();
     }
     _handleCloseMenu() {
         const button = this._toggler[0];
@@ -66,14 +80,8 @@ class SgdsDropdown extends dropdownListElement.DropdownListElement {
     }
     render() {
         return lit.html `
-      <div class="dropdown">
-        <div
-          class="toggler-container"
-          ${ref_js.ref(this.myDropdown)}
-          @click=${this._handleClick}
-          aria-expanded="${this.menuIsOpen}"
-          aria-haspopup="menu"
-        >
+      <div class="dropdown" @click=${this._handleClick}>
+        <div class="toggler-container" ${ref_js.ref(this.myDropdown)} aria-expanded="${this.menuIsOpen}" aria-haspopup="menu">
           <slot name="toggler"></slot>
         </div>
         <div class="dropdown-menu" role="menu" ${ref_js.ref(this.menuRef)}>

package/react/components/Dropdown/sgds-dropdown.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-dropdown.cjs.js","sources":["../../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport { watch } from \"../../utils/watch\";\nimport dropdownMenuStyle from \"./dropdown-menu.css\";\nimport dropdownStyle from \"./dropdown.css\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\nexport type DropdownButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n * @slot toggler - slot for the toggler that triggers the open and closing of menu, typically a button. Only pass in a single element into this slot\n *\n */\nexport class SgdsDropdown extends DropdownListElement {\n  static styles = [...DropdownListElement.styles, dropdownStyle, dropdownMenuStyle];\n\n  constructor() {\n    super();\n    this.menuRef = ref();\n  }\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  @queryAssignedElements({ slot: \"toggler\", flatten: true })\n  private _toggler: Array<HTMLElement>;\n\n  protected menuRef;\n\n  private async _handleClick() {\n    if (this.disabled) {\n      return;\n    }\n    this.toggleMenu();\n  }\n\n  private _handleCloseMenu() {\n    const button = this._toggler[0];\n    button?.focus();\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async disconnectedCallback() {\n    this.removeEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n    this._handleDisabled();\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    const button = this._toggler[0];\n    if (button) {\n      if (this.disabled) {\n        button.setAttribute(\"disabled\", \"true\");\n      } else {\n        button.hasAttribute(\"disabled\") && button.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"dropdown\">\n        <div\n          class=\"toggler-container\"\n          ${ref(this.myDropdown)}\n          @click=${this._handleClick}\n          aria-expanded=\"${this.menuIsOpen}\"\n          aria-haspopup=\"menu\"\n        >\n          <slot name=\"toggler\"></slot>\n        </div>\n        <div class=\"dropdown-menu\" role=\"menu\" ${ref(this.menuRef)}>\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"names":["DropdownListElement","ref","html","dropdownStyle","dropdownMenuStyle","__decorate","property","queryAssignedElements","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-dropdown.cjs.js","sources":["../../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport { watch } from \"../../utils/watch\";\nimport dropdownMenuStyle from \"./dropdown-menu.css\";\nimport dropdownStyle from \"./dropdown.css\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\nexport type DropdownButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n * @slot toggler - slot for the toggler that triggers the open and closing of menu, typically a button. Only pass in a single element into this slot\n *\n */\nexport class SgdsDropdown extends DropdownListElement {\n  static styles = [...DropdownListElement.styles, dropdownStyle, dropdownMenuStyle];\n\n  constructor() {\n    super();\n    this.menuRef = ref();\n  }\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  @queryAssignedElements({ slot: \"toggler\", flatten: true })\n  private _toggler: Array<HTMLElement>;\n\n  protected menuRef;\n\n  private async _handleClick(e: MouseEvent) {\n    if (this.disabled) return;\n\n    const slottedToggler = this._toggler[0];\n\n    if (!slottedToggler) {\n      this.toggleMenu();\n      return;\n    }\n\n    if (e.composedPath().includes(slottedToggler)) {\n      this.toggleMenu();\n      return;\n    }\n\n    // Click landed in the toggler-container's empty area (passed through pointer-events: none)\n    if (!this.menuIsOpen) return;\n    const menu = this.menuRef.value;\n    if (menu && e.composedPath().includes(menu)) return;\n    this.hideMenu();\n  }\n\n  private _handleCloseMenu() {\n    const button = this._toggler[0];\n    button?.focus();\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async disconnectedCallback() {\n    this.removeEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n    this._handleDisabled();\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    const button = this._toggler[0];\n    if (button) {\n      if (this.disabled) {\n        button.setAttribute(\"disabled\", \"true\");\n      } else {\n        button.hasAttribute(\"disabled\") && button.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"dropdown\" @click=${this._handleClick}>\n        <div class=\"toggler-container\" ${ref(this.myDropdown)} aria-expanded=\"${this.menuIsOpen}\" aria-haspopup=\"menu\">\n          <slot name=\"toggler\"></slot>\n        </div>\n        <div class=\"dropdown-menu\" role=\"menu\" ${ref(this.menuRef)}>\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"names":["DropdownListElement","ref","html","dropdownStyle","dropdownMenuStyle","__decorate","property","queryAssignedElements","watch"],"mappings":"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"}

package/react/components/Dropdown/sgds-dropdown.js

@@ -25,11 +25,25 @@ class SgdsDropdown extends DropdownListElement {
         this.drop = "down";
         this.menuRef = ref();
     }
-    async _handleClick() {
-        if (this.disabled) {
+    async _handleClick(e) {
+        if (this.disabled)
+            return;
+        const slottedToggler = this._toggler[0];
+        if (!slottedToggler) {
+            this.toggleMenu();
+            return;
+        }
+        if (e.composedPath().includes(slottedToggler)) {
+            this.toggleMenu();
             return;
         }
-        this.toggleMenu();
+        // Click landed in the toggler-container's empty area (passed through pointer-events: none)
+        if (!this.menuIsOpen)
+            return;
+        const menu = this.menuRef.value;
+        if (menu && e.composedPath().includes(menu))
+            return;
+        this.hideMenu();
     }
     _handleCloseMenu() {
         const button = this._toggler[0];
@@ -62,14 +76,8 @@ class SgdsDropdown extends DropdownListElement {
     }
     render() {
         return html `
-      <div class="dropdown">
-        <div
-          class="toggler-container"
-          ${ref(this.myDropdown)}
-          @click=${this._handleClick}
-          aria-expanded="${this.menuIsOpen}"
-          aria-haspopup="menu"
-        >
+      <div class="dropdown" @click=${this._handleClick}>
+        <div class="toggler-container" ${ref(this.myDropdown)} aria-expanded="${this.menuIsOpen}" aria-haspopup="menu">
           <slot name="toggler"></slot>
         </div>
         <div class="dropdown-menu" role="menu" ${ref(this.menuRef)}>

package/react/components/Dropdown/sgds-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-dropdown.js","sources":["../../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport { watch } from \"../../utils/watch\";\nimport dropdownMenuStyle from \"./dropdown-menu.css\";\nimport dropdownStyle from \"./dropdown.css\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\nexport type DropdownButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n * @slot toggler - slot for the toggler that triggers the open and closing of menu, typically a button. Only pass in a single element into this slot\n *\n */\nexport class SgdsDropdown extends DropdownListElement {\n  static styles = [...DropdownListElement.styles, dropdownStyle, dropdownMenuStyle];\n\n  constructor() {\n    super();\n    this.menuRef = ref();\n  }\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  @queryAssignedElements({ slot: \"toggler\", flatten: true })\n  private _toggler: Array<HTMLElement>;\n\n  protected menuRef;\n\n  private async _handleClick() {\n    if (this.disabled) {\n      return;\n    }\n    this.toggleMenu();\n  }\n\n  private _handleCloseMenu() {\n    const button = this._toggler[0];\n    button?.focus();\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async disconnectedCallback() {\n    this.removeEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n    this._handleDisabled();\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    const button = this._toggler[0];\n    if (button) {\n      if (this.disabled) {\n        button.setAttribute(\"disabled\", \"true\");\n      } else {\n        button.hasAttribute(\"disabled\") && button.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"dropdown\">\n        <div\n          class=\"toggler-container\"\n          ${ref(this.myDropdown)}\n          @click=${this._handleClick}\n          aria-expanded=\"${this.menuIsOpen}\"\n          aria-haspopup=\"menu\"\n        >\n          <slot name=\"toggler\"></slot>\n        </div>\n        <div class=\"dropdown-menu\" role=\"menu\" ${ref(this.menuRef)}>\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"names":["dropdownStyle","dropdownMenuStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-dropdown.js","sources":["../../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport { watch } from \"../../utils/watch\";\nimport dropdownMenuStyle from \"./dropdown-menu.css\";\nimport dropdownStyle from \"./dropdown.css\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\nexport type DropdownButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n * @slot toggler - slot for the toggler that triggers the open and closing of menu, typically a button. Only pass in a single element into this slot\n *\n */\nexport class SgdsDropdown extends DropdownListElement {\n  static styles = [...DropdownListElement.styles, dropdownStyle, dropdownMenuStyle];\n\n  constructor() {\n    super();\n    this.menuRef = ref();\n  }\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  @queryAssignedElements({ slot: \"toggler\", flatten: true })\n  private _toggler: Array<HTMLElement>;\n\n  protected menuRef;\n\n  private async _handleClick(e: MouseEvent) {\n    if (this.disabled) return;\n\n    const slottedToggler = this._toggler[0];\n\n    if (!slottedToggler) {\n      this.toggleMenu();\n      return;\n    }\n\n    if (e.composedPath().includes(slottedToggler)) {\n      this.toggleMenu();\n      return;\n    }\n\n    // Click landed in the toggler-container's empty area (passed through pointer-events: none)\n    if (!this.menuIsOpen) return;\n    const menu = this.menuRef.value;\n    if (menu && e.composedPath().includes(menu)) return;\n    this.hideMenu();\n  }\n\n  private _handleCloseMenu() {\n    const button = this._toggler[0];\n    button?.focus();\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async disconnectedCallback() {\n    this.removeEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n    this._handleDisabled();\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    const button = this._toggler[0];\n    if (button) {\n      if (this.disabled) {\n        button.setAttribute(\"disabled\", \"true\");\n      } else {\n        button.hasAttribute(\"disabled\") && button.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"dropdown\" @click=${this._handleClick}>\n        <div class=\"toggler-container\" ${ref(this.myDropdown)} aria-expanded=\"${this.menuIsOpen}\" aria-haspopup=\"menu\">\n          <slot name=\"toggler\"></slot>\n        </div>\n        <div class=\"dropdown-menu\" role=\"menu\" ${ref(this.menuRef)}>\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"names":["dropdownStyle","dropdownMenuStyle"],"mappings":"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"}

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

@@ -43,7 +43,6 @@ class SgdsIconCard extends cardElement.CardElement {
         return (element.querySelector("a") || element);
     }
     firstUpdated(changedProperties) {
-        var _a, _b;
         super.firstUpdated(changedProperties);
         if (this._iconNode.length === 0) {
             if ((this.orientation === "vertical" && this._upperNode.length === 0) || this.orientation === "horizontal") {
@@ -55,14 +54,9 @@ class SgdsIconCard extends cardElement.CardElement {
             }
         }
         if (this.stretchedLink) {
-            const footerHref = (_a = this.footerSlotItems) === null || _a === void 0 ? void 0 : _a.href;
-            const linkHref = (_b = this.linkSlotItems) === null || _b === void 0 ? void 0 : _b.href;
-            if (footerHref) {
-                this.card.setAttribute("href", footerHref);
-            }
-            else if (linkHref) {
-                this.card.setAttribute("href", linkHref);
-            }
+            const footerAnchor = this.footerSlotItems;
+            const linkAnchor = this.linkSlotItems;
+            this._forwardAnchorAttributes((footerAnchor === null || footerAnchor === void 0 ? void 0 : footerAnchor.href) ? footerAnchor : linkAnchor);
         }
     }
     render() {