@skf-design-system/ui-components 1.0.0-alpha.28 → 1.0.0-alpha.30

package/dist/components/icon/icon.styles.js

@@ -1,78 +1,84 @@
 import { css as o } from "lit";
-const r = o`
+const i = o`
+	/* stylelint-disable selector-class-pattern */
 	@layer components {
 		:host {
 			display: inline-flex;
 		}
 
-		#root {
-			--_skf-icon-size: var(--skf-icon-size-md);
+		:host-context(.skf-icon-host) {
+			color: inherit;
+		}
 
+		.icon {
 			block-size: var(--_skf-icon-size);
-			color: var(--_skf-icon-color, var(--skf-icon-color-primary));
 			display: inline-flex;
 			flex-shrink: 0; /* Prevents shrink when flex-child */
 			inline-size: var(--_skf-icon-size);
 			pointer-events: none;
 			user-select: none;
 
-			:host-context(.skf-icon-host) & {
-				color: inherit;
+			:not(:host-context(.skf-icon-host)) & {
+				color: var(--_skf-icon-color, var(--skf-icon-color-primary));
 			}
+		}
 
-			/**
-			 * Colors
-			 */
-			:host([color='secondary']) & {
-				--_skf-icon-color: var(--skf-icon-color-secondary);
-			}
+		/**
+		 * Colors
+		 */
+		.icon--color-secondary {
+			--_skf-icon-color: var(--skf-icon-color-secondary);
+		}
 
-			:host([color='inverse']) & {
-				--_skf-icon-color: var(--skf-icon-color-inverse);
-			}
+		.icon--color-inverse {
+			--_skf-icon-color: var(--skf-icon-color-inverse);
+		}
 
-			:host([color='emphasised']) & {
-				--_skf-icon-color: var(--skf-icon-color-emphasised);
-			}
+		.icon--color-emphasised {
+			--_skf-icon-color: var(--skf-icon-color-emphasised);
+		}
 
-			/* Severity */
-			:host([color='alert']) & {
-				--_skf-icon-color: var(--skf-severity-fg-color-alert);
-			}
+		/* Severity */
+		.icon--color-alert {
+			--_skf-icon-color: var(--skf-severity-fg-color-alert);
+		}
 
-			:host([color='error']) & {
-				--_skf-icon-color: var(--skf-severity-fg-color-error);
-			}
+		.icon--color-error {
+			--_skf-icon-color: var(--skf-severity-fg-color-error);
+		}
 
-			:host([color='info']) & {
-				--_skf-icon-color: var(--skf-severity-fg-color-info);
-			}
+		.icon--color-info {
+			--_skf-icon-color: var(--skf-severity-fg-color-info);
+		}
 
-			:host([color='success']) & {
-				--_skf-icon-color: var(--skf-severity-fg-color-success);
-			}
+		.icon--color-success {
+			--_skf-icon-color: var(--skf-severity-fg-color-success);
+		}
 
-			:host([color='warning']) & {
-				--_skf-icon-color: var(--skf-severity-fg-color-warning);
-			}
+		.icon--color-warning {
+			--_skf-icon-color: var(--skf-severity-fg-color-warning);
+		}
 
-			/**
-			 * Sizes
-			 */
-			:host([size='xs']) & {
-				--_skf-icon-size: var(--skf-icon-size-xs);
-			}
+		/**
+		 * Sizes
+		 */
+		.icon--size-xs {
+			--_skf-icon-size: var(--skf-icon-size-xs);
+		}
 
-			:host([size='sm']) & {
-				--_skf-icon-size: var(--skf-icon-size-sm);
-			}
+		.icon--size-sm {
+			--_skf-icon-size: var(--skf-icon-size-sm);
+		}
 
-			:host([size='lg']) & {
-				--_skf-icon-size: var(--skf-icon-size-lg);
-			}
+		.icon--size-md {
+			--_skf-icon-size: var(--skf-icon-size-md);
+		}
+
+		.icon--size-lg {
+			--_skf-icon-size: var(--skf-icon-size-lg);
 		}
 	}
 `;
 export {
-  r as default
+  i as default
 };

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

@@ -1,7 +1,7 @@
-import '@components/icon/icon.js';
-import { FormBase } from '@internal/components/formBase.js';
-import '@internal/components/hint/hint';
-import type { FormFieldBaseProps } from '@internal/types/formField.js';
+import '../icon/icon.js';
+import { FormBase } from '../../internal/components/formBase.js';
+import '../../internal/components/hint/hint';
+import type { FormFieldBaseProps } from '../../internal/types/formField.js';
 import { type CSSResultGroup } from 'lit';
 type AutocompleteValues = 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix' | 'nickname' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization' | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2' | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-amount' | 'transaction-currency' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'url' | 'photo' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local' | 'tel-extension' | 'email' | 'impp' | 'password' | 'webauthn' | 'work' | (string & {});
 /**

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

@@ -1,6 +1,6 @@
-import type { SkfIcon } from '@components/icon/icon.component.js';
-import '@components/icon/icon.js';
-import { SkfElement } from '@internal/components/skf-element.js';
+import type { SkfIcon } from '../icon/icon.component.js';
+import '../icon/icon.js';
+import { SkfElement } from '../../internal/components/skf-element.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-link>` can be used as either a regular link or a link styled semantic button
@@ -15,6 +15,7 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfLink extends SkfElement {
     static styles: CSSResultGroup;
+    static classMap: {};
     private _onClick?;
     /** Defines the semantic element to render */
     as: 'button' | 'a';
@@ -33,12 +34,12 @@ export declare class SkfLink extends SkfElement {
     icon?: SkfIcon['name'];
     /** Defines the position of the icon in relation to the text */
     iconPlacement: 'left' | 'right';
-    /** Defines the relationship of the target object to the link object */
-    rel: string;
+    /** If defined, describes the relationship between a linked resource and the current document */
+    rel?: string;
     /** If defined, used on conjunction with onClick property, second argument */
     route?: string;
     /** If true, fills the parents horizontal axis */
-    stretch?: boolean;
+    stretch: boolean;
     /** If defined, specifies where to open the linked document */
     target?: '_blank' | '_parent' | '_self' | '_top';
     /** Defines the type of button */

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

@@ -1,27 +1,28 @@
 import "../icon/icon.js";
 import y from "./link.styles.js";
-import { SkfElement as m } from "../../internal/components/skf-element.js";
+import { SkfElement as d } from "../../internal/components/skf-element.js";
 import u from "../../styles/component.styles.js";
 import "lit";
 import { property as r } from "lit/decorators.js";
-import { ifDefined as n } from "lit/directives/if-defined.js";
-import { html as f, literal as d } from "lit/static-html.js";
-var k = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (h, t, i, p) => {
-  for (var s = p > 1 ? void 0 : p ? v(t, i) : t, l = h.length - 1, c; l >= 0; l--)
-    (c = h[l]) && (s = (p ? c(t, i, s) : c(s)) || s);
-  return p && s && k(t, i, s), s;
-};
-const a = class a extends m {
+import { classMap as k } from "lit/directives/class-map.js";
+import { ifDefined as c } from "lit/directives/if-defined.js";
+import { html as f, literal as m } from "lit/static-html.js";
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (h, t, i, l) => {
+  for (var n = l > 1 ? void 0 : l ? g(t, i) : t, p = h.length - 1, a; p >= 0; p--)
+    (a = h[p]) && (n = (l ? a(t, i, n) : a(n)) || n);
+  return l && n && v(t, i, n), n;
+}, s;
+const e = (s = class extends d {
   constructor() {
-    super(...arguments), this.as = "a", this.color = "primary", this.iconPlacement = "left", this.rel = "noreferrer noopener", this.type = "button", this._preprocessOnClick = (t) => {
+    super(...arguments), this.as = "a", this.color = "primary", this.iconPlacement = "left", this.stretch = !1, this.type = "button", this._preprocessOnClick = (t) => {
       this.as === "a" && this.onClick && t.preventDefault(), t.stopPropagation(), this.emit("click");
     };
   }
   set onClick(t) {
     if (!t) return;
     this._onClick = t;
-    const i = (p) => {
-      t(p, this.href ?? this.route);
+    const i = (l) => {
+      t(l, this.href ?? this.route);
     };
     this._assertValidOnClick(t), this.removeEventListener("click", i), this.addEventListener("click", i);
   }
@@ -47,31 +48,35 @@ const a = class a extends m {
       inverse: "inverse"
     });
     return f`
-			<skf-icon color=${t[this.color]} name=${n(this.icon)} size="sm"></skf-icon>
+			<skf-icon color=${t[this.color]} name=${c(this.icon)} size="sm"></skf-icon>
 		`;
   }
   render() {
-    const t = this.as === "a", i = t ? d`a` : d`button`;
+    const t = this.as === "a", i = t ? m`a` : m`button`;
     return f`
 			<${i}
-				?disabled=${n(t ? void 0 : this.disabled)}
+				?disabled=${c(t ? void 0 : this.disabled)}
 				@click=${this._preprocessOnClick}
-        		download=${n(t ? this.download : void 0)}
-				href=${n(t ? this.href : void 0)}
-				id="root"
-				rel=${n(t ? this.rel : void 0)}
-				target=${n(t ? this.target : void 0)}
-				title=${this.title}
-				type=${n(t ? void 0 : this.type)}
+				class=${k({
+      link: !0,
+      "link--color-inverse": this.color === "inverse",
+      "link--color-primary": this.color === "primary",
+      "link--icon-right": this.iconPlacement === "right",
+      "link--stretch": this.stretch,
+      ...s.classMap
+    })}
+        		download=${c(t ? this.download : void 0)}
+				href=${c(t ? this.href : void 0)}
+				rel=${c(t ? this.rel : void 0)}
+				target=${c(t ? this.target : void 0)}
+				type=${c(t ? void 0 : this.type)}
 			>
 				${this.icon && this._renderIcon()}
 				<slot>Default link text</slot>
 			</${i}>
 		`;
   }
-};
-a.styles = [u, y];
-let e = a;
+}, s.styles = [u, y], s.classMap = {}, s);
 o([
   r({ type: String, reflect: !0 })
 ], e.prototype, "as", 2);
@@ -85,7 +90,7 @@ o([
   r({ type: String })
 ], e.prototype, "download", 2);
 o([
-  r({ type: String, reflect: !0 })
+  r({ type: String })
 ], e.prototype, "href", 2);
 o([
   r({ type: String })
@@ -111,6 +116,7 @@ o([
 o([
   r({ attribute: !1 })
 ], e.prototype, "onClick", 1);
+let E = e;
 export {
-  e as SkfLink
+  E as SkfLink
 };

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

@@ -1,36 +1,36 @@
 import { css as r } from "lit";
-const e = r`
-	:host {
-		display: contents;
-	}
-
-	#root {
-		align-items: center;
-		color: var(--state-color, var(--color));
-		display: inline-flex;
-		flex-direction: var(--flex-direction, rows);
-		font-weight: var(--skf-font-weight-bold);
-		gap: var(--skf-spacing-50);
-		justify-content: flex-start;
-
-		&:disabled {
-			--state-color: var(--color-disabled);
-		}
-
-		&:hover {
-			--state-color: var(--color-hover);
-		}
-
-		&:focus-visible {
-			border-radius: var(--skf-border-radius-sm);
-			outline: var(--skf-border-width-md) solid var(--outline-color);
-			outline-offset: var(--skf-size-2);
-		}
-
-		/**
-		 * Colors
-		 */
-		:host([color='primary']) & {
+const o = r`
+	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		.link {
+			align-items: center;
+			color: var(--state-color, var(--color));
+			display: inline-flex;
+			flex-direction: var(--flex-direction, rows);
+			font-weight: var(--skf-font-weight-bold);
+			gap: var(--skf-spacing-50);
+			justify-content: flex-start;
+
+			&:is(a) {
+				text-decoration: none;
+			}
+
+			&:disabled {
+				--state-color: var(--color-disabled);
+			}
+
+			&:hover {
+				--state-color: var(--color-hover);
+			}
+
+			&:focus-visible {
+				border-radius: var(--skf-border-radius-sm);
+				outline: var(--skf-border-width-md) solid var(--outline-color);
+				outline-offset: var(--skf-size-2);
+			}
+		}
+
+		.link--color-primary {
 			--color: var(--skf-interactive-text-color-primary);
 			--color-active: var(--skf-interactive-text-color-primary-active);
 			--color-disabled: var(--skf-interactive-text-color-disabled);
@@ -38,7 +38,7 @@ const e = r`
 			--outline-color: var(--skf-interactive-text-color-primary);
 		}
 
-		:host([color='inverse']) & {
+		.link--color-inverse {
 			--color: var(--skf-interactive-text-color-inverse);
 			--color-active: var(--skf-interactive-text-color-inverse-active);
 			--color-disabled: var(--skf-interactive-text-color-disabled);
@@ -46,19 +46,15 @@ const e = r`
 			--outline-color: var(--skf-interactive-text-color-inverse);
 		}
 
-		:host([as='a']) & {
-			text-decoration: none;
-		}
-
-		:host([icon-placement='right']) & {
+		.link--icon-right {
 			--flex-direction: row-reverse;
 		}
 
-		:host([stretch]) & {
+		.link--stretch {
 			inline-size: 100%;
 		}
 	}
 `;
 export {
-  e as default
+  o as default
 };

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

@@ -1,4 +1,4 @@
-import { SkfElement } from '@internal/components/skf-element.js';
+import { SkfElement } from '../../internal/components/skf-element.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities
@@ -13,7 +13,7 @@ export declare class SkfLoader extends SkfElement {
     /** Defines the aria-label */
     ariaLabel: string;
     /** If true, inverts the color (to be used on colored backgrounds) */
-    invert?: boolean;
+    invert: boolean;
     /** Defines the size of the loader */
     size?: 'md' | 'sm';
     constructor();

package/dist/components/loader/loader.component.js

@@ -1,45 +1,52 @@
-var m = (t) => {
-  throw TypeError(t);
+var v = (r) => {
+  throw TypeError(r);
 };
-var f = (t, r, e) => r.has(t) || m("Cannot " + e);
-var p = (t, r, e) => (f(t, r, "read from private field"), e ? e.call(t) : r.get(t)), h = (t, r, e) => r.has(t) ? m("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, e), y = (t, r, e, l) => (f(t, r, "write to private field"), l ? l.call(t, e) : r.set(t, e), e);
-import { SkfElement as u } from "../../internal/components/skf-element.js";
-import b from "../../styles/component.styles.js";
-import { html as g } from "lit";
+var f = (r, e, t) => e.has(r) || v("Cannot " + t);
+var p = (r, e, t) => (f(r, e, "read from private field"), t ? t.call(r) : e.get(r)), h = (r, e, t) => e.has(r) ? v("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, t), u = (r, e, t, a) => (f(r, e, "write to private field"), a ? a.call(r, t) : e.set(r, t), t);
+import { SkfElement as y } from "../../internal/components/skf-element.js";
+import _ from "../../styles/component.styles.js";
+import { html as b } from "lit";
 import { property as n } from "lit/decorators.js";
-import _ from "./loader.styles.js";
-var x = Object.defineProperty, c = (t, r, e, l) => {
-  for (var i = void 0, a = t.length - 1, d; a >= 0; a--)
-    (d = t[a]) && (i = d(r, e, i) || i);
-  return i && x(r, e, i), i;
+import { classMap as g } from "lit/directives/class-map.js";
+import z from "./loader.styles.js";
+var x = Object.defineProperty, c = (r, e, t, a) => {
+  for (var i = void 0, o = r.length - 1, m; o >= 0; o--)
+    (m = r[o]) && (i = m(e, t, i) || i);
+  return i && x(e, t, i), i;
 }, s;
-const v = class v extends u {
+const d = class d extends y {
   constructor() {
     super();
     h(this, s);
-    this.ariaLabel = "Loading...", this.size = "md", y(this, s, this.attachInternals()), p(this, s).role = "progressbar", p(this, s).ariaLive = "polite";
+    this.ariaLabel = "Loading...", this.invert = !1, this.size = "md", u(this, s, this.attachInternals()), p(this, s).role = "progressbar", p(this, s).ariaLive = "polite";
   }
   render() {
-    return g`
-			<div id="root">
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
+    return b`
+			<div
+				class=${g({
+      loader: !0,
+      "loader--invert": this.invert,
+      "loader--small": this.size === "sm"
+    })}
+			>
+				<div class="loader__circle"></div>
+				<div class="loader__circle"></div>
+				<div class="loader__circle"></div>
 			</div>
 		`;
   }
 };
-s = new WeakMap(), v.styles = [b, _];
-let o = v;
+s = new WeakMap(), d.styles = [_, z];
+let l = d;
 c([
   n({ reflect: !0, attribute: "aria-label" })
-], o.prototype, "ariaLabel");
+], l.prototype, "ariaLabel");
 c([
   n({ type: Boolean })
-], o.prototype, "invert");
+], l.prototype, "invert");
 c([
   n({ type: String, reflect: !0 })
-], o.prototype, "size");
+], l.prototype, "size");
 export {
-  o as SkfLoader
+  l as SkfLoader
 };

