@politiet/sheriff-web-components 2.4.3 → 2.5.0

package/dist/sds-stepper/sds-stepper.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+export interface SDSStepperProps {
+    orientation?: 'horizontal' | 'vertical';
+}
+declare const SDSStepper_base: (new (...args: any[]) => import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface) & typeof LitElement;
+export declare class SDSStepper extends SDSStepper_base {
+    static styles: import("lit").CSSResult[];
+    readonly internals: ElementInternals;
+    orientation: SDSStepperProps['orientation'];
+    private readonly steps;
+    constructor();
+    private readonly _setActiveStep;
+    private readonly _handleChildClick;
+    getActiveStep(): number;
+    role: string;
+    connectedCallback(): void;
+    goToStep(index: number): void;
+    private _applyStepNumbers;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-stepper': SDSStepper;
+    }
+    interface SDSStepperEventMap {
+        change: CustomEvent<{
+            index: number;
+        }>;
+    }
+}
+export {};
+//# sourceMappingURL=sds-stepper.d.ts.map

package/dist/sds-stepper/sds-stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-stepper.d.ts","sourceRoot":"","sources":["../../src/sds-stepper/sds-stepper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,MAAM,WAAW,eAAe;IAC/B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACxC;;AAED,qBACa,UAAW,SAAQ,eAAmC;IAClE,OAAgB,MAAM,4BAAY;IAClC,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAED,WAAW,EAAE,eAAe,CAAC,aAAa,CAAC,CAAgB;IAGtG,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAoB;;IAO1C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAI7B;IAEF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAahC;IAEK,aAAa,IAAI,MAAM;IAId,IAAI,SAAa;IAExB,iBAAiB;IAOnB,QAAQ,CAAC,KAAK,EAAE,MAAM;IAO7B,OAAO,CAAC,iBAAiB;IAMhB,YAAY;IAYZ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;IAED,UAAU,kBAAkB;QAC3B,MAAM,EAAE,WAAW,CAAC;YAAE,KAAK,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KACvC;CACD"}

package/dist/sds-stepper/sds-stepper.js

@@ -0,0 +1,81 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { guardedCustomElement } from '../utils/guarded-custom-element';
+import { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';
+import { SDSStepperStep } from '../sds-stepper-step/sds-stepper-step';
+import { styles } from './sds-stepper.styles';
+let SDSStepper = class SDSStepper extends SDSEventDispatcherMixin(LitElement) {
+    constructor() {
+        super();
+        this.orientation = 'horizontal';
+        this._setActiveStep = (steps, activeIndex) => {
+            steps.forEach((step, index) => {
+                step.active = index === activeIndex;
+            });
+        };
+        this._handleChildClick = (event) => {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            const step = event.composedPath().find((n) => n instanceof SDSStepperStep);
+            if (!step)
+                return;
+            const index = this.steps.indexOf(step);
+            if (index === -1)
+                return;
+            this._setActiveStep(this.steps, index);
+            this.dispatchSheriffEvent('change', { index });
+        };
+        this.role = 'tablist';
+        this.internals = this.attachInternals();
+    }
+    getActiveStep() {
+        return this.steps.findIndex((step) => step.active);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('aria-label')) {
+            this.ariaLabel = 'Steg';
+        }
+    }
+    goToStep(index) {
+        if (index < 0 || index >= this.steps.length)
+            return;
+        this._setActiveStep(this.steps, index);
+        this.dispatchSheriffEvent('change', { index });
+    }
+    _applyStepNumbers() {
+        this.steps.forEach((step, i) => {
+            step.style.setProperty('--sds-stepper-step-counter-content', `"${i + 1}"`);
+        });
+    }
+    firstUpdated() {
+        const userAgent = navigator.userAgent;
+        const isSafari = /safari/i.test(userAgent) && !/chrome/i.test(userAgent) && !/crios/i.test(userAgent) && !/edgios/i.test(userAgent) && !/fxios/i.test(userAgent);
+        if (isSafari) {
+            const slot = this.shadowRoot.querySelector('slot');
+            slot.addEventListener('slotchange', () => this._applyStepNumbers());
+            this._applyStepNumbers();
+        }
+    }
+    render() {
+        return html `<slot @_sds-step-clicked="${this._handleChildClick}"></slot>`;
+    }
+};
+SDSStepper.styles = [styles];
+__decorate([
+    property({ type: String, reflect: true })
+], SDSStepper.prototype, "orientation", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'sds-stepper-step', flatten: true })
+], SDSStepper.prototype, "steps", void 0);
+SDSStepper = __decorate([
+    guardedCustomElement('sds-stepper')
+], SDSStepper);
+export { SDSStepper };
+//# sourceMappingURL=sds-stepper.js.map

