@govtechsg/sgds-web-component 3.2.0-rc.0 → 3.2.0-rc.1

package/package.json

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

package/react/badge/index.cjs.js

@@ -35,7 +35,9 @@ var index = react.createComponent({
     elementClass: sgdsBadge.SgdsBadge,
     events: {
         onSgdsShow: "sgds-show",
-        onSgdsHide: "sgds-hide"
+        onSgdsHide: "sgds-hide",
+        onSgdsAfterShow: "sgds-after-show",
+        onSgdsAfterHide: "sgds-after-hide"
     }
 });
 

package/react/badge/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/react/badge/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Badge/sgds-badge\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-badge\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-badge\",\n  elementClass: Component,\n  events: {\n    onSgdsShow: \"sgds-show\",\n    onSgdsHide: \"sgds-hide\"\n  }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,YAAY,EAAEC,mBAAS,CAAC,CAAC;AAElC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAEF,mBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,UAAU,EAAE,WAAW;AACxB,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/badge/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Badge/sgds-badge\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-badge\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-badge\",\n  elementClass: Component,\n  events: {\n    onSgdsShow: \"sgds-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,YAAY,EAAEC,mBAAS,CAAC,CAAC;AAElC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAEF,mBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/badge/index.js

@@ -11,7 +11,9 @@ var index = createComponent({
     elementClass: SgdsBadge,
     events: {
         onSgdsShow: "sgds-show",
-        onSgdsHide: "sgds-hide"
+        onSgdsHide: "sgds-hide",
+        onSgdsAfterShow: "sgds-after-show",
+        onSgdsAfterHide: "sgds-after-hide"
     }
 });
 

package/react/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/badge/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Badge/sgds-badge\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-badge\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-badge\",\n  elementClass: Component,\n  events: {\n    onSgdsShow: \"sgds-show\",\n    onSgdsHide: \"sgds-hide\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,YAAY,EAAEA,SAAS,CAAC,CAAC;AAElC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAEA,SAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,UAAU,EAAE,WAAW;AACxB,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/badge/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Badge/sgds-badge\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-badge\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-badge\",\n  elementClass: Component,\n  events: {\n    onSgdsShow: \"sgds-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,YAAY,EAAEA,SAAS,CAAC,CAAC;AAElC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAEA,SAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/base/button.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-body);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
+var css_248z = lit.css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-min);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-body);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=button.cjs.js.map

package/react/base/button.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-body);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
+var css_248z = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-min);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-body);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=button.js.map

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

@@ -5,30 +5,81 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var decorators_js = require('lit/decorators.js');
+var sgdsLink = require('../components/Link/sgds-link.cjs.js');
+var sgdsElement = require('./sgds-element.cjs.js');
 var card = require('./card.cjs.js');
 var textVariants = require('../styles/text-variants.cjs.js');
 var bgVariants = require('../styles/bg-variants.cjs.js');
 var borderVariants = require('../styles/border-variants.cjs.js');
 var headerClass = require('../styles/header-class.cjs.js');
 var paragraph = require('../styles/paragraph.cjs.js');
-var sgdsElement = require('./sgds-element.cjs.js');
 
 class CardElement extends sgdsElement["default"] {
     constructor() {
         super(...arguments);
+        /** Extends the link passed in slot[name="link"] to the entire card */
+        this.stretchedLink = false;
+        /** Disables the card  */
+        this.disabled = false;
         /** When true, hides the default border of the card. */
         this.hideBorder = false;
         /** When true, applies a tinted background color to the card. */
         this.tinted = false;
+        /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
+        this.orientation = "vertical";
+    }
+    firstUpdated() {
+        if (this.disabled && this._linkNode.length > 0) {
+            const hyperlink = this._linkNode[0].querySelector("a");
+            hyperlink.setAttribute("disabled", "true");
+            hyperlink.removeAttribute("href");
+        }
+    }
+    handleTitleSlotChange(e) {
+        const childNodes = e.target.assignedNodes({ flatten: true });
+        if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {
+            const hyperlink = childNodes[0].querySelector("a") || childNodes[0];
+            hyperlink.removeAttribute("href");
+        }
+        return;
+    }
+    handleLinkSlotChange(e) {
+        const childNodes = e.target.assignedNodes({ flatten: true });
+        if (childNodes.length > 1) {
+            return console.error("Multiple elements passed into SgdsCard's link slot");
+        }
+        if (!this.stretchedLink)
+            return;
+        if (childNodes[0] instanceof HTMLAnchorElement || childNodes[0] instanceof sgdsLink.SgdsLink) {
+            const hyperlink = (childNodes[0].querySelector("a") || childNodes[0]);
+            this.card.setAttribute("href", hyperlink.href);
+            const linkSlot = this.shadowRoot.querySelector("slot[name='link']");
+            linkSlot.style.display = "none";
+        }
     }
 }
 CardElement.styles = [...sgdsElement["default"].styles, textVariants["default"], bgVariants["default"], borderVariants["default"], headerClass["default"], paragraph["default"], card["default"]];
