kmaterialize 2.3.3-1.0.20 → 2.3.3-1.0.21

package/components/kanban/_kanban.scss

@@ -0,0 +1,148 @@
+.kanban-board {
+  --kanban-column-width: 20rem;
+  --kanban-gap: 1rem;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--kanban-gap);
+  width: 100%;
+  padding: 0.25rem;
+  overflow-x: auto;
+  box-sizing: border-box;
+  overscroll-behavior-x: contain;
+
+  &.kanban-wrap {
+    flex-wrap: wrap;
+    overflow-x: visible;
+  }
+}
+
+.kanban-column {
+  display: flex;
+  flex: 0 0 var(--kanban-column-width);
+  flex-direction: column;
+  min-height: 15rem;
+  padding: 0.75rem;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 0.875rem;
+  background: var(--md-sys-color-surface-variant);
+  box-sizing: border-box;
+  transition: border-color 160ms ease, background-color 160ms ease;
+
+  &.is-drag-over {
+    border-color: var(--md-sys-color-primary);
+    background: color-mix(in srgb, var(--md-sys-color-primary-container) 55%, var(--md-sys-color-surface-variant));
+  }
+}
+
+.kanban-column-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.25rem 0.25rem 0.75rem;
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.kanban-column-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.kanban-column-count {
+  display: inline-flex;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.375rem;
+  border-radius: 999px;
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  font-size: 0.75rem;
+}
+
+.kanban-column-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-height: 8rem;
+}
+
+.kanban-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  padding: 1rem;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 0.75rem;
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.14));
+  cursor: grab;
+  user-select: none;
+
+  &:active,
+  &.is-dragging {
+    cursor: grabbing;
+  }
+
+  &.is-dragging {
+    opacity: 0.45;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: 2px;
+  }
+}
+
+.kanban-card-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.kanban-card-description {
+  margin: 0;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 0.875rem;
+}
+
+.kanban-card-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 0.75rem;
+}
+
+.kanban-card-label {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  padding: 0.1875rem 0.5rem;
+  border-radius: 999px;
+  background: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+  font-size: 0.75rem;
+}
+
+.kanban-empty {
+  display: grid;
+  min-height: 5rem;
+  place-items: center;
+  border: 1px dashed var(--md-sys-color-outline);
+  border-radius: 0.625rem;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 0.875rem;
+}
+
+@media (max-width: 600px) {
+  .kanban-board {
+    --kanban-column-width: min(20rem, calc(100vw - 3rem));
+  }
+}

package/components/kanban/kanban.ts

@@ -0,0 +1,133 @@
+import { BaseOptions, Component, InitElements, MElement } from '../../src/component';
+
+export interface KanbanMoveDetail {
+  card: HTMLElement;
+  from: HTMLElement;
+  to: HTMLElement;
+}
+
+export interface KanbanOptions extends BaseOptions {
+  /** Enable native drag-and-drop interactions. */
+  draggable: boolean;
+  /** Called after a card changes column or order. */
+  onMove?: (detail: KanbanMoveDetail) => void;
+}
+
+const _defaults: KanbanOptions = {
+  draggable: true
+};
+
+/** A lightweight, dependency-free board for columns of draggable cards. */
+export class Kanban extends Component<KanbanOptions> {
+  private _draggedCard: HTMLElement | null = null;
+  private _dragSourceColumn: HTMLElement | null = null;
+
+  private _onDragStart = (event: DragEvent) => {
+    const card = (event.target as HTMLElement | null)?.closest<HTMLElement>('.kanban-card');
+    if (!card || !this.options.draggable) return;
+    this._draggedCard = card;
+    this._dragSourceColumn = card.closest<HTMLElement>('.kanban-column');
+    card.classList.add('is-dragging');
+    event.dataTransfer?.setData('text/plain', card.dataset.kanbanCard || '');
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
+  };
+
+  private _onDragOver = (event: DragEvent) => {
+    if (!this._draggedCard) return;
+    const column = (event.target as HTMLElement | null)?.closest<HTMLElement>('.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');
+  };
+
+  private _onDrop = (event: DragEvent) => {
+    if (!this._draggedCard) return;
+    const column = (event.target as HTMLElement | null)?.closest<HTMLElement>('.kanban-column');
+    if (!column || !this.el.contains(column)) return;
+    event.preventDefault();
+    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);
+    } else {
+      body.appendChild(this._draggedCard);
+    }
+    this._clearDragState();
+    this._updateCounts();
+    if (source && source !== column) this.options.onMove?.({ card: this._draggedCard, from: source, to: column });
+  };
+
+  private _onDragEnd = () => this._clearDragState();
+
+  constructor(el: HTMLElement, options: Partial<KanbanOptions>) {
+    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(): KanbanOptions {
+    return _defaults;
+  }
+
+  static init(el: HTMLElement, options?: Partial<KanbanOptions>): Kanban;
+  static init(els: InitElements<MElement>, options?: Partial<KanbanOptions>): Kanban[];
+  static init(els: HTMLElement | InitElements<MElement>, options: Partial<KanbanOptions> = {}): Kanban | Kanban[] {
+    return super.init(els, options, Kanban);
+  }
+
+  static getInstance(el: HTMLElement): Kanban {
+    return el['M_Kanban'];
+  }
+
+  private _prepareMarkup() {
+    this.el.setAttribute('role', 'region');
+    this.el.querySelectorAll<HTMLElement>('.kanban-column').forEach((column) => {
+      column.setAttribute('role', 'group');
+      const body = column.querySelector<HTMLElement>('.kanban-column-body');
+      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;
+      });
+    });
+    this._updateCounts();
+  }
+
+  private _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);
+  }
+
+  private _clearDragState() {
+    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;
+  }
+
+  private _updateCounts() {
+    this.el.querySelectorAll<HTMLElement>('.kanban-column').forEach((column) => {
+      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);
+    });
+  }
+
+  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/dist/css/materialize.colors.min.css

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.20 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.21 (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.20 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.21 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
@@ -13863,6 +13863,227 @@ button.btn-floating {
             transform: translateY(-0.25rem);
   }
 }