package/dist/sds-stepper/sds-stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-stepper.js","sourceRoot":"","sources":["../../src/sds-stepper/sds-stepper.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\nimport { SDSStepperStep } from '../sds-stepper-step/sds-stepper-step';\nimport { styles } from './sds-stepper.styles';\n\nexport interface SDSStepperProps {\n\torientation?: 'horizontal' | 'vertical';\n}\n\n@guardedCustomElement('sds-stepper')\nexport class SDSStepper extends SDSEventDispatcherMixin(LitElement) {\n\tstatic override styles = [styles];\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: String, reflect: true }) orientation: SDSStepperProps['orientation'] = 'horizontal';\n\n\t@queryAssignedElements({ selector: 'sds-stepper-step', flatten: true })\n\tprivate readonly steps!: SDSStepperStep[];\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t}\n\n\tprivate readonly _setActiveStep = (steps: SDSStepperStep[], activeIndex: number): void => {\n\t\tsteps.forEach((step, index) => {\n\t\t\tstep.active = index === activeIndex;\n\t\t});\n\t};\n\n\tprivate readonly _handleChildClick = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tconst step: SDSStepperStep | undefined = event.composedPath().find((n): n is SDSStepperStep => n instanceof SDSStepperStep);\n\n\t\tif (!step) return;\n\n\t\tconst index = this.steps.indexOf(step);\n\t\tif (index === -1) return;\n\n\t\tthis._setActiveStep(this.steps, index);\n\t\tthis.dispatchSheriffEvent('change', { index });\n\t};\n\n\tpublic getActiveStep(): number {\n\t\treturn this.steps.findIndex((step) => step.active);\n\t}\n\n\tpublic override role = 'tablist';\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tif (!this.hasAttribute('aria-label')) {\n\t\t\tthis.ariaLabel = 'Steg';\n\t\t}\n\t}\n\n\tpublic goToStep(index: number) {\n\t\tif (index < 0 || index >= this.steps.length) return;\n\n\t\tthis._setActiveStep(this.steps, index);\n\t\tthis.dispatchSheriffEvent('change', { index });\n\t}\n\n\tprivate _applyStepNumbers() {\n\t\tthis.steps.forEach((step, i) => {\n\t\t\tstep.style.setProperty('--sds-stepper-step-counter-content', `\"${i + 1}\"`);\n\t\t});\n\t}\n\n\toverride firstUpdated() {\n\t\tconst userAgent: string = navigator.userAgent;\n\n\t\tconst isSafari: boolean = /safari/i.test(userAgent) && !/chrome/i.test(userAgent) && !/crios/i.test(userAgent) && !/edgios/i.test(userAgent) && !/fxios/i.test(userAgent);\n\n\t\tif (isSafari) {\n\t\t\tconst slot = this.shadowRoot!.querySelector('slot') as HTMLSlotElement;\n\t\t\tslot.addEventListener('slotchange', () => this._applyStepNumbers());\n\t\t\tthis._applyStepNumbers();\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`<slot @_sds-step-clicked=\"${this._handleChildClick}\"></slot>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-stepper': SDSStepper;\n\t}\n\n\tinterface SDSStepperEventMap {\n\t\tchange: CustomEvent<{ index: number }>;\n\t}\n}\n"]}

package/dist/sds-stepper/sds-stepper.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=sds-stepper.styles.d.ts.map

package/dist/sds-stepper/sds-stepper.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-stepper.styles.d.ts","sourceRoot":"","sources":["../../src/sds-stepper/sds-stepper.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkClB,CAAC"}

package/dist/sds-stepper/sds-stepper.styles.js

@@ -0,0 +1,37 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		display: flex;
+		flex-direction: row;
+		counter-reset: stepper;
+		align-items: flex-start;
+		text-align: center;
+
+		--sds-stepper-circle-size: 32px;
+	}
+
+	:host([orientation='vertical']) {
+		flex-direction: column;
+
+		--sds-stepper-step-grid-template-rows: [line-1] auto [step-start] var(--sds-stepper-circle-size) [line-2 step-end] auto;
+		--sds-stepper-step-grid-template-columns: var(--sds-stepper-circle-size) auto;
+
+		--sds-stepper-step-step-grid-area: 2/1/-1/-1;
+		--sds-stepper-step-step-grid-template-columns: [circle] var(--sds-stepper-circle-size) [content] auto;
+		--sds-stepper-step-step-margin: 0 0 var(--sds-stepper-circle-size) 0;
+
+		--sds-stepper-step-counter-grid-area: circle / 1;
+		--sds-stepper-step-label-grid-area: auto;
+
+		--sds-stepper-step-divider-before-visibility: hidden;
+		--sds-stepper-step-divider-width: 1px;
+		--sds-stepper-step-divider-height: 100%;
+		--sds-stepper-step-divider-min-height: 1rem;
+		--sds-stepper-step-divider-grid-row: line-2;
+		--sds-stepper-step-divider-after-grid-column: 1;
+		--sds-stepper-step-divider-before-display: none;
+
+		--sds-stepper-step-step-gap: 0 var(--sds-spacing-3xs);
+	}
+`;
+//# sourceMappingURL=sds-stepper.styles.js.map

package/dist/sds-stepper/sds-stepper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-stepper.styles.js","sourceRoot":"","sources":["../../src/sds-stepper/sds-stepper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tcounter-reset: stepper;\n\t\talign-items: flex-start;\n\t\ttext-align: center;\n\n\t\t--sds-stepper-circle-size: 32px;\n\t}\n\n\t:host([orientation='vertical']) {\n\t\tflex-direction: column;\n\n\t\t--sds-stepper-step-grid-template-rows: [line-1] auto [step-start] var(--sds-stepper-circle-size) [line-2 step-end] auto;\n\t\t--sds-stepper-step-grid-template-columns: var(--sds-stepper-circle-size) auto;\n\n\t\t--sds-stepper-step-step-grid-area: 2/1/-1/-1;\n\t\t--sds-stepper-step-step-grid-template-columns: [circle] var(--sds-stepper-circle-size) [content] auto;\n\t\t--sds-stepper-step-step-margin: 0 0 var(--sds-stepper-circle-size) 0;\n\n\t\t--sds-stepper-step-counter-grid-area: circle / 1;\n\t\t--sds-stepper-step-label-grid-area: auto;\n\n\t\t--sds-stepper-step-divider-before-visibility: hidden;\n\t\t--sds-stepper-step-divider-width: 1px;\n\t\t--sds-stepper-step-divider-height: 100%;\n\t\t--sds-stepper-step-divider-min-height: 1rem;\n\t\t--sds-stepper-step-divider-grid-row: line-2;\n\t\t--sds-stepper-step-divider-after-grid-column: 1;\n\t\t--sds-stepper-step-divider-before-display: none;\n\n\t\t--sds-stepper-step-step-gap: 0 var(--sds-spacing-3xs);\n\t}\n`;\n"]}

package/dist/sds-stepper-step/sds-stepper-step.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+export interface SDSStepperStepProps {
+    complete?: boolean;
+    interactive?: boolean;
+    active?: boolean;
+}
+declare const SDSStepperStep_base: (new (...args: any[]) => import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface) & typeof LitElement;
+export declare class SDSStepperStep extends SDSStepperStep_base {
+    static styles: import("lit").CSSResult[];
+    readonly internals: ElementInternals;
+    static shadowRootOptions: ShadowRootInit;
+    complete: SDSStepperStepProps['complete'];
+    interactive: SDSStepperStepProps['interactive'];
+    active: SDSStepperStepProps['active'];
+    constructor();
+    private readonly _handleClick;
+    private readonly _renderNonInteractiveStep;
+    private readonly _renderInteractiveStep;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-stepper-step': SDSStepperStep;
+    }
+}
+export {};
+//# sourceMappingURL=sds-stepper-step.d.ts.map

package/dist/sds-stepper-step/sds-stepper-step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-stepper-step.d.ts","sourceRoot":"","sources":["../../src/sds-stepper-step/sds-stepper-step.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,MAAM,WAAW,mBAAmB;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB;;AAED,qBACa,cAAe,SAAQ,mBAAmC;IACtE,OAAgB,MAAM,4BAAY;IAClC,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAE5C,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAE0C,QAAQ,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAS;IAClD,WAAW,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAS;IACxD,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAS;;IAO1F,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK3B;IAEF,OAAO,CAAC,QAAQ,CAAC,yBAAyB,CAKxC;IAEF,OAAO,CAAC,QAAQ,CAAC,sBAAsB,CAKrC;IAEO,MAAM;CAef;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,cAAc,CAAC;KACnC;CACD"}

package/dist/sds-stepper-step/sds-stepper-step.js

@@ -0,0 +1,70 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';
+import { guardedCustomElement } from '../utils/guarded-custom-element';
+import { styles } from './sds-stepper-step.styles';
+let SDSStepperStep = class SDSStepperStep extends SDSEventDispatcherMixin(LitElement) {
+    constructor() {
+        super();
+        this.complete = false;
+        this.interactive = false;
+        this.active = false;
+        this._handleClick = (event) => {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            this.dispatchSheriffEvent('_sds-step-clicked');
+        };
+        this._renderNonInteractiveStep = () => {
+            return html `<div class="sds-stepper-step__step--static">
+			<span class="sds-stepper-step__counter"></span>
+			<div class="sds-stepper-step__label"><slot></slot></div>
+		</div>`;
+        };
+        this._renderInteractiveStep = () => {
+            return html `<button type="button" role="tab" aria-selected="${this.active ? 'true' : 'false'}" id="button" class="sds-stepper-step__step" @click="${this._handleClick}">
+			<span class="sds-stepper-step__counter"></span>
+			<div class="sds-stepper-step__label"><slot></slot></div>
+		</button>`;
+        };
+        this.internals = this.attachInternals();
+    }
+    render() {
+        if (this.interactive) {
+            return html `<div class="sds-stepper-step">
+				<span class="sds-stepper-step__divider sds-stepper-step__divider--before"></span>
+				${this._renderInteractiveStep()}
+				<span class="sds-stepper-step__divider sds-stepper-step__divider--after"></span>
+			</div>`;
+        }
+        return html `<div class="sds-stepper-step" role="tab" aria-disabled="true" tabindex="-1" aria-selected="false">
+			<span class="sds-stepper-step__divider sds-stepper-step__divider--before"></span>
+			${this._renderNonInteractiveStep()}
+			<span class="sds-stepper-step__divider sds-stepper-step__divider--after"></span>
+		</div>`;
+    }
+};
+SDSStepperStep.styles = [styles];
+SDSStepperStep.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSStepperStep.prototype, "complete", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSStepperStep.prototype, "interactive", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSStepperStep.prototype, "active", void 0);
+SDSStepperStep = __decorate([
+    guardedCustomElement('sds-stepper-step')
+], SDSStepperStep);
+export { SDSStepperStep };
+//# sourceMappingURL=sds-stepper-step.js.map

package/dist/sds-stepper-step/sds-stepper-step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-stepper-step.js","sourceRoot":"","sources":["../../src/sds-stepper-step/sds-stepper-step.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAS5C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,uBAAuB,CAAC,UAAU,CAAC;IAatE;QACC,KAAK,EAAE,CAAC;QALmC,aAAQ,GAAoC,KAAK,CAAC;QAClD,gBAAW,GAAuC,KAAK,CAAC;QACxD,WAAM,GAAkC,KAAK,CAAC;QAOzE,iBAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;YACrD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YAEjC,IAAI,CAAC,oBAAoB,CAAC,mBAAmB,CAAC,CAAC;QAChD,CAAC,CAAC;QAEe,8BAAyB,GAAG,GAAG,EAAE;YACjD,OAAO,IAAI,CAAA;;;SAGJ,CAAC;QACT,CAAC,CAAC;QAEe,2BAAsB,GAAG,GAAG,EAAE;YAC9C,OAAO,IAAI,CAAA,mDAAmD,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,wDAAwD,IAAI,CAAC,YAAY;;;YAG3J,CAAC;QACZ,CAAC,CAAC;QAtBD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IACzC,CAAC;IAuBQ,MAAM;QACd,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,OAAO,IAAI,CAAA;;MAER,IAAI,CAAC,sBAAsB,EAAE;;UAEzB,CAAC;QACT,CAAC;QAED,OAAO,IAAI,CAAA;;KAER,IAAI,CAAC,yBAAyB,EAAE;;SAE5B,CAAC;IACT,CAAC;;AApDe,qBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGlB,gCAAiB,GAAmB;IACnD,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACpB,AAHgC,CAG/B;AAE0C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAmD;AAClD;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAyD;AACxD;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAA+C;AAX9E,cAAc;IAD1B,oBAAoB,CAAC,kBAAkB,CAAC;GAC5B,cAAc,CAsD1B","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-stepper-step.styles';\n\nexport interface SDSStepperStepProps {\n\tcomplete?: boolean;\n\tinteractive?: boolean;\n\tactive?: boolean;\n}\n\n@guardedCustomElement('sds-stepper-step')\nexport class SDSStepperStep extends SDSEventDispatcherMixin(LitElement) {\n\tstatic override styles = [styles];\n\tpublic readonly internals: ElementInternals;\n\n\tstatic override shadowRootOptions: ShadowRootInit = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t};\n\n\t@property({ type: Boolean, reflect: true }) complete: SDSStepperStepProps['complete'] = false;\n\t@property({ type: Boolean, reflect: true }) interactive: SDSStepperStepProps['interactive'] = false;\n\t@property({ type: Boolean, reflect: true }) active: SDSStepperStepProps['active'] = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t}\n\n\tprivate readonly _handleClick = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tthis.dispatchSheriffEvent('_sds-step-clicked');\n\t};\n\n\tprivate readonly _renderNonInteractiveStep = () => {\n\t\treturn html`<div class=\"sds-stepper-step__step--static\">\n\t\t\t<span class=\"sds-stepper-step__counter\"></span>\n\t\t\t<div class=\"sds-stepper-step__label\"><slot></slot></div>\n\t\t</div>`;\n\t};\n\n\tprivate readonly _renderInteractiveStep = () => {\n\t\treturn html`<button type=\"button\" role=\"tab\" aria-selected=\"${this.active ? 'true' : 'false'}\" id=\"button\" class=\"sds-stepper-step__step\" @click=\"${this._handleClick}\">\n\t\t\t<span class=\"sds-stepper-step__counter\"></span>\n\t\t\t<div class=\"sds-stepper-step__label\"><slot></slot></div>\n\t\t</button>`;\n\t};\n\n\toverride render() {\n\t\tif (this.interactive) {\n\t\t\treturn html`<div class=\"sds-stepper-step\">\n\t\t\t\t<span class=\"sds-stepper-step__divider sds-stepper-step__divider--before\"></span>\n\t\t\t\t${this._renderInteractiveStep()}\n\t\t\t\t<span class=\"sds-stepper-step__divider sds-stepper-step__divider--after\"></span>\n\t\t\t</div>`;\n\t\t}\n\n\t\treturn html`<div class=\"sds-stepper-step\" role=\"tab\" aria-disabled=\"true\" tabindex=\"-1\" aria-selected=\"false\">\n\t\t\t<span class=\"sds-stepper-step__divider sds-stepper-step__divider--before\"></span>\n\t\t\t${this._renderNonInteractiveStep()}\n\t\t\t<span class=\"sds-stepper-step__divider sds-stepper-step__divider--after\"></span>\n\t\t</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-stepper-step': SDSStepperStep;\n\t}\n}\n"]}