+tslib.__decorate([
+    decorators_js.query("a.card")
+], CardElement.prototype, "card", void 0);
+tslib.__decorate([
+    decorators_js.queryAssignedNodes({ slot: "link", flatten: true })
+], CardElement.prototype, "_linkNode", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true })
+], CardElement.prototype, "stretchedLink", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true })
+], CardElement.prototype, "disabled", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], CardElement.prototype, "hideBorder", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], CardElement.prototype, "tinted", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String, reflect: true })
+], CardElement.prototype, "orientation", void 0);
 
 exports.CardElement = CardElement;
 //# sourceMappingURL=card-element.cjs.js.map

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 } from \"lit/decorators.js\";\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\nimport SgdsElement from \"./sgds-element\";\n\nexport class CardElement extends SgdsElement {\n  static styles = [...SgdsElement.styles, textStyles, bgStyles, borderStyles, headerStyles, paragraphStyles, cardStyle];\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"],"names":["SgdsElement","textStyles","bgStyles","borderStyles","headerStyles","paragraphStyles","cardStyle","__decorate","property"],"mappings":";;;;;;;;;;;;;;;AAUM,MAAO,WAAY,SAAQA,sBAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAI8C,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;;QAGnB,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAC5D;;AAPQ,WAAM,CAAA,MAAA,GAAG,CAAC,GAAGA,sBAAW,CAAC,MAAM,EAAEC,uBAAU,EAAEC,qBAAQ,EAAEC,yBAAY,EAAEC,sBAAY,EAAEC,oBAAe,EAAEC,eAAS,CAAC,CAAC;AAG1EC,gBAAA,CAAA;IAA3CC,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;AAGnBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"card-element.cjs.js","sources":["../../../src/base/card-element.ts"],"sourcesContent":["import { property, query, queryAssignedNodes } 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  /** @internal */\n  @queryAssignedNodes({ slot: \"link\", flatten: true })\n  _linkNode!: Array<Node>;\n\n  /** Extends the link passed in slot[name=\"link\"] to the entire card */\n  @property({ type: Boolean, reflect: true }) stretchedLink = false;\n\n  /** Disables the card  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** 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  protected firstUpdated() {\n    if (this.disabled && this._linkNode.length > 0) {\n      const hyperlink = (this._linkNode[0] as HTMLLinkElement).querySelector(\"a\");\n      hyperlink.setAttribute(\"disabled\", \"true\");\n      hyperlink.removeAttribute(\"href\");\n    }\n  }\n\n  handleTitleSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLElement>;\n\n    if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {\n      const hyperlink = childNodes[0].querySelector(\"a\") || childNodes[0];\n      hyperlink.removeAttribute(\"href\");\n    }\n    return;\n  }\n\n  handleLinkSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as\n      | Array<HTMLLinkElement>\n      | Array<HTMLAnchorElement>\n      | Array<SgdsLink>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's link slot\");\n    }\n\n    if (!this.stretchedLink) return;\n\n    if (childNodes[0] instanceof HTMLAnchorElement || childNodes[0] instanceof SgdsLink) {\n      const hyperlink = (childNodes[0].querySelector(\"a\") || childNodes[0]) as HTMLAnchorElement;\n      this.card.setAttribute(\"href\", hyperlink.href);\n      const linkSlot = this.shadowRoot.querySelector(\"slot[name='link']\") as HTMLSlotElement;\n      linkSlot.style.display = \"none\";\n    }\n  }\n}\n"],"names":["SgdsElement","SgdsLink","textStyles","bgStyles","borderStyles","headerStyles","paragraphStyles","cardStyle","__decorate","query","queryAssignedNodes","property"],"mappings":";;;;;;;;;;;;;;;;AAWM,MAAO,WAAY,SAAQA,sBAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAW8C,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;KAuCtF;IArCW,YAAY,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;AAC9C,YAAA,MAAM,SAAS,GAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAqB,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;AAC5E,YAAA,SAAS,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AAC3C,YAAA,SAAS,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;SACnC;KACF;AAED,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,oBAAoB,CAAC,CAAQ,EAAA;AAC3B,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;QAED,IAAI,CAAC,IAAI,CAAC,aAAa;YAAE,OAAO;AAEhC,QAAA,IAAI,UAAU,CAAC,CAAC,CAAC,YAAY,iBAAiB,IAAI,UAAU,CAAC,CAAC,CAAC,YAAYC,iBAAQ,EAAE;AACnF,YAAA,MAAM,SAAS,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAsB,CAAC;YAC3F,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;YAC/C,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAoB,CAAC;AACvF,YAAA,QAAQ,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;SACjC;KACF;;AA5DM,WAAM,CAAA,MAAA,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,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;AAIzCD,gBAAA,CAAA;IADCE,gCAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGoBF,gBAAA,CAAA;IAA3CG,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;AAGtBH,gBAAA,CAAA;IAA3CG,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;AAGjBH,gBAAA,CAAA;IAA3CG,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;AAGnBH,gBAAA,CAAA;IAA3CG,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;AAGhBH,gBAAA,CAAA;IAA1CG,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA2C,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/base/card-element.js

@@ -1,30 +1,81 @@
 'use client';
 import { __decorate } from 'tslib';
-import { property } from 'lit/decorators.js';
+import { query, queryAssignedNodes, property } from 'lit/decorators.js';
+import { SgdsLink } from '../components/Link/sgds-link.js';
+import SgdsElement from './sgds-element.js';
 import css_248z$5 from './card.js';
 import css_248z from '../styles/text-variants.js';
 import css_248z$1 from '../styles/bg-variants.js';
 import css_248z$2 from '../styles/border-variants.js';
 import css_248z$3 from '../styles/header-class.js';
 import css_248z$4 from '../styles/paragraph.js';
-import SgdsElement from './sgds-element.js';
 
 class CardElement extends SgdsElement {
     constructor() {
         super(...arguments);
+        /** Extends the link passed in slot[name="link"] to the entire card */
+        this.stretchedLink = false;
+        /** Disables the card  */
+        this.disabled = false;
         /** When true, hides the default border of the card. */
         this.hideBorder = false;
         /** When true, applies a tinted background color to the card. */
         this.tinted = false;
+        /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
+        this.orientation = "vertical";
+    }
+    firstUpdated() {
+        if (this.disabled && this._linkNode.length > 0) {
+            const hyperlink = this._linkNode[0].querySelector("a");
+            hyperlink.setAttribute("disabled", "true");
+            hyperlink.removeAttribute("href");
+        }
+    }
+    handleTitleSlotChange(e) {
+        const childNodes = e.target.assignedNodes({ flatten: true });
+        if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {
+            const hyperlink = childNodes[0].querySelector("a") || childNodes[0];
+            hyperlink.removeAttribute("href");
+        }
+        return;
+    }
+    handleLinkSlotChange(e) {
+        const childNodes = e.target.assignedNodes({ flatten: true });
+        if (childNodes.length > 1) {
+            return console.error("Multiple elements passed into SgdsCard's link slot");
+        }
+        if (!this.stretchedLink)
+            return;
+        if (childNodes[0] instanceof HTMLAnchorElement || childNodes[0] instanceof SgdsLink) {
+            const hyperlink = (childNodes[0].querySelector("a") || childNodes[0]);
+            this.card.setAttribute("href", hyperlink.href);
+            const linkSlot = this.shadowRoot.querySelector("slot[name='link']");
+            linkSlot.style.display = "none";
+        }
     }
 }
 CardElement.styles = [...SgdsElement.styles, css_248z, css_248z$1, css_248z$2, css_248z$3, css_248z$4, css_248z$5];
+__decorate([
+    query("a.card")
+], CardElement.prototype, "card", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "link", flatten: true })
+], CardElement.prototype, "_linkNode", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CardElement.prototype, "stretchedLink", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CardElement.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], CardElement.prototype, "hideBorder", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], CardElement.prototype, "tinted", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], CardElement.prototype, "orientation", void 0);
 
 export { CardElement };
 //# sourceMappingURL=card-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card-element.js","sources":["../../../src/base/card-element.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\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\nimport SgdsElement from \"./sgds-element\";\n\nexport class CardElement extends SgdsElement {\n  static styles = [...SgdsElement.styles, textStyles, bgStyles, borderStyles, headerStyles, paragraphStyles, cardStyle];\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"],"names":["textStyles","bgStyles","borderStyles","headerStyles","paragraphStyles","cardStyle"],"mappings":";;;;;;;;;;;AAUM,MAAO,WAAY,SAAQ,WAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAI8C,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;;QAGnB,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAC5D;;AAPQ,WAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,EAAEC,UAAQ,EAAEC,UAAY,EAAEC,UAAY,EAAEC,UAAe,EAAEC,UAAS,CAAC,CAAC;AAG1E,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;;;;"}
