kmaterialize 2.3.3-1.0.27 → 2.3.3-1.0.28

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/otp-input/_otp-input.scss

@@ -0,0 +1,94 @@
+.otp-input {
+  --otp-slot-size: 48px;
+  --otp-slot-gap: 8px;
+  --otp-slot-radius: 4px;
+  position: relative;
+  width: max-content;
+  max-width: 100%;
+  margin-block: 8px;
+  border-radius: var(--otp-slot-radius);
+
+  // One native control preserves selection, password semantics, autofill and form validation.
+  // Its accessible name comes from the original label; decorative slots are aria-hidden.
+  > input.otp-input-native {
+    position: absolute !important;
+    inset: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    opacity: 0;
+    font-size: 16px;
+    z-index: 1;
+  }
+  .otp-input-slots { display: flex; flex-wrap: wrap; align-items: center; gap: var(--otp-slot-gap); }
+  .otp-input-slot {
+    display: inline-grid;
+    place-items: center;
+    box-sizing: border-box;
+    flex: 0 0 var(--otp-slot-size);
+    width: var(--otp-slot-size);
+    height: calc(var(--otp-slot-size) + 8px);
+    border: 1px solid var(--md-sys-color-on-surface-variant);
+    border-radius: var(--otp-slot-radius);
+    background: transparent;
+    color: var(--md-sys-color-on-surface);
+    font-size: 24px;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
+    &.is-selected { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
+    &.is-active { border: 2px solid var(--input-color, var(--md-sys-color-primary)); }
+  }
+  .otp-input-group-start { margin-inline-start: var(--otp-slot-gap); }
+  .otp-input-separator { color: var(--md-sys-color-on-surface-variant); white-space: pre; }
+  &:hover:not(:has(> input:disabled)) .otp-input-slot:not(.is-active) { border-color: var(--md-sys-color-on-surface); }
+  &:has(> input:disabled) { opacity: .38; cursor: not-allowed; }
+  &[data-invalid], &:has(> input[aria-invalid='true']), &:has(> input:user-invalid) {
+    .otp-input-slot { border-color: var(--md-sys-color-error); }
+    .otp-input-slot.is-active { border-width: 2px; }
+  }
+}
+@media (max-width: 600px) { .otp-input { --otp-slot-size: 36px; --otp-slot-gap: 4px; } }
+@media (prefers-reduced-motion: reduce) { .otp-input .otp-input-slot { transition: none; } }
+@media (forced-colors: active) {
+  .otp-input .otp-input-slot { border-color: ButtonText; }
+  .otp-input .otp-input-slot.is-active { outline: 2px solid Highlight; outline-offset: 2px; }
+  .otp-input:has(> input:disabled) .otp-input-slot { color: GrayText; border-color: GrayText; }
+}
+
+// Standard text-field markup: input, label, supporting text. Keep the label
+// above the entire code so it never overlaps an individual slot or separator.
+.input-field:has(> .otp-input) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-block: 24px;
+  > .otp-input { margin: 0; }
+  > label {
+    position: static;
+    order: -1;
+    transform: none;
+    margin: 0 0 8px;
+    padding: 0;
+    font-size: 12px;
+    line-height: 1.4;
+    background: transparent;
+  }
+  > .supporting-text { display: block; padding-inline: 0; }
+  &:focus-within > label { color: var(--input-color); }
+  &:has(input:disabled) > label { opacity: .38; }
+  &.error, &:has(input[aria-invalid='true']), &:has(.otp-input[data-invalid]), &:has(input:user-invalid) {
+    > label, > .supporting-text { color: var(--md-sys-color-error); }
+    .otp-input-slot { border-color: var(--md-sys-color-error); }
+  }
+}
+
+// Match the standard text field: omit .outlined for bottom borders only.
+// Set widths separately so focus, validation and forced-color tokens still apply.
+.input-field:not(.outlined) > .otp-input .otp-input-slot {
+  border-width: 0 0 1px;
+  border-radius: var(--otp-slot-radius) var(--otp-slot-radius) 0 0;
+  &.is-active { border-width: 0 0 2px; }
+}