package/dist/sds-stepper-step/sds-stepper-step.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=sds-stepper-step.styles.d.ts.map

package/dist/sds-stepper-step/sds-stepper-step.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-stepper-step.styles.d.ts","sourceRoot":"","sources":["../../src/sds-stepper-step/sds-stepper-step.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkQlB,CAAC"}

package/dist/sds-stepper-step/sds-stepper-step.styles.js

@@ -0,0 +1,261 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		/* Sizing */
+		--_sds-stepper-step-circle-size: var(--sds-stepper-circle-size, 32px);
+		--_sds-stepper-step-border-width: var(--sds-stepper-step-border-width, 2px);
+		--_sds-stepper-step-radius: var(--sds-stepper-step-radius, var(--sds-radius-sm));
+
+		/* Layout */
+		--_sds-stepper-step-grid-template-rows: var(--sds-stepper-step-grid-template-rows, var(--_sds-stepper-step-circle-size) auto);
+		--_sds-stepper-step-grid-template-columns: var(
+			--sds-stepper-step-grid-template-columns,
+			[line-1-start] 1fr [step-start] auto [line-1-end] var(--_sds-stepper-step-circle-size) [line-2-start] auto [step-end] 1fr [line-2-end]
+		);
+
+		/* Button */
+		--_sds-stepper-step-step-grid-template-rows: var(--sds-stepper-step-step-grid-template-rows, [circle] var(--_sds-stepper-step-circle-size) [content] auto);
+		--_sds-stepper-step-step-grid-template-columns: var(--sds-stepper-step-step-grid-template-columns, [content-start] auto [circle] var(--_sds-stepper-step-circle-size) [content-end] auto);
+		--_sds-stepper-step-step-grid-area: var(--sds-stepper-step-step-grid-area, 1 / step / -1);
+		--_sds-stepper-step-step-gap: var(--sds-stepper-step-step-gap, var(--sds-spacing-3xs));
+		--_sds-stepper-step-step-margin: var(--sds-stepper-step-step-margin, 0);
+
+		/* Divider */
+		--_sds-stepper-step-divider-color: var(--sds-stepper-step-divider-color, var(--sds-color-neutral-border-subtle));
+		--_sds-stepper-step-divider-width: var(--sds-stepper-step-divider-width, 100%);
+		--_sds-stepper-step-divider-height: var(--sds-stepper-step-divider-height, 1px);
+		--_sds-stepper-step-divider-min-height: var(--sds-stepper-step-divider-min-height, auto);
+		--_sds-stepper-step-divider-grid-row: var(--sds-stepper-step-divider-grid-row, 1);
+		--_sds-stepper-step-divider-before-grid-column: var(--sds-stepper-step-divider-before-grid-column, line-1);
+		--_sds-stepper-step-divider-before-visibility: var(--sds-stepper-step-divider-before-visibility, visible);
+		--_sds-stepper-step-divider-before-display: var(--sds-stepper-step-divider-before-display, block);
+		--_sds-stepper-step-divider-after-grid-column: var(--sds-stepper-step-divider-after-grid-column, line-2);
+		--_sds-stepper-step-divider-after-visibility: var(--sds-stepper-step-divider-after-visibility, visible);
+		--_sds-stepper-step-divider-after-display: var(--sds-stepper-step-divider-after-display, block);
+
+		/* Content */
+		--_sds-stepper-step-label-grid-area: var(--sds-stepper-step-label-grid-area, content / 1 / content / -1);
+		--_sds-stepper-step-label-text-decoration-thickness: var(--sds-stepper-step-label-text-decoration-thickness, var(--sds-typography-link-text-decoration-thickness));
+		--_sds-stepper-step-label-text-underline-offset: var(--sds-stepper-step-label-text-underline-offset, var(--sds-typography-link-text-underline-offset));
+		--_sds-stepper-step-label-max-width: var(--sds-stepper-step-label-max-width, 24ch);
+		--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
+		--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, var(--sds-typography-link-text-decoration));
+
+		/* Counter */
+		--_sds-stepper-step-counter-grid-area: var(--sds-stepper-step-counter-grid-area, circle / 2);
+		--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
+		--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
+		--_sds-stepper-step-counter-content: var(--sds-stepper-step-counter-content, counters(stepper, ''));
+		--_sds-stepper-step-counter-background-color: var(
+			--sds-stepper-step-counter-background-color,
+			var(--sds-color-background-action-contrast-default, var(--sds-color-main-background-action-contrast-default))
+		);
+		--_sds-stepper-step-counter-mask: var(--sds-stepper-step-counter-mask, none);
+		--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-mask-background-color, transparent);
+
+		/* Focus */
+		--_sds-stepper-step-focus-color: var(--sds-stepper-step-focus-color, var(--sds-color-states-focus-outer));
+		--_sds-stepper-step-focus-inner-color: var(--sds-stepper-step-focus-inner-color, var(--sds-color-states-focus-inner));
+		--_sds-stepper-step-focus-spacing: var(--sds-stepper-step-focus-spacing, var(--sds-color-states-focus-spacing));
+
+		width: fit-content;
+	}
+
+	:host(:first-child) {
+		--_sds-stepper-step-divider-before-visibility: hidden;
+	}
+
+	:host(:last-child) {
+		--_sds-stepper-step-divider-after-visibility: hidden;
+	}
+
+	.sds-stepper-step {
+		display: grid;
+		grid-template-columns: var(--_sds-stepper-step-grid-template-columns);
+		grid-template-rows: var(--_sds-stepper-step-grid-template-rows);
+		gap: var(--sds-spacing-xs);
+		justify-items: flex-start;
+		flex: 100%;
+		padding-block-start: var(--_sds-stepper-step-border-width);
+		font-family: var(--sds-typography-font-family);
+	}
+
+	.sds-stepper-step__divider {
+		display: block;
+		align-self: center;
+		justify-self: center;
+
+		width: var(--_sds-stepper-step-divider-width);
+		height: var(--_sds-stepper-step-divider-height);
+		min-height: var(--_sds-stepper-step-divider-min-height);
+
+		grid-row: var(--_sds-stepper-step-divider-grid-row);
+		background-color: var(--_sds-stepper-step-divider-color);
+
+		&.sds-stepper-step__divider--before {
+			grid-column: var(--_sds-stepper-step-divider-before-grid-column);
+			visibility: var(--_sds-stepper-step-divider-before-visibility);
+			display: var(--_sds-stepper-step-divider-before-display);
+		}
+
+		&.sds-stepper-step__divider--after {
+			grid-column: var(--_sds-stepper-step-divider-after-grid-column);
+			visibility: var(--_sds-stepper-step-divider-after-visibility);
+			display: var(--_sds-stepper-step-divider-after-display);
+		}
+	}
+
+	.sds-stepper-step__step,
+	.sds-stepper-step__step--static {
+		display: grid;
+		width: 100%;
+
+		grid-area: var(--_sds-stepper-step-step-grid-area);
+		grid-template-rows: var(--_sds-stepper-step-step-grid-template-rows);
+		grid-template-columns: var(--_sds-stepper-step-step-grid-template-columns);
+		place-items: center;
+
+		gap: var(--_sds-stepper-step-step-gap);
+		padding: 0;
+		margin: var(--_sds-stepper-step-step-margin);
+
+		border: 0;
+		background: none;
+		border-radius: var(--_sds-stepper-step-radius);
+	}
+
+	.sds-stepper-step__step {
+		cursor: pointer;
+
+		&:focus-visible {
+			box-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-stepper-step-focus-inner-color);
+			outline: 3px solid var(--_sds-stepper-step-focus-color);
+			outline-offset: 3px;
+			isolation: isolate;
+		}
+	}
+
+	.sds-stepper-step__label {
+		grid-column: content;
+		grid-area: var(--_sds-stepper-step-label-grid-area);
+		min-width: fit-content;
+		max-width: var(--_sds-stepper-step-label-max-width);
+		text-align: left;
+
+		color: var(--_sds-stepper-step-label-text-color);
+		font-family: var(--sds-typography-font-family);
+		font-size: var(--sds-typography-body-lg-strong-tall-desktop-font-size);
+		font-weight: var(--sds-typography-body-lg-strong-tall-desktop-font-weight);
+		line-height: var(--sds-typography-body-lg-strong-tall-desktop-line-height);
+
+		text-decoration: var(--_sds-stepper-step-label-text-decoration);
+		text-decoration-thickness: var(--_sds-stepper-step-label-text-decoration-thickness);
+		text-underline-offset: var(--_sds-stepper-step-label-text-underline-offset);
+	}
+
+	.sds-stepper-step__counter {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		grid-area: var(--_sds-stepper-step-counter-grid-area);
+
+		width: var(--_sds-stepper-step-circle-size);
+		height: var(--_sds-stepper-step-circle-size);
+
+		border-radius: 50%;
+		border: var(--_sds-stepper-step-border-width) solid var(--_sds-stepper-step-counter-border-color);
+		background-color: var(--_sds-stepper-step-counter-background-color);
+
+		counter-increment: stepper;
+
+		color: var(--_sds-stepper-step-counter-text-color);
+		font-size: var(--sds-typography-body-md-strong-desktop-font-size);
+		font-weight: var(--sds-typography-body-md-strong-desktop-font-weight);
+		line-height: var(--sds-typography-body-md-strong-desktop-line-height);
+
+		&::before {
+			content: var(--_sds-stepper-step-counter-content);
+
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			width: 100%;
+			height: 100%;
+
+			border-radius: 50%;
+			background-color: var(--_sds-stepper-step-counter-mask-background-color);
+			mask: var(--_sds-stepper-step-counter-mask);
+		}
+	}
+
+	:host([complete]) {
+		--_sds-stepper-step-counter-background-color: var(--sds-stepper-step-counter-background-color, var(--sds-color-action-contrast-subtle, var(--sds-color-main-action-contrast-subtle)));
+		--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
+		--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
+		--_sds-stepper-step-counter-content: var(--sds-stepper-step-counter-content, '');
+		--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-mask-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
+		--_sds-stepper-step-counter-mask: var(
+			--sds-stepper-step-counter-mask,
+			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M378-232.43 140.43-470l57.14-57.13L378-346.7l383.43-383.43L818.57-673z'/%3E%3C/svg%3E")
+				no-repeat center / 24px 24px
+		);
+	}
+
+	:host([active]) {
+		--_sds-stepper-step-counter-background-color: var(--sds-stepper-step-counter-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
+		--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
+		--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-main-action-contrast-default));
+		--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, none);
+		--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));
+
+		pointer-events: none;
+	}
+
+	:host(:not([active])) .sds-stepper-step__step:hover {
+		--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
+		--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, var(--sds-typography-link-text-decoration));
+		--_sds-stepper-step-label-text-decoration-thickness: var(--sds-stepper-step-label-text-decoration-thickness, calc(var(--sds-typography-link-text-decoration-thickness) + 1px));
+		--_sds-stepper-step-counter-background-color: var(--sds-stepper-step-counter-background-color, var(--sds-color-action-contrast-subtle, var(--sds-color-main-action-contrast-subtle)));
+		--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
+		--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
+	}
+
+	:host(:not([active])[complete]) .sds-stepper-step__step:hover {
+		--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-mask-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
+		--_sds-stepper-step-counter-mask: var(
+			--sds-stepper-step-counter-mask,
+			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M378-232.43 140.43-470l57.14-57.13L378-346.7l383.43-383.43L818.57-673z'/%3E%3C/svg%3E")
+				no-repeat center / 24px 24px
+		);
+	}
+
+	:host(:not([active])) .sds-stepper-step__step:active {
+		--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
+		--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
+		--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
+	}
+
+	:host(:not([active])[complete]) .sds-stepper-step__step:active {
+		--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-mask-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
+		--_sds-stepper-step-counter-mask: var(
+			--sds-stepper-step-counter-mask,
+			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M378-232.43 140.43-470l57.14-57.13L378-346.7l383.43-383.43L818.57-673z'/%3E%3C/svg%3E")
+				no-repeat center / 24px 24px
+		);
+	}
+
+	:host([active][complete]) {
+		--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-background-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));
+	}
+
+	:host(:not([active]):not([interactive])) {
+		--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-neutral-text-default));
+		--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, none);
+		--_sds-stepper-step-counter-background-color: var(--sds-stepper-step-counter-background-color, transparent);
+		--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-neutral-border-strong));
+		--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-neutral-text-default));
+	}
+`;
+//# sourceMappingURL=sds-stepper-step.styles.js.map

package/dist/sds-stepper-step/sds-stepper-step.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-stepper-step.styles.js","sourceRoot":"","sources":["../../src/sds-stepper-step/sds-stepper-step.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkQxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t/* Sizing */\n\t\t--_sds-stepper-step-circle-size: var(--sds-stepper-circle-size, 32px);\n\t\t--_sds-stepper-step-border-width: var(--sds-stepper-step-border-width, 2px);\n\t\t--_sds-stepper-step-radius: var(--sds-stepper-step-radius, var(--sds-radius-sm));\n\n\t\t/* Layout */\n\t\t--_sds-stepper-step-grid-template-rows: var(--sds-stepper-step-grid-template-rows, var(--_sds-stepper-step-circle-size) auto);\n\t\t--_sds-stepper-step-grid-template-columns: var(\n\t\t\t--sds-stepper-step-grid-template-columns,\n\t\t\t[line-1-start] 1fr [step-start] auto [line-1-end] var(--_sds-stepper-step-circle-size) [line-2-start] auto [step-end] 1fr [line-2-end]\n\t\t);\n\n\t\t/* Button */\n\t\t--_sds-stepper-step-step-grid-template-rows: var(--sds-stepper-step-step-grid-template-rows, [circle] var(--_sds-stepper-step-circle-size) [content] auto);\n\t\t--_sds-stepper-step-step-grid-template-columns: var(--sds-stepper-step-step-grid-template-columns, [content-start] auto [circle] var(--_sds-stepper-step-circle-size) [content-end] auto);\n\t\t--_sds-stepper-step-step-grid-area: var(--sds-stepper-step-step-grid-area, 1 / step / -1);\n\t\t--_sds-stepper-step-step-gap: var(--sds-stepper-step-step-gap, var(--sds-spacing-3xs));\n\t\t--_sds-stepper-step-step-margin: var(--sds-stepper-step-step-margin, 0);\n\n\t\t/* Divider */\n\t\t--_sds-stepper-step-divider-color: var(--sds-stepper-step-divider-color, var(--sds-color-neutral-border-subtle));\n\t\t--_sds-stepper-step-divider-width: var(--sds-stepper-step-divider-width, 100%);\n\t\t--_sds-stepper-step-divider-height: var(--sds-stepper-step-divider-height, 1px);\n\t\t--_sds-stepper-step-divider-min-height: var(--sds-stepper-step-divider-min-height, auto);\n\t\t--_sds-stepper-step-divider-grid-row: var(--sds-stepper-step-divider-grid-row, 1);\n\t\t--_sds-stepper-step-divider-before-grid-column: var(--sds-stepper-step-divider-before-grid-column, line-1);\n\t\t--_sds-stepper-step-divider-before-visibility: var(--sds-stepper-step-divider-before-visibility, visible);\n\t\t--_sds-stepper-step-divider-before-display: var(--sds-stepper-step-divider-before-display, block);\n\t\t--_sds-stepper-step-divider-after-grid-column: var(--sds-stepper-step-divider-after-grid-column, line-2);\n\t\t--_sds-stepper-step-divider-after-visibility: var(--sds-stepper-step-divider-after-visibility, visible);\n\t\t--_sds-stepper-step-divider-after-display: var(--sds-stepper-step-divider-after-display, block);\n\n\t\t/* Content */\n\t\t--_sds-stepper-step-label-grid-area: var(--sds-stepper-step-label-grid-area, content / 1 / content / -1);\n\t\t--_sds-stepper-step-label-text-decoration-thickness: var(--sds-stepper-step-label-text-decoration-thickness, var(--sds-typography-link-text-decoration-thickness));\n\t\t--_sds-stepper-step-label-text-underline-offset: var(--sds-stepper-step-label-text-underline-offset, var(--sds-typography-link-text-underline-offset));\n\t\t--_sds-stepper-step-label-max-width: var(--sds-stepper-step-label-max-width, 24ch);\n\t\t--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, var(--sds-typography-link-text-decoration));\n\n\t\t/* Counter */\n\t\t--_sds-stepper-step-counter-grid-area: var(--sds-stepper-step-counter-grid-area, circle / 2);\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-content: var(--sds-stepper-step-counter-content, counters(stepper, ''));\n\t\t--_sds-stepper-step-counter-background-color: var(\n\t\t\t--sds-stepper-step-counter-background-color,\n\t\t\tvar(--sds-color-background-action-contrast-default, var(--sds-color-main-background-action-contrast-default))\n\t\t);\n\t\t--_sds-stepper-step-counter-mask: var(--sds-stepper-step-counter-mask, none);\n\t\t--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-mask-background-color, transparent);\n\n\t\t/* Focus */\n\t\t--_sds-stepper-step-focus-color: var(--sds-stepper-step-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-stepper-step-focus-inner-color: var(--sds-stepper-step-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-stepper-step-focus-spacing: var(--sds-stepper-step-focus-spacing, var(--sds-color-states-focus-spacing));\n\n\t\twidth: fit-content;\n\t}\n\n\t:host(:first-child) {\n\t\t--_sds-stepper-step-divider-before-visibility: hidden;\n\t}\n\n\t:host(:last-child) {\n\t\t--_sds-stepper-step-divider-after-visibility: hidden;\n\t}\n\n\t.sds-stepper-step {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: var(--_sds-stepper-step-grid-template-columns);\n\t\tgrid-template-rows: var(--_sds-stepper-step-grid-template-rows);\n\t\tgap: var(--sds-spacing-xs);\n\t\tjustify-items: flex-start;\n\t\tflex: 100%;\n\t\tpadding-block-start: var(--_sds-stepper-step-border-width);\n\t\tfont-family: var(--sds-typography-font-family);\n\t}\n\n\t.sds-stepper-step__divider {\n\t\tdisplay: block;\n\t\talign-self: center;\n\t\tjustify-self: center;\n\n\t\twidth: var(--_sds-stepper-step-divider-width);\n\t\theight: var(--_sds-stepper-step-divider-height);\n\t\tmin-height: var(--_sds-stepper-step-divider-min-height);\n\n\t\tgrid-row: var(--_sds-stepper-step-divider-grid-row);\n\t\tbackground-color: var(--_sds-stepper-step-divider-color);\n\n\t\t&.sds-stepper-step__divider--before {\n\t\t\tgrid-column: var(--_sds-stepper-step-divider-before-grid-column);\n\t\t\tvisibility: var(--_sds-stepper-step-divider-before-visibility);\n\t\t\tdisplay: var(--_sds-stepper-step-divider-before-display);\n\t\t}\n\n\t\t&.sds-stepper-step__divider--after {\n\t\t\tgrid-column: var(--_sds-stepper-step-divider-after-grid-column);\n\t\t\tvisibility: var(--_sds-stepper-step-divider-after-visibility);\n\t\t\tdisplay: var(--_sds-stepper-step-divider-after-display);\n\t\t}\n\t}\n\n\t.sds-stepper-step__step,\n\t.sds-stepper-step__step--static {\n\t\tdisplay: grid;\n\t\twidth: 100%;\n\n\t\tgrid-area: var(--_sds-stepper-step-step-grid-area);\n\t\tgrid-template-rows: var(--_sds-stepper-step-step-grid-template-rows);\n\t\tgrid-template-columns: var(--_sds-stepper-step-step-grid-template-columns);\n\t\tplace-items: center;\n\n\t\tgap: var(--_sds-stepper-step-step-gap);\n\t\tpadding: 0;\n\t\tmargin: var(--_sds-stepper-step-step-margin);\n\n\t\tborder: 0;\n\t\tbackground: none;\n\t\tborder-radius: var(--_sds-stepper-step-radius);\n\t}\n\n\t.sds-stepper-step__step {\n\t\tcursor: pointer;\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-stepper-step-focus-inner-color);\n\t\t\toutline: 3px solid var(--_sds-stepper-step-focus-color);\n\t\t\toutline-offset: 3px;\n\t\t\tisolation: isolate;\n\t\t}\n\t}\n\n\t.sds-stepper-step__label {\n\t\tgrid-column: content;\n\t\tgrid-area: var(--_sds-stepper-step-label-grid-area);\n\t\tmin-width: fit-content;\n\t\tmax-width: var(--_sds-stepper-step-label-max-width);\n\t\ttext-align: left;\n\n\t\tcolor: var(--_sds-stepper-step-label-text-color);\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: var(--sds-typography-body-lg-strong-tall-desktop-font-size);\n\t\tfont-weight: var(--sds-typography-body-lg-strong-tall-desktop-font-weight);\n\t\tline-height: var(--sds-typography-body-lg-strong-tall-desktop-line-height);\n\n\t\ttext-decoration: var(--_sds-stepper-step-label-text-decoration);\n\t\ttext-decoration-thickness: var(--_sds-stepper-step-label-text-decoration-thickness);\n\t\ttext-underline-offset: var(--_sds-stepper-step-label-text-underline-offset);\n\t}\n\n\t.sds-stepper-step__counter {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\n\t\tgrid-area: var(--_sds-stepper-step-counter-grid-area);\n\n\t\twidth: var(--_sds-stepper-step-circle-size);\n\t\theight: var(--_sds-stepper-step-circle-size);\n\n\t\tborder-radius: 50%;\n\t\tborder: var(--_sds-stepper-step-border-width) solid var(--_sds-stepper-step-counter-border-color);\n\t\tbackground-color: var(--_sds-stepper-step-counter-background-color);\n\n\t\tcounter-increment: stepper;\n\n\t\tcolor: var(--_sds-stepper-step-counter-text-color);\n\t\tfont-size: var(--sds-typography-body-md-strong-desktop-font-size);\n\t\tfont-weight: var(--sds-typography-body-md-strong-desktop-font-weight);\n\t\tline-height: var(--sds-typography-body-md-strong-desktop-line-height);\n\n\t\t&::before {\n\t\t\tcontent: var(--_sds-stepper-step-counter-content);\n\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\n\t\t\tborder-radius: 50%;\n\t\t\tbackground-color: var(--_sds-stepper-step-counter-mask-background-color);\n\t\t\tmask: var(--_sds-stepper-step-counter-mask);\n\t\t}\n\t}\n\n\t:host([complete]) {\n\t\t--_sds-stepper-step-counter-background-color: var(--sds-stepper-step-counter-background-color, var(--sds-color-action-contrast-subtle, var(--sds-color-main-action-contrast-subtle)));\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-content: var(--sds-stepper-step-counter-content, '');\n\t\t--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-mask-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-mask: var(\n\t\t\t--sds-stepper-step-counter-mask,\n\t\t\turl(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M378-232.43 140.43-470l57.14-57.13L378-346.7l383.43-383.43L818.57-673z'/%3E%3C/svg%3E\")\n\t\t\t\tno-repeat center / 24px 24px\n\t\t);\n\t}\n\n\t:host([active]) {\n\t\t--_sds-stepper-step-counter-background-color: var(--sds-stepper-step-counter-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-main-action-contrast-default));\n\t\t--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, none);\n\t\t--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\tpointer-events: none;\n\t}\n\n\t:host(:not([active])) .sds-stepper-step__step:hover {\n\t\t--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, var(--sds-typography-link-text-decoration));\n\t\t--_sds-stepper-step-label-text-decoration-thickness: var(--sds-stepper-step-label-text-decoration-thickness, calc(var(--sds-typography-link-text-decoration-thickness) + 1px));\n\t\t--_sds-stepper-step-counter-background-color: var(--sds-stepper-step-counter-background-color, var(--sds-color-action-contrast-subtle, var(--sds-color-main-action-contrast-subtle)));\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t}\n\n\t:host(:not([active])[complete]) .sds-stepper-step__step:hover {\n\t\t--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-mask-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t--_sds-stepper-step-counter-mask: var(\n\t\t\t--sds-stepper-step-counter-mask,\n\t\t\turl(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M378-232.43 140.43-470l57.14-57.13L378-346.7l383.43-383.43L818.57-673z'/%3E%3C/svg%3E\")\n\t\t\t\tno-repeat center / 24px 24px\n\t\t);\n\t}\n\n\t:host(:not([active])) .sds-stepper-step__step:active {\n\t\t--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t}\n\n\t:host(:not([active])[complete]) .sds-stepper-step__step:active {\n\t\t--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-mask-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t--_sds-stepper-step-counter-mask: var(\n\t\t\t--sds-stepper-step-counter-mask,\n\t\t\turl(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M378-232.43 140.43-470l57.14-57.13L378-346.7l383.43-383.43L818.57-673z'/%3E%3C/svg%3E\")\n\t\t\t\tno-repeat center / 24px 24px\n\t\t);\n\t}\n\n\t:host([active][complete]) {\n\t\t--_sds-stepper-step-counter-mask-background-color: var(--sds-stepper-step-counter-background-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));\n\t}\n\n\t:host(:not([active]):not([interactive])) {\n\t\t--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, none);\n\t\t--_sds-stepper-step-counter-background-color: var(--sds-stepper-step-counter-background-color, transparent);\n\t\t--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-neutral-border-strong));\n\t\t--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-neutral-text-default));\n\t}\n`;\n"]}