@skf-design-system/ui-components 1.0.2-beta.5 → 1.0.2-beta.7

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

@@ -1,38 +1,46 @@
+var f = (n) => {
+  throw TypeError(n);
+};
+var b = (n, o, t) => o.has(n) || f("Cannot " + t);
+var c = (n, o, t) => (b(n, o, "read from private field"), t ? t.call(n) : o.get(n)), _ = (n, o, t) => o.has(n) ? f("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(n) : o.set(n, t), $ = (n, o, t, e) => (b(n, o, "write to private field"), e ? e.call(n, t) : o.set(n, 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 n } 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 o = a > 1 ? void 0 : a ? P(t, r) : t, l = v.length - 1, d; l >= 0; l--)
-    (d = v[l]) && (o = (a ? d(t, r, o) : d(o)) || o);
-  return a && o && L(t, r, o), o;
-};
-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 a, 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, s = (n, o, t, e) => {
+  for (var r = e > 1 ? void 0 : e ? D(o, t) : o, h = n.length - 1, d; h >= 0; h--)
+    (d = n[h]) && (r = (e ? d(o, t, r) : d(r)) || r);
+  return e && r && L(o, t, r), r;
+}, 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 = () => {
+    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 = () => {
       var t;
       this._value = ((t = this.$input) == null ? void 0 : t.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();
+      var e, r;
+      t.stopPropagation(), this.value = ((e = this.getAttribute("value")) == null ? void 0 : e.trim()) ?? "", this._value = this.value, this._internals.setFormValue(this.value), (r = this.$input) == null || r.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) => {
-      this._numberController.handleActionBtnClick(r, t);
+			@click=${(e) => {
+      this._numberController.handleActionBtnClick(e, t);
     }}
 			@mousedown=${this._handlePressStart}
 			@mouseup=${this._handlePressEnd}
@@ -43,10 +51,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=${n(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,13 +63,13 @@ 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=${n(this.buttonAriaLabelClear)}
+			aria-label=${c(this, u).term("clearEntry")}
 			class="search skf-icon-host"
 			type="button"
 		>
@@ -88,71 +96,71 @@ const m = class m extends c {
   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();
+      var e;
+      this.validateOn === "change" && (this.validateOn = "input", this._pristine = !1), this._internals.setFormValue(((e = this.$input) == null ? void 0 : e.value) ?? ""), this.emitEvent("change"), this.validateInput();
+    }), this.addEventListener("invalid", (e) => {
+      this._pristine = !1, this.invalid = !0, this.customErrorDisplay && e.preventDefault();
     }), this.addEventListener("reset", this._resetValue), this.validateInput();
   }
   willUpdate(t) {
     if (t.has("invalid"))
       if (this.invalid) {
         this.setAttribute("invalid", ""), this.showValid || this.removeAttribute("valid");
-        const r = this._internals.validationMessage;
-        this.hint = r !== "" ? this._internals.validationMessage : "", this.checkValidity();
+        const e = this._internals.validationMessage;
+        this.hint = e !== "" ? this._internals.validationMessage : "", this.checkValidity();
       } else
         this.removeAttribute("invalid"), !this._pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = this.getAttribute("hint") ?? "";
   }
   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, e, r) {
+    if (super.attributeChangedCallback(t, e, r), t === "value" && this._internals.setFormValue(r), t === "custom-invalid")
+      if (typeof r == "string") {
+        const d = this.withFallback(r);
+        this._pristine = !1, this._internals.setValidity({ customError: !0 }, d), this.invalid = !0, this.hint = d, this.checkValidity();
       } else
         this._internals.setValidity({}), this.validateInput();
   }
   /** @internal */
   validateInput() {
     if (this._internals.validity.customError || !this.$input) return;
-    const r = this.$input.validity;
-    if (this.invalid = !1, r.valid)
+    const e = this.$input.validity;
+    if (this.invalid = !1, e.valid)
       this._internals.setValidity({ customError: this._internals.validity.customError });
     else {
-      this.invalid = !this._pristine && !r.valid;
-      let a;
-      for (a in r) {
-        const o = `data-${a.toString()}`;
-        if (r[a] && !this.hasAttribute(o) && this.debug && console.log(
-          `Add custom message on ${this.localName} using attribute: ${o.toUpperCase()}="Your custom message"`
-        ), r[a]) {
-          this.validationError = a.toString();
-          const l = this.hasAttribute(o) ? this.getAttribute(o) : this.$input.validationMessage;
+      this.invalid = !this._pristine && !e.valid;
+      let r;
+      for (r in e) {
+        const h = `data-${r.toString()}`;
+        if (e[r] && !this.hasAttribute(h) && this.debug && console.log(
+          `Add custom message on ${this.localName} using attribute: ${h.toUpperCase()}="Your custom message"`
+        ), e[r]) {
+          this.validationError = r.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, o, l;
-    const t = (this._defaultSlot.length === 0 || !((a = (r = this._defaultSlot[0]) == null ? void 0 : r.textContent) != null && a.trim())) && !this.label;
-    return h`
+    var e, r, h, d;
+    const t = (this._defaultSlot.length === 0 || !((r = (e = this._defaultSlot[0]) == null ? void 0 : e.textContent) != null && r.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=${n(this.leading)}
-							data-trailing=${n(this.trailing)}
+							data-leading=${l(this.leading)}
+							data-trailing=${l(this.trailing)}
 							id="affix"
 						>
 							<input
@@ -160,40 +168,41 @@ const m = class m extends c {
 								?readonly=${this.readonly}
 								?required=${this.required}
 								.autocomplete=${this.autocomplete ?? "off"}
-								.value=${w(this.value)}
+								.value=${B(this.value)}
 								@blur=${this._onBlur}
 								@input=${this._handleInput}
-								aria-describedby=${n((o = this.hint) != null && o.trim() ? "hint" : u)}
-								aria-errormessage=${n((l = this.hint) != null && l.trim() ? "hint" : u)}
+								aria-describedby=${l((h = this.hint) != null && h.trim() ? "hint" : m)}
+								aria-errormessage=${l((d = this.hint) != null && d.trim() ? "hint" : m)}
 								aria-invalid=${!!this.invalid}
 								data-testid="field-input"
-								inputmode=${n(this.inputMode)}
-								max=${n(this.max)}
-								maxlength=${n(this.maxLength)}
-								min=${n(this.min)}
-								minlength=${n(this.minLength)}
-								name=${n(this.name)}
-								pattern=${n(this.pattern)}
-								placeholder=${n(this.placeholder)}
-								type=${n(
+								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=${n(b(this.invalid, this.severity))}
+						severity=${l(w(this.invalid, this.severity))}
 						>${this.customInvalid ?? this.hint}
 					</skf-hint>
 				`}
@@ -201,106 +210,97 @@ const m = class m extends c {
 		`;
   }
 };
-m.styles = [_, A];
-let i = m;
-e([
-  p()
+u = new WeakMap(), y.styles = [C, I];
+let i = y;
+s([
+  v()
 ], i.prototype, "_value", 2);
-e([
-  s()
+s([
+  a()
 ], 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 })
+s([
+  a({ attribute: "custom-invalid", reflect: !0 })
 ], i.prototype, "customInvalid", 1);
-e([
-  s({ type: Boolean })
+s([
+  a({ type: Boolean })
 ], i.prototype, "debug", 2);
-e([
-  s({ type: Boolean, attribute: "hide-label" })
+s([
+  a({ type: Boolean, attribute: "hide-label" })
 ], i.prototype, "hideLabel", 2);
-e([
-  s()
+s([
+  a()
 ], i.prototype, "hint", 2);
-e([
-  s()
+s([
+  a()
 ], i.prototype, "inputmode", 2);
-e([
-  s()
+s([
+  a()
 ], i.prototype, "label", 2);
-e([
-  s()
+s([
+  a({ type: String })
+], i.prototype, "lang", 2);
+s([
+  a()
 ], i.prototype, "leading", 2);
-e([
-  s()
+s([
+  a()
 ], i.prototype, "max", 2);
-e([
-  s({ type: Number, attribute: "maxlength" })
+s([
+  a({ type: Number, attribute: "maxlength" })
 ], i.prototype, "maxLength", 2);
-e([
-  s()
+s([
+  a()
 ], i.prototype, "min", 2);
-e([
-  s({ type: Number, attribute: "minlength" })
+s([
+  a({ type: Number, attribute: "minlength" })
 ], i.prototype, "minLength", 2);
-e([
-  s({ reflect: !0 })
+s([
+  a({ reflect: !0 })
 ], i.prototype, "name", 2);
-e([
-  s()
+s([
+  a()
 ], i.prototype, "pattern", 2);
-e([
-  s()
+s([
+  a()
 ], i.prototype, "placeholder", 2);
-e([
-  s({ type: Boolean })
+s([
+  a({ type: Boolean })
 ], i.prototype, "readonly", 2);
-e([
-  s({ attribute: "required-label" })
-], i.prototype, "requiredLabel", 2);
-e([
-  s({ reflect: !0 })
+s([
+  a({ reflect: !0 })
 ], i.prototype, "severity", 2);
-e([
-  s({ type: Boolean, attribute: "show-valid" })
+s([
+  a({ type: Boolean, attribute: "show-valid" })
 ], i.prototype, "showValid", 2);
-e([
-  s({ reflect: !0 })
+s([
+  a({ reflect: !0 })
 ], i.prototype, "size", 2);
-e([
-  s()
+s([
+  a()
 ], i.prototype, "trailing", 2);
-e([
-  s()
+s([
+  a()
 ], i.prototype, "type", 2);
-e([
-  s({ attribute: "validate-on" })
+s([
+  a({ attribute: "validate-on" })
 ], i.prototype, "validateOn", 2);
-e([
-  s({})
+s([
+  a({})
 ], i.prototype, "value", 1);
-e([
-  p()
+s([
+  v()
 ], i.prototype, "invalid", 2);
-e([
-  p()
+s([
+  v()
 ], i.prototype, "_buttonDown", 2);
-e([
-  $("input")
+s([
+  S("input")
 ], i.prototype, "$input", 2);
-e([
-  g({ flatten: !0 })
+s([
+  x({ flatten: !0 })
 ], i.prototype, "_defaultSlot", 2);
-e([
-  y("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
+s([
+  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;

package/dist/components/input/input.controllers.js

@@ -1,14 +1,14 @@
-class l {
+class o {
   constructor(t) {
-    this.handleActionBtnClick = (i, s) => {
+    this.handleActionBtnClick = (s, i) => {
       var h, n;
       const e = this._inputElement;
-      !e || !this.host || (s === "inc" ? e.stepUp() : e.stepDown(), this.host.value = ((h = this._inputElement) == null ? void 0 : h.value) ?? "", (n = this.host._internals) == null || n.setFormValue(this.host.value), this.host.validateInput && this.host.validateInput());
-    }, this.handleActionBtnLongPressStart = (i) => {
-      const s = i.target.getAttribute("aria-label") === "Increment" ? "inc" : "dec";
+      !e || !this.host || (i === "inc" ? e.stepUp() : e.stepDown(), this.host.value = ((h = this._inputElement) == null ? void 0 : h.value) ?? "", (n = this.host._internals) == null || n.setFormValue(this.host.value), this.host.validateInput && this.host.validateInput());
+    }, this.handleActionBtnLongPressStart = (s) => {
+      const i = s.target.getAttribute("aria-label") === "Increment" ? "inc" : "dec";
       this._longPressId = setTimeout(() => {
         this._repeaterId = setInterval(() => {
-          this.handleActionBtnClick(i, s);
+          this.handleActionBtnClick(s, i);
         }, 50);
       }, 400);
     }, this.handleActionBtnLongPressEnd = () => {
@@ -23,12 +23,12 @@ class l {
 class a {
   constructor(t) {
     this._icon = "visibility", this._type = "password", this.handleFieldLoaded = () => {
-      var i;
-      !this._inputElement || !((i = this.host) != null && i._handleInput) || (this.host.value = this._inputElement.value, this.host._handleInput());
+      var s;
+      !this._inputElement || !((s = this.host) != null && s._handleInput) || (this.host.value = this._inputElement.value, this.host._handleInput());
     }, this.toggleVisibility = () => {
-      var i;
-      !this._inputElement || !((i = this.host) != null && i._handleInput) || (this.host._handleInput(), this._type === "text" ? (this._buttonAriaLabel = this.host.buttonAriaLabelShow ?? "", this._icon = "visibility", this._type = "password") : (this._buttonAriaLabel = this.host.buttonAriaLabelHide ?? "", this._icon = "visibilityOff", this._type = "text"), this.host.requestUpdate(), this._inputElement.value = this.host.value ?? "");
-    }, (this.host = t).addController(this), this._buttonAriaLabel = this.host.buttonAriaLabelShow ?? "";
+      var s;
+      !this._inputElement || !((s = this.host) != null && s._handleInput) || (this.host._handleInput(), this._type === "text" ? (this._icon = "visibility", this._type = "password") : (this._icon = "visibilityOff", this._type = "text"), this.host.requestUpdate(), this._inputElement.value = this.host.value ?? "");
+    }, (this.host = t).addController(this);
   }
   hostUpdated() {
     var t;
@@ -36,6 +36,6 @@ class a {
   }
 }
 export {
-  l as InputNumberController,
+  o as InputNumberController,
   a as InputPasswordController
 };

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

@@ -2,54 +2,51 @@ import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element.js';
 import type { Icon } from '../../internal/types.js';
 import { type CSSResultGroup } from 'lit';
-type SkfLinkType = HTMLButtonElement['type'];
+type Color = 'primary' | 'inverse';
 /**
- * The `<skf-link>` can be used as either a regular link or a link styled semantic button
+ * The `<skf-link>` can be used as either a regular link or a semantic button. The button variant is
+ * intended to be used for triggering javascript functions, not handling forms.
  *
  * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
  *
+ * @event {CustomEvent} skf-link-click - Fired when the link is clicked
+ *
  * @slot - The links' main content
  *
  * @tagname skf-link
  */
 export declare class SkfLink extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
-    static classMap: {};
-    /** @internal */
-    private _onClick?;
     /** Defines the semantic element to render */
-    as: 'button' | 'a';
+    as: 'button' | 'link';
     /** Defines the text-color */
-    color: 'primary' | 'inverse';
+    color: Color;
     /** If true, disables the link */
     disabled: boolean;
     /** If defined, downloads the url */
-    download?: string;
+    download: boolean;
     /** If defined, loads url on click  */
     href?: string;
     /** If defined, renders an icon before or after the text */
     icon?: Icon;
-    /** Defines the position of the icon in relation to the text */
-    iconPlacement: 'left' | 'right';
-    /** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
-    set onClick(onClickFn: ((event: Event, route?: string) => void) | undefined);
-    get onClick(): ((event: Event, route?: string) => void) | undefined;
+    /** If true, the icon is placed to the right in relation to the text */
+    iconRight: boolean;
     /** If defined, describes the relationship between a linked resource and the current document */
     rel?: string;
-    /** If defined, used on conjunction with onClick property, second argument */
+    /** If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button. */
     route?: string;
     /** If true, fills the parents horizontal axis */
     stretch: boolean;
     /** If defined, specifies where to open the linked document */
     target?: '_blank' | '_parent' | '_self' | '_top';
-    /** Defines the type of button */
-    type: SkfLinkType;
     connectedCallback(): void;
+    _handleAsChange(): void;
     /** @internal */
-    private _assertValidOnClick;
+    _handleStateChange(property: string, _prev: unknown, next: unknown): void;
     /** @internal */
     /** retargets click event to host */
-    private _preprocessOnClick;
+    private _handleClick;
     /** @internal */
     private _renderIcon;
     render(): import("lit").TemplateResult;