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

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

@@ -0,0 +1,42 @@
+import SgdsElement from "../../base/sgds-element";
+import SgdsIcon from "../Icon/sgds-icon";
+/**
+ * @summary A step within a stepper component
+ * @slot default - Additional content to display under the step header
+ *
+ */
+export declare class SgdsStep extends SgdsElement {
+    static styles: import("lit").CSSResult[];
+    /** @internal */
+    static dependencies: {
+        "sgds-icon": typeof SgdsIcon;
+    };
+    /** The header text for the step */
+    stepHeader: string;
+    /** Optional icon name to display instead of step number */
+    iconName: string | undefined;
+    /** Optional component to render for this step */
+    component: unknown;
+    /** @internal The index of this step within the stepper */
+    stepIndex: number;
+    /** @internal Whether this step is currently active */
+    active: boolean;
+    /** @internal Whether this step is currently disabled */
+    disabled: boolean;
+    /** @internal Whether this step is completed */
+    completed: boolean;
+    /** @internal Whether this step is clickable */
+    isClickable: boolean;
+    /** @internal Orientation of parent stepper (horizontal or vertical) */
+    orientation: "horizontal" | "vertical";
+    /** @internal Whether this step is the first sgds-step of its type in the slot */
+    isFirstOfType: boolean;
+    /** @internal Whether this step is completed */
+    _isCompleted: boolean;
+    render(): import("lit").TemplateResult<1>;
+    /**@internal */
+    _handleClick(): void;
+    /**@internal */
+    _handleKeyDown(event: KeyboardEvent): void;
+}
+export default SgdsStep;

package/components/Stepper/sgds-step.js

