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

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

@@ -2,6 +2,7 @@ import '../icon/icon.js';
 import { FormBase } from '../../internal/components/formBase.js';
 import type { FormFieldSeverity } from '../../internal/types.js';
 import type { FormFieldBaseProps } from '../../internal/types/formField.js';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-radio>` component is used to create a radio input
@@ -18,6 +19,7 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-radio
  */
 export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
+    #private;
     static styles: CSSResultGroup;
     /**
      * @internal
@@ -32,10 +34,10 @@ export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
     customInvalid: boolean;
     /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
     label?: string;
+    /** Sets the internal language of the component */
+    lang: Language;
     /** If defined, adds name to the input-element */
     name?: string;
-    /** If defined, renders an alternative A11y text for the asterisk */
-    requiredLabel?: string;
     /** Size of the Radio */
     size: 'sm' | 'md';
     /** If defined, displays provided severity state */

package/dist/components/radio/radio.component.js

@@ -1,34 +1,40 @@
-import "../icon/icon.js";
-import { FormBase as c } from "../../internal/components/formBase.js";
-import { watch as n } from "../../internal/helpers/watch.js";
-import { Asterisk as p } from "../../internal/templates/asterisk.js";
-import { componentStyles as v } from "../../styles/component.styles.js";
-import { html as m } from "lit";
-import { property as r, state as f, query as y } from "lit/decorators.js";
-import { ifDefined as b } from "lit/directives/if-defined.js";
-import { live as _ } from "lit/directives/live.js";
-import { styles as g } from "./radio.styles.js";
-var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (u, e, s, l) => {
-  for (var a = l > 1 ? void 0 : l ? C(e, s) : e, o = u.length - 1, h; o >= 0; o--)
-    (h = u[o]) && (a = (l ? h(e, s, a) : h(a)) || a);
-  return l && a && k(e, s, a), a;
+var p = (e) => {
+  throw TypeError(e);
 };
-const d = class d extends c {
+var m = (e, i, t) => i.has(e) || p("Cannot " + t);
+var v = (e, i, t) => (m(e, i, "read from private field"), t ? t.call(e) : i.get(e)), f = (e, i, t) => i.has(e) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, t), y = (e, i, t, r) => (m(e, i, "write to private field"), r ? r.call(e, t) : i.set(e, t), t);
+import "../icon/icon.js";
+import { FormBase as _ } from "../../internal/components/formBase.js";
+import { watch as c } from "../../internal/helpers/watch.js";
+import { Asterisk as b } from "../../internal/templates/asterisk.js";
+import { componentStyles as k } from "../../styles/component.styles.js";
+import { LocalizeController as C } from "../../utilities/localize.js";
+import { nothing as V, html as $ } from "lit";
+import { property as o, state as I, query as E } from "lit/decorators.js";
+import { ifDefined as w } from "lit/directives/if-defined.js";
+import { live as A } from "lit/directives/live.js";
+import { styles as q } from "./radio.styles.js";
+var F = Object.defineProperty, D = Object.getOwnPropertyDescriptor, a = (e, i, t, r) => {
+  for (var l = r > 1 ? void 0 : r ? D(i, t) : i, h = e.length - 1, n; h >= 0; h--)
+    (n = e[h]) && (l = (r ? n(i, t, l) : n(l)) || l);
+  return r && l && F(i, t, l), l;
+}, d;
+const u = class u extends _ {
   constructor() {
-    super(...arguments), this._initialChecked = !1, this.debug = !1, this.checked = !1, this.customInvalid = !1, this.size = "md", this.showValid = !1, this.value = "", this._invalid = !1, this._resetValue = (e) => {
-      e.stopPropagation(), this.checked = this._initialChecked, this.$input && (this.$input.checked = !!this._initialChecked), this.setFormValue(this.checked ? this.value : "");
+    super(...arguments);
+    f(this, d);
+    y(this, d, new C(this)), this._initialChecked = !1, this.debug = !1, this.checked = !1, this.customInvalid = !1, this.lang = "en", this.size = "md", this.showValid = !1, this.value = "", this._invalid = !1, this._resetValue = (t) => {
+      t.stopPropagation(), this.checked = this._initialChecked, this.$input && (this.$input.checked = !!this._initialChecked), this.setFormValue(this.checked ? this.value : "");
     };
   }
   connectedCallback() {
     super.connectedCallback(), this._validateInput();
   }
   firstUpdated() {
-    var e;
-    (e = this.$input) == null || e.addEventListener("change", (s) => {
-      var l;
-      s.stopPropagation(), this.pristine = !1, this.checked = ((l = this.$input) == null ? void 0 : l.checked) ?? !1, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(""), this.emitEvent("change");
-    }), this.addEventListener("invalid", (s) => {
-      this.pristine = !1, this._invalid = !0, this.customErrorDisplay && s.preventDefault();
+    this.$input?.addEventListener("change", (t) => {
+      t.stopPropagation(), this.pristine = !1, this.checked = this.$input?.checked ?? !1, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(""), this.emitEvent("change");
+    }), this.addEventListener("invalid", (t) => {
+      this.pristine = !1, this._invalid = !0, this.customErrorDisplay && t.preventDefault();
     }), this._initialChecked = this.checked, this.addEventListener("reset", this._resetValue);
   }
   handleInvalidChange() {
@@ -42,109 +48,108 @@ const d = class d extends c {
   }
   handleCustomInvalidChange() {
     if (this.customInvalid) {
-      const s = (
+      const r = (
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         this.getAttribute("data-customerror") || "Set a custom error message using the data-customerror attribute"
       );
-      this.pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, s), this.checkValidity();
+      this.pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, r), this.checkValidity();
     } else
       this.setValidity({}), this._validateInput();
   }
   /** @internal */
   _uncheckSiblingRadios() {
-    const e = this.name;
-    if (!e) return;
-    (this.form ?? document).querySelectorAll(`skf-radio[name="${e}"]`).forEach((a) => {
-      const o = this.form === a.form, h = !this.form && !a.form;
-      a !== this && (o || h) && (a.checked = !1);
+    const t = this.name;
+    if (!t) return;
+    (this.form ?? document).querySelectorAll(`skf-radio[name="${t}"]`).forEach((h) => {
+      const n = this.form === h.form, g = !this.form && !h.form;
+      h !== this && (n || g) && (h.checked = !1);
     });
   }
   /** @internal */
   _validateInput() {
-    var e;
     if (this._invalid = !1, this.customInvalid) {
-      const s = this.getAttribute("data-customerror");
-      this.setValidity({ customError: !0 }, this.withFallback(s)), this._invalid = !0;
+      const t = this.getAttribute("data-customerror");
+      this.setValidity({ customError: !0 }, this.withFallback(t)), this._invalid = !0;
     } else if (this.required && !this.checked) {
       this.pristine || (this._invalid = !0);
-      const s = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : (
+      const t = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : (
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        ((e = this.$input) == null ? void 0 : e.validationMessage) || "Please check this radio if you want to proceed"
+        this.$input?.validationMessage || "Please check this radio if you want to proceed"
       );
-      this.setValidity({ valueMissing: !0 }, this.withFallback(s));
+      this.setValidity({ valueMissing: !0 }, this.withFallback(t));
     } else
       this.setValidity({});
   }
   render() {
-    return m`
+    return $`
 			<label id="root">
 				<input
 					?disabled=${this.disabled}
 					?required=${this.required}
-					.checked=${_(this.checked)}
+					.checked=${A(this.checked)}
 					aria-invalid=${!!this._invalid}
-					name=${b(this.name)}
+					name=${w(this.name)}
 					type="radio"
 					value=${this.value}
 				/>
 				<div id="label">
 					<slot>${this.label}</slot>
-					${this.required ? p(this.requiredLabel) : null}
+					${this.required ? b(v(this, d).term("required")) : V}
 				</div>
 			</label>
 		`;
   }
 };
