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

package/components/Breadcrumb/sgds-breadcrumb.d.ts

@@ -1,5 +1,5 @@
 import SgdsElement from "../../base/sgds-element";
-import SgdsOverflowMenu from "../../internals/OverflowMenu/sgds-overflow-menu";
+import SgdsOverflowMenu from "../OverflowMenu/sgds-overflow-menu";
 /**
  * @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.
  *

package/components/Breadcrumb/sgds-breadcrumb.js

@@ -3,7 +3,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';
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-breadcrumb.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":["breadcrumbStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-breadcrumb.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":["breadcrumbStyle"],"mappings":"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"}

package/components/Button/index.umd.js

@@ -4554,7 +4554,7 @@
   /** @internal */
   SgdsElement.dependencies = {};
 
-  var css_248z$2 = 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$2 = 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)}`;
 
   class ButtonElement extends SgdsElement {
       constructor() {

package/components/Card/card.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host([orientation=horizontal]) .card-icon{padding:var(--sgds-padding-xl) 0 var(--sgds-padding-xl) var(--sgds-padding-xl)}.card-icon{line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) 0}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}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}`;
+var css_248z = css`:host([tinted]) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}slot[name=menu]::slotted(*){position:absolute;right:20px;top:20px;z-index:10}`;
 
 export { css_248z as default };
 //# sourceMappingURL=card.js.map

package/components/Card/index.umd.js

@@ -4499,19 +4499,7 @@
           `is not recommended.`);
   }
 
-  var css_248z$7 = 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$6 = css`.text-primary{color:var(--sgds-primary-rgb)!important}.text-secondary{color:var(--sgds-secondary-rgb)!important}.text-success{color:var(--sgds-success-rgb)!important}.text-info{color:var(--sgds-info-rgb)!important}.text-warning{color:var(--sgds-warning-rgb)!important}.text-danger{color:var(--sgds-danger-rgb)!important}.text-light{color:var(--sgds-light-rgb)!important}.text-dark{color:var(--sgds-dark-rgb)!important}.text-muted{color:var(--sgds-secondary-color)!important}`;
-
-  var css_248z$5 = css`.bg-primary{background-color:var(--sgds-primary)!important}.bg-secondary{background-color:var(--sgds-secondary)!important}.bg-success{background-color:var(--sgds-success)!important}.bg-info{background-color:var(--sgds-info)!important}.bg-warning{background-color:var(--sgds-warning)!important}.bg-danger{background-color:var(--sgds-danger)!important}.bg-light{background-color:var(--sgds-light)!important}.bg-dark{background-color:var(--sgds-dark)!important}`;
-
-  var css_248z$4 = css`.border-primary{border-color:var(--sgds-primary)!important}.border-secondary{border-color:var(--sgds-secondary)!important}.border-success{border-color:var(--sgds-success)!important}.border-info{border-color:var(--sgds-info)!important}.border-warning{border-color:var(--sgds-warning)!important}.border-danger{border-color:var(--sgds-danger)!important}.border-light{border-color:var(--sgds-light)!important}.border-dark{border-color:var(--sgds-dark)!important}`;
-
-  var css_248z$3 = css`.h1,.h2,.h3,.h4,.h5,.h6 ::slotted(h6),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),h1,h2,h3,h4,h5,h6{color:var(--sgds-heading-color);font-weight:700;line-height:1.2;margin-bottom:.5rem;margin-top:0}.h1,::slotted(h1),h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,::slotted(h1),h1{font-size:2.5rem}}.h2,::slotted(h2),h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,::slotted(h2),h2{font-size:2rem}}.h3,::slotted(h3),h3{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h3,::slotted(h3),h3{font-size:1.5rem}}.h4,::slotted(h4),h4{font-size:1.125rem}.h5,.h6 ::slotted(h6),::slotted(h5),h5,h6{font-size:1rem}.h1,::slotted(h1),h1{line-height:1.2}.h2,::slotted(h2),h2{line-height:1.25}.h3,::slotted(h3),h3{line-height:1.33}.h4,::slotted(h4),h4{line-height:1.78}.h5,.h6 ::slotted(h6),::slotted(h5),h5,h6{line-height:1.2}`;
-
-  var css_248z$2 = css`p{margin-bottom:1.5rem;margin-top:0}`;
-
-  var css_248z$1 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}a[target=_blank]{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding:0 .45em}::slotted(svg){vertical-align:middle}}`;
+  var css_248z$8 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}a[target=_blank]{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding:0 .45em}::slotted(svg){vertical-align:middle}}`;
 
   /**
    * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
@@ -4568,61 +4556,77 @@
           });
       }
   }
-  SgdsElement.styles = [css_248z$1];
+  SgdsElement.styles = [css_248z$8];
   /** @internal */
   SgdsElement.dependencies = {};
 
