@skf-design-system/ui-components 1.0.2-beta.5 → 1.0.2-beta.7

package/dist/index.d.ts

@@ -28,8 +28,8 @@ export { default as SkfProgress } from './components/progress/progress.js';
 export { default as SkfRadio } from './components/radio/radio.js';
 export { default as SkfSegmentedButtonItem } from './components/segmented-button/segmented-button-item.js';
 export { default as SkfSegmentedButton } from './components/segmented-button/segmented-button.js';
-export { default as SkfOptionGroup } from './components/select/select-option-group.js';
-export { default as SkfOption } from './components/select/select-option.js';
+export { default as SkfSelectOptionGroup } from './components/select/select-option-group.js';
+export { default as SkfSelectOption } from './components/select/select-option.js';
 export { default as SkfSelect } from './components/select/select.js';
 export { default as SkfStepperItem } from './components/stepper/stepper-item.js';
 export { default as SkfStepper } from './components/stepper/stepper.js';

package/dist/index.js

@@ -56,14 +56,14 @@ import { SkfDatepickerPopup as ao } from "./components/datepicker/datepicker-pop
 import { SkfDatepicker as co } from "./components/datepicker/datepicker.component.js";
 import { SkfDialog as Io } from "./components/dialog/dialog.component.js";
 import { SkfDivider as lo } from "./components/divider/divider.component.js";
-import { SkfDrawer as go } from "./components/drawer/drawer.component.js";
+import { SkfDrawer as bo } from "./components/drawer/drawer.component.js";
 import { SkfHeader as Do } from "./components/header/header.component.js";
 import { SkfHeading as vo } from "./components/heading/heading.component.js";
-import { SkfIcon as Oo } from "./components/icon/icon.component.js";
-import { SkfInput as Co } from "./components/input/input.component.js";
-import { SkfLink as ho } from "./components/link/link.component.js";
-import { SkfLoader as Go } from "./components/loader/loader.component.js";
-import { SkfLogo as Mo } from "./components/logo/logo.component.js";
+import { SkfIcon as Po } from "./components/icon/icon.component.js";
+import { SkfInput as Lo } from "./components/input/input.component.js";
+import { SkfLink as wo } from "./components/link/link.component.js";
+import { SkfLoader as Mo } from "./components/loader/loader.component.js";
+import { SkfLogo as Oo } from "./components/logo/logo.component.js";
 import { SkfMenuItem as Ro } from "./components/menu/menu-item.component.js";
 import { SkfMenu as jo } from "./components/menu/menu.component.js";
 import { SkfNavItem as yo } from "./components/nav/nav-item.component.js";
@@ -83,11 +83,11 @@ import { SkfTabPanel as nr } from "./components/tabs/tab-panel.component.js";
 import { SkfTab as dr } from "./components/tabs/tab.component.js";
 import { SkfTabs as Ir } from "./components/tabs/tabs.component.js";
 import { SkfTag as lr } from "./components/tag/tag.component.js";
-import { SkfTextArea as gr } from "./components/textarea/textarea.component.js";
+import { SkfTextArea as br } from "./components/textarea/textarea.component.js";
 import { SkfToastItem as Dr } from "./components/toast/toast-item.component.js";
 import { SkfToastWrapper as vr } from "./components/toast/toast-wrapper.component.js";