-d.styles = [v, g];
-let t = d;
-i([
-  r({ type: Boolean })
-], t.prototype, "debug", 2);
-i([
-  r({ type: Boolean, reflect: !0 })
-], t.prototype, "checked", 2);
-i([
-  r({ type: Boolean, attribute: "custom-invalid" })
-], t.prototype, "customInvalid", 2);
-i([
-  r()
-], t.prototype, "label", 2);
-i([
-  r()
-], t.prototype, "name", 2);
-i([
-  r({ attribute: "required-label" })
-], t.prototype, "requiredLabel", 2);
-i([
-  r({ reflect: !0 })
-], t.prototype, "size", 2);
-i([
-  r()
-], t.prototype, "severity", 2);
-i([
-  r({ type: Boolean, attribute: "show-valid" })
-], t.prototype, "showValid", 2);
-i([
-  r()
-], t.prototype, "value", 2);
-i([
-  f()
-], t.prototype, "_invalid", 2);
-i([
-  y("input")
-], t.prototype, "$input", 2);
-i([
-  n("_invalid")
-], t.prototype, "handleInvalidChange", 1);
-i([
-  n("_invalid", { afterUpdate: !0 })
-], t.prototype, "handleDebugInvalid", 1);
-i([
-  n("checked")
-], t.prototype, "handleCheckedChanged", 1);
-i([
-  n("customInvalid")
-], t.prototype, "handleCustomInvalidChange", 1);
+d = new WeakMap(), u.styles = [k, q];
+let s = u;
+a([
+  o({ type: Boolean })
+], s.prototype, "debug", 2);
+a([
+  o({ type: Boolean, reflect: !0 })
+], s.prototype, "checked", 2);
+a([
+  o({ type: Boolean, attribute: "custom-invalid" })
+], s.prototype, "customInvalid", 2);
+a([
+  o()
+], s.prototype, "label", 2);
+a([
+  o({ type: String })
+], s.prototype, "lang", 2);
+a([
+  o()
+], s.prototype, "name", 2);
+a([
+  o({ reflect: !0 })
+], s.prototype, "size", 2);
+a([
+  o()
+], s.prototype, "severity", 2);
+a([
+  o({ type: Boolean, attribute: "show-valid" })
+], s.prototype, "showValid", 2);
+a([
+  o()
+], s.prototype, "value", 2);
+a([
+  I()
+], s.prototype, "_invalid", 2);
+a([
+  E("input")
+], s.prototype, "$input", 2);
+a([
+  c("_invalid")
+], s.prototype, "handleInvalidChange", 1);
+a([
+  c("_invalid", { afterUpdate: !0 })
+], s.prototype, "handleDebugInvalid", 1);
+a([
+  c("checked")
+], s.prototype, "handleCheckedChanged", 1);
+a([
+  c("customInvalid")
+], s.prototype, "handleCustomInvalidChange", 1);
 export {
-  t as SkfRadio
+  s as SkfRadio
 };

