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

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

@@ -1,33 +1,33 @@
-import { SkfElement as f } from "../../internal/components/skf-element.js";
+import { SkfElement as n } from "../../internal/components/skf-element.js";
 import u from "../../styles/component.styles.js";
 import "lit";
-import { property as n } from "lit/decorators.js";
-import { html as y, unsafeStatic as l } from "lit/static-html.js";
-import c from "./heading.styles.js";
-var d = Object.defineProperty, a = (o, p, i, h) => {
-  for (var t = void 0, e = o.length - 1, m; e >= 0; e--)
-    (m = o[e]) && (t = m(p, i, t) || t);
-  return t && d(p, i, t), t;
+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;
 };
-const s = class s extends f {
+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)}>
 		`;
   }
 };
-s.styles = [u, c];
+s.styles = [u, y];
 let r = s;
-a([
-  n({ reflect: !0 })
+f([
+  a({ reflect: !0 })
 ], r.prototype, "as");
-a([
-  n({ attribute: "styled-as" })
+f([
+  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/icon/icon.component.js

@@ -1,51 +1,51 @@
 import { SkfElement as f } from "../../internal/components/skf-element.js";
-import { ICONS as d } from "@skf-design-system/ui-assets";
-import u from "../../styles/component.styles.js";
-import { html as c } from "lit";
+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 h } from "lit/directives/class-map.js";
+import { classMap as u } from "lit/directives/class-map.js";
 import { ifDefined as s } from "lit/directives/if-defined.js";
-import y from "./icon.styles.js";
-var $ = Object.defineProperty, o = (m, p, n, b) => {
-  for (var e = void 0, i = m.length - 1, a; i >= 0; i--)
-    (a = m[i]) && (e = a(p, n, e) || e);
-  return e && $(p, n, e), e;
+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;
 };
 const l = class l extends f {
   constructor() {
     super(...arguments), this.color = "primary", this.size = "md";
   }
   render() {
-    return c`
+    return h`
 			<div
 				aria-hidden=${s(this.label ? void 0 : "true")}
 				aria-label=${s(this.label)}
-				class=${h({
+				class=${u({
       icon: !0,
       [`icon--color-${this.color}`]: !0,
       [`icon--size-${this.size}`]: !0
     })}
 				role=${s(this.label ? "img" : void 0)}
 			>
-				${d[this.name]}
+				${c[this.name]}
 			</div>
 		`;
   }
 };
-l.styles = [u, y];
-let r = l;
+l.styles = [d, v];
+let e = l;
 o([
   t({ reflect: !0 })
-], r.prototype, "color");
+], e.prototype, "color");
 o([
   t()
-], r.prototype, "label");
+], e.prototype, "label");
 o([
   t()
-], r.prototype, "name");
+], e.prototype, "name");
 o([
   t({ reflect: !0 })
-], r.prototype, "size");
+], e.prototype, "size");
 export {
-  r as SkfIcon
+  e as SkfIcon
 };

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 */
@@ -105,6 +105,7 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     private _passwordController;
     protected firstUpdated(): void;
     willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    valueChanged(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /** @internal */
     _handleInput: () => void;