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

package/base/button.js

@@ -1,6 +1,6 @@
 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/base/card-element.d.ts

@@ -1,8 +1,22 @@
+import { CardOrientation } from "../components/Card/types";
 import SgdsElement from "./sgds-element";
 export declare class CardElement extends SgdsElement {
     static styles: import("lit").CSSResult[];
+    /** @internal */
+    card: HTMLAnchorElement;
+    /** @internal */
+    _linkNode: Array<Node>;
+    /** Extends the link passed in slot[name="link"] to the entire card */
+    stretchedLink: boolean;
+    /** Disables the card  */
+    disabled: boolean;
     /** When true, hides the default border of the card. */
     hideBorder: boolean;
     /** When true, applies a tinted background color to the card. */
     tinted: boolean;
+    /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
+    orientation: CardOrientation;
+    protected firstUpdated(): void;
+    handleTitleSlotChange(e: Event): void;
+    handleLinkSlotChange(e: Event): void;
 }

package/base/card-element.js

@@ -1,29 +1,80 @@
 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/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/base/card.js

@@ -1,6 +1,6 @@
 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/components/Badge/index.umd.js

@@ -4268,45 +4268,6 @@
   /** @internal */
   SgdsElement.dependencies = {};
 
-  var css_248z$1 = css`:host{display:inline-flex}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-default)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-default)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-default)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-default)}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24);justify-content:center;min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-default);color:var(--sgds-color-fixed-dark)}.badge-label{line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}slot::slotted(*){font-size:14px;font-weight:400}`;
-
-  // @watch decorator
-  //
-  // Runs when an observed property changes, e.g. @property or @state, but before the component updates.
-  //
-  // To wait for an update to complete after a change occurs, use `await this.updateComplete` in the handler. To start
-  // watching after the initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
-  //
-  // Usage:
-  //
-  //  @watch('propName')
-  //  handlePropChange(oldValue, newValue) {
-  //    ...
-  //  }
-  function watch(propName, options) {
-      const resolvedOptions = Object.assign({ waitUntilFirstUpdate: false }, options);
-      return (proto, decoratedFnName) => {
-          // @ts-expect-error -- update is a protected property
-          const { update } = proto;
-          if (propName in proto) {
-              const propNameKey = propName;
-              // @ts-expect-error -- update is a protected property
-              proto.update = function (changedProps) {
-                  if (changedProps.has(propNameKey)) {
-                      const oldValue = changedProps.get(propNameKey);
-                      const newValue = this[propNameKey];
-                      if (oldValue !== newValue) {
-                          if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
-                              this[decoratedFnName](oldValue, newValue);
-                          }
-                      }
-                  }
-                  update.call(this, changedProps);
-              };
-          }
-      };
-  }
-
   /**
    * @license
    * Copyright 2018 Google LLC
@@ -4320,7 +4281,7 @@
    */
   const ifDefined = (value) => value ?? nothing;
 
-  var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close-light{color:var(--sgds-color-fixed-light)}.btn-close-dark{color:var(--sgds-color-fixed-dark)}.btn-close:hover{background-color:var(--sgds-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
+  var css_248z$1 = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close-light{color:var(--sgds-color-fixed-light)}.btn-close-dark{color:var(--sgds-color-fixed-dark)}.btn-close:hover{background-color:var(--sgds-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
 
   /**
    *
@@ -4387,7 +4348,7 @@
     `;
       }
   }
-  SgdsCloseButton.styles = [...SgdsElement.styles, css_248z];
+  SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$1];
   __decorate([
       property({ type: String })
   ], SgdsCloseButton.prototype, "ariaLabel", void 0);
@@ -4398,6 +4359,45 @@
       property({ type: String, reflect: true })
   ], SgdsCloseButton.prototype, "variant", void 0);
 
+  // @watch decorator
+  //
+  // Runs when an observed property changes, e.g. @property or @state, but before the component updates.
+  //
+  // To wait for an update to complete after a change occurs, use `await this.updateComplete` in the handler. To start
+  // watching after the initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+  //
+  // Usage:
+  //
+  //  @watch('propName')
+  //  handlePropChange(oldValue, newValue) {
+  //    ...
+  //  }
+  function watch(propName, options) {
+      const resolvedOptions = Object.assign({ waitUntilFirstUpdate: false }, options);
+      return (proto, decoratedFnName) => {
+          // @ts-expect-error -- update is a protected property
+          const { update } = proto;
+          if (propName in proto) {
+              const propNameKey = propName;
+              // @ts-expect-error -- update is a protected property
+              proto.update = function (changedProps) {
+                  if (changedProps.has(propNameKey)) {
+                      const oldValue = changedProps.get(propNameKey);
+                      const newValue = this[propNameKey];
+                      if (oldValue !== newValue) {
+                          if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+                              this[decoratedFnName](oldValue, newValue);
+                          }
+                      }
+                  }
+                  update.call(this, changedProps);
+              };
+          }
+      };
+  }
+
+  var css_248z = css`:host{display:inline-flex}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-default)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-default)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-default)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-default)}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24);justify-content:center;min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-default);color:var(--sgds-color-fixed-dark)}.badge-label{line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}slot::slotted(*){font-size:14px;font-weight:400}`;
+
   /**
    * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
    *
@@ -4405,7 +4405,9 @@
    * @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() {
@@ -4425,7 +4427,24 @@
       }
       /**@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
@@ -4458,7 +4477,7 @@
               : nothing;
       }
   }
-  SgdsBadge.styles = [...SgdsElement.styles, css_248z$1];
+  SgdsBadge.styles = [...SgdsElement.styles, css_248z];
   /**@internal */
   SgdsBadge.dependencies = {
       "sgds-close-button": SgdsCloseButton