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

package/dist/components/loader/loader.component.js

@@ -1,37 +1,37 @@
-var y = (t) => {
+var f = (t) => {
   throw TypeError(t);
 };
-var b = (t, e, r) => e.has(t) || y("Cannot " + r);
-var m = (t, e, r) => (b(t, e, "read from private field"), r ? r.call(t) : e.get(t)), v = (t, e, r) => e.has(t) ? y("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), h = (t, e, r, i) => (b(t, e, "write to private field"), i ? i.call(t, r) : e.set(t, r), r);
-import { SkfElement as _ } from "../../internal/components/skf-element.js";
+var y = (t, e, r) => e.has(t) || f("Cannot " + r);
+var c = (t, e, r) => (y(t, e, "read from private field"), r ? r.call(t) : e.get(t)), m = (t, e, r) => e.has(t) ? f("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), v = (t, e, r, i) => (y(t, e, "write to private field"), i ? i.call(t, r) : e.set(t, r), r);
+import { SkfElement as b } from "../../internal/components/skf-element.js";
 import { stateMap as g } from "../../internal/helpers/stateMap.js";
 import { watch as C } from "../../internal/helpers/watch.js";
 import { componentStyles as O } from "../../styles/component.styles.js";
 import { html as P } from "lit";
-import { property as d } from "lit/decorators.js";
-import { styles as S } from "./loader.styles.js";
-var j = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (t, e, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? w(e, r) : e, n = t.length - 1, c; n >= 0; n--)
-    (c = t[n]) && (s = (i ? c(e, r, s) : c(s)) || s);
-  return i && s && j(e, r, s), s;
+import { property as _ } from "lit/decorators.js";
+import { styles as j } from "./loader.styles.js";
+var w = Object.defineProperty, z = Object.getOwnPropertyDescriptor, h = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? z(e, r) : e, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (s = (i ? l(e, r, s) : l(s)) || s);
+  return i && s && w(e, r, s), s;
 };
 const u = {
   invert: "invert",
   size: ["md", "sm"]
 };
-var o, p;
-const f = class f extends _ {
+var a, p;
+const d = class d extends b {
   constructor() {
     super(...arguments);
-    v(this, o);
-    v(this, p);
-    h(this, o, this.attachInternals()), h(this, p, m(this, o).states), this.ariaLabel = "Loading...", this.invert = !1, this.size = "md";
+    m(this, a);
+    m(this, p);
+    v(this, a, this.attachInternals()), v(this, p, c(this, a).states), this.invert = !1, this.size = "md";
   }
   connectedCallback() {
     super.connectedCallback(), this.role = "progressbar", this.ariaLive = "polite";
   }
   _handleStateChange(r, i, s) {
-    g(m(this, p), u[r]).set(s);
+    g(c(this, p), u[r]).set(s);
   }
   render() {
     return P`
@@ -43,20 +43,17 @@ const f = class f extends _ {
 		`;
   }
 };
-o = new WeakMap(), p = new WeakMap(), f.styles = [O, S];
-let a = f;
-l([
-  d({ type: String, attribute: "aria-label" })
-], a.prototype, "ariaLabel", 2);
-l([
-  d({ type: Boolean })
-], a.prototype, "invert", 2);
-l([
-  d({ type: String })
-], a.prototype, "size", 2);
-l([
+a = new WeakMap(), p = new WeakMap(), d.styles = [O, j];
+let o = d;
+h([
+  _({ type: Boolean })
+], o.prototype, "invert", 2);
+h([
+  _({ type: String })
+], o.prototype, "size", 2);
+h([
   C(Object.keys(u))
-], a.prototype, "_handleStateChange", 1);
+], o.prototype, "_handleStateChange", 1);
 export {
-  a as SkfLoader
+  o as SkfLoader
 };

package/dist/components/loader/loader.styles.js

@@ -7,7 +7,7 @@ const o = a`
 			}
 
 			#root {
-				--_skf-loader-color: var(--skf-bg-color-emphasised);
+				--_skf-loader-color: var(--skf-bg-color-emphasized);
 				--_skf-loader-gap: var(--skf-spacing-50);
 				--_skf-loader-size: var(--skf-size-12);
 

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

@@ -1,5 +1,5 @@
 import { css as o } from "lit";
-const e = o`
+const r = o`
 	@layer components {
 		:host {
 			display: block;
@@ -7,16 +7,17 @@ const e = o`
 
 		#root {
 			block-size: var(--skf-size-44);
+			display: flex;
 			padding-inline: var(--skf-spacing-75);
+		}
+	}
 
-			@media screen and (any-hover: hover) {
-				&:hover {
-					background-color: var(--skf-color-blue-lighest);
-				}
-			}
+	@layer states {
+		:host(:not([aria-disabled]):hover) #root {
+			background-color: var(--skf-color-blue-lightest);
 		}
 	}
 `;
 export {
-  e as styles
+  r as styles
 };

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

@@ -11,10 +11,13 @@ import type { CSSResultGroup } from 'lit';
  * @attribute {"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"} [placement='bottom-start'] - The placement of the menu
  * @attribute {string} anchor - The id of the element the menu will be anchored to
  *
+ * @property {(void) => void} open() - Method that opens the menu
+ * @property {(void) => void} close() - Method that closes the menu
+ *
  * @event {CustomEvent} skf-opened - Fired when the menu is opened
  * @event {CustomEvent} skf-closed - Fired when the menu is closed
  *
- * @slot - The menu popover content
+ * @slot - The menu content
  *
  * @tagname skf-menu
  */

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

@@ -1,4 +1,5 @@
 import { SkfElement } from '../../internal/components/skf-element';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-nav>` is a component that displays a list of <nav-items>.