package/dist/components/loader/loader.styles.js

@@ -1,20 +1,21 @@
-import { css as s } from "lit";
-const e = s`
+import { css as a } from "lit";
+const s = a`
+	/* stylelint-disable selector-class-pattern */
 	@layer components {
 		:host {
 			display: inline-flex;
 		}
 
-		#root {
+		.loader {
 			display: flex;
 			gap: var(--_skf-loader-gap, var(--skf-spacing-50));
+		}
 
-			:host([size='sm']) & {
-				--_skf-loader-gap: var(--skf-spacing-25);
-			}
+		.loader--small {
+			--_skf-loader-gap: var(--skf-spacing-25);
 		}
 
-		.circle {
+		.loader__circle {
 			animation: skf-loader 0.5s infinite ease-in alternate;
 			aspect-ratio: 1;
 			background-color: var(--_skf-loader-color, var(--skf-bg-color-emphasised));
@@ -29,11 +30,11 @@ const e = s`
 				animation-delay: 0.2s;
 			}
 
-			:host([invert]) & {
+			.loader--invert & {
 				--_skf-loader-color: var(--skf-bg-color-neutral-1);
 			}
 
-			:host([size='sm']) & {
+			.loader--small & {
 				--_skf-loader-size: var(--skf-size-4);
 			}
 		}
@@ -46,5 +47,5 @@ const e = s`
 	}
 `;
 export {
-  e as default
+  s as default
 };

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

@@ -1,4 +1,4 @@
-import { SkfElement } from '@internal/components/skf-element.js';
+import { SkfElement } from '../../internal/components/skf-element.js';
 import type { Logo } from '@skf-design-system/ui-assets';
 import { type CSSResultGroup } from 'lit';
 /**
@@ -13,9 +13,9 @@ export declare class SkfLogo extends SkfElement {
     /** Defines the title of the logo */
     title: string;
     /**
-     * If defined, sets color of the logo
+     * Defines the color of the logo
      * @type { "primary" | "secondary" | "inverse" }
      */
-    color?: Logo;
+    color: Logo;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/logo/logo.component.js

@@ -1,20 +1,31 @@
 import { SkfElement as i } from "../../internal/components/skf-element.js";
 import m from "../../styles/component.styles.js";
 import { html as n } from "lit";
-import { property as l } from "lit/decorators.js";
-import a from "./logo.styles.js";
-var d = Object.defineProperty, s = (h, o, p, f) => {
-  for (var c = void 0, r = h.length - 1, v; r >= 0; r--)
-    (v = h[r]) && (c = v(o, p, c) || c);
-  return c && d(o, p, c), c;
+import { property as p } from "lit/decorators.js";
+import { classMap as a } from "lit/directives/class-map.js";
+import { styles as d } from "./logo.styles.js";
+var g = Object.defineProperty, v = (e, l, s, y) => {
+  for (var c = void 0, r = e.length - 1, h; r >= 0; r--)
+    (h = e[r]) && (c = h(l, s, c) || c);
+  return c && g(l, s, c), c;
 };
-const e = class e extends i {
+const o = class o extends i {
   constructor() {
     super(...arguments), this.title = "SKF logotype", this.color = "primary";
   }
   render() {
     return n`
-			<svg id="root" viewBox="0 0 1300 300" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px">
+			<svg
+				class=${a({
+      logo: !0,
+      "logo--color-inverse": this.color === "inverse",
+      "logo--color-secondary": this.color === "secondary"
+    })}
+				viewBox="0 0 1300 300"
+				xmlns="http://www.w3.org/2000/svg"
+				x="0px"
+				y="0px"
+			>
 				<title>${this.title}</title>
 				<g>
 					<g>
@@ -55,13 +66,13 @@ c0,5.8-4.3,6.1-9.1,6.1H1230.9z"
 		`;
   }
 };
-e.styles = [m, a];
-let t = e;
-s([
-  l()
+o.styles = [m, d];
+let t = o;
+v([
+  p()
 ], t.prototype, "title");
-s([
-  l()
+v([
+  p()
 ], t.prototype, "color");
 export {
   t as SkfLogo

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

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

package/dist/components/logo/logo.styles.js

@@ -1,23 +1,25 @@
 import { css as o } from "lit";
-const r = o`
+const s = o`
+	/* stylelint-disable selector-class-pattern */
+
 	:host {
 		display: inline-flex;
 	}
 
-	#root {
+	.logo {
 		aspect-ratio: 13 / 3;
 		block-size: var(--skf-logo-height, var(--skf-size-32));
 		fill: var(--_skf-logo-color, var(--skf-logo-primary));
+	}
 
-		:host([color='secondary']) & {
-			--_skf-logo-color: var(--skf-logo-secondary);
-		}
+	.logo--color-secondary {
+		--_skf-logo-color: var(--skf-logo-secondary);
+	}
 
-		:host([color='inverse']) & {
-			--_skf-logo-color: var(--skf-logo-inverse);
-		}
+	.logo--color-inverse {
+		--_skf-logo-color: var(--skf-logo-inverse);
 	}
 `;
 export {
-  r as default
+  s as styles
 };