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

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

@@ -0,0 +1,116 @@
+var v = (e) => {
+  throw TypeError(e);
+};
+var u = (e, i, t) => i.has(e) || v("Cannot " + t);
+var m = (e, i, t) => (u(e, i, "read from private field"), t ? t.call(e) : i.get(e)), _ = (e, i, t) => i.has(e) ? v("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, t), r = (e, i, t, a) => (u(e, i, "write to private field"), a ? a.call(e, t) : i.set(e, t), t);
+import "../icon/icon.js";
+import { SkfElement as C } from "../../internal/components/skf-element.js";
+import { watch as g } from "../../internal/helpers/watch.js";
+import { componentStyles as x } from "../../styles/component.styles.js";
+import "lit";
+import { property as b, state as n } from "lit/decorators.js";
+import { classMap as $ } from "lit/directives/class-map.js";
+import { ifDefined as w } from "lit/directives/if-defined.js";
+import { literal as S, html as y } from "lit/static-html.js";
+import { styles as U } from "./stepper-item.styles.js";
+var I = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (e, i, t, a) => {
+  for (var p = a > 1 ? void 0 : a ? O(i, t) : i, d = e.length - 1, h; d >= 0; d--)
+    (h = e[d]) && (p = (a ? h(i, t, p) : h(p)) || p);
+  return a && p && I(i, t, p), p;
+}, l, c;
+const f = class f extends C {
+  constructor() {
+    super(...arguments);
+    _(this, l);
+    _(this, c);
+    r(this, l, !1), r(this, c, !1), this.completed = !1, this._index = 0, this._linear = !1, this._handleClick = () => {
+      this._linear || (this.state = "active");
+    };
+  }
+  set _setInternalState(t) {
+    r(this, l, !0), this._uiState = t, t === "active" || t === "activeCompleted" ? this.state = t === "active" ? "active" : "completed" : this.state = void 0, setTimeout(() => {
+      r(this, l, !1);
+    });
+  }
+  get _setInternalState() {
+    return this.state;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.role = "listitem";
+  }
+  firstUpdated() {
+    this._handleState();
+  }
+  _handleState() {
+    const t = this._uiState;
+    if (this.state === "completed" && t !== "active") {
+      this._setInternalState = "activeCompleted";
+      return;
+    }
+    if (m(this, l)) {
+      r(this, l, !1);
+      return;
+    }
+    r(this, c, ["active", "completed"].includes(String(this.state)) && !["active", "activeCompleted"].includes(String(this._uiState))), this._emitUpdate();
+  }
+  /** @internal */
+  _emitUpdate() {
+    this.emit("skf-stepper-item-select", {
+      detail: {
+        item: this,
+        triggerActiveIndexUpdate: m(this, c)
+      }
+    }), r(this, c, !1);
+  }
+  render() {
+    const t = this._linear ? S`div` : S`button`;
+    return y`
+			<${t}
+				@click=${this._handleClick}
+				?disabled=${this._disabled}
+				class=${$({
+      "stepper-item": !0,
+      "stepper-item--active": this._uiState === "active",
+      "stepper-item--active-completed": this._uiState === "activeCompleted",
+      "stepper-item--completed": this._uiState === "completed",
+      "stepper-item--enabled": this._uiState === "enabled"
+    })}
+				type=${w(this._linear ? void 0 : "button")}
+			>
+				<div class="stepper-item__circle">
+					${this._uiState === "activeCompleted" ? y`<skf-icon color="inverse" name="check"></skf-icon>` : this._index}
+				</div>
+				<slot class="stepper-item__label"></slot>
+			</${t}>
+		`;
+  }
+};
+l = new WeakMap(), c = new WeakMap(), f.styles = [x, U];
+let s = f;
+o([
+  b({ reflect: !0 })
+], s.prototype, "state", 2);
+o([
+  b({ type: Boolean })
+], s.prototype, "completed", 2);
+o([
+  n()
+], s.prototype, "_disabled", 2);
+o([
+  n()
+], s.prototype, "_index", 2);
+o([
+  n()
+], s.prototype, "_linear", 2);
+o([
+  n()
+], s.prototype, "_uiState", 2);
+o([
+  n()
+], s.prototype, "_setInternalState", 1);
+o([
+  g("state")
+], s.prototype, "_handleState", 1);
+export {
+  s as SkfStepperItem
+};

package/dist/components/{stepper-item → stepper}/stepper-item.d.ts

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

package/dist/components/{stepper-item → 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/stepper/stepper.component.d.ts

@@ -1,6 +1,6 @@
-import type { SkfStepperItem } from '../stepper-item/stepper-item.component.js';
 import { SkfElement } from '../../internal/components/skf-element';
 import { type CSSResultGroup } from 'lit';
+import type { SkfStepperItem } from './stepper-item.component.js';
 /**
  * The `<skf-stepper>` is a component that displays a list of actions or options.
  *
@@ -8,7 +8,7 @@ import { type CSSResultGroup } from 'lit';
  *
  * @slot - One or more `<skf-stepper-item>`
  *
- * @event skf-stepper-item-select - Dispatched when the stepper item is selected
+ * @event {CustomEvent} skf-stepper-item-select - Dispatched when the stepper item is selected
  *
  * @tagname skf-stepper
  */

package/dist/components/stepper/stepper.component.js

@@ -2,30 +2,30 @@ var p = (t) => {
   throw TypeError(t);
 };
 var m = (t, i, e) => i.has(t) || p("Cannot " + e);
-var _ = (t, i, e) => (m(t, i, "read from private field"), e ? e.call(t) : i.get(t)), f = (t, i, e) => i.has(t) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), l = (t, i, e, s) => (m(t, i, "write to private field"), s ? s.call(t, e) : i.set(t, e), e);
+var _ = (t, i, e) => (m(t, i, "read from private field"), e ? e.call(t) : i.get(t)), v = (t, i, e) => i.has(t) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), l = (t, i, e, s) => (m(t, i, "write to private field"), s ? s.call(t, e) : i.set(t, e), e);
 import { SkfElement as I } from "../../internal/components/skf-element.js";