@@ -0,0 +1,117 @@
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { SgdsIcon } from '../Icon/sgds-icon.js';
+import css_248z from './step.js';
+
+/**
+ * @summary A step within a stepper component
+ * @slot default - Additional content to display under the step header
+ *
+ */
+class SgdsStep extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** The header text for the step */
+        this.stepHeader = "";
+        /** @internal The index of this step within the stepper */
+        this.stepIndex = 0;
+        /** @internal Whether this step is currently active */
+        this.active = false;
+        /** @internal Whether this step is currently disabled */
+        this.disabled = false;
+        /** @internal Whether this step is completed */
+        this.completed = false;
+        /** @internal Whether this step is clickable */
+        this.isClickable = false;
+        /** @internal Orientation of parent stepper (horizontal or vertical) */
+        this.orientation = "horizontal";
+        /** @internal Whether this step is the first sgds-step of its type in the slot */
+        this.isFirstOfType = false;
+        /** @internal Whether this step is completed */
+        this._isCompleted = false;
+    }
+    render() {
+        const isValidClickable = !this.disabled && this.isClickable;
+        return html `
+      <div class="stepper-item-container">
+        <div
+          class="stepper-item ${classMap({
+            first: this.isFirstOfType,
+            active: this.active,
+            completed: this._isCompleted,
+            clickable: this.isClickable,
+            vertical: this.orientation === "vertical",
+            disabled: this.disabled
+        })}"
+          tabindex=${isValidClickable ? "0" : "-1"}
+          aria-current=${this.active ? "step" : "false"}
+          aria-disabled=${this.disabled || (!this.active && !this._isCompleted) ? "true" : "false"}
+          @click="${isValidClickable ? () => this._handleClick() : null}"
+          @keydown=${isValidClickable ? (e) => this._handleKeyDown(e) : null}
+        >
+          <div class="stepper-marker">
+            ${this.iconName ? html `<sgds-icon name=${this.iconName} size="md"></sgds-icon>` : this.stepIndex + 1}
+          </div>
+
+          <div class="stepper-detail">
+            <div class="stepper-label">${this.stepHeader}</div>
+
+            <slot class="stepper-slot"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    /**@internal */
+    _handleClick() {
+        this.emit("i-sgds-click", { detail: { stepIndex: this.stepIndex } });
+    }
+    /**@internal */
+    _handleKeyDown(event) {
+        if (event.key === "Enter") {
+            this._handleClick();
+        }
+    }
+}
+SgdsStep.styles = [...SgdsElement.styles, css_248z];
+/** @internal */
+SgdsStep.dependencies = { "sgds-icon": SgdsIcon };
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsStep.prototype, "stepHeader", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsStep.prototype, "iconName", void 0);
+__decorate([
+    property({ type: Object })
+], SgdsStep.prototype, "component", void 0);
+__decorate([
+    property({ type: Number })
+], SgdsStep.prototype, "stepIndex", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsStep.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsStep.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsStep.prototype, "completed", void 0);
+__decorate([
+    property({ type: Boolean })
+], SgdsStep.prototype, "isClickable", void 0);
+__decorate([
+    property({ type: String })
+], SgdsStep.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Boolean })
+], SgdsStep.prototype, "isFirstOfType", void 0);
+__decorate([
+    property({ type: Boolean })
+], SgdsStep.prototype, "_isCompleted", void 0);
+
+export { SgdsStep, SgdsStep as default };
+//# sourceMappingURL=sgds-step.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-step.js","sources":["../../../src/components/Stepper/sgds-step.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 SgdsIcon from \"../Icon/sgds-icon\";\nimport stepStyle from \"./step.css\";\n\n/**\n * @summary A step within a stepper component\n * @slot default - Additional content to display under the step header\n *\n */\nexport class SgdsStep extends SgdsElement {\n  static styles = [...SgdsElement.styles, stepStyle];\n  /** @internal */\n  static dependencies = { \"sgds-icon\": SgdsIcon };\n\n  /** The header text for the step */\n  @property({ type: String, reflect: true })\n  stepHeader = \"\";\n\n  /** Optional icon name to display instead of step number */\n  @property({ type: String, reflect: true })\n  iconName: string | undefined;\n\n  /** Optional component to render for this step */\n  @property({ type: Object })\n  component: unknown;\n\n  /** @internal The index of this step within the stepper */\n  @property({ type: Number })\n  stepIndex = 0;\n\n  /** @internal Whether this step is currently active */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** @internal Whether this step is currently disabled */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** @internal Whether this step is completed */\n  @property({ type: Boolean, reflect: true })\n  completed = false;\n\n  /** @internal Whether this step is clickable */\n  @property({ type: Boolean })\n  isClickable = false;\n\n  /** @internal Orientation of parent stepper (horizontal or vertical) */\n  @property({ type: String })\n  orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n\n  /** @internal Whether this step is the first sgds-step of its type in the slot */\n  @property({ type: Boolean })\n  isFirstOfType = false;\n\n  /** @internal Whether this step is completed */\n  @property({ type: Boolean })\n  _isCompleted = false;\n\n  render() {\n    const isValidClickable = !this.disabled && this.isClickable;\n\n    return html`\n      <div class=\"stepper-item-container\">\n        <div\n          class=\"stepper-item ${classMap({\n            first: this.isFirstOfType,\n            active: this.active,\n            completed: this._isCompleted,\n            clickable: this.isClickable,\n            vertical: this.orientation === \"vertical\",\n            disabled: this.disabled\n          })}\"\n          tabindex=${isValidClickable ? \"0\" : \"-1\"}\n          aria-current=${this.active ? \"step\" : \"false\"}\n          aria-disabled=${this.disabled || (!this.active && !this._isCompleted) ? \"true\" : \"false\"}\n          @click=\"${isValidClickable ? () => this._handleClick() : null}\"\n          @keydown=${isValidClickable ? (e: KeyboardEvent) => this._handleKeyDown(e) : null}\n        >\n          <div class=\"stepper-marker\">\n            ${this.iconName ? html`<sgds-icon name=${this.iconName} size=\"md\"></sgds-icon>` : this.stepIndex + 1}\n          </div>\n\n          <div class=\"stepper-detail\">\n            <div class=\"stepper-label\">${this.stepHeader}</div>\n\n            <slot class=\"stepper-slot\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  /**@internal */\n  _handleClick() {\n    this.emit(\"i-sgds-click\", { detail: { stepIndex: this.stepIndex } });\n  }\n\n  /**@internal */\n  _handleKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\") {\n      this._handleClick();\n    }\n  }\n}\n\nexport default SgdsStep;\n"],"names":["stepStyle"],"mappings":"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"}

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

