@skf-design-system/ui-components 0.0.1-beta.1

package/dist/src/internal/components/formBase.js

@@ -0,0 +1,95 @@
+import { LitElement as c } from "lit";
+import { property as d } from "lit/decorators.js";
+import { SkfElement as u } from "./skf-element.js";
+var p = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, h = (n, t, i, l) => {
+  for (var e = _(t, i), a = n.length - 1, o; a >= 0; a--)
+    (o = n[a]) && (e = o(t, i, e) || e);
+  return e && p(t, i, e), e;
+};
+const s = class s extends u {
+  constructor() {
+    super(), this._disabled = !1, this._pristine = !0, this.validationError = "", this.customErrorDisplay = !1, this.pristine = !0, this.validateOnChange = !0, this._dispatchResetEvent = () => {
+      this.dispatchEvent(new Event("reset", { bubbles: !0, composed: !0, cancelable: !1 }));
+    }, this._internals = this.attachInternals(), this._required = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._internals.form && this._internals.form.addEventListener("reset", this._dispatchResetEvent);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._internals.form && this._internals.form.removeEventListener("reset", this._dispatchResetEvent);
+  }
+  // @property()
+  // set autocomplete(value: string) {
+  // 	if (value) {
+  // 		this.autocomplete = value;
+  // 		this._internals.ariaAutoComplete = value;
+  // 	}
+  // }
+  // get autocomplete() {
+  // 	return this.autocomplete;
+  // }
+  /** If true, sets disabled state */
+  set disabled(t) {
+    this._disabled = t, this._internals.ariaDisabled = String(t);
+  }
+  get disabled() {
+    return this._disabled;
+  }
+  set required(t) {
+    this._required = t, this._internals.ariaRequired = String(t);
+  }
+  get required() {
+    return this._required;
+  }
+  set nativeValidation(t) {
+    this.customErrorDisplay = !t;
+  }
+  get nativeValidation() {
+    return !this.customErrorDisplay;
+  }
+  get form() {
+    return this._internals.form;
+  }
+  get validity() {
+    return this._internals.validity;
+  }
+  get validationMessage() {
+    return this._internals.validationMessage;
+  }
+  get willValidate() {
+    return this._internals.willValidate;
+  }
+  setValidity(t, i, l) {
+    this._internals.setValidity(t, i, l);
+  }
+  setFormValue(t) {
+    this._internals.setFormValue(t);
+  }
+  /** emits a change event */
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  /** emits a change event, triggers native UI popup and returns false if the form is invalid */
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
+  formDisabledCallback(t) {
+    this.disabled = t;
+  }
+  emitEvent(t) {
+    return this.dispatchEvent(
+      new Event(t, { bubbles: !0, composed: !0, cancelable: !1 })
+    );
+  }
+};
+s.formAssociated = !0, s.shadowRootOptions = { ...c.shadowRootOptions, delegatesFocus: !0 };
+let r = s;
+h([
+  d({ type: Boolean })
+], r.prototype, "required");
+h([
+  d({ type: Boolean, attribute: "native-validation" })
+], r.prototype, "nativeValidation");
+export {
+  r as FormBase
+};

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

@@ -0,0 +1,31 @@
+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 { html as f } from "lit";
+import { property as y } from "lit/decorators.js";
+import a from "./hint.styles.js";
+var c = Object.defineProperty, h = (s, i, m, d) => {
+  for (var r = void 0, t = s.length - 1, p; t >= 0; t--)
+    (p = s[t]) && (r = p(i, m, r) || r);
+  return r && c(i, m, r), r;
+};
+const o = class o extends l {
+  render() {
+    return f`
+			${this.severity && f`
+				<skf-icon color=${this.severity} name="${n[this.severity]}" size="xs">
+				</skf-icon>
+			`}
+			<slot></slot>
+		`;
+  }
+};
+o.styles = [v, a];
+let e = o;
+h([
+  y()
+], e.prototype, "severity");
+export {
+  e as SkfHint
+};

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

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

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

@@ -0,0 +1,22 @@
+import { css as s } from "lit";
+const o = s`
+	:host {
+		align-items: center;
+		color: var(--_skf-hint-color, var(--skf-text-color-secondary));
+		display: flex;
+		font-size: var(--skf-font-size-75);
+		font-weight: var(--skf-font-weight-medium);
+		gap: var(--skf-spacing-25);
+	}
+
+	:host([severity='error']) {
+		--_skf-hint-color: var(--skf-severity-fg-color-error);
+	}
+
+	:host([severity='success']) {
+		--_skf-hint-color: var(--skf-severity-fg-color-success);
+	}
+`;
+export {
+  o as default
+};

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