-import { watch as v } from "../../internal/helpers/watch.js";
-import u from "../../styles/component.styles.js";
+import { watch as f } from "../../internal/helpers/watch.js";
+import { componentStyles as u } from "../../styles/component.styles.js";
 import { html as g } from "lit";
 import { property as x, queryAssignedElements as y } from "lit/decorators.js";
 import { classMap as A } from "lit/directives/class-map.js";
 import { stepperState as C } from "./stepper.helpers.js";
 import { styles as b } from "./stepper.styles.js";
 var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, h = (t, i, e, s) => {
-  for (var n = s > 1 ? void 0 : s ? S(i, e) : i, r = t.length - 1, d; r >= 0; r--)
-    (d = t[r]) && (n = (s ? d(i, e, n) : d(n)) || n);
+  for (var n = s > 1 ? void 0 : s ? S(i, e) : i, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (n = (s ? o(i, e, n) : o(n)) || n);
   return s && n && E(i, e, n), n;
-}, o;
+}, d;
 const c = class c extends I {
   constructor() {
     super();
-    f(this, o);
-    l(this, o, !1), this.activeIndex = -1, this.linear = !1, this._handleSelected = (e) => {
-      if (!_(this, o)) return;
-      const { item: s, triggerActiveIndexUpdate: n } = e.detail, r = [...this._items ?? []].findIndex((d) => d === s);
+    v(this, d);
+    l(this, d, !1), this.activeIndex = -1, this.linear = !1, this._handleSelected = (e) => {
+      if (!_(this, d)) return;
+      const { item: s, triggerActiveIndexUpdate: n } = e.detail, r = [...this._items ?? []].findIndex((o) => o === s);
       r === this.activeIndex ? this._handleActiveIndexChanged() : (n && this._resetActive(r), this.activeIndex = r);
     }, this._handleSlotChanged = () => {
-      l(this, o, !0), this.activeIndex = this._getCurrentActiveIndex();
+      l(this, d, !0), this.activeIndex = this._getCurrentActiveIndex();
     }, this.addEventListener("skf-stepper-item-select", this._handleSelected);
   }
   firstUpdated() {
@@ -44,9 +44,8 @@ const c = class c extends I {
     });
   }
   _handleLinearMode() {
-    var e;
-    (e = this._items) == null || e.forEach((s) => {
-      this.linear && (s._linear = !0);
+    this._items?.forEach((e) => {
+      this.linear && (e._linear = !0);
     });
   }
   /** @internal */
@@ -69,10 +68,10 @@ const c = class c extends I {
 		`;
   }
 };
-o = new WeakMap(), c.styles = [u, b];
+d = new WeakMap(), c.styles = [u, b];
 let a = c;
 h([
-  x({ type: Number })
+  x({ type: Number, attribute: "active-index" })
 ], a.prototype, "activeIndex", 2);
 h([
   x({ type: Boolean })
@@ -81,10 +80,10 @@ h([
   y()
 ], a.prototype, "_items", 2);
 h([
-  v("activeIndex")
+  f("activeIndex")
 ], a.prototype, "_handleActiveIndexChanged", 1);
 h([
-  v("linear")
+  f("linear")
 ], a.prototype, "_handleLinearMode", 1);
 export {
   a as SkfStepper

package/dist/components/stepper/stepper.d.ts

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

package/dist/components/stepper/stepper.helpers.d.ts

@@ -1,4 +1,4 @@
-import type { SkfStepperItem, SkfStepperItemState } from '../stepper-item/stepper-item.component.js';
+import type { SkfStepperItem, SkfStepperItemState } from './stepper-item.component.js';
 import type { SkfStepper } from './stepper.component.js';
 interface StepperStateProps extends Pick<SkfStepper, '_items' | 'linear'>, Pick<SkfStepperItem, 'state'> {
     items: SkfStepperItem[];

package/dist/components/stepper/stepper.helpers.js

@@ -1,18 +1,17 @@
-const A = ({
+const u = ({
   activeIndex: c,
-  items: r,
+  items: l,
   linear: i,
   state: o,
   index: e
 }) => {
-  var l;
-  const n = (l = r[e - 1]) == null ? void 0 : l.state, p = e > c + 1, b = n === "active", a = ["active", "completed"].includes(o ?? ""), s = !i && a, d = i && !s ? !1 : (p || b || a) && !s, v = o === "active", f = e < c, m = o === "completed", u = !s && n === "completed" && e === c + 1, t = {
+  const n = l[e - 1]?.state, r = e > c + 1, p = n === "active", a = ["active", "completed"].includes(o ?? ""), s = !i && a, b = i && !s ? !1 : (r || p || a) && !s, d = o === "active", v = e < c, f = o === "completed", m = !s && n === "completed" && e === c + 1, t = {
     isCurrentStep: a,
-    isDisabled: d,
+    isDisabled: b,
     isSpan: s
   };
-  return u ? { stateLabel: "enabled", ...t } : v ? { stateLabel: "active", ...t } : m ? { stateLabel: "activeCompleted", ...t } : f ? { stateLabel: "completed", ...t } : { stateLabel: void 0, ...t };
+  return m ? { stateLabel: "enabled", ...t } : d ? { stateLabel: "active", ...t } : f ? { stateLabel: "activeCompleted", ...t } : v ? { stateLabel: "completed", ...t } : { stateLabel: void 0, ...t };
 };
 export {
-  A as stepperState
+  u as stepperState
 };

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  */

package/dist/components/switch/switch.component.js

@@ -1,21 +1,28 @@
-import { FormBase as o } from "../../internal/components/formBase.js";
-import { Asterisk as u } from "../../internal/templates/asterisk.js";
-import p from "../../styles/component.styles.js";
-import { html as c } from "lit";
-import { property as s, state as v, query as f } from "lit/decorators.js";
-import { classMap as m } from "lit/directives/class-map.js";
-import { ifDefined as _ } from "lit/directives/if-defined.js";
-import { styles as b } from "./switch.styles.js";
-var y = Object.defineProperty, i = (d, e, a, g) => {
-  for (var l = void 0, h = d.length - 1, n; h >= 0; h--)
-    (n = d[h]) && (l = n(e, a, l) || l);
-  return l && y(e, a, l), l;
+var p = (t) => {
+  throw TypeError(t);
 };
-const r = class r extends o {
+var c = (t, i, e) => i.has(t) || p("Cannot " + e);
+var v = (t, i, e) => (c(t, i, "read from private field"), e ? e.call(t) : i.get(t)), f = (t, i, e) => i.has(t) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), m = (t, i, e, n) => (c(t, i, "write to private field"), n ? n.call(t, e) : i.set(t, e), e);
+import { FormBase as _ } from "../../internal/components/formBase.js";
+import { Asterisk as y } from "../../internal/templates/asterisk.js";
+import { componentStyles as b } from "../../styles/component.styles.js";
+import { LocalizeController as g } from "../../utilities/localize.js";
+import { nothing as k, html as $ } from "lit";
+import { property as l, state as C, query as V } from "lit/decorators.js";
+import { classMap as w } from "lit/directives/class-map.js";
+import { ifDefined as q } from "lit/directives/if-defined.js";
+import { styles as z } from "./switch.styles.js";
+var A = Object.defineProperty, a = (t, i, e, n) => {
+  for (var h = void 0, d = t.length - 1, u; d >= 0; d--)
+    (u = t[d]) && (h = u(i, e, h) || h);
+  return h && A(i, e, h), h;
+}, r;
+const o = class o extends _ {
   constructor() {
-    super(...arguments), this._initialChecked = !1, this.debug = !1, this.checked = !1, this.hideLabel = !1, this.size = "md", this.value = "", this._invalid = !1, this._handleChange = (e) => {
-      var a;
-      e.stopPropagation(), this.pristine = !1, this.checked = ((a = this.$input) == null ? void 0 : a.checked) ?? !1, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(null), this.emitEvent("change");
+    super(...arguments);
+    f(this, r);
+    m(this, r, new g(this)), this._initialChecked = !1, this.debug = !1, this.checked = !1, this.hideLabel = !1, this.lang = "en", this.size = "md", this.value = "", this._invalid = !1, this._handleChange = (e) => {
+      e.stopPropagation(), this.pristine = !1, this.checked = this.$input?.checked ?? !1, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(null), this.emitEvent("change");
     }, this._handleInvalid = (e) => {
       this.pristine = !1, this._invalid = !0, this.customErrorDisplay && e.preventDefault();
     }, this._resetValue = (e) => {
@@ -39,21 +46,20 @@ const r = class r extends o {
   }
   /** @internal */
   _validateInput() {
-    var e;
     if (this._invalid = !1, this.required && !this.checked) {
       this.pristine || (this._invalid = !0);
-      const a = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : (
+      const e = 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 box if you want to proceed"
+        this.$input?.validationMessage || "Please check this box if you want to proceed"
       );
-      this.setValidity({ valueMissing: !0 }, String(a));
+      this.setValidity({ valueMissing: !0 }, String(e));
     } else
       this.setValidity({});
   }
   render() {
-    return c`
+    return $`
 			<label
-				class=${m({
+				class=${w({
       switch: !0,
       "switch--small": this.size === "sm"
     })}
@@ -67,50 +73,50 @@ const r = class r extends o {
 					@reset=${this._resetValue}
 					aria-invalid=${!!this._invalid}
 					class="switch__input"
-					name=${_(this.name)}
+					name=${q(this.name)}
 					type="checkbox"
 					value=${this.value}
 				/>
-				<div class="switch__label">
+				<div class="switch__label ${this.hideLabel ? "visually-hidden" : k}">
 					<slot>${this.label}</slot>
-					${this.required ? u(this.requiredLabel, "switch__asterisk") : null}
+					${this.required ? y(v(this, r).term("required"), "switch__asterisk") : null}
 				</div>
 			</label>
 		`;
   }
 };
-r.styles = [p, b];
-let t = r;
-i([
-  s({ type: Boolean })
-], t.prototype, "debug");
-i([
-  s({ type: Boolean, reflect: !0 })
-], t.prototype, "checked");
-i([
-  s({ type: Boolean, attribute: "hide-label", reflect: !0 })
-], t.prototype, "hideLabel");
-i([
-  s()
-], t.prototype, "label");
-i([
-  s()
-], t.prototype, "name");
-i([
-  s({ attribute: "required-label" })
-], t.prototype, "requiredLabel");
-i([
-  s({ reflect: !0 })
-], t.prototype, "size");
-i([
-  s()
-], t.prototype, "value");
-i([
-  v()
-], t.prototype, "_invalid");
-i([
-  f("input")
-], t.prototype, "$input");
+r = new WeakMap(), o.styles = [b, z];
+let s = o;
+a([
+  l({ type: Boolean })
+], s.prototype, "debug");
+a([
+  l({ type: Boolean, reflect: !0 })
+], s.prototype, "checked");
+a([
+  l({ type: Boolean, attribute: "hide-label", reflect: !0 })
+], s.prototype, "hideLabel");
+a([
+  l()
+], s.prototype, "label");
+a([
+  l({ type: String })
+], s.prototype, "lang");
+a([
+  l()
+], s.prototype, "name");
+a([
+  l({ reflect: !0 })
+], s.prototype, "size");
+a([
+  l()
+], s.prototype, "value");
+a([
+  C()
+], s.prototype, "_invalid");
+a([
+  V("input")
+], s.prototype, "$input");
 export {
-  t as SkfSwitch
+  s as SkfSwitch
 };

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

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

package/dist/components/switch/switch.styles.js

@@ -60,7 +60,7 @@ const o = [
 				}
 
 				&:checked {
-					--_skf-switch-bg-color: var(--skf-bg-color-emphasised);
+					--_skf-switch-bg-color: var(--skf-bg-color-emphasized);
 
 					&::after {
 						transform: translateX(calc(var(--_skf-switch-width) - var(--_skf-switch-height)));

package/dist/components/{tab-panel → tabs}/tab-panel.component.d.ts

@@ -12,7 +12,7 @@ export declare class SkfTabPanel extends SkfElement {
     /** The tab panel's name. */
     name: string;
     active: boolean;
-    constructor();
+    connectedCallback(): void;
     /** @internal */
     handleActiveChanged(): void;
     render(): import("lit").TemplateResult<1>;

package/dist/components/tabs/tab-panel.component.js

@@ -0,0 +1,39 @@
+import { SkfElement as l } from "../../internal/components/skf-element.js";
+import { watch as m } from "../../internal/helpers/watch.js";
+import { componentStyles as h } from "../../styles/component.styles.js";
+import { html as v } from "lit";
+import { property as f, state as d } from "lit/decorators.js";
+import { styles as u } from "./tab-panel.styles.js";
+var y = Object.defineProperty, C = Object.getOwnPropertyDescriptor, p = (n, r, s, o) => {
+  for (var t = o > 1 ? void 0 : o ? C(r, s) : r, a = n.length - 1, i; a >= 0; a--)
+    (i = n[a]) && (t = (o ? i(r, s, t) : i(t)) || t);
+  return o && t && y(r, s, t), t;
+};
+const c = class c extends l {
+  constructor() {
+    super(...arguments), this.name = "", this.active = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.role = "tabpanel";
+  }
+  handleActiveChanged() {
+    this.ariaHidden = this.active ? "false" : "true", this.tabIndex = this.active ? 0 : -1;
+  }
+  render() {
+    return v`<slot></slot>`;
+  }
+};
+c.styles = [h, u];
+let e = c;
+p([
+  f()
+], e.prototype, "name", 2);
+p([
+  d()
+], e.prototype, "active", 2);
+p([
+  m("active")
+], e.prototype, "handleActiveChanged", 1);
+export {
+  e as SkfTabPanel
+};

package/dist/components/{tab-panel → tabs}/tab-panel.d.ts

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

package/dist/components/{tab → tabs}/tab.component.d.ts

@@ -1,6 +1,6 @@
-import type { SkfTabGroup } from '../tab-group/tab-group.component.js';
 import { SkfElement } from '../../internal/components/skf-element';
 import { type CSSResultGroup } from 'lit';
+import type { SkfTabs } from './tabs.component.js';
 export interface SkfTabEvent {
     tab: SkfTab;
 }
@@ -19,8 +19,8 @@ export declare class SkfTab extends SkfElement {
     /** The name of the tab-panel this tab is associated with. The panel must be located in the same tab group. */
     panel: string;
     selected: boolean;
-    variant: SkfTabGroup['variant'];
-    constructor();
+    variant: SkfTabs['variant'];
+    connectedCallback(): void;
     /** @internal */
     handleSelectedChange(): void;
     /** @internal */

package/dist/components/{tab → tabs}/tab.component.js

@@ -1,24 +1,27 @@
-import { SkfElement as n } from "../../internal/components/skf-element.js";
+import { SkfElement as d } from "../../internal/components/skf-element.js";
 import { watch as h } from "../../internal/helpers/watch.js";
-import m from "../../styles/component.styles.js";
+import { componentStyles as m } from "../../styles/component.styles.js";
 import { html as f } from "lit";
-import { property as v, state as d } from "lit/decorators.js";
+import { property as v, state as n } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";
-import { styles as _ } from "./tab.styles.js";
-var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (c, s, l, r) => {
-  for (var e = r > 1 ? void 0 : r ? y(s, l) : s, i = c.length - 1, o; i >= 0; i--)
-    (o = c[i]) && (e = (r ? o(s, l, e) : o(e)) || e);
-  return r && e && u(s, l, e), e;
+import { styles as u } from "./tab.styles.js";
+var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (p, s, l, r) => {
+  for (var e = r > 1 ? void 0 : r ? y(s, l) : s, i = p.length - 1, o; i >= 0; i--)
+    (o = p[i]) && (e = (r ? o(s, l, e) : o(e)) || e);
+  return r && e && _(s, l, e), e;
 };
-const p = class p extends n {
+const c = class c extends d {
   constructor() {
-    super(), this.panel = "", this.selected = !1, this.variant = "expanded", this._handleClick = () => {
+    super(...arguments), this.panel = "", this.selected = !1, this.variant = "expanded", this._handleClick = () => {
       this.emit("skf-tab-select", {
         detail: {
           tab: this
         }
       });
-    }, this.role = "tab", this.addEventListener("click", this._handleClick);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.role = "tab", this.addEventListener("click", this._handleClick);
   }
   handleSelectedChange() {
     this.ariaSelected = this.selected ? "true" : "false", this.tabIndex = this.selected ? 0 : -1;
@@ -38,16 +41,16 @@ const p = class p extends n {
 		`;
   }
 };
-p.styles = [m, _];
-let t = p;
+c.styles = [m, u];
+let t = c;
 a([
   v({ reflect: !0 })
 ], t.prototype, "panel", 2);
 a([
-  d()
+  n()
 ], t.prototype, "selected", 2);
 a([
-  d()
+  n()
 ], t.prototype, "variant", 2);
 a([
   h("selected")

package/dist/components/{tab → tabs}/tab.d.ts

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