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

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

@@ -71,7 +71,7 @@ const p = class p extends b {
     };
   }
   set customInvalid(s) {
-    this.customError = s || "";
+    this.customError = s ?? "";
   }
   get customInvalid() {
     return this.customError;
@@ -93,7 +93,7 @@ const p = class p extends b {
         this.removeAttribute("invalid"), !this._pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = this.getAttribute("hint") ?? "";
   }
   valueChanged() {
-    this._internals.setFormValue(this.value), console.log("updated internals", this.$input.value), this.validateInput();
+    this._internals.setFormValue(this.value), this.validateInput();
   }
   attributeChangedCallback(s, r, a) {
     if (super.attributeChangedCallback(s, r, a), s === "value" && this._internals.setFormValue(a), s === "custom-invalid")
@@ -184,7 +184,7 @@ const p = class p extends b {
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
 						severity=${n(v(this.severity, this.invalid))}
-						>${this.customInvalid ? this.customInvalid : this.hint}
+						>${this.customInvalid ?? this.hint}
 					</skf-hint>
 				`}
 			</div>

package/dist/components/input/input.controllers.d.ts

@@ -1,17 +1,31 @@
 import type { Icon } from '@skf-design-system/ui-assets';
-import type { ReactiveController } from 'lit';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
 import type { SkfInput } from './input.component.js';
-type InputControllerHost = SkfInput;
+/**
+ * Workaround for storybook helper not being able to import types
+ * E.g type ControllerHost = SkfInput;
+ */
+interface ControllerHostProps {
+    $input?: HTMLInputElement;
+    _internals: ElementInternals;
+    value: string;
+    validateInput: () => void;
+    buttonAriaLabelShow: string;
+    buttonAriaLabelHide: string;
+    _handleInput: () => void;
+    _manageRequired: () => void;
+    _setFormValue: (value: string) => void;
+}
 /**
  * Number
  */
 export type IncrementDecrement = 'inc' | 'dec';
 export declare class InputNumberController implements ReactiveController {
-    host: InputControllerHost;
+    host?: ReactiveControllerHost & Partial<ControllerHostProps>;
     private _longPressId?;
     private _repeaterId?;
     private _inputElement?;
-    constructor(host: InputControllerHost);
+    constructor(host: ReactiveControllerHost);
     hostUpdated(): void;
     handleActionBtnClick: (_: Event, type: IncrementDecrement) => void;
     handleActionBtnLongPressStart: (e: Event) => void;
@@ -21,12 +35,12 @@ export declare class InputNumberController implements ReactiveController {
  * password
  */
 export declare class InputPasswordController implements ReactiveController {
-    host: InputControllerHost;
+    host?: ReactiveControllerHost & Partial<ControllerHostProps>;
     _inputElement?: HTMLInputElement;
     _icon: Extract<Icon, 'visibility' | 'visibilityOff'>;
     _buttonAriaLabel: string;
     _type: Extract<SkfInput['type'], 'password' | 'text'>;
-    constructor(host: InputControllerHost);
+    constructor(host: ReactiveControllerHost);
     hostUpdated(): void;
     handleFieldLoaded: () => void;
     toggleVisibility: () => void;

package/dist/components/input/input.controllers.js

@@ -1,9 +1,9 @@
 class l {
   constructor(t) {
     this.handleActionBtnClick = (i, s) => {
-      var n;
+      var h, n;
       const e = this._inputElement;
-      e && (s === "inc" ? e.stepUp() : e.stepDown(), this.host.value = ((n = this._inputElement) == null ? void 0 : n.value) ?? "", this.host._internals.setFormValue(this.host.value), this.host.validateInput());
+      !e || !this.host || (s === "inc" ? e.stepUp() : e.stepDown(), this.host.value = ((h = this._inputElement) == null ? void 0 : h.value) ?? "", (n = this.host._internals) == null || n.setFormValue(this.host.value), this.host.validateInput && this.host.validateInput());
     }, this.handleActionBtnLongPressStart = (i) => {
       const s = i.target.getAttribute("aria-label") === "Increment" ? "inc" : "dec";
       this._longPressId = setTimeout(() => {
@@ -13,25 +13,29 @@ class l {
       }, 400);
     }, this.handleActionBtnLongPressEnd = () => {
       clearTimeout(this._longPressId), clearInterval(this._repeaterId);
-    }, this.host = t, t.addController(this);
+    }, (this.host = t).addController(this);
   }
   hostUpdated() {
-    this._inputElement = this.host.$input;
+    var t;
+    this._inputElement = (t = this.host) == null ? void 0 : t.$input;
   }
 }
-class o {
+class a {
   constructor(t) {
     this._icon = "visibility", this._type = "password", this.handleFieldLoaded = () => {
-      this._inputElement && (this.host.value = this._inputElement.value, this.host._handleInput());
+      var i;
+      !this._inputElement || !((i = this.host) != null && i._handleInput) || (this.host.value = this._inputElement.value, this.host._handleInput());
     }, this.toggleVisibility = () => {
-      this._inputElement && (this.host._handleInput(), this._type === "text" ? (this._buttonAriaLabel = this.host.buttonAriaLabelShow, this._icon = "visibility", this._type = "password") : (this._buttonAriaLabel = this.host.buttonAriaLabelHide, this._icon = "visibilityOff", this._type = "text"), this.host.requestUpdate(), this._inputElement.value = this.host.value);
-    }, this.host = t, t.addController(this), this._buttonAriaLabel = this.host.buttonAriaLabelShow;
+      var i;
+      !this._inputElement || !((i = this.host) != null && i._handleInput) || (this.host._handleInput(), this._type === "text" ? (this._buttonAriaLabel = this.host.buttonAriaLabelShow ?? "", this._icon = "visibility", this._type = "password") : (this._buttonAriaLabel = this.host.buttonAriaLabelHide ?? "", this._icon = "visibilityOff", this._type = "text"), this.host.requestUpdate(), this._inputElement.value = this.host.value ?? "");
+    }, (this.host = t).addController(this), this._buttonAriaLabel = this.host.buttonAriaLabelShow ?? "";
   }
   hostUpdated() {
-    this._inputElement = this.host.$input;
+    var t;
+    this._inputElement = (t = this.host) == null ? void 0 : t.$input;
   }
 }
 export {
   l as InputNumberController,
-  o as InputPasswordController
+  a as InputPasswordController
 };

package/dist/components/link/link.component.js

@@ -67,6 +67,7 @@ const e = (s = class extends d {
     })}
         		download=${c(t ? this.download : void 0)}
 				href=${c(t ? this.href : void 0)}
+				part="root"
 				rel=${c(t ? this.rel : void 0)}
 				target=${c(t ? this.target : void 0)}
 				type=${c(t ? void 0 : this.type)}

package/dist/components/link/link.styles.js

@@ -1,53 +1,57 @@
 import { css as r } from "lit";
-const o = r`
+const i = r`
 	/* stylelint-disable selector-class-pattern */
 	@layer components {
+		:host {
+			contain: layout;
+			display: inline;
+		}
+
 		.link {
 			align-items: center;
-			color: var(--state-color, var(--color));
+			color: var(--_skf-link-state-color, var(--_skf-link-color));
 			display: inline-flex;
-			flex-direction: var(--flex-direction, rows);
 			font-weight: var(--skf-font-weight-bold);
-			gap: var(--skf-spacing-50);
-			justify-content: flex-start;
+			gap: 0 var(--skf-spacing-25);
+			vertical-align: top;
 
 			&:is(a) {
 				text-decoration: none;
 			}
 
 			&:disabled {
-				--state-color: var(--color-disabled);
+				--_skf-link-state-color: var(--_skf-link-color-disabled);
 			}
 
 			&:hover {
-				--state-color: var(--color-hover);
+				--_skf-link-state-color: var(--_skf-link-color-hover);
 			}
 
 			&:focus-visible {
 				border-radius: var(--skf-border-radius-sm);
-				outline: var(--skf-border-width-md) solid var(--outline-color);
+				outline: var(--skf-border-width-md) solid var(--_skf-link-outline-color);
 				outline-offset: var(--skf-size-2);
 			}
 		}
 
 		.link--color-primary {
-			--color: var(--skf-interactive-text-color-primary);
-			--color-active: var(--skf-interactive-text-color-primary-active);
-			--color-disabled: var(--skf-interactive-text-color-disabled);
-			--color-hover: var(--skf-interactive-text-color-primary-hover);
-			--outline-color: var(--skf-interactive-text-color-primary);
+			--_skf-link-color: var(--skf-interactive-text-color-primary);
+			--_skf-link-color-active: var(--skf-interactive-text-color-primary-active);
+			--_skf-link-color-disabled: var(--skf-interactive-text-color-disabled);
+			--_skf-link-color-hover: var(--skf-interactive-text-color-primary-hover);
+			--_skf-link-outline-color: var(--skf-interactive-text-color-primary);
 		}
 
 		.link--color-inverse {
-			--color: var(--skf-interactive-text-color-inverse);
-			--color-active: var(--skf-interactive-text-color-inverse-active);
-			--color-disabled: var(--skf-interactive-text-color-disabled);
-			--color-hover: var(--skf-interactive-text-color-inverse-hover);
-			--outline-color: var(--skf-interactive-text-color-inverse);
+			--_skf-link-color: var(--skf-interactive-text-color-inverse);
+			--_skf-link-color-active: var(--skf-interactive-text-color-inverse-active);
+			--_skf-link-color-disabled: var(--skf-interactive-text-color-disabled);
+			--_skf-link-color-hover: var(--skf-interactive-text-color-inverse-hover);
+			--_skf-link-outline-color: var(--skf-interactive-text-color-inverse);
 		}
 
 		.link--icon-right {
-			--flex-direction: row-reverse;
+			flex-direction: row-reverse;
 		}
 
 		.link--stretch {
@@ -56,5 +60,5 @@ const o = r`
 	}
 `;
 export {
-  o as default
+  i as default
 };

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

@@ -5,12 +5,11 @@ import type { CSSResultGroup } from 'lit';
  *
  * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
  *
- * @property {"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"} [placement='bottom-start'] - The placement of the menu
- * @property {boolean} [isOpen=false] - Whether the menu is open
- * @property {string} [anchor] - The id of the element the menu will be anchored to
+ * @attribute {"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"} [placement='bottom-start'] - The placement of the menu
+ * @attribute {string} [anchor] - The id of the element the menu will be anchored to
  *
- * @event open - Fired when the menu is opened
- * @event close - Fired when the menu is closed
+ * @event skf-opened - Fired when the menu is opened
+ * @event skf-closed - Fired when the menu is closed
  *
  * @slot - The menu popover content
  *

package/dist/components/menu/menu.component.js

@@ -2,7 +2,7 @@ import { SkfPopoverBase as t } from "../../internal/base-classes/popover/popover
 import { styles as o } from "./menu.styles.js";
 const s = class s extends t {
   constructor() {
-    super(), this.placement = "bottom-start", t.classMap = { menu: !0 };
+    super(), this.placement = "bottom-start", this.triggerEvent = "click", t.classMap = { menu: !0 };
   }
   addEventListeners(e) {
     e.addEventListener("mouseenter", this.open);

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

@@ -0,0 +1,17 @@
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-nav>` is a component that displays a list of <nav-items>.
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @slot - The component's main content
+ *
+ * @tagname skf-nav
+ */
+export declare class SkfNav extends SkfElement {
+    static styles: CSSResultGroup;
+    vertical: boolean;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,34 @@
+import { SkfElement as s } from "../../internal/components/skf-element.js";
+import m from "../../styles/component.styles.js";
+import { html as p } from "lit";
+import { property as c } from "lit/decorators.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+import { styles as u } from "./nav.styles.js";
+var v = Object.defineProperty, d = (i, a, l, h) => {
+  for (var e = void 0, r = i.length - 1, n; r >= 0; r--)
+    (n = i[r]) && (e = n(a, l, e) || e);
+  return e && v(a, l, e), e;
+};
+const o = class o extends s {
+  constructor() {
+    super(...arguments), this.vertical = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.ariaLabel = this.ariaLabel ?? "Main navigation", this.role = "nav";
+  }
+  render() {
+    return p`
+			<ul aria-orientation=${f(this.vertical ? "vertical" : void 0)} role="menubar">
+				<slot></slot>
+			</ul>
+		`;
+  }
+};
+o.styles = [m, u];
+let t = o;
+d([
+  c({ type: Boolean, reflect: !0 })
+], t.prototype, "vertical");
+export {
+  t as SkfNav
+};

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

@@ -0,0 +1,8 @@
+import { SkfNav } from './nav.component';
+export * from './nav.component';
+export default SkfNav;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-nav': SkfNav;
+    }
+}

package/dist/components/nav/nav.js

@@ -0,0 +1,6 @@
+import { SkfNav as f } from "./nav.component.js";
+f.define("skf-nav");
+export {
+  f as SkfNav,
+  f as default
+};

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/nav/nav.styles.js

@@ -0,0 +1,17 @@
+import { css as t } from "lit";
+const e = t`
+	:host(:not([vertical])) {
+		width: fit-content;
+	}
+
+	ul {
+		display: flex;
+
+		:host([vertical]) & {
+			flex-direction: column;
+		}
+	}
+`;
+export {
+  e as styles
+};

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

@@ -0,0 +1,20 @@
+import '../link/link.js';
+import type SkfLink from '../link/link.js';
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-nav>` is a component that displays a list of <nav-items>.
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @slot - The component's main content
+ *
+ * @tagname skf-nav-item
+ */
+export declare class SkfNavItem extends SkfElement {
+    static styles: CSSResultGroup;
+    href: string;
+    icon?: SkfLink['icon'];
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,38 @@
+import "../link/link.js";
+import { SkfElement as m } from "../../internal/components/skf-element.js";
+import c from "../../styles/component.styles.js";
+import { html as h } from "lit";
+import { property as f } from "lit/decorators.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { styles as a } from "./nav-item.styles.js";
+var d = Object.defineProperty, p = (i, s, n, y) => {
+  for (var r = void 0, t = i.length - 1, l; t >= 0; t--)
+    (l = i[t]) && (r = l(s, n, r) || r);
+  return r && d(s, n, r), r;
+};
+const o = class o extends m {
+  constructor() {
+    super(...arguments), this.href = "#";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.role = "menuitem";
+  }
+  render() {
+    return h`
+			<skf-link color="inverse" href=${this.href} icon=${u(this.icon)}>
+				<slot></slot>
+			</skf-link>
+		`;
+  }
+};
+o.styles = [c, a];
+let e = o;
+p([
+  f({ reflect: !0 })
+], e.prototype, "href");
+p([
+  f()
+], e.prototype, "icon");
+export {
+  e as SkfNavItem
+};

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

@@ -0,0 +1,8 @@
+import { SkfNavItem } from './nav-item.component.js';
+export * from './nav-item.component.js';
+export default SkfNavItem;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-nav-item': SkfNavItem;
+    }
+}

package/dist/components/nav-item/nav-item.js

@@ -0,0 +1,6 @@
+import { SkfNavItem as e } from "./nav-item.component.js";
+e.define("skf-nav-item");
+export {
+  e as SkfNavItem,
+  e as default
+};

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,39 @@
+import { css as t } from "lit";
+const s = t`
+	@layer components {
+		skf-link::part(root) {
+			block-size: var(--skf-header-height);
+			display: flex;
+			padding-inline: var(--skf-spacing-100);
+			position: relative;
+		}
+
+		skf-link::part(root)::after {
+			content: '';
+			position: absolute;
+			transition: translate calc(var(--skf-motion-duration-fast) * 1ms)
+				var(--skf-motion-easing-ease-in);
+		}
+
+		skf-link::part(root):hover::after {
+			--_skf-nav-link-translate: 0;
+		}
+
+		:host-context(skf-nav:not([vertical])) skf-link::part(root)::after {
+			border-bottom: var(--skf-size-4) solid var(--skf-border-color-inverse);
+			inset-block-end: 0;
+			inset-inline: 0;
+			translate: 0 var(--_skf-nav-link-translate, 100%);
+		}
+
+		:host-context(skf-nav[vertical]) skf-link::part(root)::after {
+			border-left: var(--skf-size-4) solid var(--skf-border-color-inverse);
+			inset-block: 0;
+			inset-inline-start: 0;
+			translate: var(--_skf-nav-link-translate, -100%) 0;
+		}
+	}
+`;
+export {
+  s as styles
+};

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

@@ -1,16 +1,15 @@
 import { SkfPopoverBase } from '../../internal/base-classes/popover/popover.base.js';
 import type { CSSResultGroup } from 'lit';
 /**
- * The `<skf-popover>` is a general purpose component that displays the slot content.
+ * The `<skf-popover>` is a general purpose component that displays the slot content in a popover.
  *
  * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
  *
- * @property {"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"} [placement='bottom-start'] - The placement of the menu
- * @property {boolean} [isOpen=false] - Whether the menu is open
- * @property {string} [anchor] - The id of the element the menu will be anchored to
+ * @attribute {"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"} [placement='bottom-start'] - The placement of the menu
+ * @attribute {string} [anchor] - The id of the element the menu will be anchored to
  *
- * @event open - Fired when the menu is opened
- * @event close - Fired when the menu is closed
+ * @event skf-opened - Fired when the menu is opened
+ * @event skf-closed - Fired when the menu is closed
  *
  * @slot - The popover content
  *

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

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

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

@@ -7,8 +7,8 @@ import { type CSSResultGroup } from 'lit';
  *
  * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/78d5dd-radio-button) for design principles
  *
- * @attribute {boolean} disabled - If true, sets disabled state
- * @attribute {boolean} required - If true, value is required or must be checked for the form to be submittable
+ * @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
  *
@@ -18,13 +18,17 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
     static styles: CSSResultGroup;
+    /**
+     * @internal
+     * Initial state saved here as default for form resets.
+     */
     private _initialChecked;
     /** If true, outputs helping hints in console */
-    debug?: boolean;
+    debug: boolean;
     /** If true, outputs helping hints in console */
-    checked?: boolean;
+    checked: boolean;
     /** If true, forces component to invalid state until removed */
-    customInvalid?: boolean;
+    customInvalid: boolean;
     /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
     label?: string;
     /** If defined, adds name to the input-element */
@@ -39,7 +43,7 @@ export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
      */
     severity?: FormFieldBaseProps['severity'];
     /** If true, displays valid state after interaction */
-    showValid?: boolean;
+    showValid: boolean;
     /** The current value of the input field  */
     value: string;
     /** @internal */

package/dist/components/radio/radio.component.js

@@ -7,15 +7,15 @@ 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 g from "./radio.styles.js";
-var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (u, e, s, o) => {
-  for (var a = o > 1 ? void 0 : o ? C(e, s) : e, l = u.length - 1, h; l >= 0; l--)
-    (h = u[l]) && (a = (o ? h(e, s, a) : h(a)) || a);
-  return o && a && k(e, s, a), a;
+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;
 };
 const d = class d extends c {
   constructor() {
-    super(...arguments), this._initialChecked = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (e) => {
+    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 : "");
     };
   }
@@ -25,8 +25,8 @@ const d = class d extends c {
   firstUpdated() {
     var e;
     (e = this.$input) == null || e.addEventListener("change", (s) => {
-      var o;
-      s.stopPropagation(), this.pristine = !1, this.checked = (o = this.$input) == null ? void 0 : o.checked, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(""), this.emitEvent("change");
+      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._initialChecked = this.checked, this.addEventListener("reset", this._resetValue);
@@ -55,8 +55,8 @@ const d = class d extends c {
     const e = this.name;
     if (!e) return;
     (this.form ?? document).querySelectorAll(`skf-radio[name="${e}"]`).forEach((a) => {
-      const l = this.form === a.form, h = !this.form && !a.form;
-      a !== this && (l || h) && (a.checked = !1);
+      const o = this.form === a.form, h = !this.form && !a.form;
+      a !== this && (o || h) && (a.checked = !1);
     });
   }
   /** @internal */

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

@@ -1,2 +1 @@
-declare const _default: import("lit").CSSResult[];
-export default _default;
+export declare const styles: import("lit").CSSResult[];

package/dist/components/radio/radio.styles.js

@@ -99,5 +99,5 @@ const e = [
 	`
 ];
 export {
-  e as default
+  e as styles
 };