-  class CardElement extends SgdsElement {
+  var css_248z$7 = css`.nav-link::slotted(a){align-items:center;color:var(--sgds-link-color-default);cursor:pointer;display:inline-flex;flex-shrink:0;gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-24);justify-content:center;text-decoration:none!important}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),.nav-link::slotted(a[active]){color:var( --sgds-link-color-emphasis)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus);outline:0}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-danger-color-emphasis);color:var(--sgds-link-color-emphasis,--sgds-danger-color-emphasis)}:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-dark)}:host([size=lg]) .nav-link::slotted(a){font-size:var(--sgds-font-size-3)!important;height:var(--sgds-dimension-32)}:host([size=sm]) .nav-link::slotted(a){font-size:var(--sgds-font-size-1)!important;height:var(--sgds-dimension-20)}`;
+
+  /**
+   * @summary Link allows users to click and navigate their way from page to page
+   *
+   * @slot default - Pass in a single anchor tag here
+   */
+  class SgdsLink extends SgdsElement {
       constructor() {
           super(...arguments);
-          /** 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;
+          /** Determines the size of the link */
+          this.size = "md";
+          /** when true, sets the active stylings of the link */
+          this.variant = "primary";
+      }
+      _handleSlotChange(e) {
+          const anchor = this.querySelector("a");
+          if (anchor) {
+              if (anchor.hasAttribute("disabled")) {
+                  anchor.setAttribute("href", "javascript:void(0)");
+                  anchor.setAttribute("tabindex", "-1");
+              }
+              else {
+                  anchor.setAttribute("tabindex", "0");
+              }
+          }
+      }
+      render() {
+          /** When removing href, link is no longer focusable */
+          return html$1 `<slot class="nav-link" @slotchange=${this._handleSlotChange}></slot>`;
       }
   }
-  CardElement.styles = [...SgdsElement.styles, css_248z$6, css_248z$5, css_248z$4, css_248z$3, css_248z$2, css_248z$7];
+  SgdsLink.styles = [...SgdsElement.styles, css_248z$7];
   __decorate([
-      property({ type: Boolean, reflect: true })
-  ], CardElement.prototype, "hideBorder", void 0);
+      property({ type: String, reflect: true })
+  ], SgdsLink.prototype, "size", void 0);
   __decorate([
-      property({ type: Boolean, reflect: true })
-  ], CardElement.prototype, "tinted", void 0);
+      property({ type: String, reflect: true })
+  ], SgdsLink.prototype, "variant", void 0);
 