@@ -0,0 +1,89 @@
+import { LitElement as d } from "lit";
+const n = class n extends d {
+  static define(e, t = this, o = {}) {
+    if (!customElements.get(e)) {
+      customElements.define(e, class extends t {
+      }, o);
+      return;
+    }
+  }
+  constructor() {
+    super(), Object.entries(this.constructor.dependencies).forEach(
+      ([e, t]) => {
+        this.constructor.define(e, t);
+      }
+    );
+  }
+  /** Custom event emitter helper function. Transmits user actions or component state change. */
+  emit(e, t = {}) {
+    if ([
+      "click",
+      "dblclick",
+      "mousedown",
+      "mouseup",
+      "mouseover",
+      "mouseout",
+      "mousemove",
+      "keydown",
+      "keyup",
+      "keypress",
+      "submit",
+      "focus",
+      "blur",
+      "load",
+      "unload",
+      "resize",
+      "scroll",
+      "change",
+      "input",
+      "contextmenu",
+      "drag",
+      "dragstart",
+      "dragend",
+      "dragenter",
+      "dragleave",
+      "dragover",
+      "drop",
+      "touchstart",
+      "touchend",
+      "touchmove",
+      "play",
+      "pause",
+      "ended",
+      "canplay",
+      "loadeddata",
+      "progress",
+      "error"
+    ].includes(e)) {
+      const i = {
+        bubbles: !0,
+        cancelable: !1,
+        composed: !0,
+        ...t
+      };
+      return this.dispatchEvent(new Event(e, i)), new Event(e, t);
+    }
+    const r = new CustomEvent(e, {
+      bubbles: !0,
+      cancelable: !1,
+      composed: !0,
+      detail: {},
+      ...t
+    });
+    return this.dispatchEvent(r), r;
+  }
+  /** Slot change listener helper function. Listens for change in a slot emitted by the component. */
+  _initiateSlotChangeObserver(e, t = "") {
+    if (!this.shadowRoot) return;
+    e ?? (e = () => {
+      console.log("slot updated");
+    });
+    const o = t ? `slot[name="${t}"]` : "slot", s = this.shadowRoot.querySelector(o);
+    s == null || s.addEventListener("slotchange", e);
+  }
+};
+n.dependencies = {};
+let c = n;
+export {
+  c as SkfElement
+};

package/dist/src/internal/constants/iconSeverity.js

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

package/dist/src/internal/templates/asterisk.js

@@ -0,0 +1,10 @@
+import { html as i } from "lit";
+function a(s) {
+  return i`
+		<span class="visually-hidden">(${s ?? "Required"})</span>
+		<span aria-hidden="true" id="asterisk">*</span>
+	`;
+}
+export {
+  a as Asterisk
+};

package/dist/src/styles/component.styles.js

