@skf-design-system/ui-components 1.0.2-beta.1 → 1.0.2-beta.3

package/dist/components/input/input.component.js

@@ -7,14 +7,14 @@ import { Asterisk as f } from "../../internal/templates/asterisk.js";
 import { componentStyles as _ } from "../../styles/component.styles.js";
 import { html as h, nothing as u } from "lit";
 import { state as p, property as s, query as $, queryAssignedNodes as g } from "lit/decorators.js";
-import { ifDefined as o } from "lit/directives/if-defined.js";
+import { ifDefined as n } from "lit/directives/if-defined.js";
 import { live as w } from "lit/directives/live.js";
 import { InputNumberController as E, InputPasswordController as C } from "./input.controllers.js";
 import A from "./input.styles.js";
 var L = Object.defineProperty, P = Object.getOwnPropertyDescriptor, e = (v, t, r, a) => {
-  for (var n = a > 1 ? void 0 : a ? P(t, r) : t, l = v.length - 1, d; l >= 0; l--)
-    (d = v[l]) && (n = (a ? d(t, r, n) : d(n)) || n);
-  return a && n && L(t, r, n), n;
+  for (var o = a > 1 ? void 0 : a ? P(t, r) : t, l = v.length - 1, d; l >= 0; l--)
+    (d = v[l]) && (o = (a ? d(t, r, o) : d(o)) || o);
+  return a && o && L(t, r, o), o;
 };
 const m = class m extends c {
   constructor() {
@@ -46,7 +46,7 @@ const m = class m extends c {
 	`, this._renderPasswordButton = () => h`
 		<button
 			@click=${this._passwordController.toggleVisibility}
-			aria-label=${o(this._passwordController._buttonAriaLabel)}
+			aria-label=${n(this._passwordController._buttonAriaLabel)}
 			class="password skf-icon-host"
 			type="button"
 			@mousedown="${this._handlePressStart}"
@@ -61,7 +61,7 @@ const m = class m extends c {
 			@mousedown=${this._handlePressStart}
 			@mouseup=${this._handlePressEnd}
 			@mouseleave=${this._handlePressEnd}
-			aria-label=${o(this.buttonAriaLabelClear)}
+			aria-label=${n(this.buttonAriaLabelClear)}
 			class="search skf-icon-host"
 			type="button"
 		>
@@ -124,12 +124,12 @@ const m = class m extends c {
       this.invalid = !this._pristine && !r.valid;
       let a;
       for (a in r) {
-        const n = `data-${a.toString()}`;
-        if (r[a] && !this.hasAttribute(n) && this.debug && console.log(
-          `Add custom message on ${this.localName} using attribute: ${n.toUpperCase()}="Your custom message"`
+        const o = `data-${a.toString()}`;
+        if (r[a] && !this.hasAttribute(o) && this.debug && console.log(
+          `Add custom message on ${this.localName} using attribute: ${o.toUpperCase()}="Your custom message"`
         ), r[a]) {
           this.validationError = a.toString();
-          const l = this.hasAttribute(n) ? this.getAttribute(n) : this.$input.validationMessage;
+          const l = this.hasAttribute(o) ? this.getAttribute(o) : this.$input.validationMessage;
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },
             this.withFallback(l)
@@ -139,7 +139,7 @@ const m = class m extends c {
     }
   }
   render() {
-    var r, a, n, l;
+    var r, a, o, l;
     const t = (this._defaultSlot.length === 0 || !((a = (r = this._defaultSlot[0]) == null ? void 0 : r.textContent) != null && a.trim())) && !this.label;
     return h`
 			<div id="root">
@@ -151,31 +151,31 @@ const m = class m extends c {
 					<div id="input">
 						${this.type === "search" ? h`<skf-icon class="skf-icon-host" name="search" size="sm"></skf-icon>` : u}
 						<div
-							data-leading=${o(this.leading)}
-							data-trailing=${o(this.trailing)}
+							data-leading=${n(this.leading)}
+							data-trailing=${n(this.trailing)}
 							id="affix"
 						>
 							<input
 								?disabled=${this.disabled}
 								?readonly=${this.readonly}
 								?required=${this.required}
+								.autocomplete=${this.autocomplete ?? "off"}
 								.value=${w(this.value)}
 								@blur=${this._onBlur}
 								@input=${this._handleInput}
-								.autocomplete=${this.autocomplete}
-								aria-describedby=${o((n = this.hint) != null && n.trim() ? "hint" : u)}
-								aria-errormessage=${o((l = this.hint) != null && l.trim() ? "hint" : u)}
+								aria-describedby=${n((o = this.hint) != null && o.trim() ? "hint" : u)}
+								aria-errormessage=${n((l = this.hint) != null && l.trim() ? "hint" : u)}
 								aria-invalid=${!!this.invalid}
 								data-testid="field-input"
-								inputmode=${o(this.inputMode)}
-								max=${o(this.max)}
-								maxlength=${o(this.maxLength)}
-								min=${o(this.min)}
-								minlength=${o(this.minLength)}
-								name=${o(this.name)}
-								pattern=${o(this.pattern)}
-								placeholder=${o(this.placeholder)}
-								type=${o(
+								inputmode=${n(this.inputMode)}
+								max=${n(this.max)}
+								maxlength=${n(this.maxLength)}
+								min=${n(this.min)}
+								minlength=${n(this.minLength)}
+								name=${n(this.name)}
+								pattern=${n(this.pattern)}
+								placeholder=${n(this.placeholder)}
+								type=${n(
       this.type === "password" ? this._passwordController._type : this.type
     )}
 							/>
@@ -193,7 +193,7 @@ const m = class m extends c {
 					<skf-hint
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
-						severity=${o(b(this.invalid, this.severity))}
+						severity=${n(b(this.invalid, this.severity))}
 						>${this.customInvalid ?? this.hint}
 					</skf-hint>
 				`}

package/dist/components/menu/menu-item.d.ts

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

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

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

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

@@ -1,6 +1,6 @@
 import '../link/link.js';
-import type SkfLink from '../link/link.js';
 import { SkfElement } from '../../internal/components/skf-element';
+import type { Icon } from '../../internal/types.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-nav>` is a component that displays a list of <nav-items>.
@@ -12,7 +12,7 @@ import { type CSSResultGroup } from 'lit';
 export declare class SkfNavItem extends SkfElement {
     static styles: CSSResultGroup;
     href: string;
-    icon?: SkfLink['icon'];
+    icon?: Icon;
     connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
 }

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

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

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

@@ -9,7 +9,7 @@ var c = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (l, r, o
 };
 const n = class n extends h {
   constructor() {
-    super(), this.offset = 8, this.hideArrow = !1, this.ariaModal = "false", this.arrow = !this.hideArrow, this.placement = "bottom-start", this.role = "dialog", this.triggerEvent = "click", this.variant = "popup", h.classMap = { popover: !0 };
+    super(), this.offset = 8, this.hideArrow = !1, this.arrow = !this.hideArrow, this.placement = "bottom-start", this.triggerEvent = "click", this.variant = "popup", h.classMap = { popover: !0 };
   }
   hideArrowChanged() {
     this.arrow = !this.hideArrow;

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.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,8 +1,10 @@
 import { css as r } from "lit";
-const e = r`
+const o = r`
 	@layer components {
 		@layer base {
 			#root {
+				--_skf-progress-value: 0%;
+
 				background: var(--skf-bg-color-neutral-3);
 				block-size: var(--skf-size-8);
 				border-radius: 0.25rem; /* Missing token */
@@ -14,7 +16,7 @@ const e = r`
 					border-radius: inherit;
 					content: '';
 					display: block;
-					inline-size: var(--_skf-progress-value, auto);
+					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);
 				}
@@ -28,11 +30,11 @@ const e = r`
 						infinite reverse;
 					background-image: linear-gradient(
 						-45deg,
-						rgba(255 255 255 / 20%) 25%,
+						rgb(255 255 255 / 20%) 25%,
 						transparent 25%,
 						transparent 50%,
-						rgba(255 255 255 / 20%) 50%,
-						rgba(255 255 255 / 20%) 75%,
+						rgb(255 255 255 / 20%) 50%,
+						rgb(255 255 255 / 20%) 75%,
 						transparent 75%,
 						transparent
 					);
@@ -49,5 +51,5 @@ const e = r`
 	}
 `;
 export {
-  e as styles
+  o as styles
 };

package/dist/components/segmented-button/segmented-button-item.d.ts

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

package/dist/components/segmented-button/segmented-button.d.ts

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

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

@@ -1,5 +1,5 @@
-import { SkfSelectOptionGroup } from './select-option-group.component';
-export * from './select-option-group.component';
+import { SkfSelectOptionGroup } from './select-option-group.component.js';
+export * from './select-option-group.component.js';
 export default SkfSelectOptionGroup;
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,8 +1,8 @@
+import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element.js';
 import type { Icon, IconColor } from '../../internal/types.js';
 import { type CSSResultGroup } from 'lit';
-import '../icon/icon';
-import type { SkfSelect } from '../select/select.component.js';
+import type { SkfSelect } from './select.component.js';
 export interface SelectOptionEvent {
     value: string | null;
     option: SkfSelectOption;

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

@@ -1,9 +1,9 @@
+import "../icon/icon.js";
 import { SkfElement as u } from "../../internal/components/skf-element.js";
 import { componentStyles as f } from "../../styles/component.styles.js";
 import { LitElement as m, html as h } from "lit";
 import { property as l, queryAssignedNodes as _ } from "lit/decorators.js";
 import { ifDefined as p } from "lit/directives/if-defined.js";
-import "../icon/icon.js";
 import { styles as y } from "./select-option.styles.js";
 var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (d, t, s, i) => {
   for (var r = i > 1 ? void 0 : i ? b(t, s) : t, a = d.length - 1, c; a >= 0; a--)

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

@@ -1,9 +1,9 @@
+import '../tag/tag.js';
 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 CSSResultGroup } from 'lit';
-import '../../internal/components/hint/hint';
-import '../tag/tag';
 import type { SelectOptionEvent, SkfSelectOption } from './select-option.component.js';
 import { DeveloperFeedbackController, GlobalClickController, KeyboardNavigationController } from './select.controllers.js';
 /**

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

@@ -1,5 +1,7 @@
+import "../tag/tag.js";
 import { computePosition as v, flip as f, shift as _, offset as g } from "@floating-ui/dom";
 import { FormBase as b } from "../../internal/components/formBase.js";
+import "../../internal/components/hint/hint.js";
 import { PopoverController as y } from "../../internal/controllers/popover.controller.js";
 import { findMatchingTags as O } from "../../internal/helpers/findMatchingTags.js";
 import { hintSeverity as x } from "../../internal/helpers/hintSeverity.js";
@@ -11,8 +13,6 @@ import { nothing as C, html as n } from "lit";
 import { property as o, state as h, query as p } from "lit/decorators.js";
 import { classMap as E } from "lit/directives/class-map.js";
 import { ifDefined as m } from "lit/directives/if-defined.js";
-import "../../internal/components/hint/hint.js";
-import "../tag/tag.js";
 import { GlobalClickController as L, KeyboardNavigationController as k, DeveloperFeedbackController as A } from "./select.controllers.js";
 import { styles as P } from "./select.styles.js";
 var T = Object.defineProperty, D = Object.getOwnPropertyDescriptor, s = (u, t, e, l) => {

package/dist/components/select/select.controllers.js

@@ -2,8 +2,8 @@ import { raiseError as a } from "../../internal/helpers/raiseError.js";
 class d {
   constructor(t) {
     this._globalClickHandler = (e) => {
-      var i;
-      !((i = this.host) != null && i.localName) || e.target.closest(this.host.localName) || (this.host._expanded = !1);
+      var s;
+      !((s = this.host) != null && s.localName) || e.target.closest(this.host.localName) || (this.host._expanded = !1);
     }, (this.host = t).addController(this);
   }
   // hostConnected() {
@@ -64,16 +64,16 @@ class p {
     });
   }
   _focusSiblingOption(t) {
-    const e = (l) => l === document.activeElement, s = this._selectableOptions.find((l) => e(l));
-    if (!s) {
+    const e = (l) => l === document.activeElement, i = this._selectableOptions.find((l) => e(l));
+    if (!i) {
       this._focusFirstOption();
       return;
     }
-    const i = this._selectableOptions.indexOf(s);
-    let o = i - 1, n = i + 1;
+    const s = this._selectableOptions.indexOf(i);
+    let o = s - 1, n = s + 1;
     o < 0 && (o = this._selectableOptions.length - 1), n >= this._selectableOptions.length && (n = 0);
     const h = this._selectableOptions[t === "next" ? n : o];
-    s.blur(), h.focus();
+    i.blur(), h.focus();
   }
   _selectFocusedOption(t) {
     t.selected = !0;
@@ -82,7 +82,7 @@ class p {
     return !this.host || !this.host._optionsList ? [] : this.host._optionsList.filter((t) => !t.disabled);
   }
 }
-class u {
+class b {
   constructor(t) {
     (this.host = t).addController(this);
   }
@@ -103,18 +103,15 @@ class u {
       ),
       reason: "attribute-mismatch",
       replaceStrings: [t, "min or max", "together with multiple"]
-    });
-    const e = this.host.hideTags && this.host.multiple, s = !this.host.hideTags;
-    a({
-      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-      assert: e || s,
+    }), a({
+      assert: (this.host.hideTags && this.host.multiple) ?? !this.host.hideTags,
       reason: "attribute-mismatch",
       replaceStrings: [t, "hide-tags", "together with multiple"]
     });
   }
 }
 export {
-  u as DeveloperFeedbackController,
+  b as DeveloperFeedbackController,
   d as GlobalClickController,
   p as KeyboardNavigationController
 };

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

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

package/dist/components/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/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/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/{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,7 +19,7 @@ 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'];
+    variant: SkfTabs['variant'];
     constructor();
     /** @internal */
     handleSelectedChange(): void;

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 {

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

@@ -1,17 +1,16 @@
-import '../card/card.js';
 import { SkfElement } from '../../internal/components/skf-element';
 import { type CSSResultGroup, type PropertyValues } from 'lit';
 /**
- * The `<skf-tab-group>` is a component that displays a list of actions or options.
+ * The `<skf-tabs>` is a component that displays a list of actions or options
  *
  * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
  *
  * @slot - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements
  * @slot tabs - Used for grouping tabs in the tab group. Must be <skf-tab> elements
  *
- * @tagname skf-tab-group
+ * @tagname skf-tabs
  */
-export declare class SkfTabGroup extends SkfElement {
+export declare class SkfTabs extends SkfElement {
     static styles: CSSResultGroup;
     /** Sets the default selected tab */
     defaultSelected: number;