-  var css_248z = css`:host([orientation=horizontal]) .card-icon{padding:var(--sgds-padding-xl) 0 var(--sgds-padding-xl) var(--sgds-padding-xl)}.card-icon{line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) 0}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}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}`;
+  var css_248z$6 = 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)}`;
 
-  /**
-   * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
-   * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
-   * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
-   * @slot subtitle - The subtitle of the card
-   * @slot title - The title of the card
-   * @slot description - The paragrapher text of the card
-   * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
-   */
-  class SgdsCard extends CardElement {
+  var css_248z$5 = css`.text-primary{color:var(--sgds-primary-rgb)!important}.text-secondary{color:var(--sgds-secondary-rgb)!important}.text-success{color:var(--sgds-success-rgb)!important}.text-info{color:var(--sgds-info-rgb)!important}.text-warning{color:var(--sgds-warning-rgb)!important}.text-danger{color:var(--sgds-danger-rgb)!important}.text-light{color:var(--sgds-light-rgb)!important}.text-dark{color:var(--sgds-dark-rgb)!important}.text-muted{color:var(--sgds-secondary-color)!important}`;
+
+  var css_248z$4 = css`.bg-primary{background-color:var(--sgds-primary)!important}.bg-secondary{background-color:var(--sgds-secondary)!important}.bg-success{background-color:var(--sgds-success)!important}.bg-info{background-color:var(--sgds-info)!important}.bg-warning{background-color:var(--sgds-warning)!important}.bg-danger{background-color:var(--sgds-danger)!important}.bg-light{background-color:var(--sgds-light)!important}.bg-dark{background-color:var(--sgds-dark)!important}`;
+
+  var css_248z$3 = css`.border-primary{border-color:var(--sgds-primary)!important}.border-secondary{border-color:var(--sgds-secondary)!important}.border-success{border-color:var(--sgds-success)!important}.border-info{border-color:var(--sgds-info)!important}.border-warning{border-color:var(--sgds-warning)!important}.border-danger{border-color:var(--sgds-danger)!important}.border-light{border-color:var(--sgds-light)!important}.border-dark{border-color:var(--sgds-dark)!important}`;
+
+  var css_248z$2 = css`.h1,.h2,.h3,.h4,.h5,.h6 ::slotted(h6),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),h1,h2,h3,h4,h5,h6{color:var(--sgds-heading-color);font-weight:700;line-height:1.2;margin-bottom:.5rem;margin-top:0}.h1,::slotted(h1),h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,::slotted(h1),h1{font-size:2.5rem}}.h2,::slotted(h2),h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,::slotted(h2),h2{font-size:2rem}}.h3,::slotted(h3),h3{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h3,::slotted(h3),h3{font-size:1.5rem}}.h4,::slotted(h4),h4{font-size:1.125rem}.h5,.h6 ::slotted(h6),::slotted(h5),h5,h6{font-size:1rem}.h1,::slotted(h1),h1{line-height:1.2}.h2,::slotted(h2),h2{line-height:1.25}.h3,::slotted(h3),h3{line-height:1.33}.h4,::slotted(h4),h4{line-height:1.78}.h5,.h6 ::slotted(h6),::slotted(h5),h5,h6{line-height:1.2}`;
+
+  var css_248z$1 = css`p{margin-bottom:1.5rem;margin-top:0}`;
+
+  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";
-          /** Sets the image position of the card. Available options: `before`, `after` */
-          this.imagePosition = "before";
-          /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
-          this.imageAdjustment = "default";
       }
       firstUpdated() {
-          if (this._imageNode.length === 0) {
-              const icon = this.shadowRoot.querySelector(".card-image");
-              icon.style.display = "none";
-          }
-          if (this._iconNode.length === 0) {
-              const icon = this.shadowRoot.querySelector(".card-icon");
-              icon.style.display = "none";
-          }
           if (this.disabled && this._linkNode.length > 0) {
               const hyperlink = this._linkNode[0].querySelector("a");
               hyperlink.setAttribute("disabled", "true");
@@ -4642,13 +4646,70 @@
           if (childNodes.length > 1) {
               return console.error("Multiple elements passed into SgdsCard's link slot");
           }
-          if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {
-              const hyperlink = childNodes[0].querySelector("a") || childNodes[0];
+          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";
           }
-          return;
+      }
+  }
+  CardElement.styles = [...SgdsElement.styles, css_248z$5, css_248z$4, css_248z$3, css_248z$2, css_248z$1, css_248z$6];
+  __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);
+
+  var css_248z = css`:host([tinted]) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}slot[name=menu]::slotted(*){position:absolute;right:20px;top:20px;z-index:10}`;
+
+  /**
+   * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
+   * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
+   * @slot menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.
+   * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
+   * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
+   * @slot subtitle - The subtitle of the card
+   * @slot title - The title of the card
+   * @slot description - The paragrapher text of the card
+   * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
+   * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
+   */
+  class SgdsCard extends CardElement {
+      constructor() {
+          super(...arguments);
+          /** Sets the image position of the card. Available options: `before`, `after` */
+          this.imagePosition = "before";
+          /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
+          this.imageAdjustment = "default";
+      }
+      firstUpdated() {
+          if (this._imageNode.length === 0) {
+              const icon = this.shadowRoot.querySelector(".card-image");
+              icon.style.display = "none";
+          }
+          if (this._iconNode.length === 0) {
+              const media = this.shadowRoot.querySelector(".card-media");
+              media.style.display = "none";
+          }
       }
       handleImgSlotChange(e) {
           const childNodes = e.target.assignedNodes({ flatten: true });
@@ -4666,20 +4727,26 @@
         })}"
         tabindex=${cardTabIndex}
       >
+        <div class="card-tinted-bg"></div>
+        <slot name="menu"></slot>
         <div class="card-image">
           <slot name="image" @slotchange=${this.handleImgSlotChange}></slot>
         </div>
-        <div class="card-icon">
+        <div class="card-media">
           <slot name="icon"></slot>
         </div>
         <div class="card-body">
-          <div class="card-header">
-            <slot name="subtitle"></slot>
-            <h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
+          <div class="card-header-container">
+            <div class="card-header">
+              <slot name="subtitle"></slot>
+              <h3 class="card-title"><slot name="title" @slotchange=${this.handleTitleSlotChange}></slot></h3>
+            </div>
+            <slot></slot>
           </div>
           <p class="card-text">
             <slot name="description"></slot>
           </p>
+          <slot name="lower"></slot>
           <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
         </div>
       </${tag}>
@@ -4687,27 +4754,12 @@
       }
   }
   SgdsCard.styles = [...CardElement.styles, css_248z];
-  __decorate([
-      query("a.card")
-  ], SgdsCard.prototype, "card", void 0);
   __decorate([
       queryAssignedNodes({ slot: "image", flatten: true })
   ], SgdsCard.prototype, "_imageNode", void 0);
   __decorate([
       queryAssignedNodes({ slot: "icon", flatten: true })
   ], SgdsCard.prototype, "_iconNode", void 0);
-  __decorate([
-      queryAssignedNodes({ slot: "link", flatten: true })
-  ], SgdsCard.prototype, "_linkNode", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsCard.prototype, "stretchedLink", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsCard.prototype, "disabled", void 0);
-  __decorate([
-      property({ type: String, reflect: true })
-  ], SgdsCard.prototype, "orientation", void 0);
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsCard.prototype, "imagePosition", void 0);