@@ -11,6 +11,7 @@ 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 {
@@ -19,8 +20,8 @@ export declare class SgdsStepper extends SgdsElement {
     static dependencies: {
         "sgds-icon": typeof SgdsIcon;
     };
-    /** 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.
+    /** The metadata of stepper, type `IStepMetaData`. Deprecated: use sgds-step child components instead.
+     * @deprecated Use sgds-step child components instead of the steps property
      */
     steps: IStepMetaData[];
     /** The current state of active step. Defaults to 0 */
@@ -29,8 +30,22 @@ 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 */
@@ -48,7 +63,13 @@ 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 } from 'lit/decorators.js';
+import { property, queryAssignedElements } 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,13 +17,14 @@ 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`, 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.
+        /** The metadata of stepper, type `IStepMetaData`. Deprecated: use sgds-step child components instead.
+         * @deprecated Use sgds-step child components instead of the steps property
          */
         this.steps = [];
         /** The current state of active step. Defaults to 0 */
@@ -32,32 +33,77 @@ 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) {
-        return this.steps[step].component;
+        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;
     }
     /** Moves the active step forward one step */
     nextStep() {
+        var _a;
         this.emit("sgds-next-step");
-        if (this.activeStep < this.steps.length - 1) {
-            this.activeStep++;
+        if (this.activeStep < this._totalSteps - 1) {
+            if (!((_a = this._slotNodes[this.activeStep + 1]) === null || _a === void 0 ? void 0 : _a.disabled)) {
+                this.activeStep++;
+            }
         }
     }
     /** Moves the active step back one step */
     previousStep() {
+        var _a;
         this.emit("sgds-previous-step");
         if (this.activeStep > 0) {
-            this.activeStep--;
+            if (!((_a = this._slotNodes[this.activeStep - 1]) === null || _a === void 0 ? void 0 : _a.disabled)) {
+                this.activeStep--;
+            }
         }
     }
     /** Changes the active step to the last step */
     lastStep() {
         this.emit("sgds-last-step");
-        if (this.activeStep !== this.steps.length - 1) {
-            this.activeStep = this.steps.length - 1;
+        if (this.activeStep !== this._totalSteps - 1) {
+            this.activeStep = this._totalSteps - 1;
         }
     }
     /** Changes active step to the first step */
@@ -74,21 +120,35 @@ class SgdsStepper extends SgdsElement {
     }
     /**@internal */
     _onStepperItemClick(index) {
-        //emit an event before moving to next step
-        if (this.activeStep > index) {
-            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
@@ -97,6 +157,8 @@ 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">
@@ -139,12 +201,24 @@ __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 } 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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"}
+{"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      if (!this._slotNodes[this.activeStep + 1]?.disabled) {\n        this.activeStep++;\n      }\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      if (!this._slotNodes[this.activeStep - 1]?.disabled) {\n        this.activeStep--;\n      }\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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"}

package/components/Stepper/step.js

@@ -0,0 +1,6 @@
+import { css } from 'lit';
+
+var css_248z = css`:host{display:contents}.stepper-item-container{flex-basis:1em;flex-grow:1;flex-shrink:1;position:relative;width:fit-content}.stepper-item,.stepper-item-container{align-items:center;display:flex;flex-direction:column}.stepper-item{gap:var(--sgds-gap-sm)}.stepper-item.vertical{align-items:flex-start;flex-direction:row;margin-bottom:var(--sgds-padding-xl)}.stepper-item.clickable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.stepper-item:not(.first):not(.vertical):before{background:var(--sgds-border-color-translucent);content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}:host(:not(.last)) .stepper-item-container .stepper-item.vertical:after{background:var(--sgds-bg-translucent);content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper-item-container .stepper-item.active:not(.first):before,.stepper-item-container .stepper-item.completed:not(.first):before,:host(:not(.last)) .stepper-item-container .stepper-item.completed:after{background:var(--sgds-primary-border-color-default)}.stepper-item.clickable{cursor:pointer}.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-detail{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs);max-width:var(--sgds-dimension-128);text-align:center}.stepper-item.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper-item:not(.active):not(.completed) .stepper-label{color:var(--sgds-color-subtle)}.stepper-item.clickable:focus .stepper-marker,.stepper-item.clickable:focus-visible .stepper-marker,.stepper-item.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-item.clickable:focus .stepper-label,.stepper-item.clickable:focus-visible .stepper-label,.stepper-item.clickable:hover .stepper-label{color:var(--sgds-primary-color-emphasis)}.stepper-item.clickable .stepper-label{color:var(--sgds-primary-color-default)}.stepper-item.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)}.stepper-item.active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper-slot{color:var(--sgds-color-subtle);display:flex;flex-direction:column;font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);gap:var(--sgds-gap-xs);letter-spacing:var(--sgds-letter-spacing-normal);line-height:var(--sgds-line-height-2-xs)}.stepper-item.disabled{opacity:var(--sgds-opacity-40)}`;
+
+export { css_248z as default };
+//# sourceMappingURL=step.js.map

package/components/Stepper/step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

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-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)}`;
+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)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=stepper.js.map

package/components/Stepper/types.d.ts

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

package/components/index.umd.min.js

