@skf-design-system/ui-components 1.0.0-beta.7 → 1.0.1-beta.0

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

@@ -1,26 +1,28 @@
 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 { findMatchingTags as y } from "../../internal/helpers/findMatchingTags.js";
-import { hintSeverity as O } from "../../internal/helpers/hintSeverity.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 { Asterisk as x } from "../../internal/templates/asterisk.js";
-import $ from "../../styles/component.styles.js";
-import { html as h, nothing as V } from "lit";
-import { property as o, state as d, query as p } from "lit/decorators.js";
-import { classMap as S } from "lit/directives/class-map.js";
+import { watch as $ } 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 { ifDefined as m } from "lit/directives/if-defined.js";
 import "../../internal/components/hint/hint.js";
 import "../tag/tag.js";
-import { ScrollController as C, ResizeController as k, GlobalClickController as L, KeyboardNavigationController as A, DeveloperFeedbackController as E } from "./select.controllers.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, l = (u, t, e, i) => {
-  for (var r = i > 1 ? void 0 : i ? D(t, e) : t, n = u.length - 1, a; n >= 0; n--)
-    (a = u[n]) && (r = (i ? a(t, e, r) : a(r)) || r);
-  return i && r && T(t, e, r), r;
+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;
 };
 const c = class c extends b {
   constructor() {
-    super(), this.selectDelay = 200, this._optionsList = [], this.buttonLabel = "Select an option", this.size = "md", this._expanded = !1, this._invalid = !1, this.scrollController = new C(this), this.resizeController = new k(this), this.globalClickController = new L(this), this.keyboardNavController = new A(this), this.developerFeedbackController = new E(this), this._handleOptionSelected = (t) => {
+    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) => {
       this._pristine = !1;
       const e = this._selectedOptions.length > 0;
       this.setFormValue(e ? this.selectedValues.join(",") : null), this._updateState(t);
@@ -28,26 +30,20 @@ const c = class c extends b {
       this.emitEvent("reset"), this._resetSelectedOptions();
     }, this._updateWidth = () => {
       setTimeout(() => {
-        var t;
-        (t = this.$dropdown) == null || t.style.setProperty("--select-width", `${String(this.offsetWidth)}px`);
+        this.$popover.style.setProperty("--select-width", `${String(this.offsetWidth)}px`);
       }, 50);
-    }, this._managePopover = () => ({ close: () => {
-      var i;
-      (i = this.$dropdown) == null || i.hidePopover();
-    }, open: () => {
-      const i = this.$selectBtn, r = this.$dropdown;
-      !i || !r || (r.showPopover(), v(i, r, {
+    }, this.reposition = async () => {
+      const { x: t, y: e } = await v(this.$anchor, this.$popover, {
         placement: "bottom",
-        middleware: [f(), _({ padding: 5 }), g(2)]
-      }).then(({ x: n, y: a }) => {
-        Object.assign(r.style, {
-          left: `${String(n)}px`,
-          top: `${String(Math.round(a - window.scrollY))}px`
-        });
-      }).catch((n) => {
-        console.error(n);
-      }));
-    } }), this._handleDropdownToggle = (t) => {
+        middleware: [f(), _({ padding: 5 }), g(2)],
+        strategy: "fixed"
+      });
+      Object.assign(this.$popover.style, {
+        left: `${String(t)}px`,
+        top: `${String(e)}px`,
+        width: `${String(this.$anchor.offsetWidth)}px`
+      });
+    }, this._handleDropdownToggle = (t) => {
       t.stopPropagation(), this._expanded = !this._expanded;
     }, this._setValue = async () => new Promise((t) => {
       switch (!0) {
@@ -68,8 +64,8 @@ const c = class c extends b {
       });
     }), this._resetSelectedOptions = (t) => {
       const e = !t;
-      this._optionsList.forEach((i) => {
-        (e || i !== t) && i.removeAttribute("selected");
+      this._optionsList.forEach((l) => {
+        (e || l !== t) && l.removeAttribute("selected");
       });
     }, this._handleSlotChange = () => {
       this._collectSlotOptionTags(), this._validateInput();
@@ -93,8 +89,8 @@ const c = class c extends b {
     return this._selectedOptions.map((t) => t.textContent ?? "");
   }
   set value(t) {
-    const e = t.split(",").map((i) => i.trim());
-    this._selectedOptions = this._optionsList.filter((i) => e.includes(i.value.trim()));
+    const e = t.split(",").map((l) => l.trim());
+    this._selectedOptions = this._optionsList.filter((l) => e.includes(l.value.trim()));
   }
   get value() {
     return this._selectedOptions.length ? this._selectedOptions.length === 1 ? this._selectedOptions[0].value.trim() : this._selectedOptions.map((t) => t.value.trim()).join(",") : "";
@@ -127,18 +123,16 @@ const c = class c extends b {
     var t;
     this.addEventListener("skf-select-option:select", this._handleOptionSelected), (t = this._internals.form) == null || t.addEventListener("reset", this._handleReset), this.onUpdateComplete(), this._validateInput();
   }
-  updated(t) {
-    if (t.has("_expanded")) {
-      const e = !!t.get("_expanded") === this._expanded;
-      if (this.emit("skf-select:dropdown", { detail: { expanded: this._expanded } }), e) return;
-      this._expanded ? this._managePopover().open() : this._managePopover().close();
-    }
+  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 } });
   }
-  attributeChangedCallback(t, e, i) {
-    if (super.attributeChangedCallback(t, e, i), t === "custom-invalid")
-      if (typeof i == "string") {
-        const n = this.withFallback(i);
-        this._pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, n), this.checkValidity();
+  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();
       } else
         this.setValidity({}), this._validateInput();
   }
@@ -153,8 +147,8 @@ const c = class c extends b {
         e.selected && (this.selectedOptions = [...this.selectedOptions, e]);
       });
     else {
-      const e = this._selectedOptions.length > 0, i = t.detail.value !== null;
-      e && (this._selectedOptions[0].setSelectedDiscrete = !1, this._selectedOptions = []), i && (this.selectedOptions = [t.target]);
+      const e = this._selectedOptions.length > 0, l = t.detail.value !== null;
+      e && (this._selectedOptions[0].setSelectedDiscrete = !1, this._selectedOptions = []), l && (this.selectedOptions = [t.target]);
     }
     this._setValue();
   }
@@ -165,7 +159,7 @@ const c = class c extends b {
   /** @internal */
   /** Filter out elements other than skf-select-option and store in this._optionsList */
   _collectSlotOptionTags() {
-    this._optionsList = y(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), w({
+    this._optionsList = O(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), w({
       assert: this._optionsList.length > 0,
       reason: "no-children",
       replaceStrings: [this.localName, "skf-select-option"]
@@ -174,29 +168,29 @@ const c = class c extends b {
   /** @internal */
   _validateInput() {
     this._invalid = !1;
-    const t = this.required && !this.selectedValues.length || this.min === 1, e = !!(this.min && this.selectedValues.length < this.min), i = !!(this.max && this.selectedValues.length > this.max);
+    const t = this.required && !this.selectedValues.length || this.min === 1, e = !!(this.min && this.selectedValues.length < this.min), l = !!(this.max && this.selectedValues.length > this.max);
     if (this._internals.validity.customError) {
       this._invalid = !0;
       return;
     } else if (t) {
-      const n = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : "Please select an option";
-      this.setValidity({ valueMissing: !0 }, String(n)), this._pristine || (this._invalid = !0);
+      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);
     } else if (e) {
-      const n = this.hasAttribute("data-rangeunderflow") ? this.getAttribute("data-rangeunderflow") : `Please select minimum ${String(this.min)} options`;
-      this.setValidity({ rangeUnderflow: !0 }, String(n)), this._pristine || (this._invalid = !0);
-    } else if (i) {
-      const n = this.hasAttribute("data-rangeoverflow") ? this.getAttribute("data-rangeoverflow") : `Please select maximum ${String(this.max)} options`;
-      this.setValidity({ rangeOverflow: !0 }, String(n)), this._pristine || (this._invalid = !0);
+      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);
+    } 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);
     } else
       this.setValidity({}), !this._pristine && this.showValid && this.setAttribute("valid", "true");
   }
   render() {
-    return h`
+    return n`
 			<div id="root">
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
 						${this.label}
-						${this.required ? x(this.requiredLabel) : null}
+						${this.required ? V(this.requiredLabel) : null}
 					</div>
 					<button
 						?disabled=${this.disabled}
@@ -211,7 +205,7 @@ const c = class c extends b {
 					>
 						<span
 							id="selected-value"
-							class=${S({ "selected-value": !0, "contains-meta-info": !this.value })}>
+							class=${E({ "selected-value": !0, "contains-meta-info": !this.value })}>
 							${this._computeVisibleValue()}
 						</span>
 						<skf-icon class="arrow" name="chevronDown"></skf-icon>
@@ -220,10 +214,10 @@ const c = class c extends b {
 				<div aria-multiselectable=${m(this.multiple && !0)} id="select-dropdown" popover role="listbox">
 					<slot @slotchange=${this._handleSlotChange}></slot>
 				</div>
-				${!this.hideTags && this.multiple && this.selectedOptions.length > 0 ? h`
+				${!this.hideTags && this.multiple && this.selectedOptions.length > 0 ? n`
 								<div id="tags">
 									${this.selectedOptions.map(
-      (t) => h`
+      (t) => n`
 											<skf-tag
 												style="${`view-transition-name: tag-${String(t.textContent).replace(/[^a-zA-Z]/g, "").toLowerCase()}`}"
 												removable
@@ -236,12 +230,12 @@ const c = class c extends b {
 										`
     )}
 								</div>
-							` : V}
-				${this.hint && h`
+							` : C}
+				${this.hint && n`
 						<skf-hint
 							aria-live=${this._invalid ? "assertive" : "polite"}
 							id="hint"
-							severity=${m(O(this.severity, this._invalid))}
+							severity=${m(x(this.severity, this._invalid))}
 						>
 							${this.customInvalid ? this.customInvalid : this.hint}
 						</skf-hint>
@@ -251,77 +245,80 @@ const c = class c extends b {
 		`;
   }
 };
-c.styles = [$, P];
-let s = c;
-l([
+c.styles = [S, P];
+let i = c;
+s([
   o({ type: String, reflect: !0, attribute: "button-label" })
-], s.prototype, "buttonLabel", 2);
-l([
+], i.prototype, "buttonLabel", 2);
+s([
   o({ attribute: "custom-invalid" })
-], s.prototype, "customInvalid", 2);
-l([
+], i.prototype, "customInvalid", 2);
+s([
   o({ type: Boolean, attribute: "hide-label" })
-], s.prototype, "hideLabel", 2);
-l([
+], i.prototype, "hideLabel", 2);
+s([
   o({ type: Boolean, reflect: !0, attribute: "hide-tags" })
-], s.prototype, "hideTags", 2);
-l([
+], i.prototype, "hideTags", 2);
+s([
   o()
-], s.prototype, "hint", 2);
-l([
+], i.prototype, "hint", 2);
+s([
   o({ type: Array, attribute: !1 })
-], s.prototype, "selectedValues", 1);
-l([
+], i.prototype, "selectedValues", 1);
+s([
   o({ type: Array, attribute: !1 })
-], s.prototype, "selectedOptionsText", 1);
-l([
+], i.prototype, "selectedOptionsText", 1);
+s([
   o({ reflect: !0 })
-], s.prototype, "label", 2);
-l([
+], i.prototype, "label", 2);
+s([
   o({ type: Number })
-], s.prototype, "max", 2);
-l([
+], i.prototype, "max", 2);
+s([
   o({ type: Number })
-], s.prototype, "min", 2);
-l([
+], i.prototype, "min", 2);
+s([
   o({ type: Boolean, reflect: !0 })
-], s.prototype, "multiple", 2);
-l([
+], i.prototype, "multiple", 2);
+s([
   o()
-], s.prototype, "name", 2);
-l([
+], i.prototype, "name", 2);
+s([
   o({ attribute: "required-label" })
-], s.prototype, "requiredLabel", 2);
-l([
+], i.prototype, "requiredLabel", 2);
+s([
   o()
-], s.prototype, "severity", 2);
-l([
+], i.prototype, "severity", 2);
+s([
   o({ type: Boolean, attribute: "show-valid" })
-], s.prototype, "showValid", 2);
-l([
+], i.prototype, "showValid", 2);
+s([
   o({ reflect: !0 })
-], s.prototype, "size", 2);
-l([
-  d()
-], s.prototype, "value", 1);
-l([
-  d()
-], s.prototype, "selectedOptions", 1);
-l([
-  d()
-], s.prototype, "_expanded", 2);
-l([
-  d()
-], s.prototype, "_invalid", 2);
-l([
+], i.prototype, "size", 2);
+s([
+  h()
+], i.prototype, "value", 1);
+s([
+  h()
+], i.prototype, "selectedOptions", 1);
+s([
+  h()
+], i.prototype, "_expanded", 2);
+s([
+  h()
+], i.prototype, "_invalid", 2);
+s([
   p("#select-button")
-], s.prototype, "$selectBtn", 2);
-l([
+], i.prototype, "$anchor", 2);
+s([
   p("#selected-value")
-], s.prototype, "$selectedValue", 2);
-l([
+], i.prototype, "$selectedValue", 2);
+s([
   p("#select-dropdown")
-], s.prototype, "$dropdown", 2);
+], i.prototype, "$popover", 2);
+s([
+  $("_expanded", { afterUpdate: !0 })
+], i.prototype, "handleExpandedChange", 1);
 export {
-  s as SkfSelect
+  i as SkfSelect
 };

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

@@ -2,31 +2,6 @@ import type { SkfSelectOption } from '../select-option/select-option.component.j
 import type { ReactiveController } from 'lit';
 import type { SkfSelect } from './select.component.js';
 type ControllerHost = SkfSelect;
-export declare class ScrollController implements ReactiveController {
-    _scrollHandler?: () => void;
-    host?: ControllerHost;
-    localExpanded: boolean;
-    constructor(host: ControllerHost);
-    hostDisconnected(): void;
-    hostUpdated(): void;
-    enableScrollDetection(): void;
-    disableScrollDetection(): void;
-    /** @internal */
-    _onScrollOutOfView(): void;
-    /** @internal */
-    _onScrollIntoView(): void;
-}
-export declare class ResizeController implements ReactiveController {
-    host: ControllerHost;
-    _resizeObserver?: ResizeObserver;
-    constructor(host: ControllerHost);
-    hostConnected(): void;
-    hostDisconnected(): void;
-    enableResizeObserver(): void;
-    disableResizeObserver(): void;
-    /** @internal */
-    _onResize: () => void;
-}
 export declare class GlobalClickController implements ReactiveController {
     host: ControllerHost;
     constructor(host: ControllerHost);

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

@@ -1,67 +1,9 @@
-import { raiseError as r } from "../../internal/helpers/raiseError.js";
+import { raiseError as l } from "../../internal/helpers/raiseError.js";
 class d {
-  constructor(e) {
-    this.localExpanded = !1, this.host = e, e.addController(this);
-  }
-  hostDisconnected() {
-    this.disableScrollDetection();
-  }
-  hostUpdated() {
-    var e, t, s;
-    ((e = this.host) == null ? void 0 : e._expanded) !== this.localExpanded && (this.localExpanded = !!((t = this.host) != null && t._expanded), (s = this.host) != null && s._expanded ? this.enableScrollDetection() : this.disableScrollDetection());
-  }
-  enableScrollDetection() {
-    if (this._scrollHandler = () => {
-      if (!this.host) return;
-      this.host._expanded = !1;
-      const t = this.host.getBoundingClientRect();
-      t.top < 0 || t.bottom > window.innerHeight || t.left < 0 || t.right > window.innerWidth ? this._onScrollOutOfView() : this._onScrollIntoView();
-    }, window.addEventListener("scroll", this._scrollHandler, !0), !this.host) return;
-    let e = this.host.parentElement;
-    for (; e; )
-      (e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth) && e.addEventListener("scroll", this._scrollHandler, !0), e = e.parentElement;
-  }
-  disableScrollDetection() {
-    if (!this._scrollHandler || (window.removeEventListener("scroll", this._scrollHandler, !0), !this.host)) return;
-    let e = this.host.parentElement;
-    for (; e; )
-      (e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth) && e.removeEventListener("scroll", this._scrollHandler, !0), e = e.parentElement;
-  }
-  /** @internal */
-  _onScrollOutOfView() {
-    this.host && (this.host._expanded = !1);
-  }
-  /** @internal */
-  _onScrollIntoView() {
-  }
-}
-class b {
-  constructor(e) {
-    this._onResize = () => {
-      this.host._expanded = !1;
-    }, this.host = e, e.addController(this);
-  }
-  hostConnected() {
-    this.enableResizeObserver();
-  }
-  hostDisconnected() {
-    this.disableResizeObserver();
-  }
-  enableResizeObserver() {
-    this._resizeObserver = new ResizeObserver(() => {
-      this.host._expanded = !1, this.host._updateWidth();
-    }), this._resizeObserver.observe(document.body), this._resizeObserver.observe(this.host);
-  }
-  disableResizeObserver() {
-    var e;
-    (e = this._resizeObserver) == null || e.disconnect();
-  }
-}
-class p {
-  constructor(e) {
-    this._globalClickHandler = (t) => {
-      t.target.closest(this.host.localName) || (this.host._expanded = !1);
-    }, this.host = e, e.addController(this);
+  constructor(t) {
+    this._globalClickHandler = (e) => {
+      e.target.closest(this.host.localName) || (this.host._expanded = !1);
+    }, this.host = t, t.addController(this);
   }
   // hostConnected() {
   // 	this.enableGlobalClickDetection();
@@ -79,26 +21,26 @@ class p {
     document.removeEventListener("click", this._globalClickHandler);
   }
 }
-class u {
-  constructor(e) {
-    this._handleKeyDown = (t) => {
-      switch (t.key) {
+class p {
+  constructor(t) {
+    this._handleKeyDown = (e) => {
+      switch (e.key) {
         case "ArrowDown":
-          t.preventDefault(), this._focusSiblingOption("next");
+          e.preventDefault(), this._focusSiblingOption("next");
           break;
         case "ArrowUp":
-          t.preventDefault(), this._focusSiblingOption("prev");
+          e.preventDefault(), this._focusSiblingOption("prev");
           break;
         case "Enter":
-          t.preventDefault(), this._selectFocusedOption(t.target);
+          e.preventDefault(), this._selectFocusedOption(e.target);
           break;
         case "Escape":
-          t.preventDefault(), this.host._expanded = !1, setTimeout(() => {
+          e.preventDefault(), this.host._expanded = !1, setTimeout(() => {
             this.host.focus();
           });
           break;
       }
-    }, this.host = e, e.addController(this), this._listenerActivated = !1;
+    }, this.host = t, t.addController(this), this._listenerActivated = !1;
   }
   hostDisconnected() {
     this.removeKeyboardListener();
@@ -113,50 +55,50 @@ class u {
     this.host.removeEventListener("keydown", this._handleKeyDown), this._listenerActivated = !1;
   }
   _focusFirstOption() {
-    const e = this._selectableOptions[0];
+    const t = this._selectableOptions[0];
     setTimeout(() => {
-      e.focus();
+      t.focus();
     });
   }
-  _focusSiblingOption(e) {
-    const t = (n) => n === document.activeElement, s = this._selectableOptions.find((n) => t(n));
+  _focusSiblingOption(t) {
+    const e = (n) => n === document.activeElement, s = this._selectableOptions.find((n) => e(n));
     if (!s) {
       this._focusFirstOption();
       return;
     }
-    const h = this._selectableOptions.indexOf(s);
-    let o = h - 1, l = h + 1;
-    o < 0 && (o = this._selectableOptions.length - 1), l >= this._selectableOptions.length && (l = 0);
-    const a = this._selectableOptions[e === "next" ? l : o];
-    s.blur(), a.focus();
+    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();
   }
-  _selectFocusedOption(e) {
-    e.selected = !0;
+  _selectFocusedOption(t) {
+    t.selected = !0;
   }
   get _selectableOptions() {
-    return this.host._optionsList.filter((e) => !e.disabled);
+    return this.host._optionsList.filter((t) => !t.disabled);
   }
 }
-class _ {
-  constructor(e) {
-    this.host = e, e.addController(this);
+class b {
+  constructor(t) {
+    this.host = t, t.addController(this);
   }
   hostConnected() {
     this._badAttributeCombinationWarning();
   }
   _badAttributeCombinationWarning() {
-    r({
+    l({
       assert: (this.host.min ?? 0) <= (this.host.max ?? 1 / 0),
       reason: "attribute-mismatch",
       replaceStrings: [this.host.localName, "min", "smaller than max"]
-    }), r({
+    }), l({
       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"]
-    }), r({
+    }), l({
       assert: (this.host.hideTags && this.host.multiple) ?? !this.host.hideTags,
       reason: "attribute-mismatch",
       replaceStrings: [this.host.localName, "hide-tags", "together with multiple"]
@@ -164,9 +106,7 @@ class _ {
   }
 }
 export {
-  _ as DeveloperFeedbackController,
-  p as GlobalClickController,
-  u as KeyboardNavigationController,
-  b as ResizeController,
-  d as ScrollController
+  b as DeveloperFeedbackController,
+  d as GlobalClickController,
+  p as KeyboardNavigationController
 };

package/dist/components/select-option-group/select-option-group.component.js

@@ -1,19 +1,19 @@
 import { SkfElement as a } from "../../internal/components/skf-element.js";
 import f from "../../styles/component.styles.js";
-import { html as p } from "lit";
+import { html as n } from "lit";
 import { property as d } from "lit/decorators.js";
-import { styles as n } from "./select-option-group.style.js";
-var v = Object.defineProperty, u = (o, s, i, b) => {
-  for (var r = void 0, e = o.length - 1, m; e >= 0; e--)
-    (m = o[e]) && (r = m(s, i, r) || r);
-  return r && v(s, i, r), r;
+import { styles as p } from "./select-option-group.style.js";
+var u = Object.defineProperty, v = (s, o, i, b) => {
+  for (var r = void 0, e = s.length - 1, m; e >= 0; e--)
+    (m = s[e]) && (r = m(o, i, r) || r);
+  return r && u(o, i, r), r;
 };
 const l = class l extends a {
   constructor() {
     super(...arguments), this.label = "Default label";
   }
   render() {
-    return p`
+    return n`
 			<div role="group">
 				<div id="label">${this.label}</div>
 				<slot></slot>
@@ -21,9 +21,9 @@ const l = class l extends a {
 		`;
   }
 };
-l.styles = [f, n];
+l.styles = [f, p];
 let t = l;
-u([
+v([
   d({ reflect: !0 })
 ], t.prototype, "label");
 export {

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

@@ -0,0 +1,38 @@
+import type { SkfStepperItem } from '../stepper-item/stepper-item.component.js';
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-stepper>` is a component that displays a list of actions or options.
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @slot - One or more `<skf-stepper-item>`
+ *
+ * @event skf-stepper-item-select - Dispatched when the stepper item is selected
+ *
+ * @tagname skf-stepper
+ */
+export declare class SkfStepper extends SkfElement {
+    #private;
+    static styles: CSSResultGroup;
+    /** Sets the active item */
+    activeIndex: number;
+    /** If true, sets linear mode (user can't go back to completed steps due to dependencies) */
+    linear: boolean;
+    /** @internal */
+    _items?: NodeListOf<SkfStepperItem>;
+    constructor();
+    firstUpdated(): void;
+    /** @internal activeIndex is the source of truth. Once updated all stepper states are recalculated. */
+    _handleActiveIndexChanged(): void;
+    /** @internal */
+    _handleLinearMode(): void;
+    private _handleSelected;
+    /** @internal */
+    private _resetActive;
+    /** @internal */
+    private _getCurrentActiveIndex;
+    /** @internal Not much can be handled before this kick off */
+    private _handleSlotChanged;
+    render(): import("lit").TemplateResult<1>;
+}