@govtechsg/sgds-web-component 3.12.0-rc.1 → 3.12.0

package/components/SystemBanner/sgds-system-banner-item.d.ts

@@ -1,8 +1,9 @@
 import SgdsElement from "../../base/sgds-element";
 /**
- * @slot icon - The slot to pass in an icon element.
+ * @slot icon - The slot to pass in an icon element. Either use a badge or a icon, but not both, to avoid layout issues.
  * @slot action - The slot to pass in an action element such as a button or link
  * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view
+ * @slot badge - The slot to pass in a badge element. Either use a badge or a icon, but not both, to avoid layout issues.
  *
  * @event sgds-show-more - The event emitted when user clicks on "show more" in the banner text message
  */

package/components/SystemBanner/sgds-system-banner-item.js

@@ -9,9 +9,10 @@ import { NoClampActionContext, SystemBannerChildCountContext } from './system-ba
 import { consume } from '@lit/context';
 
 /**
- * @slot icon - The slot to pass in an icon element.
+ * @slot icon - The slot to pass in an icon element. Either use a badge or a icon, but not both, to avoid layout issues.
  * @slot action - The slot to pass in an action element such as a button or link
  * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view
+ * @slot badge - The slot to pass in a badge element. Either use a badge or a icon, but not both, to avoid layout issues.
  *
  * @event sgds-show-more - The event emitted when user clicks on "show more" in the banner text message
  */
@@ -24,7 +25,7 @@ class SgdsSystemBannerItem extends SgdsElement {
         this.noClampAction = false;
         this.clamped = false;
         this.siblingsCount = 0;
-        this.hasSlotController = new HasSlotController(this, "action");
+        this.hasSlotController = new HasSlotController(this, "action", "icon", "badge");
     }
     async firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