@@ -0,0 +1,39 @@
+import { css as e } from "lit";
+const o = 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;
+			}
+		}
+
+		:is(button, input, select, textarea) {
+			all: unset;
+			font: inherit;
+		}
+	}
+
+	@layer globals {
+		:is(button, input, label, select) {
+			cursor: pointer;
+
+			&:disabled,
+			&:has(:disabled) {
+				cursor: not-allowed;
+			}
+		}
+	}
+`;
+export {
+  o as default
+};

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

@@ -0,0 +1,205 @@
+import { css as e } from "lit";
+const i = e`
+	@layer components {
+		:host {
+			contain: initial;
+		}
+
+		/* stylelint-disable no-descending-specificity */
+		#field {
+			color: var(--_skf-field-color, var(--skf-text-color-primary));
+			display: grid;
+			gap: var(--skf-spacing-25);
+
+			:host([size='sm']) & {
+				font-size: var(--skf-font-size-75);
+				font-weight: var(--skf-font-weight-medium);
+			}
+		}
+
+		label {
+			display: inherit;
+			gap: var(--_skf-field-label-gap, var(--skf-spacing-50));
+
+			:host([size='sm']) & {
+				--_skf-field-label-gap: var(--skf-spacing-25);
+			}
+		}
+
+		#asterisk {
+			color: var(--skf-severity-fg-color-error);
+		}
+
+		/**
+	* Wwrapper for the input-element that controls the appearance
+	*/
+		#input {
+			background-color: var(--_skf-field-input-bg-color, var(--skf-bg-color-neutral-1));
+			border: var(--skf-border-width-sm) solid
+				var(--_skf-field-input-border-color, var(--skf-border-color-primary));
+			border-radius: var(--skf-border-radius-sm);
+			display: flex;
+			gap: 0 var(--skf-spacing-75);
+			padding-inline: var(--skf-spacing-75)
+				var(--_skf-field-input-padding-inline-end, var(--skf-spacing-75));
+
+			&:has(button) {
+				--_skf-field-input-padding-inline-end: 0;
+			}
+
+			&:has(textarea) {
+				padding-block: var(--_skf-field-input-padding-block, var(--skf-spacing-75));
+
+				:host([size='sm']) & {
+					--_skf-field-input-padding-block: var(--skf-spacing-50);
+				}
+			}
+
+			&:has(:disabled) {
+				--_skf-field-input-bg-color: var(--skf-interactive-bg-color-disabled);
+				--_skf-field-input-border-color: var(--skf-interactive-border-color-disabled);
+			}
+
+			:host([invalid]) & {
+				--_skf-field-input-border-color: var(--skf-severity-fg-color-error);
+			}
+
+			:host([valid]) & {
+				--_skf-field-input-border-color: var(--skf-severity-fg-color-success);
+			}
+
+			:host :has(:focus-visible) & {
+				outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
+				outline-offset: -1px;
+			}
+
+			:host([severity='alert']:not([invalid], [valid])) & {
+				--_skf-field-input-border-color: var(--skf-severity-fg-color-alert);
+			}
+
+			:host([severity='info']:not([invalid], [valid])) & {
+				--_skf-field-input-border-color: var(--skf-severity-fg-color-info);
+			}
+
+			:host([severity='success']:not([invalid], [valid])) & {
+				--_skf-field-input-border-color: var(--skf-severity-fg-color-success);
+			}
+
+			:host([severity='warning']:not([invalid], [valid])) & {
+				--_skf-field-input-border-color: var(--skf-severity-fg-color-warning);
+			}
+		}
+
+		/**
+	* Wrapper element for handling layout of the leading and trailing content
+	*/
+		#affix {
+			align-items: center;
+			display: flex;
+			flex: 1 1 0%;
+			gap: 0 var(--skf-spacing-25);
+
+			&::before,
+			&::after {
+				color: var(--skf-text-color-tertiary);
+			}
+
+			&[data-leading]::before {
+				content: attr(data-leading);
+			}
+
+			&[data-trailing]::after {
+				content: attr(data-trailing);
+			}
+		}
+
+		:is(input, textarea) {
+			cursor: text;
+			width: 100%;
+
+			&::placeholder {
+				color: var(--_skf-field-placeholder-color, var(--skf-text-color-secondary));
+			}
+
+			&:disabled::placeholder {
+				--_skf-field-placeholder-color: var(--skf-interactive-text-color-disabled);
+			}
+		}
+
+		input {
+			height: var(--_skf-field-input-height, var(--skf-size-44));
+
+			&[type='number'] {
+				appearance: textfield;
+			}
+
+			&[type='number']::-webkit-inner-spin-button,
+			&[type='search']::-webkit-search-cancel-button {
+				display: none;
+			}
+
+			:host([size='sm']) & {
+				--_skf-field-input-height: var(--skf-size-32);
+			}
+		}
+
+		/**
+	* Action related styles
+	*/
+		#action {
+			display: flex;
+			flex-direction: column;
+		}
+
+		button.number {
+			background-color: var(
+				--_skf-number-field-button-bg-color,
+				var(--skf-interactive-bg-color-secondary)
+			);
+			border-left: var(--skf-border-width-sm) solid var(--skf-border-color-secondary);
+			display: grid;
+			height: 50%;
+			place-items: center;
+			width: 3rem;
+
+			&:last-of-type {
+				border-top: var(--skf-border-width-sm) solid var(--skf-border-color-secondary);
+			}
+
+			@media screen and (any-hover: hover) {
+				&:hover,
+				&:focus {
+					--_skf-number-field-button-bg-color: var(--skf-interactive-bg-color-secondary-hover);
+				}
+
+				&:active {
+					--_skf-number-field-button-bg-color: var(--skf-interactive-bg-color-secondary-active);
+				}
+			}
+
+			&:disabled {
+				--_skf-number-field-button-bg-color: transparent;
+			}
+		}
+
+		button.password,
+		button.search {
+			/* stylelint-disable-next-line order/properties-alphabetical-order */
+			align-items: center;
+			aspect-ratio: 1;
+			display: inline-flex;
+			justify-content: center;
+		}
+
+		skf-icon {
+			pointer-events: none;
+
+			&[name='search'] {
+				align-self: center;
+			}
+		}
+	}
+`;
+export {
+  i as default
+};

package/dist/src/styles/global.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))}@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}

package/dist/src/styles/util.styles.js

@@ -0,0 +1,16 @@
+import { css as i } from "lit";
+const t = i`
+	.visually-hidden {
+		&:not(:focus, :active, :focus-within) {
+			clip-path: inset(50%);
+			height: 1px;
+			overflow: hidden;
+			position: absolute;
+			white-space: nowrap;
+			width: 1px;
+		}
+	}
+`;
+export {
+  t as visuallyHidden
+};

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

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

package/dist/styles/form-field.styles.d.ts

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

package/dist/styles/util.styles.d.ts

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