@skf-design-system/ui-components 1.0.0-alpha.38 → 1.0.0-alpha.39

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

@@ -1,30 +1,38 @@
-import { SkfSelectOptionGroup as v } from "./select-option-group.component.js";
+var _ = (l) => {
+  throw TypeError(l);
+};
+var v = (l, r, t) => r.has(l) || _("Cannot " + t);
+var u = (l, r, t) => (v(l, r, "read from private field"), t ? t.call(l) : r.get(l)), g = (l, r, t) => r.has(l) ? _("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(l) : r.set(l, t), b = (l, r, t, e) => (v(l, r, "write to private field"), e ? e.call(l, t) : r.set(l, t), t);
+import { SkfSelectOptionGroup as w } 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 { computePosition as x, flip as C, shift as V, offset as $ } from "@floating-ui/dom";
+import { FormBase as L } 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 { 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 { 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 O {
+import { PopoverController as E } from "../../internal/controllers/popover.controller.js";
+import { findMatchingTags as k } from "../../internal/helpers/findMatchingTags.js";
+import { hintSeverity as A } from "../../internal/helpers/hintSeverity.js";
+import { raiseError as I } from "../../internal/helpers/raiseError.js";
+import { watch as S } from "../../internal/helpers/watch.js";
+import { Asterisk as D } from "../../internal/templates/asterisk.js";
+import { componentStyles as P } from "../../styles/component.styles.js";
+import { LocalizeController as F } from "../../utilities/localize.js";
+import { nothing as y, html as p } from "lit";
+import { property as n, state as c, query as m, queryAssignedElements as T } from "lit/decorators.js";
+import { classMap as z } from "lit/directives/class-map.js";
+import { ifDefined as O } from "lit/directives/if-defined.js";
+import { SkfSelectOption as U } from "./select-option.component.js";
+import { GlobalClickController as M, KeyboardNavigationController as B, DeveloperFeedbackController as N } from "./select.controllers.js";
+import { styles as H } from "./select.styles.js";
+var q = Object.defineProperty, R = Object.getOwnPropertyDescriptor, s = (l, r, t, e) => {
+  for (var o = e > 1 ? void 0 : e ? R(r, t) : r, a = l.length - 1, h; a >= 0; a--)
+    (h = l[a]) && (o = (e ? h(r, t, o) : h(o)) || o);
+  return e && o && q(r, t, o), o;
+}, d;
+const f = class f extends L {
   constructor() {
-    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) => {
+    super();
+    g(this, d);
+    b(this, d, new F(this)), this._componentIsConnected = !1, this._defaultButtonLabel = "Select an option", this.selectDelay = 200, this._optionsList = [], this.buttonLabel = this._defaultButtonLabel, this.hideLabel = !1, this.hideTags = !1, this.lang = "en", this.multiple = !1, this.showValid = !1, this.size = "md", this._expanded = !1, this._invalid = !1, this.globalClickController = new M(this), this.keyboardNavController = new B(this), this.developerFeedbackController = new N(this), this.popoverController = new E(this), this._handleOptionSelected = (t) => {
       this._pristine = !1;
       const e = this._selectedOptions.length > 0;
       this.setFormValue(e ? this.selectedValues.join(",") : null), this._updateState(t);
@@ -35,9 +43,9 @@ const c = class c extends O {
         this.$popover.style.setProperty("--select-width", `${String(this.offsetWidth)}px`);
       }, 50);
     }, this.reposition = async () => {
-      const { x: t, y: e } = await _(this.$anchor, this.$popover, {
+      const { x: t, y: e } = await x(this.$anchor, this.$popover, {
         placement: "bottom",
-        middleware: [g(), b({ padding: 5 }), y(2)],
+        middleware: [C(), V(), $(2)],
         strategy: "fixed"
       });
       Object.assign(this.$popover.style, {
@@ -61,20 +69,34 @@ const c = class c extends O {
         default:
           throw new Error("Something went wrong");
       }
-      this.emitEvent("change"), this._validateInput(), this.$selectedValue && (this.$selectedValue.animate([{ opacity: 0.5 }, { opacity: 1 }], this.selectDelay).onfinish = () => {
+      this._componentIsConnected && this.emitEvent("change"), this._validateInput(), this.$selectedValue && (this.$selectedValue.animate([{ opacity: 0.5 }, { opacity: 1 }], this.selectDelay).onfinish = () => {
         this.multiple || (this._expanded = !1), t("done");
       });
     }), this._resetSelectedOptions = (t) => {
       const e = !t;
-      this._optionsList.forEach((l) => {
-        (e || l !== t) && l.removeAttribute("selected");
-      });
+      this._optionsList.forEach((o) => {
+        (e || o !== t) && o.removeAttribute("selected");
+      }), this._optionsList = [];
     }, this._handleSlotChange = () => {
-      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;
-    }, this._selectedOptions = [];
+      this._handleSizeUpdate(), this._collectSlotOptionTags(), this._ifValueIsSetSelectOption(), this._validateInput(), this._componentIsConnected = !0, this.emitEvent("skf-select-connected");
+    }, this._ifValueIsSetSelectOption = () => {
+      if (this.value)
+        if (this.multiple) {
+          const t = String(this.value).split(",").map((e) => e.toLowerCase().trim());
+          this._optionsList.forEach((e) => {
+            t.includes(e.value.toLowerCase().trim()) ? (e.setSelectedDiscrete = !0, this.selectedOptions = [...this.selectedOptions, e]) : (e.setSelectedDiscrete = !1, this._selectedOptions = this._selectedOptions.filter(
+              (o) => o.value.toLowerCase().trim() !== e.value.toLowerCase().trim()
+            ));
+          }), this._setValue().catch((e) => {
+            console.error(e);
+          });
+        } else {
+          const t = this.value.toLowerCase().trim(), e = this._optionsList.find((o) => o.value.toLowerCase().trim() === t);
+          e && (e.setSelectedDiscrete = !0, this.selectedOptions = [e], this._setValue().catch((o) => {
+            console.error(o);
+          }));
+        }
+    }, this._computeVisibleValue = () => this.buttonLabel !== this._defaultButtonLabel ? this.buttonLabel : (this.$selectedValue?.classList.add("contains-meta-info"), this._selectedOptions.length > 1 ? `(${u(this, d).term("itemsSelected", this._selectedOptions.length)})` : this.value ? (this.$selectedValue?.classList.remove("contains-meta-info"), this._selectedOptions[0].textContent) : (this.$selectedValue?.classList.add("contains-meta-info"), this.buttonLabel)), this._selectedOptions = [];
   }
   set selectedValues(t) {
     this._selectedOptions = this._optionsList.filter((e) => t.includes(e.value.trim()));
@@ -92,11 +114,11 @@ const c = class c extends O {
   }
   set value(t) {
     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();
+    this._componentIsConnected && (this.multiple ? e = String(t).split(",").map((a) => a.toLowerCase().trim()) : e = [String(t).toLowerCase().trim()], this._selectedOptions = this._optionsList.filter(
+      (a) => e.includes(a.value.toLowerCase().trim())
+    ), this._optionsList.forEach((a) => {
+      a.selected && (a.setSelectedDiscrete = !1);
+    }), this._selectedOptions.forEach((a) => a.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(",") : "";
@@ -126,30 +148,36 @@ const c = class c extends O {
         this.removeAttribute("invalid"), !this._pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = this.getAttribute("hint") ?? "";
   }
   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), this._internals.form?.addEventListener("reset", this._handleReset), this.onUpdateComplete(), this._validateInput();
   }
   _handleSizeUpdate() {
     this._slottedItems.forEach((t) => {
-      (t instanceof A || t instanceof v) && (t.small = this.size === "sm");
+      (t instanceof U || t instanceof w) && (t.small = this.size === "sm");
     });
   }
-  handleExpandedChange() {
+  _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.desiredPopupHeight = this._getOptionalDropdownHeight(
+      this._slottedItems[0]
+    ), this.desiredPopupHeight ? this.$popover.style.height = `${this.desiredPopupHeight.toString()}px` : this.$popover.style.height = "", 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 a = this.withFallback(l);
-        this._pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, a), this.checkValidity();
+  attributeChangedCallback(t, e, o) {
+    if (super.attributeChangedCallback(t, e, o), t === "custom-invalid")
+      if (typeof o == "string") {
+        const h = this.withFallback(o);
+        this._pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, h), this.checkValidity();
       } else
         this.setValidity({}), this._validateInput();
   }
   disconnectedCallback() {
-    var t;
-    super.disconnectedCallback(), (t = this._internals.form) == null || t.removeEventListener("reset", this._handleReset);
+    super.disconnectedCallback(), this._internals.form?.removeEventListener("reset", this._handleReset);
+  }
+  /** @internal */
+  _getOptionalDropdownHeight(t) {
+    if (!this.maxVisibleItems) return;
+    const e = this._slottedItems.length;
+    return this.maxVisibleItems >= e ? void 0 : t.getBoundingClientRect().height * this.maxVisibleItems;
   }
   /** @internal */
   _updateState(t) {
@@ -158,8 +186,8 @@ const c = class c extends O {
         e.selected && (this.selectedOptions = [...this.selectedOptions, e]);
       });
     else {
-      const e = this._selectedOptions.length > 0, l = t.detail.value !== null;
-      e && (this._selectedOptions[0].setSelectedDiscrete = !1, this._selectedOptions = []), l && (this.selectedOptions = [t.target]);
+      const e = this._selectedOptions.length > 0, o = t.detail.value !== null;
+      e && (this._selectedOptions[0].setSelectedDiscrete = !1, this._selectedOptions = []), o && (this.selectedOptions = [t.target]);
     }
     this._setValue();
   }
@@ -170,7 +198,7 @@ const c = class c extends O {
   /** @internal */
   /** Filter out elements other than skf-select-option and store in this._optionsList */
   _collectSlotOptionTags() {
-    this._optionsList = w(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), $({
+    this._optionsList = k(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), I({
       assert: this._optionsList.length > 0,
       reason: "no-children",
       replaceStrings: [this.localName, "skf-select-option"]
@@ -179,55 +207,56 @@ const c = class c extends O {
   /** @internal */
   _validateInput() {
     this._invalid = !1;
-    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);
+    const t = this.required && !this.selectedValues.length || this.min === 1, e = !!(this.min && this.selectedValues.length < this.min), o = !!(this.max && this.selectedValues.length > this.max);
     if (this._internals.validity.customError) {
       this._invalid = !0;
       return;
     } else if (t) {
-      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);
+      const h = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : "Please select an option";
+      this.setValidity({ valueMissing: !0 }, String(h)), this._pristine || (this._invalid = !0);
     } else if (e) {
-      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 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);
+      const h = this.hasAttribute("data-rangeunderflow") ? this.getAttribute("data-rangeunderflow") : `Please select minimum ${String(this.min)} options`;
+      this.setValidity({ rangeUnderflow: !0 }, String(h)), this._pristine || (this._invalid = !0);
+    } else if (o) {
+      const h = this.hasAttribute("data-rangeoverflow") ? this.getAttribute("data-rangeoverflow") : `Please select maximum ${String(this.max)} options`;
+      this.setValidity({ rangeOverflow: !0 }, String(h)), this._pristine || (this._invalid = !0);
     } else
       this.setValidity({}), !this._pristine && this.showValid && this.setAttribute("valid", "true");
   }
   render() {
-    return n`
+    return p`
 			<div id="root">
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
 						${this.label}
-						${this.required ? V(this.requiredLabel) : null}
+						${this.required ? D(u(this, d).term("required")) : y}
 					</div>
 					<button
 						?disabled=${this.disabled}
 						@click=${this._handleDropdownToggle}
 						aria-controls="select-dropdown"
 						aria-expanded=${this._expanded}
-						aria-invalid=${this._invalid}
 						aria-haspopup="listbox"
+						aria-invalid=${this._invalid}
+						aria-labelledby="label"
 						id="select-button"
 						role="combobox"
 					>
 						<span
 							id="selected-value"
-							class=${k({ "selected-value": !0, "contains-meta-info": !this.value })}>
+							class=${z({ "selected-value": !0, "contains-meta-info": !this.value })}>
 							${this._computeVisibleValue()}
 						</span>
 						<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">
+				<div aria-labelledby="select-button" aria-multiselectable=${O(this.multiple && !0)} id="select-dropdown" popover role="listbox">
 					<slot @slotchange=${this._handleSlotChange}></slot>
 				</div>
-				${!this.hideTags && this.multiple && this.selectedOptions.length > 0 ? n`
+				${!this.hideTags && this.multiple && this.selectedOptions.length > 0 ? p`
 								<div id="tags">
 									${this.selectedOptions.map(
-      (t) => n`
+      (t) => p`
 											<skf-tag
 												style="${`view-transition-name: tag-${String(t.textContent).replace(/[^a-zA-Z]/g, "").toLowerCase()}`}"
 												removable
@@ -240,13 +269,13 @@ const c = class c extends O {
 										`
     )}
 								</div>
-							` : E}
-				${this.hint && n`
+							` : y}
+				${this.hint && p`
 						<skf-hint
 							?disabled=${this.disabled}
 							aria-live=${this._invalid ? "assertive" : "polite"}
 							id="hint"
-							severity=${m(S(this._invalid, this.severity))}
+							severity=${O(A(this._invalid, this.severity))}
 						>
 							${this.customInvalid ?? this.hint}
 						</skf-hint>
@@ -256,86 +285,92 @@ const c = class c extends O {
 		`;
   }
 };
-c.styles = [C, F];
-let i = c;
+d = new WeakMap(), f.styles = [P, H];
+let i = f;
 s([
-  o({ type: String, reflect: !0, attribute: "button-label" })
+  n({ type: String, reflect: !0, attribute: "button-label" })
 ], i.prototype, "buttonLabel", 2);
 s([
-  o({ attribute: "custom-invalid" })
+  n({ type: String, attribute: "custom-invalid" })
 ], i.prototype, "customInvalid", 2);
 s([
-  o({ type: Boolean, attribute: "hide-label" })
+  n({ type: Boolean, attribute: "hide-label" })
 ], i.prototype, "hideLabel", 2);
 s([
-  o({ type: Boolean, reflect: !0, attribute: "hide-tags" })
+  n({ type: Boolean, reflect: !0, attribute: "hide-tags" })
 ], i.prototype, "hideTags", 2);
 s([
-  o()
+  n({ type: String })
 ], i.prototype, "hint", 2);
 s([
-  o({ type: Array, attribute: !1 })
+  n({ type: Array, attribute: !1 })
 ], i.prototype, "selectedValues", 1);
 s([
-  o({ type: Array, attribute: !1 })
+  n({ type: Array, attribute: !1 })
 ], i.prototype, "selectedOptionsText", 1);
 s([
-  o({ reflect: !0 })
+  n({ type: String, reflect: !0 })
 ], i.prototype, "label", 2);
 s([
-  o({ type: Number })
+  n({ type: String })
+], i.prototype, "lang", 2);
+s([
+  n({ type: Number })
 ], i.prototype, "max", 2);
 s([
-  o({ type: Number })
+  n({ type: Number, attribute: "max-visible-items" })
+], i.prototype, "maxVisibleItems", 2);
+s([
+  n({ type: Number })
 ], i.prototype, "min", 2);
 s([
-  o({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], i.prototype, "multiple", 2);
 s([
-  o()
+  n({ type: String })
 ], i.prototype, "name", 2);
 s([
-  o({ attribute: "required-label" })
-], i.prototype, "requiredLabel", 2);
-s([
-  o()
+  n()
 ], i.prototype, "severity", 2);
 s([
-  o({ type: Boolean, attribute: "show-valid" })
+  n({ type: Boolean, attribute: "show-valid" })
 ], i.prototype, "showValid", 2);
 s([
-  o({ reflect: !0 })
+  n({ reflect: !0 })
 ], i.prototype, "size", 2);
 s([
-  h()
+  n({ type: String, attribute: !1 })
 ], i.prototype, "value", 1);
 s([
-  h()
+  c()
 ], i.prototype, "selectedOptions", 1);
 s([
-  h()
+  c()
 ], i.prototype, "_expanded", 2);
 s([
-  h()
+  c()
 ], i.prototype, "_invalid", 2);
 s([
-  p("#select-button")
+  c()
+], i.prototype, "desiredPopupHeight", 2);
+s([
+  m("#select-button")
 ], i.prototype, "$anchor", 2);
 s([
-  p("#selected-value")
+  m("#selected-value")
 ], i.prototype, "$selectedValue", 2);
 s([
-  p("#select-dropdown")
+  m("#select-dropdown")
 ], i.prototype, "$popover", 2);
 s([
-  L()
+  T()
 ], i.prototype, "_slottedItems", 2);
 s([
-  f("size", { waitUntilFirstUpdate: !0 })
+  S("size", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "_handleSizeUpdate", 1);
 s([
-  f("_expanded", { afterUpdate: !0 })
-], i.prototype, "handleExpandedChange", 1);
+  S("_expanded", { afterUpdate: !0 })
+], i.prototype, "_handleExpandedChange", 1);
 export {
   i as SkfSelect
 };

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

@@ -1,9 +1,8 @@
-import { raiseError as a } from "../../internal/helpers/raiseError.js";
+import { raiseError as l } from "../../internal/helpers/raiseError.js";
 class d {
   constructor(t) {
     this._globalClickHandler = (e) => {
-      var s;
-      !((s = this.host) != null && s.localName) || e.target.closest(this.host.localName) || (this.host._expanded = !1);
+      !this.host?.localName || e.target.closest(this.host.localName) || (this.host._expanded = !1);
     }, (this.host = t).addController(this);
   }
   // hostConnected() {
@@ -13,8 +12,7 @@ class d {
     this.disableGlobalClickDetection();
   }
   hostUpdated() {
-    var t;
-    (t = this.host) != null && t._expanded ? this.enableGlobalClickDetection() : this.disableGlobalClickDetection();
+    this.host?._expanded ? this.enableGlobalClickDetection() : this.disableGlobalClickDetection();
   }
   enableGlobalClickDetection() {
     document.addEventListener("click", this._globalClickHandler);
@@ -48,8 +46,7 @@ class p {
     this.removeKeyboardListener();
   }
   hostUpdated() {
-    var t, e;
-    (t = this.host) != null && t._expanded && !this._listenerActivated && this.setupKeyboardListener(), !((e = this.host) != null && e._expanded) && this._listenerActivated && this.removeKeyboardListener();
+    this.host?._expanded && !this._listenerActivated && this.setupKeyboardListener(), !this.host?._expanded && this._listenerActivated && this.removeKeyboardListener();
   }
   setupKeyboardListener() {
     this._listenerActivated = !0, this.host.addEventListener("keydown", this._handleKeyDown);
@@ -64,16 +61,16 @@ class p {
     });
   }
   _focusSiblingOption(t) {
-    const e = (l) => l === document.activeElement, i = this._selectableOptions.find((l) => e(l));
-    if (!i) {
+    const e = (n) => n === document.activeElement, s = this._selectableOptions.find((n) => e(n));
+    if (!s) {
       this._focusFirstOption();
       return;
     }
-    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();
+    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(t) {
     t.selected = !0;
@@ -92,18 +89,18 @@ class b {
   _badAttributeCombinationWarning() {
     if (!this.host) return;
     const t = this.host.localName ?? "never";
-    a({
+    l({
       assert: (this.host.min ?? 0) <= (this.host.max ?? 1 / 0),
       reason: "attribute-mismatch",
       replaceStrings: [t, "min", "smaller than max"]
-    }), a({
+    }), 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: [t, "min or max", "together with multiple"]
-    }), a({
+    }), l({
       // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
       assert: this.host.hideTags && this.host.multiple || !this.host.hideTags,
       reason: "attribute-mismatch",

package/dist/components/select/select.styles.js

@@ -1,8 +1,8 @@
 import { visuallyHidden as r } from "../../styles/util.styles.js";
-import { css as o } from "lit";
+import { css as e } from "lit";
 const t = [
   r,
-  o`
+  e`
 		@layer components {
 			:host {
 				contain: initial;
@@ -52,7 +52,12 @@ const t = [
 				gap: 0 var(--skf-spacing-75);
 				justify-content: space-between;
 				padding-inline: var(--skf-spacing-75);
-				white-space: nowrap;
+
+				span {
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
 
 				&:hover {
 					--_skf-select-button-bg-color: var(--skf-interactive-bg-color-secondary-hover);

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

@@ -35,7 +35,7 @@ export declare class SkfStepperItem extends SkfElement {
     /** @internal */
     set _setInternalState(state: typeof this._uiState);
     get _setInternalState(): typeof this._uiState;
-    constructor();
+    connectedCallback(): void;
     protected firstUpdated(): void;
     /** @internal */
     _handleState(): void;

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

@@ -2,30 +2,30 @@ 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, a) => (u(e, i, "write to private field"), a ? a.call(e, t) : i.set(e, t), t);
+var m = (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 g } from "../../internal/components/skf-element.js";
-import { watch as C } from "../../internal/helpers/watch.js";
+import { SkfElement as C } from "../../internal/components/skf-element.js";
+import { watch as g } from "../../internal/helpers/watch.js";
 import { componentStyles as x } from "../../styles/component.styles.js";
 import "lit";
-import { property as b, state as c } from "lit/decorators.js";
+import { property as b, state as n } from "lit/decorators.js";
 import { classMap as $ } from "lit/directives/class-map.js";
 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);
+  for (var p = a > 1 ? void 0 : a ? O(i, t) : i, d = e.length - 1, h; d >= 0; d--)
+    (h = e[d]) && (p = (a ? h(i, t, p) : h(p)) || p);
   return a && p && I(i, t, p), p;
-}, l, n;
-const f = class f extends g {
+}, l, c;
+const f = class f extends C {
   constructor() {
-    super();
+    super(...arguments);
     _(this, l);
-    _(this, n);
-    r(this, l, !1), r(this, n, !1), this.completed = !1, this._index = 0, this._linear = !1, this._handleClick = () => {
+    _(this, c);
+    r(this, l, !1), r(this, c, !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, l, !0), this._uiState = t, t === "active" || t === "activeCompleted" ? this.state = t === "active" ? "active" : "completed" : this.state = void 0, setTimeout(() => {
@@ -35,6 +35,9 @@ const f = class f extends g {
   get _setInternalState() {
     return this.state;
   }
+  connectedCallback() {
+    super.connectedCallback(), this.role = "listitem";
+  }
   firstUpdated() {
     this._handleState();
   }
@@ -44,20 +47,20 @@ const f = class f extends g {
       this._setInternalState = "activeCompleted";
       return;
     }
-    if (d(this, l)) {
+    if (m(this, l)) {
       r(this, l, !1);
       return;
     }
-    r(this, n, ["active", "completed"].includes(String(this.state)) && !["active", "activeCompleted"].includes(String(this._uiState))), this._emitUpdate();
+    r(this, c, ["active", "completed"].includes(String(this.state)) && !["active", "activeCompleted"].includes(String(this._uiState))), this._emitUpdate();
   }
   /** @internal */
   _emitUpdate() {
     this.emit("skf-stepper-item-select", {
       detail: {
         item: this,
-        triggerActiveIndexUpdate: d(this, n)
+        triggerActiveIndexUpdate: m(this, c)
       }
-    }), r(this, n, !1);
+    }), r(this, c, !1);
   }
   render() {
     const t = this._linear ? S`div` : S`button`;
@@ -82,7 +85,7 @@ const f = class f extends g {
 		`;
   }
 };
-l = new WeakMap(), n = new WeakMap(), f.styles = [x, U];
+l = new WeakMap(), c = new WeakMap(), f.styles = [x, U];
 let s = f;
 o([
   b({ reflect: !0 })
@@ -91,22 +94,22 @@ o([
   b({ type: Boolean })
 ], s.prototype, "completed", 2);
 o([
-  c()
+  n()
 ], s.prototype, "_disabled", 2);
 o([
-  c()
+  n()
 ], s.prototype, "_index", 2);
 o([
-  c()
+  n()
 ], s.prototype, "_linear", 2);
 o([
-  c()
+  n()
 ], s.prototype, "_uiState", 2);
 o([
-  c()
+  n()
 ], s.prototype, "_setInternalState", 1);
 o([
-  C("state")
+  g("state")
 ], s.prototype, "_handleState", 1);
 export {
   s as SkfStepperItem