package/components/otp-input/otp-input.ts

@@ -0,0 +1,223 @@
+import type { MaskitoOptions } from '@maskito/core';
+import { Component, BaseOptions, InitElements, MElement } from '../../src/component';
+import { MaskitoInput } from '../maskito-input/maskito-input';
+
+export interface OtpInputOptions extends BaseOptions {
+  /** Number of editable slots (1–32); inferred when pattern is supplied. */
+  length?: number;
+  characters?: 'digits' | 'alphanumeric';
+  /** # = digit, A = ASCII letter, * = alphanumeric; backslash escapes literals. */
+  pattern?: string;
+  /** Maskito processing and overwrite behavior. The slot pattern owns the mask. */
+  maskOptions?: Partial<Omit<MaskitoOptions, 'mask'>>;
+  /** Visually group slots without adding separators to the submitted value. */
+  groupSize?: number;
+  /** Hide entered characters, using a native password input. */
+  masked?: boolean;
+  onComplete?: (value: string, instance: OtpInput) => void;
+}
+
+type Slot = { index: number; expression: string; literal?: string };
+const tokenExpressions: Record<string, string> = { '#': '[0-9]', A: '[a-zA-Z]', '*': '[a-zA-Z0-9]' };
+const escapePattern = (value: string) => value.replace(/[\\^$.*+?()[\]{}|/\-]/g, '\\$&');
+
+/** A single accessible native input, rendered as Material OTP/PIN slots. Requires @maskito/core. */
+export class OtpInput extends Component<OtpInputOptions> {
+  declare el: HTMLInputElement;
+  ready: Promise<void>;
+  private _mask?: MaskitoInput;
+  private _wrapper?: HTMLDivElement;
+  private _cells: Array<{ slot: Slot; el: HTMLSpanElement }> = [];
+  private _slots: Slot[];
+  private _attributes = new Map<string, string | null>();
+  private _observer?: MutationObserver;
+  private _form: HTMLFormElement | null;
+  private _resetTimer?: ReturnType<typeof setTimeout>;
+  private _destroyed = false;
+  private _lastComplete = '';
+  private _hadClass: boolean;
+
+  constructor(el: HTMLInputElement, options: Partial<OtpInputOptions> = {}) {
+    if (!['text', 'tel', 'password'].includes(el.type)) throw new TypeError('OtpInput requires a text, tel, or password input.');
+    const settings = { ...OtpInput.defaults, ...OtpInput._markup(el), ...options };
+    if (!['digits', 'alphanumeric'].includes(settings.characters!)) throw new TypeError('Unknown OTP character set.');
+    if (!Number.isInteger(settings.groupSize) || settings.groupSize! < 0 || settings.groupSize! > 32) throw new TypeError('OTP groupSize must be an integer between 0 and 32.');
+    if (settings.length !== undefined && (!Number.isInteger(settings.length) || settings.length < 1 || settings.length > 32)) throw new TypeError('OTP length must be an integer between 1 and 32.');
+    const pattern = settings.pattern ?? (settings.characters === 'alphanumeric' ? '*' : '#').repeat(settings.length ?? 6);
+    const slots: Slot[] = [];
+    let escaped = false;
+    for (const char of pattern) {
+      if (!escaped && char === '\\') { escaped = true; continue; }
+      const expression = !escaped && tokenExpressions[char];
+      if (char.length !== 1) throw new TypeError('OTP patterns support single UTF-16 code-unit characters.');
+      slots.push({ index: slots.length, expression: expression || escapePattern(char), ...(!expression ? { literal: char } : {}) });
+      escaped = false;
+    }
+    const length = slots.filter(slot => slot.literal === undefined).length;
+    if (escaped || length < 1 || length > 32 || slots.length > 64) throw new TypeError('OTP pattern must contain 1–32 editable slots and at most 64 characters, with paired escapes.');
+    if (settings.pattern && settings.length !== undefined && settings.length !== length) throw new TypeError('OTP length must match the editable slots in the pattern.');
+    // Validate before replacing an existing instance.
+    super(el, options, OtpInput);
+    this.el['M_OtpInput'] = this;
+    this.options = { ...settings, pattern, length };
+    this._slots = slots;
+    this._form = el.form;
+    this._hadClass = el.classList.contains('otp-input-native');
+    this.ready = this._setup().catch(error => { this.destroy(); throw error; });
+  }
+  static get defaults(): OtpInputOptions { return { characters: 'digits', groupSize: 0 }; }
+  static init(el: HTMLInputElement, options?: Partial<OtpInputOptions>): OtpInput;
+  static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<OtpInputOptions>): OtpInput[];
+  static init(els: HTMLInputElement | InitElements<HTMLInputElement | MElement>, options: Partial<OtpInputOptions> = {}): OtpInput | OtpInput[] {
+    return super.init(els, options, OtpInput);
+  }
+  static getInstance(el: HTMLInputElement): OtpInput { return el['M_OtpInput']; }
+  private static _markup(el: HTMLInputElement): Partial<OtpInputOptions> {
+    return {
+      ...(el.dataset.otpLength !== undefined ? { length: Number(el.dataset.otpLength) } : {}),
+      ...(el.dataset.otpPattern !== undefined ? { pattern: el.dataset.otpPattern } : {}),
+      ...(el.dataset.otpGroupSize !== undefined ? { groupSize: Number(el.dataset.otpGroupSize) } : {}),
+      ...(el.dataset.otpCharacters ? { characters: el.dataset.otpCharacters as OtpInputOptions['characters'] } : {}),
+      ...(el.dataset.otpMasked !== undefined ? { masked: el.dataset.otpMasked !== 'false' } : {})
+    };
+  }
+  private _setAttribute(name: string, value: string) {
+    this._attributes.set(name, this.el.getAttribute(name));
+    this.el.setAttribute(name, value);
+  }
+  private async _setup() {
+    this._mask = MaskitoInput.init(this.el, {
+      preset: 'pattern', pattern: this.options.pattern,
+      maskOptions: { overwriteMode: 'replace', ...this.options.maskOptions, mask: this._slots.map(slot => slot.literal ?? new RegExp(slot.expression)) }
+    });
+    await this._mask.ready;
+    if (this._destroyed) return;
+    this._setAttribute('maxlength', String(this._slots.length));
+    if (!this.el.hasAttribute('pattern')) this._setAttribute('pattern', this._slots.map(slot => slot.expression).join(''));
+    if (!this.el.hasAttribute('inputmode')) this._setAttribute('inputmode', this._slots.every(slot => slot.literal !== undefined || slot.expression === '[0-9]') ? 'numeric' : 'text');
+    if (this.options.masked !== undefined) this._setAttribute('type', this.options.masked ? 'password' : 'text');
+    if (!this.el.hasAttribute('autocomplete')) this._setAttribute('autocomplete', this.el.type === 'password' ? 'off' : 'one-time-code');
+    if (!this.el.hasAttribute('spellcheck')) this._setAttribute('spellcheck', 'false');
+    if (!this.el.hasAttribute('autocapitalize')) this._setAttribute('autocapitalize', 'off');
+    const wrapper = this._wrapper = document.createElement('div');
+    wrapper.className = 'otp-input';
+    wrapper.dir = 'ltr';
+    const cells = document.createElement('div');
+    cells.className = 'otp-input-slots';
+    cells.setAttribute('aria-hidden', 'true');
+    let editableIndex = 0;
+    for (const slot of this._slots) {
+      const cell = document.createElement('span');
+      cell.className = slot.literal !== undefined ? 'otp-input-separator' : 'otp-input-slot';
+      if (slot.literal !== undefined) cell.textContent = slot.literal;
+      else {
+        if (this.options.groupSize && editableIndex && editableIndex % this.options.groupSize === 0) cell.classList.add('otp-input-group-start');
+        editableIndex++;
+      }
+      cells.append(cell);
+      this._cells.push({ slot, el: cell });
+    }
+    this.el.before(wrapper);
+    wrapper.append(this.el, cells);
+    this.el.classList.add('otp-input-native');
+    // Register after Maskito so all displays and completion events see the formatted value.
+    this.el.addEventListener('input', this._onInput);
+    for (const event of ['focus', 'blur', 'keyup', 'click', 'select']) this.el.addEventListener(event, this._onSelection);
+    this.el.addEventListener('invalid', this._onInvalid);
+    document.addEventListener('selectionchange', this._onSelection);
+    wrapper.addEventListener('pointerdown', this._onPointerDown);
+    this._form?.addEventListener('reset', this._onReset);
+    this._observer = new MutationObserver(() => this._render(false));
+    this._observer.observe(this.el, { attributes: true, attributeFilter: ['type', 'disabled', 'readonly', 'aria-invalid'] });
+    this._render(false);
+  }
+  getValue(): string { return this.el.value; }
+  /** Editable characters only; pattern separators are omitted. */
+  getUnmaskedValue(): string { return this._slots.filter(slot => slot.literal === undefined).map(slot => this.el.value[slot.index] || '').join(''); }
+  isComplete(): boolean { return new RegExp(`^(?:${this._slots.map(slot => slot.expression).join('')})$`).test(this.el.value); }
+  async setValue(value: string, emit = true): Promise<void> {
+    await this.ready;
+    if (this._destroyed) return;
+    await this._mask!.setValue(value, emit);
+    this._render(false);
+  }
+  async clear(emit = true): Promise<void> { await this.setValue('', emit); }
+  async refresh(): Promise<void> {
+    await this.ready;
+    if (this._destroyed) return;
+    await this._mask!.refresh();
+    this._render(false);
+  }
+  focus(): void { if (!this._destroyed) this.el.focus(); }
+  private _onInput = () => {
+    if (this._wrapper) this._wrapper.removeAttribute('data-invalid');
+    this._render(true);
+  };
+  private _onSelection = () => { this._render(false); };
+  private _onInvalid = () => { this._wrapper?.setAttribute('data-invalid', 'true'); };
+  private _onReset = () => {
+    clearTimeout(this._resetTimer);
+    this._resetTimer = setTimeout(() => {
+      this._wrapper?.removeAttribute('data-invalid');
+      this._render(false);
+    }, 0);
+  };
+  private _onPointerDown = (event: PointerEvent) => {
+    if (event.button !== 0 || this.el.matches(':disabled')) return;
+    const cells = this._cells.filter(cell => cell.slot.literal === undefined);
+    let nearest = cells[0], distance = Infinity;
+    for (const cell of cells) {
+      const rect = cell.el.getBoundingClientRect();
+      const next = Math.abs(event.clientX - (rect.left + rect.width / 2)) + Math.abs(event.clientY - (rect.top + rect.height / 2));
+      if (next < distance) { nearest = cell; distance = next; }
+    }
+    event.preventDefault();
+    this.el.focus();
+    const index = Math.min(nearest.slot.index, this.el.value.length);
+    this.el.setSelectionRange(index, Math.min(index + 1, this.el.value.length));
+    this._render(false);
+  };
+  private _render(emit: boolean) {
+    if (this._destroyed || !this._wrapper) return;
+    const focused = document.activeElement === this.el;
+    const start = this.el.selectionStart ?? 0, end = this.el.selectionEnd ?? start;
+    const editable = this._cells.filter(cell => cell.slot.literal === undefined);
+    const active = editable.find(cell => cell.slot.index >= start) ?? editable[editable.length - 1];
+    for (const cell of editable) {
+      const value = this.el.value[cell.slot.index] || '';
+      cell.el.textContent = value ? (this.el.type === 'password' ? '•' : value) : '';
+      cell.el.classList.toggle('is-active', focused && cell === active);
+      cell.el.classList.toggle('is-selected', focused && cell.slot.index >= start && cell.slot.index < end);
+      cell.el.classList.toggle('is-filled', !!value);
+    }
+    this._wrapper.classList.toggle('is-complete', this.isComplete());
+    const complete = this.isComplete() ? this.el.value : '';
+    const changed = complete !== this._lastComplete;
+    this._lastComplete = complete;
+    if (emit && complete && changed) {
+      this.el.dispatchEvent(new CustomEvent('otpcomplete', { bubbles: true, detail: { value: complete, unmaskedValue: this.getUnmaskedValue() } }));
+      this.options.onComplete?.(complete, this);
+    }
+  }
+  destroy(): void {
+    if (this._destroyed) return;
+    this._destroyed = true;
+    clearTimeout(this._resetTimer);
+    this._observer?.disconnect();
+    this._mask?.destroy();
+    this.el.removeEventListener('input', this._onInput);
+    for (const event of ['focus', 'blur', 'keyup', 'click', 'select']) this.el.removeEventListener(event, this._onSelection);
+    this.el.removeEventListener('invalid', this._onInvalid);
+    document.removeEventListener('selectionchange', this._onSelection);
+    this._wrapper?.removeEventListener('pointerdown', this._onPointerDown);
+    this._form?.removeEventListener('reset', this._onReset);
+    if (this._wrapper?.contains(this.el)) this._wrapper.replaceWith(this.el);
+    else this._wrapper?.remove();
+    if (!this._hadClass) this.el.classList.remove('otp-input-native');
+    for (const [name, value] of this._attributes) {
+      if (value === null) this.el.removeAttribute(name);
+      else this.el.setAttribute(name, value);
+    }
+    if (OtpInput.getInstance(this.el) === this) this.el['M_OtpInput'] = undefined;
+  }
+}