@@ -12,6 +13,8 @@ import { type CSSResultGroup } from 'lit';
 export declare class SkfNav extends SkfElement {
     #private;
     static styles: CSSResultGroup;
+    /** Sets the internal language of the component */
+    lang: Language;
     /** If true, the navigation will be displayed vertically */
     vertical: boolean;
     /** @internal */

package/dist/components/nav/nav.component.js

@@ -1,55 +1,60 @@
 var u = (t) => {
   throw TypeError(t);
 };
-var y = (t, e, r) => e.has(t) || u("Cannot " + r);
-var c = (t, e, r) => (y(t, e, "read from private field"), r ? r.call(t) : e.get(t)), m = (t, e, r) => e.has(t) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), h = (t, e, r, i) => (y(t, e, "write to private field"), i ? i.call(t, r) : e.set(t, r), r);
-import { SkfElement as _ } from "../../internal/components/skf-element.js";
-import { stateMap as d } from "../../internal/helpers/stateMap.js";
+var g = (t, e, r) => e.has(t) || u("Cannot " + r);
+var p = (t, e, r) => (g(t, e, "read from private field"), r ? r.call(t) : e.get(t)), c = (t, e, r) => e.has(t) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), m = (t, e, r, i) => (g(t, e, "write to private field"), i ? i.call(t, r) : e.set(t, r), r);
+import { SkfElement as d } from "../../internal/components/skf-element.js";
+import { stateMap as C } from "../../internal/helpers/stateMap.js";
 import { watch as b } from "../../internal/helpers/watch.js";
