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

package/dist/components/popover/popover.component.js

@@ -1,36 +1,42 @@
 import { SkfPopoverBase as h } from "../../internal/base-classes/popover/popover.base.js";
-import { watch as f } from "../../internal/helpers/watch.js";
-import { property as l } from "lit/decorators.js";
-import { styles as m } from "./popover.styles.js";
-var d = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (v, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? w(e, o) : e, i = v.length - 1, p; i >= 0; i--)
-    (p = v[i]) && (t = (s ? p(e, o, t) : p(t)) || t);
-  return s && t && d(e, o, t), t;
+import { watch as l } from "../../internal/helpers/watch.js";
+import { property as c } from "lit/decorators.js";
+import { styles as w } from "./popover.styles.js";
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (d, t, i, s) => {
+  for (var e = s > 1 ? void 0 : s ? v(t, i) : t, o = d.length - 1, p; o >= 0; o--)
+    (p = d[o]) && (e = (s ? p(t, i, e) : p(e)) || e);
+  return s && e && f(t, i, e), e;
 };
 const a = class a extends h {
   constructor() {
-    super(), this.offset = 8, this.hideArrow = !1, this.arrow = !this.hideArrow, this.placement = "bottom-start", this.triggerEvent = "click", h.classMap = { popover: !0 };
+    super(), this.offset = 8, this.hideArrow = !1, this._checkClickOutside = (t) => {
+      this.isOpen && !this.contains(t.target) && this.close();
+    }, this.arrow = !this.hideArrow, this.placement = "bottom-start", this.triggerEvent = "click", this.variant = "popup", h.classMap = { popover: !0 };
   }
   hideArrowChanged() {
     this.arrow = !this.hideArrow;
   }
-  addEventListeners(e) {
-    e.addEventListener(this.triggerEvent, this.open, { signal: this.signal });
+  /** @internal */
+  openExtended() {
+    window.top && window.self !== window.top && window.top.addEventListener("click", this._checkClickOutside, {
+      signal: this.signal
+    });
   }
-  removeEventListeners(e) {
-    e.removeEventListener(this.triggerEvent, this.open);
+  /** @internal */
+  addEventListeners(t) {
+    t.addEventListener(this.triggerEvent, this.open, { signal: this.signal });
   }
 };
-a.styles = [h.styles, m];
+a.styles = [h.styles, w];
 let r = a;
 n([
-  l({ type: Number })
+  c({ type: Number })
 ], r.prototype, "offset", 2);
 n([
-  l({ type: Boolean })
+  c({ type: Boolean })
 ], r.prototype, "hideArrow", 2);
 n([
-  f("hideArrow")
+  l("hideArrow")
 ], r.prototype, "hideArrowChanged", 1);
 export {
   r as SkfPopover

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

@@ -1,5 +1,5 @@
-import { SkfPopover } from './popover.component';
-export * from './popover.component';
+import { SkfPopover } from './popover.component.js';
+export * from './popover.component.js';
 export default SkfPopover;
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -3,7 +3,7 @@ import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar
  *
- * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/36d674-progress-bar) for design principles
  *
  * @tagname skf-progress
  */
@@ -17,6 +17,8 @@ export declare class SkfProgress extends SkfElement {
     max: number;
     /** Specifies how much of the task that has been completed */
     value: number;
-    constructor();
+    connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/progress/progress.component.js

@@ -1,49 +1,52 @@
-var h = (t) => {
+var v = (t) => {
   throw TypeError(t);
 };
-var f = (t, e, r) => e.has(t) || h("Cannot " + r);
-var c = (t, e, r) => (f(t, e, "read from private field"), r ? r.call(t) : e.get(t)), d = (t, e, r) => e.has(t) ? h("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), v = (t, e, r, p) => (f(t, e, "write to private field"), p ? p.call(t, r) : e.set(t, r), r);
-import { SkfElement as y } from "../../internal/components/skf-element.js";
-import x from "../../styles/component.styles.js";
-import { html as b } from "lit";
-import { property as l } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
+var y = (t, e, r) => e.has(t) || v("Cannot " + r);
+var c = (t, e, r) => (y(t, e, "read from private field"), r ? r.call(t) : e.get(t)), u = (t, e, r) => e.has(t) ? v("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), d = (t, e, r, a) => (y(t, e, "write to private field"), a ? a.call(t, r) : e.set(t, r), r);
+import { SkfElement as b } from "../../internal/components/skf-element.js";
+import { stateMap as _ } from "../../internal/helpers/stateMap.js";
+import { watch as x } from "../../internal/helpers/watch.js";
+import { componentStyles as C } from "../../styles/component.styles.js";
+import { html as O } from "lit";
+import { property as f } from "lit/decorators.js";
 import { styles as g } from "./progress.styles.js";
-var N = Object.defineProperty, n = (t, e, r, p) => {
-  for (var s = void 0, m = t.length - 1, u; m >= 0; m--)
-    (u = t[m]) && (s = u(e, r, s) || s);
-  return s && N(e, r, s), s;
-}, o;
-const i = class i extends y {
+var w = Object.defineProperty, j = Object.getOwnPropertyDescriptor, n = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? j(e, r) : e, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (s = (a ? h(e, r, s) : h(s)) || s);
+  return a && s && w(e, r, s), s;
+}, i, p;
+const m = class m extends b {
   constructor() {
-    super();
-    d(this, o);
-    this.animated = !1, this.max = 1, this.value = 0, v(this, o, this.attachInternals()), c(this, o).role = "progressbar";
+    super(...arguments);
+    u(this, i);
+    u(this, p);
+    d(this, i, this.attachInternals()), d(this, p, c(this, i).states), this.animated = !1, this.max = 1, this.value = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.role = "progressbar";
+  }
+  _handleStateChange() {
+    _(c(this, p), "animated").set(this.animated);
   }
   render() {
     const r = this.value / this.max * 100;
-    return b`
-			<div
-				class=${_({
-      progress: !0,
-      "progress--animated": this.animated
-    })}
-				style="--_skf-progress-value: ${r}%"
-			></div>
-		`;
+    return O`<div id="root" style="--_skf-progress-value: ${r}%"></div>`;
   }
 };
-o = new WeakMap(), i.styles = [x, g], i.formAssociated = !0;
-let a = i;
+i = new WeakMap(), p = new WeakMap(), m.styles = [C, g], m.formAssociated = !0;
+let o = m;
+n([
+  f({ type: Boolean })
+], o.prototype, "animated", 2);
 n([
-  l({ type: Boolean, reflect: !0 })
-], a.prototype, "animated");
+  f({ type: Number })
+], o.prototype, "max", 2);
 n([
-  l({ type: Number })
-], a.prototype, "max");
+  f({ type: Number })
+], o.prototype, "value", 2);
 n([
-  l({ type: Number })
-], a.prototype, "value");
+  x("animated")
+], o.prototype, "_handleStateChange", 1);
 export {
-  a as SkfProgress
+  o as SkfProgress
 };

