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

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 { 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 { 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);
-  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.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 styles
+  r as styles
 };

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

@@ -3,6 +3,7 @@ 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';
 /**
  * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone
@@ -23,6 +24,7 @@ import { type CSSResultGroup } from 'lit';
  * 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 */
@@ -32,12 +34,6 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
      * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.
      */
     autocomplete?: HTMLInputElement['autocomplete'];
-    /** 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;
     /** 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;
@@ -54,6 +50,8 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     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 */
@@ -72,8 +70,6 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     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 */
     severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */

package/dist/components/input/input.component.js

@@ -1,34 +1,40 @@
+var f = (a) => {
+  throw TypeError(a);
+};
+var b = (a, n, t) => n.has(a) || f("Cannot " + t);
+var c = (a, n, t) => (b(a, n, "read from private field"), t ? t.call(a) : n.get(a)), _ = (a, n, t) => n.has(a) ? f("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(a) : n.set(a, t), $ = (a, n, t, r) => (b(a, n, "write to private field"), r ? r.call(a, t) : n.set(a, t), t);
 import "../icon/icon.js";
-import { FormBase as c } from "../../internal/components/formBase.js";
+import { FormBase as g } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
-import { hintSeverity as b } from "../../internal/helpers/hintSeverity.js";
-import { watch as y } from "../../internal/helpers/watch.js";
-import { Asterisk as f } from "../../internal/templates/asterisk.js";
-import { componentStyles as _ } from "../../styles/component.styles.js";
-import { html as h, nothing as u } from "lit";
-import { state as p, property as s, query as $, queryAssignedNodes as g } from "lit/decorators.js";
-import { ifDefined as o } from "lit/directives/if-defined.js";
-import { live as w } from "lit/directives/live.js";
-import { InputNumberController as E, InputPasswordController as C } from "./input.controllers.js";
-import A from "./input.styles.js";
-var L = Object.defineProperty, P = Object.getOwnPropertyDescriptor, e = (v, t, r, a) => {
-  for (var n = a > 1 ? void 0 : a ? P(t, r) : t, l = v.length - 1, d; l >= 0; l--)
-    (d = v[l]) && (n = (a ? d(t, r, n) : d(n)) || n);
-  return a && n && L(t, r, n), n;
-};
-const m = class m extends c {
+import { hintSeverity as w } from "../../internal/helpers/hintSeverity.js";
+import { watch as E } from "../../internal/helpers/watch.js";
+import { Asterisk as P } from "../../internal/templates/asterisk.js";
+import { componentStyles as C } from "../../styles/component.styles.js";
+import { LocalizeController as k } from "../../utilities/localize.js";
+import { html as p, nothing as m } from "lit";
+import { state as v, property as s, query as S, queryAssignedNodes as x } from "lit/decorators.js";
+import { ifDefined as l } from "lit/directives/if-defined.js";
+import { live as B } from "lit/directives/live.js";
+import { InputNumberController as A, InputPasswordController as V } from "./input.controllers.js";
+import I from "./input.styles.js";
+var L = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (a, n, t, r) => {
+  for (var o = r > 1 ? void 0 : r ? D(n, t) : n, h = a.length - 1, d; h >= 0; h--)
+    (d = a[h]) && (o = (r ? d(n, t, o) : d(o)) || o);
+  return r && o && L(n, t, o), o;
+}, u;
+const y = class y extends g {
   constructor() {
-    super(...arguments), this._value = "", this.buttonAriaLabelClear = "Clear input", this.buttonAriaLabelHide = "Hide password", this.buttonAriaLabelShow = "Show password", this.debug = !1, this.hideLabel = !1, this.inputmode = "text", this.readonly = !1, this.showValid = !1, this.size = "md", this.type = "text", this.validateOn = "change", this.invalid = !1, this._buttonDown = !1, this._numberController = new E(this), this._passwordController = new C(this), this._handleInput = () => {
-      var t;
-      this._value = ((t = this.$input) == null ? void 0 : t.value) ?? "", this.validateOn === "input" && (this._pristine = !1, this.validateInput());
+    super(...arguments);
+    _(this, u);
+    $(this, u, new k(this)), this._value = "", this.debug = !1, this.hideLabel = !1, this.inputmode = "text", this.lang = "en", this.readonly = !1, this.showValid = !1, this.size = "md", this.type = "text", this.validateOn = "change", this.invalid = !1, this._buttonDown = !1, this._numberController = new A(this), this._passwordController = new V(this), this._handleInput = () => {
+      this._value = this.$input?.value ?? "", this.validateOn === "input" && (this._pristine = !1, this.validateInput());
     }, this._resetValue = (t) => {
-      var r, a;
-      t.stopPropagation(), this.value = ((r = this.getAttribute("value")) == null ? void 0 : r.trim()) ?? "", this._value = this.value, this._internals.setFormValue(this.value), (a = this.$input) == null || a.focus();
+      t.stopPropagation(), this.value = this.getAttribute("value")?.trim() ?? "", this._value = this.value, this._internals.setFormValue(this.value), this.$input?.focus();
     }, this._handlePressStart = (t) => {
       this._buttonDown = !0, this.type === "number" && this._numberController.handleActionBtnLongPressStart(t);
     }, this._handlePressEnd = () => {
       this._buttonDown = !1, this.type === "number" && this._numberController.handleActionBtnLongPressEnd();
-    }, this._renderNumberButton = (t) => h`
+    }, this._renderNumberButton = (t) => p`
 		<button
 			?disabled=${this.disabled}
 			@click=${(r) => {
@@ -43,10 +49,10 @@ const m = class m extends c {
 		>
 			<skf-icon name="${t === "inc" ? "chevronUp" : "chevronDown"}" size="sm"></skf-icon>
 		</button>
-	`, this._renderPasswordButton = () => h`
+	`, this._renderPasswordButton = () => p`
 		<button
 			@click=${this._passwordController.toggleVisibility}
-			aria-label=${o(this._passwordController._buttonAriaLabel)}
+			aria-label=${this._passwordController._type === "password" ? c(this, u).term("showPassword") : c(this, u).term("hidePassword")}
 			class="password skf-icon-host"
 			type="button"
 			@mousedown="${this._handlePressStart}"
@@ -55,21 +61,20 @@ const m = class m extends c {
 		>
 			<skf-icon name=${this._passwordController._icon} size="sm"></skf-icon>
 		</button>
-	`, this._renderSearchButton = () => h`
+	`, this._renderSearchButton = () => p`
 		<button
 			@click=${this._resetValue}
 			@mousedown=${this._handlePressStart}
 			@mouseup=${this._handlePressEnd}
 			@mouseleave=${this._handlePressEnd}
-			aria-label=${o(this.buttonAriaLabelClear)}
+			aria-label=${c(this, u).term("clearEntry")}
 			class="search skf-icon-host"
 			type="button"
 		>
 			<skf-icon name="close" size="sm"></skf-icon>
 		</button>
 	`, this._onBlur = () => {
-      var t;
-      this._buttonDown && ((t = this.$input) == null || t.focus());
+      this._buttonDown && this.$input?.focus();
     };
   }
   set customInvalid(t) {
@@ -82,16 +87,13 @@ const m = class m extends c {
     this.$input && (this.$input.value = t, this._value = t, this._internals.setFormValue(t), this.validateInput());
   }
   get value() {
-    var t;
-    return ((t = this.$input) == null ? void 0 : t.value) ?? "";
+    return this.$input?.value ?? "";
   }
   firstUpdated() {
-    var t;
-    (t = this.$input) == null || t.addEventListener("change", () => {
-      var r;
-      this.validateOn === "change" && (this.validateOn = "input", this._pristine = !1), this._internals.setFormValue(((r = this.$input) == null ? void 0 : r.value) ?? ""), this.emitEvent("change"), this.validateInput();
-    }), this.addEventListener("invalid", (r) => {
-      this._pristine = !1, this.invalid = !0, this.customErrorDisplay && r.preventDefault();
+    this.$input?.addEventListener("change", () => {
+      this.validateOn === "change" && (this.validateOn = "input", this._pristine = !1), this._internals.setFormValue(this.$input?.value ?? ""), this.emitEvent("change"), this.validateInput();
+    }), this.addEventListener("invalid", (t) => {
+      this._pristine = !1, this.invalid = !0, this.customErrorDisplay && t.preventDefault();
     }), this.addEventListener("reset", this._resetValue), this.validateInput();
   }
   willUpdate(t) {
@@ -106,11 +108,11 @@ const m = class m extends c {
   valueChanged() {
     this._internals.setFormValue(this.value), this.validateInput();
   }
-  attributeChangedCallback(t, r, a) {
-    if (super.attributeChangedCallback(t, r, a), t === "value" && this._internals.setFormValue(a), t === "custom-invalid")
-      if (typeof a == "string") {
-        const l = this.withFallback(a);
-        this._pristine = !1, this._internals.setValidity({ customError: !0 }, l), this.invalid = !0, this.hint = l, this.checkValidity();
+  attributeChangedCallback(t, r, o) {
+    if (super.attributeChangedCallback(t, r, o), t === "value" && this._internals.setFormValue(o), t === "custom-invalid")
+      if (typeof o == "string") {
+        const d = this.withFallback(o);
+        this._pristine = !1, this._internals.setValidity({ customError: !0 }, d), this.invalid = !0, this.hint = d, this.checkValidity();
       } else
         this._internals.setValidity({}), this.validateInput();
   }
@@ -122,78 +124,78 @@ const m = class m extends c {
       this._internals.setValidity({ customError: this._internals.validity.customError });
     else {
       this.invalid = !this._pristine && !r.valid;
-      let a;
-      for (a in r) {
-        const n = `data-${a.toString()}`;
-        if (r[a] && !this.hasAttribute(n) && this.debug && console.log(
-          `Add custom message on ${this.localName} using attribute: ${n.toUpperCase()}="Your custom message"`
-        ), r[a]) {
-          this.validationError = a.toString();
-          const l = this.hasAttribute(n) ? this.getAttribute(n) : this.$input.validationMessage;
+      let o;
+      for (o in r) {
+        const h = `data-${o.toString()}`;
+        if (r[o] && !this.hasAttribute(h) && this.debug && console.log(
+          `Add custom message on ${this.localName} using attribute: ${h.toUpperCase()}="Your custom message"`
+        ), r[o]) {
+          this.validationError = o.toString();
+          const d = this.hasAttribute(h) ? this.getAttribute(h) : this.$input.validationMessage;
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },
-            this.withFallback(l)
+            this.withFallback(d)
           ), this.invalid && this.customErrorDisplay && this.checkValidity();
         }
       }
     }
   }
   render() {
-    var r, a, n, l;
-    const t = (this._defaultSlot.length === 0 || !((a = (r = this._defaultSlot[0]) == null ? void 0 : r.textContent) != null && a.trim())) && !this.label;
-    return h`
+    const t = (this._defaultSlot.length === 0 || !this._defaultSlot[0]?.textContent?.trim()) && !this.label;
+    return p`
 			<div id="root">
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${t} id="label">
 						<slot>${this.label}</slot>
-						${this.required ? f(this.requiredLabel) : null}
+						${this.required ? P(c(this, u).term("required")) : m}
 					</div>
 					<div id="input">
-						${this.type === "search" ? h`<skf-icon class="skf-icon-host" name="search" size="sm"></skf-icon>` : u}
+						${this.type === "search" ? p`<skf-icon class="skf-icon-host" name="search" size="sm"></skf-icon>` : m}
 						<div
-							data-leading=${o(this.leading)}
-							data-trailing=${o(this.trailing)}
+							data-leading=${l(this.leading)}
+							data-trailing=${l(this.trailing)}
 							id="affix"
 						>
 							<input
 								?disabled=${this.disabled}
 								?readonly=${this.readonly}
 								?required=${this.required}
-								.value=${w(this.value)}
+								.autocomplete=${this.autocomplete ?? "off"}
+								.value=${B(this.value)}
 								@blur=${this._onBlur}
 								@input=${this._handleInput}
-								.autocomplete=${this.autocomplete}
-								aria-describedby=${o((n = this.hint) != null && n.trim() ? "hint" : u)}
-								aria-errormessage=${o((l = this.hint) != null && l.trim() ? "hint" : u)}
+								aria-describedby=${l(this.hint?.trim() ? "hint" : m)}
+								aria-errormessage=${l(this.hint?.trim() ? "hint" : m)}
 								aria-invalid=${!!this.invalid}
 								data-testid="field-input"
-								inputmode=${o(this.inputMode)}
-								max=${o(this.max)}
-								maxlength=${o(this.maxLength)}
-								min=${o(this.min)}
-								minlength=${o(this.minLength)}
-								name=${o(this.name)}
-								pattern=${o(this.pattern)}
-								placeholder=${o(this.placeholder)}
-								type=${o(
+								inputmode=${l(this.inputMode)}
+								max=${l(this.max)}
+								maxlength=${l(this.maxLength)}
+								min=${l(this.min)}
+								minlength=${l(this.minLength)}
+								name=${l(this.name)}
+								pattern=${l(this.pattern)}
+								placeholder=${l(this.placeholder)}
+								type=${l(
       this.type === "password" ? this._passwordController._type : this.type
     )}
 							/>
 						</div>
-						${this.type === "number" ? h`
+						${this.type === "number" ? p`
 									<div id="action">
 										${this._renderNumberButton("inc")} ${this._renderNumberButton("dec")}
 									</div>
-								` : u}
-						${this.type === "password" ? this._renderPasswordButton() : u}
-						${this.type === "search" && this._value.length > 0 ? this._renderSearchButton() : u}
+								` : m}
+						${this.type === "password" ? this._renderPasswordButton() : m}
+						${this.type === "search" && this._value.length > 0 ? this._renderSearchButton() : m}
 					</div>
 				</label>
-				${this.hint && h`
+				${this.hint && p`
 					<skf-hint
+						?disabled=${this.disabled}
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
-						severity=${o(b(this.invalid, this.severity))}
+						severity=${l(w(this.invalid, this.severity))}
 						>${this.customInvalid ?? this.hint}
 					</skf-hint>
 				`}
@@ -201,23 +203,14 @@ const m = class m extends c {
 		`;
   }
 };
-m.styles = [_, A];
-let i = m;
+u = new WeakMap(), y.styles = [C, I];
+let i = y;
 e([
-  p()
+  v()
 ], i.prototype, "_value", 2);
 e([
   s()
 ], i.prototype, "autocomplete", 2);
-e([
-  s({ attribute: "button-aria-label-clear" })
-], i.prototype, "buttonAriaLabelClear", 2);
-e([
-  s({ attribute: "button-aria-label-hide" })
-], i.prototype, "buttonAriaLabelHide", 2);
-e([
-  s({ attribute: "button-aria-label-show" })
-], i.prototype, "buttonAriaLabelShow", 2);
 e([
   s({ attribute: "custom-invalid", reflect: !0 })
 ], i.prototype, "customInvalid", 1);
@@ -236,6 +229,9 @@ e([
 e([
   s()
 ], i.prototype, "label", 2);
+e([
+  s({ type: String })
+], i.prototype, "lang", 2);
 e([
   s()
 ], i.prototype, "leading", 2);
@@ -263,9 +259,6 @@ e([
 e([
   s({ type: Boolean })
 ], i.prototype, "readonly", 2);
-e([
-  s({ attribute: "required-label" })
-], i.prototype, "requiredLabel", 2);
 e([
   s({ reflect: !0 })
 ], i.prototype, "severity", 2);
@@ -288,19 +281,19 @@ e([
   s({})
 ], i.prototype, "value", 1);
 e([
-  p()
+  v()
 ], i.prototype, "invalid", 2);
 e([
-  p()
+  v()
 ], i.prototype, "_buttonDown", 2);
 e([
-  $("input")
+  S("input")
 ], i.prototype, "$input", 2);
 e([
-  g({ flatten: !0 })
+  x({ flatten: !0 })
 ], i.prototype, "_defaultSlot", 2);
 e([
-  y("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
+  E("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
 ], i.prototype, "valueChanged", 1);
 export {
   i as SkfInput

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

@@ -38,7 +38,6 @@ export declare class InputPasswordController implements ReactiveController {
     host?: ReactiveControllerHost & Partial<ControllerHostProps>;
     _inputElement?: HTMLInputElement;
     _icon: Extract<Icon, 'visibility' | 'visibilityOff'>;
-    _buttonAriaLabel: string;
     _type: Extract<SkfInput['type'], 'password' | 'text'>;
     constructor(host: ReactiveControllerHost);
     hostUpdated(): void;