@skf-design-system/ui-components 1.0.0-alpha.33 → 1.0.0-alpha.35

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

@@ -1,9 +1,10 @@
+import "../../../components/icon/icon.js";
 import { SkfElement as l } from "../skf-element.js";
 import { ICON_SEVERITY as n } from "../../constants/iconSeverity.js";
-import v from "../../../styles/component.styles.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 d from "./hint.styles.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);

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

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

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

@@ -34,5 +34,5 @@ const s = r`
 	}
 `;
 export {
-  s as default
+  s as styles
 };

package/dist/internal/components/skf-element.d.ts

@@ -1,10 +1,8 @@
-import { CSSResult, LitElement } from 'lit';
+import { LitElement } from 'lit';
 export declare class SkfElement extends LitElement {
     static define(name: string, elementConstructor?: CustomElementConstructor, options?: ElementDefinitionOptions): void;
     static dependencies: Record<string, typeof SkfElement>;
     constructor();
     /** Custom event emitter helper function. Transmits user actions or component state change. Use composed=false for event that should not pierce shadowDom. */
     emit(name: string, options?: CustomEventInit): Event;
-    /** This let's a component set styles in the light DOM. Scope css selectors with custom tag name to just target the slot. */
-    protected _setSlotStyles(slottedStyles: CSSResult): void;
 }

package/dist/internal/components/skf-element.js

@@ -1,9 +1,9 @@
 import { LitElement as d } from "lit";
 const s = class s extends d {
-  static define(e, t = this, n = {}) {
+  static define(e, t = this, r = {}) {
     if (!customElements.get(e)) {
       customElements.define(e, class extends t {
-      }, n);
+      }, r);
       return;
     }
   }
@@ -64,19 +64,14 @@ const s = class s extends d {
       };
       return this.dispatchEvent(new Event(e, u)), new Event(e, t);
     }
-    const r = new CustomEvent(e, {
+    const n = new CustomEvent(e, {
       bubbles: !0,
       cancelable: !0,
       composed: !0,
       detail: {},
       ...t
     });
-    return this.dispatchEvent(r), r;
-  }
-  /** This let's a component set styles in the light DOM. Scope css selectors with custom tag name to just target the slot. */
-  _setSlotStyles(e) {
-    const t = new CSSStyleSheet();
-    t.replaceSync(e.cssText), document.adoptedStyleSheets = [...document.adoptedStyleSheets, t];
+    return this.dispatchEvent(n), n;
   }
 };
 s.dependencies = {};

package/dist/internal/constants/iconSeverity.d.ts

@@ -1,4 +1,5 @@
-import type { Icon, SeverityFgColor } from '@skf-design-system/ui-assets';
-type IconSeverity = Readonly<Record<SeverityFgColor, Icon>>;
+import type { Severity } from '../types.js';
+import type { Icon } from '@skf-design-system/ui-assets';
+type IconSeverity = Readonly<Record<Severity, Icon>>;
 export declare const ICON_SEVERITY: IconSeverity;
 export {};

package/dist/internal/constants/iconSeverity.js

@@ -1,10 +1,9 @@
-const n = Object.freeze({
-  alert: "warningDiamond",
+const n = {
   error: "danger",
   info: "info",
   success: "checkCircle",
   warning: "warningDiamond"
-});
+};
 export {
   n as ICON_SEVERITY
 };

package/dist/internal/controllers/elementOverflowController.d.ts

@@ -0,0 +1,13 @@
+import type { SkfNav } from '../../components/nav/nav.component.js';
+type InputControllerHost = SkfNav;
+export declare class ElementOverflowController {
+    host: InputControllerHost;
+    resizeObserver?: ResizeObserver;
+    watchedContainerEl?: HTMLElement;
+    isFullyVisible: boolean;
+    constructor(host: InputControllerHost);
+    initResizeObserver(el?: HTMLElement): void;
+    _checkVisibility: () => void;
+    disconnect(): void;
+}
+export {};

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

