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

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

@@ -1,34 +1,62 @@
-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 { 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, 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 y = (t) => {
+  throw TypeError(t);
 };
-const s = class s extends n {
+var d = (t, e, s) => e.has(t) || y("Cannot " + s);
+var n = (t, e, s) => (d(t, e, "read from private field"), s ? s.call(t) : e.get(t)), c = (t, e, s) => e.has(t) ? y("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), m = (t, e, s, r) => (d(t, e, "write to private field"), r ? r.call(t, s) : e.set(t, s), s);
+import { SkfElement as b } from "../../internal/components/skf-element.js";
+import { stateMap as _ } from "../../internal/helpers/stateMap.js";
+import { watch as C } from "../../internal/helpers/watch.js";
+import { componentStyles as g } from "../../styles/component.styles.js";
+import { html as w } from "lit";
+import { property as v } from "lit/decorators.js";
+import { styles as L } from "./heading.styles.js";
+var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, f = (t, e, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? P(e, s) : e, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (a = (r ? p(e, s, a) : p(a)) || a);
+  return r && a && O(e, s, a), a;
+}, h, i;
+const u = class u extends b {
   constructor() {
-    super(...arguments), this.as = "h1";
+    super(...arguments);
+    c(this, h);
+    c(this, i);
+    m(this, h, this.attachInternals()), m(this, i, n(this, h).states), this.as = "h2";
+  }
+  connectedCallback() {
+    switch (super.connectedCallback(), this.role = "heading", !0) {
+      case this.as === "h1":
+        this.ariaLevel = "1";
+        break;
+      case this.as === "h3":
+        this.ariaLevel = "3";
+        break;
+      case this.as === "h4":
+        this.ariaLevel = "4";
+        break;
+      default:
+        this.ariaLevel = "2";
+        break;
+    }
+  }
+  _handleStateChange() {
+    const s = ["h1", "h2", "h3", "h4"];
+    _(n(this, i), s).set(this.styledAs);
   }
   render() {
-    return c`
-			<${m(this.as)} id="root">
-				<slot></slot>
-			</${m(this.as)}>
-		`;
+    return w`<slot data-as=${this.as} id="root"></slot>`;
   }
 };
-s.styles = [u, y];
-let r = s;
+h = new WeakMap(), i = new WeakMap(), u.styles = [g, L];
+let o = u;
+f([
+  v({ type: String, reflect: !0, useDefault: !0 })
+], o.prototype, "as", 2);
 f([
-  a({ reflect: !0 })
-], r.prototype, "as");
+  v({ type: String, attribute: "styled-as" })
+], o.prototype, "styledAs", 2);
 f([
-  a({ attribute: "styled-as", reflect: !0 })
-], r.prototype, "styledAs");
+  C("styledAs")
+], o.prototype, "_handleStateChange", 1);
 export {
-  r as SkfHeading
+  o as SkfHeading
 };

package/dist/components/heading/heading.styles.js

