kmaterialize 2.3.3-1.0.28 → 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

@@ -20,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/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); }
+}

package/components/textfield/_select.scss

@@ -119,11 +119,11 @@ select:disabled {
 .input-field > .select-wrapper:has(.hide-select > select[placeholder]:not([placeholder=""])) > label,
 .input-field > .select-wrapper:focus-within > label {
   position: absolute !important;
-  top: -12px !important;
+  top: 4px !important;
   left: 16px !important;
-  padding: 0 4px !important;
+  padding: 0 !important;
   font-size: 16px !important;
-  background: var(--md-sys-color-surface);
+  background: transparent;
   transform: scale(0.75) !important;
 }
 
@@ -156,3 +156,37 @@ select:disabled {
     padding-left: 1rem;
   }
 }
+
+// Generated select inputs are readonly for typing, but remain interactive.
+// They must not inherit the filled input's extra top padding or disabled outline.
+.input-field.outlined > .select-wrapper {
+  &:focus-within { outline: none; }
+  > input.select-dropdown,
+  > input.select-dropdown:not([type=checkbox]):not([type=radio]):not(:focus):not(:placeholder-shown) {
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-right: 40px;
+  }
+  &.has-outlined-notch {
+    > input.select-dropdown + label { background: transparent; }
+    > .input-outline { border-color: var(--md-sys-color-on-surface-variant); }
+    &:focus-within > .input-outline {
+      border-color: var(--input-color);
+      border-width: 2px;
+      padding-inline: 11px;
+      > legend { max-width: 100%; }
+    }
+    &.disabled > .input-outline {
+      border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
+    }
+  }
+}
+
+// Filled selects share the text field's in-field floating label layout.
+.input-field:not(.outlined) > .select-wrapper:has(> label) {
+  > input.select-dropdown:not([type=checkbox]):not([type=radio]):not(:placeholder-shown),
+  &:focus-within > input.select-dropdown:not([type=checkbox]):not([type=radio]) {
+    padding-top: 12px;
+    padding-right: 40px;
+  }
+}

package/components/textfield/forms.ts

