@skf-design-system/ui-components 1.0.2-beta.6 → 1.0.2-beta.7

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

@@ -9,20 +9,20 @@ 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 n, state as $, queryAssignedNodes as k } from "lit/decorators.js";
+import { property as a, state as $, queryAssignedNodes as O } from "lit/decorators.js";
 import { ifDefined as v } from "lit/directives/if-defined.js";
-import { styles as O } from "./select-option.styles.js";
-var E = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (e, s, t, i) => {
+import { styles as E } from "./select-option.styles.js";
+var k = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (e, s, t, i) => {
   for (var r = i > 1 ? void 0 : i ? w(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 && E(s, t, r), r;
-}, a, h;
+  return i && r && k(s, t, r), r;
+}, n, h;
 const c = class c extends C {
   constructor() {
     super();
-    f(this, a);
+    f(this, n);
     f(this, h);
-    m(this, a, this.attachInternals()), m(this, h, u(this, a).states), this._parent = null, this._shortcutUpdate = !1, this.disabled = !1, this.selected = !1, this.small = !1, this._handleClick = (t) => {
+    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._shortcutUpdate = !1;
   }
@@ -40,9 +40,6 @@ const c = class c extends C {
     var t;
     return !this._value && this._slotContainsOnlyText ? this._getSlottedContent().trim() : ((t = this._value) == null ? void 0 : t.trim()) ?? this.text;
   }
-  connectedCallback() {
-    super.connectedCallback(), this.role = "option";
-  }
   updated(t) {
     super.updated(t), this._parent ?? (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: {
@@ -106,34 +103,34 @@ const c = class c extends C {
 		`;
   }
 };
-a = new WeakMap(), h = new WeakMap(), c.styles = [N, O], c.shadowRootOptions = { ...T.shadowRootOptions, delegatesFocus: !0 };
+n = new WeakMap(), h = new WeakMap(), c.styles = [N, E], c.shadowRootOptions = { ...T.shadowRootOptions, delegatesFocus: !0 };
 let o = c;
 l([
-  n({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], o.prototype, "disabled", 2);
 l([
-  n({ reflect: !0 })
+  a({ reflect: !0 })
 ], o.prototype, "icon", 2);
 l([
-  n({ reflect: !0, attribute: "icon-color" })
+  a({ reflect: !0, attribute: "icon-color" })
 ], o.prototype, "iconColor", 2);
 l([
-  n({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], o.prototype, "selected", 2);
 l([
-  n({ reflect: !0, attribute: "short-label" })
+  a({ reflect: !0, attribute: "short-label" })
 ], o.prototype, "shortLabel", 2);
 l([
-  n({ attribute: !1 })
+  a({ attribute: !1 })
 ], o.prototype, "text", 1);
 l([
-  n({ reflect: !0 })
+  a({ reflect: !0 })
 ], o.prototype, "value", 1);
 l([
   $()
 ], o.prototype, "small", 2);
 l([
-  k({ flatten: !0 })
+  O({ flatten: !0 })
 ], o.prototype, "_assignedNodes", 2);
 l([
   x("small")

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,14 @@ 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-update-calendar-view - Fires when the calendar view is updated
  *
  * @tagname skf-select
  */
 export declare class SkfSelect extends FormBase {
+    #private;
     static styles: CSSResultGroup;
+    private _componentIsConnected;
     /** @internal */
     selectDelay: number;
     /** @internal */
@@ -54,6 +58,8 @@ 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;
     /** If defined, sets the minimum number of required options */
@@ -62,22 +68,18 @@ export declare class SkfSelect extends FormBase {
     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[];
@@ -135,8 +137,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>;

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

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

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

@@ -50,7 +50,7 @@ const s = e`
 		}
 
 		:is(.stepper-item--active, .stepper-item--completed) {
-			--_skf-stepper-color: var(--skf-text-color-emphasised);
+			--_skf-stepper-color: var(--skf-text-color-emphasized);
 		}
 
 		.stepper-item--enabled {
@@ -70,17 +70,17 @@ const s = e`
 			user-select: none;
 
 			:is(.stepper-item--active, .stepper-item--active-completed, .stepper-item--completed) & {
-				--_skf-stepper-circle-border-color: var(--skf-border-color-emphasised);
+				--_skf-stepper-circle-border-color: var(--skf-border-color-emphasized);
 			}
 
 			:is(.stepper-item--active, .stepper-item--active-completed) & {
 				--_skf-stepper-circle-color: var(--skf-text-color-inverse);
-				--_skf-stepper-circle-bg-color: var(--skf-bg-color-emphasised);
+				--_skf-stepper-circle-bg-color: var(--skf-bg-color-emphasized);
 			}
 
 			.stepper-item--enabled & {
 				--_skf-stepper-circle-border-color: #6292e4; /* Missing token */
-				--_skf-stepper-circle-color: var(--skf-text-color-emphasised);
+				--_skf-stepper-circle-color: var(--skf-text-color-emphasized);
 			}
 		}
 

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

@@ -1,5 +1,6 @@
 import { FormBase } from '../../internal/components/formBase.js';
 import type { FormFieldBaseProps } from '../../internal/types/formField.js';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-switch>` is a component that displays a list of actions or options
@@ -14,6 +15,7 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-switch
  */
 export declare class SkfSwitch extends FormBase implements FormFieldBaseProps {
+    #private;
     static styles: CSSResultGroup;
     /** @internal */
     private _initialChecked;
@@ -25,10 +27,10 @@ export declare class SkfSwitch extends FormBase implements FormFieldBaseProps {
     hideLabel: 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 Switch */
     size: 'sm' | 'md';
     /** The current value of the input field  */