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

package/components/Stepper/sgds-stepper.d.ts

@@ -11,7 +11,6 @@ export type { IStepMetaData };
  * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.
  * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.
  * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.
- * @slot default - slot for sgds-step children
  *
  */
 export declare class SgdsStepper extends SgdsElement {
@@ -20,8 +19,8 @@ export declare class SgdsStepper extends SgdsElement {
     static dependencies: {
         "sgds-icon": typeof SgdsIcon;
     };
-    /** The metadata of stepper, type `IStepMetaData`. Deprecated: use sgds-step child components instead.
-     * @deprecated Use sgds-step child components instead of the steps property
+    /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string`, `component:unknown`, `iconName:string`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.
+     * It is required to populate this array to properly render the stepper. By default, stepper markers will render numbers. For icon stepper markers, pass the name of sgds icon via `iconName` key. `iconName` is optional.
      */
     steps: IStepMetaData[];
     /** The current state of active step. Defaults to 0 */
@@ -30,22 +29,8 @@ export declare class SgdsStepper extends SgdsElement {
     orientation: StepperOrientation;
     /** When true, the stepper's steps will be clickable */
     clickable: boolean;
-    /** When true, the stepper's steps can only be clicked in a linear manner */
-    linear: boolean;
     /** @internal Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
     defaultActiveStep: number;
-    /** @internal */
-    private _slotNodes;
-    /** @internal */
-    private _items;
-    private _totalSteps;
-    /** @internal Bound i-sgds-click handler for proper event listener removal */
-    private _boundHandleItemClick;
-    connectedCallback(): void;
-    /** @internal */
-    private _handleSlotChange;
-    /** @internal Updates step item properties based on active step and clickable state */
-    private _updateStepItems;
     /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/
     getComponent(step?: number): unknown;
     /** Moves the active step forward one step */
@@ -63,13 +48,7 @@ export declare class SgdsStepper extends SgdsElement {
     /**@internal */
     _handleActiveStepChange(): void;
     /**@internal */
-    _handleClickableChange(): void;
-    /**@internal */
-    _handleOrientationChange(): void;
-    /**@internal */
     _handleKeyDown(event: KeyboardEvent, index: number): void;
-    /**@internal */
-    _handleStepClick(e: Event): void;
     render(): import("lit").TemplateResult<1>;
 }
 export type StepperOrientation = "horizontal" | "vertical";

package/components/Stepper/sgds-stepper.js

@@ -1,6 +1,6 @@
 import { __decorate } from 'tslib';
 import { html } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import SgdsElement from '../../base/sgds-element.js';
 import { defaultValue } from '../../utils/defaultvalue.js';
@@ -17,14 +17,13 @@ import { SgdsIcon } from '../Icon/sgds-icon.js';
  * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.
  * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.
  * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.
- * @slot default - slot for sgds-step children
  *
  */
 class SgdsStepper extends SgdsElement {
     constructor() {
         super(...arguments);
-        /** The metadata of stepper, type `IStepMetaData`. Deprecated: use sgds-step child components instead.
-         * @deprecated Use sgds-step child components instead of the steps property
+        /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string`, `component:unknown`, `iconName:string`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.
+         * It is required to populate this array to properly render the stepper. By default, stepper markers will render numbers. For icon stepper markers, pass the name of sgds icon via `iconName` key. `iconName` is optional.
          */
         this.steps = [];
         /** The current state of active step. Defaults to 0 */
@@ -33,56 +32,17 @@ class SgdsStepper extends SgdsElement {
         this.orientation = "horizontal";
         /** When true, the stepper's steps will be clickable */
         this.clickable = false;
-        /** When true, the stepper's steps can only be clicked in a linear manner */
-        this.linear = false;
         /** @internal Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
         this.defaultActiveStep = 0;
-        this._totalSteps = 0;
-        /** @internal Bound i-sgds-click handler for proper event listener removal */
-        this._boundHandleItemClick = this._handleStepClick.bind(this);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._totalSteps = this.steps.length;
-        this.addEventListener("i-sgds-click", this._boundHandleItemClick);
-    }
-    /** @internal */
-    _handleSlotChange() {
-        this._items = this._slotNodes;
-        this._totalSteps = this._items.length;
-        this._updateStepItems();
-    }
-    /** @internal Updates step item properties based on active step and clickable state */
-    _updateStepItems() {
-        if (this._items && this._items.length > 0) {
-            this._items.forEach((item, index) => {
-                item.stepIndex = index;
-                item.active = this.activeStep === index;
-                item._isCompleted = item.completed || this.activeStep > index;
-                item.isClickable = this.linear
-                    ? !item.disabled && this.clickable && (this.activeStep - 1 == index || this.activeStep + 1 == index)
-                    : !item.disabled && this.clickable;
-                item.orientation = this.orientation;
-                if (this._items.length > 1) {
-                    item.isFirstOfType = index === 0;
-                    item.classList.toggle("last", index === this._items.length - 1);
-                }
-            });
-        }
     }
     /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/
     getComponent(step = this.activeStep) {
-        var _a, _b;
-        const items = this._slotNodes.length > 1 ? this._items : this.steps;
-        if (items && items.length > 0) {
-            return (_a = items[step]) === null || _a === void 0 ? void 0 : _a.component;
-        }
-        return (_b = this.steps[step]) === null || _b === void 0 ? void 0 : _b.component;
+        return this.steps[step].component;
     }
     /** Moves the active step forward one step */
     nextStep() {
         this.emit("sgds-next-step");
-        if (this.activeStep < this._totalSteps - 1) {
+        if (this.activeStep < this.steps.length - 1) {
             this.activeStep++;
         }
     }
@@ -96,8 +56,8 @@ class SgdsStepper extends SgdsElement {
     /** Changes the active step to the last step */
     lastStep() {
         this.emit("sgds-last-step");
-        if (this.activeStep !== this._totalSteps - 1) {
-            this.activeStep = this._totalSteps - 1;
+        if (this.activeStep !== this.steps.length - 1) {
+            this.activeStep = this.steps.length - 1;
         }
     }
     /** Changes active step to the first step */
@@ -114,35 +74,21 @@ class SgdsStepper extends SgdsElement {
     }
     /**@internal */
     _onStepperItemClick(index) {
-        this.activeStep = index;
+        //emit an event before moving to next step
+        if (this.activeStep > index) {
+            this.activeStep = index;
+        }
     }
     /**@internal */
     _handleActiveStepChange() {
-        this._updateStepItems();
         this.emit("sgds-arrived");
     }
     /**@internal */
-    _handleClickableChange() {
-        this._updateStepItems();
-    }
-    /**@internal */
-    _handleOrientationChange() {
-        this._updateStepItems();
-    }
-    /**@internal */
     _handleKeyDown(event, index) {
         if (event.key === "Enter") {
             this._onStepperItemClick(index);
         }
     }
-    /**@internal */
-    _handleStepClick(e) {
-        var _a;
-        const event = e;
-        e.stopPropagation();
-        const stepIndex = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.stepIndex;
-        this._onStepperItemClick(stepIndex);
-    }
     render() {
         return html `
       <div
@@ -151,8 +97,6 @@ class SgdsStepper extends SgdsElement {
             clickable: this.clickable
         })}"
       >
-        <slot @slotchange=${this._handleSlotChange}></slot>
-
         ${this.steps.map(({ stepHeader: step, iconName }, index) => {
             return html `
             <div class="stepper-item-container">
@@ -195,24 +139,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsStepper.prototype, "clickable", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SgdsStepper.prototype, "linear", void 0);
 __decorate([
     defaultValue("activeStep")
 ], SgdsStepper.prototype, "defaultActiveStep", void 0);
-__decorate([
-    queryAssignedElements()
-], SgdsStepper.prototype, "_slotNodes", void 0);
 __decorate([
     watch("activeStep", { waitUntilFirstUpdate: true })
 ], SgdsStepper.prototype, "_handleActiveStepChange", null);
-__decorate([
-    watch("clickable", { waitUntilFirstUpdate: true })
-], SgdsStepper.prototype, "_handleClickableChange", null);
-__decorate([
-    watch("orientation", { waitUntilFirstUpdate: true })
-], SgdsStepper.prototype, "_handleOrientationChange", null);
 
 export { SgdsStepper, SgdsStepper as default };
 //# sourceMappingURL=sgds-stepper.js.map

package/components/Stepper/sgds-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-stepper.js","sources":["../../../src/components/Stepper/sgds-stepper.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { IStepMetaData } from \"./types\";\nimport type SgdsStep from \"./sgds-step\";\nexport type { IStepMetaData };\n\n/**\n * @summary Steppers are used to inform users which step they are at in a form or a process\n *\n * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n * @slot default - slot for sgds-step children\n *\n */\nexport class SgdsStepper extends SgdsElement {\n  static styles = [...SgdsElement.styles, stepperStyle];\n  /** @internal */\n  static dependencies = { \"sgds-icon\": SgdsIcon };\n  /** The metadata of stepper, type `IStepMetaData`. Deprecated: use sgds-step child components instead.\n   * @deprecated Use sgds-step child components instead of the steps property\n   */\n  @property({ type: Array })\n  steps: IStepMetaData[] = [];\n\n  /** The current state of active step. Defaults to 0 */\n  @property({ type: Number, reflect: true })\n  activeStep = 0;\n\n  /** The orientation of stepper. By default, the stepper is of horizontal orientation */\n  @property({ type: String, reflect: true }) orientation: StepperOrientation = \"horizontal\";\n\n  /** When true, the stepper's steps will be clickable */\n  @property({ type: Boolean, reflect: true }) clickable = false;\n\n  /** When true, the stepper's steps can only be clicked in a linear manner */\n  @property({ type: Boolean, reflect: true }) linear = false;\n\n  /** @internal Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"activeStep\")\n  defaultActiveStep = 0;\n\n  /** @internal */\n  @queryAssignedElements() private _slotNodes!: SgdsStep[];\n\n  /** @internal */\n  private _items!: SgdsStep[];\n  private _totalSteps = 0;\n\n  /** @internal Bound i-sgds-click handler for proper event listener removal */\n  private _boundHandleItemClick = this._handleStepClick.bind(this);\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this._totalSteps = this.steps.length;\n    this.addEventListener(\"i-sgds-click\", this._boundHandleItemClick);\n  }\n\n  /** @internal */\n  private _handleSlotChange() {\n    this._items = this._slotNodes;\n    this._totalSteps = this._items.length;\n\n    this._updateStepItems();\n  }\n\n  /** @internal Updates step item properties based on active step and clickable state */\n  private _updateStepItems() {\n    if (this._items && this._items.length > 0) {\n      this._items.forEach((item, index) => {\n        item.stepIndex = index;\n        item.active = this.activeStep === index;\n        item._isCompleted = item.completed || this.activeStep > index;\n        item.isClickable = this.linear\n          ? !item.disabled && this.clickable && (this.activeStep - 1 == index || this.activeStep + 1 == index)\n          : !item.disabled && this.clickable;\n        item.orientation = this.orientation;\n\n        if (this._items.length > 1) {\n          item.isFirstOfType = index === 0;\n          item.classList.toggle(\"last\", index === this._items.length - 1);\n        }\n      });\n    }\n  }\n\n  /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/\n  public getComponent(step: number = this.activeStep) {\n    const items = this._slotNodes.length > 1 ? this._items : this.steps;\n    if (items && items.length > 0) {\n      return items[step]?.component;\n    }\n    return this.steps[step]?.component;\n  }\n\n  /** Moves the active step forward one step */\n  public nextStep() {\n    this.emit(\"sgds-next-step\");\n    if (this.activeStep < this._totalSteps - 1) {\n      this.activeStep++;\n    }\n  }\n\n  /** Moves the active step back one step */\n  public previousStep() {\n    this.emit(\"sgds-previous-step\");\n\n    if (this.activeStep > 0) {\n      this.activeStep--;\n    }\n  }\n\n  /** Changes the active step to the last step */\n  public lastStep() {\n    this.emit(\"sgds-last-step\");\n    if (this.activeStep !== this._totalSteps - 1) {\n      this.activeStep = this._totalSteps - 1;\n    }\n  }\n\n  /** Changes active step to the first step */\n  public firstStep() {\n    this.emit(\"sgds-first-step\");\n    if (this.activeStep > 0) {\n      this.activeStep = 0;\n    }\n  }\n\n  /** Resets the Stepper to its initial active step state */\n  public reset() {\n    this.emit(\"sgds-reset\");\n    this.activeStep = this.defaultActiveStep;\n  }\n\n  /**@internal */\n  _onStepperItemClick(index: number) {\n    this.activeStep = index;\n  }\n\n  /**@internal */\n  @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n  _handleActiveStepChange() {\n    this._updateStepItems();\n    this.emit(\"sgds-arrived\");\n  }\n\n  /**@internal */\n  @watch(\"clickable\", { waitUntilFirstUpdate: true })\n  _handleClickableChange() {\n    this._updateStepItems();\n  }\n\n  /**@internal */\n  @watch(\"orientation\", { waitUntilFirstUpdate: true })\n  _handleOrientationChange() {\n    this._updateStepItems();\n  }\n\n  /**@internal */\n  _handleKeyDown(event: KeyboardEvent, index: number) {\n    if (event.key === \"Enter\") {\n      this._onStepperItemClick(index);\n    }\n  }\n\n  /**@internal */\n  _handleStepClick(e: Event) {\n    const event = e as CustomEvent;\n    e.stopPropagation();\n\n    const stepIndex = event.detail?.stepIndex;\n    this._onStepperItemClick(stepIndex);\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"stepper ${classMap({\n          [`${this.orientation}`]: this.orientation,\n          clickable: this.clickable\n        })}\"\n      >\n        <slot @slotchange=${this._handleSlotChange}></slot>\n\n        ${this.steps.map(({ stepHeader: step, iconName }, index) => {\n          return html`\n            <div class=\"stepper-item-container\">\n              <div\n                class=\"stepper-item ${classMap({\n                  \"is-active\": this.activeStep === index,\n                  \"is-completed\": this.activeStep > index,\n                  \"is-clickable\": this.clickable && this.activeStep > index\n                })}\"\n                tabindex=${this.clickable && this.activeStep > index ? \"0\" : \"-1\"}\n                aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n                aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n                @click=\"${this.clickable ? () => this._onStepperItemClick(index) : null}\"\n                @keydown=${this.clickable ? (e: KeyboardEvent) => this._handleKeyDown(e, index) : null}\n              >\n                <div class=\"stepper-marker\">\n                  ${iconName ? html`<sgds-icon name=${iconName} size=\"md\"></sgds-icon>` : index + 1}\n                </div>\n                <div class=\"stepper-detail\">${step}</div>\n              </div>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport default SgdsStepper;\n"],"names":["stepperStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-stepper.js","sources":["../../../src/components/Stepper/sgds-stepper.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { IStepMetaData } from \"./types\";\nexport type { IStepMetaData };\n/**\n * @summary Steppers are used to inform users which step they are at in a form or a process\n *\n * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n  static styles = [...SgdsElement.styles, stepperStyle];\n  /** @internal */\n  static dependencies = { \"sgds-icon\": SgdsIcon };\n  /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string`, `component:unknown`, `iconName:string`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\n   * It is required to populate this array to properly render the stepper. By default, stepper markers will render numbers. For icon stepper markers, pass the name of sgds icon via `iconName` key. `iconName` is optional.\n   */\n  @property({ type: Array })\n  steps: IStepMetaData[] = [];\n\n  /** The current state of active step. Defaults to 0 */\n  @property({ type: Number, reflect: true })\n  activeStep = 0;\n\n  /** The orientation of stepper. By default, the stepper is of horizontal orientation */\n  @property({ type: String, reflect: true }) orientation: StepperOrientation = \"horizontal\";\n\n  /** When true, the stepper's steps will be clickable */\n  @property({ type: Boolean, reflect: true }) clickable = false;\n\n  /** @internal Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"activeStep\")\n  defaultActiveStep = 0;\n\n  /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/\n  public getComponent(step: number = this.activeStep) {\n    return this.steps[step].component;\n  }\n  /** Moves the active step forward one step */\n  public nextStep() {\n    this.emit(\"sgds-next-step\");\n    if (this.activeStep < this.steps.length - 1) {\n      this.activeStep++;\n    }\n  }\n\n  /** Moves the active step back one step */\n  public previousStep() {\n    this.emit(\"sgds-previous-step\");\n\n    if (this.activeStep > 0) {\n      this.activeStep--;\n    }\n  }\n\n  /** Changes the active step to the last step */\n  public lastStep() {\n    this.emit(\"sgds-last-step\");\n    if (this.activeStep !== this.steps.length - 1) {\n      this.activeStep = this.steps.length - 1;\n    }\n  }\n\n  /** Changes active step to the first step */\n  public firstStep() {\n    this.emit(\"sgds-first-step\");\n    if (this.activeStep > 0) {\n      this.activeStep = 0;\n    }\n  }\n\n  /** Resets the Stepper to its initial active step state */\n  public reset() {\n    this.emit(\"sgds-reset\");\n    this.activeStep = this.defaultActiveStep;\n  }\n\n  /**@internal */\n  _onStepperItemClick(index: number) {\n    //emit an event before moving to next step\n    if (this.activeStep > index) {\n      this.activeStep = index;\n    }\n  }\n\n  /**@internal */\n  @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n  _handleActiveStepChange() {\n    this.emit(\"sgds-arrived\");\n  }\n\n  /**@internal */\n  _handleKeyDown(event: KeyboardEvent, index: number) {\n    if (event.key === \"Enter\") {\n      this._onStepperItemClick(index);\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"stepper ${classMap({\n          [`${this.orientation}`]: this.orientation,\n          clickable: this.clickable\n        })}\"\n      >\n        ${this.steps.map(({ stepHeader: step, iconName }, index) => {\n          return html`\n            <div class=\"stepper-item-container\">\n              <div\n                class=\"stepper-item ${classMap({\n                  \"is-active\": this.activeStep === index,\n                  \"is-completed\": this.activeStep > index,\n                  \"is-clickable\": this.clickable && this.activeStep > index\n                })}\"\n                tabindex=${this.clickable && this.activeStep > index ? \"0\" : \"-1\"}\n                aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n                aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n                @click=\"${this.clickable ? () => this._onStepperItemClick(index) : null}\"\n                @keydown=${this.clickable ? (e: KeyboardEvent) => this._handleKeyDown(e, index) : null}\n              >\n                <div class=\"stepper-marker\">\n                  ${iconName ? html`<sgds-icon name=${iconName} size=\"md\"></sgds-icon>` : index + 1}\n                </div>\n                <div class=\"stepper-detail\">${step}</div>\n              </div>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport default SgdsStepper;\n"],"names":["stepperStyle"],"mappings":"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"}

package/components/Stepper/stepper.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item{margin-bottom:var(--sgds-padding-xl)}.stepper .stepper-item.is-clickable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.stepper.horizontal .stepper-item-container:not(:first-of-type) .stepper-item:before{background:var(--sgds-border-color-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-border-color-default)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-color-subtle)}.stepper .stepper-item.is-clickable:focus .stepper-marker,.stepper .stepper-item.is-clickable:focus-visible .stepper-marker,.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-clickable:focus .stepper-detail,.stepper .stepper-item.is-clickable:focus-visible .stepper-detail,.stepper .stepper-item.is-clickable:hover .stepper-detail{color:var(--sgds-primary-color-emphasis)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color-default)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}`;
+var css_248z = css`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item{margin-bottom:var(--sgds-padding-xl)}.stepper .stepper-item.is-clickable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.stepper.horizontal .stepper-item-container:not(:first-child) .stepper-item:before{background:var(--sgds-border-color-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-border-color-default)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-color-subtle)}.stepper .stepper-item.is-clickable:focus .stepper-marker,.stepper .stepper-item.is-clickable:focus-visible .stepper-marker,.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-clickable:focus .stepper-detail,.stepper .stepper-item.is-clickable:focus-visible .stepper-detail,.stepper .stepper-item.is-clickable:hover .stepper-detail{color:var(--sgds-primary-color-emphasis)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color-default)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=stepper.js.map

package/components/Stepper/types.d.ts

@@ -2,5 +2,4 @@ export interface IStepMetaData {
     component: unknown;
     stepHeader: string;
     iconName?: string;
-    isCompleted?: boolean;
 }

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

@@ -1,16 +1,16 @@
-!function(t){"function"==typeof define&&define.amd?define(t):t()}(function(){"use strict";function t(t,e,s,i){var o,r=arguments.length,n=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(n=(r<3?o(n):r>3?o(e,s,n):o(e,s))||n);return r>3&&n&&Object.defineProperty(e,s,n),n}"function"==typeof SuppressedError&&SuppressedError;
+!function(t){"function"==typeof define&&define.amd?define(t):t()}(function(){"use strict";function t(t,e,s,i){var r,o=arguments.length,n=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,s,i);else for(var a=t.length-1;a>=0;a--)(r=t[a])&&(n=(o<3?r(n):o>3?r(e,s,n):r(e,s))||n);return o>3&&n&&Object.defineProperty(e,s,n),n}"function"==typeof SuppressedError&&SuppressedError;
 /**
    * @license
    * Copyright 2019 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-const e=globalThis,s=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),o=new WeakMap;class r{constructor(t,e,s){if(this._$cssResult$=!0,s!==i)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this._strings=e}get styleSheet(){let t=this._styleSheet;const e=this._strings;if(s&&void 0===t){const s=void 0!==e&&1===e.length;s&&(t=o.get(e)),void 0===t&&((this._styleSheet=t=new CSSStyleSheet).replaceSync(this.cssText),s&&o.set(e,t))}return t}toString(){return this.cssText}}const n=(t,...e)=>{const s=1===t.length?t[0]:e.reduce((e,s,i)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw new Error(`Value passed to 'css' function must be a 'css' function result: ${t}. Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.`)})(s)+t[i+1],t[0]);return new r(s,t,i)},a=t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return new r("string"==typeof(s=e)?s:String(s),void 0,i);var s},d=s?t=>t:t=>t instanceof CSSStyleSheet?a(t):t,{is:l,defineProperty:c,getOwnPropertyDescriptor:h,getOwnPropertyNames:p,getOwnPropertySymbols:u,getPrototypeOf:g}=Object,m=globalThis;let f;const v=m.trustedTypes,b=v?v.emptyScript:"",_=m.reactiveElementPolyfillSupportDevMode;m.litIssuedWarnings??=new Set,f=(t,e)=>{e+=` See https://lit.dev/msg/${t} for more information.`,m.litIssuedWarnings.has(e)||m.litIssuedWarnings.has(t)||(console.warn(e),m.litIssuedWarnings.add(e))},queueMicrotask(()=>{f("dev-mode","Lit is in dev mode. Not recommended for production!"),m.ShadyDOM?.inUse&&void 0===_&&f("polyfill-support-missing","Shadow DOM is being polyfilled via `ShadyDOM` but the `polyfill-support` module has not been loaded.")});const y=(t,e)=>t,w={toAttribute(t,e){switch(e){case Boolean:t=t?b:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},$=(t,e)=>!l(t,e),x={attribute:!0,type:String,converter:w,reflect:!1,useDefault:!1,hasChanged:$};Symbol.metadata??=Symbol("metadata"),m.litPropertyMetadata??=new WeakMap;class S extends HTMLElement{static addInitializer(t){this.__prepare(),(this._initializers??=[]).push(t)}static get observedAttributes(){return this.finalize(),this.__attributeToPropertyMap&&[...this.__attributeToPropertyMap.keys()]}static createProperty(t,e=x){if(e.state&&(e.attribute=!1),this.__prepare(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol.for(`${String(t)} (@property() cache)`),i=this.getPropertyDescriptor(t,s,e);void 0!==i&&c(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:o}=h(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};if(null==i){if("value"in(h(this.prototype,t)??{}))throw new Error(`Field ${JSON.stringify(String(t))} on ${this.name} was declared as a reactive property but it's actually declared as a value on the prototype. Usually this is due to using @property or @state on a method.`);f("reactive-property-without-getter",`Field ${JSON.stringify(String(t))} on ${this.name} was declared as a reactive property but it does not have a getter. This will be an error in a future version of Lit.`)}return{get:i,set(e){const r=i?.call(this);o?.call(this,e),this.requestUpdate(t,r,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??x}static __prepare(){if(this.hasOwnProperty(y("elementProperties")))return;const t=g(this);t.finalize(),void 0!==t._initializers&&(this._initializers=[...t._initializers]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(y("finalized")))return;if(this.finalized=!0,this.__prepare(),this.hasOwnProperty(y("properties"))){const t=this.properties,e=[...p(t),...u(t)];for(const s of e)this.createProperty(s,t[s])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,s]of e)this.elementProperties.set(t,s)}this.__attributeToPropertyMap=new Map;for(const[t,e]of this.elementProperties){const s=this.__attributeNameForProperty(t,e);void 0!==s&&this.__attributeToPropertyMap.set(s,t)}this.elementStyles=this.finalizeStyles(this.styles),this.hasOwnProperty("createProperty")&&f("no-override-create-property","Overriding ReactiveElement.createProperty() is deprecated. The override will not be called with standard decorators"),this.hasOwnProperty("getPropertyDescriptor")&&f("no-override-get-property-descriptor","Overriding ReactiveElement.getPropertyDescriptor() is deprecated. The override will not be called with standard decorators")}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)e.unshift(d(t))}else void 0!==t&&e.push(d(t));return e}static __attributeNameForProperty(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this.__instanceProperties=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.__reflectingProperty=null,this.__initialize()}__initialize(){this.__updatePromise=new Promise(t=>this.enableUpdating=t),this._$changedProperties=new Map,this.__saveInstanceProperties(),this.requestUpdate(),this.constructor._initializers?.forEach(t=>t(this))}addController(t){(this.__controllers??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this.__controllers?.delete(t)}__saveInstanceProperties(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this.__instanceProperties=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,i)=>{if(s)t.adoptedStyleSheets=i.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const s of i){const i=document.createElement("style"),o=e.litNonce;void 0!==o&&i.setAttribute("nonce",o),i.textContent=s.cssText,t.appendChild(i)}})(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this.__controllers?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this.__controllers?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,s){this._$attributeToProperty(t,s)}__propertyToAttribute(t,e){const s=this.constructor.elementProperties.get(t),i=this.constructor.__attributeNameForProperty(t,s);if(void 0!==i&&!0===s.reflect){const o=(void 0!==s.converter?.toAttribute?s.converter:w).toAttribute(e,s.type);this.constructor.enabledWarnings.includes("migration")&&void 0===o&&f("undefined-attribute-value",`The attribute value for the ${t} property is undefined on element ${this.localName}. The attribute will be removed, but in the previous version of \`ReactiveElement\`, the attribute would not have changed.`),this.__reflectingProperty=t,null==o?this.removeAttribute(i):this.setAttribute(i,o),this.__reflectingProperty=null}}_$attributeToProperty(t,e){const s=this.constructor,i=s.__attributeToPropertyMap.get(t);if(void 0!==i&&this.__reflectingProperty!==i){const t=s.getPropertyOptions(i),o="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:w;this.__reflectingProperty=i;const r=o.fromAttribute(e,t.type);this[i]=r??this.__defaultValues?.get(i)??r,this.__reflectingProperty=null}}requestUpdate(t,e,s,i=!1,o){if(void 0!==t){t instanceof Event&&f("","The requestUpdate() method was called with an Event as the property name. This is probably a mistake caused by binding this.requestUpdate as an event listener. Instead bind a function that will call it with no arguments: () => this.requestUpdate()");const r=this.constructor;!1===i&&(o=this[t]),s??=r.getPropertyOptions(t);if(!((s.hasChanged??$)(o,e)||s.useDefault&&s.reflect&&o===this.__defaultValues?.get(t)&&!this.hasAttribute(r.__attributeNameForProperty(t,s))))return;this._$changeProperty(t,e,s)}!1===this.isUpdatePending&&(this.__updatePromise=this.__enqueueUpdate())}_$changeProperty(t,e,{useDefault:s,reflect:i,wrapped:o},r){s&&!(this.__defaultValues??=new Map).has(t)&&(this.__defaultValues.set(t,r??e??this[t]),!0!==o||void 0!==r)||(this._$changedProperties.has(t)||(this.hasUpdated||s||(e=void 0),this._$changedProperties.set(t,e)),!0===i&&this.__reflectingProperty!==t&&(this.__reflectingProperties??=new Set).add(t))}async __enqueueUpdate(){this.isUpdatePending=!0;try{await this.__updatePromise}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){const t=this.performUpdate();return this.constructor.enabledWarnings.includes("async-perform-update")&&"function"==typeof t?.then&&f("async-perform-update",`Element ${this.localName} returned a Promise from performUpdate(). This behavior is deprecated and will be removed in a future version of ReactiveElement.`),t}performUpdate(){if(!this.isUpdatePending)return;var t;if(t={kind:"update"},m.emitLitDebugLogEvents&&m.dispatchEvent(new CustomEvent("lit-debug",{detail:t})),!this.hasUpdated){this.renderRoot??=this.createRenderRoot();{const t=[...this.constructor.elementProperties.keys()].filter(t=>this.hasOwnProperty(t)&&t in g(this));if(t.length)throw new Error(`The following properties on element ${this.localName} will not trigger updates as expected because they are set using class fields: ${t.join(", ")}. Native class fields and some compiled output will overwrite accessors used for detecting changes. See https://lit.dev/msg/class-field-shadowing for more information.`)}if(this.__instanceProperties){for(const[t,e]of this.__instanceProperties)this[t]=e;this.__instanceProperties=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,s]of t){const{wrapped:t}=s,i=this[e];!0!==t||this._$changedProperties.has(e)||void 0===i||this._$changeProperty(e,void 0,s,i)}}let e=!1;const s=this._$changedProperties;try{e=this.shouldUpdate(s),e?(this.willUpdate(s),this.__controllers?.forEach(t=>t.hostUpdate?.()),this.update(s)):this.__markUpdated()}catch(t){throw e=!1,this.__markUpdated(),t}e&&this._$didUpdate(s)}willUpdate(t){}_$didUpdate(t){this.__controllers?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t),this.isUpdatePending&&this.constructor.enabledWarnings.includes("change-in-update")&&f("change-in-update",`Element ${this.localName} scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update.`)}__markUpdated(){this._$changedProperties=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.__updatePromise}shouldUpdate(t){return!0}update(t){this.__reflectingProperties&&=this.__reflectingProperties.forEach(t=>this.__propertyToAttribute(t,this[t])),this.__markUpdated()}updated(t){}firstUpdated(t){}}S.elementStyles=[],S.shadowRootOptions={mode:"open"},S[y("elementProperties")]=new Map,S[y("finalized")]=new Map,_?.({ReactiveElement:S});{S.enabledWarnings=["change-in-update","async-perform-update"];const t=function(t){t.hasOwnProperty(y("enabledWarnings"))||(t.enabledWarnings=t.enabledWarnings.slice())};S.enableWarning=function(e){t(this),this.enabledWarnings.includes(e)||this.enabledWarnings.push(e)},S.disableWarning=function(e){t(this);const s=this.enabledWarnings.indexOf(e);s>=0&&this.enabledWarnings.splice(s,1)}}(m.reactiveElementVersions??=[]).push("2.1.2"),m.reactiveElementVersions.length>1&&queueMicrotask(()=>{f("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")});
+const e=globalThis,s=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),r=new WeakMap;class o{constructor(t,e,s){if(this._$cssResult$=!0,s!==i)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this._strings=e}get styleSheet(){let t=this._styleSheet;const e=this._strings;if(s&&void 0===t){const s=void 0!==e&&1===e.length;s&&(t=r.get(e)),void 0===t&&((this._styleSheet=t=new CSSStyleSheet).replaceSync(this.cssText),s&&r.set(e,t))}return t}toString(){return this.cssText}}const n=(t,...e)=>{const s=1===t.length?t[0]:e.reduce((e,s,i)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw new Error(`Value passed to 'css' function must be a 'css' function result: ${t}. Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.`)})(s)+t[i+1],t[0]);return new o(s,t,i)},a=t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return new o("string"==typeof(s=e)?s:String(s),void 0,i);var s},d=s?t=>t:t=>t instanceof CSSStyleSheet?a(t):t,{is:l,defineProperty:c,getOwnPropertyDescriptor:h,getOwnPropertyNames:p,getOwnPropertySymbols:u,getPrototypeOf:g}=Object,m=globalThis;let f;const v=m.trustedTypes,b=v?v.emptyScript:"",_=m.reactiveElementPolyfillSupportDevMode;m.litIssuedWarnings??=new Set,f=(t,e)=>{e+=` See https://lit.dev/msg/${t} for more information.`,m.litIssuedWarnings.has(e)||m.litIssuedWarnings.has(t)||(console.warn(e),m.litIssuedWarnings.add(e))},queueMicrotask(()=>{f("dev-mode","Lit is in dev mode. Not recommended for production!"),m.ShadyDOM?.inUse&&void 0===_&&f("polyfill-support-missing","Shadow DOM is being polyfilled via `ShadyDOM` but the `polyfill-support` module has not been loaded.")});const y=(t,e)=>t,w={toAttribute(t,e){switch(e){case Boolean:t=t?b:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},$=(t,e)=>!l(t,e),x={attribute:!0,type:String,converter:w,reflect:!1,useDefault:!1,hasChanged:$};Symbol.metadata??=Symbol("metadata"),m.litPropertyMetadata??=new WeakMap;class S extends HTMLElement{static addInitializer(t){this.__prepare(),(this._initializers??=[]).push(t)}static get observedAttributes(){return this.finalize(),this.__attributeToPropertyMap&&[...this.__attributeToPropertyMap.keys()]}static createProperty(t,e=x){if(e.state&&(e.attribute=!1),this.__prepare(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol.for(`${String(t)} (@property() cache)`),i=this.getPropertyDescriptor(t,s,e);void 0!==i&&c(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:r}=h(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};if(null==i){if("value"in(h(this.prototype,t)??{}))throw new Error(`Field ${JSON.stringify(String(t))} on ${this.name} was declared as a reactive property but it's actually declared as a value on the prototype. Usually this is due to using @property or @state on a method.`);f("reactive-property-without-getter",`Field ${JSON.stringify(String(t))} on ${this.name} was declared as a reactive property but it does not have a getter. This will be an error in a future version of Lit.`)}return{get:i,set(e){const o=i?.call(this);r?.call(this,e),this.requestUpdate(t,o,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??x}static __prepare(){if(this.hasOwnProperty(y("elementProperties")))return;const t=g(this);t.finalize(),void 0!==t._initializers&&(this._initializers=[...t._initializers]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(y("finalized")))return;if(this.finalized=!0,this.__prepare(),this.hasOwnProperty(y("properties"))){const t=this.properties,e=[...p(t),...u(t)];for(const s of e)this.createProperty(s,t[s])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,s]of e)this.elementProperties.set(t,s)}this.__attributeToPropertyMap=new Map;for(const[t,e]of this.elementProperties){const s=this.__attributeNameForProperty(t,e);void 0!==s&&this.__attributeToPropertyMap.set(s,t)}this.elementStyles=this.finalizeStyles(this.styles),this.hasOwnProperty("createProperty")&&f("no-override-create-property","Overriding ReactiveElement.createProperty() is deprecated. The override will not be called with standard decorators"),this.hasOwnProperty("getPropertyDescriptor")&&f("no-override-get-property-descriptor","Overriding ReactiveElement.getPropertyDescriptor() is deprecated. The override will not be called with standard decorators")}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)e.unshift(d(t))}else void 0!==t&&e.push(d(t));return e}static __attributeNameForProperty(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this.__instanceProperties=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.__reflectingProperty=null,this.__initialize()}__initialize(){this.__updatePromise=new Promise(t=>this.enableUpdating=t),this._$changedProperties=new Map,this.__saveInstanceProperties(),this.requestUpdate(),this.constructor._initializers?.forEach(t=>t(this))}addController(t){(this.__controllers??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this.__controllers?.delete(t)}__saveInstanceProperties(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this.__instanceProperties=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,i)=>{if(s)t.adoptedStyleSheets=i.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const s of i){const i=document.createElement("style"),r=e.litNonce;void 0!==r&&i.setAttribute("nonce",r),i.textContent=s.cssText,t.appendChild(i)}})(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this.__controllers?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this.__controllers?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,s){this._$attributeToProperty(t,s)}__propertyToAttribute(t,e){const s=this.constructor.elementProperties.get(t),i=this.constructor.__attributeNameForProperty(t,s);if(void 0!==i&&!0===s.reflect){const r=(void 0!==s.converter?.toAttribute?s.converter:w).toAttribute(e,s.type);this.constructor.enabledWarnings.includes("migration")&&void 0===r&&f("undefined-attribute-value",`The attribute value for the ${t} property is undefined on element ${this.localName}. The attribute will be removed, but in the previous version of \`ReactiveElement\`, the attribute would not have changed.`),this.__reflectingProperty=t,null==r?this.removeAttribute(i):this.setAttribute(i,r),this.__reflectingProperty=null}}_$attributeToProperty(t,e){const s=this.constructor,i=s.__attributeToPropertyMap.get(t);if(void 0!==i&&this.__reflectingProperty!==i){const t=s.getPropertyOptions(i),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:w;this.__reflectingProperty=i;const o=r.fromAttribute(e,t.type);this[i]=o??this.__defaultValues?.get(i)??o,this.__reflectingProperty=null}}requestUpdate(t,e,s,i=!1,r){if(void 0!==t){t instanceof Event&&f("","The requestUpdate() method was called with an Event as the property name. This is probably a mistake caused by binding this.requestUpdate as an event listener. Instead bind a function that will call it with no arguments: () => this.requestUpdate()");const o=this.constructor;!1===i&&(r=this[t]),s??=o.getPropertyOptions(t);if(!((s.hasChanged??$)(r,e)||s.useDefault&&s.reflect&&r===this.__defaultValues?.get(t)&&!this.hasAttribute(o.__attributeNameForProperty(t,s))))return;this._$changeProperty(t,e,s)}!1===this.isUpdatePending&&(this.__updatePromise=this.__enqueueUpdate())}_$changeProperty(t,e,{useDefault:s,reflect:i,wrapped:r},o){s&&!(this.__defaultValues??=new Map).has(t)&&(this.__defaultValues.set(t,o??e??this[t]),!0!==r||void 0!==o)||(this._$changedProperties.has(t)||(this.hasUpdated||s||(e=void 0),this._$changedProperties.set(t,e)),!0===i&&this.__reflectingProperty!==t&&(this.__reflectingProperties??=new Set).add(t))}async __enqueueUpdate(){this.isUpdatePending=!0;try{await this.__updatePromise}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){const t=this.performUpdate();return this.constructor.enabledWarnings.includes("async-perform-update")&&"function"==typeof t?.then&&f("async-perform-update",`Element ${this.localName} returned a Promise from performUpdate(). This behavior is deprecated and will be removed in a future version of ReactiveElement.`),t}performUpdate(){if(!this.isUpdatePending)return;var t;if(t={kind:"update"},m.emitLitDebugLogEvents&&m.dispatchEvent(new CustomEvent("lit-debug",{detail:t})),!this.hasUpdated){this.renderRoot??=this.createRenderRoot();{const t=[...this.constructor.elementProperties.keys()].filter(t=>this.hasOwnProperty(t)&&t in g(this));if(t.length)throw new Error(`The following properties on element ${this.localName} will not trigger updates as expected because they are set using class fields: ${t.join(", ")}. Native class fields and some compiled output will overwrite accessors used for detecting changes. See https://lit.dev/msg/class-field-shadowing for more information.`)}if(this.__instanceProperties){for(const[t,e]of this.__instanceProperties)this[t]=e;this.__instanceProperties=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,s]of t){const{wrapped:t}=s,i=this[e];!0!==t||this._$changedProperties.has(e)||void 0===i||this._$changeProperty(e,void 0,s,i)}}let e=!1;const s=this._$changedProperties;try{e=this.shouldUpdate(s),e?(this.willUpdate(s),this.__controllers?.forEach(t=>t.hostUpdate?.()),this.update(s)):this.__markUpdated()}catch(t){throw e=!1,this.__markUpdated(),t}e&&this._$didUpdate(s)}willUpdate(t){}_$didUpdate(t){this.__controllers?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t),this.isUpdatePending&&this.constructor.enabledWarnings.includes("change-in-update")&&f("change-in-update",`Element ${this.localName} scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update.`)}__markUpdated(){this._$changedProperties=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.__updatePromise}shouldUpdate(t){return!0}update(t){this.__reflectingProperties&&=this.__reflectingProperties.forEach(t=>this.__propertyToAttribute(t,this[t])),this.__markUpdated()}updated(t){}firstUpdated(t){}}S.elementStyles=[],S.shadowRootOptions={mode:"open"},S[y("elementProperties")]=new Map,S[y("finalized")]=new Map,_?.({ReactiveElement:S});{S.enabledWarnings=["change-in-update","async-perform-update"];const t=function(t){t.hasOwnProperty(y("enabledWarnings"))||(t.enabledWarnings=t.enabledWarnings.slice())};S.enableWarning=function(e){t(this),this.enabledWarnings.includes(e)||this.enabledWarnings.push(e)},S.disableWarning=function(e){t(this);const s=this.enabledWarnings.indexOf(e);s>=0&&this.enabledWarnings.splice(s,1)}}(m.reactiveElementVersions??=[]).push("2.1.2"),m.reactiveElementVersions.length>1&&queueMicrotask(()=>{f("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")});
 /**
    * @license
    * Copyright 2017 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-const P=globalThis,k=t=>{P.emitLitDebugLogEvents&&P.dispatchEvent(new CustomEvent("lit-debug",{detail:t}))};let C,E=0;P.litIssuedWarnings??=new Set,C=(t,e)=>{e+=t?` See https://lit.dev/msg/${t} for more information.`:"",P.litIssuedWarnings.has(e)||P.litIssuedWarnings.has(t)||(console.warn(e),P.litIssuedWarnings.add(e))},queueMicrotask(()=>{C("dev-mode","Lit is in dev mode. Not recommended for production!")});const T=P.ShadyDOM?.inUse&&!0===P.ShadyDOM?.noPatch?P.ShadyDOM.wrap:t=>t,z=P.trustedTypes,N=z?z.createPolicy("lit-html",{createHTML:t=>t}):void 0,M=t=>t,O=(t,e,s)=>M,U=t=>{if(rt!==O)throw new Error("Attempted to overwrite existing lit-html security policy. setSanitizeDOMValueFactory should be called at most once.");rt=t},V=()=>{rt=O},A=(t,e,s)=>rt(t,e,s),L="$lit$",R=`lit$${Math.random().toFixed(9).slice(2)}$`,W="?"+R,j=`<${W}>`,I=document,D=()=>I.createComment(""),q=t=>null===t||"object"!=typeof t&&"function"!=typeof t,B=Array.isArray,F="[ \t\n\f\r]",H=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Z=/-->/g,J=/>/g,Y=new RegExp(`>|${F}(?:([^\\s"'>=/]+)(${F}*=${F}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),X=/'/g,G=/"/g,K=/^(?:script|style|textarea|title)$/i,Q=(tt=1,(t,...e)=>(t.some(t=>void 0===t)&&console.warn("Some template strings are undefined.\nThis is probably caused by illegal octal escape sequences."),e.some(t=>t?._$litStatic$)&&C("","Static values 'literal' or 'unsafeStatic' cannot be used as values to non-static templates.\nPlease use the static 'html' tag function. See https://lit.dev/docs/templates/expressions/#static-expressions"),{_$litType$:tt,strings:t,values:e}));var tt;const et=Symbol.for("lit-noChange"),st=Symbol.for("lit-nothing"),it=new WeakMap,ot=I.createTreeWalker(I,129);let rt=O;function nt(t,e){if(!B(t)||!t.hasOwnProperty("raw")){let t="invalid template strings array";throw t="\n          Internal Error: expected template strings to be an array\n          with a 'raw' field. Faking a template strings array by\n          calling html or svg like an ordinary function is effectively\n          the same as calling unsafeHtml and can lead to major security\n          issues, e.g. opening your code up to XSS attacks.\n          If you're using the html or svg tagged template functions normally\n          and still seeing this error, please file a bug at\n          https://github.com/lit/lit/issues/new?template=bug_report.md\n          and include information about your build tooling, if any.\n        ".trim().replace(/\n */g,"\n"),new Error(t)}return void 0!==N?N.createHTML(e):e}class at{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let o=0,r=0;const n=t.length-1,a=this.parts,[d,l]=((t,e)=>{const s=t.length-1,i=[];let o,r=2===e?"<svg>":3===e?"<math>":"",n=H;for(let e=0;e<s;e++){const s=t[e];let a,d,l=-1,c=0;for(;c<s.length&&(n.lastIndex=c,d=n.exec(s),null!==d);)if(c=n.lastIndex,n===H){if("!--"===d[1])n=Z;else if(void 0!==d[1])n=J;else if(void 0!==d[2])K.test(d[2])&&(o=new RegExp(`</${d[2]}`,"g")),n=Y;else if(void 0!==d[3])throw new Error("Bindings in tag names are not supported. Please use static templates instead. See https://lit.dev/docs/templates/expressions/#static-expressions")}else n===Y?">"===d[0]?(n=o??H,l=-1):void 0===d[1]?l=-2:(l=n.lastIndex-d[2].length,a=d[1],n=void 0===d[3]?Y:'"'===d[3]?G:X):n===G||n===X?n=Y:n===Z||n===J?n=H:(n=Y,o=void 0);console.assert(-1===l||n===Y||n===X||n===G,"unexpected parse state B");const h=n===Y&&t[e+1].startsWith("/>")?" ":"";r+=n===H?s+j:l>=0?(i.push(a),s.slice(0,l)+L+s.slice(l)+R+h):s+R+(-2===l?e:h)}return[nt(t,r+(t[s]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),i]})(t,e);if(this.el=at.createElement(d,s),ot.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(i=ot.nextNode())&&a.length<n;){if(1===i.nodeType){{const t=i.localName;if(/^(?:textarea|template)$/i.test(t)&&i.innerHTML.includes(R)){const e=`Expressions are not supported inside \`${t}\` elements. See https://lit.dev/msg/expression-in-${t} for more information.`;if("template"===t)throw new Error(e);C("",e)}}if(i.hasAttributes())for(const t of i.getAttributeNames())if(t.endsWith(L)){const e=l[r++],s=i.getAttribute(t).split(R),n=/([.?@])?(.*)/.exec(e);a.push({type:1,index:o,name:n[2],strings:s,ctor:"."===n[1]?pt:"?"===n[1]?ut:"@"===n[1]?gt:ht}),i.removeAttribute(t)}else t.startsWith(R)&&(a.push({type:6,index:o}),i.removeAttribute(t));if(K.test(i.tagName)){const t=i.textContent.split(R),e=t.length-1;if(e>0){i.textContent=z?z.emptyScript:"";for(let s=0;s<e;s++)i.append(t[s],D()),ot.nextNode(),a.push({type:2,index:++o});i.append(t[e],D())}}}else if(8===i.nodeType){if(i.data===W)a.push({type:2,index:o});else{let t=-1;for(;-1!==(t=i.data.indexOf(R,t+1));)a.push({type:7,index:o}),t+=R.length-1}}o++}if(l.length!==r)throw new Error('Detected duplicate attribute bindings. This occurs if your template has duplicate attributes on an element tag. For example "<input ?disabled=${true} ?disabled=${false}>" contains a duplicate "disabled" attribute. The error was detected in the following template: \n`'+t.join("${...}")+"`");k&&k({kind:"template prep",template:this,clonableTemplate:this.el,parts:this.parts,strings:t})}static createElement(t,e){const s=I.createElement("template");return s.innerHTML=t,s}}function dt(t,e,s=t,i){if(e===et)return e;let o=void 0!==i?s.__directives?.[i]:s.__directive;const r=q(e)?void 0:e._$litDirective$;return o?.constructor!==r&&(o?._$notifyDirectiveConnectionChanged?.(!1),void 0===r?o=void 0:(o=new r(t),o._$initialize(t,s,i)),void 0!==i?(s.__directives??=[])[i]=o:s.__directive=o),void 0!==o&&(e=dt(t,o._$resolve(t,e.values),o,i)),e}class lt{constructor(t,e){this._$parts=[],this._$disconnectableChildren=void 0,this._$template=t,this._$parent=e}get parentNode(){return this._$parent.parentNode}get _$isConnected(){return this._$parent._$isConnected}_clone(t){const{el:{content:e},parts:s}=this._$template,i=(t?.creationScope??I).importNode(e,!0);ot.currentNode=i;let o=ot.nextNode(),r=0,n=0,a=s[0];for(;void 0!==a;){if(r===a.index){let e;2===a.type?e=new ct(o,o.nextSibling,this,t):1===a.type?e=new a.ctor(o,a.name,a.strings,this,t):6===a.type&&(e=new mt(o,this,t)),this._$parts.push(e),a=s[++n]}r!==a?.index&&(o=ot.nextNode(),r++)}return ot.currentNode=I,i}_update(t){let e=0;for(const s of this._$parts)void 0!==s&&(k&&k({kind:"set part",part:s,value:t[e],valueIndex:e,values:t,templateInstance:this}),void 0!==s.strings?(s._$setValue(t,s,e),e+=s.strings.length-2):s._$setValue(t[e])),e++}}class ct{get _$isConnected(){return this._$parent?._$isConnected??this.__isConnected}constructor(t,e,s,i){this.type=2,this._$committedValue=st,this._$disconnectableChildren=void 0,this._$startNode=t,this._$endNode=e,this._$parent=s,this.options=i,this.__isConnected=i?.isConnected??!0,this._textSanitizer=void 0}get parentNode(){let t=T(this._$startNode).parentNode;const e=this._$parent;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$startNode}get endNode(){return this._$endNode}_$setValue(t,e=this){if(null===this.parentNode)throw new Error("This `ChildPart` has no `parentNode` and therefore cannot accept a value. This likely means the element containing the part was manipulated in an unsupported way outside of Lit's control such that the part's marker nodes were ejected from DOM. For example, setting the element's `innerHTML` or `textContent` can do this.");if(t=dt(this,t,e),q(t))t===st||null==t||""===t?(this._$committedValue!==st&&(k&&k({kind:"commit nothing to child",start:this._$startNode,end:this._$endNode,parent:this._$parent,options:this.options}),this._$clear()),this._$committedValue=st):t!==this._$committedValue&&t!==et&&this._commitText(t);else if(void 0!==t._$litType$)this._commitTemplateResult(t);else if(void 0!==t.nodeType){if(this.options?.host===t)return this._commitText("[probable mistake: rendered a template's host in itself (commonly caused by writing ${this} in a template]"),void console.warn("Attempted to render the template host",t,"inside itself. This is almost always a mistake, and in dev mode ","we render some warning text. In production however, we'll ","render it, which will usually result in an error, and sometimes ","in the element disappearing from the DOM.");this._commitNode(t)}else(t=>B(t)||"function"==typeof t?.[Symbol.iterator])(t)?this._commitIterable(t):this._commitText(t)}_insert(t){return T(T(this._$startNode).parentNode).insertBefore(t,this._$endNode)}_commitNode(t){if(this._$committedValue!==t){if(this._$clear(),rt!==O){const t=this._$startNode.parentNode?.nodeName;if("STYLE"===t||"SCRIPT"===t){let e="Forbidden";throw e="STYLE"===t?"Lit does not support binding inside style nodes. This is a security risk, as style injection attacks can exfiltrate data and spoof UIs. Consider instead using css`...` literals to compose styles, and do dynamic styling with css custom properties, ::parts, <slot>s, and by mutating the DOM rather than stylesheets.":"Lit does not support binding inside script nodes. This is a security risk, as it could allow arbitrary code execution.",new Error(e)}}k&&k({kind:"commit node",start:this._$startNode,parent:this._$parent,value:t,options:this.options}),this._$committedValue=this._insert(t)}}_commitText(t){if(this._$committedValue!==st&&q(this._$committedValue)){const e=T(this._$startNode).nextSibling;void 0===this._textSanitizer&&(this._textSanitizer=A(e,"data","property")),t=this._textSanitizer(t),k&&k({kind:"commit text",node:e,value:t,options:this.options}),e.data=t}else{const e=I.createTextNode("");this._commitNode(e),void 0===this._textSanitizer&&(this._textSanitizer=A(e,"data","property")),t=this._textSanitizer(t),k&&k({kind:"commit text",node:e,value:t,options:this.options}),e.data=t}this._$committedValue=t}_commitTemplateResult(t){const{values:e,_$litType$:s}=t,i="number"==typeof s?this._$getTemplate(t):(void 0===s.el&&(s.el=at.createElement(nt(s.h,s.h[0]),this.options)),s);if(this._$committedValue?._$template===i)k&&k({kind:"template updating",template:i,instance:this._$committedValue,parts:this._$committedValue._$parts,options:this.options,values:e}),this._$committedValue._update(e);else{const t=new lt(i,this),s=t._clone(this.options);k&&k({kind:"template instantiated",template:i,instance:t,parts:t._$parts,options:this.options,fragment:s,values:e}),t._update(e),k&&k({kind:"template instantiated and updated",template:i,instance:t,parts:t._$parts,options:this.options,fragment:s,values:e}),this._commitNode(s),this._$committedValue=t}}_$getTemplate(t){let e=it.get(t.strings);return void 0===e&&it.set(t.strings,e=new at(t)),e}_commitIterable(t){B(this._$committedValue)||(this._$committedValue=[],this._$clear());const e=this._$committedValue;let s,i=0;for(const o of t)i===e.length?e.push(s=new ct(this._insert(D()),this._insert(D()),this,this.options)):s=e[i],s._$setValue(o),i++;i<e.length&&(this._$clear(s&&T(s._$endNode).nextSibling,i),e.length=i)}_$clear(t=T(this._$startNode).nextSibling,e){for(this._$notifyConnectionChanged?.(!1,!0,e);t!==this._$endNode;){const e=T(t).nextSibling;T(t).remove(),t=e}}setConnected(t){if(void 0!==this._$parent)throw new Error("part.setConnected() may only be called on a RootPart returned from render().");this.__isConnected=t,this._$notifyConnectionChanged?.(t)}}class ht{get tagName(){return this.element.tagName}get _$isConnected(){return this._$parent._$isConnected}constructor(t,e,s,i,o){this.type=1,this._$committedValue=st,this._$disconnectableChildren=void 0,this.element=t,this.name=e,this._$parent=i,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$committedValue=new Array(s.length-1).fill(new String),this.strings=s):this._$committedValue=st,this._sanitizer=void 0}_$setValue(t,e=this,s,i){const o=this.strings;let r=!1;if(void 0===o)t=dt(this,t,e,0),r=!q(t)||t!==this._$committedValue&&t!==et,r&&(this._$committedValue=t);else{const i=t;let n,a;for(t=o[0],n=0;n<o.length-1;n++)a=dt(this,i[s+n],e,n),a===et&&(a=this._$committedValue[n]),r||=!q(a)||a!==this._$committedValue[n],a===st?t=st:t!==st&&(t+=(a??"")+o[n+1]),this._$committedValue[n]=a}r&&!i&&this._commitValue(t)}_commitValue(t){t===st?T(this.element).removeAttribute(this.name):(void 0===this._sanitizer&&(this._sanitizer=rt(this.element,this.name,"attribute")),t=this._sanitizer(t??""),k&&k({kind:"commit attribute",element:this.element,name:this.name,value:t,options:this.options}),T(this.element).setAttribute(this.name,t??""))}}class pt extends ht{constructor(){super(...arguments),this.type=3}_commitValue(t){void 0===this._sanitizer&&(this._sanitizer=rt(this.element,this.name,"property")),t=this._sanitizer(t),k&&k({kind:"commit property",element:this.element,name:this.name,value:t,options:this.options}),this.element[this.name]=t===st?void 0:t}}class ut extends ht{constructor(){super(...arguments),this.type=4}_commitValue(t){k&&k({kind:"commit boolean attribute",element:this.element,name:this.name,value:!(!t||t===st),options:this.options}),T(this.element).toggleAttribute(this.name,!!t&&t!==st)}}class gt extends ht{constructor(t,e,s,i,o){if(super(t,e,s,i,o),this.type=5,void 0!==this.strings)throw new Error(`A \`<${t.localName}>\` has a \`@${e}=...\` listener with invalid content. Event listeners in templates must have exactly one expression and no surrounding text.`)}_$setValue(t,e=this){if((t=dt(this,t,e,0)??st)===et)return;const s=this._$committedValue,i=t===st&&s!==st||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,o=t!==st&&(s===st||i);k&&k({kind:"commit event listener",element:this.element,name:this.name,value:t,options:this.options,removeListener:i,addListener:o,oldListener:s}),i&&this.element.removeEventListener(this.name,this,s),o&&this.element.addEventListener(this.name,this,t),this._$committedValue=t}handleEvent(t){"function"==typeof this._$committedValue?this._$committedValue.call(this.options?.host??this.element,t):this._$committedValue.handleEvent(t)}}class mt{constructor(t,e,s){this.element=t,this.type=6,this._$disconnectableChildren=void 0,this._$parent=e,this.options=s}get _$isConnected(){return this._$parent._$isConnected}_$setValue(t){k&&k({kind:"commit to element binding",element:this.element,value:t,options:this.options}),dt(this,t)}}const ft=P.litHtmlPolyfillSupportDevMode;ft?.(at,ct),(P.litHtmlVersions??=[]).push("3.3.2"),P.litHtmlVersions.length>1&&queueMicrotask(()=>{C("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")});const vt=(t,e,s)=>{if(null==e)throw new TypeError(`The container to render into may not be ${e}`);const i=E++,o=s?.renderBefore??e;let r=o._$litPart$;if(k&&k({kind:"begin render",id:i,value:t,container:e,options:s,part:r}),void 0===r){const t=s?.renderBefore??null;o._$litPart$=r=new ct(e.insertBefore(D(),t),t,void 0,s??{})}return r._$setValue(t),k&&k({kind:"end render",id:i,value:t,container:e,options:s,part:r}),r};vt.setSanitizer=U,vt.createSanitizer=A,vt._testOnlyClearSanitizerFactoryDoNotCallOrElse=V;
+const P=globalThis,k=t=>{P.emitLitDebugLogEvents&&P.dispatchEvent(new CustomEvent("lit-debug",{detail:t}))};let C,E=0;P.litIssuedWarnings??=new Set,C=(t,e)=>{e+=t?` See https://lit.dev/msg/${t} for more information.`:"",P.litIssuedWarnings.has(e)||P.litIssuedWarnings.has(t)||(console.warn(e),P.litIssuedWarnings.add(e))},queueMicrotask(()=>{C("dev-mode","Lit is in dev mode. Not recommended for production!")});const T=P.ShadyDOM?.inUse&&!0===P.ShadyDOM?.noPatch?P.ShadyDOM.wrap:t=>t,z=P.trustedTypes,N=z?z.createPolicy("lit-html",{createHTML:t=>t}):void 0,M=t=>t,O=(t,e,s)=>M,U=t=>{if(ot!==O)throw new Error("Attempted to overwrite existing lit-html security policy. setSanitizeDOMValueFactory should be called at most once.");ot=t},V=()=>{ot=O},A=(t,e,s)=>ot(t,e,s),L="$lit$",W=`lit$${Math.random().toFixed(9).slice(2)}$`,R="?"+W,j=`<${R}>`,I=document,D=()=>I.createComment(""),q=t=>null===t||"object"!=typeof t&&"function"!=typeof t,B=Array.isArray,F="[ \t\n\f\r]",H=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Z=/-->/g,J=/>/g,Y=new RegExp(`>|${F}(?:([^\\s"'>=/]+)(${F}*=${F}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),X=/'/g,G=/"/g,K=/^(?:script|style|textarea|title)$/i,Q=(tt=1,(t,...e)=>(t.some(t=>void 0===t)&&console.warn("Some template strings are undefined.\nThis is probably caused by illegal octal escape sequences."),e.some(t=>t?._$litStatic$)&&C("","Static values 'literal' or 'unsafeStatic' cannot be used as values to non-static templates.\nPlease use the static 'html' tag function. See https://lit.dev/docs/templates/expressions/#static-expressions"),{_$litType$:tt,strings:t,values:e}));var tt;const et=Symbol.for("lit-noChange"),st=Symbol.for("lit-nothing"),it=new WeakMap,rt=I.createTreeWalker(I,129);let ot=O;function nt(t,e){if(!B(t)||!t.hasOwnProperty("raw")){let t="invalid template strings array";throw t="\n          Internal Error: expected template strings to be an array\n          with a 'raw' field. Faking a template strings array by\n          calling html or svg like an ordinary function is effectively\n          the same as calling unsafeHtml and can lead to major security\n          issues, e.g. opening your code up to XSS attacks.\n          If you're using the html or svg tagged template functions normally\n          and still seeing this error, please file a bug at\n          https://github.com/lit/lit/issues/new?template=bug_report.md\n          and include information about your build tooling, if any.\n        ".trim().replace(/\n */g,"\n"),new Error(t)}return void 0!==N?N.createHTML(e):e}class at{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let r=0,o=0;const n=t.length-1,a=this.parts,[d,l]=((t,e)=>{const s=t.length-1,i=[];let r,o=2===e?"<svg>":3===e?"<math>":"",n=H;for(let e=0;e<s;e++){const s=t[e];let a,d,l=-1,c=0;for(;c<s.length&&(n.lastIndex=c,d=n.exec(s),null!==d);)if(c=n.lastIndex,n===H){if("!--"===d[1])n=Z;else if(void 0!==d[1])n=J;else if(void 0!==d[2])K.test(d[2])&&(r=new RegExp(`</${d[2]}`,"g")),n=Y;else if(void 0!==d[3])throw new Error("Bindings in tag names are not supported. Please use static templates instead. See https://lit.dev/docs/templates/expressions/#static-expressions")}else n===Y?">"===d[0]?(n=r??H,l=-1):void 0===d[1]?l=-2:(l=n.lastIndex-d[2].length,a=d[1],n=void 0===d[3]?Y:'"'===d[3]?G:X):n===G||n===X?n=Y:n===Z||n===J?n=H:(n=Y,r=void 0);console.assert(-1===l||n===Y||n===X||n===G,"unexpected parse state B");const h=n===Y&&t[e+1].startsWith("/>")?" ":"";o+=n===H?s+j:l>=0?(i.push(a),s.slice(0,l)+L+s.slice(l)+W+h):s+W+(-2===l?e:h)}return[nt(t,o+(t[s]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),i]})(t,e);if(this.el=at.createElement(d,s),rt.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(i=rt.nextNode())&&a.length<n;){if(1===i.nodeType){{const t=i.localName;if(/^(?:textarea|template)$/i.test(t)&&i.innerHTML.includes(W)){const e=`Expressions are not supported inside \`${t}\` elements. See https://lit.dev/msg/expression-in-${t} for more information.`;if("template"===t)throw new Error(e);C("",e)}}if(i.hasAttributes())for(const t of i.getAttributeNames())if(t.endsWith(L)){const e=l[o++],s=i.getAttribute(t).split(W),n=/([.?@])?(.*)/.exec(e);a.push({type:1,index:r,name:n[2],strings:s,ctor:"."===n[1]?pt:"?"===n[1]?ut:"@"===n[1]?gt:ht}),i.removeAttribute(t)}else t.startsWith(W)&&(a.push({type:6,index:r}),i.removeAttribute(t));if(K.test(i.tagName)){const t=i.textContent.split(W),e=t.length-1;if(e>0){i.textContent=z?z.emptyScript:"";for(let s=0;s<e;s++)i.append(t[s],D()),rt.nextNode(),a.push({type:2,index:++r});i.append(t[e],D())}}}else if(8===i.nodeType){if(i.data===R)a.push({type:2,index:r});else{let t=-1;for(;-1!==(t=i.data.indexOf(W,t+1));)a.push({type:7,index:r}),t+=W.length-1}}r++}if(l.length!==o)throw new Error('Detected duplicate attribute bindings. This occurs if your template has duplicate attributes on an element tag. For example "<input ?disabled=${true} ?disabled=${false}>" contains a duplicate "disabled" attribute. The error was detected in the following template: \n`'+t.join("${...}")+"`");k&&k({kind:"template prep",template:this,clonableTemplate:this.el,parts:this.parts,strings:t})}static createElement(t,e){const s=I.createElement("template");return s.innerHTML=t,s}}function dt(t,e,s=t,i){if(e===et)return e;let r=void 0!==i?s.__directives?.[i]:s.__directive;const o=q(e)?void 0:e._$litDirective$;return r?.constructor!==o&&(r?._$notifyDirectiveConnectionChanged?.(!1),void 0===o?r=void 0:(r=new o(t),r._$initialize(t,s,i)),void 0!==i?(s.__directives??=[])[i]=r:s.__directive=r),void 0!==r&&(e=dt(t,r._$resolve(t,e.values),r,i)),e}class lt{constructor(t,e){this._$parts=[],this._$disconnectableChildren=void 0,this._$template=t,this._$parent=e}get parentNode(){return this._$parent.parentNode}get _$isConnected(){return this._$parent._$isConnected}_clone(t){const{el:{content:e},parts:s}=this._$template,i=(t?.creationScope??I).importNode(e,!0);rt.currentNode=i;let r=rt.nextNode(),o=0,n=0,a=s[0];for(;void 0!==a;){if(o===a.index){let e;2===a.type?e=new ct(r,r.nextSibling,this,t):1===a.type?e=new a.ctor(r,a.name,a.strings,this,t):6===a.type&&(e=new mt(r,this,t)),this._$parts.push(e),a=s[++n]}o!==a?.index&&(r=rt.nextNode(),o++)}return rt.currentNode=I,i}_update(t){let e=0;for(const s of this._$parts)void 0!==s&&(k&&k({kind:"set part",part:s,value:t[e],valueIndex:e,values:t,templateInstance:this}),void 0!==s.strings?(s._$setValue(t,s,e),e+=s.strings.length-2):s._$setValue(t[e])),e++}}class ct{get _$isConnected(){return this._$parent?._$isConnected??this.__isConnected}constructor(t,e,s,i){this.type=2,this._$committedValue=st,this._$disconnectableChildren=void 0,this._$startNode=t,this._$endNode=e,this._$parent=s,this.options=i,this.__isConnected=i?.isConnected??!0,this._textSanitizer=void 0}get parentNode(){let t=T(this._$startNode).parentNode;const e=this._$parent;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$startNode}get endNode(){return this._$endNode}_$setValue(t,e=this){if(null===this.parentNode)throw new Error("This `ChildPart` has no `parentNode` and therefore cannot accept a value. This likely means the element containing the part was manipulated in an unsupported way outside of Lit's control such that the part's marker nodes were ejected from DOM. For example, setting the element's `innerHTML` or `textContent` can do this.");if(t=dt(this,t,e),q(t))t===st||null==t||""===t?(this._$committedValue!==st&&(k&&k({kind:"commit nothing to child",start:this._$startNode,end:this._$endNode,parent:this._$parent,options:this.options}),this._$clear()),this._$committedValue=st):t!==this._$committedValue&&t!==et&&this._commitText(t);else if(void 0!==t._$litType$)this._commitTemplateResult(t);else if(void 0!==t.nodeType){if(this.options?.host===t)return this._commitText("[probable mistake: rendered a template's host in itself (commonly caused by writing ${this} in a template]"),void console.warn("Attempted to render the template host",t,"inside itself. This is almost always a mistake, and in dev mode ","we render some warning text. In production however, we'll ","render it, which will usually result in an error, and sometimes ","in the element disappearing from the DOM.");this._commitNode(t)}else(t=>B(t)||"function"==typeof t?.[Symbol.iterator])(t)?this._commitIterable(t):this._commitText(t)}_insert(t){return T(T(this._$startNode).parentNode).insertBefore(t,this._$endNode)}_commitNode(t){if(this._$committedValue!==t){if(this._$clear(),ot!==O){const t=this._$startNode.parentNode?.nodeName;if("STYLE"===t||"SCRIPT"===t){let e="Forbidden";throw e="STYLE"===t?"Lit does not support binding inside style nodes. This is a security risk, as style injection attacks can exfiltrate data and spoof UIs. Consider instead using css`...` literals to compose styles, and do dynamic styling with css custom properties, ::parts, <slot>s, and by mutating the DOM rather than stylesheets.":"Lit does not support binding inside script nodes. This is a security risk, as it could allow arbitrary code execution.",new Error(e)}}k&&k({kind:"commit node",start:this._$startNode,parent:this._$parent,value:t,options:this.options}),this._$committedValue=this._insert(t)}}_commitText(t){if(this._$committedValue!==st&&q(this._$committedValue)){const e=T(this._$startNode).nextSibling;void 0===this._textSanitizer&&(this._textSanitizer=A(e,"data","property")),t=this._textSanitizer(t),k&&k({kind:"commit text",node:e,value:t,options:this.options}),e.data=t}else{const e=I.createTextNode("");this._commitNode(e),void 0===this._textSanitizer&&(this._textSanitizer=A(e,"data","property")),t=this._textSanitizer(t),k&&k({kind:"commit text",node:e,value:t,options:this.options}),e.data=t}this._$committedValue=t}_commitTemplateResult(t){const{values:e,_$litType$:s}=t,i="number"==typeof s?this._$getTemplate(t):(void 0===s.el&&(s.el=at.createElement(nt(s.h,s.h[0]),this.options)),s);if(this._$committedValue?._$template===i)k&&k({kind:"template updating",template:i,instance:this._$committedValue,parts:this._$committedValue._$parts,options:this.options,values:e}),this._$committedValue._update(e);else{const t=new lt(i,this),s=t._clone(this.options);k&&k({kind:"template instantiated",template:i,instance:t,parts:t._$parts,options:this.options,fragment:s,values:e}),t._update(e),k&&k({kind:"template instantiated and updated",template:i,instance:t,parts:t._$parts,options:this.options,fragment:s,values:e}),this._commitNode(s),this._$committedValue=t}}_$getTemplate(t){let e=it.get(t.strings);return void 0===e&&it.set(t.strings,e=new at(t)),e}_commitIterable(t){B(this._$committedValue)||(this._$committedValue=[],this._$clear());const e=this._$committedValue;let s,i=0;for(const r of t)i===e.length?e.push(s=new ct(this._insert(D()),this._insert(D()),this,this.options)):s=e[i],s._$setValue(r),i++;i<e.length&&(this._$clear(s&&T(s._$endNode).nextSibling,i),e.length=i)}_$clear(t=T(this._$startNode).nextSibling,e){for(this._$notifyConnectionChanged?.(!1,!0,e);t!==this._$endNode;){const e=T(t).nextSibling;T(t).remove(),t=e}}setConnected(t){if(void 0!==this._$parent)throw new Error("part.setConnected() may only be called on a RootPart returned from render().");this.__isConnected=t,this._$notifyConnectionChanged?.(t)}}class ht{get tagName(){return this.element.tagName}get _$isConnected(){return this._$parent._$isConnected}constructor(t,e,s,i,r){this.type=1,this._$committedValue=st,this._$disconnectableChildren=void 0,this.element=t,this.name=e,this._$parent=i,this.options=r,s.length>2||""!==s[0]||""!==s[1]?(this._$committedValue=new Array(s.length-1).fill(new String),this.strings=s):this._$committedValue=st,this._sanitizer=void 0}_$setValue(t,e=this,s,i){const r=this.strings;let o=!1;if(void 0===r)t=dt(this,t,e,0),o=!q(t)||t!==this._$committedValue&&t!==et,o&&(this._$committedValue=t);else{const i=t;let n,a;for(t=r[0],n=0;n<r.length-1;n++)a=dt(this,i[s+n],e,n),a===et&&(a=this._$committedValue[n]),o||=!q(a)||a!==this._$committedValue[n],a===st?t=st:t!==st&&(t+=(a??"")+r[n+1]),this._$committedValue[n]=a}o&&!i&&this._commitValue(t)}_commitValue(t){t===st?T(this.element).removeAttribute(this.name):(void 0===this._sanitizer&&(this._sanitizer=ot(this.element,this.name,"attribute")),t=this._sanitizer(t??""),k&&k({kind:"commit attribute",element:this.element,name:this.name,value:t,options:this.options}),T(this.element).setAttribute(this.name,t??""))}}class pt extends ht{constructor(){super(...arguments),this.type=3}_commitValue(t){void 0===this._sanitizer&&(this._sanitizer=ot(this.element,this.name,"property")),t=this._sanitizer(t),k&&k({kind:"commit property",element:this.element,name:this.name,value:t,options:this.options}),this.element[this.name]=t===st?void 0:t}}class ut extends ht{constructor(){super(...arguments),this.type=4}_commitValue(t){k&&k({kind:"commit boolean attribute",element:this.element,name:this.name,value:!(!t||t===st),options:this.options}),T(this.element).toggleAttribute(this.name,!!t&&t!==st)}}class gt extends ht{constructor(t,e,s,i,r){if(super(t,e,s,i,r),this.type=5,void 0!==this.strings)throw new Error(`A \`<${t.localName}>\` has a \`@${e}=...\` listener with invalid content. Event listeners in templates must have exactly one expression and no surrounding text.`)}_$setValue(t,e=this){if((t=dt(this,t,e,0)??st)===et)return;const s=this._$committedValue,i=t===st&&s!==st||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,r=t!==st&&(s===st||i);k&&k({kind:"commit event listener",element:this.element,name:this.name,value:t,options:this.options,removeListener:i,addListener:r,oldListener:s}),i&&this.element.removeEventListener(this.name,this,s),r&&this.element.addEventListener(this.name,this,t),this._$committedValue=t}handleEvent(t){"function"==typeof this._$committedValue?this._$committedValue.call(this.options?.host??this.element,t):this._$committedValue.handleEvent(t)}}class mt{constructor(t,e,s){this.element=t,this.type=6,this._$disconnectableChildren=void 0,this._$parent=e,this.options=s}get _$isConnected(){return this._$parent._$isConnected}_$setValue(t){k&&k({kind:"commit to element binding",element:this.element,value:t,options:this.options}),dt(this,t)}}const ft=P.litHtmlPolyfillSupportDevMode;ft?.(at,ct),(P.litHtmlVersions??=[]).push("3.3.2"),P.litHtmlVersions.length>1&&queueMicrotask(()=>{C("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")});const vt=(t,e,s)=>{if(null==e)throw new TypeError(`The container to render into may not be ${e}`);const i=E++,r=s?.renderBefore??e;let o=r._$litPart$;if(k&&k({kind:"begin render",id:i,value:t,container:e,options:s,part:o}),void 0===o){const t=s?.renderBefore??null;r._$litPart$=o=new ct(e.insertBefore(D(),t),t,void 0,s??{})}return o._$setValue(t),k&&k({kind:"end render",id:i,value:t,container:e,options:s,part:o}),o};vt.setSanitizer=U,vt.createSanitizer=A,vt._testOnlyClearSanitizerFactoryDoNotCallOrElse=V;
 /**
    * @license
    * Copyright 2017 Google LLC
@@ -22,7 +22,7 @@ const bt=globalThis;let _t;bt.litIssuedWarnings??=new Set,_t=(t,e)=>{e+=` See ht
    * Copyright 2017 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-let xt;$t?.({LitElement:yt}),(bt.litElementVersions??=[]).push("4.2.2"),bt.litElementVersions.length>1&&queueMicrotask(()=>{_t("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")}),globalThis.litIssuedWarnings??=new Set,xt=(t,e)=>{e+=` See https://lit.dev/msg/${t} for more information.`,globalThis.litIssuedWarnings.has(e)||globalThis.litIssuedWarnings.has(t)||(console.warn(e),globalThis.litIssuedWarnings.add(e))};const St={attribute:!0,type:String,converter:w,reflect:!1,hasChanged:$},Pt=(t=St,e,s)=>{const{kind:i,metadata:o}=s;null==o&&xt("missing-class-metadata",`The class ${e} is missing decorator metadata. This could mean that you're using a compiler that supports decorators but doesn't support decorator metadata, such as TypeScript 5.1. Please update your compiler.`);let r=globalThis.litPropertyMetadata.get(o);if(void 0===r&&globalThis.litPropertyMetadata.set(o,r=new Map),"setter"===i&&((t=Object.create(t)).wrapped=!0),r.set(s.name,t),"accessor"===i){const{name:i}=s;return{set(s){const o=e.get.call(this);e.set.call(this,s),this.requestUpdate(i,o,t,!0,s)},init(e){return void 0!==e&&this._$changeProperty(i,void 0,t,e),e}}}if("setter"===i){const{name:i}=s;return function(s){const o=this[i];e.call(this,s),this.requestUpdate(i,o,t,!0,s)}}throw new Error(`Unsupported decorator location: ${i}`)};function kt(t){return(e,s)=>"object"==typeof s?Pt(t,e,s):((t,e,s)=>{const i=e.hasOwnProperty(s);return e.constructor.createProperty(s,t),i?Object.getOwnPropertyDescriptor(e,s):void 0})(t,e,s)}
+let xt;$t?.({LitElement:yt}),(bt.litElementVersions??=[]).push("4.2.2"),bt.litElementVersions.length>1&&queueMicrotask(()=>{_t("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")}),globalThis.litIssuedWarnings??=new Set,xt=(t,e)=>{e+=` See https://lit.dev/msg/${t} for more information.`,globalThis.litIssuedWarnings.has(e)||globalThis.litIssuedWarnings.has(t)||(console.warn(e),globalThis.litIssuedWarnings.add(e))};const St={attribute:!0,type:String,converter:w,reflect:!1,hasChanged:$},Pt=(t=St,e,s)=>{const{kind:i,metadata:r}=s;null==r&&xt("missing-class-metadata",`The class ${e} is missing decorator metadata. This could mean that you're using a compiler that supports decorators but doesn't support decorator metadata, such as TypeScript 5.1. Please update your compiler.`);let o=globalThis.litPropertyMetadata.get(r);if(void 0===o&&globalThis.litPropertyMetadata.set(r,o=new Map),"setter"===i&&((t=Object.create(t)).wrapped=!0),o.set(s.name,t),"accessor"===i){const{name:i}=s;return{set(s){const r=e.get.call(this);e.set.call(this,s),this.requestUpdate(i,r,t,!0,s)},init(e){return void 0!==e&&this._$changeProperty(i,void 0,t,e),e}}}if("setter"===i){const{name:i}=s;return function(s){const r=this[i];e.call(this,s),this.requestUpdate(i,r,t,!0,s)}}throw new Error(`Unsupported decorator location: ${i}`)};function kt(t){return(e,s)=>"object"==typeof s?Pt(t,e,s):((t,e,s)=>{const i=e.hasOwnProperty(s);return e.constructor.createProperty(s,t),i?Object.getOwnPropertyDescriptor(e,s):void 0})(t,e,s)}
 /**
    * @license
    * Copyright 2017 Google LLC
@@ -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,o;const r=[],n=[];let a,d=0,l=!1;for(;d<s;){for(a=t[d];d<s&&void 0!==(o=e[d],i=Ut(o));)a+=i+t[++d],l=!0;d!==s&&n.push(o),r.push(a),d++}if(d===s&&r.push(t[s]),l){const s=r.join("$$lit$$");void 0===(t=At.get(s))&&(r.raw=r,At.set(s,t=r)),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);-webkit-font-smoothing:antialiased;color:var(--sgds-body-color-default);display:block;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:o,set:r}="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=o.call(this);return void 0===t&&(t=i(this),(null!==t||this.hasUpdated)&&r.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`
+   */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=(Wt=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 Wt(t,...e)});var Wt,Rt=n`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;color:var(--sgds-body-color-default);display:block;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=[Rt],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([stretchedLink]) .card:after{display:none}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:not(.disabled):focus-visible{--sgds-outline-offset-focus:-1px;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title,slot[name=title]::slotted(*){color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=subtitle]::slotted(*){color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-14)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-wide)!important;line-height:var(--sgds-line-height-20)!important;margin:var(--sgds-margin-none)!important;text-transform:uppercase}slot[name=title]::slotted(a){color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-24)!important;font-weight:var(--sgds-font-weight-semibold)!important;margin-bottom:var(--sgds-margin-none)!important;text-decoration:none!important}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=footer]::slotted(*),slot[name=link]::slotted(*){margin-top:auto;padding-top:var(--sgds-padding-sm);width:fit-content}slot[name=footer]::slotted(a),slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=footer]::slotted(a:focus),slot[name=footer]::slotted(a:hover),slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=footer]::slotted(a:focus-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`,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")}}_forwardAnchorAttributes(t){const e=new Set(["class","style","id"]);if((null==t?void 0:t.href)&&!t.href.startsWith("javascript:")&&!t.href.startsWith("data:")&&!t.href.startsWith("vbscript:"))for(const{name:s,value:i}of Array.from(t.attributes))e.has(s)||s.startsWith("on")||this.card.setAttribute(s,i)}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){const e=t.target.assignedElements({flatten:!0}),s=this._getAnchorFromSlot(e);this.stretchedLink&&this._forwardAnchorAttributes(s)}_handleLinkSlotChange(t){this.warnLinkSlotMisused(t);const e=t.target.assignedElements({flatten:!0}),s=this._getAnchorFromSlot(e);this.stretchedLink&&this._forwardAnchorAttributes(s)}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}