-import { SkfToast as Or } from "./components/toast/toast.component.js";
-import { SkfTooltip as Cr } from "./components/tooltip/tooltip.component.js";
+import { SkfToast as Pr } from "./components/toast/toast.component.js";
+import { SkfTooltip as Lr } from "./components/tooltip/tooltip.component.js";
 export {
   X as SkfAccordion,
   U as SkfAccordionItem,
@@ -102,26 +102,26 @@ export {
   ao as SkfDatepickerPopup,
   Io as SkfDialog,
   lo as SkfDivider,
-  go as SkfDrawer,
+  bo as SkfDrawer,
   Do as SkfHeader,
   vo as SkfHeading,
-  Oo as SkfIcon,
-  Co as SkfInput,
-  ho as SkfLink,
-  Go as SkfLoader,
-  Mo as SkfLogo,
+  Po as SkfIcon,
+  Lo as SkfInput,
+  wo as SkfLink,
+  Mo as SkfLoader,
+  Oo as SkfLogo,
   jo as SkfMenu,
   Ro as SkfMenuItem,
   Eo as SkfNav,
   yo as SkfNavItem,
-  tr as SkfOption,
-  or as SkfOptionGroup,
   Jo as SkfPopover,
   Qo as SkfProgress,
   Vo as SkfRadio,
   _o as SkfSegmentedButton,
   Yo as SkfSegmentedButtonItem,
   mr as SkfSelect,
+  tr as SkfSelectOption,
+  or as SkfSelectOptionGroup,
   Sr as SkfStepper,
   fr as SkfStepperItem,
   xr as SkfSwitch,
@@ -129,9 +129,9 @@ export {
   nr as SkfTabPanel,
   Ir as SkfTabs,
   lr as SkfTag,
-  gr as SkfTextArea,
-  Or as SkfToast,
+  br as SkfTextArea,
+  Pr as SkfToast,
   Dr as SkfToastItem,
   vr as SkfToastWrapper,
-  Cr as SkfTooltip
+  Lr as SkfTooltip
 };

package/dist/internal/base-classes/popover/popover.base.d.ts

@@ -2,36 +2,55 @@ import { type Placement } from '@floating-ui/dom';
 import { SkfElement } from '../../components/skf-element.js';
 import { PopoverController } from '../../controllers/popover.controller.js';
 import { type CSSResultGroup } from 'lit';
+/**
+ * @description - Base class for popover components.
+ * This class provides common functionality for popovers, such as handling open/close states, positioning, and event management.
+ * It should be extended by specific popover components like `SkfPopover`, `SkfTooltip`, etc.
+ *
+ * @event {CustomEvent} skf-opened - Fired when the popover is opened
+ * @event {CustomEvent} skf-closed - Fired when the popover is closed
+ *
+ * @slot - The popover content
+ */
 export declare class SkfPopoverBase extends SkfElement {
     static styles: CSSResultGroup;
     static classMap: {};
+    /** @internal - The popover element, aka `this` */
     $popover: this;
+    /** Where the popover is positioned relative to the anchor element if it fits */
     placement: Placement;
+    /** The variant of the popover extending this base class */
     variant: 'menu' | 'popup' | 'tooltip';
+    /** The id of the element the popover will be anchored to */
     anchor?: string;
+    /** Whether the popover is currently open */
     isOpen: boolean;
+    /** @internal - Gap between popover and anchor */
     offset: number;
+    /** @internal - Element that triggered the popover */
     $anchor?: Element | HTMLElement | null;
+    /** If true, displays an arrow on the popover */
     arrow: boolean;
-    /** @internal */
+    /** @internal - the event that triggers the popover */
     triggerEvent: 'mouseenter' | 'click';
+    /** @internal - Reference to the arrow element */
     $arrow: HTMLElement;
     protected abortEventsController: AbortController;
     protected signal: AbortSignal;
     protected popoverController: PopoverController;
-    constructor();
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected _toggleOpen: (newValue?: boolean) => void;
     private _handleToggle;
     handleToggleOpen: () => Promise<void>;
-    handleAnchorEl(): void;
+    handleAnchorEl(): Promise<void>;
     handleAnchorChange: () => Promise<void>;
     reposition: () => Promise<void>;
     handleEscapeKey: (e: KeyboardEvent) => void;
-    open(e: Event): void;
+    open: (e: Event) => void;
     /** @internal add additional open tasks here in UI component */
     openExtended(): void;
-    close(): void;
+    close: () => void;
     /** @internal add additional close tasks here in UI component */
     closeExtended(): void;
     /** @internal eventlisteners here should implement abort signal */

package/dist/internal/base-classes/popover/popover.base.js

@@ -1,13 +1,13 @@
-import { flip as O, offset as x, arrow as A, computePosition as C } from "@floating-ui/dom";
+import { flip as O, offset as C, arrow as x, computePosition as A } from "@floating-ui/dom";
 import { SkfElement as S } from "../../components/skf-element.js";
 import { PopoverController as P } from "../../controllers/popover.controller.js";
 import { uuid as _ } from "../../helpers/uuid.js";
 import { watch as f } from "../../helpers/watch.js";
 import { componentStyles as L } from "../../../styles/component.styles.js";
 import { nothing as F, html as y } from "lit";
-import { property as u, state as c, query as T } from "lit/decorators.js";
-import { classMap as j } from "lit/directives/class-map.js";
-import { styles as k } from "./popover.styles.js";
+import { property as u, state as c, query as k } from "lit/decorators.js";
+import { classMap as T } from "lit/directives/class-map.js";
+import { styles as j } from "./popover.styles.js";
 var M = Object.defineProperty, R = Object.getOwnPropertyDescriptor, r = (m, t, o, i) => {
   for (var e = i > 1 ? void 0 : i ? R(t, o) : t, n = m.length - 1, a; n >= 0; n--)
     (a = m[n]) && (e = (i ? a(t, o, e) : a(e)) || e);
@@ -15,7 +15,7 @@ var M = Object.defineProperty, R = Object.getOwnPropertyDescriptor, r = (m, t, o
 }, p;
 const s = (p = class extends S {
   constructor() {
-    super(), this.$popover = this, this.placement = "top", this.variant = "popup", this.isOpen = !1, this.offset = 0, this.arrow = !1, this.triggerEvent = "mouseenter", this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, this.popoverController = new P(this), this._toggleOpen = (t) => {
+    super(...arguments), this.$popover = this, this.placement = "top", this.variant = "popup", this.isOpen = !1, this.offset = 0, this.arrow = !1, this.triggerEvent = "mouseenter", this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, this.popoverController = new P(this), this._toggleOpen = (t) => {
       this.isOpen = t ?? !this.isOpen;
     }, this._handleToggle = (t) => {
       const o = t.newState === "open";
@@ -30,9 +30,9 @@ const s = (p = class extends S {
     }, this.reposition = async () => {
       var n, a, h;
       if (!this.$anchor) return;
-      const t = [O(), x(this.offset)];
-      this.arrow && t.push(A({ element: this.$arrow }));
-      const { x: o, y: i, middlewareData: e } = await C(this.$anchor, this.$popover, {
+      const t = [O(), C(this.offset)];
+      this.arrow && t.push(x({ element: this.$arrow }));
+      const { x: o, y: i, middlewareData: e } = await A(this.$anchor, this.$popover, {
         placement: this.placement,
         middleware: t,
         strategy: "fixed"
@@ -41,27 +41,36 @@ const s = (p = class extends S {
         left: `${String(o)}px`,
         top: `${String(i)}px`
       }), this.arrow) {
-        const d = this.placement.split("-")[0], l = { top: "bottom", right: "left", bottom: "top", left: "right" }[d] ?? "", v = (n = e.flip) == null ? void 0 : n.index, g = (a = e.arrow) == null ? void 0 : a.x, b = (h = e.arrow) == null ? void 0 : h.y, w = typeof g == "number" ? `${String(g)}px` : "", $ = typeof b == "number" ? `${String(b)}px` : "", E = {
+        const d = this.placement.split("-")[0], l = { top: "bottom", right: "left", bottom: "top", left: "right" }[d] ?? "", g = (n = e.flip) == null ? void 0 : n.index, v = (a = e.arrow) == null ? void 0 : a.x, b = (h = e.arrow) == null ? void 0 : h.y, w = typeof v == "number" ? `${String(v)}px` : "", E = typeof b == "number" ? `${String(b)}px` : "", $ = {
           bottom: 45,
           right: 135,
           top: 225,
           left: 315
         };
         Object.assign(this.$arrow.style, {
-          top: $,
+          top: E,
           [this.placement.includes("left") ? "right" : "left"]: w,
-          [v ? d : l]: "calc(var(--_skf-popover-arrow-size) * -1)",
-          rotate: `${(E[l] + (v ? 180 : 0)).toString()}deg`
+          [g ? d : l]: "calc(var(--_skf-popover-arrow-size) * -1)",
+          rotate: `${($[l] + (g ? 180 : 0)).toString()}deg`
         });
       }
     }, this.handleEscapeKey = (t) => {
       t.key === "Escape" && this.close();
-    }, this.setAttribute("popover", "");
+    }, this.open = (t) => {
+      t.stopPropagation(), this._toggleOpen(!0), this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, document.addEventListener("keydown", this.handleEscapeKey, { signal: this.signal }), this.openExtended();
+    }, this.close = () => {
+      this.closeExtended(), this._toggleOpen(!1), this.abortEventsController.abort();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("popover", ""), this.addEventListener("toggle", (t) => {
+      this._handleToggle(t);
+    });
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.abortEventsController.abort();
   }
-  handleAnchorEl() {
+  async handleAnchorEl() {
     if (!this.$anchor) return;
     const t = this._containsFocusableElement(this);
     this.$anchor.addEventListener(
@@ -78,17 +87,11 @@ const s = (p = class extends S {
         t && i || this.close();
       },
       { signal: this.signal }
-    ), this.$popover.id = _(this.$anchor.id), ["popup", "menu"].includes(this.variant) && (this.$anchor.setAttribute("aria-haspopup", "true"), this.setAttribute("aria-labelledby", this.$anchor.id)), ["menu"].includes(this.variant) && this.$anchor.setAttribute("aria-controls", this.$popover.id), ["popup"].includes(this.variant) && t && (this.role = "dialog"), ["tooltip"].includes(this.variant) && this.$anchor.addEventListener("focusin", this.open.bind(this), { signal: this.signal });
-  }
-  open(t) {
-    t.stopPropagation(), this._toggleOpen(!0), document.addEventListener("keydown", this.handleEscapeKey.bind(this), { signal: this.signal }), this.openExtended();
+    ), this.$popover.id = await _(this.$anchor.id), ["popup", "menu"].includes(this.variant) && (this.$anchor.setAttribute("aria-haspopup", "true"), this.setAttribute("aria-labelledby", this.$anchor.id)), ["menu"].includes(this.variant) && this.$anchor.setAttribute("aria-controls", this.$popover.id), ["popup"].includes(this.variant) && t && (this.role = "dialog"), ["tooltip"].includes(this.variant) && this.$anchor.addEventListener("focusin", this.open, { signal: this.signal });
   }
   /** @internal add additional open tasks here in UI component */
   openExtended() {
   }
-  close() {
-    this.closeExtended(), this._toggleOpen(!1), document.removeEventListener("keydown", this.handleEscapeKey.bind(this));
-  }
   /** @internal add additional close tasks here in UI component */
   closeExtended() {
   }
@@ -103,13 +106,9 @@ const s = (p = class extends S {
   render() {
     var t;
     return ["popup", "menu"].includes(this.variant) && ((t = this.$anchor) == null || t.setAttribute("aria-expanded", this.isOpen ? "true" : "false")), y`
-			<div
-				@toggle=${this._handleToggle}
-				class=${j({ popover: !0, ...p.classMap })}
-				id="popover"
-			>
+			<div class=${T({ popover: !0, ...p.classMap })} id="root">
 				<slot></slot>
-				${this.arrow ? y`<div class="popover__arrow" id="arrow"></div>` : F}
+				${this.arrow ? y`<div id="arrow"></div>` : F}
 			</div>
 		`;
   }
@@ -134,7 +133,7 @@ const s = (p = class extends S {
       return h;
     }
   }
-}, p.styles = [L, k], p.classMap = {}, p);
+}, p.styles = [L, j], p.classMap = {}, p);
 r([
   u()
 ], s.prototype, "placement", 2);
@@ -160,7 +159,7 @@ r([
   c()
 ], s.prototype, "triggerEvent", 2);
 r([
-  T("#arrow")
+  k("#arrow")
 ], s.prototype, "$arrow", 2);
 r([
   f("isOpen", { afterUpdate: !0 })

package/dist/internal/base-classes/popover/popover.styles.js

@@ -1,9 +1,7 @@
 import { css as o } from "lit";
 const e = o`
-	/* stylelint-disable selector-class-pattern */
 	@layer components {
 		:host {
-			background-color: var(--skf-bg-color-neutral-1);
 			border: none;
 			border-radius: var(--skf-border-radius-sm);
 			box-shadow: var(--skf-shadow-md);
@@ -19,15 +17,16 @@ const e = o`
 			display: none;
 		}
 
-		#popover {
+		#root {
+			background-color: var(--skf-bg-color-neutral-1);
 			height: 100%;
 			width: 100%;
 		}
 
-		.popover__arrow {
+		#arrow {
 			--_skf-popover-arrow-size: calc(6px * 0.7071);
 
-			background-color: var(--skf-bg-color-neutral-1);
+			background-color: inherit;
 			block-size: calc(var(--_skf-popover-arrow-size) * 2);
 			box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 5%);
 			inline-size: calc(var(--_skf-popover-arrow-size) * 2);

package/dist/internal/components/hint/hint.component.d.ts

@@ -3,7 +3,11 @@ import { SkfElement } from '../../components/skf-element.js';
 import type { Severity } from '../../types.js';
 import { type CSSResultGroup } from 'lit';
 export declare class SkfHint extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
+    disabled: boolean;
     severity?: Severity;
+    /** @internal */
+    _handleStateChange(property: string, _prev: unknown, next: unknown): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/internal/components/hint/hint.component.js

@@ -1,21 +1,42 @@
+var v = (t) => {
+  throw TypeError(t);
+};
+var d = (t, e, s) => e.has(t) || v("Cannot " + s);
+var m = (t, e, s) => (d(t, e, "read from private field"), s ? s.call(t) : e.get(t)), h = (t, e, s) => e.has(t) ? v("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), c = (t, e, s, o) => (d(t, e, "write to private field"), o ? o.call(t, s) : e.set(t, s), s);
 import "../../../components/icon/icon.js";
-import { SkfElement as l } from "../skf-element.js";
-import { ICON_SEVERITY as n } from "../../constants/iconSeverity.js";
-import { componentStyles as v } from "../../../styles/component.styles.js";
-import { html as f } from "lit";
-import { property as y } from "lit/decorators.js";
-import { styles as d } from "./hint.styles.js";
-var a = Object.defineProperty, c = (s, i, m, h) => {
-  for (var r = void 0, t = s.length - 1, p; t >= 0; t--)
-    (p = s[t]) && (r = p(i, m, r) || r);
-  return r && a(i, m, r), r;
+import { SkfElement as O } from "../skf-element.js";
+import { ICON_SEVERITY as g } from "../../constants/iconSeverity.js";
+import { stateMap as w } from "../../helpers/stateMap.js";
+import { watch as C } from "../../helpers/watch.js";
+import { componentStyles as P } from "../../../styles/component.styles.js";
+import { html as _ } from "lit";
+import { property as b } from "lit/decorators.js";
+import { styles as S } from "./hint.styles.js";
+var j = Object.defineProperty, x = Object.getOwnPropertyDescriptor, f = (t, e, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? x(e, s) : e, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (r = (o ? l(e, s, r) : l(r)) || r);
+  return o && r && j(e, s, r), r;
+};
+const u = {
+  disabled: "disabled",
+  severity: ["error", "info", "success", "warning"]
 };
-const o = class o extends l {
+var p, a;
+const y = class y extends O {
+  constructor() {
+    super(...arguments);
+    h(this, p);
+    h(this, a);
+    c(this, p, this.attachInternals()), c(this, a, m(this, p).states), this.disabled = !1;
+  }
+  _handleStateChange(s, o, r) {
+    w(m(this, a), u[s]).set(r);
+  }
   render() {
-    return f`
+    return _`
 			<div id="root">
-				${this.severity && f`
-					<skf-icon color=${this.severity} name="${n[this.severity]}" size="xs">
+				${this.severity && _`
+					<skf-icon color=${this.severity} name="${g[this.severity]}" size="xs">
 					</skf-icon>
 				`}
 				<slot></slot>
@@ -23,11 +44,17 @@ const o = class o extends l {
 		`;
   }
 };
-o.styles = [v, d];
-let e = o;
-c([
-  y()
-], e.prototype, "severity");
+p = new WeakMap(), a = new WeakMap(), y.styles = [P, S];
+let i = y;
+f([
+  b({ type: Boolean })
+], i.prototype, "disabled", 2);
+f([
+  b({ type: String })
+], i.prototype, "severity", 2);
+f([
+  C(Object.keys(u))
+], i.prototype, "_handleStateChange", 1);
 export {
-  e as SkfHint
+  i as SkfHint
 };

package/dist/internal/components/hint/hint.styles.js

@@ -1,35 +1,39 @@
-import { css as r } from "lit";
-const s = r`
-	#root {
-		align-items: center;
-		color: var(--_skf-hint-color, var(--skf-text-color-secondary));
-		display: flex;
-		font-size: var(--skf-font-size-75);
-		font-weight: var(--skf-font-weight-medium);
-		gap: var(--skf-spacing-25);
+import { css as o } from "lit";
+const s = o`
+	@layer components {
+		@layer base {
+			#root {
+				--_skf-hint-color: var(--skf-text-color-secondary);
 
-		:host-context(:disabled) & {
-			color: inherit;
+				align-items: center;
+				color: var(--_skf-hint-color);
+				display: flex;
+				font-size: var(--skf-font-size-75);
+				font-weight: var(--skf-font-weight-medium);
+				gap: var(--skf-spacing-25);
+			}
 		}
 
-		:host([severity='alert']) & {
-			--_skf-hint-color: var(--skf-severity-fg-color-alert);
-		}
+		@layer mods {
+			:host(:state(disabled)) #root {
+				--_skf-hint-color: var(--skf-interactive-text-color-disabled);
+			}
 
-		:host([severity='error']) & {
-			--_skf-hint-color: var(--skf-severity-fg-color-error);
-		}
+			:host(:not(:state(disabled)):state(error)) #root {
+				--_skf-hint-color: var(--skf-severity-fg-color-error);
+			}
 
-		:host([severity='info']) & {
-			--_skf-hint-color: var(--skf-severity-fg-color-info);
-		}
+			:host(:not(:state(disabled)):state(info)) #root {
+				--_skf-hint-color: var(--skf-severity-fg-color-info);
+			}
 
-		:host([severity='success']) & {
-			--_skf-hint-color: var(--skf-severity-fg-color-success);
-		}
+			:host(:not(:state(disabled)):state(success)) #root {
+				--_skf-hint-color: var(--skf-severity-fg-color-success);
+			}
 
-		:host([severity='warning']) & {
-			--_skf-hint-color: var(--skf-severity-fg-color-warning);
+			:host(:not(:state(disabled)):state(warning)) #root {
+				--_skf-hint-color: var(--skf-severity-fg-color-warning);
+			}
 		}
 	}
 `;

package/dist/internal/controllers/popover.controller.d.ts

@@ -7,9 +7,11 @@ interface ControllerHostProps {
     $anchor?: Element | HTMLElement | null;
     $popover?: Element | HTMLElement | null;
     reposition: () => Promise<void>;
+    _toggleOpen: (open: boolean) => void;
 }
 export declare class PopoverController implements ReactiveController {
     host?: ReactiveControllerHost & Partial<ControllerHostProps>;
+    intersectionObserver: IntersectionObserver | undefined;
     private cleanup;
     private active;
     private autoStart;

package/dist/internal/helpers/uuid.d.ts

@@ -1,15 +1,13 @@
 /**
- * Generate a unique id based on a string
+ * Generate a unique id based on a string using the Crypto API
  *
  * @param str - string to base hash on
- * @returns string - a unique prefixed id
- */
-export declare function uuid(str: string): string;
-/**
- * @describe - cyrb53 - A simple hash function for strings
+ * @returns Promise<string> - a unique prefixed id
  *
- * @param str - string to hash
- * @param seed
- * @returns - a 12 digit number
+ * @usage
+ * ```typescript
+ * const uniqueId = await uuid('my-element-id');
+ * console.log(uniqueId); // skf-uuid-123456789abc
+ * ```
  */
-export declare const hash: (str: string, seed?: number) => number;
+export declare function uuid(str: string): Promise<string>;

package/dist/internal/helpers/uuid.js

@@ -1,14 +1,7 @@
-function r(u) {
-  const i = n(u);
-  return `skf-uuid-${String(i)}`;
+async function c(r) {
+  const t = new TextEncoder().encode(r), e = await crypto.subtle.digest("SHA-256", t);
+  return `skf-uuid-${Array.from(new Uint8Array(e)).map((n) => n.toString(16).padStart(2, "0")).join("").slice(0, 12)}`;
 }
-const n = (u, i = 0) => {
-  let t = 3735928559 ^ i, h = 1103547991 ^ i;
-  for (let l = 0, a; l < u.length; l++)
-    a = u.charCodeAt(l), t = Math.imul(t ^ a, 2654435761), h = Math.imul(h ^ a, 1597334677);
-  return t = Math.imul(t ^ t >>> 16, 2246822507), t ^= Math.imul(h ^ h >>> 13, 3266489909), h = Math.imul(h ^ h >>> 16, 2246822507), h ^= Math.imul(t ^ t >>> 13, 3266489909), 4294967296 * (2097151 & h) + (t >>> 0);
-};
 export {
-  n as hash,
-  r as uuid
+  c as uuid
 };

package/dist/internal/helpers/watch.d.ts

@@ -1,5 +1,5 @@
 import type { LitElement } from 'lit';
-type UpdateHandler = (property: string, prev?: unknown, next?: unknown) => void;
+type UpdateHandler = (property: string, prev?: unknown, next?: unknown) => void | Promise<void>;
 type NonUndefined<A> = A extends undefined ? never : A;
 type UpdateHandlerFunctionKeys<T extends object> = {
     [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;

package/dist/internal/templates/asterisk.d.ts

@@ -1 +1 @@
-export declare function Asterisk(label?: string, className?: string): import("lit").TemplateResult<1>;
+export declare function Asterisk(label: string, className?: string): import("lit").TemplateResult<1>;

package/dist/internal/templates/asterisk.js

@@ -1,9 +1,9 @@
 import { html as r } from "lit";
-import { ifDefined as e } from "lit/directives/if-defined.js";
-function t(i, s) {
+import { ifDefined as a } from "lit/directives/if-defined.js";
+function t(s, i) {
   return r`
-		<span class="visually-hidden">(${i ?? "Required"})</span>
-		<span aria-hidden="true" class=${e(s)} id="asterisk">*</span>
+		<span class="visually-hidden">(${s})</span>
+		<span aria-hidden="true" class=${a(i)} id="asterisk">*</span>
 	`;
 }
 export {

package/dist/internal/types.d.ts

@@ -16,3 +16,7 @@ export type HeadingType = 'h1' | 'h2' | 'h3' | 'h4';
  * Forms
  */
 export type FormFieldSeverity = Exclude<Severity, 'error'>;
+/**
+ * States
+ */
+export type States<T extends string> = Record<string, T | T[]>;

package/dist/styles/global-alt.css

@@ -1 +1 @@
-@charset "UTF-8";:host,:where(:root){--skf-color-green-lightest: #e5f3ecff;--skf-color-green-base: #048942ff;--skf-color-green-dark: #097c42ff;--skf-color-green-darker: #106b41ff;--skf-color-blue-lighest: #e7eefbff;--skf-color-blue-base: #4f84e0ff;--skf-color-blue-dark: #4978c8ff;--skf-color-blue-darker: #4167a8ff;--skf-color-yellow-lightest: #fff9e7ff;--skf-color-yellow-base: #ffca15ff;--skf-color-yellow-darker: #dfb31bff;--skf-color-yellow-darkest: #b49524ff;--skf-color-orange-lightest: #fff2e5ff;--skf-color-orange-base: #ff8004ff;--skf-color-orange-darker: #df740dff;--skf-color-orange-darkest: #b46518ff;--skf-color-red-lightest: #f9e5e5ff;--skf-color-red-base: #cc0000ff;--skf-color-red-darker: #b3080aff;--skf-color-red-darkest: #921217ff;--skf-color-neutral-lightest: #f6f6f6ff;--skf-color-neutral-lighter: #ebeceeff;--skf-color-neutral-light: #d5d8dcff;--skf-color-neutral-base: #c7cad0ff;--skf-color-neutral-dark: #aaafb8ff;--skf-color-neutral-darker: #808895ff;--skf-color-neutral-darkest: #676f7cff;--skf-color-neutral-black: #273342ff;--skf-color-neutral-white: #ffffffff;--skf-color-brand-base: #0f58d6ff;--skf-color-brand-lightest: #d9e4f8ff;--skf-color-brand-lighter: #c5d7f5ff;--skf-color-brand-dark: #084abdff;--skf-color-neutral-transparent: #ffffff00;--skf-color-neutral-opacity: #12111199;--skf-color-brand-darker: #0b3e96ff}:host,:where(:root){--skf-size-1: .0625rem;--skf-size-2: .125rem;--skf-size-4: .25rem;--skf-size-8: .5rem;--skf-size-12: .75rem;--skf-size-16: 1rem;--skf-size-20: 1.25rem;--skf-size-24: 1.5rem;--skf-size-32: 2rem;--skf-size-44: 2.75rem;--skf-size-48: 3rem;--skf-size-56: 3.5rem}:host,:where(:root){--skf-type-scale-10: .625rem;--skf-type-scale-12: .75rem;--skf-type-scale-14: .875rem;--skf-type-scale-16: 1rem;--skf-type-scale-18: 1.125rem;--skf-type-scale-20: 1.25rem;--skf-type-scale-22: 1.375rem;--skf-type-scale-24: 1.5rem;--skf-type-scale-28: 1.75rem;--skf-type-scale-32: 2rem;--skf-type-scale-36: 2.25rem;--skf-type-scale-40: 2.5rem;--skf-type-scale-46: 2.875rem;--skf-type-scale-50: 3.125rem;--skf-type-scale-56: 3.5rem;--skf-type-scale-64: 4rem;--skf-type-scale-72: 4.5rem;--skf-type-scale-90: 5.625rem;--skf-type-scale-124: 7.75rem}:host,:where(:root){--skf-bg-color-neutral-1: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-light) );--skf-bg-color-neutral-2: var(--skf-color-neutral-lighter);--skf-bg-color-neutral-3: var(--skf-color-neutral-light);--skf-bg-color-neutral-4: light-dark( var(--skf-color-neutral-base), var(--skf-color-neutral-base) );--skf-bg-color-neutral-5: var(--skf-color-neutral-dark);--skf-bg-color-neutral-6: var(--skf-color-neutral-darker);--skf-bg-color-neutral-7: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-white) );--skf-bg-color-emphasised: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base))}:host,:where(:root){--skf-text-color-primary: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-lightest) );--skf-text-color-secondary: var(--skf-color-neutral-darkest);--skf-text-color-tertiary: var(--skf-color-neutral-dark);--skf-text-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-text-color-emphasised: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base))}:host,:where(:root){--skf-icon-size-xs: var(--skf-size-16);--skf-icon-size-sm: var(--skf-size-20);--skf-icon-size-md: var(--skf-size-24);--skf-icon-size-lg: var(--skf-size-32)}:host,:where(:root){--skf-icon-color-primary: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-black) );--skf-icon-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-icon-color-emphasised: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base));--skf-icon-color-secondary: var(--skf-color-neutral-darkest)}:host,:where(:root){--skf-border-color-emphasised: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-border-color-primary: var(--skf-color-neutral-dark);--skf-border-color-secondary: light-dark( var(--skf-color-neutral-base), var(--skf-color-neutral-base) );--skf-border-color-tertiary: var(--skf-color-neutral-light);--skf-border-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) )}:host,:where(:root){--skf-border-width-md: var(--skf-size-2);--skf-border-width-lg: var(--skf-size-4);--skf-border-width-sm: var(--skf-size-1)}:host,:where(:root){--skf-border-radius-md: var(--skf-size-8);--skf-border-radius-lg: var(--skf-size-16);--skf-border-radius-sm: var(--skf-size-2)}:host,:where(:root){--skf-interactive-bg-color-primary: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-lightest) );--skf-interactive-bg-color-primary-hover: var(--skf-color-brand-dark);--skf-interactive-bg-color-primary-active: var(--skf-color-brand-darker);--skf-interactive-bg-color-secondary: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-interactive-bg-color-secondary-hover: var(--skf-color-brand-lightest);--skf-interactive-bg-color-secondary-active: var(--skf-color-brand-lighter);--skf-interactive-bg-color-tertiary: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-lightest) );--skf-interactive-bg-color-destructive: light-dark( var(--skf-color-red-base), var(--skf-color-red-base) );--skf-interactive-bg-color-destructive-hover: var(--skf-color-red-darker);--skf-interactive-bg-color-destructive-active: var(--skf-color-red-darkest);--skf-interactive-bg-color-disabled: var(--skf-color-neutral-lighter);--skf-interactive-bg-color-tertiary-hover: var(--skf-color-neutral-lighter);--skf-interactive-bg-color-tertiary-active: light-dark( var(--skf-color-neutral-base), var(--skf-color-neutral-lightest) );--skf-interactive-text-color-disabled: var(--skf-color-neutral-darker);--skf-interactive-text-color-primary: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-interactive-text-color-primary-hover: var(--skf-color-brand-dark);--skf-interactive-text-color-primary-active: var(--skf-color-brand-dark);--skf-interactive-text-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-interactive-text-color-inverse-hover: var(--skf-color-neutral-lightest);--skf-interactive-text-color-inverse-active: var(--skf-color-neutral-lightest);--skf-interactive-border-color-focus: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-interactive-border-color-disabled: var(--skf-color-neutral-darker);--skf-interactive-border-color-primary-hover: var(--skf-color-neutral-darkest);--skf-interactive-border-color-primary: var(--skf-color-neutral-dark);--skf-interactive-border-color-primary-active: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-interactive-icon-color-primary: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-black) );--skf-interactive-icon-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-interactive-icon-color-disabled: var(--skf-color-neutral-darker);--skf-interactive-icon-color-primary-hover: var(--skf-color-neutral-darkest);--skf-interactive-icon-color-inverse-hover: var(--skf-color-neutral-lightest)}:host,:where(:root){--skf-severity-bg-color-success: var(--skf-color-green-lightest);--skf-severity-bg-color-info: light-dark( var(--skf-color-blue-lighest), var(--skf-color-blue-lighest) );--skf-severity-bg-color-warning: var(--skf-color-orange-lightest);--skf-severity-bg-color-alert: var(--skf-color-yellow-lightest);--skf-severity-bg-color-error: var(--skf-color-red-lightest)}:host,:where(:root){--skf-severity-fg-color-success: light-dark( var(--skf-color-green-base), var(--skf-color-green-base) );--skf-severity-fg-color-info: light-dark(var(--skf-color-blue-base), var(--skf-color-blue-base));--skf-severity-fg-color-warning: light-dark( var(--skf-color-orange-base), var(--skf-color-orange-base) );--skf-severity-fg-color-error: light-dark(var(--skf-color-red-base), var(--skf-color-red-base));--skf-severity-fg-color-alert: light-dark( var(--skf-color-yellow-base), var(--skf-color-yellow-base) )}:host,:where(:root){--skf-spacing-25: var(--skf-size-4);--skf-spacing-50: var(--skf-size-8);--skf-spacing-75: var(--skf-size-12);--skf-spacing-100: var(--skf-size-16);--skf-spacing-125: var(--skf-size-20);--skf-spacing-150: var(--skf-size-24);--skf-spacing-200: var(--skf-size-32);--skf-spacing-250: var(--skf-size-44);--skf-spacing-300: var(--skf-size-48);--skf-spacing-400: var(--skf-size-56)}:host,:where(:root){--skf-font-size-25: var(--skf-type-scale-10);--skf-font-size-50: var(--skf-type-scale-12);--skf-font-size-75: var(--skf-type-scale-14);--skf-font-size-100: var(--skf-type-scale-16);--skf-font-size-200: var(--skf-type-scale-18);--skf-font-size-300: var(--skf-type-scale-20);--skf-font-size-400: var(--skf-type-scale-22);--skf-font-size-500: var(--skf-type-scale-24);--skf-font-size-600: var(--skf-type-scale-28);--skf-font-size-700: var(--skf-type-scale-32);--skf-font-size-800: var(--skf-type-scale-36);--skf-font-size-900: var(--skf-type-scale-40);--skf-font-size-1000: var(--skf-type-scale-46);--skf-font-size-1100: var(--skf-type-scale-50);--skf-font-size-1200: var(--skf-type-scale-56);--skf-font-size-1300: var(--skf-type-scale-64);--skf-font-size-1400: var(--skf-type-scale-72);--skf-font-size-1500: var(--skf-type-scale-90);--skf-font-size-1600: var(--skf-type-scale-124)}:host,:where(:root){--skf-font-weight-light: 100;--skf-font-weight-regular: 400;--skf-font-weight-medium: 500;--skf-font-weight-bold: 700}:host,:where(:root){--skf-font-family-sans: SKFSans}:host,:where(:root){--skf-line-height-25: var(--skf-type-scale-10);--skf-line-height-50: var(--skf-type-scale-12);--skf-line-height-75: var(--skf-type-scale-14);--skf-line-height-100: var(--skf-type-scale-16);--skf-line-height-200: var(--skf-type-scale-18);--skf-line-height-300: var(--skf-type-scale-20);--skf-line-height-400: var(--skf-type-scale-22);--skf-line-height-500: var(--skf-type-scale-24);--skf-line-height-600: var(--skf-type-scale-28);--skf-line-height-700: var(--skf-type-scale-32);--skf-line-height-800: var(--skf-type-scale-36);--skf-line-height-900: var(--skf-type-scale-40);--skf-line-height-1000: var(--skf-type-scale-46);--skf-line-height-1100: var(--skf-type-scale-50);--skf-line-height-1200: var(--skf-type-scale-56);--skf-line-height-1300: var(--skf-type-scale-64);--skf-line-height-1400: var(--skf-type-scale-72);--skf-line-height-1500: var(--skf-type-scale-90);--skf-line-height-size-1600: var(--skf-type-scale-124)}:host,:where(:root){--skf-motion-duration-fast: 200;--skf-motion-duration-normal: 300;--skf-motion-duration-slow: 400}:host,:where(:root){--skf-motion-easing-ease-in: ease-in;--skf-motion-easing-ease-out: ease-out}:host,:where(:root){--skf-shadow-xl: 0 10px 15px -3px #0000001a;--skf-shadow-md: 0 1px 3px 0 #0000001a;--skf-shadow-sm: 0 1px 2px 0 #0000000d;--skf-shadow-lg: 0 4px 6px -1px #0000001a}:host,:where(:root){--skf-logo-primary: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base));--skf-logo-secondary: light-dark(var(--skf-color-neutral-black), var(--skf-color-neutral-black));--skf-logo-inverse: light-dark(var(--skf-color-neutral-white), var(--skf-color-neutral-white))}body{color:var(--skf-text-color-primary);font:var(--skf-font-size-100) / var(--skf-line-height-300) var(--skf-font-family-sans);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}body:has(skf-dialog[open]){overflow:hidden}
+@charset "UTF-8";:host,:where(:root){--skf-color-green-lightest: #e5f3ecff;--skf-color-green-base: #048942ff;--skf-color-green-dark: #097c42ff;--skf-color-green-darker: #106b41ff;--skf-color-blue-lightest: #e7eefbff;--skf-color-blue-base: #4f84e0ff;--skf-color-blue-dark: #4978c8ff;--skf-color-blue-darker: #4167a8ff;--skf-color-yellow-lightest: #fff9e7ff;--skf-color-yellow-base: #ffca15ff;--skf-color-yellow-darker: #dfb31bff;--skf-color-yellow-darkest: #b49524ff;--skf-color-orange-lightest: #fff2e5ff;--skf-color-orange-base: #ff8004ff;--skf-color-orange-darker: #df740dff;--skf-color-orange-darkest: #b46518ff;--skf-color-red-lightest: #f9e5e5ff;--skf-color-red-base: #cc0000ff;--skf-color-red-darker: #b3080aff;--skf-color-red-darkest: #921217ff;--skf-color-neutral-lightest: #f6f6f6ff;--skf-color-neutral-lighter: #ebeceeff;--skf-color-neutral-light: #d5d8dcff;--skf-color-neutral-base: #c7cad0ff;--skf-color-neutral-dark: #aaafb8ff;--skf-color-neutral-darker: #808895ff;--skf-color-neutral-darkest: #676f7cff;--skf-color-neutral-black: #273342ff;--skf-color-neutral-white: #ffffffff;--skf-color-brand-base: #0f58d6ff;--skf-color-brand-lightest: #d9e4f8ff;--skf-color-brand-lighter: #c5d7f5ff;--skf-color-brand-dark: #084abdff;--skf-color-neutral-transparent: #ffffff00;--skf-color-neutral-opacity: #12111199;--skf-color-brand-darker: #0b3e96ff;--skf-color-purple-base: #781e93ff;--skf-color-purple-light: #f1e8f4ff}:host,:where(:root){--skf-size-1: .0625rem;--skf-size-2: .125rem;--skf-size-4: .25rem;--skf-size-8: .5rem;--skf-size-12: .75rem;--skf-size-16: 1rem;--skf-size-20: 1.25rem;--skf-size-24: 1.5rem;--skf-size-32: 2rem;--skf-size-44: 2.75rem;--skf-size-48: 3rem;--skf-size-56: 3.5rem}:host,:where(:root){--skf-type-scale-10: .625rem;--skf-type-scale-12: .75rem;--skf-type-scale-14: .875rem;--skf-type-scale-16: 1rem;--skf-type-scale-18: 1.125rem;--skf-type-scale-20: 1.25rem;--skf-type-scale-22: 1.375rem;--skf-type-scale-24: 1.5rem;--skf-type-scale-28: 1.75rem;--skf-type-scale-32: 2rem;--skf-type-scale-36: 2.25rem;--skf-type-scale-40: 2.5rem;--skf-type-scale-46: 2.875rem;--skf-type-scale-50: 3.125rem;--skf-type-scale-56: 3.5rem;--skf-type-scale-64: 4rem;--skf-type-scale-72: 4.5rem;--skf-type-scale-90: 5.625rem;--skf-type-scale-124: 7.75rem}:host,:where(:root){--skf-bg-color-neutral-1: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-light) );--skf-bg-color-neutral-2: var(--skf-color-neutral-lighter);--skf-bg-color-neutral-3: var(--skf-color-neutral-light);--skf-bg-color-neutral-4: light-dark( var(--skf-color-neutral-base), var(--skf-color-neutral-base) );--skf-bg-color-neutral-5: var(--skf-color-neutral-dark);--skf-bg-color-neutral-6: var(--skf-color-neutral-darker);--skf-bg-color-neutral-7: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-white) );--skf-bg-color-emphasized: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base))}:host,:where(:root){--skf-text-color-primary: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-lightest) );--skf-text-color-secondary: var(--skf-color-neutral-darkest);--skf-text-color-tertiary: var(--skf-color-neutral-dark);--skf-text-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-text-color-emphasized: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base))}:host,:where(:root){--skf-icon-size-xs: var(--skf-size-16);--skf-icon-size-sm: var(--skf-size-20);--skf-icon-size-md: var(--skf-size-24);--skf-icon-size-lg: var(--skf-size-32)}:host,:where(:root){--skf-icon-color-primary: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-black) );--skf-icon-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-icon-color-emphasized: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base));--skf-icon-color-secondary: var(--skf-color-neutral-darkest)}:host,:where(:root){--skf-border-color-emphasized: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-border-color-primary: var(--skf-color-neutral-dark);--skf-border-color-secondary: light-dark( var(--skf-color-neutral-base), var(--skf-color-neutral-base) );--skf-border-color-tertiary: var(--skf-color-neutral-light);--skf-border-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) )}:host,:where(:root){--skf-border-width-md: var(--skf-size-2);--skf-border-width-lg: var(--skf-size-4);--skf-border-width-sm: var(--skf-size-1)}:host,:where(:root){--skf-border-radius-md: var(--skf-size-8);--skf-border-radius-lg: var(--skf-size-16);--skf-border-radius-sm: var(--skf-size-2)}:host,:where(:root){--skf-interactive-bg-color-primary: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-lightest) );--skf-interactive-bg-color-primary-hover: var(--skf-color-brand-dark);--skf-interactive-bg-color-primary-active: var(--skf-color-brand-darker);--skf-interactive-bg-color-secondary: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-interactive-bg-color-secondary-hover: var(--skf-color-brand-lightest);--skf-interactive-bg-color-secondary-active: var(--skf-color-brand-lighter);--skf-interactive-bg-color-tertiary: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-lightest) );--skf-interactive-bg-color-destructive: light-dark( var(--skf-color-red-base), var(--skf-color-red-base) );--skf-interactive-bg-color-destructive-hover: var(--skf-color-red-darker);--skf-interactive-bg-color-destructive-active: var(--skf-color-red-darkest);--skf-interactive-bg-color-disabled: var(--skf-color-neutral-lighter);--skf-interactive-bg-color-tertiary-hover: var(--skf-color-neutral-lighter);--skf-interactive-bg-color-tertiary-active: light-dark( var(--skf-color-neutral-base), var(--skf-color-neutral-lightest) );--skf-interactive-text-color-disabled: var(--skf-color-neutral-darker);--skf-interactive-text-color-primary: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-interactive-text-color-primary-hover: var(--skf-color-brand-dark);--skf-interactive-text-color-primary-active: var(--skf-color-brand-dark);--skf-interactive-text-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-interactive-text-color-inverse-hover: var(--skf-color-neutral-lightest);--skf-interactive-text-color-inverse-active: var(--skf-color-neutral-lightest);--skf-interactive-border-color-focus: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-interactive-border-color-disabled: var(--skf-color-neutral-darker);--skf-interactive-border-color-primary-hover: var(--skf-color-neutral-darkest);--skf-interactive-border-color-primary: var(--skf-color-neutral-dark);--skf-interactive-border-color-primary-active: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-interactive-icon-color-primary: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-black) );--skf-interactive-icon-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-interactive-icon-color-disabled: var(--skf-color-neutral-darker);--skf-interactive-icon-color-primary-hover: var(--skf-color-neutral-darkest);--skf-interactive-icon-color-inverse-hover: var(--skf-color-neutral-lightest)}:host,:where(:root){--skf-severity-bg-color-success: var(--skf-color-green-lightest);--skf-severity-bg-color-info: var(--skf-color-blue-lightest);--skf-severity-bg-color-warning: var(--skf-color-orange-lightest);--skf-severity-bg-color-alert: var(--skf-color-yellow-lightest);--skf-severity-bg-color-error: var(--skf-color-red-lightest)}:host,:where(:root){--skf-severity-fg-color-success: light-dark( var(--skf-color-green-base), var(--skf-color-green-base) );--skf-severity-fg-color-info: light-dark(var(--skf-color-blue-base), var(--skf-color-blue-base));--skf-severity-fg-color-warning: light-dark( var(--skf-color-orange-base), var(--skf-color-orange-base) );--skf-severity-fg-color-error: light-dark(var(--skf-color-red-base), var(--skf-color-red-base));--skf-severity-fg-color-alert: light-dark( var(--skf-color-yellow-base), var(--skf-color-yellow-base) )}:host,:where(:root){--skf-spacing-25: var(--skf-size-4);--skf-spacing-50: var(--skf-size-8);--skf-spacing-75: var(--skf-size-12);--skf-spacing-100: var(--skf-size-16);--skf-spacing-125: var(--skf-size-20);--skf-spacing-150: var(--skf-size-24);--skf-spacing-200: var(--skf-size-32);--skf-spacing-250: var(--skf-size-44);--skf-spacing-300: var(--skf-size-48);--skf-spacing-400: var(--skf-size-56)}:host,:where(:root){--skf-font-size-25: var(--skf-type-scale-10);--skf-font-size-50: var(--skf-type-scale-12);--skf-font-size-75: var(--skf-type-scale-14);--skf-font-size-100: var(--skf-type-scale-16);--skf-font-size-200: var(--skf-type-scale-18);--skf-font-size-300: var(--skf-type-scale-20);--skf-font-size-400: var(--skf-type-scale-22);--skf-font-size-500: var(--skf-type-scale-24);--skf-font-size-600: var(--skf-type-scale-28);--skf-font-size-700: var(--skf-type-scale-32);--skf-font-size-800: var(--skf-type-scale-36);--skf-font-size-900: var(--skf-type-scale-40);--skf-font-size-1000: var(--skf-type-scale-46);--skf-font-size-1100: var(--skf-type-scale-50);--skf-font-size-1200: var(--skf-type-scale-56);--skf-font-size-1300: var(--skf-type-scale-64);--skf-font-size-1400: var(--skf-type-scale-72);--skf-font-size-1500: var(--skf-type-scale-90);--skf-font-size-1600: var(--skf-type-scale-124)}:host,:where(:root){--skf-font-weight-light: 100;--skf-font-weight-regular: 400;--skf-font-weight-medium: 500;--skf-font-weight-bold: 700}:host,:where(:root){--skf-font-family-sans: SKFSans}:host,:where(:root){--skf-line-height-25: var(--skf-type-scale-10);--skf-line-height-50: var(--skf-type-scale-12);--skf-line-height-75: var(--skf-type-scale-14);--skf-line-height-100: var(--skf-type-scale-16);--skf-line-height-200: var(--skf-type-scale-18);--skf-line-height-300: var(--skf-type-scale-20);--skf-line-height-400: var(--skf-type-scale-22);--skf-line-height-500: var(--skf-type-scale-24);--skf-line-height-600: var(--skf-type-scale-28);--skf-line-height-700: var(--skf-type-scale-32);--skf-line-height-800: var(--skf-type-scale-36);--skf-line-height-900: var(--skf-type-scale-40);--skf-line-height-1000: var(--skf-type-scale-46);--skf-line-height-1100: var(--skf-type-scale-50);--skf-line-height-1200: var(--skf-type-scale-56);--skf-line-height-1300: var(--skf-type-scale-64);--skf-line-height-1400: var(--skf-type-scale-72);--skf-line-height-1500: var(--skf-type-scale-90);--skf-line-height-size-1600: var(--skf-type-scale-124)}:host,:where(:root){--skf-motion-duration-fast: 200;--skf-motion-duration-normal: 300;--skf-motion-duration-slow: 400}:host,:where(:root){--skf-motion-easing-ease-in: ease-in;--skf-motion-easing-ease-out: ease-out}:host,:where(:root){--skf-shadow-xl: 0 10px 15px -3px #0000001a;--skf-shadow-md: 0 1px 3px 0 #0000001a;--skf-shadow-sm: 0 1px 2px 0 #0000000d;--skf-shadow-lg: 0 4px 6px -1px #0000001a}:host,:where(:root){--skf-logo-primary: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base));--skf-logo-secondary: light-dark(var(--skf-color-neutral-black), var(--skf-color-neutral-black));--skf-logo-inverse: light-dark(var(--skf-color-neutral-white), var(--skf-color-neutral-white))}body{color:var(--skf-text-color-primary);font:var(--skf-font-size-100) / var(--skf-line-height-300) var(--skf-font-family-sans);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}body:has(skf-dialog[open]){overflow:hidden}