@@ -1,57 +1,55 @@
 import { css as s } from "lit";
 const t = s`
 	@layer components {
-		:host {
-			display: contents;
-		}
-
-		#root {
-			color: var(--skf-text-color-primary);
-			font-size: var(--_skf-heading-size);
-			font-weight: var(--_skf-heading-weight);
-			line-height: 1.2;
-
-			/* Defaults */
-			:host([as='h1']) & {
-				--_skf-heading-size: var(--skf-font-size-700);
-				--_skf-heading-weight: var(--skf-font-weight-regular);
-			}
-
-			:host(:is([as='h2'], [as='h3'], [as='h4'])) & {
-				--_skf-heading-weight: var(--skf-font-weight-bold);
-			}
-
-			:host([as='h2']) & {
-				--_skf-heading-size: var(--skf-font-size-300);
-			}
-
-			:host([as='h3']) & {
-				--_skf-heading-size: var(--skf-font-size-200);
-			}
-
-			:host([as='h4']) & {
-				--_skf-heading-size: var(--skf-font-size-200);
+		@layer base {
+			#root {
+				color: var(--skf-text-color-primary);
+				font-size: var(--_skf-heading-size);
+				font-weight: var(--_skf-heading-weight);
+				line-height: 1.2;
+
+				&[data-as='h1'] {
+					--_skf-heading-size: var(--skf-font-size-700);
+					--_skf-heading-weight: var(--skf-font-weight-regular);
+				}
+
+				&:is([data-as='h2'], [data-as='h3'], [data-as='h4']) {
+					--_skf-heading-weight: var(--skf-font-weight-bold);
+				}
+
+				&[data-as='h2'] {
+					--_skf-heading-size: var(--skf-font-size-300);
+				}
+
+				&[data-as='h3'] {
+					--_skf-heading-size: var(--skf-font-size-200);
+				}
+
+				&[data-as='h4'] {
+					--_skf-heading-size: var(--skf-font-size-200);
+				}
 			}
+		}
 
-			/** Styled As */
-			:host([styled-as='h1']) & {
+		@layer mods {
+			:host(:state(h1)) #root {
 				--_skf-heading-size: var(--skf-font-size-700);
 				--_skf-heading-weight: var(--skf-font-weight-regular);
 			}
 
-			:host(:is([styled-as='h2'], [styled-as='h3'], [styled-as='h4'])) & {
+			:host(:is(:state(h2), :state(h3), :state(h4))) #root {
 				--_skf-heading-weight: var(--skf-font-weight-bold);
 			}
 
-			:host([styled-as='h2']) & {
+			:host(:state(h2)) #root {
 				--_skf-heading-size: var(--skf-font-size-300);
 			}
 
-			:host([styled-as='h3']) & {
+			:host(:state(h3)) #root {
 				--_skf-heading-size: var(--skf-font-size-200);
 			}
 
-			:host([styled-as='h4']) & {
+			:host(:state(h4)) #root {
 				--_skf-heading-size: var(--skf-font-size-200);
 			}
 		}

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

@@ -1,31 +1,29 @@
 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 {
+    #private;
     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;
+    connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(property: string, _prev: unknown, next: unknown): void;
     render(): import("lit").TemplateResult<1>;
 }
+export {};

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

@@ -1,51 +1,70 @@
-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 { 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";
-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);
-  return r && y(p, a, r), r;
+var u = (t) => {
+  throw TypeError(t);
 };
-const l = class l extends f {
+var g = (t, e, r) => e.has(t) || u("Cannot " + r);
+var c = (t, e, r) => (g(t, e, "read from private field"), r ? r.call(t) : e.get(t)), y = (t, e, r) => e.has(t) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), d = (t, e, r, o) => (g(t, e, "write to private field"), o ? o.call(t, r) : e.set(t, r), r);
+import { SkfElement as v } from "../../internal/components/skf-element.js";
+import { stateMap as b } from "../../internal/helpers/stateMap.js";
+import { watch as _ } from "../../internal/helpers/watch.js";
+import { ICONS as S } from "@skf-design-system/ui-assets";
+import { componentStyles as C } from "../../styles/component.styles.js";
+import { html as z } from "lit";
+import { property as n } from "lit/decorators.js";
+import { styles as O } from "./icon.styles.js";
+var w = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (t, e, r, o) => {
+  for (var s = o > 1 ? void 0 : o ? P(e, r) : e, m = t.length - 1, h; m >= 0; m--)
+    (h = t[m]) && (s = (o ? h(e, r, s) : h(s)) || s);
+  return o && s && w(e, r, s), s;
+};
+const x = {
+  color: [
+    "emphasized",
+    "error",
+    "info",
+    "inverse",
+    "primary",
+    "purple",
+    "secondary",
+    "success",
+    "warning"
+  ],
+  size: ["lg", "md", "sm", "xs"]
+};
+var a, p;
+const f = class f extends v {
   constructor() {
-    super(...arguments), this.color = "primary", this.size = "md";
+    super(...arguments);
+    y(this, a);
+    y(this, p);
+    d(this, a, this.attachInternals()), d(this, p, c(this, a).states), this.color = "primary", this.size = "md";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.ariaHidden = this.label ? null : "true", this.ariaLabel = this.label ?? null, this.role = this.label ? "img" : null;
+  }
+  _handleStateChange(r, o, s) {
+    b(c(this, p), x[r]).set(s);
   }
   render() {
-    return h`
-			<div
-				aria-hidden=${s(this.label ? void 0 : "true")}
-				aria-label=${s(this.label)}
-				class=${u({
-      icon: !0,
-      [`icon--color-${this.color}`]: !0,
-      [`icon--size-${this.size}`]: !0
-    })}
-				role=${s(this.label ? "img" : void 0)}
-			>
-				${c[this.name]}
-			</div>
-		`;
+    return z`<div id="root">${S[this.name]}</div>`;
   }
 };
-l.styles = [d, v];
-let e = l;
-o([
-  t({ reflect: !0 })
-], e.prototype, "color");
-o([
-  t()
-], e.prototype, "label");
-o([
-  t()
-], e.prototype, "name");
-o([
-  t({ reflect: !0 })
-], e.prototype, "size");
+a = new WeakMap(), p = new WeakMap(), f.styles = [C, O];
+let i = f;
+l([
+  n({ type: String })
+], i.prototype, "color", 2);
+l([
+  n({ type: String })
+], i.prototype, "label", 2);
+l([
+  n({ type: String })
+], i.prototype, "name", 2);
+l([
+  n({ type: String })
+], i.prototype, "size", 2);
+l([
+  _(["color", "size"])
+], i.prototype, "_handleStateChange", 1);
 export {
-  e as SkfIcon
+  i as SkfIcon
 };

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

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

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

@@ -1,19 +1,20 @@
 import '../icon/icon.js';
 import { FormBase } from '../../internal/components/formBase.js';
 import '../../internal/components/hint/hint';
+import type { FormFieldSeverity } from '../../internal/types.js';
 import type { FormFieldBaseProps } from '../../internal/types/formField.js';
+import { type Language } from '../../utilities/localize.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 & {});
 /**
- * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.
+ * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone
  *
- * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/619e4125b3d2147c0c584b11) for design principles.
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles
  *
- * @attribute {boolean} disabled - If true, sets disabled state
- * @attribute {boolean} required - If true, value is required or must be checked for the form to be submittable
+ * @attribute {boolean} [disabled=false] - If true, sets disabled state
+ * @attribute {boolean} [required=false] - If true, value is required or must be checked for the form to be submittable
  *
- * @event change - Fires when the value of the input changes
- * @event invalid - Fires when the input is invalid
+ * @event {CustomEvent} change - Fires when the value of the input changes
+ * @event {CustomEvent} invalid - Fires when the input is invalid
  *
  * @slot - The Inputs label. Alternatively, you can use the `label` attribute.
  *
@@ -23,33 +24,34 @@ type AutocompleteValues = 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-na
  * behaviour: validate-on-input, validate-on-submit and native-validation
  */
 export declare class SkfInput extends FormBase implements FormFieldBaseProps {
+    #private;
     static styles: CSSResultGroup;
     private customError;
+    /** @internal intermediary value for reset to function, e.g value attribute act as default value */
+    private _value;
     /**
-     * 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 { '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 & {})}
+     * Indicates whether the value of the control can be automatically completed by the browser. See
+     * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.
      */
-    autocomplete?: AutocompleteValues;
-    /** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
-    buttonAriaLabelClear: string;
-    /** Custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
-    buttonAriaLabelHide: string;
-    /** Custom aria-label for the visibility button **Notice!** Only applicable to type=password. */
-    buttonAriaLabelShow: string;
+    autocomplete?: HTMLInputElement['autocomplete'];
     /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
     set customInvalid(value: string | undefined);
     get customInvalid(): string | undefined;
     /** If true, outputs helping hints in console */
-    debug?: boolean;
+    debug: boolean;
     /** If true, hides the label visually */
-    hideLabel?: boolean;
+    hideLabel: boolean;
     /** If defined, displays informational text below the field */
     hint?: string;
-    /** Tells what keyboard to use if applicable */
-    inputmode: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    /**
+     * Provides a hint about the type of data that might be entered by the user while editing the element or its contents. See
+     * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inputMode) for details.
+     */
+    inputmode: HTMLInputElement['inputMode'];
     /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
     label?: string;
+    /** Sets the internal language of the component */
+    lang: Language;
     /** If defined, displays a prefix/adornment before the input-element */
     leading?: string;
     /** If defined, sets the maximum value to accept for this input */
@@ -67,44 +69,38 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     /** If defined, displays placeholder text */
     placeholder?: string;
     /** If true, makes the element not mutable, meaning the user can not edit the control */
-    readonly?: boolean;
-    /** If defined, renders an alternative A11y text for the asterisk */
-    requiredLabel?: string;
-    /**
-     * If defined, displays provided severity state
-     * @type { "success" | "info" | "warning" }
-     */
-    severity?: FormFieldBaseProps['severity'];
+    readonly: boolean;
+    /** If defined, displays provided severity state */
+    severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
-    showValid?: boolean;
+    showValid: boolean;
     /** Size of the input */
     size: 'sm' | 'md';
     /** If defined, displays a suffix/adornment after the input-element */
     trailing?: string;
-    /**
-     * Type of input control
-     * @type { 'button' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' }
-     */
-    type?: Exclude<FormFieldBaseProps['type'], 'checkbox' | 'radio'>;
+    /** Type of input */
+    type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
     /** Sets validation start */
     validateOn: 'input' | 'change' | 'submit';
     /** The current value of the input field  */
-    value: string;
+    set value(newValue: string);
+    get value(): string;
     /** @internal */
     /** true if the internal state is invalid  */
     invalid: boolean;
     /** @internal */
     private _buttonDown;
     /** @internal */
-    $input: HTMLInputElement;
+    $input?: HTMLInputElement;
     /** @internal */
     _defaultSlot: Node[];
     /** @internal */
     private _numberController;
     /** @internal */
     private _passwordController;
-    protected firstUpdated(): void;
+    firstUpdated(): void;
     willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    /** @internal */
     valueChanged(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /** @internal */
@@ -136,4 +132,3 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     private _onBlur;
     render(): import("lit").TemplateResult<1>;
 }
-export {};