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

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

@@ -0,0 +1,57 @@
+import '../icon/icon.js';
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * TODO:
+ *
+ * - Fix drag outside closes the drawer
+ * - add tests
+ * - add documentation
+ */
+/**
+ * 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)
+ *
+ * @slot - The Drawer's main content
+ *
+ * @tagname skf-drawer
+ */
+export declare class SkfDrawer extends SkfElement {
+    static styles: CSSResultGroup;
+    /** @internal */
+    private _abortController?;
+    /** @internal */
+    private _signal?;
+    /** If defined, sets the aria-label for the close button */
+    closeButtonAriaLabel: string;
+    /** Heading for the Drawer */
+    heading?: string;
+    /** Sets the max-width */
+    size: 'sm' | 'md' | 'lg';
+    /** If true, Drawer is open */
+    open: boolean;
+    /** Placement of the Drawer */
+    placement: 'left' | 'right';
+    /** @internal */
+    $dialog: HTMLDialogElement;
+    disconnectedCallback(): void;
+    /** @internal */
+    _placementChanged: () => void;
+    /** @internal */
+    _openChanged(): Promise<void>;
+    /** @internal */
+    private _startListeners;
+    clickIsInsideElement(event: MouseEvent, el: HTMLElement): boolean;
+    /** @internal */
+    private _animateDrawer;
+    _clickstartInDialog: boolean;
+    _handleMouseDown: (event: MouseEvent) => void;
+    _handleMouseUp: () => void;
+    close(): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,124 @@
+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 { html as g } from "lit";
+import { property as r, query as u } from "lit/decorators.js";
+import { styles as _ } from "./drawer.styles.js";
+var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (h, t, i, e) => {
+  for (var o = e > 1 ? void 0 : e ? w(t, i) : t, n = h.length - 1, l; n >= 0; n--)
+    (l = h[n]) && (o = (e ? l(t, i, o) : l(o)) || o);
+  return e && o && b(t, i, o), o;
+};
+const c = class c extends m {
+  constructor() {
+    super(...arguments), this.closeButtonAriaLabel = "Close dialog", this.size = "md", this.open = !1, this.placement = "right", this._placementChanged = () => {
+      this.$dialog.getAnimations().forEach((i) => {
+        i.cancel();
+      });
+    }, this._clickstartInDialog = !1, this._handleMouseDown = (t) => {
+      this.clickIsInsideElement(t, this.$dialog) && (this._clickstartInDialog = !0);
+    }, this._handleMouseUp = () => {
+      if (this._clickstartInDialog) {
+        this._clickstartInDialog = !1;
+        return;
+      }
+    };
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this._abortController) == null || t.abort();
+  }
+  async _openChanged() {
+    var t;
+    this.open ? (this._abortController = new AbortController(), this._signal = this._abortController.signal, this.$dialog.showModal(), this._startListeners(), await this._animateDrawer(), this.emit("skf-drawer-opened")) : ((t = this._abortController) == null || t.abort(), this.emit("skf-drawer-closing"), await this._animateDrawer(), this.emit("skf-drawer-closed"), this.$dialog.close());
+  }
+  /** @internal */
+  _startListeners() {
+    window.addEventListener(
+      "keydown",
+      (t) => {
+        t.key === "Escape" && (t.preventDefault(), this.close());
+      },
+      { signal: this._signal }
+    ), this.addEventListener("click", (t) => {
+      !this.clickIsInsideElement(t, this.$dialog) && !this._clickstartInDialog && this.close();
+    });
+  }
+  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;
+  }
+  /** @internal */
+  _animateDrawer() {
+    const t = this.open ? [{ opacity: 0 }, { opacity: 0.4 }] : [{ opacity: 0 }], i = this.open ? [{ translate: "0" }] : [{ translate: this.placement === "right" ? "100%" : "-100%" }];
+    return new Promise((e) => {
+      requestAnimationFrame(() => {
+        const o = this.$dialog.animate(t, {
+          duration: p.normal,
+          fill: "forwards",
+          pseudoElement: "::backdrop"
+        }), n = this.$dialog.animate(i, {
+          duration: p.normal,
+          easing: "ease-out",
+          fill: "forwards"
+        });
+        Promise.all([o.finished, n.finished]).then(() => {
+          e("Animations finished");
+        }).catch(() => {
+          throw new Error("Animation failed");
+        });
+      });
+    });
+  }
+  close() {
+    this.open = !1;
+  }
+  render() {
+    return g`
+			<dialog @mousedown="${this._handleMouseDown}" @mouseup="${this._handleMouseUp}">
+				<header>
+					<h2>${this.heading}</h2>
+					<button
+						aria-label=${this.closeButtonAriaLabel}
+						id="close-button"
+						@click="${() => this.open = !1}"
+					>
+						<skf-icon name="close" color="inverse"></skf-icon>
+					</button>
+				</header>
+				<slot id="body" part="body">${this.slot}</slot>
+			</dialog>
+		`;
+  }
+};
+c.styles = [f, _];
+let s = c;
+a([
+  r({ attribute: "close-button-aria-label" })
+], s.prototype, "closeButtonAriaLabel", 2);
+a([
+  r()
+], s.prototype, "heading", 2);
+a([
+  r({ reflect: !0 })
+], s.prototype, "size", 2);
+a([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "open", 2);
+a([
+  r({ reflect: !0 })
+], s.prototype, "placement", 2);
+a([
+  u("dialog")
+], s.prototype, "$dialog", 2);
+a([
+  d("placement", { waitUntilFirstUpdate: !0 })
+], s.prototype, "_placementChanged", 2);
+a([
+  d("open", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
+], s.prototype, "_openChanged", 1);
+export {
+  s as SkfDrawer
+};

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

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

package/dist/components/drawer/drawer.js

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

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

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

package/dist/components/drawer/drawer.styles.js

@@ -0,0 +1,71 @@
+import { css as e } from "lit";
+const o = e`
+	@layer components {
+		dialog {
+			all: unset;
+			background-color: var(--skf-bg-color-neutral-1);
+			display: none;
+			flex-direction: column;
+			inline-size: min(100%, var(--_skf-drawer-size, 540px));
+			inset-block: 0;
+			inset-inline: var(--_skf-drawer-inset, auto 0);
+			position: fixed;
+			translate: 100% 0;
+
+			&[open] {
+				display: flex;
+
+				&::backdrop {
+					background-color: var(--skf-bg-color-neutral-7);
+					opacity: 0.4;
+				}
+			}
+
+			:host([placement='left']) & {
+				--_skf-drawer-inset: 0 auto;
+
+				translate: -100% 0;
+			}
+
+			:host([size='sm']) & {
+				--_skf-drawer-size: 400px;
+			}
+
+			:host([size='lg']) & {
+				--_skf-drawer-size: 680px;
+			}
+		}
+
+		header {
+			align-items: center;
+			background-color: var(--skf-bg-color-emphasised);
+			block-size: var(--skf-size-48);
+			color: var(--skf-text-color-inverse);
+			display: flex;
+			justify-content: space-between;
+			padding-inline: var(--skf-box-spacing);
+		}
+
+		h2 {
+			font-size: var(--skf-font-size-200);
+		}
+
+		#close-button {
+			display: inline-flex;
+
+			&:focus-visible {
+				border-radius: var(--skf-border-radius-sm);
+				outline: var(--skf-border-width-sm) solid var(--skf-interactive-text-color-inverse);
+			}
+		}
+
+		#body {
+			display: block;
+			flex: auto;
+			padding: var(--skf-box-spacing);
+		}
+	}
+`;
+export {
+  o as styles
+};

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

@@ -0,0 +1,45 @@
+import '../button/button.js';
+import '../drawer/drawer.js';
+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
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @slot - Navigation items
+ *
+ * @tagname skf-header
+ */
+export declare class SkfHeader extends SkfElement {
+    static styles: CSSResultGroup;
+    /** @internal */
+    private _dynamicBreakpoint?;
+    /** @internal */
+    private _widthObserver?;
+    /** If true, sets header to display in compact mode only (hanburger menu and drawer) */
+    compact: boolean;
+    /** If defined, sets the aria-label for the hamburger button */
+    hamburgerAriaLabel: string;
+    /** If defined, sets the app or site's name */
+    siteName?: string;
+    /** If defined, sets the site's base-url for the "logo-link" */
+    siteUrl?: string;
+    /** @internal */
+    isCompact: boolean;
+    /** @internal */
+    private openDrawer;
+    /** @internal */
+    private nav;
+    /** @internal */
+    private $navWrapper;
+    firstUpdated(): void;
+    /** @internal */
+    private _observeHostWidth;
+    /** @internal */
+    private _observeNavContainer;
+    /** @internal */
+    private _renderMeta;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,110 @@
+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 { 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;
+};
+const n = class n extends d {
+  constructor() {
+    super(...arguments), this.compact = !1, this.hamburgerAriaLabel = "Show navigation", this.isCompact = !1, this.openDrawer = !1;
+  }
+  firstUpdated() {
+    this.updateComplete.then(() => {
+      if (this.compact) {
+        this.isCompact = !0, this.nav[0].vertical = !0;
+        return;
+      }
+      this._observeHostWidth();
+    }).catch(console.error);
+  }
+  /** @internal */
+  _observeHostWidth() {
+    this._widthObserver = new ResizeObserver(() => {
+      var e;
+      this.clientWidth > (this._dynamicBreakpoint ?? 0) && (this._dynamicBreakpoint = null, (e = this._widthObserver) == null || e.disconnect(), this.isCompact = !1, this.nav[0].vertical = !1, this._observeNavContainer());
+    }), this._widthObserver.observe(this);
+  }
+  /** @internal */
+  _observeNavContainer() {
+    this._widthObserver = new ResizeObserver(() => {
+      var e;
+      this.$navWrapper.clientWidth < this.$navWrapper.scrollWidth && (this._dynamicBreakpoint = this.clientWidth, (e = this._widthObserver) == null || e.disconnect(), this.isCompact = !0, this.nav[0].vertical = !0, this._observeHostWidth());
+    }), this._widthObserver.observe(this.$navWrapper);
+  }
+  /** @internal */
+  _renderMeta() {
+    const e = this.siteUrl ? c`a` : c`div`;
+    return y`
+			<${e} href=${m(this.siteUrl)} id="meta">
+				<skf-logo color="inverse"></skf-logo>
+				${this.siteName ? a`<h2>${this.siteName}</h2>` : b}
+			</${e}>
+		`;
+  }
+  render() {
+    return a`
+			<header role="banner">
+				${this._renderMeta()}
+				<div id="nav-wrapper">
+					${this.isCompact ? a`
+								<button
+									@click=${() => this.openDrawer = !this.openDrawer}
+									aria-controls="drawer"
+									aria-expanded=${this.openDrawer}
+									aria-label=${this.hamburgerAriaLabel}
+								>
+									<skf-icon color="inverse" name="hamburgerMenu" size="lg"></skf-icon>
+								</button>
+								<skf-drawer
+									?open=${this.openDrawer}
+									@close=${() => this.openDrawer = !1}
+									heading=${m(this.siteName)}
+									id="drawer"
+									placement="right"
+								>
+									<slot></slot>
+								</skf-drawer>
+							` : a`<slot></slot>`}
+				</div>
+			</header>
+		`;
+  }
+};
+n.styles = [v, _];
+let t = n;
+r([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "compact");
+r([
+  s({ attribute: "hamburger-aria-label" })
+], t.prototype, "hamburgerAriaLabel");
+r([
+  s({ attribute: "site-name" })
+], t.prototype, "siteName");
+r([
+  s({ attribute: "site-url" })
+], t.prototype, "siteUrl");
+r([
+  s({ type: Boolean, reflect: !0, state: !0, attribute: "is-compact" })
+], t.prototype, "isCompact");
+r([
+  f()
+], t.prototype, "openDrawer");
+r([
+  u({ selector: "skf-nav" })
+], t.prototype, "nav");
+r([
+  w("#nav-wrapper")
+], t.prototype, "$navWrapper");
+export {
+  t as SkfHeader
+};

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

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

package/dist/components/header/header.js

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

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

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

package/dist/components/header/header.styles.js

@@ -0,0 +1,68 @@
+import { css as e } from "lit";
+const a = e`
+	@layer components {
+		:host {
+			--skf-header-height: 60px;
+		}
+
+		header {
+			align-items: center;
+			background-color: var(--skf-bg-color-emphasised);
+			block-size: var(--skf-header-height);
+			display: flex;
+			gap: var(--skf-spacing-125);
+			justify-content: space-between;
+			padding-inline: var(--skf-spacing-100);
+		}
+
+		#meta {
+			align-items: inherit;
+			color: var(--skf-text-color-inverse);
+			display: inherit;
+			gap: var(--skf-spacing-100);
+
+			&:is(a) {
+				text-decoration: none;
+			}
+
+			:host(:not([is-compact])) &:has(h2)::after {
+				align-self: normal;
+				border-right: 1px solid var(--skf-border-color-inverse);
+				content: '';
+				display: block;
+			}
+		}
+
+		h2 {
+			font-size: var(--skf-font-size-200);
+			font-weight: var(--skf-font-weight-regular);
+			white-space: nowrap;
+		}
+
+		#nav-wrapper:has(skf-drawer) {
+			display: inline-flex; /** Shrink-wrap icon-button */
+		}
+
+		#nav-wrapper:not(:has(skf-drawer)) {
+			overflow: hidden;
+		}
+
+		skf-drawer::part(body) {
+			background-color: var(--skf-bg-color-emphasised);
+			padding: 0;
+		}
+
+		button {
+			color: var(--_skf-header-button-color, var(--skf-interactive-text-color-inverse));
+			display: inline-flex;
+
+			&:focus-visible {
+				border-radius: var(--skf-border-radius-sm);
+				outline: var(--skf-border-width-sm) solid var(--skf-interactive-text-color-inverse);
+			}
+		}
+	}
+`;
+export {
+  a as styles
+};

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

@@ -1,6 +1,7 @@
 import { SkfElement } from '../../internal/components/skf-element.js';
 import type { HeadingType } from '../../internal/constants/heading.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.
@@ -11,17 +12,10 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfHeading extends SkfElement {
     static styles: CSSResultGroup;
-    /**
-     * Controls which heading element will be rendered. Should not be used to affect appearance
-     *
-     * @type { "h1" | "h2" | "h3" | "h4" }
-     */
-    as: HeadingType;
-    /**
-     * If provided, changes the appearance of the heading
-     *
-     * @type { "h1" | "h2" | "h3" | "h4" }
-     */
-    styledAs?: HeadingType;
+    /** Controls which heading element will be rendered. Should not be used to affect appearance */
+    as: SkfHeadingType;
+    /** If defined, changes the appearance of the heading */
+    styledAs?: SkfHeadingType;
     render(): import("lit").TemplateResult;
 }
+export {};

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

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

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

@@ -58,5 +58,5 @@ const t = s`
 	}
 `;
 export {
-  t as default
+  t as styles
 };

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

@@ -19,7 +19,7 @@ export declare class SkfIcon extends SkfElement {
     label?: string;
     /**
      * Name of the icon to display
-     * @type { "arrowDown" | "arrowDownUp" | "arrowLeft" | "arrowRight" | "arrowUp" | "article" | "artificialIntelligence" | "asset" | "attachment" | "bandCursor" | "bands" | "batteryEmpty" | "batteryFull" | "batteryLow" | "bearingFault" | "book" | "bulb" | "burger" | "cPM" | "calendar" | "calendarBooked" | "calendarEmpty" | "calendarNotBooked" | "calendarRecurring" | "caretDown" | "caretUp" | "caretUpDown" | "chat" | "check" | "checkCircle" | "checkSmall" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronUpDown" | "close" | "closeAllFaults" | "closeFault" | "closeSmall" | "columnGraph" | "comment" | "connection1" | "connection2" | "connection3" | "connection4" | "danger" | "defectFrequencies" | "defectFrequenciesAlternative" | "doubleChevronLeft" | "doubleChevronRight" | "download" | "draft" | "draftFilled" | "draftOutlined" | "dragNDrop" | "drop" | "duplicate" | "edit" | "emailFilled" | "emailOutlined" | "exclamation" | "eye" | "eyeHidden" | "eyeVisible" | "filter" | "forbidden" | "fullScreen" | "fullScreenExit" | "functionalLocation" | "harmonicCursor" | "heatmap" | "hierarchy" | "history" | "historyAlt" | "hourglassFramedFilled" | "hourglassFramedOutlined" | "hourglassOutlined" | "hz" | "iMX" | "image" | "infoCircleFilled" | "infoCircleOutlined" | "integration" | "kebab" | "link" | "listGroup" | "listItem" | "locationPin" | "lock" | "logOut" | "meatballs" | "microphone" | "minus" | "minusSmall" | "noData" | "o" | "openInNew" | "overlayBaseline" | "pDF" | "paper" | "pause" | "pieChart" | "pin" | "play" | "plus" | "powerOff" | "printer" | "proCollect" | "recAction" | "received" | "refresh" | "reorder" | "replace" | "reply" | "rewalkableRoute" | "routes" | "search" | "send" | "sensorA" | "sensorB" | "settings" | "sidebandCursor" | "singleCursor" | "spectrum" | "starFilled" | "starOutlined" | "statusCircle" | "stop" | "structuralVibration" | "sync" | "timewave" | "trash" | "trend" | "trendingUp" | "undo" | "unknownCircle" | "unknownDiamond" | "unlink" | "unlock" | "unscheduledAction" | "upload" | "user" | "viewFull" | "viewHorizontal" | "viewVertical" | "warning" | "warningCircle" | "warningDiamond" | "zoomIn" | "zoomOut" }
+     * @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: Icon;
     /**

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

@@ -28,7 +28,7 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     /**
      * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
      * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
-     * @type {  -m  }
+     * @type { '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 & {})}
      */
     autocomplete?: AutocompleteValues;
     /** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
@@ -72,7 +72,7 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     requiredLabel?: string;
     /**
      * If defined, displays provided severity state
-     * @type { "alert" | "success" | "info" | "warning" }
+     * @type { "success" | "info" | "warning" }
      */
     severity?: FormFieldBaseProps['severity'];
     /** If true, displays valid state after interaction */