-import { componentStyles as g } from "../../styles/component.styles.js";
-import { html as C } from "lit";
-import { property as O, queryAssignedElements as P } from "lit/decorators.js";
-import { ifDefined as w } from "lit/directives/if-defined.js";
-import { styles as D } from "./nav.styles.js";
-var E = Object.defineProperty, j = Object.getOwnPropertyDescriptor, f = (t, e, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? j(e, r) : e, n = t.length - 1, p; n >= 0; n--)
-    (p = t[n]) && (s = (i ? p(e, r, s) : p(s)) || s);
-  return i && s && E(e, r, s), s;
-}, o, l;
-const v = class v extends _ {
+import { componentStyles as w } from "../../styles/component.styles.js";
+import { LocalizeController as O } from "../../utilities/localize.js";
+import { html as P } from "lit";
+import { property as _, queryAssignedElements as D } from "lit/decorators.js";
+import { ifDefined as E } from "lit/directives/if-defined.js";
+import { styles as S } from "./nav.styles.js";
+var j = Object.defineProperty, x = Object.getOwnPropertyDescriptor, h = (t, e, r, i) => {
+  for (var o = i > 1 ? void 0 : i ? x(e, r) : e, f = t.length - 1, v; f >= 0; f--)
+    (v = t[f]) && (o = (i ? v(e, r, o) : v(o)) || o);
+  return i && o && j(e, r, o), o;
+}, a, l, n;
+const y = class y extends d {
   constructor() {
     super(...arguments);
-    m(this, o);
-    m(this, l);
-    h(this, o, this.attachInternals()), h(this, l, c(this, o).states), this.vertical = !1;
+    c(this, a);
+    c(this, l);
+    c(this, n);
+    m(this, a, new O(this)), m(this, l, this.attachInternals()), m(this, n, p(this, l).states), this.lang = "en", this.vertical = !1;
   }
   connectedCallback() {
-    super.connectedCallback(), this.ariaLabel = this.ariaLabel ?? "Main navigation", this.role = "navigation";
+    super.connectedCallback(), this.ariaLabel = p(this, a).term("mainNavigation"), this.role = "navigation";
   }
   _handleStateChange() {
-    d(c(this, l), "vertical").set(this.vertical), this._items.forEach((r) => {
+    C(p(this, n), "vertical").set(this.vertical), this._items.forEach((r) => {
       r.vertical = this.vertical;
     });
   }
   render() {
-    return C`
-			<ul aria-orientation=${w(this.vertical ? "vertical" : void 0)}>
+    return P`
+			<ul aria-orientation=${E(this.vertical ? "vertical" : void 0)}>
 				<slot></slot>
 			</ul>
 		`;
   }
 };
-o = new WeakMap(), l = new WeakMap(), v.styles = [g, D];
-let a = v;
-f([
-  O({ type: Boolean })
-], a.prototype, "vertical", 2);
-f([
-  P({ selector: "skf-nav-item" })
-], a.prototype, "_items", 2);
-f([
+a = new WeakMap(), l = new WeakMap(), n = new WeakMap(), y.styles = [w, S];
+let s = y;
+h([
+  _({ type: String })
+], s.prototype, "lang", 2);
+h([
+  _({ type: Boolean })
+], s.prototype, "vertical", 2);
+h([
+  D({ selector: "skf-nav-item" })
+], s.prototype, "_items", 2);
+h([
   b("vertical")
-], a.prototype, "_handleStateChange", 1);
+], s.prototype, "_handleStateChange", 1);
 export {
-  a as SkfNav
+  s as SkfNav
 };

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

@@ -9,10 +9,13 @@ import type { CSSResultGroup } from 'lit';
  * See [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles
  *
  * @attribute {"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"} [placement='bottom-start'] - The placement of the popover
- * @attribute {string} anchor - The id of the element the menu will be anchored to
+ * @attribute {string} anchor - The id of the element the popover will be anchored to
  *
- * @event {CustomEvent} skf-opened - Fired when the menu is opened
- * @event {CustomEvent} skf-closed - Fired when the menu is closed
+ * @property {(void) => void} open() - Method that opens the popover
+ * @property {(void) => void} close() - Method that closes the popover
+ *
+ * @event {CustomEvent} skf-opened - Fired when the popover is opened
+ * @event {CustomEvent} skf-closed - Fired when the popover is closed
  *
  * @slot - The popover content
  *

package/dist/components/progress/progress.styles.js

@@ -1,5 +1,5 @@
 import { css as r } from "lit";
-const s = r`
+const a = r`
 	@layer components {
 		@layer base {
 			#root {
@@ -11,7 +11,7 @@ const s = r`
 				overflow: hidden;
 
 				&::after {
-					background-color: var(--skf-bg-color-emphasised);
+					background-color: var(--skf-bg-color-emphasized);
 					block-size: inherit;
 					border-radius: inherit;
 					content: '';
@@ -51,5 +51,5 @@ const s = r`
 	}
 `;
 export {
-  s as styles
+  a as styles
 };

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,32 +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, s) => (m(e, i, "write to private field"), s ? s.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 l, 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, r = (e, i, t, s) => {
+  for (var o = s > 1 ? void 0 : s ? D(i, t) : i, h = e.length - 1, n; h >= 0; h--)
+    (n = e[h]) && (o = (s ? n(i, t, o) : n(o)) || o);
+  return s && o && F(i, t, o), o;
+}, 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");
+    var t;
+    (t = this.$input) == null || t.addEventListener("change", (s) => {
+      var o;
+      s.stopPropagation(), this.pristine = !1, this.checked = ((o = this.$input) == null ? void 0 : o.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._initialChecked = this.checked, this.addEventListener("reset", this._resetValue);
@@ -52,16 +60,16 @@ const d = class d extends c {
   }
   /** @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;
+    var t;
     if (this._invalid = !1, this.customInvalid) {
       const s = this.getAttribute("data-customerror");
       this.setValidity({ customError: !0 }, this.withFallback(s)), this._invalid = !0;
@@ -69,82 +77,82 @@ const d = class d extends c {
       this.pristine || (this._invalid = !0);
       const s = 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"
+        ((t = this.$input) == null ? void 0 : t.validationMessage) || "Please check this radio if you want to proceed"
       );
       this.setValidity({ valueMissing: !0 }, this.withFallback(s));
     } 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 a = u;
+r([
+  l({ type: Boolean })
+], a.prototype, "debug", 2);
+r([
+  l({ type: Boolean, reflect: !0 })
+], a.prototype, "checked", 2);
+r([
+  l({ type: Boolean, attribute: "custom-invalid" })
+], a.prototype, "customInvalid", 2);
+r([
+  l()
+], a.prototype, "label", 2);
+r([
+  l({ type: String })
+], a.prototype, "lang", 2);
+r([
+  l()
+], a.prototype, "name", 2);
+r([
+  l({ reflect: !0 })
+], a.prototype, "size", 2);
+r([
+  l()
+], a.prototype, "severity", 2);
+r([
+  l({ type: Boolean, attribute: "show-valid" })
+], a.prototype, "showValid", 2);
+r([
+  l()
+], a.prototype, "value", 2);
+r([
+  I()
+], a.prototype, "_invalid", 2);
+r([
+  E("input")
+], a.prototype, "$input", 2);
+r([
+  c("_invalid")
+], a.prototype, "handleInvalidChange", 1);
+r([
+  c("_invalid", { afterUpdate: !0 })
+], a.prototype, "handleDebugInvalid", 1);
+r([
+  c("checked")
+], a.prototype, "handleCheckedChanged", 1);
+r([
+  c("customInvalid")
+], a.prototype, "handleCustomInvalidChange", 1);
 export {
-  t as SkfRadio
+  a 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/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,14 +52,13 @@ 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;
     /** @internal */
     private _assignedNodes?;
     constructor();
-    connectedCallback(): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     /** @internal */
     _handleStateChange(): void;