@skf-design-system/ui-components 1.0.2-beta.0 → 1.0.2-beta.1

package/dist/components/dialog/dialog.component.js

@@ -1,61 +1,61 @@
 var m = (e) => {
   throw TypeError(e);
 };
-var _ = (e, i, o) => i.has(e) || m("Cannot " + o);
-var h = (e, i, o) => (_(e, i, "read from private field"), o ? o.call(e) : i.get(e)), g = (e, i, o) => i.has(e) ? m("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, o), c = (e, i, o, t) => (_(e, i, "write to private field"), t ? t.call(e, o) : i.set(e, o), o);
+var _ = (e, i, t) => i.has(e) || m("Cannot " + t);
+var u = (e, i, t) => (_(e, i, "read from private field"), t ? t.call(e) : i.get(e)), g = (e, i, t) => i.has(e) ? m("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, t), p = (e, i, t, o) => (_(e, i, "write to private field"), o ? o.call(e, t) : i.set(e, t), t);
 import "../button/button.js";
 import "../heading/heading.js";
 import "../icon/icon.js";
 import { SkfElement as C } from "../../internal/components/skf-element.js";
 import { watch as v } from "../../internal/helpers/watch.js";
-import B from "../../styles/component.styles.js";
+import { componentStyles as B } from "../../styles/component.styles.js";
 import { nothing as k, html as $ } from "lit";
-import { property as p, state as b, query as P, queryAssignedElements as E } from "lit/decorators.js";
+import { property as c, state as b, query as P, queryAssignedElements as E } from "lit/decorators.js";
 import { classMap as w } from "lit/directives/class-map.js";
 import { styles as O } from "./dialog.styles.js";
-var x = Object.defineProperty, A = Object.getOwnPropertyDescriptor, n = (e, i, o, t) => {
-  for (var l = t > 1 ? void 0 : t ? A(i, o) : i, a = e.length - 1, d; a >= 0; a--)
-    (d = e[a]) && (l = (t ? d(i, o, l) : d(l)) || l);
-  return t && l && x(i, o, l), l;
-}, f, u, r;
+var x = Object.defineProperty, A = Object.getOwnPropertyDescriptor, n = (e, i, t, o) => {
+  for (var l = o > 1 ? void 0 : o ? A(i, t) : i, a = e.length - 1, r; a >= 0; a--)
+    (r = e[a]) && (l = (o ? r(i, t, l) : r(l)) || l);
+  return o && l && x(i, t, l), l;
+}, h, f, d;
 const y = class y extends C {
   constructor() {
     super(...arguments);
+    g(this, h);
     g(this, f);
-    g(this, u);
-    g(this, r);
-    c(this, f, 0), c(this, u, 20), c(this, r, !1), this.fullscreen = !1, this.noCloseButton = !1, this.noPadding = !1, this.open = !1, this.onClose = null, this.renderFoot = !1, this._handleBackdropClick = (o) => {
-      o.target === this.$dialog && this.close();
-    }, this._handleClose = (o) => {
-      console.log("Handle close reached"), this.onClose && this.onClose(o), this.close();
-    }, this._handleKeyDown = (o) => {
-      o.preventDefault(), o.key === "Escape" && this.close();
+    g(this, d);
+    p(this, h, 0), p(this, f, 20), p(this, d, !1), this.fullscreen = !1, this.noCloseButton = !1, this.noPadding = !1, this.open = !1, this.onClose = null, this.renderFoot = !1, this._handleBackdropClick = (t) => {
+      t.target === this.$dialog && this.close();
+    }, this._handleClose = (t) => {
+      this.onClose && this.onClose(t), this.close();
+    }, this._handleKeyDown = (t) => {
+      t.preventDefault(), t.key === "Escape" && this.close();
     };
   }
   handleOpenChange() {
-    var o;
-    this.open ? this.showModal() : this.close(), this.open && (this.renderFoot = !!((o = this.footerEls) != null && o.length));
+    var t;
+    this.open ? this.showModal() : this.close(), this.open && (this.renderFoot = !!((t = this.footerEls) != null && t.length));
   }
   firstUpdated() {
-    this.$dialog && this.$dialog.addEventListener("close", (o) => {
-      o.stopPropagation(), this.emit("skf-dialog-closed");
+    this.$dialog && this.$dialog.addEventListener("close", (t) => {
+      t.stopPropagation(), this.emit("skf-dialog-closed");
     });
   }
   /** @internal */
   _transition() {
-    const o = this.fullscreen ? {} : {
-      translate: `${String(h(this, f))} ${String(h(this, u))}px`
+    const t = this.fullscreen ? {} : {
+      translate: `${String(u(this, h))} ${String(u(this, f))}px`
     };
     return { entry: () => new Promise((a) => {
       if (!this.$dialog) {
         a("no dialog found");
         return;
       }
-      const d = this.$dialog.animate(
+      const r = this.$dialog.animate(
         [
           {
             opacity: 0,
-            ...o
+            ...t
           },
           { opacity: 1, translate: "0 0" }
         ],
@@ -69,7 +69,7 @@ const y = class y extends C {
         duration: 200,
         fill: "forwards",
         pseudoElement: "::backdrop"
-      }), d.onfinish = () => {
+      }), r.onfinish = () => {
         a("opened");
       };
     }), exit: () => new Promise((a) => {
@@ -77,12 +77,12 @@ const y = class y extends C {
         a("no dialog found");
         return;
       }
-      const d = this.$dialog.animate(
+      const r = this.$dialog.animate(
         [
           { opacity: 1, translate: "0 0" },
           {
             opacity: 0,
-            ...o
+            ...t
           }
         ],
         {
@@ -95,26 +95,26 @@ const y = class y extends C {
         duration: 200,
         fill: "forwards",
         pseudoElement: "::backdrop"
-      }), d.onfinish = () => {
+      }), r.onfinish = () => {
         a("closed");
       };
     }) };
   }
   /** Method that opens the dialog in modal state */
   async showModal() {
-    async function o(t) {
-      return t.$dialog ? (t.$dialog.showModal(), await t._transition().entry(), t.emit("skf-dialog-opened"), !0) : !1;
+    async function t(o) {
+      return o.$dialog ? (o.$dialog.showModal(), await o._transition().entry(), o.emit("skf-dialog-opened"), !0) : !1;
     }
-    return await o(this);
+    return await t(this);
   }
   /** Method that closes the dialog */
   async close() {
-    if (console.log("close reached", h(this, r)), h(this, r) || !this.open) return;
-    c(this, r, !0);
-    async function o(t) {
-      return t.$dialog ? (t.emit("skf-dialog-closing"), await t._transition().exit(), t.$dialog.close(), t.open = !1, c(t, r, !1), !0) : !1;
+    if (u(this, d) || !this.open) return;
+    p(this, d, !0);
+    async function t(o) {
+      return o.$dialog ? (o.emit("skf-dialog-closing"), await o._transition().exit(), o.$dialog.close(), o.open = !1, p(o, d, !1), !0) : !1;
     }
-    return await o(this);
+    return await t(this);
   }
   render() {
     return $`
@@ -157,25 +157,25 @@ const y = class y extends C {
 		`;
   }
 };
-f = new WeakMap(), u = new WeakMap(), r = new WeakMap(), y.styles = [B, O];
+h = new WeakMap(), f = new WeakMap(), d = new WeakMap(), y.styles = [B, O];
 let s = y;
 n([
-  p({ attribute: "close-button-aria-label" })
+  c({ attribute: "close-button-aria-label" })
 ], s.prototype, "closeButtonAriaLabel", 2);
 n([
-  p()
+  c()
 ], s.prototype, "heading", 2);
 n([
-  p({ type: Boolean })
+  c({ type: Boolean })
 ], s.prototype, "fullscreen", 2);
 n([
-  p({ type: Boolean, attribute: "no-close-button" })
+  c({ type: Boolean, attribute: "no-close-button" })
 ], s.prototype, "noCloseButton", 2);
 n([
-  p({ type: Boolean, attribute: "no-padding" })
+  c({ type: Boolean, attribute: "no-padding" })
 ], s.prototype, "noPadding", 2);
 n([
-  p({ type: Boolean, reflect: !0 })
+  c({ type: Boolean, reflect: !0 })
 ], s.prototype, "open", 2);
 n([
   b()

package/dist/components/dialog/dialog.styles.js

@@ -1,5 +1,5 @@
 import { css as a } from "lit";
-const o = a`
+const i = a`
 	/* stylelint-disable selector-class-pattern */
 	@layer components {
 		.dialog {
@@ -28,7 +28,7 @@ const o = a`
 			}
 
 			&::backdrop {
-				background-color: color-mix(in srgb, var(--skf-bg-color-neutral-7), transparent);
+				background-color: oklch(from var(--skf-bg-color-neutral-7) l c h / 50%);
 			}
 		}
 
@@ -58,9 +58,9 @@ const o = a`
 		}
 
 		.dialog__body {
-			/* block-size: calc(100% - (var(--_skf-dialog-head-height) + (var(--skf-box-spacing) * 2))); */
 			display: flex;
 			flex-direction: column;
+			grid-area: body;
 			row-gap: var(--skf-spacing-100);
 
 			.dialog:not(.dialog--no-padding) & {
@@ -87,5 +87,5 @@ const o = a`
 	}
 `;
 export {
-  o as styles
+  i as styles
 };

package/dist/components/divider/divider.component.js

@@ -1,5 +1,5 @@
 import { SkfElement as n } from "../../internal/components/skf-element.js";
-import m from "../../styles/component.styles.js";
+import { componentStyles as m } from "../../styles/component.styles.js";
 import "lit";
 import { property as o } from "lit/decorators.js";
 import { styles as f } from "./divider.styles.js";

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

@@ -9,13 +9,13 @@ import { type CSSResultGroup } from 'lit';
  * - add documentation
  */
 /**
- * The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge.
+ * The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge
  *
  * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/0789c4-drawer) for design principles
  *
- * @event skf-drawer-opened - Fires when the drawer is opened (after transitioned in)
- * @event skf-drawer-closing - Fires when the drawer is closed (before transitioned out)
- * @event skf-drawer-closed - Fires when the drawer is closed (after transitioned out)
+ * @event {CustomEvent} skf-drawer-opened - Fires when the drawer is opened (after transitioned in)
+ * @event {CustomEvent} skf-drawer-closing - Fires when the drawer is closing (before transitioned out)
+ * @event {CustomEvent} skf-drawer-closed - Fires when the drawer is closed (after transitioned out)
  *
  * @slot - The Drawer's main content
  *
@@ -46,12 +46,16 @@ export declare class SkfDrawer extends SkfElement {
     _openChanged(): Promise<void>;
     /** @internal */
     private _startListeners;
-    clickIsInsideElement(event: MouseEvent, el: HTMLElement): boolean;
+    /** @internal */
+    private _clickIsInsideElement;
     /** @internal */
     private _animateDrawer;
-    _clickstartInDialog: boolean;
-    _handleMouseDown: (event: MouseEvent) => void;
-    _handleMouseUp: () => void;
+    /** @internal */
+    private _clickstartInDialog;
+    /** @internal */
+    private _handleMouseDown;
+    /** @internal */
+    private _handleMouseUp;
     close(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/drawer/drawer.component.js

@@ -2,7 +2,7 @@ import "../icon/icon.js";
 import { SkfElement as m } from "../../internal/components/skf-element.js";
 import { watch as d } from "../../internal/helpers/watch.js";
 import { MOTION_DURATIONS as p } from "@skf-design-system/ui-assets";
-import f from "../../styles/component.styles.js";
+import { componentStyles as f } from "../../styles/component.styles.js";
 import { html as g } from "lit";
 import { property as r, query as u } from "lit/decorators.js";
 import { styles as _ } from "./drawer.styles.js";
@@ -18,7 +18,7 @@ const c = class c extends m {
         i.cancel();
       });
     }, this._clickstartInDialog = !1, this._handleMouseDown = (t) => {
-      this.clickIsInsideElement(t, this.$dialog) && (this._clickstartInDialog = !0);
+      this._clickIsInsideElement(t, this.$dialog) && (this._clickstartInDialog = !0);
     }, this._handleMouseUp = () => {
       if (this._clickstartInDialog) {
         this._clickstartInDialog = !1;
@@ -43,10 +43,11 @@ const c = class c extends m {
       },
       { signal: this._signal }
     ), this.addEventListener("click", (t) => {
-      !this.clickIsInsideElement(t, this.$dialog) && !this._clickstartInDialog && this.close();
+      !this._clickIsInsideElement(t, this.$dialog) && !this._clickstartInDialog && this.close();
     });
   }
-  clickIsInsideElement(t, i) {
+  /** @internal */
+  _clickIsInsideElement(t, i) {
     const e = i.getBoundingClientRect();
     return e.top <= t.clientY && t.clientY <= e.top + e.height && e.left <= t.clientX && t.clientX <= e.left + e.width;
   }

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

@@ -4,7 +4,7 @@ import '../logo/logo.js';
 import { SkfElement } from '../../internal/components/skf-element';
 import { type CSSResultGroup } from 'lit';
 /**
- * The `<skf-header>` component is to be used as the site-header in the app
+ * The `<skf-header>` component is to be used as the site-header in the app. The navigation will be collapsed to mobile-view if the menu items exceed the available width.
  *
  * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
  *
@@ -19,7 +19,8 @@ export declare class SkfHeader extends SkfElement {
     /** @internal */
     private _widthObserver?;
     /** If true, sets header to display in compact mode only (hanburger menu and drawer) */
-    compact: boolean;
+    set compact(value: boolean);
+    get compact(): boolean;
     /** If defined, sets the aria-label for the hamburger button */
     hamburgerAriaLabel: string;
     /** If defined, sets the app or site's name */

package/dist/components/header/header.component.js

@@ -2,20 +2,26 @@ import "../button/button.js";
 import "../drawer/drawer.js";
 import "../logo/logo.js";
 import { SkfElement as d } from "../../internal/components/skf-element.js";
-import v from "../../styles/component.styles.js";
-import { nothing as b, html as a } from "lit";
-import { property as s, state as f, queryAssignedElements as u, query as w } from "lit/decorators.js";
+import { componentStyles as b } from "../../styles/component.styles.js";
+import { nothing as u, html as o } from "lit";
+import { property as s, state as f, queryAssignedElements as w, query as _ } from "lit/decorators.js";
 import { ifDefined as m } from "lit/directives/if-defined.js";
-import { literal as c, html as y } from "lit/static-html.js";
-import { styles as _ } from "./header.styles.js";
-var $ = Object.defineProperty, r = (h, e, p, g) => {
-  for (var i = void 0, o = h.length - 1, l; o >= 0; o--)
-    (l = h[o]) && (i = l(e, p, i) || i);
-  return i && $(e, p, i), i;
+import { literal as v, html as y } from "lit/static-html.js";
+import { styles as $ } from "./header.styles.js";
+var g = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (c, e, n, a) => {
+  for (var i = a > 1 ? void 0 : a ? C(e, n) : e, p = c.length - 1, h; p >= 0; p--)
+    (h = c[p]) && (i = (a ? h(e, n, i) : h(i)) || i);
+  return a && i && g(e, n, i), i;
 };
-const n = class n extends d {
+const l = class l extends d {
   constructor() {
-    super(...arguments), this.compact = !1, this.hamburgerAriaLabel = "Show navigation", this.isCompact = !1, this.openDrawer = !1;
+    super(...arguments), this.hamburgerAriaLabel = "Show navigation", this.isCompact = !1, this.openDrawer = !1;
+  }
+  set compact(e) {
+    this.isCompact = e;
+  }
+  get compact() {
+    return this.isCompact;
   }
   firstUpdated() {
     this.updateComplete.then(() => {
@@ -42,20 +48,20 @@ const n = class n extends d {
   }
   /** @internal */
   _renderMeta() {
-    const e = this.siteUrl ? c`a` : c`div`;
+    const e = this.siteUrl ? v`a` : v`div`;
     return y`
 			<${e} href=${m(this.siteUrl)} id="meta">
 				<skf-logo color="inverse"></skf-logo>
-				${this.siteName ? a`<h2>${this.siteName}</h2>` : b}
+				${this.siteName ? o`<h2>${this.siteName}</h2>` : u}
 			</${e}>
 		`;
   }
   render() {
-    return a`
+    return o`
 			<header role="banner">
 				${this._renderMeta()}
 				<div id="nav-wrapper">
-					${this.isCompact ? a`
+					${this.isCompact ? o`
 								<button
 									@click=${() => this.openDrawer = !this.openDrawer}
 									aria-controls="drawer"
@@ -73,38 +79,38 @@ const n = class n extends d {
 								>
 									<slot></slot>
 								</skf-drawer>
-							` : a`<slot></slot>`}
+							` : o`<slot></slot>`}
 				</div>
 			</header>
 		`;
   }
 };
-n.styles = [v, _];
-let t = n;
+l.styles = [b, $];
+let t = l;
 r([
   s({ type: Boolean, reflect: !0 })
-], t.prototype, "compact");
+], t.prototype, "compact", 1);
 r([
   s({ attribute: "hamburger-aria-label" })
-], t.prototype, "hamburgerAriaLabel");
+], t.prototype, "hamburgerAriaLabel", 2);
 r([
   s({ attribute: "site-name" })
-], t.prototype, "siteName");
+], t.prototype, "siteName", 2);
 r([
   s({ attribute: "site-url" })
-], t.prototype, "siteUrl");
+], t.prototype, "siteUrl", 2);
 r([
   s({ type: Boolean, reflect: !0, state: !0, attribute: "is-compact" })
-], t.prototype, "isCompact");
+], t.prototype, "isCompact", 2);
 r([
   f()
-], t.prototype, "openDrawer");
+], t.prototype, "openDrawer", 2);
 r([
-  u({ selector: "skf-nav" })
-], t.prototype, "nav");
+  w({ selector: "skf-nav" })
+], t.prototype, "nav", 2);
 r([
-  w("#nav-wrapper")
-], t.prototype, "$navWrapper");
+  _("#nav-wrapper")
+], t.prototype, "$navWrapper", 2);
 export {
   t as SkfHeader
 };

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

@@ -1,7 +1,6 @@
 import { SkfElement } from '../../internal/components/skf-element.js';
-import type { HeadingType } from '../../internal/constants/heading.js';
+import type { HeadingType } from '../../internal/types.js';
 import { type CSSResultGroup } from 'lit';
-type SkfHeadingType = HeadingType;
 /**
  * The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>
  * It extends the interface of native html `<h1>` to `<h4>` elements.
@@ -13,9 +12,8 @@ type SkfHeadingType = HeadingType;
 export declare class SkfHeading extends SkfElement {
     static styles: CSSResultGroup;
     /** Controls which heading element will be rendered. Should not be used to affect appearance */
-    as: SkfHeadingType;
+    as: HeadingType;
     /** If defined, changes the appearance of the heading */
-    styledAs?: SkfHeadingType;
+    styledAs?: HeadingType;
     render(): import("lit").TemplateResult;
 }
-export {};

package/dist/components/heading/heading.component.js

@@ -1,34 +1,35 @@
-import { SkfElement as n } from "../../internal/components/skf-element.js";
-import u from "../../styles/component.styles.js";
+import { SkfElement as f } from "../../internal/components/skf-element.js";
+import { componentStyles as n } from "../../styles/component.styles.js";
 import "lit";
-import { property as a } from "lit/decorators.js";
-import { unsafeStatic as m, html as c } from "lit/static-html.js";
+import { property as i } from "lit/decorators.js";
+import { literal as u, html as c } from "lit/static-html.js";
 import { styles as y } from "./heading.styles.js";
-var h = Object.defineProperty, f = (o, p, i, d) => {
-  for (var t = void 0, e = o.length - 1, l; e >= 0; e--)
-    (l = o[e]) && (t = l(p, i, t) || t);
-  return t && h(p, i, t), t;
+var d = Object.defineProperty, a = (l, r, p, h) => {
+  for (var t = void 0, o = l.length - 1, m; o >= 0; o--)
+    (m = l[o]) && (t = m(r, p, t) || t);
+  return t && d(r, p, t), t;
 };
-const s = class s extends n {
+const s = class s extends f {
   constructor() {
-    super(...arguments), this.as = "h1";
+    super(...arguments), this.as = "h2";
   }
   render() {
+    const r = u`${this.as}`;
     return c`
-			<${m(this.as)} id="root">
+			<${r} id="root">
 				<slot></slot>
-			</${m(this.as)}>
+			</${r}>
 		`;
   }
 };
-s.styles = [u, y];
-let r = s;
-f([
-  a({ reflect: !0 })
-], r.prototype, "as");
-f([
-  a({ attribute: "styled-as", reflect: !0 })
-], r.prototype, "styledAs");
+s.styles = [n, y];
+let e = s;
+a([
+  i({ reflect: !0 })
+], e.prototype, "as");
+a([
+  i({ attribute: "styled-as", reflect: !0 })
+], e.prototype, "styledAs");
 export {
-  r as SkfHeading
+  e as SkfHeading
 };

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

@@ -1,31 +1,25 @@
 import { SkfElement } from '../../internal/components/skf-element.js';
-import { type Icon, type IconColor, type IconSize, type SeverityFgColor } from '@skf-design-system/ui-assets';
+import type { Icon, IconColor } from '../../internal/types.js';
+import { type IconSize } from '@skf-design-system/ui-assets';
 import { type CSSResultGroup } from 'lit';
+type SkfIconSize = IconSize;
 /**
- * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text
+ * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text.
  *
- * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ * @documentation See [zeroheight](https://zeroheight.com/*) for design principles
  *
  * @tagname skf-icon
  */
 export declare class SkfIcon extends SkfElement {
     static styles: CSSResultGroup;
-    /**
-     * Sets the color of the icon
-     * @type { "primary" | "inverse" | "emphasised" | "secondary" | "success" | "info" | "warning" | "error" | "alert" }
-     */
-    color: IconColor | SeverityFgColor;
+    /** Sets the color of the icon */
+    color: IconColor;
     /** If defined, adds an alternate description to use for assistive devices */
     label?: string;
-    /**
-     * Name of the icon to display
-     * @type { "addCircleOutline" | "addCircle" | "addPlus" | "arrowBackIos" | "arrowBack" | "arrowDown" | "arrowForwardIos" | "arrowForward" | "arrowLeft" | "arrowRight" | "arrowUpDown" | "arrowUp" | "article" | "asset" | "attachment" | "bandCursor" | "bands" | "batteryEmpty" | "batteryFull" | "batteryLow" | "bearingFault" | "bluetoothDisabled" | "bluetooth" | "book" | "bookmarkOutline" | "bookmark" | "calculator" | "calendarBusy" | "calendarCheck" | "calendarEmpty" | "calendarMonth" | "calendarReccuring" | "call" | "caretDown" | "caretUpDown" | "caretUp" | "chat" | "checkCircleOutline" | "checkCircle" | "checkSmall" | "check" | "chevronDownUp" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUpDown" | "chevronUp" | "chip" | "circleStatus" | "closeAll" | "closeAlt" | "close" | "columnGraph" | "comment" | "connection0" | "connection1" | "connection2" | "connection3" | "connection4" | "contentPaste" | "copy" | "cpmCyclesPerMinute" | "dangerOutline" | "danger" | "defectFrequenciesAlt" | "defectFrequencies" | "deleteOutline" | "delete" | "devices" | "directions" | "doubleChevronLeft" | "doubleChevronRight" | "downloadDone" | "download" | "draftOutline" | "draft" | "dragDrop" | "drop" | "duplicate" | "editOutline" | "edit" | "emailOutline" | "emailPdf" | "email" | "errorOutline" | "error" | "exclamation" | "facebook" | "filterOutline" | "filter" | "findReplace" | "forbidden" | "frequencyHz" | "fullScreen" | "fullscreenExit" | "functionalGroup" | "hamburgerMenu" | "harmonicCursor" | "heatmap" | "hierarchy" | "history" | "homeOutline" | "home" | "hourglassOutline" | "hourglass" | "image" | "imx" | "infoOutline" | "info" | "instagram" | "integration" | "iosShare" | "kebabMore" | "language" | "lightbulbOutline" | "lightbulb" | "link" | "linkedin" | "listGroup" | "list" | "locationPin" | "lockOutline" | "lock" | "logOut" | "login" | "meatballsMoreCircle" | "meatballsMore" | "microphone" | "nearMe" | "noData" | "notificationsBellOutline" | "notificationsBell" | "o" | "offer" | "openInNew" | "overlaysBaseline" | "pan360" | "paper" | "pause" | "pdfOutline" | "pdf" | "person" | "photoCameraOutline" | "photoCamera" | "pieChart" | "pinOutline" | "pin" | "play" | "powerOff" | "printOutline" | "print" | "privacyPolicyOutline" | "privacyPolicy" | "proCollect" | "recAction" | "refresh" | "removeMinus" | "reorder" | "reply" | "report" | "rewakableRoute" | "route" | "search" | "sendOutline" | "send" | "sensorAlt" | "sensor" | "settingsOutline" | "settings" | "share" | "shoppingCart" | "sidebandCursor" | "singleCursor" | "skfBearing" | "spectrum" | "starOutline" | "star" | "stop" | "sync" | "time" | "timewave" | "translate" | "trend" | "trendingUp" | "twitter" | "undo" | "unknownDiamondOutline" | "unknownDiamond" | "unknownOutline" | "unknown" | "unlink" | "unlockOutline" | "unlock" | "unscheduledAction" | "upload" | "vibrationAlt" | "vibration" | "view3D" | "viewFull" | "viewHorizontal" | "viewVertical" | "visibilityOffOutline" | "visibilityOff" | "visibilityOutline" | "visibility" | "warningDiamondOutline" | "warningDiamond" | "warningOutline" | "warning" | "youtube" | "zoomIn" | "zoomOut" }
-     */
+    /** Name of the icon to display */
     name: Icon;
-    /**
-     * Size of the icon
-     * @type { "xs" | "sm" | "md" | "lg" }
-     */
-    size: IconSize;
+    /** Size of the icon */
+    size: SkfIconSize;
     render(): import("lit").TemplateResult<1>;
 }
+export {};

package/dist/components/icon/icon.component.js

@@ -1,11 +1,11 @@
 import { SkfElement as f } from "../../internal/components/skf-element.js";
 import { ICONS as c } from "@skf-design-system/ui-assets";
-import d from "../../styles/component.styles.js";
+import { componentStyles as d } from "../../styles/component.styles.js";
 import { html as h } from "lit";
 import { property as t } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
 import { ifDefined as s } from "lit/directives/if-defined.js";
-import v from "./icon.styles.js";
+import { styles as v } from "./icon.styles.js";
 var y = Object.defineProperty, o = (m, p, a, $) => {
   for (var r = void 0, i = m.length - 1, n; i >= 0; i--)
     (n = m[i]) && (r = n(p, a, r) || r);

package/dist/components/icon/icon.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/icon/icon.styles.js

@@ -80,5 +80,5 @@ const i = o`
 	}
 `;
 export {
-  i as default
+  i as styles
 };