kmaterialize 2.3.3-1.0.26 → 2.3.3-1.0.28

package/components/appbar/navbar-content.scss

@@ -0,0 +1,317 @@
+/* App-bar content geometry and surface variants. */
+.navbar .nav-icon-img {
+  display: block;
+  height: 24px;
+  width: 24px;
+  object-fit: contain;
+}
+
+.navbar .navbar-search-toolbar {
+  width: auto;
+  margin: 0 0 0 auto;
+  padding: 4px;
+  overflow: visible;
+}
+
+/* Inset surfaces retain their height at desktop and mobile sizes. */
+.navbar.appbar-bordered.navbar-rounded:not(.nav-extended):not(.navbar-wrap) {
+  box-sizing: border-box;
+  height: 64px;
+  margin: 8px 0;
+  padding: 4px;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.navbar.appbar-bordered.navbar-rounded:not(.nav-extended):not(.navbar-wrap) > .nav-wrapper {
+  box-sizing: border-box;
+  flex: 0 0 56px;
+  height: 56px;
+  border-radius: 11px;
+  transform: none;
+}
+
+.navbar.appbar-bordered.navbar-full {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+/* Dropdown triggers: keep the label and arrow in one predictable hit
+   target instead of inheriting the legacy floated-icon offsets. */
+.navbar.appbar-bordered .dropdown-trigger {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: max-content !important;
+  max-width: none;
+  height: 40px;
+  min-height: 40px;
+  padding: 0 14px 0 16px;
+  line-height: 1;
+}
+
+.navbar.appbar-bordered .dropdown-trigger > .material-icons {
+  display: inline-block !important;
+  position: static !important;
+  float: none !important;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  line-height: 20px;
+  transition: transform 160ms ease;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li:has(> .dropdown-trigger) {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  height: 40px;
+  margin: 0;
+  padding: 0;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li:has(> .dropdown-trigger) > .dropdown-trigger {
+  flex: 0 0 auto;
+  align-self: center;
+  margin: 0;
+}
+
+.navbar.appbar-bordered .dropdown-trigger[aria-expanded="true"] > .material-icons.right {
+  transform: rotate(180deg);
+}
+
+/* Icon links: center standalone icons inside their 40px hit targets. */
+.navbar.appbar-bordered .nav-wrapper > ul > li:has(> a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons:only-child) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 40px;
+  width: 40px;
+  height: 40px;
+  margin: 0;
+  padding: 0;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger):has(> .material-icons:only-child) {
+  display: inline-grid !important;
+  place-items: center;
+  box-sizing: border-box;
+  width: 40px !important;
+  height: 40px;
+  min-height: 40px;
+  padding: 0 !important;
+  line-height: 1;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons:only-child {
+  display: block !important;
+  position: static !important;
+  float: none !important;
+  width: 24px;
+  height: 24px;
+  margin: 0 !important;
+  line-height: 24px;
+  text-align: center;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger):has(> .material-icons.left),
+.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger):has(> .material-icons.right) {
+  display: inline-flex !important;
+  align-items: center;
+  gap: 8px;
+  box-sizing: border-box;
+  width: max-content !important;
+  min-width: 0;
+  height: 40px;
+  min-height: 40px;
+  padding: 0 12px !important;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.left,
+.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.right {
+  display: block !important;
+  position: static !important;
+  float: none !important;
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  margin: 0 !important;
+  line-height: 24px;
+  text-align: center;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li:has(> a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.left),
+.navbar.appbar-bordered .nav-wrapper > ul > li:has(> a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.right) {
+  flex: 0 0 auto;
+  width: max-content;
+  height: 40px;
+}
+
+/* Button rows: normalize the item row and prevent text-plus-icon buttons
+   from being mistaken for standalone icon buttons. */
+.navbar.appbar-bordered .nav-wrapper > ul > li:has(> :is(.btn, .btn-large)) {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  height: 48px;
+  margin: 0;
+  padding: 0;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn,
+.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn-large {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: max-content !important;
+  min-width: 104px;
+  height: 40px;
+  min-height: 40px;
+  margin: 0 !important;
+  padding: 0 20px !important;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn-large {
+  min-width: 144px;
+  height: 48px;
+  min-height: 48px;
+  padding-inline: 24px !important;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn:has(> .material-icons),
+.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn-large:has(> .material-icons) {
+  gap: 8px;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn > .material-icons,
+.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn-large > .material-icons {
+  display: block !important;
+  position: static !important;
+  float: none !important;
+  flex: 0 0 20px;
+  width: 20px;
+  height: 20px;
+  margin: 0 !important;
+  line-height: 20px;
+}
+
+/* Extended navbar tabs: use the navbar's readable foreground instead of the
+   low-contrast primary token inherited by transparent tabs. */
+.navbar.appbar-bordered .nav-content,
+.navbar.appbar-bordered .nav-content .tabs {
+  background: var(--md-sys-color-surface-variant);
+}
+
+.navbar.appbar-bordered .nav-content .tabs > .tab > a {
+  color: var(--md-sys-color-on-surface) !important;
+  opacity: 0.92;
+}
+
+.navbar.appbar-bordered .nav-content .tabs > .tab > a.active {
+  color: var(--md-sys-color-on-surface) !important;
+  opacity: 1;
+  font-weight: 600;
+}
+
+.navbar.appbar-bordered .nav-content .tabs > .tab.disabled > a {
+  color: var(--md-sys-color-on-surface) !important;
+  opacity: 0.5;
+}
+
+.navbar.appbar-bordered .nav-content .tabs > .indicator {
+  background-color: var(--md-sys-color-on-surface) !important;
+}
+
+.navbar.appbar-bordered .sidenav-trigger {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 40px;
+  width: 40px;
+  height: 40px;
+  min-height: 40px;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  color: var(--md-sys-color-on-surface) !important;
+}
+
+.navbar.appbar-bordered .sidenav-trigger > .material-icons {
+  display: block !important;
+  position: static !important;
+  float: none !important;
+  width: 24px;
+  height: 24px;
+  margin: 0 !important;
+  line-height: 24px;
+  text-align: center;
+}
+
+.navbar.appbar-bordered.navbar-wrap > .nav-wrapper {
+  flex-wrap: wrap;
+  height: auto;
+  min-height: 56px;
+  padding-bottom: 8px;
+  overflow: visible;
+  row-gap: 8px;
+}
+
+.navbar.appbar-bordered.navbar-wrap {
+  height: auto;
+  min-height: 56px;
+}
+
+.navbar.appbar-bordered.navbar-wrap > .nav-wrapper > ul:not(.dropdown-content) {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  flex: 1 1 100%;
+  padding-left: 0;
+  height: auto !important;
+  flex-wrap: wrap;
+  white-space: normal;
+}
+
+.navbar.appbar-bordered.navbar-wrap > .nav-wrapper > ul:not(.dropdown-content) > li {
+  height: auto !important;
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content) > li > a {
+  white-space: nowrap;
+}
+
+.navbar.appbar-bordered:not(.navbar-wrap) .nav-wrapper > ul.ml-auto:not(.nav-actions):not(.dropdown-content) {
+  flex: 0 0 auto;
+  width: max-content;
+  max-width: none;
+}
+
+/* Separators used as list items need an explicit display/height; otherwise
+   navbar item rules can collapse the one-pixel divider. */
+.navbar.appbar-bordered .nav-actions > li.nav-separator {
+  display: block !important;
+  flex: 0 0 1px;
+  width: 1px;
+  height: 24px;
+  margin: 0 4px;
+  padding: 0;
+  background: var(--md-sys-color-on-surface-variant);
+  opacity: 0.7;
+  border: 0;
+  visibility: visible !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .navbar.appbar-bordered .dropdown-trigger > .material-icons { transition: none; }
+}

package/components/appbar/navbar-scroll.scss

@@ -0,0 +1,101 @@
+/* Crowded navigation options. Scroll keeps one compact row; wrap grows the
+   bar vertically and preserves every item without clipping. */
+.navbar.appbar-bordered.navbar-scroll > .nav-wrapper {
+  position: relative;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.navbar.appbar-bordered.navbar-scroll > .nav-wrapper > ul:not(.dropdown-content) {
+  flex: 0 0 auto;
+  width: max-content;
+  min-width: max-content;
+}
+
+.navbar.appbar-bordered.navbar-scroll {
+  position: relative;
+  isolation: isolate;
+}
+
+.navbar.appbar-bordered.navbar-scroll > .nav-wrapper {
+  position: relative;
+  z-index: 0;
+}
+
+.navbar.appbar-bordered.navbar-scroll::after {
+  content: '';
+  position: absolute;
+  z-index: 20;
+  right: 0;
+  top: 0;
+  width: 15px;
+  height: 100%;
+  pointer-events: none;
+  opacity: var(--scroll-right-fade, 1) !important;
+  background: linear-gradient(
+    to right,
+    transparent,
+    var(--md-sys-color-surface-variant)
+  );
+  transition: opacity 160ms ease;
+}
+
+.navbar.appbar-bordered.navbar-scroll::before {
+  content: '';
+  position: absolute;
+  z-index: 20;
+  left: 0;
+  top: 0;
+  width: 15px;
+  height: 100%;
+  pointer-events: none;
+  opacity: var(--scroll-left-fade, 1) !important;
+  background: linear-gradient(
+    to left,
+    transparent,
+    var(--md-sys-color-surface-variant)
+  );
+  transition: opacity 160ms ease;
+}
+
+.navbar.appbar-bordered.navbar-scroll:not(.is-scroll-end)::after {
+  opacity: var(--scroll-right-fade, 0) !important;
+}
+
+.navbar.appbar-bordered.navbar-scroll.is-scroll-start::before {
+  opacity: 0;
+}
+
+.navbar.appbar-bordered.navbar-scroll:not(.is-scroll-start)::before {
+  opacity: var(--scroll-left-fade, 0) !important;
+}
+
+/* Fixed edge masks. These are real children of the navbar (not descendants
+   of the scrolling row), so they cannot move with the links. */
+.navbar.appbar-bordered.navbar-scroll > .navbar-scroll-fade {
+  display: block;
+  position: absolute;
+  z-index: 1000;
+  top: 0;
+  width: 28px;
+  height: 100%;
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity 160ms ease;
+}
+
+.navbar.appbar-bordered.navbar-scroll > .navbar-scroll-fade-left {
+  left: 0;
+  background: linear-gradient(to left, transparent, var(--md-sys-color-surface-variant));
+}
+
+.navbar.appbar-bordered.navbar-scroll > .navbar-scroll-fade-right {
+  right: 0;
+  background: linear-gradient(to right, transparent, var(--md-sys-color-surface-variant));
+}
+
+.navbar.appbar-bordered.navbar-scroll > .navbar-scroll-fade.is-hidden {
+  opacity: 0;
+}

package/components/appbar/navbar-scroll.ts

@@ -0,0 +1,67 @@
+const instances = new WeakMap<HTMLElement, () => void>();
+
+/** Initialize navbar overflow fades. Returns cleanup; safe to reinitialize. */
+export function initNavbarScroll(navbar: HTMLElement): () => void {
+  instances.get(navbar)?.();
+  const row = navbar.querySelector<HTMLElement>(':scope > .nav-wrapper');
+  if (!row) return () => {};
+  const left = document.createElement('span');
+  const right = document.createElement('span');
+  left.className = 'navbar-scroll-fade navbar-scroll-fade-left';
+  right.className = 'navbar-scroll-fade navbar-scroll-fade-right';
+  left.setAttribute('aria-hidden', 'true');
+  right.setAttribute('aria-hidden', 'true');
+  navbar.append(left, right);
+  const previous = ['--scroll-left-fade', '--scroll-right-fade'].map(name => ({
+    name, value: navbar.style.getPropertyValue(name), priority: navbar.style.getPropertyPriority(name)
+  }));
+  const start = navbar.classList.contains('is-scroll-start');
+  const end = navbar.classList.contains('is-scroll-end');
+  let disposed = false;
+  const update = () => {
+    if (disposed) return;
+    const max = Math.max(0, row.scrollWidth - row.clientWidth);
+    const rtl = getComputedStyle(row).direction === 'rtl';
+    const offset = Math.min(max, Math.max(0, rtl ? -row.scrollLeft : row.scrollLeft));
+    const atLeft = max <= 1 || (rtl ? offset >= max - 1 : offset <= 1);
+    const atRight = max <= 1 || (rtl ? offset <= 1 : offset >= max - 1);
+    navbar.classList.toggle('is-scroll-start', atLeft);
+    navbar.classList.toggle('is-scroll-end', atRight);
+    navbar.style.setProperty('--scroll-left-fade', atLeft ? '0' : '1');
+    navbar.style.setProperty('--scroll-right-fade', atRight ? '0' : '1');
+    left.classList.toggle('is-hidden', atLeft);
+    right.classList.toggle('is-hidden', atRight);
+  };
+  const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(update);
+  const observeSizes = () => {
+    resize?.disconnect();
+    resize?.observe(row);
+    Array.from(row.children).forEach(child => resize?.observe(child));
+    update();
+  };
+  const mutation = new MutationObserver(observeSizes);
+  mutation.observe(row, { childList: true, subtree: true, characterData: true });
+  row.addEventListener('scroll', update, { passive: true });
+  window.addEventListener('resize', update);
+  document.fonts?.ready.then(update);
+  observeSizes();
+  const dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    row.removeEventListener('scroll', update);
+    window.removeEventListener('resize', update);
+    resize?.disconnect();
+    mutation.disconnect();
+    left.remove();
+    right.remove();
+    navbar.classList.toggle('is-scroll-start', start);
+    navbar.classList.toggle('is-scroll-end', end);
+    previous.forEach(({ name, value, priority }) => {
+      if (value) navbar.style.setProperty(name, value, priority);
+      else navbar.style.removeProperty(name);
+    });
+    if (instances.get(navbar) === dispose) instances.delete(navbar);
+  };
+  instances.set(navbar, dispose);
+  return dispose;
+}

package/components/dropdown/_dropdown.scss

@@ -16,6 +16,7 @@
   display: none;
   min-width: 100px;
   border-radius: 12px;
+  border: 1px solid var(--md-sys-color-outline-variant);
   overflow-y: auto;
   overflow-x: hidden;
   opacity: 0;
@@ -42,7 +43,7 @@
     }
     & > a, & > span {
       font-size: 16px;
-      color: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-surface);
       display: block;
       line-height: 22px;
       padding: (($dropdown-item-height - 22) * 0.5) 16px;
@@ -61,6 +62,11 @@
       width: 24px;
     }
   }
+  > li.disabled > a,
+  > li.disabled > span {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
   li:not(.disabled):hover, li.active {
     background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%);
   }

package/components/extensions/web/crazy-button.scss

@@ -1,8 +1,10 @@
+:where(crazy-button, regular-btn) { cursor: pointer; }
+:where(crazy-button[disabled], regular-btn[disabled]) { cursor: default; }
 :is(crazy-button, regular-btn) {
   display: inline-flex;
   vertical-align: middle;
   max-width: 100%;
-  > .btn, > .btn-split > .btn { position: relative; }
+  > .btn, > .btn-split > .btn { position: relative; cursor: inherit; }
   .btn > img { width: var(--button-icon); height: var(--button-icon); object-fit: contain; }
   // Image-only buttons fill the control and follow its round or square shape.
   .btn.btn-icon[part="button"] > img {

package/components/extensions/web/crazy-button.ts

@@ -27,6 +27,7 @@ export default class CrazyButton extends Kmcomponent {
     wave: string('light', ['light', 'dark', 'false']),
     'tooltip-style': string('classic', ['classic', 'material']),
     'tooltip-position': string('top', ['top', 'right', 'bottom', 'left']),
+    cursor: string(),
     label: string(), 'icon-class': string('material-icons'), 'icon-text': string(),
     'icon-image': string(), 'icon-image-style': string(),
     'icon-position': string('right', ['left', 'right']),
@@ -93,6 +94,9 @@ export default class CrazyButton extends Kmcomponent {
     const a = this.prepareContext().attributes;
     const button = this.querySelector<HTMLElement>('[part="button"]')!;
     for (const el of this.querySelectorAll<HTMLElement>('.btn')) {
+      // CSSOM validates the value and supports keywords, var(), and image URLs.
+      // Invalid/empty values fall back to the host cursor; disabled controls keep their default.
+      if (!a.disabled && a.cursor) el.style.cursor = String(a.cursor);
       this.applyColor(el, String(a['color-primary']), false);
       this.applyColor(el, String(a['color-secondary']), true);
     }

package/components/maskito-input/maskito-input.ts

@@ -0,0 +1,139 @@
+import type { Maskito, MaskitoOptions } from '@maskito/core';
+import type { MaskitoDateParams, MaskitoNumberParams, MaskitoTimeParams } from '@maskito/kit';
+import { Component, BaseOptions, InitElements, MElement } from '../../src/component';
+import { loadPeer } from '../../src/peer-loader';
+import { NumberInput } from '../number-input/number-input';
+
+type MaskitoCore = typeof import('@maskito/core');
+type MaskitoKit = typeof import('@maskito/kit');
+export interface MaskitoInputOptions extends BaseOptions {
+  preset?: 'pattern' | 'number' | 'date' | 'time';
+  /** # = digit, A = ASCII letter, * = alphanumeric. Backslash escapes literals. */
+  pattern?: string;
+  number?: MaskitoNumberParams;
+  date?: MaskitoDateParams;
+  time?: MaskitoTimeParams;
+  /** Native Maskito options, including regex/dynamic masks, processors and plugins. */
+  maskOptions?: Partial<MaskitoOptions>;
+}
+
+/** Optional Maskito enhancement for native text inputs. */
+export class MaskitoInput extends Component<MaskitoInputOptions> {
+  declare el: HTMLInputElement;
+  mask?: Maskito;
+  ready: Promise<void>;
+  private _core?: MaskitoCore;
+  private _maskOptions?: MaskitoOptions;
+  private _destroyed = false;
+  private _form: HTMLFormElement | null;
+  private _resetTimer?: ReturnType<typeof setTimeout>;
+
+  constructor(el: HTMLInputElement, options: Partial<MaskitoInputOptions>) {
+    if (!['text', 'tel', 'search', 'url', 'password'].includes(el.type)) {
+      throw new TypeError('MaskitoInput requires a text, tel, search, url, or password input. Use inputmode for a numeric keyboard.');
+    }
+    const markup = MaskitoInput._readMarkup(el);
+    super(el, options, MaskitoInput);
+    this.el['M_MaskitoInput'] = this;
+    this.options = { ...MaskitoInput.defaults, ...markup, ...options };
+    this._form = el.form;
+    this.ready = this._setup().catch(error => { this.destroy(); throw error; });
+  }
+  static get defaults(): MaskitoInputOptions { return { preset: 'pattern' }; }
+  static init(el: HTMLInputElement, options?: Partial<MaskitoInputOptions>): MaskitoInput;
+  static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<MaskitoInputOptions>): MaskitoInput[];
+  static init(els: HTMLInputElement | InitElements<HTMLInputElement | MElement>, options: Partial<MaskitoInputOptions> = {}): MaskitoInput | MaskitoInput[] {
+    return super.init(els, options, MaskitoInput);
+  }
+  static getInstance(el: HTMLInputElement): MaskitoInput { return el['M_MaskitoInput']; }
+  private static _readMarkup(el: HTMLInputElement): Partial<MaskitoInputOptions> {
+    let json: Partial<MaskitoInputOptions> = {};
+    if (el.dataset.maskitoOptions) {
+      const value = JSON.parse(el.dataset.maskitoOptions);
+      if (!value || typeof value !== 'object' || Array.isArray(value)) throw new TypeError('data-maskito-options must be a JSON object.');
+      json = value;
+    }
+    return {
+      preset: (el.dataset.maskito || 'pattern') as MaskitoInputOptions['preset'],
+      pattern: el.dataset.maskitoPattern,
+      ...json
+    };
+  }
+  private async _options(): Promise<MaskitoOptions> {
+    const custom = this.options.maskOptions;
+    let base: MaskitoOptions;
+    if (custom?.mask !== undefined) {
+      base = { mask: custom.mask };
+    } else if (this.options.preset === 'pattern') {
+      if (!this.options.pattern) throw new TypeError('Provide a pattern or maskOptions.mask for MaskitoInput.');
+      const tokens: Record<string, RegExp> = { '#': /\d/, A: /[a-zA-Z]/, '*': /[a-zA-Z0-9]/ };
+      const expression: Array<string | RegExp> = [];
+      let escaped = false;
+      for (const character of this.options.pattern) {
+        if (escaped) { expression.push(character); escaped = false; }
+        else if (character === '\\') escaped = true;
+        else expression.push(tokens[character] || character);
+      }
+      if (escaped) throw new TypeError('A Maskito pattern cannot end with an unpaired backslash.');
+      base = { mask: expression };
+    } else {
+      if (!['number', 'date', 'time'].includes(this.options.preset || '')) throw new TypeError(`Unknown MaskitoInput preset: ${this.options.preset}`);
+      const kit = await loadPeer<MaskitoKit>({
+        specifier: '@maskito/kit', globalName: 'MaskitoKit', feature: 'MaskitoInput number/date/time presets',
+        cdnHint: 'Bundle @maskito/kit with your application, or expose its exports as window.MaskitoKit.'
+      }, () => import('@maskito/kit'));
+      if (this.options.preset === 'number') base = kit.maskitoNumber(this.options.number ?? {});
+      else if (this.options.preset === 'date') base = kit.maskitoDate(this.options.date ?? { mode: 'dd/mm/yyyy', separator: '/' });
+      else base = kit.maskitoTime(this.options.time ?? { mode: 'HH:MM' });
+    }
+    return {
+      ...base, ...custom,
+      preprocessors: [...(custom?.preprocessors || []), ...(base.preprocessors || [])],
+      postprocessors: [...(base.postprocessors || []), ...(custom?.postprocessors || [])],
+      plugins: [...(base.plugins || []), ...(custom?.plugins || [])]
+    };
+  }
+  private async _setup() {
+    const core = await loadPeer<MaskitoCore>({
+      specifier: '@maskito/core', globalName: 'MaskitoCore', feature: 'MaskitoInput',
+      cdnHint: 'Bundle @maskito/core with your application, or expose its exports as window.MaskitoCore.'
+    }, () => import('@maskito/core'));
+    if (this._destroyed) return;
+    const options = await this._options();
+    if (this._destroyed) return;
+    // An explicitly selected Maskito input must have only one masking engine.
+    NumberInput.getInstance(this.el)?.destroy();
+    this._core = core;
+    this._maskOptions = options;
+    this.el.value = core.maskitoTransform(this.el.value, options);
+    this.mask = new core.Maskito(this.el, options);
+    this._form?.addEventListener('reset', this._onReset);
+  }
+  /** Set and format a value, emitting a normal input event by default. */
+  async setValue(value: string, emit = true): Promise<void> {
+    await this.ready;
+    if (this._destroyed) return;
+    const formatted = this._core!.maskitoTransform(value, this._maskOptions!);
+    if (emit) this._core!.maskitoUpdateElement(this.el, formatted);
+    else this.el.value = formatted;
+  }
+  /** Normalize a value assigned through input.value without emitting input. */
+  async refresh(): Promise<void> { await this.setValue(this.el.value, false); }
+  /** The native, formatted string. Use Maskito kit parsers for typed values. */
+  getValue(): string { return this.el.value; }
+  private _onReset = () => {
+    clearTimeout(this._resetTimer);
+    this._resetTimer = setTimeout(() => {
+      if (!this._destroyed) this.el.value = this._core!.maskitoTransform(this.el.value, this._maskOptions!);
+    }, 0);
+  };
+  destroy() {
+    if (this._destroyed) return;
+    this._destroyed = true;
+    clearTimeout(this._resetTimer);
+    this._form?.removeEventListener('reset', this._onReset);
+    this.mask?.destroy();
+    this.mask = undefined;
+    if (MaskitoInput.getInstance(this.el) === this) this.el['M_MaskitoInput'] = undefined;
+  }
+}