@@ -1,3 +1,4 @@
+import { initOutlinedNotches } from './outlined-notch';
 import { Utils } from '../../src/utils';
 
 export class Forms {
@@ -110,6 +111,7 @@ export class Forms {
   }
 
   static Init() {
+    initOutlinedNotches();
     if (typeof document !== 'undefined')
       document?.addEventListener('DOMContentLoaded', () => {
         document.addEventListener('change', (e: KeyboardEvent) => {

package/components/textfield/outlined-notch.ts

@@ -0,0 +1,81 @@
+/** Decorative native fieldset notches; the original input and label remain accessible. */
+export function initOutlinedNotches() {
+  if (typeof document === 'undefined') return;
+  const start = () => {
+    const selector = '.input-field.outlined, .input-field.outlined > .select-wrapper';
+    const entries = new Map<HTMLElement, { input: HTMLElement; outline: HTMLFieldSetElement }>();
+    const position = (field: HTMLElement) => {
+      const entry = entries.get(field);
+      if (!entry) return;
+      const { input, outline } = entry;
+      outline.style.left = `${input.offsetLeft}px`;
+      outline.style.top = `${input.offsetTop - 8}px`;
+      outline.style.width = `${input.offsetWidth}px`;
+      outline.style.height = `${input.offsetHeight + 8}px`;
+    };
+    const resize = new ResizeObserver(records => records.forEach(record => {
+      const field = (record.target as HTMLElement).parentElement;
+      if (field) position(field);
+    }));
+    const sync = (field: HTMLElement) => {
+      const input = field.querySelector<HTMLElement>(':scope > input:not([type=checkbox]):not([type=radio]):not([type=hidden]), :scope > textarea');
+      const label = input?.nextElementSibling;
+      const old = entries.get(field);
+      if (!field.isConnected || !field.matches(selector) || !input || label?.tagName !== 'LABEL') {
+        if (old) {
+          resize.unobserve(old.input);
+          old.outline.remove();
+          entries.delete(field);
+          field.classList.remove('has-outlined-notch');
+        }
+        return;
+      }
+      if (old && old.input !== input) {
+        resize.unobserve(old.input);
+        old.outline.remove();
+        entries.delete(field);
+      }
+      let entry = entries.get(field);
+      if (!entry) {
+        const outline = document.createElement('fieldset');
+        outline.className = 'input-outline';
+        outline.setAttribute('aria-hidden', 'true');
+        const legend = document.createElement('legend');
+        legend.appendChild(document.createElement('span'));
+        outline.appendChild(legend);
+        entry = { input, outline };
+        entries.set(field, entry);
+        field.appendChild(outline);
+        field.classList.add('has-outlined-notch');
+        resize.observe(input);
+      }
+      const text = entry.outline.querySelector('span');
+      if (text.textContent !== label.textContent) text.textContent = label.textContent;
+      position(field);
+    };
+    document.querySelectorAll<HTMLElement>(selector).forEach(sync);
+    const observer = new MutationObserver(records => {
+      const fields = new Set<HTMLElement>();
+      for (const record of records) {
+        const target = record.target instanceof Element ? record.target : record.target.parentElement;
+        if (target?.closest('.input-outline')) continue;
+        const field = target?.closest<HTMLElement>('.input-field');
+        if (field) fields.add(field);
+        for (const node of record.addedNodes) {
+          if (!(node instanceof HTMLElement) || node.matches('.input-outline')) continue;
+          if (node.matches(selector)) fields.add(node);
+          node.querySelectorAll<HTMLElement>(selector).forEach(el => fields.add(el));
+        }
+      }
+      // Release observers for detached partials; reinsertion creates a fresh outline.
+      for (const field of entries.keys()) if (!field.isConnected) fields.add(field);
+      for (const field of [...fields]) {
+        field.querySelectorAll<HTMLElement>(selector).forEach(el => fields.add(el));
+      }
+      fields.forEach(sync);
+    });
+    observer.observe(document.body, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ['class', 'placeholder', 'type'] });
+  };
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start, { once: true });
+  else start();
+}

package/components/textfield/outlinedNotchSpec.js

@@ -0,0 +1,35 @@
+describe('Outlined field background-independent notch', () => {
+  let field;
+  const settle = () => new Promise(resolve => setTimeout(resolve, 60));
+  beforeEach(async () => {
+    field = document.createElement('div');
+    field.className = 'input-field outlined';
+    field.style.background = 'linear-gradient(to right, #30393d, #546e7a)';
+    field.innerHTML = '<input id="notch-regression" placeholder=" "><label for="notch-regression">Email subject</label>';
+    document.body.append(field);
+    await settle();
+  });
+  afterEach(() => field.remove());
+  it('keeps the accessible label and opens a real notch on focus', async () => {
+    const input = field.querySelector('input');
+    const label = field.querySelector('label');
+    const outline = field.querySelector('.input-outline');
+    expect(input.labels[0]).toBe(label);
+    expect(outline.getAttribute('aria-hidden')).toBe('true');
+    expect(outline.querySelector('legend').getBoundingClientRect().width).toBeLessThan(1);
+    input.focus();
+    await settle();
+    expect(outline.querySelector('legend').getBoundingClientRect().width).toBeGreaterThan(10);
+    expect(getComputedStyle(label).backgroundColor).toBe('rgba(0, 0, 0, 0)');
+    expect(getComputedStyle(input).borderTopColor).toBe('rgba(0, 0, 0, 0)');
+  });
+  it('updates label text and removes the outline when switching to a filled field', async () => {
+    field.querySelector('label').textContent = 'New label';
+    await settle();
+    expect(field.querySelector('legend').textContent).toBe('New label');
+    expect(field.querySelectorAll('.input-outline').length).toBe(1);
+    field.classList.remove('outlined');
+    await settle();
+    expect(field.querySelector('.input-outline')).toBeNull();
+  });
+});

package/components/textfield/outlinedSelectSpec.js

@@ -0,0 +1,25 @@
+describe('Outlined FormSelect notch', () => {
+  it('centers the display text and keeps the floating label transparent', async () => {
+    const field = document.createElement('div');
+    field.className = 'input-field outlined';
+    field.innerHTML = '<select id="outlined-select-test"><option value="">Choose your option</option><option value="one">One</option></select><label for="outlined-select-test">Issue type</label>';
+    document.body.append(field);
+    const select = field.querySelector('select');
+    const instance = M.FormSelect.init(select);
+    try {
+      await new Promise(resolve => setTimeout(resolve, 60));
+      const input = field.querySelector('input.select-dropdown');
+      const label = field.querySelector('label');
+      const outline = field.querySelector('.input-outline');
+      expect(getComputedStyle(input).paddingTop).toBe('0px');
+      expect(outline).not.toBeNull();
+      expect(getComputedStyle(label).backgroundColor).toBe('rgba(0, 0, 0, 0)');
+      input.focus();
+      expect(getComputedStyle(outline).borderTopWidth).toBe('2px');
+      expect(getComputedStyle(label).backgroundColor).toBe('rgba(0, 0, 0, 0)');
+    } finally {
+      instance.destroy();
+      field.remove();
+    }
+  });
+});

package/components/textfield/select.ts

@@ -255,7 +255,7 @@ export class FormSelect extends Component<FormSelectOptions> {
     // Add input dropdown
     this.input = document.createElement('input');
     this.input.id = 'm_select-input-' + Utils.guid();
-    this.input.classList.add('select-dropdown', 'dropdown-trigger');
+    this.input.classList.add('select-dropdown', 'dropdown-trigger', 'no-autoinit');
     this.input.type = 'text';
     this.input.readOnly = true;
     this.input.setAttribute('data-target', this.dropdownOptions.id);

package/components/textfield/selectDropdownOwnershipSpec.js

@@ -0,0 +1,26 @@
+describe('FormSelect dropdown ownership', () => {
+  [false, true].forEach(multiple => {
+    it(`keeps its dropdown instance during generic initialization (multiple=${multiple})`, async () => {
+      const field = document.createElement('div');
+      field.className = 'input-field outlined';
+      field.innerHTML = `<select ${multiple ? 'multiple' : ''}><option value="1">One</option><option value="2">Two</option></select>`;
+      document.body.append(field);
+      const select = field.querySelector('select');
+      const instance = M.FormSelect.init(select, { dropdownOptions: { inDuration: 0, outDuration: 0 } });
+      try {
+        M.Dropdown.init(field.querySelectorAll('.dropdown-trigger:not(.no-autoinit)'));
+        expect(M.Dropdown.getInstance(instance.input)).toBe(instance.dropdown);
+        instance.input.click();
+        await new Promise(resolve => setTimeout(resolve, 30));
+        instance.dropdownOptions.querySelectorAll('li')[1].click();
+        await new Promise(resolve => setTimeout(resolve, 30));
+        expect(instance.getSelectedValues()).toContain('2');
+        expect(instance.dropdown.isOpen).toBe(multiple);
+        expect(getComputedStyle(instance.dropdownOptions).display === 'none').toBe(!multiple);
+      } finally {
+        instance.destroy();
+        field.remove();
+      }
+    });
+  });
+});

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

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