+{"version":3,"file":"card-element.js","sources":["../../../src/base/card-element.ts"],"sourcesContent":["import { property, query, queryAssignedNodes } 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  /** @internal */\n  @queryAssignedNodes({ slot: \"link\", flatten: true })\n  _linkNode!: Array<Node>;\n\n  /** Extends the link passed in slot[name=\"link\"] to the entire card */\n  @property({ type: Boolean, reflect: true }) stretchedLink = false;\n\n  /** Disables the card  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** 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  protected firstUpdated() {\n    if (this.disabled && this._linkNode.length > 0) {\n      const hyperlink = (this._linkNode[0] as HTMLLinkElement).querySelector(\"a\");\n      hyperlink.setAttribute(\"disabled\", \"true\");\n      hyperlink.removeAttribute(\"href\");\n    }\n  }\n\n  handleTitleSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLElement>;\n\n    if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {\n      const hyperlink = childNodes[0].querySelector(\"a\") || childNodes[0];\n      hyperlink.removeAttribute(\"href\");\n    }\n    return;\n  }\n\n  handleLinkSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as\n      | Array<HTMLLinkElement>\n      | Array<HTMLAnchorElement>\n      | Array<SgdsLink>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's link slot\");\n    }\n\n    if (!this.stretchedLink) return;\n\n    if (childNodes[0] instanceof HTMLAnchorElement || childNodes[0] instanceof SgdsLink) {\n      const hyperlink = (childNodes[0].querySelector(\"a\") || childNodes[0]) as HTMLAnchorElement;\n      this.card.setAttribute(\"href\", hyperlink.href);\n      const linkSlot = this.shadowRoot.querySelector(\"slot[name='link']\") as HTMLSlotElement;\n      linkSlot.style.display = \"none\";\n    }\n  }\n}\n"],"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([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([tinted]) .card{background-color:var(--sgds-bg-translucent-subtle);border:none}: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=vertical][imageAdjustment="padding around"]) .card-image{padding:var(--sgds-padding-xl) var(--sgds-padding-xl) 0}:host([orientation=vertical][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-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:auto;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{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.card-image{flex:1}.card-body{display:flex;flex:1;flex-direction:column;gap:var(--sgds-gap-lg);padding:var(--sgds-padding-xl)}.card-body,.card-title{color:var(--sgds-body-color-default)}.card-title{--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold)}.card-subtitle,.card-text,.card-title{margin-bottom:var(--sgds-margin-none)}slot[name=title]::slotted(a){--sgds-font-size-2:var(--sgds-font-size-4);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle)}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%}: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}slot[name=link]::slotted(*){font-weight:700;margin-top:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);display:inline-flex;gap:var(--sgds-gap-2-xs);text-decoration:none!important}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=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
+var css_248z = lit.css`: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-sm) var(--sgds-margin-sm) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-sm) 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{cursor:not-allowed;opacity:var(--sgds-opacity-50)}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-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-thumbnail{align-items:center;border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-full);display:flex;height:var(--sgds-dimension-80);justify-content:center;width:var(--sgds-dimension-80)}.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{--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold)}.card-subtitle,.card-text,.card-title{margin-bottom:var(--sgds-margin-none)}slot[name=subtitle]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-4:var(--sgds-font-size-1);--sgds-font-size-5:var(--sgds-font-size-1);--sgds-font-size-6:var(--sgds-font-size-1);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);--sgds-line-height-heading:var(--sgds-line-height-min);--sgds-letter-spacing-tight:var(--sgds-letter-spacing-wide);color:var(--sgds-color-default);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-wide);line-height:var(--sgds-line-height-min);margin:var(--sgds-margin-none);text-transform:uppercase}slot[name=title]::slotted(a){--sgds-font-size-2:var(--sgds-font-size-4);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle)}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=link]::slotted(*){font-weight:700;margin-top:auto;padding-top:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);display:inline-flex;gap:var(--sgds-gap-2-xs);height:auto!important;text-decoration:none!important}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=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-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([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([tinted]) .card{background-color:var(--sgds-bg-translucent-subtle);border:none}: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=vertical][imageAdjustment="padding around"]) .card-image{padding:var(--sgds-padding-xl) var(--sgds-padding-xl) 0}:host([orientation=vertical][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-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:auto;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{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.card-image{flex:1}.card-body{display:flex;flex:1;flex-direction:column;gap:var(--sgds-gap-lg);padding:var(--sgds-padding-xl)}.card-body,.card-title{color:var(--sgds-body-color-default)}.card-title{--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold)}.card-subtitle,.card-text,.card-title{margin-bottom:var(--sgds-margin-none)}slot[name=title]::slotted(a){--sgds-font-size-2:var(--sgds-font-size-4);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle)}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%}: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}slot[name=link]::slotted(*){font-weight:700;margin-top:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);display:inline-flex;gap:var(--sgds-gap-2-xs);text-decoration:none!important}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=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
+var css_248z = css`: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-sm) var(--sgds-margin-sm) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-sm) 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{cursor:not-allowed;opacity:var(--sgds-opacity-50)}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-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-thumbnail{align-items:center;border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-full);display:flex;height:var(--sgds-dimension-80);justify-content:center;width:var(--sgds-dimension-80)}.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{--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold)}.card-subtitle,.card-text,.card-title{margin-bottom:var(--sgds-margin-none)}slot[name=subtitle]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-4:var(--sgds-font-size-1);--sgds-font-size-5:var(--sgds-font-size-1);--sgds-font-size-6:var(--sgds-font-size-1);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);--sgds-line-height-heading:var(--sgds-line-height-min);--sgds-letter-spacing-tight:var(--sgds-letter-spacing-wide);color:var(--sgds-color-default);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-wide);line-height:var(--sgds-line-height-min);margin:var(--sgds-margin-none);text-transform:uppercase}slot[name=title]::slotted(a){--sgds-font-size-2:var(--sgds-font-size-4);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle)}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=link]::slotted(*){font-weight:700;margin-top:auto;padding-top:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);display:inline-flex;gap:var(--sgds-gap-2-xs);height:auto!important;text-decoration:none!important}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=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=card.js.map

