@skf-design-system/ui-components 1.0.0-alpha.34 → 1.0.0-alpha.36

package/dist/components/select/select.component.js

@@ -1,28 +1,30 @@
-import { computePosition as v, flip as f, shift as _, offset as g } from "@floating-ui/dom";
-import { FormBase as b } from "../../internal/components/formBase.js";
-import { PopoverController as y } from "../../internal/controllers/popover.controller.js";
-import { findMatchingTags as O } from "../../internal/helpers/findMatchingTags.js";
-import { hintSeverity as x } from "../../internal/helpers/hintSeverity.js";
-import { raiseError as w } from "../../internal/helpers/raiseError.js";
-import { watch as $ } from "../../internal/helpers/watch.js";
+import { SkfSelectOptionGroup as v } from "./select-option-group.component.js";
+import "../tag/tag.js";
+import { computePosition as _, flip as g, shift as b, offset as y } from "@floating-ui/dom";
+import { FormBase as O } from "../../internal/components/formBase.js";
+import "../../internal/components/hint/hint.js";
+import { PopoverController as x } from "../../internal/controllers/popover.controller.js";
+import { findMatchingTags as w } from "../../internal/helpers/findMatchingTags.js";
+import { hintSeverity as S } from "../../internal/helpers/hintSeverity.js";
+import { raiseError as $ } from "../../internal/helpers/raiseError.js";
+import { watch as f } from "../../internal/helpers/watch.js";
 import { Asterisk as V } from "../../internal/templates/asterisk.js";
-import S from "../../styles/component.styles.js";
-import { html as n, nothing as C } from "lit";
-import { property as o, state as h, query as p } from "lit/decorators.js";
-import { classMap as E } from "lit/directives/class-map.js";
+import { componentStyles as C } from "../../styles/component.styles.js";
+import { nothing as E, html as n } from "lit";
+import { property as o, state as h, query as p, queryAssignedElements as L } from "lit/decorators.js";
+import { classMap as k } from "lit/directives/class-map.js";
 import { ifDefined as m } from "lit/directives/if-defined.js";