package/dist/components/progress/progress.d.ts

@@ -1,5 +1,5 @@
-import { SkfProgress } from './progress.component';
-export * from './progress.component';
+import { SkfProgress } from './progress.component.js';
+export * from './progress.component.js';
 export default SkfProgress;
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,48 +1,55 @@
 import { css as r } from "lit";
-const s = r`
-	/* stylelint-disable selector-class-pattern */
+const a = r`
 	@layer components {
-		.progress {
-			background: var(--skf-bg-color-neutral-3);
-			block-size: var(--skf-size-8);
-			border-radius: 0.25rem; /* Missing token */
-			overflow: hidden;
+		@layer base {
+			#root {
+				--_skf-progress-value: 0%;
 
-			&::after {
-				background-color: var(--skf-bg-color-emphasised);
-				block-size: inherit;
-				border-radius: inherit;
-				content: '';
-				display: block;
-				inline-size: var(--_skf-progress-value, auto);
-				transition: inline-size calc(var(--skf-motion-duration-slow) * 1ms)
-					cubic-bezier(0.4, 0.93, 0.71, 0.89);
+				background: var(--skf-bg-color-neutral-3);
+				block-size: var(--skf-size-8);
+				border-radius: 0.25rem; /* Missing token */
+				overflow: hidden;
+
+				&::after {
+					background-color: var(--skf-bg-color-emphasized);
+					block-size: inherit;
+					border-radius: inherit;
+					content: '';
+					display: block;
+					inline-size: var(--_skf-progress-value);
+					transition: inline-size calc(var(--skf-motion-duration-slow) * 1ms)
+						cubic-bezier(0.4, 0.93, 0.71, 0.89);
+				}
 			}
 		}
 
-		.progress--animated::after {
-			animation: skf-progress-animation calc(var(--skf-motion-duration-slow) * 1ms) linear infinite
-				reverse;
-			background-image: linear-gradient(
-				-45deg,
-				rgba(255 255 255 / 20%) 25%,
-				transparent 25%,
-				transparent 50%,
-				rgba(255 255 255 / 20%) 50%,
-				rgba(255 255 255 / 20%) 75%,
-				transparent 75%,
-				transparent
-			);
-			background-size: 50px 50px;
+		@layer mods {
+			:host(:state(animated)) {
+				#root::after {
+					animation: skf-progress-animation calc(var(--skf-motion-duration-slow) * 1ms) linear
+						infinite reverse;
+					background-image: linear-gradient(
+						-45deg,
+						rgb(255 255 255 / 20%) 25%,
+						transparent 25%,
+						transparent 50%,
+						rgb(255 255 255 / 20%) 50%,
+						rgb(255 255 255 / 20%) 75%,
+						transparent 75%,
+						transparent
+					);
+					background-size: 50px 50px;
+				}
+			}
 		}
+	}
 
-		@keyframes skf-progress-animation {
-			to {
-				background-position: 50px 50px;
-			}
+	@keyframes skf-progress-animation {
+		to {
+			background-position: 50px 50px;
 		}
 	}
 `;
 export {
-  s as styles
+  a as styles
 };

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

@@ -1,22 +1,25 @@
 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
  *
- * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/78d5dd-radio-button) for design principles
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/78d5dd-radio-button) for design principles
  *
  * @attribute {boolean} [disabled=false] - If true, sets disabled state
  * @attribute {boolean} [required=false] - If true, value is required or must be checked for the form to be submittable
  *
- * @event change {object} - When the value of the input changes
+ * @event {Event} change - When the value of the input changes
  *
  * @slot - The radios label. Alternatively, you can use the `label` attribute.
  *
  * @tagname skf-radio
  */
 export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
+    #private;
     static styles: CSSResultGroup;
     /**
      * @internal
@@ -31,17 +34,14 @@ 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
-     * @type {"success" | "info" | "warning" | "alert"}
-     */
-    severity?: FormFieldBaseProps['severity'];
+    /** If defined, displays provided severity state */
+    severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
     showValid: boolean;
     /** The current value of the input field  */
@@ -53,9 +53,13 @@ export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
     private $input?;
     connectedCallback(): void;
     protected firstUpdated(): void;
+    /** @internal */
     handleInvalidChange(): void;
+    /** @internal */
     handleDebugInvalid(): void;
+    /** @internal */
     handleCheckedChanged(): void;
+    /** @internal */
     handleCustomInvalidChange(): void;
     /** @internal */
     private _resetValue;

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 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-item → segmented-button}/segmented-button-item.component.d.ts

@@ -7,9 +7,9 @@ export interface SkfSegmentedButtonItemEvent {
 /**
  * The `<skf-segmented-button-item>` is used in conjunction with the `<skf-segmented-button>` component
  *
- * @event {CustomEvent} my-tag-my-event - Fired when something happens
+ * @event {CustomEvent} skf-segmented-button-item-select - Fired when selected
  *
- * @slot - The items label
+ * @slot - Label for the button
  *
  * @tagname skf-segmented-button-item
  */
@@ -23,14 +23,14 @@ export declare class SkfSegmentedButtonItem extends SkfElement {
     };
     /** If true, items is marked as disabled */
     disabled: boolean;
+    /** If true, items is marked as selected */
+    selected: boolean;
     /** Sets the item value */
     value: string;
     constructor();
     /** @internal */
     isMultiple: boolean;
     /** @internal */
-    isSelected: boolean;
-    /** @internal */
     private _handleClick;
     render(): import("lit").TemplateResult<1>;
 }