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

package/dist/custom-elements.json

@@ -11,6 +11,22 @@
           "description": "The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text.",
           "name": "SkfIcon",
           "members": [
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#states",
+              "privacy": "private",
+              "type": {
+                "text": "CustomStateSet"
+              }
+            },
             {
               "kind": "field",
               "name": "color",
@@ -20,7 +36,6 @@
               "default": "'primary'",
               "description": "Sets the color of the icon",
               "attribute": "color",
-              "reflects": true,
               "expandedType": {
                 "text": "'error' | 'info' | 'warning' | 'primary' | 'inverse' | 'emphasised' | 'secondary' | 'success'"
               }
@@ -55,7 +70,6 @@
               "default": "'md'",
               "description": "Size of the icon",
               "attribute": "size",
-              "reflects": true,
               "expandedType": {
                 "text": "'xs' | 'sm' | 'md' | 'lg'"
               }
@@ -499,6 +513,22 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#states",
+              "privacy": "private",
+              "type": {
+                "text": "CustomStateSet"
+              }
+            },
             {
               "kind": "field",
               "name": "buttonLabel",
@@ -529,8 +559,7 @@
               },
               "default": "false",
               "description": "If true, renders with an close button and sets aria-role to `status`",
-              "attribute": "persistent",
-              "reflects": true
+              "attribute": "persistent"
             },
             {
               "kind": "field",
@@ -540,7 +569,6 @@
               },
               "description": "If defined, gives the supplied appearance",
               "attribute": "severity",
-              "reflects": true,
               "expandedType": {
                 "text": "'error' | 'info' | 'warning' | 'success' | undefined"
               }
@@ -548,6 +576,9 @@
           ],
           "events": [
             {
+              "type": {
+                "text": "CustomEvent"
+              },
               "description": "Fires when the close button is clicked",
               "name": "skf-alert-close"
             }
@@ -697,6 +728,22 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#states",
+              "privacy": "private",
+              "type": {
+                "text": "CustomStateSet"
+              }
+            },
             {
               "kind": "field",
               "name": "label",
@@ -709,14 +756,13 @@
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "small",
               "type": {
-                "text": "'md' | 'sm'"
+                "text": "boolean"
               },
-              "default": "'md'",
-              "description": "Displays an alternative size",
-              "attribute": "size",
-              "reflects": true
+              "default": "false",
+              "description": "If true, renders a smaller version",
+              "attribute": "small"
             }
           ],
           "events": [
@@ -736,13 +782,13 @@
               "fieldName": "label"
             },
             {
-              "name": "size",
+              "name": "small",
               "type": {
-                "text": "'md' | 'sm'"
+                "text": "boolean"
               },
-              "default": "'md'",
-              "description": "Displays an alternative size",
-              "fieldName": "size"
+              "default": "false",
+              "description": "If true, renders a smaller version",
+              "fieldName": "small"
             }
           ],
           "superclass": {
@@ -1135,6 +1181,12 @@
           "kind": "class",
           "description": "The `<skf-card>` can be used to group related subjects in a container\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/021eed-card) for design principles",
           "name": "SkfCard",
+          "cssProperties": [
+            {
+              "description": "Ability to set a custom background color",
+              "name": "--mod-card-bg-color"
+            }
+          ],
           "slots": [
             {
               "description": "The card's main content",
@@ -1142,6 +1194,22 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#states",
+              "privacy": "private",
+              "type": {
+                "text": "CustomStateSet"
+              }
+            },
             {
               "kind": "field",
               "name": "noBorder",
@@ -1150,8 +1218,7 @@
               },
               "default": "false",
               "description": "If true, removes border",
-              "attribute": "no-border",
-              "reflects": true
+              "attribute": "no-border"
             },
             {
               "kind": "field",
@@ -1161,8 +1228,7 @@
               },
               "default": "false",
               "description": "If true, removes padding",
-              "attribute": "no-padding",
-              "reflects": true
+              "attribute": "no-padding"
             },
             {
               "kind": "field",
@@ -1172,8 +1238,7 @@
               },
               "default": "false",
               "description": "If true, the Card fills the parent element height",
-              "attribute": "stretch",
-              "reflects": true
+              "attribute": "stretch"
             }
           ],
           "attributes": [
@@ -2288,6 +2353,22 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#states",
+              "privacy": "private",
+              "type": {
+                "text": "CustomStateSet"
+              }
+            },
             {
               "kind": "field",
               "name": "as",
@@ -2310,7 +2391,6 @@
               },
               "description": "If defined, changes the appearance of the heading",
               "attribute": "styled-as",
-              "reflects": true,
               "expandedType": {
                 "text": "'h1' | 'h2' | 'h3' | 'h4' | undefined"
               }
@@ -2836,10 +2916,26 @@
           "cssProperties": [
             {
               "description": "The height of the logo",
-              "name": "--skf-logo-height"
+              "name": "--mod-logo-height"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#states",
+              "privacy": "private",
+              "type": {
+                "text": "CustomStateSet"
+              }
+            },
             {
               "kind": "field",
               "name": "title",
@@ -5147,16 +5243,34 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#states",
+              "privacy": "private",
+              "type": {
+                "text": "CustomStateSet"
+              }
+            },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "'sm' | 'md'"
+                "text": "Size"
               },
               "default": "'md'",
               "description": "Specifies Tag size",
               "attribute": "size",
-              "reflects": true
+              "expandedType": {
+                "text": "'sm' | 'md'"
+              }
             },
             {
               "kind": "field",
@@ -5178,7 +5292,6 @@
               },
               "description": "If defined, gives the supplied appearance",
               "attribute": "color",
-              "reflects": true,
               "expandedType": {
                 "text": "'error' | 'info' | 'warning' | 'success' | undefined"
               }
@@ -5201,19 +5314,21 @@
               },
               "default": "false",
               "description": "If true, adds trailing button to remove tag",
-              "attribute": "removable",
-              "reflects": true
+              "attribute": "removable"
             }
           ],
           "attributes": [
             {
               "name": "size",
               "type": {
-                "text": "'sm' | 'md'"
+                "text": "Size"
               },
               "default": "'md'",
               "description": "Specifies Tag size",
-              "fieldName": "size"
+              "fieldName": "size",
+              "expandedType": {
+                "text": "'sm' | 'md'"
+              }
             },
             {
               "name": "icon",
@@ -7025,6 +7140,30 @@
               "name": "parentAnimationDiv",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              },
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#states",
+              "privacy": "private",
+              "type": {
+                "text": "CustomStateSet"
+              },
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "buttonLabel",
@@ -7064,7 +7203,6 @@
               "default": "false",
               "description": "If true, renders with an close button and sets aria-role to `status`",
               "attribute": "persistent",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "SkfAlert",
                 "module": "src/components/alert/alert.component.ts"
@@ -7078,7 +7216,6 @@
               },
               "description": "If defined, gives the supplied appearance",
               "attribute": "severity",
-              "reflects": true,
               "expandedType": {
                 "text": "'error' | 'info' | 'warning' | 'success' | undefined"
               },
@@ -7178,6 +7315,9 @@
           ],
           "events": [
             {
+              "type": {
+                "text": "CustomEvent"
+              },
               "description": "Fires when the close button is clicked",
               "name": "skf-alert-close",
               "inheritedFrom": {

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/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/styles/component.styles.js

@@ -1,48 +1,49 @@
 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;
+				}
 			}
 		}
 	}

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;text-rendering:optimizelegibility}body:has(skf-dialog[open]){overflow:hidden}
+@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}