@@ -42,6 +43,9 @@ class SgdsSystemBannerItem extends SgdsElement {
     updated() {
         if (!this.hasActionSlot)
             this.hasActionSlot = this.hasSlotController.test("action");
+        if (this.hasSlotController.test("icon") && this.hasSlotController.test("badge")) {
+            console.error("Both icon and badge slot are used in the same banner item. This is not recommended as it may cause layout issues.");
+        }
     }
     _clampCheck() {
         const textEl = this.shadowRoot.querySelector(".message");
@@ -57,6 +61,7 @@ class SgdsSystemBannerItem extends SgdsElement {
       <div class="banner-item">
         <slot name="icon"></slot>
         <div class="banner-item__message_and__action">
+          <slot name="badge"></slot>
           <div class="clamped-container">
             <div class=${classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>
               <slot></slot>

package/components/SystemBanner/sgds-system-banner-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-system-banner-item.js","sources":["../../../src/components/SystemBanner/sgds-system-banner-item.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport alertBannerItemStyles from \"./system-banner-item.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { SystemBannerChildCountContext, NoClampActionContext } from \"./system-banner-context\";\nimport { consume } from \"@lit/context\";\n\n/**\n * @slot icon - The slot to pass in an icon element.\n * @slot action - The slot to pass in an action element such as a button or link\n * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view\n *\n * @event sgds-show-more - The event emitted when user clicks on \"show more\" in the banner text message\n */\nexport class SgdsSystemBannerItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertBannerItemStyles];\n  /** Used only for SSR to indicate the presence of the `action` slot. */\n  @property({ type: Boolean }) hasActionSlot = false;\n\n  /** Disables the action link that appears when text content is clamped */\n  @consume({ context: NoClampActionContext, subscribe: true })\n\n  /** When true, message text will be truncated with ellipsis only */\n  @property({ type: Boolean })\n  noClampAction = false;\n\n  @state() private clamped = false;\n\n  @consume({ context: SystemBannerChildCountContext, subscribe: true })\n  @state()\n  private siblingsCount = 0;\n\n  private readonly hasSlotController = new HasSlotController(this, \"action\");\n\n  private _resizeObserver: ResizeObserver;\n  async firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    await this.updateComplete;\n    this._clampCheck();\n\n    // Watch resizing for dynamic layout changes\n    this._resizeObserver = new ResizeObserver(() => this._clampCheck());\n    this._resizeObserver.observe(this.shadowRoot.querySelector(\".message\"));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._resizeObserver) this._resizeObserver.disconnect();\n  }\n  updated() {\n    if (!this.hasActionSlot) this.hasActionSlot = this.hasSlotController.test(\"action\");\n  }\n  private _clampCheck() {\n    const textEl = this.shadowRoot.querySelector(\".message\");\n    requestAnimationFrame(() => {\n      this.clamped = textEl.scrollHeight > textEl.clientHeight;\n    });\n  }\n\n  private _handleShowMoreClick() {\n    this.emit(\"sgds-show-more\");\n  }\n  render() {\n    return html`\n      <div class=\"banner-item\">\n        <slot name=\"icon\"></slot>\n        <div class=\"banner-item__message_and__action\">\n          <div class=\"clamped-container\">\n            <div class=${classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>\n              <slot></slot>\n            </div>\n            ${this.clamped && !this.noClampAction\n              ? html`<span class=\"show-more\"\n                  >...<a class=\"show-more__link\" @click=\"${this._handleShowMoreClick}\">show more</a></span\n                >`\n              : nothing}\n          </div>\n          ${this.hasActionSlot || this.siblingsCount > 1\n            ? html`\n                <div class=\"action\">\n                  <slot name=\"action\"></slot>\n                </div>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\nexport default SgdsSystemBannerItem;\n"],"names":["alertBannerItemStyles"],"mappings":"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"}
+{"version":3,"file":"sgds-system-banner-item.js","sources":["../../../src/components/SystemBanner/sgds-system-banner-item.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport alertBannerItemStyles from \"./system-banner-item.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { SystemBannerChildCountContext, NoClampActionContext } from \"./system-banner-context\";\nimport { consume } from \"@lit/context\";\n\n/**\n * @slot icon - The slot to pass in an icon element. Either use a badge or a icon, but not both, to avoid layout issues.\n * @slot action - The slot to pass in an action element such as a button or link\n * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view\n * @slot badge - The slot to pass in a badge element. Either use a badge or a icon, but not both, to avoid layout issues.\n *\n * @event sgds-show-more - The event emitted when user clicks on \"show more\" in the banner text message\n */\nexport class SgdsSystemBannerItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertBannerItemStyles];\n  /** Used only for SSR to indicate the presence of the `action` slot. */\n  @property({ type: Boolean }) hasActionSlot = false;\n\n  /** Disables the action link that appears when text content is clamped */\n  @consume({ context: NoClampActionContext, subscribe: true })\n\n  /** When true, message text will be truncated with ellipsis only */\n  @property({ type: Boolean })\n  noClampAction = false;\n\n  @state() private clamped = false;\n\n  @consume({ context: SystemBannerChildCountContext, subscribe: true })\n  @state()\n  private siblingsCount = 0;\n\n  private readonly hasSlotController = new HasSlotController(this, \"action\", \"icon\", \"badge\");\n\n  private _resizeObserver: ResizeObserver;\n  async firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    await this.updateComplete;\n    this._clampCheck();\n\n    // Watch resizing for dynamic layout changes\n    this._resizeObserver = new ResizeObserver(() => this._clampCheck());\n    this._resizeObserver.observe(this.shadowRoot.querySelector(\".message\"));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._resizeObserver) this._resizeObserver.disconnect();\n  }\n  updated() {\n    if (!this.hasActionSlot) this.hasActionSlot = this.hasSlotController.test(\"action\");\n    if (this.hasSlotController.test(\"icon\") && this.hasSlotController.test(\"badge\")) {\n      console.error(\n        \"Both icon and badge slot are used in the same banner item. This is not recommended as it may cause layout issues.\"\n      );\n    }\n  }\n  private _clampCheck() {\n    const textEl = this.shadowRoot.querySelector(\".message\");\n    requestAnimationFrame(() => {\n      this.clamped = textEl.scrollHeight > textEl.clientHeight;\n    });\n  }\n\n  private _handleShowMoreClick() {\n    this.emit(\"sgds-show-more\");\n  }\n  render() {\n    return html`\n      <div class=\"banner-item\">\n        <slot name=\"icon\"></slot>\n        <div class=\"banner-item__message_and__action\">\n          <slot name=\"badge\"></slot>\n          <div class=\"clamped-container\">\n            <div class=${classMap({ message: true, truncated: this.clamped && !this.noClampAction })}>\n              <slot></slot>\n            </div>\n            ${this.clamped && !this.noClampAction\n              ? html`<span class=\"show-more\"\n                  >...<a class=\"show-more__link\" @click=\"${this._handleShowMoreClick}\">show more</a></span\n                >`\n              : nothing}\n          </div>\n          ${this.hasActionSlot || this.siblingsCount > 1\n            ? html`\n                <div class=\"action\">\n                  <slot name=\"action\"></slot>\n                </div>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\nexport default SgdsSystemBannerItem;\n"],"names":["alertBannerItemStyles"],"mappings":"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"}

package/components/SystemBanner/system-banner-item.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:512px){.banner-item__message_and__action{flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}}`;
+var css_248z = css`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:1024px){.banner-item__message_and__action{align-items:center;flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=system-banner-item.js.map

package/components/SystemBanner/system-banner.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.banner-wrapper{display:block;width:100%}.banner,.banner-wrapper{background-color:var(--sgds-surface-fixed-dark)}.banner{align-items:center;color:var(--sgds-color-fixed-light);display:flex;flex-direction:row;gap:var(--sgds-gap-xl);min-height:var(--sgds-dimension-64);padding:var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-mainnav-mobile-padding-x));position:relative}.content{flex:1;overflow:hidden;width:100%}::slotted(sgds-system-banner-item){display:none;flex:0 0 100%;opacity:0}::slotted(sgds-system-banner-item[active]){display:block;opacity:1}.pagination{align-items:center;bottom:12px;display:flex;font-size:var(--sgds-font-size-12);font-weight:var(--sgds-font-weight-regular,400);gap:var(--sgds-gap-2-xs);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-16,16px);position:absolute;right:20px}.d-none{display:none}sgds-close-button{position:absolute;right:20px;top:10px}@media (min-width:512px){.pagination,sgds-close-button{position:static}.banner{padding-left:var(--sgds-mainnav-mobile-padding-x);padding-right:var(--sgds-mainnav-mobile-padding-x)}}@media (min-width:1440px){.banner{margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding-left:var(--sgds-mainnav-padding-x);padding-right:var(--sgds-mainnav-padding-x)}}:host([fluid]) .banner{max-width:none}`;
+var css_248z = css`.banner-wrapper{display:block;width:100%}.banner,.banner-wrapper{background-color:var(--sgds-surface-fixed-dark)}.banner{align-items:center;color:var(--sgds-color-fixed-light);display:flex;flex-direction:row;gap:var(--sgds-gap-xl);min-height:var(--sgds-dimension-64);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);position:relative}.content{flex:1;overflow:hidden;width:100%}::slotted(sgds-system-banner-item){display:none;flex:0 0 100%;opacity:0}::slotted(sgds-system-banner-item[active]){display:block;opacity:1}.pagination{align-items:center;bottom:12px;display:flex;font-size:var(--sgds-font-size-12);font-weight:var(--sgds-font-weight-regular,400);gap:var(--sgds-gap-2-xs);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-16,16px);position:absolute;right:20px}.d-none{display:none}sgds-close-button{position:absolute;right:20px;top:10px}@media (min-width:1024px){.pagination,sgds-close-button{position:static}.banner{margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding-left:var(--sgds-mainnav-padding-x);padding-right:var(--sgds-mainnav-padding-x)}:host([fluid]) .banner{max-width:none}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=system-banner.js.map

package/components/ThumbnailCard/index.umd.min.js

@@ -48,7 +48,7 @@ const Tt=1;class zt{constructor(t){}get _$isConnected(){return this._$parent._$i
    * @license
    * Copyright 2020 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
-   */var Mt;const Ot=Symbol.for(""),Ut=t=>{if(t?.r===Ot)return t?._$litStatic$},Vt=(t,...e)=>({_$litStatic$:e.reduce((e,s,i)=>e+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw new Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(s)+t[i+1],t[0]),r:Ot}),At=new Map,Lt=(Rt=Q,(t,...e)=>{const s=e.length;let i,r;const o=[],n=[];let a,d=0,l=!1;for(;d<s;){for(a=t[d];d<s&&void 0!==(r=e[d],i=Ut(r));)a+=i+t[++d],l=!0;d!==s&&n.push(r),o.push(a),d++}if(d===s&&o.push(t[s]),l){const s=o.join("$$lit$$");void 0===(t=At.get(s))&&(o.raw=o,At.set(s,t=o)),e=n}return Rt(t,...e)});var Rt,Wt=n`: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-16);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-24);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 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.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.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.039h4.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.468-.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.774c-.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-.525-.042-1.175-.042-1.993V9.774c0-.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-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.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' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 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.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.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.039h4.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.468-.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.774c-.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-.525-.042-1.175-.042-1.993V9.774c0-.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-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.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;vertical-align:top;width:1em}::slotted(svg){vertical-align:middle}}`;class jt extends yt{emit(t,e){const s=new CustomEvent(t,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},e));return this.dispatchEvent(s),s}static define(t,e=this,s={}){if(customElements.get(t));else try{customElements.define(t,e,s)}catch(i){customElements.define(t,class extends e{},s)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach(([t,e])=>{this.constructor.define(t,e)})}firstUpdated(t){var e;super.firstUpdated(t),this.ssr&&(null===(e=this.shadowRoot)||void 0===e||e.querySelectorAll("slot").forEach(t=>{t.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))}))}}jt.styles=[Wt],jt.dependencies={},t([kt({type:Boolean,reflect:!0})],jt.prototype,"ssr",void 0);var It,Dt,qt=n`:host([disabled]){cursor:not-allowed}:host([stretchedLink]) slot[name=footer]::slotted(a),:host([stretchedLink]) slot[name=footer]::slotted(sgds-link),:host([stretchedLink]) slot[name=link]::slotted(a),:host([stretchedLink]) slot[name=link]::slotted(sgds-link){display:none}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:not(.disabled):focus-visible{--sgds-outline-offset-focus:-1px;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title,slot[name=title]::slotted(*){color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=subtitle]::slotted(*){color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-14)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-wide)!important;line-height:var(--sgds-line-height-20)!important;margin:var(--sgds-margin-none)!important;text-transform:uppercase}slot[name=title]::slotted(a){color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important;text-decoration:none!important}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=footer]::slotted(*),slot[name=link]::slotted(*){margin-top:auto;padding-top:var(--sgds-padding-sm);width:fit-content}slot[name=footer]::slotted(a),slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=footer]::slotted(a:focus),slot[name=footer]::slotted(a:hover),slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=footer]::slotted(a:focus-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`,Bt=n`.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}`,Ft=n`.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}`,Ht=n`.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}`,Zt=n`.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}`,Jt=n`p{margin-bottom:1.5rem;margin-top:0}`;class Yt extends jt{constructor(){super(...arguments),this.stretchedLink=!1,this.disabled=!1,this.hideBorder=!1,this.tinted=!1,this.orientation="vertical"}handleTitleSlotChange(t){const e=t.target.assignedNodes({flatten:!0});if(this.stretchedLink&&e[0]instanceof HTMLAnchorElement){(e[0].querySelector("a")||e[0]).removeAttribute("href")}}warnLinkSlotMisused(t){if(t.target.assignedNodes({flatten:!0}).length>1)return console.error("Multiple elements passed into SgdsCard's link slot")}}Yt.styles=[...jt.styles,Bt,Ft,Ht,Zt,Jt,qt],t([(It="a.card",(t,e,s)=>{const i=t=>{const s=t.renderRoot?.querySelector(It)??null;if(null===s&&Dt&&!t.hasUpdated){const t="object"==typeof e?e.name:e;Et("",`@query'd field ${JSON.stringify(String(t))} with the 'cache' flag set for selector '${It}' has been accessed before the first update and returned null. This is expected if the renderRoot tree has not been provided beforehand (e.g. via Declarative Shadow DOM). Therefore the value hasn't been cached.`)}return s};if(Dt){const{get:r,set:o}="object"==typeof e?t:s??(()=>{const t=Symbol(`${String(e)} (@query() cache)`);return{get(){return this[t]},set(e){this[t]=e}}})();return Ct(t,e,{get(){let t=r.call(this);return void 0===t&&(t=i(this),(null!==t||this.hasUpdated)&&o.call(this,t)),t}})}return Ct(t,e,{get(){return i(this)}})})],Yt.prototype,"card",void 0),t([kt({type:Boolean,reflect:!0})],Yt.prototype,"stretchedLink",void 0),t([kt({type:Boolean,reflect:!0})],Yt.prototype,"disabled",void 0),t([kt({type:Boolean,reflect:!0})],Yt.prototype,"hideBorder",void 0),t([kt({type:Boolean,reflect:!0})],Yt.prototype,"tinted",void 0),t([kt({type:String,reflect:!0})],Yt.prototype,"orientation",void 0);var Xt,Gt,Kt,Qt=n`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=thumbnail]::slotted(*){height:var(--sgds-dimension-64)!important;max-width:var(--sgds-dimension-128)!important;min-width:var(--sgds-dimension-64)!important;object-fit:contain;object-position:left;width:100%}`;class te extends Yt{constructor(){super(...arguments),this.noPadding=!1}_getAnchorFromSlot(t){if(!t||0===t.length)return null;const e=t[0];return e.querySelector("a")||e}_handleThumbnailSlotChange(t){if(0===t.target.assignedElements({flatten:!0}).length&&("vertical"===this.orientation&&0===this._upperNode.length||"horizontal"===this.orientation)){this.shadowRoot.querySelector(".card-media").style.display="none";const t=this.shadowRoot.querySelector(".card-body");this.noPadding&&(t.style.padding="0px")}}_handleFooterSlotChange(t){var e;const s=t.target.assignedElements({flatten:!0}),i=null===(e=this._getAnchorFromSlot(s))||void 0===e?void 0:e.href;this.stretchedLink&&i&&this.card.setAttribute("href",i)}_handleLinkSlotChange(t){var e;this.warnLinkSlotMisused(t);const s=t.target.assignedElements({flatten:!0}),i=null===(e=this._getAnchorFromSlot(s))||void 0===e?void 0:e.href;this.stretchedLink&&i&&this.card.setAttribute("href",i)}render(){const t=this.stretchedLink?Vt`a`:Vt`div`,e=!this.stretchedLink||this.disabled?-1:0;return Lt`
+   */var Mt;const Ot=Symbol.for(""),Ut=t=>{if(t?.r===Ot)return t?._$litStatic$},Vt=(t,...e)=>({_$litStatic$:e.reduce((e,s,i)=>e+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw new Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(s)+t[i+1],t[0]),r:Ot}),At=new Map,Lt=(Rt=Q,(t,...e)=>{const s=e.length;let i,r;const o=[],n=[];let a,d=0,l=!1;for(;d<s;){for(a=t[d];d<s&&void 0!==(r=e[d],i=Ut(r));)a+=i+t[++d],l=!0;d!==s&&n.push(r),o.push(a),d++}if(d===s&&o.push(t[s]),l){const s=o.join("$$lit$$");void 0===(t=At.get(s))&&(o.raw=o,At.set(s,t=o)),e=n}return Rt(t,...e)});var Rt,Wt=n`: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-16);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-24);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 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.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.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.039h4.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.468-.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.774c-.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-.525-.042-1.175-.042-1.993V9.774c0-.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-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.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' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 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.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.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.039h4.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.468-.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.774c-.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-.525-.042-1.175-.042-1.993V9.774c0-.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-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.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;vertical-align:top;width:1em}::slotted(svg){vertical-align:middle}}`;class jt extends yt{emit(t,e){const s=new CustomEvent(t,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},e));return this.dispatchEvent(s),s}static define(t,e=this,s={}){if(customElements.get(t));else try{customElements.define(t,e,s)}catch(i){customElements.define(t,class extends e{},s)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach(([t,e])=>{this.constructor.define(t,e)})}firstUpdated(t){var e;super.firstUpdated(t),this.ssr&&(null===(e=this.shadowRoot)||void 0===e||e.querySelectorAll("slot").forEach(t=>{t.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))}))}}jt.styles=[Wt],jt.dependencies={},t([kt({type:Boolean,reflect:!0})],jt.prototype,"ssr",void 0);var It,Dt,qt=n`:host([disabled]){cursor:not-allowed}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([stretchedLink]) slot[name=footer]::slotted(a),:host([stretchedLink]) slot[name=footer]::slotted(sgds-link),:host([stretchedLink]) slot[name=link]::slotted(a),:host([stretchedLink]) slot[name=link]::slotted(sgds-link){display:none}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:not(.disabled):focus-visible{--sgds-outline-offset-focus:-1px;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title,slot[name=title]::slotted(*){color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=subtitle]::slotted(*){color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-14)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-wide)!important;line-height:var(--sgds-line-height-20)!important;margin:var(--sgds-margin-none)!important;text-transform:uppercase}slot[name=title]::slotted(a){color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important;text-decoration:none!important}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=footer]::slotted(*),slot[name=link]::slotted(*){margin-top:auto;padding-top:var(--sgds-padding-sm);width:fit-content}slot[name=footer]::slotted(a),slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=footer]::slotted(a:focus),slot[name=footer]::slotted(a:hover),slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=footer]::slotted(a:focus-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`,Bt=n`.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}`,Ft=n`.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}`,Ht=n`.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}`,Zt=n`.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}`,Jt=n`p{margin-bottom:1.5rem;margin-top:0}`;class Yt extends jt{constructor(){super(...arguments),this.stretchedLink=!1,this.disabled=!1,this.hideBorder=!1,this.tinted=!1,this.orientation="vertical"}handleTitleSlotChange(t){const e=t.target.assignedNodes({flatten:!0});if(this.stretchedLink&&e[0]instanceof HTMLAnchorElement){(e[0].querySelector("a")||e[0]).removeAttribute("href")}}warnLinkSlotMisused(t){if(t.target.assignedNodes({flatten:!0}).length>1)return console.error("Multiple elements passed into SgdsCard's link slot")}}Yt.styles=[...jt.styles,Bt,Ft,Ht,Zt,Jt,qt],t([(It="a.card",(t,e,s)=>{const i=t=>{const s=t.renderRoot?.querySelector(It)??null;if(null===s&&Dt&&!t.hasUpdated){const t="object"==typeof e?e.name:e;Et("",`@query'd field ${JSON.stringify(String(t))} with the 'cache' flag set for selector '${It}' has been accessed before the first update and returned null. This is expected if the renderRoot tree has not been provided beforehand (e.g. via Declarative Shadow DOM). Therefore the value hasn't been cached.`)}return s};if(Dt){const{get:r,set:o}="object"==typeof e?t:s??(()=>{const t=Symbol(`${String(e)} (@query() cache)`);return{get(){return this[t]},set(e){this[t]=e}}})();return Ct(t,e,{get(){let t=r.call(this);return void 0===t&&(t=i(this),(null!==t||this.hasUpdated)&&o.call(this,t)),t}})}return Ct(t,e,{get(){return i(this)}})})],Yt.prototype,"card",void 0),t([kt({type:Boolean,reflect:!0})],Yt.prototype,"stretchedLink",void 0),t([kt({type:Boolean,reflect:!0})],Yt.prototype,"disabled",void 0),t([kt({type:Boolean,reflect:!0})],Yt.prototype,"hideBorder",void 0),t([kt({type:Boolean,reflect:!0})],Yt.prototype,"tinted",void 0),t([kt({type:String,reflect:!0})],Yt.prototype,"orientation",void 0);var Xt,Gt,Kt,Qt=n`:host([noPadding]) .card{background-color:inherit;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=thumbnail]::slotted(*){height:var(--sgds-dimension-64)!important;max-width:var(--sgds-dimension-128)!important;min-width:var(--sgds-dimension-64)!important;object-fit:contain;object-position:left;width:100%}`;class te extends Yt{constructor(){super(...arguments),this.noPadding=!1}_getAnchorFromSlot(t){if(!t||0===t.length)return null;const e=t[0];return e.querySelector("a")||e}_handleThumbnailSlotChange(t){if(0===t.target.assignedElements({flatten:!0}).length&&("vertical"===this.orientation&&0===this._upperNode.length||"horizontal"===this.orientation)){this.shadowRoot.querySelector(".card-media").style.display="none";const t=this.shadowRoot.querySelector(".card-body");this.noPadding&&(t.style.padding="0px")}}_handleFooterSlotChange(t){var e;const s=t.target.assignedElements({flatten:!0}),i=null===(e=this._getAnchorFromSlot(s))||void 0===e?void 0:e.href;this.stretchedLink&&i&&this.card.setAttribute("href",i)}_handleLinkSlotChange(t){var e;this.warnLinkSlotMisused(t);const s=t.target.assignedElements({flatten:!0}),i=null===(e=this._getAnchorFromSlot(s))||void 0===e?void 0:e.href;this.stretchedLink&&i&&this.card.setAttribute("href",i)}render(){const t=this.stretchedLink?Vt`a`:Vt`div`,e=!this.stretchedLink||this.disabled?-1:0;return Lt`
       <${t} 
         class="card ${Nt({disabled:this.disabled})}"
         tabindex=${e}