package/dist/components/radio/radio.styles.js

@@ -51,7 +51,7 @@ const e = [
 				}
 
 				&:checked:not(:disabled) {
-					--_skf-radio-bg-color: var(--skf-bg-color-emphasised);
+					--_skf-radio-bg-color: var(--skf-bg-color-emphasized);
 					--_skf-radio-border-color: transparent;
 					--_skf-radio-marker-content: '';
 				}

package/dist/components/segmented-button/segmented-button-item.component.js

@@ -31,7 +31,7 @@ const s = class s extends n {
 				type="button"
 				value=${this.value}
 			>
-				${this.selected ? c`<skf-icon color="emphasised" name="check" size="sm"></skf-icon>` : m}
+				${this.selected ? c`<skf-icon color="emphasized" name="check" size="sm"></skf-icon>` : m}
 				<slot></slot>
 			</button>
 		`;

package/dist/components/segmented-button/segmented-button-item.styles.js

@@ -37,7 +37,7 @@ const o = e`
 			}
 
 			&:is([aria-checked='true'], [aria-pressed='true']) {
-				--_skf-segmented-button-item-border: var(--skf-border-color-emphasised);
+				--_skf-segmented-button-item-border: var(--skf-border-color-emphasized);
 			}
 
 			&:hover:not(:disabled) {

package/dist/components/segmented-button/segmented-button.component.js

@@ -1,35 +1,32 @@
 import { SkfElement as d } from "../../internal/components/skf-element.js";
-import { componentStyles as m } from "../../styles/component.styles.js";
+import { componentStyles as a } from "../../styles/component.styles.js";
 import { html as c } from "lit";
 import { property as u, state as f, queryAssignedElements as p } from "lit/decorators.js";
 import { ifDefined as g } from "lit/directives/if-defined.js";
-import { styles as y } from "./segmented-button.styles.js";
-var v = Object.defineProperty, n = (a, s, e, i) => {
-  for (var t = void 0, o = a.length - 1, r; o >= 0; o--)
-    (r = a[o]) && (t = r(s, e, t) || t);
-  return t && v(s, e, t), t;
+import { styles as v } from "./segmented-button.styles.js";
+var y = Object.defineProperty, n = (m, s, t, i) => {
+  for (var e = void 0, o = m.length - 1, r; o >= 0; o--)
+    (r = m[o]) && (e = r(s, t, e) || e);
+  return e && y(s, t, e), e;
 };
 const h = class h extends d {
   constructor() {
     super(...arguments), this.multiple = !1, this.value = "", this._handleSegmentedButtonItemSelected = (s) => {
-      const e = s.detail.item;
-      this.multiple && (e.selected = !e.selected), this.value = "";
+      const t = s.detail.item;
+      this.multiple && (t.selected = !t.selected), this.value = "";
       let i = [];
-      this.items.forEach((t) => {
-        this.multiple ? t.selected && (i = [...i, t.value], this.value = i.join()) : t !== e ? t.selected = !1 : (t.selected = !0, this.value = t.value);
+      this.items.forEach((e) => {
+        this.multiple ? e.selected && (i = [...i, e.value], this.value = i.join()) : e !== t ? e.selected = !1 : (e.selected = !0, this.value = e.value);
       });
     }, this._handleSlotChange = () => {
       this.items.forEach((s) => {
         if (s.isMultiple = this.multiple, !this.multiple) {
-          const e = this.items.filter((i) => i.selected);
-          e.length > 1 && e.slice(0, -1).forEach((i) => i.selected = !1);
+          const t = this.items.filter((i) => i.selected);
+          t.length > 1 && t.slice(0, -1).forEach((i) => i.selected = !1);
         }
       });
     }, this._handleKeyDown = (s) => {
-      if (["ArrowLeft", "ArrowRight"].includes(s.key)) {
-        const e = this._getKeyDownNextItem(s.key);
-        e == null || e.focus({ preventScroll: !0 });
-      }
+      ["ArrowLeft", "ArrowRight"].includes(s.key) && this._getKeyDownNextItem(s.key)?.focus({ preventScroll: !0 });
     };
   }
   firstUpdated() {
@@ -40,24 +37,25 @@ const h = class h extends d {
   }
   /** @internal */
   _getKeyDownNextItem(s) {
-    const e = this.items.findIndex((r) => r === document.activeElement);
-    if (e === -1) return;
-    const t = (e + (s === "ArrowRight" ? 1 : -1)) % this.items.length;
-    return this.items[t < 0 ? this.items.length - 1 : t];
+    const t = this.items.findIndex((r) => r === document.activeElement);
+    if (t === -1) return;
+    const e = (t + (s === "ArrowRight" ? 1 : -1)) % this.items.length;
+    return this.items[e < 0 ? this.items.length - 1 : e];
   }
   render() {
     return c`
-			<slot
+			<div
 				@keydown=${this._handleKeyDown}
-				@slotchange=${this._handleSlotChange}
 				aria-label=${g(this.ariaLabel ?? "Segmented button label")}
 				id="root"
 				role=${this.multiple ? "group" : "radiogroup"}
-			></slot>
+			>
+				<slot @slotchange=${this._handleSlotChange}></slot>
+			</div>
 		`;
   }
 };
-h.styles = [m, y];
+h.styles = [a, v];
 let l = h;
 n([
   u({ type: Boolean })

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

@@ -9,6 +9,7 @@ export interface SelectOptionEvent {
 }
 /**
  * The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.
+ * It represents an individual option in a select dropdown.
  *
  * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
  *
@@ -51,7 +52,7 @@ export declare class SkfSelectOption extends SkfElement {
     /** The option's label text (equivalent to the tags textContent) */
     set text(slottedTextContent: string);
     get text(): string;
-    /** Returns or sets the tags value. If value is omitted, defaults to the tags text. */
+    /** Returns or sets the option value. If value is omitted, defaults to the tags slotted text. */
     set value(optionValue: string);
     get value(): string;
     small: boolean;

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

@@ -1,47 +1,45 @@
 var y = (e) => {
   throw TypeError(e);
 };
-var v = (e, s, t) => s.has(e) || y("Cannot " + t);
-var u = (e, s, t) => (v(e, s, "read from private field"), t ? t.call(e) : s.get(e)), m = (e, s, t) => s.has(e) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), f = (e, s, t, i) => (v(e, s, "write to private field"), i ? i.call(e, t) : s.set(e, t), t);
+var b = (e, s, t) => s.has(e) || y("Cannot " + t);
+var u = (e, s, t) => (b(e, s, "read from private field"), t ? t.call(e) : s.get(e)), f = (e, s, t) => s.has(e) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), m = (e, s, t, i) => (b(e, s, "write to private field"), i ? i.call(e, t) : s.set(e, t), t);
 import "../icon/icon.js";
 import { SkfElement as C } from "../../internal/components/skf-element.js";
-import { stateMap as x } from "../../internal/helpers/stateMap.js";
-import { watch as g } from "../../internal/helpers/watch.js";
+import { stateMap as g } from "../../internal/helpers/stateMap.js";
+import { watch as x } from "../../internal/helpers/watch.js";
 import { componentStyles as N } from "../../styles/component.styles.js";
 import { LitElement as T, html as _ } from "lit";
 import { property as a, state as $, queryAssignedNodes as O } from "lit/decorators.js";
-import { ifDefined as b } from "lit/directives/if-defined.js";
+import { ifDefined as v } from "lit/directives/if-defined.js";
 import { styles as E } from "./select-option.styles.js";
-var w = Object.defineProperty, D = Object.getOwnPropertyDescriptor, l = (e, s, t, i) => {
-  for (var r = i > 1 ? void 0 : i ? D(s, t) : s, d = e.length - 1, p; d >= 0; d--)
-    (p = e[d]) && (r = (i ? p(s, t, r) : p(r)) || r);
-  return i && r && w(s, t, r), r;
+var k = Object.defineProperty, w = Object.getOwnPropertyDescriptor, r = (e, s, t, i) => {
+  for (var l = i > 1 ? void 0 : i ? w(s, t) : s, d = e.length - 1, p; d >= 0; d--)
+    (p = e[d]) && (l = (i ? p(s, t, l) : p(l)) || l);
+  return i && l && k(s, t, l), l;
 }, n, h;
 const c = class c extends C {
   constructor() {
     super();
-    m(this, n);
-    m(this, h);
-    f(this, n, this.attachInternals()), f(this, h, u(this, n).states), this._shortcutUpdate = !1, this.disabled = !1, this.selected = !1, this.small = !1, this._handleClick = (t) => {
+    f(this, n);
+    f(this, h);
+    m(this, n, this.attachInternals()), m(this, h, u(this, n).states), this._parent = null, this._shortcutUpdate = !1, this.disabled = !1, this.selected = !1, this.small = !1, this._handleClick = (t) => {
       t.stopPropagation(), this.selected = !this.selected;
-    }, this.role = "option", this._parent = this.closest("skf-select"), this._shortcutUpdate = !1;
+    }, this._shortcutUpdate = !1;
   }
   set text(t) {
     this.textContent = t.trim();
   }
   get text() {
-    var t;
-    return ((t = this.textContent) == null ? void 0 : t.trim()) ?? "";
+    return this.textContent?.trim() ?? "";
   }
   set value(t) {
     this._value = t.trim();
   }
   get value() {
-    var t;
-    return !this._value && this._slotContainsOnlyText ? this._getSlottedContent().trim() : ((t = this._value) == null ? void 0 : t.trim()) ?? this.text;
+    return !this._value && this._slotContainsOnlyText ? this._getSlottedContent().trim() : this._value?.trim() ?? this.text;
   }
   updated(t) {
-    super.updated(t), t.has("selected") && !this._shortcutUpdate && this.emit("skf-select-option-select", {
+    super.updated(t), this._parent ??= this.closest("skf-select"), this._parent || console.warn("skf-select-option must be used inside a skf-select or skf-select-option-group"), t.has("selected") && !this._shortcutUpdate && this.emit("skf-select-option-select", {
       detail: {
         value: this.selected ? this.value : null,
         option: this
@@ -49,7 +47,7 @@ const c = class c extends C {
     });
   }
   _handleStateChange() {
-    x(u(this, h), "small").set(this.small);
+    g(u(this, h), "small").set(this.small);
   }
   /**
    * @internal
@@ -71,10 +69,7 @@ const c = class c extends C {
   /** @internal */
   get _slotContainsOnlyText() {
     return this._assignedNodes ? [...this._assignedNodes].every(
-      (i) => {
-        var r;
-        return i.nodeType === Node.TEXT_NODE && ((r = i.textContent) == null ? void 0 : r.trim()) !== "";
-      }
+      (i) => i.nodeType === Node.TEXT_NODE && i.textContent?.trim() !== ""
     ) : "";
   }
   render() {
@@ -91,8 +86,8 @@ const c = class c extends C {
 					<slot name="icon">
 						${this.icon && _`
 							<skf-icon
-								color=${b(this.iconColor)}
-								data-color=${b((this.disabled || !this.iconColor) && "custom")}
+								color=${v(this.iconColor)}
+								data-color=${v((this.disabled || !this.iconColor) && "custom")}
 								name=${this.icon}
 							></skf-icon>
 						`}
@@ -105,35 +100,35 @@ const c = class c extends C {
 };
 n = new WeakMap(), h = new WeakMap(), c.styles = [N, E], c.shadowRootOptions = { ...T.shadowRootOptions, delegatesFocus: !0 };
 let o = c;
-l([
+r([
   a({ type: Boolean, reflect: !0 })
 ], o.prototype, "disabled", 2);
-l([
+r([
   a({ reflect: !0 })
 ], o.prototype, "icon", 2);
-l([
+r([
   a({ reflect: !0, attribute: "icon-color" })
 ], o.prototype, "iconColor", 2);
-l([
+r([
   a({ type: Boolean, reflect: !0 })
 ], o.prototype, "selected", 2);
-l([
+r([
   a({ reflect: !0, attribute: "short-label" })
 ], o.prototype, "shortLabel", 2);
-l([
+r([
   a({ attribute: !1 })
 ], o.prototype, "text", 1);
-l([
+r([
   a({ reflect: !0 })
 ], o.prototype, "value", 1);
-l([
+r([
   $()
 ], o.prototype, "small", 2);
-l([
+r([
   O({ flatten: !0 })
 ], o.prototype, "_assignedNodes", 2);
-l([
-  g("small")
+r([
+  x("small")
 ], o.prototype, "_handleStateChange", 1);
 export {
   o as SkfSelectOption

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

@@ -4,6 +4,7 @@ import { FormBase } from '../../internal/components/formBase.js';
 import '../../internal/components/hint/hint.js';
 import { PopoverController } from '../../internal/controllers/popover.controller.js';
 import type { FormFieldSeverity } from '../../internal/types.js';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 import { SkfSelectOption, type SelectOptionEvent } from './select-option.component.js';
 import { DeveloperFeedbackController, GlobalClickController, KeyboardNavigationController } from './select.controllers.js';
@@ -27,11 +28,15 @@ import { DeveloperFeedbackController, GlobalClickController, KeyboardNavigationC
  * @event {Event} reset - Fired when the form is reset
  * @event {CustomEvent} skf-select-dropdown - {detail: {expanded: boolean}} Fired when the select dropdown is toggled
  * @event {CustomEvent} skf-select-option-select - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled
+ * @event {CustomEvent} skf-select-connected - Fires when the select options are connected, useful for setting selected option(s) via value property. E.g mySkfSelect.value = 'option1,option2';
  *
  * @tagname skf-select
  */
 export declare class SkfSelect extends FormBase {
+    #private;
     static styles: CSSResultGroup;
+    private _componentIsConnected;
+    private _defaultButtonLabel;
     /** @internal */
     selectDelay: number;
     /** @internal */
@@ -54,30 +59,29 @@ export declare class SkfSelect extends FormBase {
     get selectedOptionsText(): string[];
     /** If defined, displays provided label */
     label?: string;
+    /** Sets the internal language of the component */
+    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 */
     multiple: boolean;
     /** If defined, set name of the component */
     name?: string;
-    /** If defined, renders an alternative A11y text for the asterisk */
-    requiredLabel?: string;
     /** If defined, displays provided severity state */
     severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
     showValid: boolean;
     /** Size of the Select */
     size: 'sm' | 'md';
-    /** Read only, returns the selected value. (if multiple: in a comma separated string) */
+    /** Returns the selected value. (if multiple: in a comma separated string). If set will default set corresponding option. */
     set value(newValue: string);
     get value(): string;
-    /** @internal */
-    /** Stores the selected SkfSelectOption tag(s) in a array. Is the source of truth for the internal state. */
+    /** @internal - Stores the selected SkfSelectOption tag(s) in a array. Is the source of truth for the internal state. */
     private _selectedOptions;
-    /** @internal */
-    /** The selected options in an array. Treat it as a read only property. See selectedValues, slectedSlots for computed value arrays. */
+    /** @internal - Read only. The selected options in an array. See also selectedValues, slectedSlots for computed value arrays. */
     set selectedOptions(option: SkfSelectOption[]);
     /** @internal */
     get selectedOptions(): SkfSelectOption[];
@@ -86,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 */
@@ -106,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;
@@ -135,8 +143,10 @@ export declare class SkfSelect extends FormBase {
     _resetSelectedOptions: (target?: SkfSelectOption) => void;
     /** @internal */
     _handleSlotChange: () => void;
-    /** @internal */
-    _computeVisibleValue: () => string;
+    /** @internal - on slot update, if value is set, select the corresponding option */
+    _ifValueIsSetSelectOption: () => void;
+    /** @internal - Computes the visible value of the select component - if multiple options are selected, shows a visually dimmed summary (meta info) */
+    _computeVisibleValue: () => string | null;
     /** @internal */
     private _validateInput;
     render(): import("lit").TemplateResult<1>;