@skf-design-system/ui-components 1.0.0-beta.5 → 1.0.1-beta.0

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

@@ -1,29 +1,30 @@
 import "../icon/icon.js";
-import y from "./link.styles.js";
+import u from "./link.styles.js";
 import { SkfElement as m } from "../../internal/components/skf-element.js";
-import u from "../../styles/component.styles.js";
+import y 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 { 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 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 {
+var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (h, t, o, l) => {
+  for (var n = l > 1 ? void 0 : l ? b(t, o) : t, p = h.length - 1, a; p >= 0; p--)
+    (a = h[p]) && (n = (l ? a(t, o, n) : a(n)) || n);
+  return l && n && g(t, o, n), n;
+}, s;
+const e = (s = class extends m {
   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 o = (l) => {
+      t(l, this.href ?? this.route);
     };
-    this._assertValidOnClick(t), this.removeEventListener("click", i), this.addEventListener("click", i);
+    this._assertValidOnClick(t), this.removeEventListener("click", o), this.addEventListener("click", o);
   }
   get onClick() {
     return this._onClick;
@@ -47,70 +48,75 @@ 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", o = t ? d`a` : d`button`;
     return f`
-			<${i}
-				?disabled=${n(t ? void 0 : this.disabled)}
+			<${o}
+				?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}>
+			</${o}>
 		`;
   }
-};
-a.styles = [u, y];
-let e = a;
-o([
+}, s.styles = [y, u], s.classMap = {}, s);
+i([
   r({ type: String, reflect: !0 })
 ], e.prototype, "as", 2);
-o([
+i([
   r({ type: String, reflect: !0 })
 ], e.prototype, "color", 2);
-o([
+i([
   r({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
-o([
+i([
   r({ type: String })
 ], e.prototype, "download", 2);
-o([
-  r({ type: String, reflect: !0 })
+i([
+  r({ type: String })
 ], e.prototype, "href", 2);
-o([
+i([
   r({ type: String })
 ], e.prototype, "icon", 2);
-o([
+i([
   r({ attribute: "icon-placement", reflect: !0 })
 ], e.prototype, "iconPlacement", 2);
-o([
+i([
   r()
 ], e.prototype, "rel", 2);
-o([
+i([
   r({ reflect: !0 })
 ], e.prototype, "route", 2);
-o([
+i([
   r({ type: Boolean, reflect: !0 })
 ], e.prototype, "stretch", 2);
-o([
+i([
   r()
 ], e.prototype, "target", 2);
-o([
+i([
   r()
 ], e.prototype, "type", 2);
-o([
+i([
   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 = (e) => {
+  throw TypeError(e);
 };
-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";
-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;
+var f = (e, r, t) => r.has(e) || v("Cannot " + t);
+var n = (e, r, t) => (f(e, r, "read from private field"), t ? t.call(e) : r.get(e)), h = (e, r, t) => r.has(e) ? v("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, t), u = (e, r, t, a) => (f(e, r, "write to private field"), a ? a.call(e, t) : r.set(e, 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 p } from "lit/decorators.js";
+import { classMap as g } from "lit/directives/class-map.js";
+import z from "./loader.styles.js";
+var x = Object.defineProperty, d = (e, r, t, a) => {
+  for (var i = void 0, o = e.length - 1, m; o >= 0; o--)
+    (m = e[o]) && (i = m(r, t, i) || i);
+  return i && x(r, t, i), i;
 }, s;
-const v = class v extends u {
+const c = class c 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()), n(this, s).role = "progressbar", n(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;
-c([
-  n({ reflect: !0, attribute: "aria-label" })
-], o.prototype, "ariaLabel");
-c([
-  n({ type: Boolean })
-], o.prototype, "invert");
-c([
-  n({ type: String, reflect: !0 })
-], o.prototype, "size");
+s = new WeakMap(), c.styles = [_, z];
+let l = c;
+d([
+  p({ reflect: !0, attribute: "aria-label" })
+], l.prototype, "ariaLabel");
+d([
+  p({ type: Boolean })
+], l.prototype, "invert");
+d([
+  p({ type: String, reflect: !0 })
+], 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 n from "../../styles/component.styles.js";
+import { html as m } from "lit";
+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 f = Object.defineProperty, v = (e, l, s, g) => {
+  for (var c = void 0, r = e.length - 1, h; r >= 0; r--)
+    (h = e[r]) && (c = h(l, s, c) || c);
+  return c && f(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">
+    return m`
+			<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 = [n, 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
 };

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

@@ -0,0 +1,24 @@
+import { SkfPopoverBase } from '../../internal/base-classes/popover/popover.base.js';
+import type { CSSResultGroup } from 'lit';
+/**
+ * The `<skf-menu>` is a component that displays a list of actions or options.
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @property {"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"} [placement='bottom-start'] - The placement of the menu
+ * @property {boolean} [isOpen=false] - Whether the menu is open
+ * @property {string} [anchor] - The id of the element the menu will be anchored to
+ *
+ * @event open - Fired when the menu is opened
+ * @event close - Fired when the menu is closed
+ *
+ * @slot - The menu popover content
+ *
+ * @tagname skf-menu
+ */
+export declare class SkfMenu extends SkfPopoverBase {
+    static styles: CSSResultGroup;
+    constructor();
+    addEventListeners($element: HTMLElement | Element): void;
+    removeEventListeners($element: HTMLElement | Element): void;
+}

package/dist/components/menu/menu.component.js

@@ -0,0 +1,18 @@
+import { SkfPopoverBase as t } from "../../internal/base-classes/popover/popover.base.js";
+import { styles as o } from "./menu.styles.js";
+const s = class s extends t {
+  constructor() {
+    super(), this.placement = "bottom-start", t.classMap = { menu: !0 };
+  }
+  addEventListeners(e) {
+    e.addEventListener("mouseenter", this.open);
+  }
+  removeEventListeners(e) {
+    e.removeEventListener("mouseenter", this.open);
+  }
+};
+s.styles = [t.styles, o];
+let r = s;
+export {
+  r as SkfMenu
+};

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,8 @@
+import { SkfMenu } from './menu.component';
+export * from './menu.component';
+export default SkfMenu;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-menu': SkfMenu;
+    }
+}

package/dist/components/menu/menu.js

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

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

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

package/dist/components/menu/menu.styles.js

@@ -0,0 +1,11 @@
+import { css as s } from "lit";
+const n = s`
+	@layer components {
+		.menu {
+			padding-block: var(--skf-spacing-25);
+		}
+	}
+`;
+export {
+  n as styles
+};

package/dist/components/menu-item/menu-item.component.d.ts

@@ -0,0 +1,25 @@
+import { SkfLink } from '../link/link.component.js';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-menu-item>` is a component that displays a list of actions or options.
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @event {CustomEvent} my-tag-my-event - Fired when something happens
+ *
+ * @event click - Fired when the component is clicked
+ * @event mouseover - Fired when the mouse is over the component
+ * @event mouseout - Fired when the mouse is out of the component
+ * @event focus - Fired when the component is focused
+ * @event blur - Fired when the component is blurred
+ * @event change - Fired when the component's value changes
+ *
+ * @slot - The component's main content
+ * @slot my-named-slot - A named slot of the component
+ *
+ * @tagname skf-menu-item
+ */
+export declare class SkfMenuItem extends SkfLink {
+    static styles: CSSResultGroup;
+    constructor();
+}

package/dist/components/menu-item/menu-item.component.js

@@ -0,0 +1,13 @@
+import { SkfLink as s } from "../link/link.component.js";
+import "lit";
+import { styles as o } from "./menu-item.styles.js";
+const t = class t extends s {
+  constructor() {
+    super(), s.classMap = { "menu-item": !0 };
+  }
+};
+t.styles = [s.styles, o];
+let r = t;
+export {
+  r as SkfMenuItem
+};

package/dist/components/menu-item/menu-item.d.ts

@@ -0,0 +1,8 @@
+import { SkfMenuItem } from './menu-item.component';
+export * from './menu-item.component';
+export default SkfMenuItem;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-menu-item': SkfMenuItem;
+    }
+}