@@ -1,13 +1,19 @@
-import { SkfSelect } from '../../components/select/select.component.js';
-import type { SkfPopoverBase } from '../base-classes/popover/popover.base.js';
-import type { ReactiveController } from 'lit';
-type ControllerHost = SkfPopoverBase | SkfSelect;
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Workaround for storybook helper not being able to import types
+ * E.g type ControllerHost = SkfPopover;
+ */
+interface ControllerHostProps {
+    $anchor?: Element | HTMLElement | null;
+    $popover?: Element | HTMLElement | null;
+    reposition: () => Promise<void>;
+}
 export declare class PopoverController implements ReactiveController {
-    host?: ControllerHost;
+    host?: ReactiveControllerHost & Partial<ControllerHostProps>;
     private cleanup;
     private active;
     private autoStart;
-    constructor(host: ControllerHost, autoStart?: boolean);
+    constructor(host: ReactiveControllerHost, autoStart?: boolean);
     hostConnected(): void;
     hostDisconnected(): void;
     start(): void;

package/dist/internal/controllers/popover.controller.js

@@ -1,7 +1,7 @@
-import { autoUpdate as n } from "@floating-ui/dom";
+import { autoUpdate as h } from "@floating-ui/dom";
 class c {
   constructor(t, o = !0) {
-    this.active = !1, this.autoStart = !0, this.host = t, t.addController(this), this.autoStart = o;
+    this.active = !1, this.autoStart = !0, (this.host = t).addController(this), this.autoStart = o;
   }
   hostConnected() {
     var t;
@@ -17,15 +17,11 @@ class c {
     });
   }
   start() {
-    var r, e;
-    const t = (r = this.host) == null ? void 0 : r.$anchor, o = (e = this.host) == null ? void 0 : e.$popover;
-    if (!t || !o) {
-      console.warn("PopoverController: anchor or popup not found");
-      return;
-    }
-    this.active || (this.cleanup = n(t, o, () => {
-      var s;
-      (s = this.host) == null || s.reposition().catch((i) => {
+    var s, e;
+    const t = (s = this.host) == null ? void 0 : s.$anchor, o = (e = this.host) == null ? void 0 : e.$popover;
+    !t || !o || this.active || (o.popover = "manual", this.cleanup = h(t, o, () => {
+      var r;
+      (r = this.host) != null && r.reposition && this.host.reposition().catch((i) => {
         console.error(i);
       });
     }), this.active = !0);

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

@@ -0,0 +1,2 @@
+/** Formats a date to SKF standard format. Can be localized, defaults to GB English */
+export declare function dateFormatter(date?: Date | null, locale?: string): string;

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

@@ -1,2 +1,2 @@
-import type { FormFieldBaseProps } from '../types/formField.js';
-export declare function hintSeverity(hostSeverity: FormFieldBaseProps['severity'], invalid: boolean): "error" | ("success" | "info" | "warning" | "alert") | undefined;
+import type { FormFieldSeverity } from '../types.js';
+export declare function hintSeverity(invalid: boolean, hostSeverity?: FormFieldSeverity): "error" | FormFieldSeverity | undefined;

package/dist/internal/helpers/hintSeverity.js

@@ -1,5 +1,5 @@
 function t(r, e) {
-  return e ? "error" : r;
+  return r ? "error" : e;
 }
 export {
   t as hintSeverity

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

@@ -0,0 +1,14 @@
+/**
+ * CSS pseudo class state helper, handles state management within scope of set states (stateOptions),
+ * allowing for easy state manipulation and retrieval within one or multiple state scopes.
+ * Helper currently assumes only one state within scope is allowed at a time.
+ */
+export declare function stateMap<T extends string>(states: CustomStateSet, options: T | T[]): {
+    clear: () => void;
+    get: () => T | undefined;
+    set: (state?: T | boolean) => void;
+    has: (state?: T) => boolean;
+    add: (state: T) => void;
+    remove: (state?: T) => void;
+    toggle: (state?: T | boolean) => void;
+};

package/dist/internal/helpers/stateMap.js

@@ -0,0 +1,68 @@
+function w(o, u) {
+  const r = Array.isArray(u) ? u : [u];
+  function f() {
+    r.forEach((n) => {
+      o.delete(n);
+    });
+  }
+  function l() {
+    const n = [];
+    if (r.forEach((e) => {
+      o.has(e) && n.push(e);
+    }), n.length !== 0)
+      return n.length > 1 && (console.warn("Multiple states found, returning first state"), console.warn(n)), n[0];
+  }
+  function d(n) {
+    if (typeof n == "boolean" || !n)
+      if (n)
+        n = r[0];
+      else {
+        f();
+        return;
+      }
+    if (typeof n == "boolean") throw new Error("State must be a string from here on out");
+    r.forEach((e) => {
+      o.has(e) && o.delete(e);
+    }), o.add(n);
+  }
+  function c(n) {
+    if (n ?? (n = r[0]), typeof n == "boolean") {
+      n ? o.add(r[0]) : f();
+      return;
+    }
+    i(n), o.has(n) ? o.delete(n) : o.add(n);
+  }
+  function h(n) {
+    return n ?? (n = r[0]), i(n), o.has(n);
+  }
+  function p(n) {
+    if (typeof n == "boolean")
+      if (n === !0)
+        n = r[0];
+      else {
+        f();
+        return;
+      }
+    if (typeof n == "boolean") throw new Error("State must be a string from here on out");
+    i(n), o.add(n);
+  }
+  function g(n) {
+    n ?? (n = r[0]), i(n), o.delete(n);
+  }
+  function i(n) {
+    if (!r.includes(n))
+      throw new Error(`State "${n}" is not a valid state option.`);
+  }
+  return {
+    clear: f,
+    get: l,
+    set: d,
+    has: h,
+    add: p,
+    remove: g,
+    toggle: c
+  };
+}
+export {
+  w as stateMap
+};

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

@@ -0,0 +1,22 @@
+export type Mutable<T> = {
+    -readonly [K in keyof T]: T[K];
+};
+type oneToNine = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type zeroToNine = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+/**
+ * Years
+ */
+type YYYY = `19${zeroToNine}${zeroToNine}` | `20${zeroToNine}${zeroToNine}`;
+/**
+ * Months
+ */
+type MM = `0${oneToNine}` | `1${0 | 1 | 2}`;
+/**
+ * Days
+ */
+type DD = `0${oneToNine}` | `${1 | 2}${zeroToNine}` | `3${0 | 1}`;
+/**
+ * YYYY-MM-DD
+ */
+export type ISODateString = `${YYYY}-${MM}-${DD}`;
+export {};

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

@@ -0,0 +1,15 @@
+/**
+ * Generate a unique id based on a string
+ *
+ * @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
+ *
+ * @param str - string to hash
+ * @param seed
+ * @returns - a 12 digit number
+ */
+export declare const hash: (str: string, seed?: number) => number;

package/dist/internal/helpers/uuid.js

@@ -0,0 +1,14 @@
+function r(u) {
+  const i = n(u);
+  return `skf-uuid-${String(i)}`;
+}
+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
+};

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

@@ -1,5 +1,5 @@
 import type { LitElement } from 'lit';
-type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+type UpdateHandler = (property: string, prev?: unknown, next?: unknown) => 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/helpers/watch.js

@@ -1,28 +1,28 @@
-function o(f, U) {
-  const e = {
+function u(n, U) {
+  const f = {
     waitUntilFirstUpdate: !1,
     afterUpdate: !1,
     ...U
   };
   return (l, c) => {
-    const { update: d } = l, h = Array.isArray(f) ? f : [f];
+    const { update: d } = l, h = Array.isArray(n) ? n : [n];
     l.update = function(i) {
-      e.afterUpdate || h.forEach((n) => {
-        const t = n;
+      f.afterUpdate || h.forEach((a) => {
+        const t = a;
         if (i.has(t)) {
-          const a = i.get(t), s = this[t];
-          a !== s && (!e.waitUntilFirstUpdate || this.hasUpdated) && this[c](a, s);
+          const s = i.get(t), e = this[t];
+          s !== e && (!f.waitUntilFirstUpdate || this.hasUpdated) && this[c](a, s, e);
         }
-      }), d.call(this, i), e.afterUpdate && h.forEach((n) => {
-        const t = n;
+      }), d.call(this, i), f.afterUpdate && h.forEach((a) => {
+        const t = a;
         if (i.has(t)) {
-          const a = i.get(t), s = this[t];
-          a !== s && (!e.waitUntilFirstUpdate || this.hasUpdated) && this[c](a, s);
+          const s = i.get(t), e = this[t];
+          s !== e && (!f.waitUntilFirstUpdate || this.hasUpdated) && this[c](a, s, e);
         }
       });
     };
   };
 }
 export {
-  o as watch
+  u as watch
 };

package/dist/internal/storybook/styles.d.ts

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

package/dist/internal/types/formField.d.ts

@@ -1,6 +1,6 @@
 import type { SeverityFgColor } from '@skf-design-system/ui-assets';
 type HTMLInputTypeAttribute = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
-type FormFieldSeverity = Exclude<SeverityFgColor, 'error'>;
+export type FormFieldSeverity = Exclude<SeverityFgColor, 'alert' | 'error'>;
 export interface FormFieldBaseProps {
     customInvalid?: unknown;
     disabled?: boolean;

package/dist/internal/types.d.ts

@@ -0,0 +1,18 @@
+import type { SeverityFgColor, Icon as UIAssetsIcon, IconColor as UIAssetsIconColor } from '@skf-design-system/ui-assets';
+/**
+ * Alias
+ *
+ * Enables type-mapping for the `@wc-toolkit/storybook-helpers` plugin
+ * It can't translate types from external packages
+ */
+export type Icon = UIAssetsIcon;
+export type IconColor = UIAssetsIconColor | Severity;
+export type Severity = Exclude<SeverityFgColor, 'alert'>;
+/**
+ * Generic
+ */
+export type HeadingType = 'h1' | 'h2' | 'h3' | 'h4';
+/**
+ * Forms
+ */
+export type FormFieldSeverity = Exclude<Severity, 'error'>;

package/dist/styles/component.styles.d.ts

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

package/dist/styles/component.styles.js

@@ -1,52 +1,53 @@
 import { css as e } from "lit";
 const t = e`
-	@layer reset, globals, components, overrides;
-
-	@layer reset {
-		:host {
-			box-sizing: border-box;
-			contain: content;
-			display: block;
-
-			*,
-			*::before,
-			*::after {
-				box-sizing: inherit;
-				margin: 0;
-				padding: 0;
+	@layer base, components, overrides;
+
+	@layer base {
+		@layer props {
+			:host {
+				--skf-is-tablet: false;
+				--skf-box-spacing: var(--skf-spacing-100);
+
+				/* mq-token needed here */
+				@media screen and (width >= 768px) {
+					--skf-is-tablet: true;
+					--skf-box-spacing: var(--skf-spacing-150);
+				}
 			}
 		}
 
-		:is(button, input, select, textarea) {
-			all: unset;
-			font: inherit;
-		}
-	}
-
-	@layer globals {
-		:host {
-			--skf-is-tablet: false;
-			--skf-box-spacing: var(--skf-spacing-100);
-
-			/* mq-token needed here */
-			@media screen and (width >= 768px) {
-				--skf-is-tablet: true;
-				--skf-box-spacing: var(--skf-spacing-150);
+		@layer normalize {
+			:host {
+				box-sizing: border-box;
+				color: var(--skf-text-color-primary);
+				contain: content;
+				display: block;
+
+				*,
+				*::before,
+				*::after {
+					box-sizing: inherit;
+					margin: 0;
+					padding: 0;
+				}
 			}
 
-			color: var(--skf-text-color-primary);
-		}
+			:is(button, input, select, textarea) {
+				all: unset;
+				font: inherit;
+			}
 
-		:is(button, input, label, select) {
-			cursor: pointer;
+			:is(button, input, label, select) {
+				cursor: pointer;
 
-			&:disabled,
-			&:has(:disabled) {
-				cursor: not-allowed;
+				&:disabled,
+				&:has(:disabled) {
+					cursor: not-allowed;
+				}
 			}
 		}
 	}
 `;
 export {
-  t as default
+  t as componentStyles
 };

package/dist/styles/form-field.styles.js

@@ -51,6 +51,14 @@ const i = e`
 				--_skf-field-input-padding-inline-end: 0;
 			}
 
+			&:has(input) {
+				block-size: var(--_skf-field-input-height, var(--skf-size-44));
+
+				:host([size='sm']) & {
+					--_skf-field-input-height: var(--skf-size-32);
+				}
+			}
+
 			&:has(textarea) {
 				padding-block: var(--_skf-field-input-padding-block, var(--skf-spacing-75));
 
@@ -131,7 +139,7 @@ const i = e`
 		}
 
 		input {
-			height: var(--_skf-field-input-height, var(--skf-size-44));
+			block-size: 100%;
 
 			&[type='number'] {
 				appearance: textfield;
@@ -141,10 +149,6 @@ const i = e`
 			&[type='search']::-webkit-search-cancel-button {
 				display: none;
 			}
-
-			:host([size='sm']) & {
-				--_skf-field-input-height: var(--skf-size-32);
-			}
 		}
 
 		/**
@@ -163,7 +167,7 @@ const i = e`
 			border-left: var(--skf-border-width-sm) solid var(--skf-border-color-secondary);
 			display: grid;
 			height: 50%;
-			place-items: center;
+			place-content: center;
 			width: 3rem;
 
 			&:last-of-type {
@@ -198,6 +202,7 @@ const i = e`
 		skf-icon {
 			pointer-events: none;
 
+			&[name='arrowRight'],
 			&[name='search'] {
 				align-self: center;
 			}

package/dist/styles/global-alt.css

@@ -0,0 +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}

package/dist/styles/global.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))}@font-face{font-family:SKFSans;src:url(https://fonts.skf.com/SKFSans-Regular.woff)}@font-face{font-family:SKFSans;font-style:italic;src:url(https://fonts.skf.com/SKFSans-Italic.woff)}@font-face{font-family:SKFSans;font-weight:100;src:url(https://fonts.skf.com/SKFSans-Light.woff)}@font-face{font-family:SKFSans;font-style:italic;font-weight:100;src:url(https://fonts.skf.com/SKFSans-LightItalic.woff)}@font-face{font-family:SKFSans;font-weight:500;src:url(https://fonts.skf.com/SKFSans-Medium.woff)}@font-face{font-family:SKFSans;font-style:italic;font-weight:500;src:url(https://fonts.skf.com/SKFSans-MediumItalic.woff)}@font-face{font-family:SKFSans;font-weight:700;src:url(https://fonts.skf.com/SKFSans-Bold.woff)}@font-face{font-family:SKFSans;font-style:italic;font-weight:700;src:url(https://fonts.skf.com/SKFSans-BoldItalic.woff)}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}
+@charset "UTF-8";@font-face{font-family:SKFSans;src:url(https://fonts.skf.com/SKFSans-Regular.woff)}@font-face{font-family:SKFSans;font-style:italic;src:url(https://fonts.skf.com/SKFSans-Italic.woff)}@font-face{font-family:SKFSans;font-weight:100;src:url(https://fonts.skf.com/SKFSans-Light.woff)}@font-face{font-family:SKFSans;font-style:italic;font-weight:100;src:url(https://fonts.skf.com/SKFSans-LightItalic.woff)}@font-face{font-family:SKFSans;font-weight:500;src:url(https://fonts.skf.com/SKFSans-Medium.woff)}@font-face{font-family:SKFSans;font-style:italic;font-weight:500;src:url(https://fonts.skf.com/SKFSans-MediumItalic.woff)}@font-face{font-family:SKFSans;font-weight:700;src:url(https://fonts.skf.com/SKFSans-Bold.woff)}@font-face{font-family:SKFSans;font-style:italic;font-weight:700;src:url(https://fonts.skf.com/SKFSans-BoldItalic.woff)}: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}