package/dist/css/materialize.colors.min.css

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.27 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.28 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */

package/dist/css/materialize.css

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.27 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.28 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
@@ -21964,6 +21964,14 @@ div.suffix.suffix-tomselect {
   color: var(--md-sys-color-inverse-surface);
 }
 
+:where(crazy-button, regular-btn) {
+  cursor: pointer;
+}
+
+:where(crazy-button[disabled], regular-btn[disabled]) {
+  cursor: default;
+}
+
 :is(crazy-button, regular-btn) {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -21974,6 +21982,7 @@ div.suffix.suffix-tomselect {
 }
 :is(crazy-button, regular-btn) > .btn, :is(crazy-button, regular-btn) > .btn-split > .btn {
   position: relative;
+  cursor: inherit;
 }
 :is(crazy-button, regular-btn) .btn > img {
   width: var(--button-icon);
@@ -23333,4 +23342,177 @@ loading-screen-btn {
     -webkit-transition: none;
     transition: none;
   }
+}
+.otp-input {
+  --otp-slot-size: 48px;
+  --otp-slot-gap: 8px;
+  --otp-slot-radius: 4px;
+  position: relative;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 100%;
+  margin-block: 8px;
+  border-radius: var(--otp-slot-radius);
+}
+.otp-input > input.otp-input-native {
+  position: absolute !important;
+  inset: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  opacity: 0;
+  font-size: 16px;
+  z-index: 1;
+}
+.otp-input .otp-input-slots {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  gap: var(--otp-slot-gap);
+}
+.otp-input .otp-input-slot {
+  display: inline-grid;
+  place-items: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 var(--otp-slot-size);
+      -ms-flex: 0 0 var(--otp-slot-size);
+          flex: 0 0 var(--otp-slot-size);
+  width: var(--otp-slot-size);
+  height: calc(var(--otp-slot-size) + 8px);
+  border: 1px solid var(--md-sys-color-on-surface-variant);
+  border-radius: var(--otp-slot-radius);
+  background: transparent;
+  color: var(--md-sys-color-on-surface);
+  font-size: 24px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  -webkit-transition: border-color 120ms ease, background-color 120ms ease, -webkit-box-shadow 120ms ease;
+  transition: border-color 120ms ease, background-color 120ms ease, -webkit-box-shadow 120ms ease;
+  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
+  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease, -webkit-box-shadow 120ms ease;
+}
+.otp-input .otp-input-slot.is-selected {
+  background: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-on-primary-container);
+}
+.otp-input .otp-input-slot.is-active {
+  border: 2px solid var(--input-color, var(--md-sys-color-primary));
+}
+.otp-input .otp-input-group-start {
+  -webkit-margin-start: var(--otp-slot-gap);
+     -moz-margin-start: var(--otp-slot-gap);
+          margin-inline-start: var(--otp-slot-gap);
+}
+.otp-input .otp-input-separator {
+  color: var(--md-sys-color-on-surface-variant);
+  white-space: pre;
+}
+.otp-input:hover:not(:has(> input:disabled)) .otp-input-slot:not(.is-active) {
+  border-color: var(--md-sys-color-on-surface);
+}
+.otp-input:has(> input:disabled) {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+.otp-input[data-invalid] .otp-input-slot, .otp-input:has(> input[aria-invalid=true]) .otp-input-slot, .otp-input:has(> input:user-invalid) .otp-input-slot {
+  border-color: var(--md-sys-color-error);
+}
+.otp-input[data-invalid] .otp-input-slot.is-active, .otp-input:has(> input[aria-invalid=true]) .otp-input-slot.is-active, .otp-input:has(> input:user-invalid) .otp-input-slot.is-active {
+  border-width: 2px;
+}
+
+@media (max-width: 600px) {
+  .otp-input {
+    --otp-slot-size: 36px;
+    --otp-slot-gap: 4px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .otp-input .otp-input-slot {
+    -webkit-transition: none;
+    transition: none;
+  }
+}
+@media (forced-colors: active) {
+  .otp-input .otp-input-slot {
+    border-color: ButtonText;
+  }
+  .otp-input .otp-input-slot.is-active {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+  .otp-input:has(> input:disabled) .otp-input-slot {
+    color: GrayText;
+    border-color: GrayText;
+  }
+}
+.input-field:has(> .otp-input) {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  margin-block: 24px;
+}
+.input-field:has(> .otp-input) > .otp-input {
+  margin: 0;
+}
+.input-field:has(> .otp-input) > label {
+  position: static;
+  -webkit-box-ordinal-group: 0;
+  -webkit-order: -1;
+      -ms-flex-order: -1;
+          order: -1;
+  -webkit-transform: none;
+          transform: none;
+  margin: 0 0 8px;
+  padding: 0;
+  font-size: 12px;
+  line-height: 1.4;
+  background: transparent;
+}
+.input-field:has(> .otp-input) > .supporting-text {
+  display: block;
+  padding-inline: 0;
+}
+.input-field:has(> .otp-input):focus-within > label {
+  color: var(--input-color);
+}
+.input-field:has(> .otp-input):has(input:disabled) > label {
+  opacity: 0.38;
+}
+.input-field:has(> .otp-input).error > label, .input-field:has(> .otp-input).error > .supporting-text, .input-field:has(> .otp-input):has(input[aria-invalid=true]) > label, .input-field:has(> .otp-input):has(input[aria-invalid=true]) > .supporting-text, .input-field:has(> .otp-input):has(.otp-input[data-invalid]) > label, .input-field:has(> .otp-input):has(.otp-input[data-invalid]) > .supporting-text, .input-field:has(> .otp-input):has(input:user-invalid) > label, .input-field:has(> .otp-input):has(input:user-invalid) > .supporting-text {
+  color: var(--md-sys-color-error);
+}
+.input-field:has(> .otp-input).error .otp-input-slot, .input-field:has(> .otp-input):has(input[aria-invalid=true]) .otp-input-slot, .input-field:has(> .otp-input):has(.otp-input[data-invalid]) .otp-input-slot, .input-field:has(> .otp-input):has(input:user-invalid) .otp-input-slot {
+  border-color: var(--md-sys-color-error);
+}
+
+.input-field:not(.outlined) > .otp-input .otp-input-slot {
+  border-width: 0 0 1px;
+  border-radius: var(--otp-slot-radius) var(--otp-slot-radius) 0 0;
+}
+.input-field:not(.outlined) > .otp-input .otp-input-slot.is-active {
+  border-width: 0 0 2px;
 }