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

package/dist/components/datepicker/datepicker-calendar.component.d.ts

@@ -1,6 +1,5 @@
 import { SkfElement } from '../../internal/components/skf-element.js';
 import { Temporal } from '@js-temporal/polyfill';
-import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 interface DateParts {
     year?: number;
@@ -23,8 +22,6 @@ export declare class SkfDatepickerCalendar extends SkfElement {
      * A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.
      */
     invalidDates?: string;
-    /** Sets the internal language of the component */
-    lang: Language;
     locale: string;
     range: boolean;
     /**

package/dist/components/datepicker/datepicker-calendar.component.js

@@ -5,11 +5,11 @@ var w = (n, r, t) => r.has(n) || _("Cannot " + t);
 var f = (n, r, t) => (w(n, r, "read from private field"), t ? t.call(n) : r.get(n)), S = (n, r, t) => r.has(n) ? _("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(n) : r.set(n, t), $ = (n, r, t, e) => (w(n, r, "write to private field"), e ? e.call(n, t) : r.set(n, t), t);
 import { SkfElement as L } from "../../internal/components/skf-element.js";
 import { watch as O } from "../../internal/helpers/watch.js";
-import { Temporal as c } from "@js-temporal/polyfill";
+import { Temporal as h } from "@js-temporal/polyfill";
 import { componentStyles as x } from "../../styles/component.styles.js";
 import { LocalizeController as R } from "../../utilities/localize.js";
 import { html as g } from "lit";
-import { property as d, state as M } from "lit/decorators.js";
+import { property as c, state as M } from "lit/decorators.js";
 import { repeat as y } from "lit/directives/repeat.js";
 import { styles as C } from "./datepicker-calendar.styles.js";
 import { compareDates as E } from "./datepicker-popup.helpers.js";
@@ -23,7 +23,7 @@ const b = class b extends L {
   constructor() {
     super(...arguments);
     S(this, u);
-    $(this, u, new R(this)), this._secondCalendarOffset = 0, this.date = /* @__PURE__ */ new Date(), this.firstDayOfWeek = 0, this.lang = "en", this.locale = "en-CA", this.range = !1, this.selectedDate = void 0, this.selectedDateRange = {
+    $(this, u, new R(this)), this._secondCalendarOffset = 0, this.date = /* @__PURE__ */ new Date(), this.firstDayOfWeek = 0, this.locale = "en-CA", this.range = !1, this.selectedDate = void 0, this.selectedDateRange = {
       start: null,
       end: null
     }, this._numberOfDays = 0, this._numberOfDaysLastMonth = 0, this._listenToKeyboard = () => ({
@@ -36,14 +36,14 @@ const b = class b extends L {
     }), this._handleKeyDown = (t) => {
       const { key: e } = t;
       if ((e === "ArrowRight" || e === "ArrowLeft" || e === "ArrowDown" || e === "ArrowUp") && t.preventDefault(), e === "ArrowRight" && this.shadowRoot?.activeElement?.parentElement?.nextElementSibling?.firstElementChild?.focus(), e === "ArrowLeft" && this.shadowRoot?.activeElement?.parentElement?.previousElementSibling?.firstElementChild?.focus(), e === "ArrowDown") {
-        const h = this.shadowRoot?.activeElement?.parentElement, m = a(h);
-        h?.parentElement?.children[m + 7]?.firstElementChild?.focus();
+        const d = this.shadowRoot?.activeElement?.parentElement, m = a(d);
+        d?.parentElement?.children[m + 7]?.firstElementChild?.focus();
       }
       if (e === "ArrowUp") {
-        const h = this.shadowRoot?.activeElement?.parentElement;
-        if (!h) return;
-        const m = Array.from(h.parentElement?.children ?? []).indexOf(h);
-        h.parentElement?.children[m - 7]?.firstElementChild?.focus();
+        const d = this.shadowRoot?.activeElement?.parentElement;
+        if (!d) return;
+        const m = Array.from(d.parentElement?.children ?? []).indexOf(d);
+        d.parentElement?.children[m - 7]?.firstElementChild?.focus();
       }
       function a(s) {
         return s ? Array.from(s.parentElement?.children ?? []).indexOf(s) : 0;
@@ -76,7 +76,7 @@ const b = class b extends L {
     }
     if (s)
       try {
-        return c.PlainDate.from({
+        return h.PlainDate.from({
           year: t,
           month: e + 1,
           day: a
@@ -96,7 +96,7 @@ const b = class b extends L {
       day: t.getDate()
     };
     try {
-      return c.PlainDate.from(e);
+      return h.PlainDate.from(e);
     } catch (a) {
       return console.log(e), console.error("error", a), null;
     }
@@ -104,7 +104,7 @@ const b = class b extends L {
   /** @internal Check if a day is between two dates */
   _isDateBetween(t, e, a) {
     if (!e || !a) return !1;
-    const s = c.PlainDate.compare(t, e) > 0, i = c.PlainDate.compare(t, a) < 0;
+    const s = h.PlainDate.compare(t, e) > 0, i = h.PlainDate.compare(t, a) < 0;
     return s && i;
   }
   render() {
@@ -117,7 +117,7 @@ const b = class b extends L {
       Array.from({ length: 7 }, (t, e) => e),
       (t) => t,
       (t) => g`<li>
-							${new Intl.DateTimeFormat(this.locale, {
+							${new Intl.DateTimeFormat(this.lang, {
         weekday: "short"
       }).format(new Date(2018, 0, t)).slice(0, 2)}
 						</li>`
@@ -171,10 +171,10 @@ const b = class b extends L {
       this._plainDate(this.selectedDateRange.start) ?? void 0,
       this._plainDate(this.selectedDateRange.end) ?? void 0
     ) && e.push("in-range"), this.range && this.selectedDateRange.start && (this.selectedDateRange.start.getFullYear() === this.date.getFullYear() && this.selectedDateRange.start.getMonth() === this.date.getMonth() && this.selectedDateRange.start.getDate() === a && e.push("selected selected-start"), this.selectedDateRange.end?.getFullYear() === this.date.getFullYear() && this.selectedDateRange.end.getMonth() === this.date.getMonth() && this.selectedDateRange.end.getDate() === a && e.push("selected selected-end"));
-    const { matchesInvalidDates: h, dateWithinRange: m } = this.dateSelectable(
+    const { matchesInvalidDates: d, dateWithinRange: m } = this.dateSelectable(
       this._createDate({ day: t }, !0).toString()
     );
-    (h || m) && e.push("invalid");
+    (d || m) && e.push("invalid");
     const p = this.selectedDate?.getDate() === a;
     return !this.range && p && s && i && (console.log("is single date selected", this.selectedDate), e.push("selected")), this._createDate({ day: t }, !0).equals(String(this._plainDate(/* @__PURE__ */ new Date()))) && e.push("today"), e.join(" ");
   }
@@ -219,7 +219,7 @@ const b = class b extends L {
             month: this.date.getMonth() - 1,
             day: t
           }), this.emit("skf-update-calendar-view", {
-            detail: c.PlainDate.from(D(this.date)).subtract({ months: 1 }).toString()
+            detail: h.PlainDate.from(D(this.date)).subtract({ months: 1 }).toString()
           });
         }}"
 						?disabled=${e.includes("invalid")}
@@ -262,7 +262,7 @@ const b = class b extends L {
             month: this.date.getMonth() + 1,
             day: t + 1
           }), this.emit("skf-update-calendar-view", {
-            detail: c.PlainDate.from(D(this.date)).add({ months: 1 }).toString()
+            detail: h.PlainDate.from(D(this.date)).add({ months: 1 }).toString()
           });
         }}"
 						?disabled=${e.includes("invalid")}
@@ -299,7 +299,7 @@ const b = class b extends L {
 					title=${f(this, u).term("previousYear")}
 					@click="${() => {
       this.emit("skf-update-calendar-view", {
-        detail: c.PlainDate.from(D(this.date)).subtract({ years: 1 }).toString()
+        detail: h.PlainDate.from(D(this.date)).subtract({ years: 1 }).toString()
       });
     }}"
 				>
@@ -309,7 +309,7 @@ const b = class b extends L {
 					title=${f(this, u).term("previousMonth")}
 					@click="${() => {
       this.emit("skf-update-calendar-view", {
-        detail: c.PlainDate.from(D(this.date)).subtract({ months: 1 }).toString()
+        detail: h.PlainDate.from(D(this.date)).subtract({ months: 1 }).toString()
       });
     }}"
 				>
@@ -317,7 +317,7 @@ const b = class b extends L {
 				</button>
 			</div>
 			<h4>
-				${this.date.toLocaleString(this.locale, { month: "short" })}
+				${this.date.toLocaleString(this.lang, { month: "short" })}
 				${this.range && this.classList.contains("start") ? g` -&nbsp;` : this.date.getFullYear()}
 			</h4>
 			<div
@@ -327,7 +327,7 @@ const b = class b extends L {
 					title=${f(this, u).term("nextMonth")}
 					@click="${() => {
       this.emit("skf-update-calendar-view", {
-        detail: c.PlainDate.from(D(this.date)).add({ months: 1 + this._secondCalendarOffset }).toString()
+        detail: h.PlainDate.from(D(this.date)).add({ months: 1 + this._secondCalendarOffset }).toString()
       });
     }}"
 				>
@@ -337,7 +337,7 @@ const b = class b extends L {
 					title=${f(this, u).term("nextYear")}
 					@click="${() => {
       this.emit("skf-update-calendar-view", {
-        detail: c.PlainDate.from(D(this.date)).add({ months: 12 + this._secondCalendarOffset }).toString()
+        detail: h.PlainDate.from(D(this.date)).add({ months: 12 + this._secondCalendarOffset }).toString()
       });
     }}"
 				>
@@ -350,7 +350,7 @@ const b = class b extends L {
 u = new WeakMap(), b.styles = [x, C];
 let o = b;
 l([
-  d({
+  c({
     converter: {
       fromAttribute(n) {
         return console.log("value", typeof n), new Date(n);
@@ -362,38 +362,35 @@ l([
   })
 ], o.prototype, "date", 2);
 l([
-  d()
+  c()
 ], o.prototype, "eventid", 2);
 l([
-  d({ type: Number })
+  c({ type: Number })
 ], o.prototype, "firstDayOfWeek", 2);
 l([
-  d({ reflect: !0, attribute: "invalid-dates" })
+  c({ reflect: !0, attribute: "invalid-dates" })
 ], o.prototype, "invalidDates", 2);
 l([
-  d({ type: String })
-], o.prototype, "lang", 2);
-l([
-  d({ reflect: !0 })
+  c({ reflect: !0 })
 ], o.prototype, "locale", 2);
 l([
-  d({ type: Boolean })
+  c({ type: Boolean })
 ], o.prototype, "range", 2);
 l([
-  d({ attribute: "selectable-from" })
+  c({ attribute: "selectable-from" })
 ], o.prototype, "selectableFrom", 2);
 l([
-  d({ attribute: "selectable-to" })
+  c({ attribute: "selectable-to" })
 ], o.prototype, "selectableTo", 2);
 l([
-  d({
+  c({
     attribute: "selected-date",
     converter: { fromAttribute: (n) => new Date(n) },
     reflect: !0
   })
 ], o.prototype, "selectedDate", 2);
 l([
-  d({ type: Object })
+  c({ type: Object })
 ], o.prototype, "selectedDateRange", 2);
 l([
   M()

package/dist/components/datepicker/datepicker-popup.component.js

@@ -11,19 +11,19 @@ import { LocalizeController as M } from "../../utilities/localize.js";
 import { html as m } from "lit";
 import { property as o, state as u } from "lit/decorators.js";
 import "./datepicker-calendar.js";
-import { getDateParts as f, assertISODate as O, earliestDate as V, latestDate as P, compareDates as g, doAnimate as C } from "./datepicker-popup.helpers.js";
+import { getDateParts as f, assertISODate as O, earliestDate as V, latestDate as P, compareDates as D, doAnimate as C } from "./datepicker-popup.helpers.js";
 import { styles as L } from "./datepicker-popup.styles.js";
 import { dateFormatter as d, is as Y } from "./datepicker.helpers.js";
 var x = Object.defineProperty, A = Object.getOwnPropertyDescriptor, l = (s, i, e, a) => {
   for (var t = a > 1 ? void 0 : a ? A(i, e) : i, r = s.length - 1, h; r >= 0; r--)
     (h = s[r]) && (t = (a ? h(i, e, t) : h(t)) || t);
   return a && t && x(i, e, t), t;
-}, D;
+}, g;
 const _ = class _ extends E {
   constructor() {
     super(...arguments);
-    S(this, D);
-    $(this, D, new M(this)), this.locale = "en-CA", this.date = (/* @__PURE__ */ new Date()).toLocaleDateString(this.locale), this.id = "", this.lang = "en", this.range = !1, this.selectedDate = void 0, this.selectedDateRange = {
+    S(this, g);
+    $(this, g, new M(this)), this.locale = "en-CA", this.date = (/* @__PURE__ */ new Date()).toLocaleDateString(this.locale), this.id = "", this.lang = "en", this.range = !1, this.selectedDate = void 0, this.selectedDateRange = {
       start: null,
       end: null
     }, this._datePlusOneMonth = new Date(
@@ -157,6 +157,7 @@ const _ = class _ extends E {
 					.invalidDates=${this.invalidDates}
 					class="end"
 					id=${`${this.id}-range-end`}
+					lang="${this.lang}"
 					locale="${this.locale}"
 				></skf-datepicker-calendar>
 			</div>
@@ -168,11 +169,11 @@ const _ = class _ extends E {
   /** @internal */
   _renderTodayBtn() {
     let e = !1;
-    if (this.selectableTo && g(this.selectableTo, d(/* @__PURE__ */ new Date())) === -1)
+    if (this.selectableTo && D(this.selectableTo, d(/* @__PURE__ */ new Date())) === -1)
       return m``;
-    if (this.selectableFrom && g(this.selectableFrom, d(/* @__PURE__ */ new Date())) === 1)
+    if (this.selectableFrom && D(this.selectableFrom, d(/* @__PURE__ */ new Date())) === 1)
       return m``;
-    const { month: a, year: t } = f(), { month: r, year: h } = f(this.date), c = this.selectedDate ?? this.selectedDateRange.start, p = a === r && t === h, T = c && g(d(/* @__PURE__ */ new Date()), d(c), "months") === 0;
+    const { month: a, year: t } = f(), { month: r, year: h } = f(this.date), c = this.selectedDate ?? this.selectedDateRange.start, p = a === r && t === h, T = c && D(d(/* @__PURE__ */ new Date()), d(c), "months") === 0;
     return (p && !c || T && p) && (e = !0), m`
 			<div class="today">
 				<skf-button
@@ -181,17 +182,17 @@ const _ = class _ extends E {
 					variant="tertiary"
 					size="sm"
 				>
-					${k(this.date) && (this.selectedDate || this.selectedDateRange.start) && !e ? b(this, D).term("selectedDay") : b(this, D).term("today")}
+					${k(this.date) && (this.selectedDate || this.selectedDateRange.start) && !e ? b(this, g).term("selectedDay") : b(this, g).term("today")}
 				</skf-button>
 			</div>
 		`;
     function k(w) {
-      return g(w, d(/* @__PURE__ */ new Date()), "months") === 0;
+      return D(w, d(/* @__PURE__ */ new Date()), "months") === 0;
     }
   }
   /** @internal */
   _handleChangeCalendarView(e) {
-    const a = g(this.date, e);
+    const a = D(this.date, e);
     this._animateView(a, () => {
       this.date = e;
     }).then(() => {
@@ -217,7 +218,7 @@ const _ = class _ extends E {
     )) : Promise.resolve();
   }
 };
-D = new WeakMap(), _.styles = [F, L];
+g = new WeakMap(), _.styles = [F, L];
 let n = _;
 l([
   o({ reflect: !0 })

package/dist/components/dialog/dialog.component.js

@@ -110,7 +110,7 @@ const m = class m extends b {
   }
   /** Method that closes the dialog */
   async close() {
-    if (c(this, p) || !this.open) return;
+    if (c(this, p) || !this.$dialog?.open) return;
     d(this, p, !0);
     async function t(o) {
       return o.$dialog ? (o.emit("skf-dialog-closing"), await o._transition().exit(), o.$dialog.close(), o.open = !1, d(o, p, !1), !0) : !1;
@@ -190,7 +190,7 @@ n([
   x({ slot: "footer" })
 ], s.prototype, "footerEls", 2);
 n([
-  k("open")
+  k("open", { waitUntilFirstUpdate: !0 })
 ], s.prototype, "handleOpenChange", 1);
 export {
   s as SkfDialog

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

@@ -34,6 +34,7 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
      * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.
      */
     autocomplete?: HTMLInputElement['autocomplete'];
+    autofocus: boolean;
     /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
     set customInvalid(value: string | undefined);
     get customInvalid(): string | undefined;
@@ -111,6 +112,9 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     _handlePressStart: (event: MouseEvent) => void;
     /** @internal */
     _handlePressEnd: () => void;
+    focus(): void;
+    blur(): void;
+    select(): void;
     /** @internal */
     validateInput(): void;
     /**

package/dist/components/input/input.component.js

@@ -1,8 +1,8 @@
-var f = (a) => {
+var y = (a) => {
   throw TypeError(a);
 };
-var b = (a, n, t) => n.has(a) || f("Cannot " + t);
-var c = (a, n, t) => (b(a, n, "read from private field"), t ? t.call(a) : n.get(a)), _ = (a, n, t) => n.has(a) ? f("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(a) : n.set(a, t), $ = (a, n, t, r) => (b(a, n, "write to private field"), r ? r.call(a, t) : n.set(a, t), t);
+var b = (a, o, t) => o.has(a) || y("Cannot " + t);
+var c = (a, o, t) => (b(a, o, "read from private field"), t ? t.call(a) : o.get(a)), _ = (a, o, t) => o.has(a) ? y("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(a) : o.set(a, t), $ = (a, o, t, r) => (b(a, o, "write to private field"), r ? r.call(a, t) : o.set(a, t), t);
 import "../icon/icon.js";
 import { FormBase as g } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
@@ -12,21 +12,21 @@ import { Asterisk as P } from "../../internal/templates/asterisk.js";
 import { componentStyles as C } from "../../styles/component.styles.js";
 import { LocalizeController as k } from "../../utilities/localize.js";
 import { html as p, nothing as m } from "lit";
-import { state as v, property as s, query as S, queryAssignedNodes as x } from "lit/decorators.js";
+import { state as v, property as s, query as B, queryAssignedNodes as S } from "lit/decorators.js";
 import { ifDefined as l } from "lit/directives/if-defined.js";
-import { live as B } from "lit/directives/live.js";
+import { live as x } from "lit/directives/live.js";
 import { InputNumberController as A, InputPasswordController as V } from "./input.controllers.js";
 import I from "./input.styles.js";
-var L = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (a, n, t, r) => {
-  for (var o = r > 1 ? void 0 : r ? D(n, t) : n, h = a.length - 1, d; h >= 0; h--)
-    (d = a[h]) && (o = (r ? d(n, t, o) : d(o)) || o);
-  return r && o && L(n, t, o), o;
-}, u;
-const y = class y extends g {
+var L = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (a, o, t, r) => {
+  for (var n = r > 1 ? void 0 : r ? D(o, t) : o, h = a.length - 1, u; h >= 0; h--)
+    (u = a[h]) && (n = (r ? u(o, t, n) : u(n)) || n);
+  return r && n && L(o, t, n), n;
+}, d;
+const f = class f extends g {
   constructor() {
     super(...arguments);
-    _(this, u);
-    $(this, u, new k(this)), this._value = "", this.debug = !1, this.hideLabel = !1, this.inputmode = "text", this.lang = "en", this.readonly = !1, this.showValid = !1, this.size = "md", this.type = "text", this.validateOn = "change", this.invalid = !1, this._buttonDown = !1, this._numberController = new A(this), this._passwordController = new V(this), this._handleInput = () => {
+    _(this, d);
+    $(this, d, new k(this)), this._value = "", this.autofocus = !1, this.debug = !1, this.hideLabel = !1, this.inputmode = "text", this.lang = "en", this.readonly = !1, this.showValid = !1, this.size = "md", this.type = "text", this.validateOn = "change", this.invalid = !1, this._buttonDown = !1, this._numberController = new A(this), this._passwordController = new V(this), this._handleInput = () => {
       this._value = this.$input?.value ?? "", this.validateOn === "input" && (this._pristine = !1, this.validateInput());
     }, this._resetValue = (t) => {
       t.stopPropagation(), this.value = this.getAttribute("value")?.trim() ?? "", this._value = this.value, this._internals.setFormValue(this.value), this.$input?.focus();
@@ -52,7 +52,7 @@ const y = class y extends g {
 	`, this._renderPasswordButton = () => p`
 		<button
 			@click=${this._passwordController.toggleVisibility}
-			aria-label=${this._passwordController._type === "password" ? c(this, u).term("showPassword") : c(this, u).term("hidePassword")}
+			aria-label=${this._passwordController._type === "password" ? c(this, d).term("showPassword") : c(this, d).term("hidePassword")}
 			class="password skf-icon-host"
 			type="button"
 			@mousedown="${this._handlePressStart}"
@@ -67,7 +67,7 @@ const y = class y extends g {
 			@mousedown=${this._handlePressStart}
 			@mouseup=${this._handlePressEnd}
 			@mouseleave=${this._handlePressEnd}
-			aria-label=${c(this, u).term("clearEntry")}
+			aria-label=${c(this, d).term("clearEntry")}
 			class="search skf-icon-host"
 			type="button"
 		>
@@ -94,7 +94,7 @@ const y = class y extends g {
       this.validateOn === "change" && (this.validateOn = "input", this._pristine = !1), this._internals.setFormValue(this.$input?.value ?? ""), this.emitEvent("change"), this.validateInput();
     }), this.addEventListener("invalid", (t) => {
       this._pristine = !1, this.invalid = !0, this.customErrorDisplay && t.preventDefault();
-    }), this.addEventListener("reset", this._resetValue), this.validateInput();
+    }), this.value = this.getAttribute("value")?.trim() ?? "", this.autofocus && this.$input?.focus(), this.addEventListener("reset", this._resetValue), this.validateInput();
   }
   willUpdate(t) {
     if (t.has("invalid"))
@@ -108,14 +108,23 @@ const y = class y extends g {
   valueChanged() {
     this._internals.setFormValue(this.value), this.validateInput();
   }
-  attributeChangedCallback(t, r, o) {
-    if (super.attributeChangedCallback(t, r, o), t === "value" && this._internals.setFormValue(o), t === "custom-invalid")
-      if (typeof o == "string") {
-        const d = this.withFallback(o);
-        this._pristine = !1, this._internals.setValidity({ customError: !0 }, d), this.invalid = !0, this.hint = d, this.checkValidity();
+  attributeChangedCallback(t, r, n) {
+    if (super.attributeChangedCallback(t, r, n), t === "value" && this._internals.setFormValue(n), t === "custom-invalid")
+      if (typeof n == "string") {
+        const u = this.withFallback(n);
+        this._pristine = !1, this._internals.setValidity({ customError: !0 }, u), this.invalid = !0, this.hint = u, this.checkValidity();
       } else
         this._internals.setValidity({}), this.validateInput();
   }
+  focus() {
+    this.$input?.focus();
+  }
+  blur() {
+    this.$input?.blur();
+  }
+  select() {
+    this.$input?.select();
+  }
   /** @internal */
   validateInput() {
     if (this._internals.validity.customError || !this.$input) return;
@@ -124,17 +133,17 @@ const y = class y extends g {
       this._internals.setValidity({ customError: this._internals.validity.customError });
     else {
       this.invalid = !this._pristine && !r.valid;
-      let o;
-      for (o in r) {
-        const h = `data-${o.toString()}`;
-        if (r[o] && !this.hasAttribute(h) && this.debug && console.log(
+      let n;
+      for (n in r) {
+        const h = `data-${n.toString()}`;
+        if (r[n] && !this.hasAttribute(h) && this.debug && console.log(
           `Add custom message on ${this.localName} using attribute: ${h.toUpperCase()}="Your custom message"`
-        ), r[o]) {
-          this.validationError = o.toString();
-          const d = this.hasAttribute(h) ? this.getAttribute(h) : this.$input.validationMessage;
+        ), r[n]) {
+          this.validationError = n.toString();
+          const u = this.hasAttribute(h) ? this.getAttribute(h) : this.$input.validationMessage;
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },
-            this.withFallback(d)
+            this.withFallback(u)
           ), this.invalid && this.customErrorDisplay && this.checkValidity();
         }
       }
@@ -147,7 +156,7 @@ const y = class y extends g {
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${t} id="label">
 						<slot>${this.label}</slot>
-						${this.required ? P(c(this, u).term("required")) : m}
+						${this.required ? P(c(this, d).term("required")) : m}
 					</div>
 					<div id="input">
 						${this.type === "search" ? p`<skf-icon class="skf-icon-host" name="search" size="sm"></skf-icon>` : m}
@@ -161,7 +170,7 @@ const y = class y extends g {
 								?readonly=${this.readonly}
 								?required=${this.required}
 								.autocomplete=${this.autocomplete ?? "off"}
-								.value=${B(this.value)}
+								.value=${x(this.value)}
 								@blur=${this._onBlur}
 								@input=${this._handleInput}
 								aria-describedby=${l(this.hint?.trim() ? "hint" : m)}
@@ -203,14 +212,17 @@ const y = class y extends g {
 		`;
   }
 };
-u = new WeakMap(), y.styles = [C, I];
-let i = y;
+d = new WeakMap(), f.styles = [C, I];
+let i = f;
 e([
   v()
 ], i.prototype, "_value", 2);
 e([
   s()
 ], i.prototype, "autocomplete", 2);
+e([
+  s({ type: Boolean })
+], i.prototype, "autofocus", 2);
 e([
   s({ attribute: "custom-invalid", reflect: !0 })
 ], i.prototype, "customInvalid", 1);
@@ -287,10 +299,10 @@ e([
   v()
 ], i.prototype, "_buttonDown", 2);
 e([
-  S("input")
+  B("input")
 ], i.prototype, "$input", 2);
 e([
-  x({ flatten: !0 })
+  S({ flatten: !0 })
 ], i.prototype, "_defaultSlot", 2);
 e([
   E("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })

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
 };

package/dist/custom-elements.json

@@ -1650,19 +1650,6 @@
               "attribute": "invalid-dates",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "lang",
-              "type": {
-                "text": "Language"
-              },
-              "default": "'en'",
-              "description": "Sets the internal language of the component",
-              "attribute": "lang",
-              "expandedType": {
-                "text": "'en' | 'es' | 'pt' | 'sv'"
-              }
-            },
             {
               "kind": "field",
               "name": "locale",
@@ -1810,18 +1797,6 @@
               "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
               "fieldName": "invalidDates"
             },
-            {
-              "name": "lang",
-              "type": {
-                "text": "Language"
-              },
-              "default": "'en'",
-              "description": "Sets the internal language of the component",
-              "fieldName": "lang",
-              "expandedType": {
-                "text": "'en' | 'es' | 'pt' | 'sv'"
-              }
-            },
             {
               "name": "locale",
               "type": {
@@ -3878,6 +3853,15 @@
               "description": "Indicates whether the value of the control can be automatically completed by the browser. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.",
               "attribute": "autocomplete"
             },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "autofocus"
+            },
             {
               "kind": "field",
               "name": "customInvalid",
@@ -4094,6 +4078,27 @@
               "name": "value",
               "description": "The current value of the input field",
               "attribute": "value"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "type": {
+                "text": "focus() => void"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "type": {
+                "text": "blur() => void"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "select",
+              "type": {
+                "text": "select() => void"
+              }
             }
           ],
           "events": [
@@ -4137,6 +4142,14 @@
               "description": "Indicates whether the value of the control can be automatically completed by the browser. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.",
               "fieldName": "autocomplete"
             },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "autofocus"
+            },
             {
               "name": "custom-invalid",
               "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
@@ -5909,6 +5922,14 @@
               "description": "If defined, limits the number of selectable options",
               "attribute": "max"
             },
+            {
+              "kind": "field",
+              "name": "maxVisibleItems",
+              "type": {
+                "text": "number | undefined"
+              },
+              "attribute": "max-visible-items"
+            },
             {
               "kind": "field",
               "name": "min",
@@ -5974,17 +5995,18 @@
               "description": "Returns the selected value. (if multiple: in a comma separated string). If set will default set corresponding option."
             },
             {
-              "kind": "method",
-              "name": "_handleSizeUpdate",
+              "kind": "field",
+              "name": "desiredPopupHeight",
               "type": {
-                "text": "_handleSizeUpdate() => void"
-              }
+                "text": "number | undefined"
+              },
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleExpandedChange",
+              "name": "_handleSizeUpdate",
               "type": {
-                "text": "handleExpandedChange() => void"
+                "text": "_handleSizeUpdate() => void"
               }
             },
             {
@@ -6124,6 +6146,13 @@
               "description": "If defined, limits the number of selectable options",
               "fieldName": "max"
             },
+            {
+              "name": "max-visible-items",
+              "type": {
+                "text": "number | undefined"
+              },
+              "fieldName": "maxVisibleItems"
+            },
             {
               "name": "min",
               "type": {

package/dist/internal/base-classes/popover/popover.base.js

@@ -1,4 +1,4 @@
-import { flip as w, offset as E, arrow as $, computePosition as O } from "@floating-ui/dom";
+import { flip as w, offset as $, arrow as E, computePosition as O } from "@floating-ui/dom";
 import { SkfElement as C } from "../../components/skf-element.js";
 import { PopoverController as x } from "../../controllers/popover.controller.js";
 import { uuid as A } from "../../helpers/uuid.js";
@@ -21,7 +21,7 @@ const s = (p = class extends C {
       const o = t.newState === "open";
       this.isOpen = o, this.emit(o ? "skf-opened" : "skf-closed");
     }, this.handleToggleOpen = async () => {
-      this.$anchor && (this.isOpen ? (this.$popover.togglePopover(!0), this.$popover.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 250, fill: "forwards" })) : (await this.$popover.animate([{ opacity: 0 }], { duration: 150, fill: "forwards" }).finished, this.$popover.togglePopover(this.isOpen)));
+      this.$anchor && (this.isOpen ? (this.$popover.togglePopover(!0), this.$popover.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 250, fill: "forwards" })) : (await this.$popover.animate([{ opacity: 0 }], { duration: 150, fill: "forwards" }).finished, this.$popover && this.$popover.togglePopover(this.isOpen)));
     }, this.handleAnchorChange = async () => {
       if (!this.anchor) return;
       await this.popoverController.stop(), this.$anchor && this.removeEventListeners();
@@ -29,8 +29,8 @@ const s = (p = class extends C {
       this.$anchor = t.getElementById(this.anchor), this.$anchor && (this.addEventListeners(this.$anchor), this.popoverController.start());
     }, this.reposition = async () => {
       if (!this.$anchor) return;
-      const t = [w(), E(this.offset)];
-      this.arrow && t.push($({ element: this.$arrow }));
+      const t = [w(), $(this.offset)];
+      this.arrow && t.push(E({ element: this.$arrow }));
       const { x: o, y: i, middlewareData: e } = await O(this.$anchor, this.$popover, {
         placement: this.placement,
         middleware: t,

package/dist/types/jsx/custom-element-jsx.d.ts

@@ -426,8 +426,6 @@ export type SkfDatepickerCalendarProps = {
   "invalid-dates"?: SkfDatepickerCalendar['invalidDates'];
   /** A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. */
   "invalidDates"?: SkfDatepickerCalendar['invalidDates'];
-  /** Sets the internal language of the component */
-  "lang"?: SkfDatepickerCalendar['lang'];
   /**  */
   "locale"?: SkfDatepickerCalendar['locale'];
   /**  */
@@ -674,6 +672,8 @@ export type SkfInputProps = {
   /** Indicates whether the value of the control can be automatically completed by the browser. See
 [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details. */
   "autocomplete"?: SkfInput['autocomplete'];
+  /**  */
+  "autofocus"?: SkfInput['autofocus'];
   /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
   "custom-invalid"?: SkfInput['customInvalid'];
   /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
@@ -945,6 +945,10 @@ export type SkfSelectProps = {
   "lang"?: SkfSelect['lang'];
   /** If defined, limits the number of selectable options */
   "max"?: SkfSelect['max'];
+  /**  */
+  "max-visible-items"?: SkfSelect['maxVisibleItems'];
+  /**  */
+  "maxVisibleItems"?: SkfSelect['maxVisibleItems'];
   /** If defined, sets the minimum number of required options */
   "min"?: SkfSelect['min'];
   /** If true, allows for multiple options to be selected */
@@ -1509,7 +1513,6 @@ export type SkfTooltipProps = {
  * - `eventid`: undefined 
  * - `firstDayOfWeek`: undefined 
  * - `invalid-dates`/`invalidDates`: A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. 
- * - `lang`: Sets the internal language of the component 
  * - `locale`: undefined 
  * - `range`: undefined 
  * - `selectable-from`/`selectableFrom`: Earliest selectable date. (yyyy-mm-dd format) 
@@ -1825,6 +1828,7 @@ export type SkfTooltipProps = {
  * - `required`/`undefined`: If true, value is required or must be checked for the form to be submittable 
  * - `autocomplete`: Indicates whether the value of the control can be automatically completed by the browser. See
  * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details. 
+ * - `autofocus`: undefined 
  * - `custom-invalid`/`customInvalid`: If defined, forces component to invalid state until removed. Its value is used as hint text. 
  * - `debug`: If true, outputs helping hints in console 
  * - `hide-label`/`hideLabel`: If true, hides the label visually 
@@ -1862,6 +1866,14 @@ export type SkfTooltipProps = {
  * Areas where markup can be added to the component.
  * 
  * - `(default)`: The Inputs label. Alternatively, you can use the `label` attribute.
+ * 
+ * #### Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `focus() => void`: undefined
+ * - `blur() => void`: undefined
+ * - `select() => void`: undefined
   */
     "skf-input": Partial<SkfInputProps & BaseProps<SkfInput> & BaseEvents>;
 
@@ -2128,6 +2140,7 @@ export type SkfTooltipProps = {
  * - `label`: If defined, displays provided label 
  * - `lang`: Sets the internal language of the component 
  * - `max`: If defined, limits the number of selectable options 
+ * - `max-visible-items`/`maxVisibleItems`: undefined 
  * - `min`: If defined, sets the minimum number of required options 
  * - `multiple`: If true, allows for multiple options to be selected 
  * - `name`: If defined, set name of the component 
@@ -2161,7 +2174,6 @@ export type SkfTooltipProps = {
  * Methods that can be called to access component functionality.
  * 
  * - `_handleSizeUpdate() => void`: undefined
- * - `handleExpandedChange() => void`: undefined
   */
     "skf-select": Partial<SkfSelectProps & BaseProps<SkfSelect> & BaseEvents>;
 

package/dist/types/vue/index.d.ts

@@ -203,8 +203,6 @@ type SkfDatepickerCalendarProps = {
   firstDayOfWeek?: SkfDatepickerCalendar["firstDayOfWeek"];
   /** A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. */
   "invalid-dates"?: SkfDatepickerCalendar["invalidDates"];
-  /** Sets the internal language of the component */
-  lang?: SkfDatepickerCalendar["lang"];
   /**  */
   locale?: SkfDatepickerCalendar["locale"];
   /**  */
@@ -392,6 +390,8 @@ type SkfInputProps = {
   /** Indicates whether the value of the control can be automatically completed by the browser. See
 [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details. */
   autocomplete?: SkfInput["autocomplete"];
+  /**  */
+  autofocus?: SkfInput["autofocus"];
   /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
   "custom-invalid"?: SkfInput["customInvalid"];
   /** If true, outputs helping hints in console */
@@ -609,6 +609,8 @@ type SkfSelectProps = {
   lang?: SkfSelect["lang"];
   /** If defined, limits the number of selectable options */
   max?: SkfSelect["max"];
+  /**  */
+  "max-visible-items"?: SkfSelect["maxVisibleItems"];
   /** If defined, sets the minimum number of required options */
   min?: SkfSelect["min"];
   /** If true, allows for multiple options to be selected */

package/dist/vscode.html-custom-data.json

@@ -338,11 +338,6 @@
           "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
           "values": []
         },
-        {
-          "name": "lang",
-          "description": "Sets the internal language of the component",
-          "values": [{ "name": "Language" }]
-        },
         { "name": "locale", "values": [] },
         { "name": "range", "values": [] },
         {
@@ -720,6 +715,7 @@
           "description": "Indicates whether the value of the control can be automatically completed by the browser. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.",
           "values": [{ "name": "HTMLInputElement['autocomplete']" }]
         },
+        { "name": "autofocus", "values": [] },
         {
           "name": "custom-invalid",
           "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
@@ -1198,6 +1194,7 @@
           "description": "If defined, limits the number of selectable options",
           "values": []
         },
+        { "name": "max-visible-items", "values": [] },
         {
           "name": "min",
           "description": "If defined, sets the minimum number of required options",

package/dist/web-types.json

@@ -745,11 +745,6 @@
               "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
               "value": { "type": "string | undefined" }
             },
-            {
-              "name": "lang",
-              "description": "Sets the internal language of the component",
-              "value": { "type": "Language", "default": "'en'" }
-            },
             {
               "name": "locale",
               "value": { "type": "string", "default": "'en-CA'" }
@@ -790,11 +785,6 @@
                 "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
                 "type": "string | undefined"
               },
-              {
-                "name": "lang",
-                "description": "Sets the internal language of the component",
-                "type": "Language"
-              },
               { "name": "locale", "type": "string" },
               { "name": "range", "type": "boolean" },
               {
@@ -1583,6 +1573,10 @@
                 "type": "HTMLInputElement['autocomplete'] | undefined"
               }
             },
+            {
+              "name": "autofocus",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "custom-invalid",
               "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
@@ -1733,6 +1727,7 @@
                 "description": "Indicates whether the value of the control can be automatically completed by the browser. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.",
                 "type": "HTMLInputElement['autocomplete'] | undefined"
               },
+              { "name": "autofocus", "type": "boolean" },
               {
                 "name": "customInvalid",
                 "description": "If defined, forces component to invalid state until removed. Its value is used as hint text."
@@ -2559,6 +2554,10 @@
               "description": "If defined, limits the number of selectable options",
               "value": { "type": "number | undefined" }
             },
+            {
+              "name": "max-visible-items",
+              "value": { "type": "number | undefined" }
+            },
             {
               "name": "min",
               "description": "If defined, sets the minimum number of required options",
@@ -2674,6 +2673,7 @@
                 "description": "If defined, limits the number of selectable options",
                 "type": "number | undefined"
               },
+              { "name": "maxVisibleItems", "type": "number | undefined" },
               {
                 "name": "min",
                 "description": "If defined, sets the minimum number of required options",

package/package.json

@@ -35,7 +35,7 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.2-beta.11",
+  "version": "1.0.2-beta.12",
   "dependencies": {
     "@floating-ui/dom": "^1.7.1",
     "@js-temporal/polyfill": "^0.5.1",