+.kanban-board {
+  --kanban-column-width: 20rem;
+  --kanban-gap: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  gap: var(--kanban-gap);
+  width: 100%;
+  padding: 0.25rem;
+  overflow-x: auto;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overscroll-behavior-x: contain;
+}
+.kanban-board.kanban-wrap {
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  overflow-x: visible;
+}
+
+.kanban-column {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 var(--kanban-column-width);
+      -ms-flex: 0 0 var(--kanban-column-width);
+          flex: 0 0 var(--kanban-column-width);
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  min-height: 15rem;
+  padding: 0.75rem;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 0.875rem;
+  background: var(--md-sys-color-surface-variant);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-transition: border-color 160ms ease, background-color 160ms ease;
+  transition: border-color 160ms ease, background-color 160ms ease;
+}
+.kanban-column.is-drag-over {
+  border-color: var(--md-sys-color-primary);
+  background: color-mix(in srgb, var(--md-sys-color-primary-container) 55%, var(--md-sys-color-surface-variant));
+}
+
+.kanban-column-header {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.25rem 0.25rem 0.75rem;
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.kanban-column-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.kanban-column-count {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  padding: 0 0.375rem;
+  border-radius: 999px;
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  font-size: 0.75rem;
+}
+
+.kanban-column-body {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 1 auto;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 0.75rem;
+  min-height: 8rem;
+}
+
+.kanban-card {
+  position: relative;
+  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;
+  gap: 0.625rem;
+  padding: 1rem;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 0.75rem;
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  -webkit-box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.14));
+          box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.14));
+  cursor: -webkit-grab;
+  cursor: grab;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.kanban-card:active, .kanban-card.is-dragging {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+.kanban-card.is-dragging {
+  opacity: 0.45;
+}
+.kanban-card:focus-visible {
+  outline: 2px solid var(--md-sys-color-primary);
+  outline-offset: 2px;
+}
+
+.kanban-card-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.kanban-card-description {
+  margin: 0;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 0.875rem;
+}
+
+.kanban-card-meta {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  gap: 0.5rem;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 0.75rem;
+}
+
+.kanban-card-label {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-align-self: flex-start;
+      -ms-flex-item-align: start;
+          align-self: flex-start;
+  padding: 0.1875rem 0.5rem;
+  border-radius: 999px;
+  background: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+  font-size: 0.75rem;
+}
+
+.kanban-empty {
+  display: grid;
+  min-height: 5rem;
+  place-items: center;
+  border: 1px dashed var(--md-sys-color-outline);
+  border-radius: 0.625rem;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 0.875rem;
+}
+
+@media (max-width: 600px) {
+  .kanban-board {
+    --kanban-column-width: min(20rem, calc(100vw - 3rem));
+  }
+}
 .collapsible {
   padding-left: 0;
   list-style-type: none;