kmaterialize 2.3.3-1.0.21 → 2.3.3-1.0.23

package/components/kanban/_kanban.scss

@@ -71,6 +71,7 @@
 }
 
 .kanban-card {
+  --kanban-card-accent: var(--md-sys-color-primary);
   position: relative;
   display: flex;
   flex-direction: column;
@@ -83,6 +84,8 @@
   box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.14));
   cursor: grab;
   user-select: none;
+  overflow: hidden;
+  transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
 
   &:active,
   &.is-dragging {
@@ -91,12 +94,78 @@
 
   &.is-dragging {
     opacity: 0.45;
+    box-shadow: var(--md-sys-elevation-level3, 0 8px 18px rgba(0, 0, 0, 0.2));
   }
 
   &:focus-visible {
     outline: 2px solid var(--md-sys-color-primary);
     outline-offset: 2px;
   }
+
+  &.kanban-card-accent {
+    &::after {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: 0.25rem;
+      background: var(--kanban-card-accent);
+      content: '';
+      pointer-events: none;
+    }
+  }
+
+  &.kanban-card-accent-top::after {
+    top: 0;
+    bottom: auto;
+    left: 0;
+    width: 100%;
+    height: 0.25rem;
+  }
+
+  &.kanban-card-accent-right::after {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: auto;
+    width: 0.25rem;
+    height: 100%;
+  }
+
+  &.kanban-card-accent-left::after {
+    top: 0;
+    right: auto;
+    bottom: 0;
+    left: 0;
+    width: 0.25rem;
+    height: 100%;
+  }
+
+  &.is-disabled,
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.55;
+    filter: saturate(0.55);
+  }
+}
+
+.kanban-drag-image {
+  position: fixed !important;
+  top: -10000px !important;
+  left: -10000px !important;
+  z-index: -1;
+  pointer-events: none;
+  transform: rotate(2deg) scale(1.015);
+  transform-origin: center;
+}
+
+.kanban-drop-preview {
+  min-height: 4rem;
+  box-sizing: border-box;
+  border: 2px dashed var(--md-sys-color-primary);
+  border-radius: 0.75rem;
+  background: color-mix(in srgb, var(--md-sys-color-primary-container) 45%, transparent);
+  pointer-events: none;
 }
 
 .kanban-card-title {

package/components/kanban/kanban.js

@@ -0,0 +1,168 @@
+import { Component } from '../../src/component';
+const _defaults = {
+    draggable: true
+};
+/** A lightweight, dependency-free board for columns of draggable cards. */
+export class Kanban extends Component {
+    _draggedCard = null;
+    _dragSourceColumn = null;
+    _dropPreview = null;
+    _dragImage = null;
+    _previewHeight = 64;
+    _onDragStart = (event) => {
+        const card = event.target?.closest('.kanban-card');
+        if (!card || !this.options.draggable || card.classList.contains('is-disabled') || card.getAttribute('aria-disabled') === 'true')
+            return;
+        this._draggedCard = card;
+        this._dragSourceColumn = card.closest('.kanban-column');
+        this._previewHeight = Math.max(64, Math.round(card.getBoundingClientRect().height));
+        card.classList.add('is-dragging');
+        this._dragImage = card.cloneNode(true);
+        this._dragImage.classList.remove('is-dragging');
+        this._dragImage.classList.add('kanban-drag-image');
+        this._dragImage.setAttribute('aria-hidden', 'true');
+        this._dragImage.style.width = `${card.getBoundingClientRect().width}px`;
+        document.body.appendChild(this._dragImage);
+        event.dataTransfer?.setDragImage(this._dragImage, card.offsetWidth / 2, card.offsetHeight / 2);
+        event.dataTransfer?.setData('text/plain', card.dataset.kanbanCard || '');
+        if (event.dataTransfer)
+            event.dataTransfer.effectAllowed = 'move';
+    };
+    _onDragOver = (event) => {
+        if (!this._draggedCard)
+            return;
+        const column = event.target?.closest('.kanban-column');
+        if (!column || !this.el.contains(column))
+            return;
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'move';
+        this.el.querySelectorAll('.kanban-column.is-drag-over').forEach((item) => item.classList.remove('is-drag-over'));
+        column.classList.add('is-drag-over');
+        this._updateDropPreview(column, event);
+    };
+    _onDrop = (event) => {
+        if (!this._draggedCard)
+            return;
+        const column = event.target?.closest('.kanban-column');
+        if (!column || !this.el.contains(column))
+            return;
+        event.preventDefault();
+        const body = column.querySelector('.kanban-column-body') || column;
+        const targetCard = event.target?.closest('.kanban-card');
+        const source = this._dragSourceColumn;
+        const movedCard = this._draggedCard;
+        if (this._dropPreview?.parentElement === body) {
+            body.insertBefore(movedCard, this._dropPreview);
+            this._dropPreview.remove();
+        }
+        else if (targetCard && targetCard !== movedCard && targetCard.parentElement === body) {
+            body.insertBefore(movedCard, targetCard);
+        }
+        else {
+            body.appendChild(movedCard);
+        }
+        this._clearDragState();
+        this._updateCounts();
+        if (source && source !== column)
+            this.options.onMove?.({ card: movedCard, from: source, to: column });
+    };
+    _onDragEnd = () => this._clearDragState();
+    constructor(el, options) {
+        super(el, options, Kanban);
+        this.options = { ...Kanban.defaults, ...options };
+        this.el['M_Kanban'] = this;
+        this._prepareMarkup();
+        if (this.options.draggable)
+            this._bindEvents();
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    static init(els, options = {}) {
+        return super.init(els, options, Kanban);
+    }
+    static getInstance(el) {
+        return el['M_Kanban'];
+    }
+    _prepareMarkup() {
+        this.el.setAttribute('role', 'region');
+        this.el.querySelectorAll('.kanban-column').forEach((column) => {
+            column.setAttribute('role', 'group');
+            const body = column.querySelector('.kanban-column-body');
+            if (body)
+                body.setAttribute('role', 'list');
+            column.querySelectorAll('.kanban-card').forEach((card) => {
+                card.setAttribute('role', 'listitem');
+                const disabled = card.classList.contains('is-disabled') || card.getAttribute('aria-disabled') === 'true';
+                card.setAttribute('tabindex', disabled ? '-1' : '0');
+                if (disabled) {
+                    card.setAttribute('aria-disabled', 'true');
+                    card.draggable = false;
+                }
+                else if (this.options.draggable) {
+                    card.draggable = true;
+                }
+            });
+        });
+        this._updateCounts();
+    }
+    _bindEvents() {
+        this.el.addEventListener('dragstart', this._onDragStart);
+        this.el.addEventListener('dragover', this._onDragOver);
+        this.el.addEventListener('drop', this._onDrop);
+        this.el.addEventListener('dragend', this._onDragEnd);
+    }
+    _clearDragState() {
+        this._dragImage?.remove();
+        this._dragImage = null;
+        this._dropPreview?.remove();
+        this._dropPreview = null;
+        this._draggedCard?.classList.remove('is-dragging');
+        this.el.querySelectorAll('.kanban-column.is-drag-over').forEach((item) => item.classList.remove('is-drag-over'));
+        this._draggedCard = null;
+        this._dragSourceColumn = null;
+        this._previewHeight = 64;
+    }
+    _updateCounts() {
+        this.el.querySelectorAll('.kanban-column').forEach((column) => {
+            const count = column.querySelector('.kanban-column-count');
+            const body = column.querySelector('.kanban-column-body');
+            if (count && body)
+                count.textContent = String(body.querySelectorAll(':scope > .kanban-card').length);
+            const empty = body?.querySelector('.kanban-empty');
+            if (empty && body)
+                empty.hidden = body.querySelectorAll(':scope > .kanban-card').length > 0;
+        });
+    }
+    _updateDropPreview(column, event) {
+        const body = column.querySelector('.kanban-column-body') || column;
+        const targetCard = event.target?.closest('.kanban-card');
+        if (targetCard === this._draggedCard)
+            return;
+        if (!this._dropPreview) {
+            this._dropPreview = document.createElement('div');
+            this._dropPreview.className = 'kanban-drop-preview';
+            this._dropPreview.setAttribute('aria-hidden', 'true');
+        }
+        // Keep the preview tied to the dragged card's original height. Using the
+        // hovered card's height makes the placeholder jump as the pointer crosses
+        // cards with different content lengths.
+        this._dropPreview.style.height = `${this._previewHeight}px`;
+        if (targetCard && targetCard.parentElement === body) {
+            const box = targetCard.getBoundingClientRect();
+            body.insertBefore(this._dropPreview, event.clientY < box.top + box.height / 2 ? targetCard : targetCard.nextSibling);
+        }
+        else if (this._dropPreview.parentElement !== body) {
+            body.appendChild(this._dropPreview);
+        }
+    }
+    destroy() {
+        this._clearDragState();
+        this.el.removeEventListener('dragstart', this._onDragStart);
+        this.el.removeEventListener('dragover', this._onDragOver);
+        this.el.removeEventListener('drop', this._onDrop);
+        this.el.removeEventListener('dragend', this._onDragEnd);
+        delete this.el['M_Kanban'];
+    }
+}

package/components/kanban/kanban.ts

@@ -21,13 +21,24 @@ const _defaults: KanbanOptions = {
 export class Kanban extends Component<KanbanOptions> {
   private _draggedCard: HTMLElement | null = null;
   private _dragSourceColumn: HTMLElement | null = null;
+  private _dropPreview: HTMLElement | null = null;
+  private _dragImage: HTMLElement | null = null;
+  private _previewHeight = 64;
 
   private _onDragStart = (event: DragEvent) => {
     const card = (event.target as HTMLElement | null)?.closest<HTMLElement>('.kanban-card');
-    if (!card || !this.options.draggable) return;
+    if (!card || !this.options.draggable || card.classList.contains('is-disabled') || card.getAttribute('aria-disabled') === 'true') return;
     this._draggedCard = card;
     this._dragSourceColumn = card.closest<HTMLElement>('.kanban-column');
+    this._previewHeight = Math.max(64, Math.round(card.getBoundingClientRect().height));
     card.classList.add('is-dragging');
+    this._dragImage = card.cloneNode(true) as HTMLElement;
+    this._dragImage.classList.remove('is-dragging');
+    this._dragImage.classList.add('kanban-drag-image');
+    this._dragImage.setAttribute('aria-hidden', 'true');
+    this._dragImage.style.width = `${card.getBoundingClientRect().width}px`;
+    document.body.appendChild(this._dragImage);
+    event.dataTransfer?.setDragImage(this._dragImage, card.offsetWidth / 2, card.offsetHeight / 2);
     event.dataTransfer?.setData('text/plain', card.dataset.kanbanCard || '');
     if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
   };
@@ -40,6 +51,7 @@ export class Kanban extends Component<KanbanOptions> {
     if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
     this.el.querySelectorAll('.kanban-column.is-drag-over').forEach((item) => item.classList.remove('is-drag-over'));
     column.classList.add('is-drag-over');
+    this._updateDropPreview(column, event);
   };
 
   private _onDrop = (event: DragEvent) => {
@@ -50,15 +62,18 @@ export class Kanban extends Component<KanbanOptions> {
     const body = column.querySelector<HTMLElement>('.kanban-column-body') || column;
     const targetCard = (event.target as HTMLElement | null)?.closest<HTMLElement>('.kanban-card');
     const source = this._dragSourceColumn;
-    if (targetCard && targetCard !== this._draggedCard && targetCard.parentElement === body) {
-      const box = targetCard.getBoundingClientRect();
-      body.insertBefore(this._draggedCard, event.clientY < box.top + box.height / 2 ? targetCard : targetCard.nextSibling);
+    const movedCard = this._draggedCard;
+    if (this._dropPreview?.parentElement === body) {
+      body.insertBefore(movedCard, this._dropPreview);
+      this._dropPreview.remove();
+    } else if (targetCard && targetCard !== movedCard && targetCard.parentElement === body) {
+      body.insertBefore(movedCard, targetCard);
     } else {
-      body.appendChild(this._draggedCard);
+      body.appendChild(movedCard);
     }
     this._clearDragState();
     this._updateCounts();
-    if (source && source !== column) this.options.onMove?.({ card: this._draggedCard, from: source, to: column });
+    if (source && source !== column) this.options.onMove?.({ card: movedCard, from: source, to: column });
   };
 
   private _onDragEnd = () => this._clearDragState();
@@ -93,8 +108,14 @@ export class Kanban extends Component<KanbanOptions> {
       if (body) body.setAttribute('role', 'list');
       column.querySelectorAll<HTMLElement>('.kanban-card').forEach((card) => {
         card.setAttribute('role', 'listitem');
-        card.setAttribute('tabindex', '0');
-        if (this.options.draggable) card.draggable = true;
+        const disabled = card.classList.contains('is-disabled') || card.getAttribute('aria-disabled') === 'true';
+        card.setAttribute('tabindex', disabled ? '-1' : '0');
+        if (disabled) {
+          card.setAttribute('aria-disabled', 'true');
+          card.draggable = false;
+        } else if (this.options.draggable) {
+          card.draggable = true;
+        }
       });
     });
     this._updateCounts();
@@ -108,10 +129,15 @@ export class Kanban extends Component<KanbanOptions> {
   }
 
   private _clearDragState() {
+    this._dragImage?.remove();
+    this._dragImage = null;
+    this._dropPreview?.remove();
+    this._dropPreview = null;
     this._draggedCard?.classList.remove('is-dragging');
     this.el.querySelectorAll('.kanban-column.is-drag-over').forEach((item) => item.classList.remove('is-drag-over'));
     this._draggedCard = null;
     this._dragSourceColumn = null;
+    this._previewHeight = 64;
   }
 
   private _updateCounts() {
@@ -119,9 +145,32 @@ export class Kanban extends Component<KanbanOptions> {
       const count = column.querySelector<HTMLElement>('.kanban-column-count');
       const body = column.querySelector<HTMLElement>('.kanban-column-body');
       if (count && body) count.textContent = String(body.querySelectorAll(':scope > .kanban-card').length);
+      const empty = body?.querySelector<HTMLElement>('.kanban-empty');
+      if (empty && body) empty.hidden = body.querySelectorAll(':scope > .kanban-card').length > 0;
     });
   }
 
+  private _updateDropPreview(column: HTMLElement, event: DragEvent) {
+    const body = column.querySelector<HTMLElement>('.kanban-column-body') || column;
+    const targetCard = (event.target as HTMLElement | null)?.closest<HTMLElement>('.kanban-card');
+    if (targetCard === this._draggedCard) return;
+    if (!this._dropPreview) {
+      this._dropPreview = document.createElement('div');
+      this._dropPreview.className = 'kanban-drop-preview';
+      this._dropPreview.setAttribute('aria-hidden', 'true');
+    }
+    // Keep the preview tied to the dragged card's original height. Using the
+    // hovered card's height makes the placeholder jump as the pointer crosses
+    // cards with different content lengths.
+    this._dropPreview.style.height = `${this._previewHeight}px`;
+    if (targetCard && targetCard.parentElement === body) {
+      const box = targetCard.getBoundingClientRect();
+      body.insertBefore(this._dropPreview, event.clientY < box.top + box.height / 2 ? targetCard : targetCard.nextSibling);
+    } else if (this._dropPreview.parentElement !== body) {
+      body.appendChild(this._dropPreview);
+    }
+  }
+
   destroy() {
     this._clearDragState();
     this.el.removeEventListener('dragstart', this._onDragStart);

package/components/loading/_loading.scss

@@ -0,0 +1,68 @@
+// A spinner surrounding stationary content, inspired by LoadingScreenBtn.
+.loading {
+  --loading-size: 7rem;
+  --loading-color: var(--md-sys-color-primary);
+  --loading-background: var(--md-sys-color-surface-container, var(--md-sys-color-surface));
+  --loading-thickness: 3px;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: var(--loading-size);
+  height: var(--loading-size);
+  vertical-align: middle;
+  border-radius: 50%;
+  background: var(--loading-background);
+  color: var(--loading-color);
+  isolation: isolate;
+
+  > .preloader-wrapper {
+    position: absolute;
+    inset: 5%;
+    width: 90%;
+    height: 90%;
+    pointer-events: none;
+
+    .spinner-layer { border-color: var(--loading-color); }
+    .circle-clipper .circle { border-width: var(--loading-thickness); }
+  }
+
+  &:not(.active) > .preloader-wrapper {
+    visibility: hidden;
+
+    &, .spinner-layer, .circle-clipper .circle { animation: none; }
+  }
+
+  &.loading-small { --loading-size: 4rem; }
+  &.loading-large { --loading-size: 10rem; }
+
+  // A stylesheet display rule must never override the native hidden attribute.
+  &[hidden] { display: none; }
+
+  .loading-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 72%;
+    height: 72%;
+    overflow: hidden;
+    border-radius: inherit;
+
+    img, svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    .material-icons { font-size: calc(var(--loading-size) * 0.35); }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .loading > .preloader-wrapper {
+    &, .spinner-layer, .circle-clipper .circle { animation: none; }
+  }
+}

package/components/loading/loading.ts

@@ -0,0 +1,104 @@
+import { BaseOptions, Component, InitElements, MElement } from '../../src/component';
+
+export interface LoadingOptions extends BaseOptions {
+  /** Start animating immediately. */
+  active: boolean;
+  /** Accessible status while work is in progress. */
+  label: string;
+  /** Accessible status when work has finished. */
+  completeLabel: string;
+}
+
+const _defaults: LoadingOptions = {
+  active: true,
+  label: 'Loading…',
+  completeLabel: 'Ready'
+};
+
+/** A circular loading indicator with an optional centered logo or icon. */
+export class Loading extends Component<LoadingOptions> {
+  private _originalAttributes: Record<string, string | null> = {};
+  private _originalActive: boolean;
+  private _originalLoading: boolean;
+  private _generatedSpinner: HTMLElement | null = null;
+
+  constructor(el: HTMLElement, options: Partial<LoadingOptions> = {}) {
+    super(el, options, Loading);
+    this.options = { ...Loading.defaults, ...options };
+    this.el['M_Loading'] = this;
+    this._originalActive = this.el.classList.contains('active');
+    this._originalLoading = this.el.classList.contains('loading');
+    for (const name of ['role', 'aria-live', 'aria-busy', 'aria-label']) {
+      this._originalAttributes[name] = this.el.getAttribute(name);
+    }
+    // Preserve an accessible name supplied in the markup unless overridden.
+    if (options.label === undefined && this.el.hasAttribute('aria-label')) {
+      this.options.label = this.el.getAttribute('aria-label');
+    }
+    this.el.classList.add('loading');
+    // Reuse authored Preloader markup; generate it for the compact JS API.
+    if (!this.el.querySelector(':scope > .preloader-wrapper')) {
+      this._generatedSpinner = document.createElement('div');
+      this._generatedSpinner.className = 'preloader-wrapper active';
+      this._generatedSpinner.setAttribute('aria-hidden', 'true');
+      this._generatedSpinner.innerHTML = `<div class="spinner-layer">
+        <div class="circle-clipper left"><div class="circle"></div></div>
+        <div class="gap-patch"><div class="circle"></div></div>
+        <div class="circle-clipper right"><div class="circle"></div></div>
+      </div>`;
+      this.el.appendChild(this._generatedSpinner);
+    }
+    if (!this.el.hasAttribute('role')) this.el.setAttribute('role', 'status');
+    if (!this.el.hasAttribute('aria-live')) this.el.setAttribute('aria-live', 'polite');
+    if (this.options.active) this.start();
+    else this.stop();
+  }
+
+  static get defaults(): LoadingOptions {
+    return _defaults;
+  }
+
+  static init(el: HTMLElement, options?: Partial<LoadingOptions>): Loading;
+  static init(els: InitElements<MElement>, options?: Partial<LoadingOptions>): Loading[];
+  static init(
+    els: HTMLElement | InitElements<MElement>,
+    options: Partial<LoadingOptions> = {}
+  ): Loading | Loading[] {
+    return super.init(els, options, Loading);
+  }
+
+  static getInstance(el: HTMLElement): Loading {
+    return el['M_Loading'];
+  }
+
+  get isActive(): boolean {
+    return this.el.classList.contains('active');
+  }
+
+  /** Show the animated ring and announce the loading status. */
+  start(label: string = this.options.label): void {
+    this.el.setAttribute('aria-label', label);
+    this.el.setAttribute('aria-busy', 'true');
+    this.el.classList.add('active');
+  }
+
+  /** Hide the ring, keeping the centered content visible. */
+  stop(label: string = this.options.completeLabel): void {
+    this.el.setAttribute('aria-label', label);
+    this.el.setAttribute('aria-busy', 'false');
+    this.el.classList.remove('active');
+  }
+
+  /** Restore the original markup state and remove the instance. */
+  destroy(): void {
+    this._generatedSpinner?.remove();
+    this._generatedSpinner = null;
+    for (const [name, value] of Object.entries(this._originalAttributes)) {
+      if (value === null) this.el.removeAttribute(name);
+      else this.el.setAttribute(name, value);
+    }
+    this.el.classList.toggle('active', this._originalActive);
+    this.el.classList.toggle('loading', this._originalLoading);
+    delete this.el['M_Loading'];
+  }
+}

package/components/loading/loadingSpec.js

@@ -0,0 +1,102 @@
+describe('Loading', function () {
+  let fixture;
+  let el;
+
+  beforeEach(function () {
+    fixture = document.createElement('div');
+    fixture.innerHTML = '<div class="loading" aria-label="Fetching assets"><span class="loading-content"><img src="data:," alt=""></span></div>';
+    document.body.appendChild(fixture);
+    el = fixture.firstElementChild;
+  });
+
+  afterEach(function () {
+    fixture.querySelectorAll('.loading').forEach(function (element) {
+      M.Loading.getInstance(element)?.destroy();
+    });
+    fixture.remove();
+  });
+
+  it('starts and stops without replacing centered content', function () {
+    const content = el.firstElementChild;
+    const loading = M.Loading.init(el);
+    expect(loading.isActive).toBeTrue();
+    expect(el.getAttribute('aria-label')).toBe('Fetching assets');
+    expect(el.getAttribute('aria-busy')).toBe('true');
+    loading.stop('Assets ready');
+    expect(loading.isActive).toBeFalse();
+    expect(el.getAttribute('aria-label')).toBe('Assets ready');
+    expect(el.getAttribute('aria-busy')).toBe('false');
+    expect(getComputedStyle(el.querySelector('.preloader-wrapper')).visibility).toBe('hidden');
+    expect(getComputedStyle(el.querySelector('.circle')).animationName).toBe('none');
+    expect(getComputedStyle(content).visibility).toBe('visible');
+    loading.start('Refreshing');
+    expect(loading.isActive).toBeTrue();
+    expect(el.getAttribute('aria-label')).toBe('Refreshing');
+    expect(el.firstElementChild).toBe(content);
+  });
+
+  it('supports inactive initialization and customized status labels', function () {
+    const loading = M.Loading.init(el, { active: false, label: 'Syncing', completeLabel: 'Synced' });
+    expect(loading.isActive).toBeFalse();
+    expect(el.getAttribute('aria-label')).toBe('Synced');
+    loading.start();
+    expect(el.getAttribute('aria-label')).toBe('Syncing');
+    loading.stop();
+    expect(el.getAttribute('aria-label')).toBe('Synced');
+  });
+
+  it('restores original attributes and content when destroyed or reinitialized', function () {
+    el.classList.add('active');
+    el.setAttribute('role', 'img');
+    el.setAttribute('aria-live', 'off');
+    el.setAttribute('aria-busy', 'false');
+    const original = el.outerHTML;
+    const first = M.Loading.init(el, { label: 'First' });
+    const second = M.Loading.init(el, { active: false });
+    expect(second).not.toBe(first);
+    expect(M.Loading.getInstance(el)).toBe(second);
+    second.destroy();
+    expect(el.outerHTML).toBe(original);
+    expect(M.Loading.getInstance(el)).toBeUndefined();
+  });
+
+  it('initializes collections and respects the AutoInit opt-out', function () {
+    fixture.insertAdjacentHTML('beforeend', '<div class="loading"></div><div class="loading no-autoinit"></div>');
+    M.AutoInit(fixture, { Loading: { active: false } });
+    expect(M.Loading.getInstance(el).isActive).toBeFalse();
+    expect(M.Loading.getInstance(fixture.children[1])).toBeDefined();
+    expect(M.Loading.getInstance(fixture.children[2])).toBeUndefined();
+    const instances = M.Loading.init(fixture.querySelectorAll('.loading'));
+    expect(instances.length).toBe(3);
+    expect(instances.every(instance => instance.isActive)).toBeTrue();
+  });
+
+  it('uses the same animations as Preloader and preserves authored spinner markup', function () {
+    const loading = M.Loading.init(el);
+    const spinner = el.querySelector('.preloader-wrapper');
+    const reference = spinner.cloneNode(true);
+    fixture.appendChild(reference);
+    for (const selector of [null, '.spinner-layer', '.circle-clipper.left .circle', '.circle-clipper.right .circle']) {
+      const actual = getComputedStyle(selector ? spinner.querySelector(selector) : spinner);
+      const expected = getComputedStyle(selector ? reference.querySelector(selector) : reference);
+      expect(actual.animationName).toBe(expected.animationName);
+      expect(actual.animationDuration).toBe(expected.animationDuration);
+      expect(actual.animationTimingFunction).toBe(expected.animationTimingFunction);
+    }
+    expect(getComputedStyle(el.querySelector('.loading-content')).animationName).toBe('none');
+    loading.destroy();
+    expect(el.querySelector('.preloader-wrapper')).toBeNull();
+    el.appendChild(reference);
+    const original = el.outerHTML;
+    M.Loading.init(el);
+    expect(el.querySelectorAll('.preloader-wrapper').length).toBe(1);
+    M.Loading.getInstance(el).destroy();
+    expect(el.outerHTML).toBe(original);
+  });
+
+  it('keeps hidden indicators hidden', function () {
+    M.Loading.init(el);
+    el.hidden = true;
+    expect(getComputedStyle(el).display).toBe('none');
+  });
+});