@skf-design-system/ui-components 1.0.2-beta.2 → 1.0.2-beta.4

package/dist/components/logo/logo.component.js

@@ -1,79 +1,83 @@
-import { SkfElement as i } from "../../internal/components/skf-element.js";
-import { componentStyles as m } from "../../styles/component.styles.js";
-import { html as n } from "lit";
-import { property as p } from "lit/decorators.js";
-import { classMap as a } from "lit/directives/class-map.js";
-import { styles as d } from "./logo.styles.js";
-var g = Object.defineProperty, v = (e, l, s, y) => {
-  for (var c = void 0, r = e.length - 1, h; r >= 0; r--)
-    (h = e[r]) && (c = h(l, s, c) || c);
-  return c && g(l, s, c), c;
+var f = (c) => {
+  throw TypeError(c);
 };
-const o = class o extends i {
+var g = (c, t, r) => t.has(c) || f("Cannot " + r);
+var a = (c, t, r) => (g(c, t, "read from private field"), r ? r.call(c) : t.get(c)), v = (c, t, r) => t.has(c) ? f("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(c) : t.set(c, r), n = (c, t, r, e) => (g(c, t, "write to private field"), e ? e.call(c, r) : t.set(c, r), r);
+import { SkfElement as w } from "../../internal/components/skf-element.js";
+import { stateMap as H } from "../../internal/helpers/stateMap.js";
+import { watch as M } from "../../internal/helpers/watch.js";
+import { componentStyles as V } from "../../styles/component.styles.js";
+import { html as x } from "lit";
+import { property as d } from "lit/decorators.js";
+import { styles as z } from "./logo.styles.js";
+var C = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, m = (c, t, r, e) => {
+  for (var s = e > 1 ? void 0 : e ? _(t, r) : t, i = c.length - 1, l; i >= 0; i--)
+    (l = c[i]) && (s = (e ? l(t, r, s) : l(s)) || s);
+  return e && s && C(t, r, s), s;
+}, h, p;
+const y = class y extends w {
   constructor() {
-    super(...arguments), this.title = "SKF logotype", this.color = "primary";
+    super(...arguments);
+    v(this, h);
+    v(this, p);
+    n(this, h, this.attachInternals()), n(this, p, a(this, h).states), this.title = "SKF logotype", this.color = "primary";
+  }
+  _handleStateChange() {
+    const r = ["inverse", "primary", "secondary"];
+    H(a(this, p), r).set(this.color);
   }
   render() {
-    return n`
-			<svg
-				class=${a({
-      logo: !0,
-      "logo--color-inverse": this.color === "inverse",
-      "logo--color-secondary": this.color === "secondary"
-    })}
-				viewBox="0 0 1300 300"
-				xmlns="http://www.w3.org/2000/svg"
-				x="0px"
-				y="0px"
-			>
+    return x`
+			<svg id="root" viewBox="0 0 1300 300" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px">
 				<title>${this.title}</title>
 				<g>
-					<g>
-						<path
-							d="M363.7,300c6.2,0,11.2-5,11.2-11.3v-165c0-6.2-5-11.3-11.3-11.2H157.5c-4.1,0-7.5-3.4-7.5-7.5V45
+					<path
+						d="M363.7,300c6.2,0,11.2-5,11.2-11.3v-165c0-6.2-5-11.3-11.3-11.2H157.5c-4.1,0-7.5-3.4-7.5-7.5V45
 	c0-4.1,3.4-7.5,7.5-7.5l60,0c4.1,0,7.5,3.4,7.5,7.5v18.8c0,6.2,5,11.2,11.2,11.2h90c6.2,0,11.3-5,11.3-11.2V11.2
 	c0-6.2-5-11.2-11.3-11.2L48.7,0c-6.2,0-11.2,5-11.2,11.3v127.5c0,6.2,5,11.2,11.3,11.2H255c4.1,0,7.5,3.4,7.5,7.5V255
 	c0,4.1-3.4,7.5-7.5,7.5H120c-4.1,0-7.5-3.4-7.5-7.5v-56.2c0-6.2-5-11.2-11.3-11.2h-90c-6.2,0-11.3,5-11.3,11.2v90
 	C0,295,5,300,11.3,300H363.7z"
-						/>
-						<path
-							d="M562.5,192.3c0-1,0.8-1.9,1.9-1.9c0.5,0,1,0.2,1.3,0.5c0.3,0.3,104.9,105,105.8,105.9
+					/>
+					<path
+						d="M562.5,192.3c0-1,0.8-1.9,1.9-1.9c0.5,0,1,0.2,1.3,0.5c0.3,0.3,104.9,105,105.8,105.9
 	c0.6,0.6,3.4,3.2,7.9,3.2h134.4c6.2,0,11.2-5,11.2-11.2v-90c0-6.2-5-11.2-11.2-11.2h-97c-4.3,0-7.1-2.4-7.8-3.1
 	c-1.4-1.4-70.2-70.3-70.6-70.6c-0.3-0.3-0.6-0.8-0.6-1.3c0-0.5,0.2-1,0.6-1.3c0.3-0.3,32.3-32.4,32.8-32.9
 	c1.8-1.8,4.6-3.2,7.9-3.2c2.8,0,97.1,0,97.1,0c6.2,0,11.3-5,11.3-11.2l0-52.5c0-6.2-5-11.2-11.2-11.2h-96.9
 	c-4.5,0-7.2,2.6-7.9,3.2C670.9,3.8,566,108.8,565.7,109.1c-0.3,0.3-0.8,0.5-1.3,0.5c-1,0-1.9-0.8-1.9-1.9l0-96.5
 	c0-6.2-5-11.2-11.3-11.2H442.5c-6.2,0-11.2,5-11.2,11.2v90c0,6.2,5,11.3,11.2,11.3c4.1,0,7.5,3.4,7.5,7.5v60
 	c0,4.1-3.4,7.5-7.5,7.5c-6.2,0-11.2,5-11.2,11.2v90c0,6.2,5,11.3,11.2,11.3h108.7c6.2,0,11.3-5,11.3-11.3L562.5,192.3z"
-						/>
-						<path
-							d="M1001.2,300c6.2,0,11.3-5,11.3-11.3v-90c0-6.2-5-11.2-11.3-11.2c-4.1,0-7.5-3.4-7.5-7.5v-22.5
+					/>
+					<path
+						d="M1001.2,300c6.2,0,11.3-5,11.3-11.3v-90c0-6.2-5-11.2-11.3-11.2c-4.1,0-7.5-3.4-7.5-7.5v-22.5
 	c0-4.2,3.4-7.5,7.5-7.5h41.2c4.1,0,7.5,3.4,7.5,7.5c0,6.2,5,11.2,11.3,11.2h90.1c6.2,0,11.2-5,11.2-11.2V105
 	c0-6.2-5-11.2-11.2-11.2h-90.1c-6.2,0-11.3,5-11.3,11.2c0,4.1-3.4,7.5-7.5,7.5l-41.2,0c-4.1,0-7.5-3.4-7.5-7.5V45
 	c0-4.1,3.4-7.5,7.5-7.5h116.3c4.1,0,7.5,3.4,7.5,7.5v18.8c0,6.2,5,11.2,11.3,11.2h127.5c6.2,0,11.3-5,11.3-11.2V11.2
 	c0-6.2-5-11.2-11.3-11.2H892.5c-6.2,0-11.2,5-11.2,11.2v90c0,6.2,5,11.3,11.2,11.3c4.1,0,7.5,3.4,7.5,7.5v60
 	c0,4.1-3.4,7.5-7.5,7.5c-6.2,0-11.2,5-11.2,11.2v90c0,6.2,5,11.3,11.2,11.3H1001.2z"
-						/>
-					</g>
+					/>
+					<path
+						d="M1207.4,262.9c0-17.5,13.2-30.7,30.1-30.7c16.7,0,30,13.2,30,30.7c0,17.8-13.2,30.9-30,30.9
+	C1220.7,293.8,1207.4,280.7,1207.4,262.9z M1237.6,300c20.2,0,37.4-15.7,37.4-37.1c0-21.2-17.2-36.9-37.4-36.9
+	c-20.4,0-37.6,15.7-37.6,36.9C1200,284.3,1217.2,300,1237.6,300z M1230.9,265.5h6.5l9.9,16.3h6.4l-10.7-16.5
+	c5.5-0.7,9.7-3.6,9.7-10.3c0-7.4-4.4-10.7-13.3-10.7h-14.3v37.6h5.7V265.5z M1230.9,260.7V249h7.7c4,0,8.2,0.9,8.2,5.5
+	c0,5.8-4.3,6.1-9.1,6.1H1230.9z"
+					/>
 				</g>
-				<path
-					d="M1207.4,262.9c0-17.5,13.2-30.7,30.1-30.7c16.7,0,30,13.2,30,30.7c0,17.8-13.2,30.9-30,30.9
-C1220.7,293.8,1207.4,280.7,1207.4,262.9z M1237.6,300c20.2,0,37.4-15.7,37.4-37.1c0-21.2-17.2-36.9-37.4-36.9
-c-20.4,0-37.6,15.7-37.6,36.9C1200,284.3,1217.2,300,1237.6,300z M1230.9,265.5h6.5l9.9,16.3h6.4l-10.7-16.5
-c5.5-0.7,9.7-3.6,9.7-10.3c0-7.4-4.4-10.7-13.3-10.7h-14.3v37.6h5.7V265.5z M1230.9,260.7V249h7.7c4,0,8.2,0.9,8.2,5.5
-c0,5.8-4.3,6.1-9.1,6.1H1230.9z"
-				/>
 			</svg>
 		`;
   }
 };
-o.styles = [m, d];
-let t = o;
-v([
-  p()
-], t.prototype, "title");
-v([
-  p()
-], t.prototype, "color");
+h = new WeakMap(), p = new WeakMap(), y.styles = [V, z];
+let o = y;
+m([
+  d({ type: String })
+], o.prototype, "title", 2);
+m([
+  d({ type: String })
+], o.prototype, "color", 2);
+m([
+  M("color")
+], o.prototype, "_handleStateChange", 1);
 export {
-  t as SkfLogo
+  o as SkfLogo
 };

package/dist/components/logo/logo.styles.js

@@ -1,25 +1,35 @@
 import { css as o } from "lit";
-const s = o`
-	/* stylelint-disable selector-class-pattern */
+const r = o`
+	@layer components {
+		@layer base {
+			:host {
+				display: inline-flex;
+			}
 
-	:host {
-		display: inline-flex;
-	}
+			#root {
+				--_skf-logo-color: var(--skf-logo-primary);
 
-	.logo {
-		aspect-ratio: 13 / 3;
-		block-size: var(--skf-logo-height, var(--skf-size-32));
-		fill: var(--_skf-logo-color, var(--skf-logo-primary));
-	}
+				aspect-ratio: 13 / 3;
+				block-size: var(--mod-logo-height, var(--skf-size-32));
+				fill: var(--_skf-logo-color);
+			}
+		}
 
-	.logo--color-secondary {
-		--_skf-logo-color: var(--skf-logo-secondary);
-	}
+		@layer mods {
+			:host(:state(secondary)) {
+				#root {
+					--_skf-logo-color: var(--skf-logo-secondary);
+				}
+			}
 
-	.logo--color-inverse {
-		--_skf-logo-color: var(--skf-logo-inverse);
+			:host(:state(inverse)) {
+				#root {
+					--_skf-logo-color: var(--skf-logo-inverse);
+				}
+			}
+		}
 	}
 `;
 export {
-  s as styles
+  r as styles
 };

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,13 +1,13 @@
+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 { LitElement as m, html as d } 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--)
-    (c = d[a]) && (r = (i ? c(t, s, r) : c(r)) || r);
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (h, t, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? b(t, s) : t, a = h.length - 1, c; a >= 0; a--)
+    (c = h[a]) && (r = (i ? c(t, s, r) : c(r)) || r);
   return i && r && v(t, s, r), r;
 };
 const n = class n extends u {
@@ -67,7 +67,7 @@ const n = class n extends u {
     ) : "";
   }
   render() {
-    return h`
+    return d`
 			<button
 				?disabled=${this.disabled}
 				@click=${this._handleClick}
@@ -78,15 +78,15 @@ const n = class n extends u {
 				<slot>${this.text}</slot>
 				<div id="adornments">
 					<slot name="icon">
-						${this.icon && h`
+						${this.icon && d`
 							<skf-icon
-								class=${p((this.disabled || !this.iconColor) && "skf-icon-host")}
 								color=${p(this.iconColor)}
+								data-color=${p((this.disabled || !this.iconColor) && "custom")}
 								name=${this.icon}
 							></skf-icon>
 						`}
 					</slot>
-					${this.shortLabel && h`<div id="short-label">${this.shortLabel}</div>`}
+					${this.shortLabel && d`<div id="short-label">${this.shortLabel}</div>`}
 				</div>
 			</button>
 		`;

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) => {
@@ -199,7 +199,6 @@ const c = class c extends b {
 						aria-expanded=${this._expanded}
 						aria-invalid=${this._invalid}
 						aria-haspopup="listbox"
-						class="skf-icon-host"
 						id="select-button"
 						role="combobox"
 					>
@@ -208,7 +207,7 @@ const c = class c extends b {
 							class=${E({ "selected-value": !0, "contains-meta-info": !this.value })}>
 							${this._computeVisibleValue()}
 						</span>
-						<skf-icon class="arrow" name="chevronDown"></skf-icon>
+						<skf-icon class="arrow" data-color="custom" name="chevronDown"></skf-icon>
 					</button>
 				</label>
 				<div aria-multiselectable=${m(this.multiple && !0)} id="select-dropdown" popover role="listbox">

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
 };