package/react/components/Badge/sgds-badge.cjs.js

@@ -8,9 +8,9 @@ var lit = require('lit');
 var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
-var badge = require('./badge.cjs.js');
-var watch = require('../../utils/watch.cjs.js');
 var sgdsCloseButton = require('../../internals/CloseButton/sgds-close-button.cjs.js');
+var watch = require('../../utils/watch.cjs.js');
+var badge = require('./badge.cjs.js');
 
 /**
  * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
@@ -19,7 +19,9 @@ var sgdsCloseButton = require('../../internals/CloseButton/sgds-close-button.cjs
  * @slot icon - The slot for icon to the left of the badge text
  *
  * @event sgds-show - Emitted when the badge appears.
- * @event sgds-hide - Emitted after the badge closes.
+ * @event sgds-hide - Emitted when the badge is starting to close but has not closed.
+ * @event sgds-after-show - Emitted after the badge has appeared
+ * @event sgds-after-hide - Emitted after the badge has closed
  */
 class SgdsBadge extends sgdsElement["default"] {
     constructor() {
@@ -39,7 +41,24 @@ class SgdsBadge extends sgdsElement["default"] {
     }
     /**@internal */
     _handleShowChange() {
-        this.show ? this.emit("sgds-show") : this.emit("sgds-hide");
+        if (this.show) {
+            const sgdsShow = this.emit("sgds-show", { cancelable: true });
+            if (sgdsShow.defaultPrevented) {
+                this.show = false;
+                return;
+            }
+            // animations if any go here
+            this.emit("sgds-after-show");
+        }
+        else {
+            const sgdsHide = this.emit("sgds-hide", { cancelable: true });
+            if (sgdsHide.defaultPrevented) {
+                this.show = true;
+                return;
+            }
+            // animations if any go here
+            this.emit("sgds-after-hide");
+        }
     }
     render() {
         return (this.dismissible && this.show) || !this.dismissible

package/react/components/Badge/sgds-badge.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-badge.cjs.js","sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport badgeStyle from \"./badge.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nexport type BadgeVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted after the badge closes.\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `info`, `success`, `danger`, `warning`, 'neutral' */\n  @property({ reflect: true }) variant: BadgeVariant = \"info\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"  \n          ${classMap({\n              [`badge-dismissible`]: this.dismissible,\n              badge: true,\n              outlined: this.outlined\n            })}\n            \"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n            <span class=\"badge-label\">\n              <slot></slot>\n            </span>\n\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  size=\"sm\"\n                  aria-label=\"close the badge\"\n                  @click=${this.close}\n                  variant=${this.outlined ? \"dark\" : \"light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["SgdsElement","html","classMap","nothing","badgeStyle","SgdsCloseButton","__decorate","property","watch"],"mappings":";;;;;;;;;;;;;;AASA;;;;;;;;AAQG;AACG,MAAO,SAAU,SAAQA,sBAAW,CAAA;AAA1C,IAAA,WAAA,GAAA;;;QAS8C,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAG5B,IAAO,CAAA,OAAA,GAAiB,MAAM,CAAC;;QAGhB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;KA0CjE;;IAvCQ,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;;IAGD,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7D;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW;cACvDC,QAAI,CAAA,CAAA;;;AAGA,UAAA,EAAAC,oBAAQ,CAAC;AACP,gBAAA,CAAC,CAAmB,iBAAA,CAAA,GAAG,IAAI,CAAC,WAAW;AACvC,gBAAA,KAAK,EAAE,IAAI;gBACX,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAA;;0BAEY,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,CAAA;;AAExC,YAAA,EAAA,CAAC,IAAI,CAAC,WAAW,GAAGD,QAAI,CAAA,CAA2B,yBAAA,CAAA,GAAGE,WAAO,CAAA;;;;;AAK7D,YAAA,EAAA,IAAI,CAAC,WAAW;kBACdF,QAAI,CAAA,CAAA;;;AAGO,yBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;4BACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AACtB,qCAAA,CAAA;AACxB,kBAAEE,WAAO,CAAA;;AAEd,QAAA,CAAA;cACDA,WAAO,CAAC;KACb;;AA1DM,SAAM,CAAA,MAAA,GAAG,CAAC,GAAGH,sBAAW,CAAC,MAAM,EAAEI,gBAAU,CAArC,CAAuC;AAEpD;AACO,SAAA,CAAA,YAAY,GAAG;AACpB,IAAA,mBAAmB,EAAEC,+BAAe;AACrC,CAFkB,CAEjB;AAG0CC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG5BD,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgC,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjBD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQhED,gBAAA,CAAA;IADCE,WAAK,CAAC,MAAM,CAAC;AAGb,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,IAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-badge.cjs.js","sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport { watch } from \"../../utils/watch\";\nimport badgeStyle from \"./badge.css\";\nexport type BadgeVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted when the badge is starting to close but has not closed.\n * @event sgds-after-show - Emitted after the badge has appeared\n * @event sgds-after-hide - Emitted after the badge has closed\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `info`, `success`, `danger`, `warning`, 'neutral' */\n  @property({ reflect: true }) variant: BadgeVariant = \"info\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    if (this.show) {\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.show = false;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.show = true;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"  \n          ${classMap({\n              [`badge-dismissible`]: this.dismissible,\n              badge: true,\n              outlined: this.outlined\n            })}\n            \"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n            <span class=\"badge-label\">\n              <slot></slot>\n            </span>\n\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  size=\"sm\"\n                  aria-label=\"close the badge\"\n                  @click=${this.close}\n                  variant=${this.outlined ? \"dark\" : \"light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["SgdsElement","html","classMap","nothing","badgeStyle","SgdsCloseButton","__decorate","property","watch"],"mappings":"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"}

package/react/components/Badge/sgds-badge.js

@@ -4,9 +4,9 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import SgdsElement from '../../base/sgds-element.js';
-import css_248z from './badge.js';
-import { watch } from '../../utils/watch.js';
 import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.js';
+import { watch } from '../../utils/watch.js';
+import css_248z from './badge.js';
 
 /**
  * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
@@ -15,7 +15,9 @@ import { SgdsCloseButton } from '../../internals/CloseButton/sgds-close-button.j
  * @slot icon - The slot for icon to the left of the badge text
  *
  * @event sgds-show - Emitted when the badge appears.
- * @event sgds-hide - Emitted after the badge closes.
+ * @event sgds-hide - Emitted when the badge is starting to close but has not closed.
+ * @event sgds-after-show - Emitted after the badge has appeared
+ * @event sgds-after-hide - Emitted after the badge has closed
  */
 class SgdsBadge extends SgdsElement {
     constructor() {
@@ -35,7 +37,24 @@ class SgdsBadge extends SgdsElement {
     }
     /**@internal */
     _handleShowChange() {
-        this.show ? this.emit("sgds-show") : this.emit("sgds-hide");
+        if (this.show) {
+            const sgdsShow = this.emit("sgds-show", { cancelable: true });
+            if (sgdsShow.defaultPrevented) {
+                this.show = false;
+                return;
+            }
+            // animations if any go here
+            this.emit("sgds-after-show");
+        }
+        else {
+            const sgdsHide = this.emit("sgds-hide", { cancelable: true });
+            if (sgdsHide.defaultPrevented) {
+                this.show = true;
+                return;
+            }
+            // animations if any go here
+            this.emit("sgds-after-hide");
+        }
     }
     render() {
         return (this.dismissible && this.show) || !this.dismissible

package/react/components/Badge/sgds-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-badge.js","sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport badgeStyle from \"./badge.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nexport type BadgeVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted after the badge closes.\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `info`, `success`, `danger`, `warning`, 'neutral' */\n  @property({ reflect: true }) variant: BadgeVariant = \"info\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"  \n          ${classMap({\n              [`badge-dismissible`]: this.dismissible,\n              badge: true,\n              outlined: this.outlined\n            })}\n            \"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n            <span class=\"badge-label\">\n              <slot></slot>\n            </span>\n\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  size=\"sm\"\n                  aria-label=\"close the badge\"\n                  @click=${this.close}\n                  variant=${this.outlined ? \"dark\" : \"light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["badgeStyle"],"mappings":";;;;;;;;;;AASA;;;;;;;;AAQG;AACG,MAAO,SAAU,SAAQ,WAAW,CAAA;AAA1C,IAAA,WAAA,GAAA;;;QAS8C,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAG5B,IAAO,CAAA,OAAA,GAAiB,MAAM,CAAC;;QAGhB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;KA0CjE;;IAvCQ,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;;IAGD,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7D;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW;cACvD,IAAI,CAAA,CAAA;;;AAGA,UAAA,EAAA,QAAQ,CAAC;AACP,gBAAA,CAAC,CAAmB,iBAAA,CAAA,GAAG,IAAI,CAAC,WAAW;AACvC,gBAAA,KAAK,EAAE,IAAI;gBACX,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAA;;0BAEY,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,CAAA;;AAExC,YAAA,EAAA,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA,CAA2B,yBAAA,CAAA,GAAG,OAAO,CAAA;;;;;AAK7D,YAAA,EAAA,IAAI,CAAC,WAAW;kBACd,IAAI,CAAA,CAAA;;;AAGO,yBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;4BACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AACtB,qCAAA,CAAA;AACxB,kBAAE,OAAO,CAAA;;AAEd,QAAA,CAAA;cACD,OAAO,CAAC;KACb;;AA1DM,SAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAEpD;AACO,SAAA,CAAA,YAAY,GAAG;AACpB,IAAA,mBAAmB,EAAE,eAAe;AACrC,CAFkB,CAEjB;AAG0C,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG5B,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgC,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,SAAA,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;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQhE,UAAA,CAAA;IADC,KAAK,CAAC,MAAM,CAAC;AAGb,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,IAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-badge.js","sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsCloseButton from \"../../internals/CloseButton/sgds-close-button\";\nimport { watch } from \"../../utils/watch\";\nimport badgeStyle from \"./badge.css\";\nexport type BadgeVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted when the badge is starting to close but has not closed.\n * @event sgds-after-show - Emitted after the badge has appeared\n * @event sgds-after-hide - Emitted after the badge has closed\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `info`, `success`, `danger`, `warning`, 'neutral' */\n  @property({ reflect: true }) variant: BadgeVariant = \"info\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    if (this.show) {\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.show = false;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.show = true;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"  \n          ${classMap({\n              [`badge-dismissible`]: this.dismissible,\n              badge: true,\n              outlined: this.outlined\n            })}\n            \"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n            <span class=\"badge-label\">\n              <slot></slot>\n            </span>\n\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  size=\"sm\"\n                  aria-label=\"close the badge\"\n                  @click=${this.close}\n                  variant=${this.outlined ? \"dark\" : \"light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"names":["badgeStyle"],"mappings":"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"}

package/react/components/Breadcrumb/sgds-breadcrumb.cjs.js

@@ -8,7 +8,7 @@ var decorators_js = require('lit/decorators.js');
 var ifDefined_js = require('lit/directives/if-defined.js');
 var staticHtml_js = require('lit/static-html.js');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
-var sgdsOverflowMenu = require('../../internals/OverflowMenu/sgds-overflow-menu.cjs.js');
+var sgdsOverflowMenu = require('../OverflowMenu/sgds-overflow-menu.cjs.js');
 var breadcrumb = require('./breadcrumb.cjs.js');
 
 /**

package/react/components/Breadcrumb/sgds-breadcrumb.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-breadcrumb.cjs.js","sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsOverflowMenu from \"../../internals/OverflowMenu/sgds-overflow-menu\";\nimport breadcrumbStyle from \"./breadcrumb.css\";\nimport type SgdsBreadcrumbItem from \"./sgds-breadcrumb-item\";\n/**\n * @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.\n *\n * @slot default - The slot to pass in custom elements of `SgdsBreadcrumbItems`.\n *\n */\nexport class SgdsBreadcrumb extends SgdsElement {\n  static styles = [...SgdsElement.styles, breadcrumbStyle];\n  static dependencies = {\n    \"sgds-overflow-menu\": SgdsOverflowMenu\n  };\n  /** The aria-label of nav element within breadcrumb component. */\n  @property({ type: String }) ariaLabel = \"breadcrumb\";\n\n  /**@internal */\n  @query(\"slot\") defaultSlot: HTMLSlotElement;\n  /**\n   * creates `<sgds-breadcrumb-item>\n   *            <sgds-overflow-menu>\n   *              <sgds-dropdown-item></sgds-dropdown-item>\n   *               ...\n   *            </sgds-overflow-menu>\n   *          <sgds-breadcrumb-item>`\n   */\n  private _replaceExcessItemsWithDropdown(items: SgdsBreadcrumbItem[]) {\n    const breadcrumbItem = document.createElement(\"sgds-breadcrumb-item\");\n    const overflowMenu = document.createElement(\"sgds-overflow-menu\");\n    overflowMenu.setAttribute(\"aria-haspopup\", \"menu\");\n    overflowMenu.setAttribute(\"size\", \"sm\");\n    const mapItems = items.filter((item, index) => {\n      if (index > 0 && index < items.length - 2) {\n        const clonedAnchor = item.querySelector(\"a\");\n        const clonedAnchorNode = clonedAnchor.cloneNode(true);\n        const dropdownItem = document.createElement(\"sgds-dropdown-item\");\n        dropdownItem.appendChild(clonedAnchorNode);\n        overflowMenu.appendChild(dropdownItem);\n        return;\n      } else {\n        return item;\n      }\n    });\n    breadcrumbItem.appendChild(overflowMenu);\n    mapItems.splice(1, 0, breadcrumbItem);\n\n    this.defaultSlot.replaceWith(...mapItems);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(\n        (item: SgdsBreadcrumbItem) => item.tagName.toLowerCase() === \"sgds-breadcrumb-item\"\n      ) as SgdsBreadcrumbItem[];\n    items.forEach((item, index) => {\n      if (index === items.length - 1) {\n        item.setAttribute(\"aria-current\", \"page\");\n        item.active = true;\n      } else {\n        item.removeAttribute(\"aria-current\");\n      }\n    });\n\n    if (items.length >= 5) {\n      this._replaceExcessItemsWithDropdown(items);\n    }\n  }\n\n  render() {\n    return html`\n      <div aria-label=${ifDefined(this.ariaLabel)}>\n        <div class=\"breadcrumb\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsBreadcrumb;\n"],"names":["SgdsElement","html","ifDefined","breadcrumbStyle","SgdsOverflowMenu","__decorate","property","query"],"mappings":"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"}
+{"version":3,"file":"sgds-breadcrumb.cjs.js","sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsOverflowMenu from \"../OverflowMenu/sgds-overflow-menu\";\nimport breadcrumbStyle from \"./breadcrumb.css\";\nimport type SgdsBreadcrumbItem from \"./sgds-breadcrumb-item\";\n/**\n * @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.\n *\n * @slot default - The slot to pass in custom elements of `SgdsBreadcrumbItems`.\n *\n */\nexport class SgdsBreadcrumb extends SgdsElement {\n  static styles = [...SgdsElement.styles, breadcrumbStyle];\n  static dependencies = {\n    \"sgds-overflow-menu\": SgdsOverflowMenu\n  };\n  /** The aria-label of nav element within breadcrumb component. */\n  @property({ type: String }) ariaLabel = \"breadcrumb\";\n\n  /**@internal */\n  @query(\"slot\") defaultSlot: HTMLSlotElement;\n  /**\n   * creates `<sgds-breadcrumb-item>\n   *            <sgds-overflow-menu>\n   *              <sgds-dropdown-item></sgds-dropdown-item>\n   *               ...\n   *            </sgds-overflow-menu>\n   *          <sgds-breadcrumb-item>`\n   */\n  private _replaceExcessItemsWithDropdown(items: SgdsBreadcrumbItem[]) {\n    const breadcrumbItem = document.createElement(\"sgds-breadcrumb-item\");\n    const overflowMenu = document.createElement(\"sgds-overflow-menu\");\n    overflowMenu.setAttribute(\"aria-haspopup\", \"menu\");\n    overflowMenu.setAttribute(\"size\", \"sm\");\n    const mapItems = items.filter((item, index) => {\n      if (index > 0 && index < items.length - 2) {\n        const clonedAnchor = item.querySelector(\"a\");\n        const clonedAnchorNode = clonedAnchor.cloneNode(true);\n        const dropdownItem = document.createElement(\"sgds-dropdown-item\");\n        dropdownItem.appendChild(clonedAnchorNode);\n        overflowMenu.appendChild(dropdownItem);\n        return;\n      } else {\n        return item;\n      }\n    });\n    breadcrumbItem.appendChild(overflowMenu);\n    mapItems.splice(1, 0, breadcrumbItem);\n\n    this.defaultSlot.replaceWith(...mapItems);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(\n        (item: SgdsBreadcrumbItem) => item.tagName.toLowerCase() === \"sgds-breadcrumb-item\"\n      ) as SgdsBreadcrumbItem[];\n    items.forEach((item, index) => {\n      if (index === items.length - 1) {\n        item.setAttribute(\"aria-current\", \"page\");\n        item.active = true;\n      } else {\n        item.removeAttribute(\"aria-current\");\n      }\n    });\n\n    if (items.length >= 5) {\n      this._replaceExcessItemsWithDropdown(items);\n    }\n  }\n\n  render() {\n    return html`\n      <div aria-label=${ifDefined(this.ariaLabel)}>\n        <div class=\"breadcrumb\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsBreadcrumb;\n"],"names":["SgdsElement","html","ifDefined","breadcrumbStyle","SgdsOverflowMenu","__decorate","property","query"],"mappings":"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"}

package/react/components/Breadcrumb/sgds-breadcrumb.js

@@ -4,7 +4,7 @@ import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { html } from 'lit/static-html.js';
 import SgdsElement from '../../base/sgds-element.js';
-import { SgdsOverflowMenu } from '../../internals/OverflowMenu/sgds-overflow-menu.js';
+import { SgdsOverflowMenu } from '../OverflowMenu/sgds-overflow-menu.js';
 import css_248z from './breadcrumb.js';
 
 /**