@skf-design-system/ui-components 1.0.2-beta.10 → 1.0.2-beta.12

package/dist/components/link/link.component.js

@@ -1,34 +1,34 @@
-var b = (e) => {
+var g = (e) => {
   throw TypeError(e);
 };
-var g = (e, i, t) => i.has(e) || b("Cannot " + t);
-var d = (e, i, t) => (g(e, i, "read from private field"), t ? t.call(e) : i.get(e)), f = (e, i, t) => i.has(e) ? b("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, t), m = (e, i, t, s) => (g(e, i, "write to private field"), s ? s.call(e, t) : i.set(e, t), t);
+var _ = (e, i, t) => i.has(e) || g("Cannot " + t);
+var c = (e, i, t) => (_(e, i, "read from private field"), t ? t.call(e) : i.get(e)), f = (e, i, t) => i.has(e) ? g("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, t), y = (e, i, t, h) => (_(e, i, "write to private field"), h ? h.call(e, t) : i.set(e, t), t);
 import "../icon/icon.js";
-import { SkfElement as C } from "../../internal/components/skf-element.js";
+import { SkfElement as w } from "../../internal/components/skf-element.js";
 import { stateMap as k } from "../../internal/helpers/stateMap.js";
-import { watch as v } from "../../internal/helpers/watch.js";
+import { watch as b } from "../../internal/helpers/watch.js";
 import { componentStyles as S } from "../../styles/component.styles.js";
-import { nothing as y } from "lit";
-import { property as n } from "lit/decorators.js";
-import { ifDefined as x } from "lit/directives/if-defined.js";
-import { html as _ } from "lit/static-html.js";
-import { styles as A } from "./link.styles.js";
-var D = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (e, i, t, s) => {
-  for (var h = s > 1 ? void 0 : s ? E(i, t) : i, p = e.length - 1, c; p >= 0; p--)
-    (c = e[p]) && (h = (s ? c(i, t, h) : c(h)) || h);
-  return s && h && D(i, t, h), h;
+import { nothing as m } from "lit";
+import { property as s } from "lit/decorators.js";
+import { ifDefined as D } from "lit/directives/if-defined.js";
+import { html as v } from "lit/static-html.js";
+import { styles as x } from "./link.styles.js";
+var A = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (e, i, t, h) => {
+  for (var n = h > 1 ? void 0 : h ? E(i, t) : i, p = e.length - 1, d; p >= 0; p--)
+    (d = e[p]) && (n = (h ? d(i, t, n) : d(n)) || n);
+  return h && n && A(i, t, n), n;
 };
-const w = {
+const C = {
   color: ["inverse", "primary"],
   stretch: "stretch"
 };
 var a, l;
-const u = class u extends C {
+const u = class u extends w {
   constructor() {
     super(...arguments);
     f(this, a);
     f(this, l);
-    m(this, a, this.attachInternals()), m(this, l, d(this, a).states), this.as = "link", this.color = "primary", this.disabled = !1, this.download = !1, this.iconRight = !1, this.stretch = !1, this._handleClick = () => {
+    y(this, a, this.attachInternals()), y(this, l, c(this, a).states), this.as = "link", this.color = "primary", this.disabled = !1, this.download = !1, this.iconRight = !1, this.stretch = !1, this._handleClick = () => {
       if (!(this.as === "button" && this.disabled) && (this.emit("skf-link-click", { detail: { href: this.href, route: this.route } }), this.as === "link" && !this.route && this.href?.trim()))
         if (this.target)
           window.open(this.href, this.target);
@@ -40,80 +40,86 @@ const u = class u extends C {
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.ariaDisabled = this.as === "button" && this.disabled ? "true" : null, this.role = this.as;
-    const t = this.hasAttribute("tabindex") ? Number(this.getAttribute("tabindex")) : 0;
-    this.ariaDisabled !== "true" && (this.tabIndex = t), this.addEventListener("keydown", (s) => {
-      (s.key === "Enter" || s.key === " ") && this._handleClick();
+    super.connectedCallback(), this.role = this.as, this.addEventListener("keydown", (t) => {
+      (t.key === "Enter" || t.key === " ") && this._handleClick();
     }), this.addEventListener("click", this._handleClick);
   }
   _handleAsChange() {
     this.as === "button" ? this.setAttribute("type", "button") : this.removeAttribute("type");
   }
-  _handleStateChange(t, s, h) {
-    k(d(this, l), w[t]).set(h);
+  _handleDisabledChange() {
+    this.ariaDisabled = this.as === "button" && this.disabled ? "true" : null;
+    const t = this.hasAttribute("tabindex") ? Number(this.getAttribute("tabindex")) : 0;
+    this.ariaDisabled !== "true" && (this.tabIndex = t);
+  }
+  _handleStateChange(t, h, n) {
+    k(c(this, l), C[t]).set(n);
   }
   /** @internal */
   _renderIcon() {
     const t = this.color === "inverse" ? "inverse" : "emphasized";
-    return _`
+    return v`
 			<skf-icon
 				color=${t}
-				data-color=${this.disabled ? "custom" : y}
-				name=${x(this.icon)}
+				data-color=${this.disabled ? "custom" : m}
+				name=${D(this.icon)}
 				size="sm"
 			></skf-icon>
 		`;
   }
   render() {
-    return _`
+    return v`
 			<div id="root" part="root">
-				${this.icon && !this.iconRight ? this._renderIcon() : y}
+				${this.icon && !this.iconRight ? this._renderIcon() : m}
 				<slot></slot>
-				${this.icon && this.iconRight ? this._renderIcon() : y}
+				${this.icon && this.iconRight ? this._renderIcon() : m}
 			</div>
 		`;
   }
 };
-a = new WeakMap(), l = new WeakMap(), u.styles = [S, A];
+a = new WeakMap(), l = new WeakMap(), u.styles = [S, x];
 let o = u;
 r([
-  n({ type: String })
+  s({ type: String })
 ], o.prototype, "as", 2);
 r([
-  n({ type: String })
+  s({ type: String })
 ], o.prototype, "color", 2);
 r([
-  n({ type: Boolean })
+  s({ type: Boolean })
 ], o.prototype, "disabled", 2);
 r([
-  n({ type: Boolean })
+  s({ type: Boolean })
 ], o.prototype, "download", 2);
 r([
-  n({ type: String })
+  s({ type: String })
 ], o.prototype, "href", 2);
 r([
-  n({ type: String })
+  s({ type: String })
 ], o.prototype, "icon", 2);
 r([
-  n({ type: Boolean, attribute: "icon-right" })
+  s({ type: Boolean, attribute: "icon-right" })
 ], o.prototype, "iconRight", 2);
 r([
-  n({ type: String })
+  s({ type: String })
 ], o.prototype, "rel", 2);
 r([
-  n({ type: String })
+  s({ type: String })
 ], o.prototype, "route", 2);
 r([
-  n({ type: Boolean })
+  s({ type: Boolean })
 ], o.prototype, "stretch", 2);
 r([
-  n({ type: String })
+  s({ type: String })
 ], o.prototype, "target", 2);
 r([
-  v("as")
+  b("as")
 ], o.prototype, "_handleAsChange", 1);
 r([
-  v(Object.keys(w))
+  b("disabled")
+], o.prototype, "_handleDisabledChange", 1);
+r([
+  b(Object.keys(C))
 ], o.prototype, "_handleStateChange", 1);
 export {
   o as SkfLink

package/dist/components/link/link.styles.js

@@ -41,10 +41,6 @@ const e = o`
 
 					cursor: not-allowed;
 				}
-
-				skf-icon {
-					color: inherit;
-				}
 			}
 
 			:host(:not([aria-disabled]):hover) #root {

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

@@ -63,6 +63,7 @@ export declare class SkfSelect extends FormBase {
     lang: Language;
     /** If defined, limits the number of selectable options */
     max?: number;
+    maxVisibleItems?: number;
     /** If defined, sets the minimum number of required options */
     min?: number;
     /** If true, allows for multiple options to be selected */
@@ -89,6 +90,7 @@ export declare class SkfSelect extends FormBase {
     /** @internal */
     /** True if the internal state is invalid  */
     private _invalid;
+    private desiredPopupHeight?;
     /** @internal */
     $anchor: HTMLButtonElement;
     /** @internal */
@@ -109,10 +111,13 @@ export declare class SkfSelect extends FormBase {
     willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
     firstUpdated(): void;
     _handleSizeUpdate(): void;
-    handleExpandedChange(): void;
+    /** @internal */
+    _handleExpandedChange(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     /** @internal */
+    _getOptionalDropdownHeight(_skfSelectOption: SkfSelectOption): number | undefined;
+    /** @internal */
     _handleOptionSelected: EventListener;
     /** @internal */
     _updateState(event: CustomEvent<SelectOptionEvent>): void;

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

@@ -1,38 +1,38 @@
-var _ = (o) => {
-  throw TypeError(o);
+var _ = (l) => {
+  throw TypeError(l);
 };
-var v = (o, a, t) => a.has(o) || _("Cannot " + t);
-var c = (o, a, t) => (v(o, a, "read from private field"), t ? t.call(o) : a.get(o)), g = (o, a, t) => a.has(o) ? _("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(o) : a.set(o, t), b = (o, a, t, e) => (v(o, a, "write to private field"), e ? e.call(o, t) : a.set(o, t), t);
+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 C, flip as x, shift as V, offset as $ } from "@floating-ui/dom";
+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 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 D } from "../../internal/helpers/raiseError.js";
+import { raiseError as I } from "../../internal/helpers/raiseError.js";
 import { watch as S } from "../../internal/helpers/watch.js";
-import { Asterisk as I } from "../../internal/templates/asterisk.js";
+import { Asterisk as D } from "../../internal/templates/asterisk.js";
 import { componentStyles as P } from "../../styles/component.styles.js";
-import { LocalizeController as T } from "../../utilities/localize.js";
+import { LocalizeController as F } from "../../utilities/localize.js";
 import { nothing as y, html as p } from "lit";
-import { property as r, state as u, query as m, queryAssignedElements as F } from "lit/decorators.js";
-import { classMap as U } from "lit/directives/class-map.js";
+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 z } from "./select-option.component.js";
-import { GlobalClickController as M, KeyboardNavigationController as B, DeveloperFeedbackController as q } from "./select.controllers.js";
-import { styles as j } from "./select.styles.js";
-var N = Object.defineProperty, R = Object.getOwnPropertyDescriptor, s = (o, a, t, e) => {
-  for (var l = e > 1 ? void 0 : e ? R(a, t) : a, n = o.length - 1, h; n >= 0; n--)
-    (h = o[n]) && (l = (e ? h(a, t, l) : h(l)) || l);
-  return e && l && N(a, t, l), l;
+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();
     g(this, d);
-    b(this, d, new T(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 q(this), this.popoverController = new E(this), this._handleOptionSelected = (t) => {
+    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);
@@ -43,9 +43,9 @@ const f = class f extends L {
         this.$popover.style.setProperty("--select-width", `${String(this.offsetWidth)}px`);
       }, 50);
     }, this.reposition = async () => {
-      const { x: t, y: e } = await C(this.$anchor, this.$popover, {
+      const { x: t, y: e } = await x(this.$anchor, this.$popover, {
         placement: "bottom",
-        middleware: [x(), V(), $(2)],
+        middleware: [C(), V(), $(2)],
         strategy: "fixed"
       });
       Object.assign(this.$popover.style, {
@@ -74,8 +74,8 @@ const f = class f extends L {
       });
     }), 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._ifValueIsSetSelectOption(), this._validateInput(), this._componentIsConnected = !0, this.emitEvent("skf-select-connected");
@@ -85,18 +85,18 @@ const f = class f extends L {
           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(
-              (l) => l.value.toLowerCase().trim() !== e.value.toLowerCase().trim()
+              (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((l) => l.value.toLowerCase().trim() === t);
-          e && (e.setSelectedDiscrete = !0, this.selectedOptions = [e], this._setValue().catch((l) => {
-            console.error(l);
+          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 ? `(${c(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 = [];
+    }, 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()));
@@ -114,11 +114,11 @@ const f = class f extends L {
   }
   set value(t) {
     let e = [];
-    this._componentIsConnected && (this.multiple ? e = String(t).split(",").map((n) => n.toLowerCase().trim()) : e = [String(t).toLowerCase().trim()], this._selectedOptions = this._optionsList.filter(
-      (n) => e.includes(n.value.toLowerCase().trim())
-    ), this._optionsList.forEach((n) => {
-      n.selected && (n.setSelectedDiscrete = !1);
-    }), this._selectedOptions.forEach((n) => n.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(",") : "";
@@ -152,18 +152,20 @@ const f = class f extends L {
   }
   _handleSizeUpdate() {
     this._slottedItems.forEach((t) => {
-      (t instanceof z || t instanceof w) && (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 h = this.withFallback(l);
+  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();
@@ -172,14 +174,20 @@ const f = class f extends L {
     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) {
     if (this.multiple)
       this._selectedOptions = [], this._optionsList.forEach((e) => {
         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();
   }
@@ -190,7 +198,7 @@ const f = class f extends L {
   /** @internal */
   /** Filter out elements other than skf-select-option and store in this._optionsList */
   _collectSlotOptionTags() {
-    this._optionsList = k(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), D({
+    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"]
@@ -199,7 +207,7 @@ const f = class f extends L {
   /** @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;
@@ -209,7 +217,7 @@ const f = class f extends L {
     } else if (e) {
       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 (l) {
+    } 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
@@ -221,7 +229,7 @@ const f = class f extends L {
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
 						${this.label}
-						${this.required ? I(c(this, d).term("required")) : y}
+						${this.required ? D(u(this, d).term("required")) : y}
 					</div>
 					<button
 						?disabled=${this.disabled}
@@ -236,7 +244,7 @@ const f = class f extends L {
 					>
 						<span
 							id="selected-value"
-							class=${U({ "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>
@@ -277,68 +285,74 @@ const f = class f extends L {
 		`;
   }
 };
-d = new WeakMap(), f.styles = [P, j];
+d = new WeakMap(), f.styles = [P, H];
 let i = f;
 s([
-  r({ type: String, reflect: !0, attribute: "button-label" })
+  n({ type: String, reflect: !0, attribute: "button-label" })
 ], i.prototype, "buttonLabel", 2);
 s([
-  r({ type: String, attribute: "custom-invalid" })
+  n({ type: String, attribute: "custom-invalid" })
 ], i.prototype, "customInvalid", 2);
 s([
-  r({ type: Boolean, attribute: "hide-label" })
+  n({ type: Boolean, attribute: "hide-label" })
 ], i.prototype, "hideLabel", 2);
 s([
-  r({ type: Boolean, reflect: !0, attribute: "hide-tags" })
+  n({ type: Boolean, reflect: !0, attribute: "hide-tags" })
 ], i.prototype, "hideTags", 2);
 s([
-  r({ type: String })
+  n({ type: String })
 ], i.prototype, "hint", 2);
 s([
-  r({ type: Array, attribute: !1 })
+  n({ type: Array, attribute: !1 })
 ], i.prototype, "selectedValues", 1);
 s([
-  r({ type: Array, attribute: !1 })
+  n({ type: Array, attribute: !1 })
 ], i.prototype, "selectedOptionsText", 1);
 s([
-  r({ type: String, reflect: !0 })
+  n({ type: String, reflect: !0 })
 ], i.prototype, "label", 2);
 s([
-  r({ type: String })
+  n({ type: String })
 ], i.prototype, "lang", 2);
 s([
-  r({ type: Number })
+  n({ type: Number })
 ], i.prototype, "max", 2);
 s([
-  r({ type: Number })
+  n({ type: Number, attribute: "max-visible-items" })
+], i.prototype, "maxVisibleItems", 2);
+s([
+  n({ type: Number })
 ], i.prototype, "min", 2);
 s([
-  r({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], i.prototype, "multiple", 2);
 s([
-  r({ type: String })
+  n({ type: String })
 ], i.prototype, "name", 2);
 s([
-  r()
+  n()
 ], i.prototype, "severity", 2);
 s([
-  r({ type: Boolean, attribute: "show-valid" })
+  n({ type: Boolean, attribute: "show-valid" })
 ], i.prototype, "showValid", 2);
 s([
-  r({ reflect: !0 })
+  n({ reflect: !0 })
 ], i.prototype, "size", 2);
 s([
-  r({ type: String, attribute: !1 })
+  n({ type: String, attribute: !1 })
 ], i.prototype, "value", 1);
 s([
-  u()
+  c()
 ], i.prototype, "selectedOptions", 1);
 s([
-  u()
+  c()
 ], i.prototype, "_expanded", 2);
 s([
-  u()
+  c()
 ], i.prototype, "_invalid", 2);
+s([
+  c()
+], i.prototype, "desiredPopupHeight", 2);
 s([
   m("#select-button")
 ], i.prototype, "$anchor", 2);
@@ -349,14 +363,14 @@ s([
   m("#select-dropdown")
 ], i.prototype, "$popover", 2);
 s([
-  F()
+  T()
 ], i.prototype, "_slottedItems", 2);
 s([
   S("size", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "_handleSizeUpdate", 1);
 s([
   S("_expanded", { afterUpdate: !0 })
-], i.prototype, "handleExpandedChange", 1);
+], i.prototype, "_handleExpandedChange", 1);
 export {
   i as SkfSelect
 };