@@ -3864,10 +3864,12 @@ const Ul="important",ql=" !"+Ul;const Yl=je(class extends We{constructor(e){if(s
                 style=${this.borderRadius?`border-radius: ${this.borderRadius}`:ae}
               ></div>`}):ae}
       </div>
-    `}}kd.styles=[xd],t([Be(".skeleton")],kd.prototype,"skeleton",void 0),t([De({type:String,reflect:!0})],kd.prototype,"width",void 0),t([De({type:String,reflect:!0})],kd.prototype,"height",void 0),t([De({type:String,reflect:!0})],kd.prototype,"borderRadius",void 0),t([De({type:Number,reflect:!0})],kd.prototype,"rows",void 0),t([De({type:Boolean,reflect:!0})],kd.prototype,"sheen",void 0);var _d=r`.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)}`;class Cd extends He{constructor(){super(...arguments),this.steps=[],this.activeStep=0,this.orientation="horizontal",this.clickable=!1,this.defaultActiveStep=0}getComponent(e=this.activeStep){return this.steps[e].component}nextStep(){this.emit("sgds-next-step"),this.activeStep<this.steps.length-1&&this.activeStep++}previousStep(){this.emit("sgds-previous-step"),this.activeStep>0&&this.activeStep--}lastStep(){this.emit("sgds-last-step"),this.activeStep!==this.steps.length-1&&(this.activeStep=this.steps.length-1)}firstStep(){this.emit("sgds-first-step"),this.activeStep>0&&(this.activeStep=0)}reset(){this.emit("sgds-reset"),this.activeStep=this.defaultActiveStep}_onStepperItemClick(e){this.activeStep>e&&(this.activeStep=e)}_handleActiveStepChange(){this.emit("sgds-arrived")}_handleKeyDown(e,t){"Enter"===e.key&&this._onStepperItemClick(t)}render(){return te`
+    `}}kd.styles=[xd],t([Be(".skeleton")],kd.prototype,"skeleton",void 0),t([De({type:String,reflect:!0})],kd.prototype,"width",void 0),t([De({type:String,reflect:!0})],kd.prototype,"height",void 0),t([De({type:String,reflect:!0})],kd.prototype,"borderRadius",void 0),t([De({type:Number,reflect:!0})],kd.prototype,"rows",void 0),t([De({type:Boolean,reflect:!0})],kd.prototype,"sheen",void 0);var _d=r`.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)}`;class Cd extends He{constructor(){super(...arguments),this.steps=[],this.activeStep=0,this.orientation="horizontal",this.clickable=!1,this.linear=!1,this.defaultActiveStep=0,this._totalSteps=0,this._boundHandleItemClick=this._handleStepClick.bind(this)}connectedCallback(){super.connectedCallback(),this._totalSteps=this.steps.length,this.addEventListener("i-sgds-click",this._boundHandleItemClick)}_handleSlotChange(){this._items=this._slotNodes,this._totalSteps=this._items.length,this._updateStepItems()}_updateStepItems(){this._items&&this._items.length>0&&this._items.forEach((e,t)=>{e.stepIndex=t,e.active=this.activeStep===t,e._isCompleted=e.completed||this.activeStep>t,e.isClickable=this.linear?!e.disabled&&this.clickable&&(this.activeStep-1==t||this.activeStep+1==t):!e.disabled&&this.clickable,e.orientation=this.orientation,this._items.length>1&&(e.isFirstOfType=0===t,e.classList.toggle("last",t===this._items.length-1))})}getComponent(e=this.activeStep){var t,s;const i=this._slotNodes.length>1?this._items:this.steps;return i&&i.length>0?null===(t=i[e])||void 0===t?void 0:t.component:null===(s=this.steps[e])||void 0===s?void 0:s.component}nextStep(){var e;this.emit("sgds-next-step"),this.activeStep<this._totalSteps-1&&((null===(e=this._slotNodes[this.activeStep+1])||void 0===e?void 0:e.disabled)||this.activeStep++)}previousStep(){var e;this.emit("sgds-previous-step"),this.activeStep>0&&((null===(e=this._slotNodes[this.activeStep-1])||void 0===e?void 0:e.disabled)||this.activeStep--)}lastStep(){this.emit("sgds-last-step"),this.activeStep!==this._totalSteps-1&&(this.activeStep=this._totalSteps-1)}firstStep(){this.emit("sgds-first-step"),this.activeStep>0&&(this.activeStep=0)}reset(){this.emit("sgds-reset"),this.activeStep=this.defaultActiveStep}_onStepperItemClick(e){this.activeStep=e}_handleActiveStepChange(){this._updateStepItems(),this.emit("sgds-arrived")}_handleClickableChange(){this._updateStepItems()}_handleOrientationChange(){this._updateStepItems()}_handleKeyDown(e,t){"Enter"===e.key&&this._onStepperItemClick(t)}_handleStepClick(e){var t;const s=e;e.stopPropagation();const i=null===(t=s.detail)||void 0===t?void 0:t.stepIndex;this._onStepperItemClick(i)}render(){return te`
       <div
         class="stepper ${Ke({[`${this.orientation}`]:this.orientation,clickable:this.clickable})}"
       >
+        <slot @slotchange=${this._handleSlotChange}></slot>
+
         ${this.steps.map(({stepHeader:e,iconName:t},s)=>te`
             <div class="stepper-item-container">
               <div
@@ -3886,7 +3888,7 @@ const Ul="important",ql=" !"+Ul;const Yl=je(class extends We{constructor(e){if(s
             </div>
           `)}
       </div>
-    `}}Cd.styles=[...He.styles,_d],Cd.dependencies={"sgds-icon":Bt},t([De({type:Array})],Cd.prototype,"steps",void 0),t([De({type:Number,reflect:!0})],Cd.prototype,"activeStep",void 0),t([De({type:String,reflect:!0})],Cd.prototype,"orientation",void 0),t([De({type:Boolean,reflect:!0})],Cd.prototype,"clickable",void 0),t([_a("activeStep")],Cd.prototype,"defaultActiveStep",void 0),t([ot("activeStep",{waitUntilFirstUpdate:!0})],Cd.prototype,"_handleActiveStepChange",null);var Sd=r`:host{display:block;position:relative;z-index:var(--sgds-z-index-sticky)}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:relative;width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}.no-actions{display:none}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`,Md=r`.sgds-container{max-width:calc(100% - 40px)}.sgds-container,.sgds-container-sidebar{margin-left:auto;margin-right:auto;width:100%}.sgds-grid{display:grid;gap:var(--sgds-gap-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 56px)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-grid{gap:var(--sgds-gap-xl)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container-sidebar{max-width:var(--sgds-dimension-840)}.sgds-container{max-width:var(--sgds-dimension-888)}.sgds-col-lg-1{grid-column:span 1}.sgds-col-lg-2{grid-column:span 2}.sgds-col-lg-3{grid-column:span 3}.sgds-col-lg-4{grid-column:span 4}.sgds-col-lg-5{grid-column:span 5}.sgds-col-lg-6{grid-column:span 6}.sgds-col-lg-7{grid-column:span 7}.sgds-col-lg-8{grid-column:span 8}.sgds-col-lg-9{grid-column:span 9}.sgds-col-lg-10{grid-column:span 10}.sgds-col-lg-11{grid-column:span 11}.sgds-col-lg-12{grid-column:span 12}.sgds-col-lg-center-2{grid-column:6/span 2}.sgds-col-lg-center-4{grid-column:5/span 4}.sgds-col-lg-center-6{grid-column:4/span 6}.sgds-col-lg-center-8{grid-column:3/span 8}.sgds-col-lg-center-10{grid-column:2/span 10}.sgds-col-md-none{display:revert}.sgds-col-lg-none{display:none}}@media (min-width:1280px){.sgds-grid{gap:var(--sgds-gap-2-xl)}.sgds-container{max-width:var(--sgds-dimension-1168)}.sgds-container-sidebar{max-width:var(--sgds-dimension-888)}.sgds-col-xl-1{grid-column:span 1}.sgds-col-xl-2{grid-column:span 2}.sgds-col-xl-3{grid-column:span 3}.sgds-col-xl-4{grid-column:span 4}.sgds-col-xl-5{grid-column:span 5}.sgds-col-xl-6{grid-column:span 6}.sgds-col-xl-7{grid-column:span 7}.sgds-col-xl-8{grid-column:span 8}.sgds-col-xl-9{grid-column:span 9}.sgds-col-xl-10{grid-column:span 10}.sgds-col-xl-11{grid-column:span 11}.sgds-col-xl-12{grid-column:span 12}.sgds-col-xl-center-2{grid-column:6/span 2}.sgds-col-xl-center-4{grid-column:5/span 4}.sgds-col-xl-center-6{grid-column:4/span 6}.sgds-col-xl-center-8{grid-column:3/span 8}.sgds-col-xl-center-10{grid-column:2/span 10}.sgds-col-lg-none{display:revert}.sgds-col-xl-none{display:none}}@media (min-width:1440px){.sgds-container{max-width:var(--sgds-dimension-1312)}.sgds-container-sidebar{max-width:var(--sgds-dimension-1024)}.sgds-col-2-xl-1{grid-column:span 1}.sgds-col-2-xl-2{grid-column:span 2}.sgds-col-2-xl-3{grid-column:span 3}.sgds-col-2-xl-4{grid-column:span 4}.sgds-col-2-xl-5{grid-column:span 5}.sgds-col-2-xl-6{grid-column:span 6}.sgds-col-2-xl-7{grid-column:span 7}.sgds-col-2-xl-8{grid-column:span 8}.sgds-col-2-xl-9{grid-column:span 9}.sgds-col-2-xl-10{grid-column:span 10}.sgds-col-2-xl-11{grid-column:span 11}.sgds-col-2-xl-12{grid-column:span 12}.sgds-col-2-xl-center-2{grid-column:6/span 2}.sgds-col-2-xl-center-4{grid-column:5/span 4}.sgds-col-2-xl-center-6{grid-column:4/span 6}.sgds-col-2-xl-center-8{grid-column:3/span 8}.sgds-col-2-xl-center-10{grid-column:2/span 10}.sgds-col-xl-none{display:revert}.sgds-col-2-xl-none{display:none}}`;const $d=["Enter"," "];class Ad extends He{constructor(){super(...arguments),this.hasActionsSlot=!1,this.isCollapsed=!1,this.isMenuOpen=!1,this.hasSlotController=new Hi(this,"actions"),this._handleResize=async()=>{this.isCollapsed=window.innerWidth<_l,await this.updateComplete,this.isCollapsed||(this.isMenuOpen=!1),this._updateMobileLayout()},this._updateMobileLayout=()=>{if(this.nav&&this.headerContainer&&this.mobileActions&&this.mobileNav)if(this.isCollapsed){const{top:e}=this.nav.getBoundingClientRect(),t=this.headerContainer.clientHeight,s=this.mobileActions.clientHeight,i=window.innerWidth>=768&&window.innerWidth<_l?e+t:e+t+s;this.mobileNav.style.maxHeight=`calc(100dvh - ${i}px)`,this.style.minHeight=`${this.nav.clientHeight}px`,this.nav.style.position="absolute"}else this.mobileNav.style.maxHeight="none",this.style.minHeight="auto",this.nav.style.position="relative"},this._toggleMenu=()=>{var e;this.isMenuOpen?this.hide():(this._lockBodyScroll(),this.show()),null===(e=this.toggler)||void 0===e||e.focus()}}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._handleResize),window.addEventListener("click",e=>this._handleClickOutOfElement(e,this.navGroup))}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._handleResize),window.removeEventListener("click",e=>this._handleClickOutOfElement(e,this.navGroup))}firstUpdated(e){super.firstUpdated(e),this._handleResize()}updated(){this.hasActionsSlot||(this.hasActionsSlot=this.hasSlotController.test("actions"))}_handleClickOutOfElement(e,t){e.composedPath().includes(t)||e.composedPath().includes(this.toggler)||this.hide()}async _onKeyboardToggle(e){$d.includes(e.key)&&(e.preventDefault(),this._toggleMenu())}async show(){if(!this.isMenuOpen)return this.isMenuOpen=!0,at(this,"sgds-after-show")}async hide(){if(this.isMenuOpen)return this.isMenuOpen=!1,this._unlockBodyScroll(),at(this,"sgds-after-hide")}_lockBodyScroll(){if("undefined"==typeof window)return;const e=window.scrollY;document.body.style.position="fixed",document.body.style.top=`-${e}px`,document.body.style.width="100%"}_unlockBodyScroll(){if("undefined"==typeof window)return;const e=-1*parseInt(document.body.style.top||"0");document.body.style.position="",document.body.style.top="",document.body.style.width="",window.scrollTo(0,e)}async _animateToShow(){if(this.emit("sgds-show",{cancelable:!0}).defaultPrevented)return void(this.isMenuOpen=!1);await Je(this.mobileNav),this.isCollapsed&&(this.mobileNav.style.display="flex");const{keyframes:e,options:t}=st(this,"subnav.show");await Ge(this.mobileNav,Qe(e,this.mobileNav.scrollHeight),t),this.emit("sgds-after-show")}async _animateToHide(){if(this.emit("sgds-hide",{cancelable:!0}).defaultPrevented)return void(this.isMenuOpen=!0);await Je(this.mobileNav);const{keyframes:e,options:t}=st(this,"subnav.hide");await Ge(this.mobileNav,Qe(e,this.mobileNav.scrollHeight),t),this.isCollapsed&&(this.mobileNav.style.display="none"),this.emit("sgds-after-hide")}async handleOpenChange(){this.isMenuOpen?this._animateToShow():this._animateToHide()}async handleCollapsedChange(){await this.updateComplete,this.mobileNav.style.display=this.isCollapsed?"none":"flex"}render(){return te`
+    `}}Cd.styles=[...He.styles,_d],Cd.dependencies={"sgds-icon":Bt},t([De({type:Array})],Cd.prototype,"steps",void 0),t([De({type:Number,reflect:!0})],Cd.prototype,"activeStep",void 0),t([De({type:String,reflect:!0})],Cd.prototype,"orientation",void 0),t([De({type:Boolean,reflect:!0})],Cd.prototype,"clickable",void 0),t([De({type:Boolean,reflect:!0})],Cd.prototype,"linear",void 0),t([_a("activeStep")],Cd.prototype,"defaultActiveStep",void 0),t([Te()],Cd.prototype,"_slotNodes",void 0),t([ot("activeStep",{waitUntilFirstUpdate:!0})],Cd.prototype,"_handleActiveStepChange",null),t([ot("clickable",{waitUntilFirstUpdate:!0})],Cd.prototype,"_handleClickableChange",null),t([ot("orientation",{waitUntilFirstUpdate:!0})],Cd.prototype,"_handleOrientationChange",null);var Sd=r`:host{display:block;position:relative;z-index:var(--sgds-z-index-sticky)}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:relative;width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}.no-actions{display:none}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`,Md=r`.sgds-container{max-width:calc(100% - 40px)}.sgds-container,.sgds-container-sidebar{margin-left:auto;margin-right:auto;width:100%}.sgds-grid{display:grid;gap:var(--sgds-gap-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 56px)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-grid{gap:var(--sgds-gap-xl)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container-sidebar{max-width:var(--sgds-dimension-840)}.sgds-container{max-width:var(--sgds-dimension-888)}.sgds-col-lg-1{grid-column:span 1}.sgds-col-lg-2{grid-column:span 2}.sgds-col-lg-3{grid-column:span 3}.sgds-col-lg-4{grid-column:span 4}.sgds-col-lg-5{grid-column:span 5}.sgds-col-lg-6{grid-column:span 6}.sgds-col-lg-7{grid-column:span 7}.sgds-col-lg-8{grid-column:span 8}.sgds-col-lg-9{grid-column:span 9}.sgds-col-lg-10{grid-column:span 10}.sgds-col-lg-11{grid-column:span 11}.sgds-col-lg-12{grid-column:span 12}.sgds-col-lg-center-2{grid-column:6/span 2}.sgds-col-lg-center-4{grid-column:5/span 4}.sgds-col-lg-center-6{grid-column:4/span 6}.sgds-col-lg-center-8{grid-column:3/span 8}.sgds-col-lg-center-10{grid-column:2/span 10}.sgds-col-md-none{display:revert}.sgds-col-lg-none{display:none}}@media (min-width:1280px){.sgds-grid{gap:var(--sgds-gap-2-xl)}.sgds-container{max-width:var(--sgds-dimension-1168)}.sgds-container-sidebar{max-width:var(--sgds-dimension-888)}.sgds-col-xl-1{grid-column:span 1}.sgds-col-xl-2{grid-column:span 2}.sgds-col-xl-3{grid-column:span 3}.sgds-col-xl-4{grid-column:span 4}.sgds-col-xl-5{grid-column:span 5}.sgds-col-xl-6{grid-column:span 6}.sgds-col-xl-7{grid-column:span 7}.sgds-col-xl-8{grid-column:span 8}.sgds-col-xl-9{grid-column:span 9}.sgds-col-xl-10{grid-column:span 10}.sgds-col-xl-11{grid-column:span 11}.sgds-col-xl-12{grid-column:span 12}.sgds-col-xl-center-2{grid-column:6/span 2}.sgds-col-xl-center-4{grid-column:5/span 4}.sgds-col-xl-center-6{grid-column:4/span 6}.sgds-col-xl-center-8{grid-column:3/span 8}.sgds-col-xl-center-10{grid-column:2/span 10}.sgds-col-lg-none{display:revert}.sgds-col-xl-none{display:none}}@media (min-width:1440px){.sgds-container{max-width:var(--sgds-dimension-1312)}.sgds-container-sidebar{max-width:var(--sgds-dimension-1024)}.sgds-col-2-xl-1{grid-column:span 1}.sgds-col-2-xl-2{grid-column:span 2}.sgds-col-2-xl-3{grid-column:span 3}.sgds-col-2-xl-4{grid-column:span 4}.sgds-col-2-xl-5{grid-column:span 5}.sgds-col-2-xl-6{grid-column:span 6}.sgds-col-2-xl-7{grid-column:span 7}.sgds-col-2-xl-8{grid-column:span 8}.sgds-col-2-xl-9{grid-column:span 9}.sgds-col-2-xl-10{grid-column:span 10}.sgds-col-2-xl-11{grid-column:span 11}.sgds-col-2-xl-12{grid-column:span 12}.sgds-col-2-xl-center-2{grid-column:6/span 2}.sgds-col-2-xl-center-4{grid-column:5/span 4}.sgds-col-2-xl-center-6{grid-column:4/span 6}.sgds-col-2-xl-center-8{grid-column:3/span 8}.sgds-col-2-xl-center-10{grid-column:2/span 10}.sgds-col-xl-none{display:revert}.sgds-col-2-xl-none{display:none}}`;const $d=["Enter"," "];class Ad extends He{constructor(){super(...arguments),this.hasActionsSlot=!1,this.isCollapsed=!1,this.isMenuOpen=!1,this.hasSlotController=new Hi(this,"actions"),this._handleResize=async()=>{this.isCollapsed=window.innerWidth<_l,await this.updateComplete,this.isCollapsed||(this.isMenuOpen=!1),this._updateMobileLayout()},this._updateMobileLayout=()=>{if(this.nav&&this.headerContainer&&this.mobileActions&&this.mobileNav)if(this.isCollapsed){const{top:e}=this.nav.getBoundingClientRect(),t=this.headerContainer.clientHeight,s=this.mobileActions.clientHeight,i=window.innerWidth>=768&&window.innerWidth<_l?e+t:e+t+s;this.mobileNav.style.maxHeight=`calc(100dvh - ${i}px)`,this.style.minHeight=`${this.nav.clientHeight}px`,this.nav.style.position="absolute"}else this.mobileNav.style.maxHeight="none",this.style.minHeight="auto",this.nav.style.position="relative"},this._toggleMenu=()=>{var e;this.isMenuOpen?this.hide():(this._lockBodyScroll(),this.show()),null===(e=this.toggler)||void 0===e||e.focus()}}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._handleResize),window.addEventListener("click",e=>this._handleClickOutOfElement(e,this.navGroup))}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._handleResize),window.removeEventListener("click",e=>this._handleClickOutOfElement(e,this.navGroup))}firstUpdated(e){super.firstUpdated(e),this._handleResize()}updated(){this.hasActionsSlot||(this.hasActionsSlot=this.hasSlotController.test("actions"))}_handleClickOutOfElement(e,t){e.composedPath().includes(t)||e.composedPath().includes(this.toggler)||this.hide()}async _onKeyboardToggle(e){$d.includes(e.key)&&(e.preventDefault(),this._toggleMenu())}async show(){if(!this.isMenuOpen)return this.isMenuOpen=!0,at(this,"sgds-after-show")}async hide(){if(this.isMenuOpen)return this.isMenuOpen=!1,this._unlockBodyScroll(),at(this,"sgds-after-hide")}_lockBodyScroll(){if("undefined"==typeof window)return;const e=window.scrollY;document.body.style.position="fixed",document.body.style.top=`-${e}px`,document.body.style.width="100%"}_unlockBodyScroll(){if("undefined"==typeof window)return;const e=-1*parseInt(document.body.style.top||"0");document.body.style.position="",document.body.style.top="",document.body.style.width="",window.scrollTo(0,e)}async _animateToShow(){if(this.emit("sgds-show",{cancelable:!0}).defaultPrevented)return void(this.isMenuOpen=!1);await Je(this.mobileNav),this.isCollapsed&&(this.mobileNav.style.display="flex");const{keyframes:e,options:t}=st(this,"subnav.show");await Ge(this.mobileNav,Qe(e,this.mobileNav.scrollHeight),t),this.emit("sgds-after-show")}async _animateToHide(){if(this.emit("sgds-hide",{cancelable:!0}).defaultPrevented)return void(this.isMenuOpen=!0);await Je(this.mobileNav);const{keyframes:e,options:t}=st(this,"subnav.hide");await Ge(this.mobileNav,Qe(e,this.mobileNav.scrollHeight),t),this.isCollapsed&&(this.mobileNav.style.display="none"),this.emit("sgds-after-hide")}async handleOpenChange(){this.isMenuOpen?this._animateToShow():this._animateToHide()}async handleCollapsedChange(){await this.updateComplete,this.mobileNav.style.display=this.isCollapsed?"none":"flex"}render(){return te`
       <nav aria-label="Sub navigation">
         <div
           class=${Ke({"sgds-container":!0,subnav:!0,collapsed:!this.isMenuOpen})}