kmaterialize 2.3.3-1.0.27 → 2.3.3-1.0.29

package/components/breadcrumb/_breadcrumb.scss

@@ -1,10 +1,21 @@
 .breadcrumb-wrapper {
   display: flex;
   align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+  white-space: nowrap;
+
+  // Support both direct breadcrumbs and an optional inner wrapper.
+  > * { flex-shrink: 0; }
+
+  .breadcrumb,
+  .breadcrumb > * { flex-shrink: 0; }
 }
 
 .breadcrumb {
   display: inline-flex;
+  vertical-align: middle;
   align-items: center;
 
   i,
@@ -18,10 +29,11 @@
 
   &:before {
     content: '\E5CC';
+    opacity: 0.6;
     font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
   }
 
   &:first-child:before {
-    visibility: hidden;
+    display: none;
   }
 }

package/components/collapsible/_collapsible.scss

@@ -36,7 +36,7 @@
     outline: 0
   }
 
-  i {
+  > i {
     width: 2rem;
     font-size: 1.6rem;
     display: inline-block;

package/components/extensions/divider.scss

@@ -22,6 +22,11 @@
   &.divider-middle {
     margin-inline: var(--divider-inset);
   }
+  &.divider-dashed,
+  &.divider-dotted {
+    --divider-color: var(--md-sys-color-outline);
+    --divider-thickness: 1.5px;
+  }
   &.divider-strong {
     --divider-color: var(--md-sys-color-outline);
   }

package/components/extensions/tooltip-factory.test.mjs

@@ -0,0 +1,35 @@
+import { afterEach, expect, test, vi } from 'vitest';
+import { createTooltipWith } from './tooltip-factory';
+
+afterEach(() => vi.unstubAllGlobals());
+
+for (const shape of ['function', 'default', 'nested-default']) {
+  test(`creates and cleans up a tooltip from a ${shape} export`, () => {
+    vi.stubGlobal('window', { matchMedia: () => ({ matches: false }) });
+    const document = { addEventListener: vi.fn(), removeEventListener: vi.fn() };
+    vi.stubGlobal('document', document);
+    const destroy = vi.fn();
+    const tooltip = { hide: vi.fn(), destroy };
+    const factory = vi.fn(() => tooltip);
+    const plugin = { name: 'animateFill' };
+    const module = shape === 'function' ? factory : shape === 'default'
+      ? { default: factory, animateFill: plugin }
+      : { default: { default: factory, animateFill: plugin } };
+    const target = {};
+    const result = createTooltipWith(module, undefined, target, 'classic', { content: 'Home & Tools' });
+    expect(factory).toHaveBeenCalledWith(target, expect.objectContaining({ content: 'Home & Tools' }));
+    if (shape !== 'function') expect(factory.mock.calls[0][1].plugins).toEqual([plugin]);
+    document.addEventListener.mock.calls[0][1]({ key: 'Escape' });
+    expect(tooltip.hide).toHaveBeenCalledOnce();
+    result.destroy();
+    expect(destroy).toHaveBeenCalledOnce();
+    expect(document.removeEventListener).toHaveBeenCalledWith('keydown', expect.any(Function));
+  });
+}
+
+test('rejects missing or cyclic exports with a useful error', () => {
+  const cyclic = {}; cyclic.default = cyclic;
+  for (const value of [undefined, {}, { default: {} }, cyclic]) {
+    expect(() => createTooltipWith(value, undefined, {}, 'classic')).toThrow('did not export a tooltip function');
+  }
+});

package/components/extensions/tooltip-factory.ts

@@ -11,10 +11,24 @@ export function createTooltipWith(
   style: TooltipStyle,
   options: Partial<Props> = {},
 ): Instance {
+  // Dynamic imports of CommonJS builds can wrap Tippy in one or more
+  // default exports. Static ESM imports and browser globals are callable already.
+  let resolved: unknown = factory;
+  const seen = new Set<unknown>();
+  while (resolved && typeof resolved === "object" && !seen.has(resolved)) {
+    seen.add(resolved);
+    const module = resolved as { default?: unknown; animateFill?: typeof animateFill };
+    fill ??= module.animateFill;
+    resolved = module.default;
+  }
+  if (typeof resolved !== "function") {
+    throw new TypeError('kmaterialize: "tippy.js" did not export a tooltip function.');
+  }
+  const create = resolved as typeof tippy;
   const reducedMotion = window.matchMedia(
     "(prefers-reduced-motion: reduce)",
   ).matches;
-  const instance = factory(target, {
+  const instance = create(target, {
     animateFill: !reducedMotion && !!fill,
     arrow: false,
     plugins: fill ? [fill] : [],

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 {
@@ -18,6 +20,19 @@
   &[size="small"] .btn { --button-height: 30px; }
   &[size="extra-large"] .btn { --button-height: 100px; }
 }
+// Headings center their button and text as a row instead of aligning their
+// different font baselines. Keep this default easy to override in app layouts.
+:where(h1, h2, h3, h4, h5, h6):has(> :where(crazy-button, regular-btn)) {
+  display: flex;
+  align-items: center;
+  > :where(crazy-button, regular-btn) {
+    flex-shrink: 0;
+    // Legacy inline-block overrides must not inherit the heading's line box.
+    // The inner .btn defines its own line-height for its label and icon.
+    line-height: 0;
+  }
+}
+
 .btn-group > :is(crazy-button, regular-btn) {
   flex: 1 1 0;
   min-width: 0;

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/components/tabs/emptyTabsSpec.js

@@ -0,0 +1,50 @@
+describe('Tabs with no tab links', () => {
+  let element;
+  let instance;
+
+  beforeEach(() => {
+    element = document.createElement('ul');
+    element.className = 'tabs';
+    document.body.appendChild(element);
+  });
+
+  afterEach(() => {
+    if (instance) instance.destroy();
+    instance = null;
+    element.remove();
+  });
+
+  [false, true].forEach((swipeable) => {
+    it(`handles an empty list with swipeable=${swipeable}`, () => {
+      instance = M.Tabs.init(element, { swipeable });
+      expect(M.Tabs.getInstance(element)).toBe(instance);
+      expect(instance.index).toBe(-1);
+      expect(element.querySelector('.indicator')).toBeNull();
+      expect(() => {
+        instance.updateTabIndicator();
+        instance.select('missing');
+        window.dispatchEvent(new Event('resize'));
+        element.click();
+        instance.destroy();
+      }).not.toThrow();
+      expect(M.Tabs.getInstance(element)).toBeUndefined();
+      instance = null;
+    });
+  });
+
+  it('ignores placeholder markup without tab anchors', () => {
+    element.innerHTML = '<li class="tab">Loading…</li>';
+    instance = M.Tabs.init(element);
+    expect(instance.index).toBe(-1);
+  });
+
+  it('can initialize normally after links are added', () => {
+    instance = M.Tabs.init(element);
+    element.innerHTML = '<li class="tab"><a href="#missing-panel">First</a></li>';
+    instance = M.Tabs.init(element);
+    expect(instance.index).toBe(0);
+    expect(element.querySelector('a').classList.contains('active')).toBeTrue();
+    expect(element.querySelector('.indicator')).not.toBeNull();
+    expect(() => instance.updateTabIndicator()).not.toThrow();
+  });
+});

package/components/tabs/tabs.ts

@@ -40,7 +40,7 @@ export class Tabs extends Component<TabsOptions> {
   _tabWidth: number;
   _tabsWidth: number;
   _tabsCarousel: Carousel;
-  _activeTabLink: HTMLAnchorElement;
+  _activeTabLink: HTMLAnchorElement | null;
   _content: HTMLElement;
 
   constructor(el: HTMLElement, options: Partial<TabsOptions>) {
@@ -55,6 +55,8 @@ export class Tabs extends Component<TabsOptions> {
     this._tabLinks = this.el.querySelectorAll('li.tab > a');
     this._index = 0;
     this._setupActiveTabLink();
+    // Empty/unfinished tab markup is a valid inert instance. Reinitialize after adding links.
+    if (!this._activeTabLink) return;
     if (this.options.swipeable) {
       this._setupSwipeableTabs();
     } else {
@@ -100,9 +102,9 @@ export class Tabs extends Component<TabsOptions> {
 
   destroy() {
     this._removeEventHandlers();
-    this._indicator.parentNode.removeChild(this._indicator);
+    this._indicator?.remove();
     if (this.options.swipeable) {
-      this._teardownSwipeableTabs();
+      if (this._tabsCarousel) this._teardownSwipeableTabs();
     } else {
       this._teardownNormalTabs();
     }
@@ -134,6 +136,7 @@ export class Tabs extends Component<TabsOptions> {
   }
 
   _handleWindowResize = () => {
+    if (!this._activeTabLink || !this._indicator) return;
     this._setTabsAndTabWidth();
     if (this._tabWidth !== 0 && this._tabsWidth !== 0) {
       this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px';
@@ -152,7 +155,7 @@ export class Tabs extends Component<TabsOptions> {
     }
 
     // Handle click on tab link only
-    if (!tabLink || !tab.classList.contains('tab')) return;
+    if (!tabLink || !tab || !tab.classList.contains('tab')) return;
     // is disabled?
     if (tab.classList.contains('disabled')) {
       e.preventDefault();
@@ -221,6 +224,10 @@ export class Tabs extends Component<TabsOptions> {
       }
       this._activeTabLink = activeTabLink as HTMLAnchorElement;
     }
+    if (!this._activeTabLink) {
+      this._index = -1;
+      return;
+    }
     Array.from(this._tabLinks).forEach((a: HTMLAnchorElement) => a.classList.remove('active'));
     this._activeTabLink.classList.add('active');
 
@@ -324,6 +331,7 @@ export class Tabs extends Component<TabsOptions> {
    * the indicator position is not correct.
    */
   updateTabIndicator() {
+    if (!this._activeTabLink || !this._indicator) return;
     this._setTabsAndTabWidth();
     this._animateIndicator(this._index);
   }

package/components/textfield/_input-fields.scss

@@ -371,3 +371,54 @@ textarea {
     text-indent: -9999px;
   }
 }
+
+// Native legend cuts a real notch: no background-color patch is needed.
+.input-field.outlined.has-outlined-notch,
+.input-field.outlined > .select-wrapper.has-outlined-notch {
+  > input:not([type=checkbox]):not([type=radio]), > textarea {
+    border-color: transparent;
+    &:focus:not([readonly]), &:disabled, &[readonly] { border-color: transparent; }
+    + label,
+    &:focus:not([readonly]) + label { background-color: transparent; }
+  }
+  > .input-outline {
+    position: absolute;
+    pointer-events: none;
+    box-sizing: border-box;
+    min-width: 0;
+    margin: 0;
+    padding: 0 12px;
+    border: 1px solid var(--md-sys-color-on-surface-variant);
+    border-radius: 4px;
+    background: transparent;
+    > legend {
+      float: none;
+      width: auto;
+      display: block;
+      max-width: 0.01px;
+      height: 16px;
+      padding: 0;
+      font: inherit;
+      font-size: 12px;
+      line-height: 16px;
+      visibility: hidden;
+      white-space: nowrap;
+      overflow: hidden;
+      > span { display: inline-block; padding: 0 3px; }
+    }
+  }
+  > input:focus:not([readonly]) ~ .input-outline,
+  > textarea:focus:not([readonly]) ~ .input-outline {
+    border-width: 2px;
+    border-color: var(--input-color);
+    padding-inline: 11px;
+  }
+  > :is(input, textarea):is(:focus:not([readonly]), :not([placeholder=' ']), :not(:placeholder-shown)) ~ .input-outline > legend {
+    max-width: 100%;
+  }
+  > :is(input, textarea):is(:disabled, [readonly]:not(.select-dropdown)) ~ .input-outline {
+    border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
+  }
+  > :is(input, textarea).invalid ~ .input-outline,
+  &.error > .input-outline { border-color: var(--md-sys-color-error); }
+}