-import "../../internal/components/hint/hint.js";
-import "../tag/tag.js";
-import { GlobalClickController as k, KeyboardNavigationController as L, DeveloperFeedbackController as A } from "./select.controllers.js";
-import { styles as P } from "./select.styles.js";
-var T = Object.defineProperty, D = Object.getOwnPropertyDescriptor, s = (u, t, e, l) => {
-  for (var a = l > 1 ? void 0 : l ? D(t, e) : t, r = u.length - 1, d; r >= 0; r--)
-    (d = u[r]) && (a = (l ? d(t, e, a) : d(a)) || a);
-  return l && a && T(t, e, a), a;
+import { SkfSelectOption as A } from "./select-option.component.js";
+import { GlobalClickController as P, KeyboardNavigationController as T, DeveloperFeedbackController as D } from "./select.controllers.js";
+import { styles as F } from "./select.styles.js";
+var U = Object.defineProperty, M = Object.getOwnPropertyDescriptor, s = (u, t, e, l) => {
+  for (var r = l > 1 ? void 0 : l ? M(t, e) : t, a = u.length - 1, d; a >= 0; a--)
+    (d = u[a]) && (r = (l ? d(t, e, r) : d(r)) || r);
+  return l && r && U(t, e, r), r;
 };
-const c = class c extends b {
+const c = class c extends O {
   constructor() {
-    super(), this.selectDelay = 200, this._optionsList = [], this.buttonLabel = "Select an option", this.size = "md", this._expanded = !1, this._invalid = !1, this.globalClickController = new k(this), this.keyboardNavController = new L(this), this.developerFeedbackController = new A(this), this.popoverController = new y(this), this._handleOptionSelected = (t) => {
+    super(), this.selectDelay = 200, this._optionsList = [], this.buttonLabel = "Select an option", this.hideLabel = !1, this.hideTags = !1, this.multiple = !1, this.showValid = !1, this.size = "md", this._expanded = !1, this._invalid = !1, this.globalClickController = new P(this), this.keyboardNavController = new T(this), this.developerFeedbackController = new D(this), this.popoverController = new x(this), this._handleOptionSelected = (t) => {
       this._pristine = !1;
       const e = this._selectedOptions.length > 0;
       this.setFormValue(e ? this.selectedValues.join(",") : null), this._updateState(t);
@@ -33,9 +35,9 @@ const c = class c extends b {
         this.$popover.style.setProperty("--select-width", `${String(this.offsetWidth)}px`);
       }, 50);
     }, this.reposition = async () => {
-      const { x: t, y: e } = await v(this.$anchor, this.$popover, {
+      const { x: t, y: e } = await _(this.$anchor, this.$popover, {
         placement: "bottom",
-        middleware: [f(), _({ padding: 5 }), g(2)],
+        middleware: [g(), b({ padding: 5 }), y(2)],
         strategy: "fixed"
       });
       Object.assign(this.$popover.style, {
@@ -68,7 +70,7 @@ const c = class c extends b {
         (e || l !== t) && l.removeAttribute("selected");
       });
     }, this._handleSlotChange = () => {
-      this._collectSlotOptionTags(), this._validateInput();
+      this._handleSizeUpdate(), this._collectSlotOptionTags(), this._validateInput();
     }, this._computeVisibleValue = () => {
       var t, e;
       return (t = this.$selectedValue) == null || t.classList.add("contains-meta-info"), this._selectedOptions.length > 1 ? `(${String(this._selectedOptions.length)} items selected)` : this.value ? ((e = this.$selectedValue) == null || e.classList.remove("contains-meta-info"), this.value) : this.buttonLabel;
@@ -89,8 +91,12 @@ const c = class c extends b {
     return this._selectedOptions.map((t) => t.textContent ?? "");
   }
   set value(t) {
-    const e = t.split(",").map((l) => l.trim());
-    this._selectedOptions = this._optionsList.filter((l) => e.includes(l.value.trim()));
+    let e = [];
+    this.multiple ? e = t.split(",").map((l) => l.toLowerCase().trim()) : e = [t.toLowerCase().trim()], this._selectedOptions = this._optionsList.filter(
+      (l) => e.includes(l.value.toLowerCase().trim())
+    ), this._optionsList.forEach((l) => {
+      l.selected && (l.setSelectedDiscrete = !1);
+    }), this._selectedOptions.forEach((l) => l.setSelectedDiscrete = !0), this._setValue();
   }
   get value() {
     return this._selectedOptions.length ? this._selectedOptions.length === 1 ? this._selectedOptions[0].value.trim() : this._selectedOptions.map((t) => t.value.trim()).join(",") : "";
@@ -121,18 +127,23 @@ const c = class c extends b {
   }
   firstUpdated() {
     var t;
-    this.addEventListener("skf-select-option:select", this._handleOptionSelected), (t = this._internals.form) == null || t.addEventListener("reset", this._handleReset), this.onUpdateComplete(), this._validateInput();
+    this.addEventListener("skf-select-option-select", this._handleOptionSelected), (t = this._internals.form) == null || t.addEventListener("reset", this._handleReset), this.onUpdateComplete(), this._validateInput();
+  }
+  _handleSizeUpdate() {
+    this._slottedItems.forEach((t) => {
+      (t instanceof A || t instanceof v) && (t.small = this.size === "sm");
+    });
   }
   handleExpandedChange() {
     this._expanded ? (this.$popover.togglePopover(this._expanded), this.popoverController.start()) : (this.$popover.togglePopover(this._expanded), this.popoverController.stop().catch((t) => {
       console.error(t);
-    })), this.emit("skf-select:dropdown", { detail: { expanded: this._expanded } });
+    })), this.emit("skf-select-dropdown", { detail: { expanded: this._expanded } });
   }
   attributeChangedCallback(t, e, l) {
     if (super.attributeChangedCallback(t, e, l), t === "custom-invalid")
       if (typeof l == "string") {
-        const r = this.withFallback(l);
-        this._pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, r), this.checkValidity();
+        const a = this.withFallback(l);
+        this._pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, a), this.checkValidity();
       } else
         this.setValidity({}), this._validateInput();
   }
@@ -159,7 +170,7 @@ const c = class c extends b {
   /** @internal */
   /** Filter out elements other than skf-select-option and store in this._optionsList */
   _collectSlotOptionTags() {
-    this._optionsList = O(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), w({
+    this._optionsList = w(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), $({
       assert: this._optionsList.length > 0,
       reason: "no-children",
       replaceStrings: [this.localName, "skf-select-option"]
@@ -173,14 +184,14 @@ const c = class c extends b {
       this._invalid = !0;
       return;
     } else if (t) {
-      const r = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : "Please select an option";
-      this.setValidity({ valueMissing: !0 }, String(r)), this._pristine || (this._invalid = !0);
+      const a = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : "Please select an option";
+      this.setValidity({ valueMissing: !0 }, String(a)), this._pristine || (this._invalid = !0);
     } else if (e) {
-      const r = this.hasAttribute("data-rangeunderflow") ? this.getAttribute("data-rangeunderflow") : `Please select minimum ${String(this.min)} options`;
-      this.setValidity({ rangeUnderflow: !0 }, String(r)), this._pristine || (this._invalid = !0);
+      const a = this.hasAttribute("data-rangeunderflow") ? this.getAttribute("data-rangeunderflow") : `Please select minimum ${String(this.min)} options`;
+      this.setValidity({ rangeUnderflow: !0 }, String(a)), this._pristine || (this._invalid = !0);
     } else if (l) {
-      const r = this.hasAttribute("data-rangeoverflow") ? this.getAttribute("data-rangeoverflow") : `Please select maximum ${String(this.max)} options`;
-      this.setValidity({ rangeOverflow: !0 }, String(r)), this._pristine || (this._invalid = !0);
+      const a = this.hasAttribute("data-rangeoverflow") ? this.getAttribute("data-rangeoverflow") : `Please select maximum ${String(this.max)} options`;
+      this.setValidity({ rangeOverflow: !0 }, String(a)), this._pristine || (this._invalid = !0);
     } else
       this.setValidity({}), !this._pristine && this.showValid && this.setAttribute("valid", "true");
   }
@@ -199,16 +210,15 @@ const c = class c extends b {
 						aria-expanded=${this._expanded}
 						aria-invalid=${this._invalid}
 						aria-haspopup="listbox"
-						class="skf-icon-host"
 						id="select-button"
 						role="combobox"
 					>
 						<span
 							id="selected-value"
-							class=${E({ "selected-value": !0, "contains-meta-info": !this.value })}>
+							class=${k({ "selected-value": !0, "contains-meta-info": !this.value })}>
 							${this._computeVisibleValue()}
 						</span>
-						<skf-icon class="arrow" name="chevronDown"></skf-icon>
+						<skf-icon class="arrow" data-color="custom" name="chevronDown"></skf-icon>
 					</button>
 				</label>
 				<div aria-multiselectable=${m(this.multiple && !0)} id="select-dropdown" popover role="listbox">
@@ -230,14 +240,15 @@ const c = class c extends b {
 										`
     )}
 								</div>
-							` : C}
+							` : E}
 				${this.hint && n`
 						<skf-hint
+							?disabled=${this.disabled}
 							aria-live=${this._invalid ? "assertive" : "polite"}
 							id="hint"
-							severity=${m(x(this.severity, this._invalid))}
+							severity=${m(S(this._invalid, this.severity))}
 						>
-							${this.customInvalid ? this.customInvalid : this.hint}
+							${this.customInvalid ?? this.hint}
 						</skf-hint>
 					`}
 				</div>
@@ -245,7 +256,7 @@ const c = class c extends b {
 		`;
   }
 };
-c.styles = [S, P];
+c.styles = [C, F];
 let i = c;
 s([
   o({ type: String, reflect: !0, attribute: "button-label" })
@@ -317,7 +328,13 @@ s([
   p("#select-dropdown")
 ], i.prototype, "$popover", 2);
 s([
-  $("_expanded", { afterUpdate: !0 })
+  L()
+], i.prototype, "_slottedItems", 2);
+s([
+  f("size", { waitUntilFirstUpdate: !0 })
+], i.prototype, "_handleSizeUpdate", 1);
+s([
+  f("_expanded", { afterUpdate: !0 })
 ], i.prototype, "handleExpandedChange", 1);
 export {
   i as SkfSelect

package/dist/components/select/select.controllers.d.ts

@@ -1,10 +1,21 @@
-import type { SkfSelectOption } from '../select-option/select-option.component.js';
-import type { ReactiveController } from 'lit';
-import type { SkfSelect } from './select.component.js';
-type ControllerHost = SkfSelect;
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { SkfSelectOption } from './select-option.component.js';
+/**
+ * Workaround for storybook helper not being able to import types
+ * E.g type ControllerHost = SkfSelect;
+ */
+interface ControllerHostProps {
+    _expanded: boolean;
+    _optionsList: SkfSelectOption[];
+    localName: keyof HTMLElementTagNameMap;
+    min: number;
+    max: number;
+    multiple: boolean;
+    hideTags: boolean;
+}
 export declare class GlobalClickController implements ReactiveController {
-    host: ControllerHost;
-    constructor(host: ControllerHost);
+    host?: ReactiveControllerHost & Partial<ControllerHostProps>;
+    constructor(host: ReactiveControllerHost);
     hostDisconnected(): void;
     hostUpdated(): void;
     _globalClickHandler: (event: MouseEvent) => void;
@@ -12,9 +23,9 @@ export declare class GlobalClickController implements ReactiveController {
     disableGlobalClickDetection(): void;
 }
 export declare class KeyboardNavigationController implements ReactiveController {
-    host: ControllerHost;
+    host?: ReactiveControllerHost & Partial<ControllerHostProps>;
     _listenerActivated: boolean;
-    constructor(host: ControllerHost);
+    constructor(host: ReactiveControllerHost);
     hostDisconnected(): void;
     hostUpdated(): void;
     setupKeyboardListener(): void;
@@ -26,8 +37,8 @@ export declare class KeyboardNavigationController implements ReactiveController
     get _selectableOptions(): SkfSelectOption[];
 }
 export declare class DeveloperFeedbackController implements ReactiveController {
-    host: ControllerHost;
-    constructor(host: ControllerHost);
+    host?: ReactiveControllerHost & Partial<ControllerHostProps>;
+    constructor(host: ReactiveControllerHost);
     hostConnected(): void;
     _badAttributeCombinationWarning(): void;
 }

package/dist/components/select/select.controllers.js

@@ -1,9 +1,10 @@
-import { raiseError as l } from "../../internal/helpers/raiseError.js";
+import { raiseError as a } from "../../internal/helpers/raiseError.js";
 class d {
   constructor(t) {
     this._globalClickHandler = (e) => {
-      e.target.closest(this.host.localName) || (this.host._expanded = !1);
-    }, this.host = t, t.addController(this);
+      var s;
+      !((s = this.host) != null && s.localName) || e.target.closest(this.host.localName) || (this.host._expanded = !1);
+    }, (this.host = t).addController(this);
   }
   // hostConnected() {
   // 	this.enableGlobalClickDetection();
@@ -12,7 +13,8 @@ class d {
     this.disableGlobalClickDetection();
   }
   hostUpdated() {
-    this.host._expanded ? this.enableGlobalClickDetection() : this.disableGlobalClickDetection();
+    var t;
+    (t = this.host) != null && t._expanded ? this.enableGlobalClickDetection() : this.disableGlobalClickDetection();
   }
   enableGlobalClickDetection() {
     document.addEventListener("click", this._globalClickHandler);
@@ -35,18 +37,19 @@ class p {
           e.preventDefault(), this._selectFocusedOption(e.target);
           break;
         case "Escape":
-          e.preventDefault(), this.host._expanded = !1, setTimeout(() => {
+          e.preventDefault(), this.host && (this.host._expanded = !1), setTimeout(() => {
             this.host.focus();
           });
           break;
       }
-    }, this.host = t, t.addController(this), this._listenerActivated = !1;
+    }, (this.host = t).addController(this), this._listenerActivated = !1;
   }
   hostDisconnected() {
     this.removeKeyboardListener();
   }
   hostUpdated() {
-    this.host._expanded && !this._listenerActivated && this.setupKeyboardListener(), !this.host._expanded && this._listenerActivated && this.removeKeyboardListener();
+    var t, e;
+    (t = this.host) != null && t._expanded && !this._listenerActivated && this.setupKeyboardListener(), !((e = this.host) != null && e._expanded) && this._listenerActivated && this.removeKeyboardListener();
   }
   setupKeyboardListener() {
     this._listenerActivated = !0, this.host.addEventListener("keydown", this._handleKeyDown);
@@ -61,47 +64,50 @@ class p {
     });
   }
   _focusSiblingOption(t) {
-    const e = (n) => n === document.activeElement, s = this._selectableOptions.find((n) => e(n));
-    if (!s) {
+    const e = (l) => l === document.activeElement, i = this._selectableOptions.find((l) => e(l));
+    if (!i) {
       this._focusFirstOption();
       return;
     }
-    const r = this._selectableOptions.indexOf(s);
-    let i = r - 1, o = r + 1;
-    i < 0 && (i = this._selectableOptions.length - 1), o >= this._selectableOptions.length && (o = 0);
-    const h = this._selectableOptions[t === "next" ? o : i];
-    s.blur(), h.focus();
+    const s = this._selectableOptions.indexOf(i);
+    let o = s - 1, n = s + 1;
+    o < 0 && (o = this._selectableOptions.length - 1), n >= this._selectableOptions.length && (n = 0);
+    const h = this._selectableOptions[t === "next" ? n : o];
+    i.blur(), h.focus();
   }
   _selectFocusedOption(t) {
     t.selected = !0;
   }
   get _selectableOptions() {
-    return this.host._optionsList.filter((t) => !t.disabled);
+    return !this.host || !this.host._optionsList ? [] : this.host._optionsList.filter((t) => !t.disabled);
   }
 }
 class b {
   constructor(t) {
-    this.host = t, t.addController(this);
+    (this.host = t).addController(this);
   }
   hostConnected() {
     this._badAttributeCombinationWarning();
   }
   _badAttributeCombinationWarning() {
-    l({
+    if (!this.host) return;
+    const t = this.host.localName ?? "never";
+    a({
       assert: (this.host.min ?? 0) <= (this.host.max ?? 1 / 0),
       reason: "attribute-mismatch",
-      replaceStrings: [this.host.localName, "min", "smaller than max"]
-    }), l({
+      replaceStrings: [t, "min", "smaller than max"]
+    }), a({
       assert: (
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         (this.host.min || this.host.max) && this.host.multiple || !(this.host.min && this.host.max)
       ),
       reason: "attribute-mismatch",
-      replaceStrings: [this.host.localName, "min or max", "together with multiple"]
-    }), l({
-      assert: (this.host.hideTags && this.host.multiple) ?? !this.host.hideTags,
+      replaceStrings: [t, "min or max", "together with multiple"]
+    }), a({
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      assert: this.host.hideTags && this.host.multiple || !this.host.hideTags,
       reason: "attribute-mismatch",
-      replaceStrings: [this.host.localName, "hide-tags", "together with multiple"]
+      replaceStrings: [t, "hide-tags", "together with multiple"]
     });
   }
 }

package/dist/components/select/stories/select.stories.icons.d.ts

@@ -0,0 +1,7 @@
+export declare const icons: {
+    dummy1: import("lit").TemplateResult<1>;
+    dummy4: import("lit").TemplateResult<1>;
+    dummy5: import("lit").TemplateResult<1>;
+    dummy6: import("lit").TemplateResult<1>;
+    dummy7: import("lit").TemplateResult<1>;
+};

package/dist/components/{stepper-item → stepper}/stepper-item.component.js

@@ -2,34 +2,34 @@ var v = (e) => {
   throw TypeError(e);
 };
 var u = (e, i, t) => i.has(e) || v("Cannot " + t);
-var d = (e, i, t) => (u(e, i, "read from private field"), t ? t.call(e) : i.get(e)), _ = (e, i, t) => i.has(e) ? v("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, t), r = (e, i, t, s) => (u(e, i, "write to private field"), s ? s.call(e, t) : i.set(e, t), t);
+var d = (e, i, t) => (u(e, i, "read from private field"), t ? t.call(e) : i.get(e)), _ = (e, i, t) => i.has(e) ? v("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, t), r = (e, i, t, a) => (u(e, i, "write to private field"), a ? a.call(e, t) : i.set(e, t), t);
 import "../icon/icon.js";
-import { SkfElement as b } from "../../internal/components/skf-element.js";
-import { watch as g } from "../../internal/helpers/watch.js";
-import C from "../../styles/component.styles.js";
+import { SkfElement as g } from "../../internal/components/skf-element.js";
+import { watch as C } from "../../internal/helpers/watch.js";
+import { componentStyles as x } from "../../styles/component.styles.js";
 import "lit";
-import { property as y, state as c } from "lit/decorators.js";
+import { property as b, state as c } from "lit/decorators.js";
 import { classMap as $ } from "lit/directives/class-map.js";
-import { ifDefined as x } from "lit/directives/if-defined.js";
-import { literal as w, unsafeStatic as U, html as S } from "lit/static-html.js";
-import { styles as I } from "./stepper-item.styles.js";
-var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (e, i, t, s) => {
-  for (var p = s > 1 ? void 0 : s ? P(i, t) : i, h = e.length - 1, m; h >= 0; h--)
-    (m = e[h]) && (p = (s ? m(i, t, p) : m(p)) || p);
-  return s && p && O(i, t, p), p;
-}, o, n;
-const f = class f extends b {
+import { ifDefined as w } from "lit/directives/if-defined.js";
+import { literal as S, html as y } from "lit/static-html.js";
+import { styles as U } from "./stepper-item.styles.js";
+var I = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (e, i, t, a) => {
+  for (var p = a > 1 ? void 0 : a ? O(i, t) : i, h = e.length - 1, m; h >= 0; h--)
+    (m = e[h]) && (p = (a ? m(i, t, p) : m(p)) || p);
+  return a && p && I(i, t, p), p;
+}, l, n;
+const f = class f extends g {
   constructor() {
     super();
-    _(this, o);
+    _(this, l);
     _(this, n);
-    r(this, o, !1), r(this, n, !1), this.completed = !1, this._index = 0, this._linear = !1, this._handleClick = () => {
+    r(this, l, !1), r(this, n, !1), this.completed = !1, this._index = 0, this._linear = !1, this._handleClick = () => {
       this._linear || (this.state = "active");
     }, this.role = "listitem";
   }
   set _setInternalState(t) {
-    r(this, o, !0), this._uiState = t, t === "active" || t === "activeCompleted" ? this.state = t === "active" ? "active" : "completed" : this.state = void 0, setTimeout(() => {
-      r(this, o, !1);
+    r(this, l, !0), this._uiState = t, t === "active" || t === "activeCompleted" ? this.state = t === "active" ? "active" : "completed" : this.state = void 0, setTimeout(() => {
+      r(this, l, !1);
     });
   }
   get _setInternalState() {
@@ -44,8 +44,8 @@ const f = class f extends b {
       this._setInternalState = "activeCompleted";
       return;
     }
-    if (d(this, o)) {
-      r(this, o, !1);
+    if (d(this, l)) {
+      r(this, l, !1);
       return;
     }
     r(this, n, ["active", "completed"].includes(String(this.state)) && !["active", "activeCompleted"].includes(String(this._uiState))), this._emitUpdate();
@@ -60,9 +60,9 @@ const f = class f extends b {
     }), r(this, n, !1);
   }
   render() {
-    const t = this._linear ? "div" : "button", s = w`${U(t)}`;
-    return S`
-			<${s}
+    const t = this._linear ? S`div` : S`button`;
+    return y`
+			<${t}
 				@click=${this._handleClick}
 				?disabled=${this._disabled}
 				class=${$({
@@ -72,42 +72,42 @@ const f = class f extends b {
       "stepper-item--completed": this._uiState === "completed",
       "stepper-item--enabled": this._uiState === "enabled"
     })}
-				type=${x(t == "button" ? "button" : void 0)}
+				type=${w(this._linear ? void 0 : "button")}
 			>
 				<div class="stepper-item__circle">
-					${this._uiState === "activeCompleted" ? S`<skf-icon color="inverse" name="check"></skf-icon>` : this._index}
+					${this._uiState === "activeCompleted" ? y`<skf-icon color="inverse" name="check"></skf-icon>` : this._index}
 				</div>
 				<slot class="stepper-item__label"></slot>
-			</${s}>
+			</${t}>
 		`;
   }
 };
-o = new WeakMap(), n = new WeakMap(), f.styles = [C, I];
-let a = f;
-l([
-  y({ reflect: !0 })
-], a.prototype, "state", 2);
-l([
-  y({ type: Boolean })
-], a.prototype, "completed", 2);
-l([
+l = new WeakMap(), n = new WeakMap(), f.styles = [x, U];
+let s = f;
+o([
+  b({ reflect: !0 })
+], s.prototype, "state", 2);
+o([
+  b({ type: Boolean })
+], s.prototype, "completed", 2);
+o([
   c()
-], a.prototype, "_disabled", 2);
-l([
+], s.prototype, "_disabled", 2);
+o([
   c()
-], a.prototype, "_index", 2);
-l([
+], s.prototype, "_index", 2);
+o([
   c()
-], a.prototype, "_linear", 2);
-l([
+], s.prototype, "_linear", 2);
+o([
   c()
-], a.prototype, "_uiState", 2);
-l([
+], s.prototype, "_uiState", 2);
+o([
   c()
-], a.prototype, "_setInternalState", 1);
-l([
-  g("state")
-], a.prototype, "_handleState", 1);
+], s.prototype, "_setInternalState", 1);
+o([
+  C("state")
+], s.prototype, "_handleState", 1);
 export {
-  a as SkfStepperItem
+  s as SkfStepperItem
 };

package/dist/components/{stepper-item → stepper}/stepper-item.d.ts

@@ -1,5 +1,5 @@
-import { SkfStepperItem } from './stepper-item.component';
-export * from './stepper-item.component';
+import { SkfStepperItem } from './stepper-item.component.js';
+export * from './stepper-item.component.js';
 export default SkfStepperItem;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/stepper/stepper-item.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/stepper/stepper.component.d.ts

@@ -1,14 +1,14 @@
-import type { SkfStepperItem } from '../stepper-item/stepper-item.component.js';
 import { SkfElement } from '../../internal/components/skf-element';
 import { type CSSResultGroup } from 'lit';
+import type { SkfStepperItem } from './stepper-item.component.js';
 /**
  * The `<skf-stepper>` is a component that displays a list of actions or options.
  *
- * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/842a0a-stepper) for design principles
  *
  * @slot - One or more `<skf-stepper-item>`
  *
- * @event skf-stepper-item-select - Dispatched when the stepper item is selected
+ * @event {CustomEvent} skf-stepper-item-select - Dispatched when the stepper item is selected
  *
  * @tagname skf-stepper
  */
@@ -27,6 +27,7 @@ export declare class SkfStepper extends SkfElement {
     _handleActiveIndexChanged(): void;
     /** @internal */
     _handleLinearMode(): void;
+    /** @internal */
     private _handleSelected;
     /** @internal */
     private _resetActive;

package/dist/components/stepper/stepper.component.js

@@ -2,30 +2,30 @@ var p = (t) => {
   throw TypeError(t);
 };
 var m = (t, i, e) => i.has(t) || p("Cannot " + e);
-var _ = (t, i, e) => (m(t, i, "read from private field"), e ? e.call(t) : i.get(t)), f = (t, i, e) => i.has(t) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), l = (t, i, e, s) => (m(t, i, "write to private field"), s ? s.call(t, e) : i.set(t, e), e);
+var _ = (t, i, e) => (m(t, i, "read from private field"), e ? e.call(t) : i.get(t)), v = (t, i, e) => i.has(t) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), l = (t, i, e, s) => (m(t, i, "write to private field"), s ? s.call(t, e) : i.set(t, e), e);
 import { SkfElement as I } from "../../internal/components/skf-element.js";
-import { watch as v } from "../../internal/helpers/watch.js";
-import u from "../../styles/component.styles.js";
+import { watch as f } from "../../internal/helpers/watch.js";
+import { componentStyles as u } from "../../styles/component.styles.js";
 import { html as g } from "lit";
 import { property as x, queryAssignedElements as y } from "lit/decorators.js";
 import { classMap as A } from "lit/directives/class-map.js";
 import { stepperState as C } from "./stepper.helpers.js";
 import { styles as b } from "./stepper.styles.js";
 var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, h = (t, i, e, s) => {
-  for (var n = s > 1 ? void 0 : s ? S(i, e) : i, r = t.length - 1, d; r >= 0; r--)
-    (d = t[r]) && (n = (s ? d(i, e, n) : d(n)) || n);
+  for (var n = s > 1 ? void 0 : s ? S(i, e) : i, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (n = (s ? o(i, e, n) : o(n)) || n);
   return s && n && E(i, e, n), n;
-}, o;
+}, d;
 const c = class c extends I {
   constructor() {
     super();
-    f(this, o);
-    l(this, o, !1), this.activeIndex = -1, this.linear = !1, this._handleSelected = (e) => {
-      if (!_(this, o)) return;
-      const { item: s, triggerActiveIndexUpdate: n } = e.detail, r = [...this._items ?? []].findIndex((d) => d === s);
+    v(this, d);
+    l(this, d, !1), this.activeIndex = -1, this.linear = !1, this._handleSelected = (e) => {
+      if (!_(this, d)) return;
+      const { item: s, triggerActiveIndexUpdate: n } = e.detail, r = [...this._items ?? []].findIndex((o) => o === s);
       r === this.activeIndex ? this._handleActiveIndexChanged() : (n && this._resetActive(r), this.activeIndex = r);
     }, this._handleSlotChanged = () => {
-      l(this, o, !0), this.activeIndex = this._getCurrentActiveIndex();
+      l(this, d, !0), this.activeIndex = this._getCurrentActiveIndex();
     }, this.addEventListener("skf-stepper-item-select", this._handleSelected);
   }
   firstUpdated() {
@@ -69,10 +69,10 @@ const c = class c extends I {
 		`;
   }
 };
-o = new WeakMap(), c.styles = [u, b];
+d = new WeakMap(), c.styles = [u, b];
 let a = c;
 h([
-  x({ type: Number })
+  x({ type: Number, attribute: "active-index" })
 ], a.prototype, "activeIndex", 2);
 h([
   x({ type: Boolean })
@@ -81,10 +81,10 @@ h([
   y()
 ], a.prototype, "_items", 2);
 h([
-  v("activeIndex")
+  f("activeIndex")
 ], a.prototype, "_handleActiveIndexChanged", 1);
 h([
-  v("linear")
+  f("linear")
 ], a.prototype, "_handleLinearMode", 1);
 export {
   a as SkfStepper

package/dist/components/stepper/stepper.d.ts

@@ -1,5 +1,5 @@
-import { SkfStepper } from './stepper.component';
-export * from './stepper.component';
+import { SkfStepper } from './stepper.component.js';
+export * from './stepper.component.js';
 export default SkfStepper;
 declare global {
     interface HTMLElementTagNameMap {