kmaterialize 2.3.3-1.0.29 → 2.3.3-1.0.30

package/components/breadcrumb/_breadcrumb.scss

@@ -18,7 +18,9 @@
   vertical-align: middle;
   align-items: center;
 
-  i,
+  i { font-size: 24px; }
+
+  // Preserve other icon fonts' weights (Font Awesome solid requires 900).
   i.material-icons, i.material-symbols-outlined,
   i.material-symbols-rounded, i.material-symbols-sharp,
   &:before {

package/components/dropdown/dropdown.ts

@@ -244,11 +244,14 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
   };
 
   _handleDocumentClick = (e: MouseEvent) => {
-    const target = <HTMLElement>e.target;
-    if (this.options.closeOnClick && target.closest('.dropdown-content') && !this.isTouchMoving) {
+    // The original event path survives menu rerenders during option selection.
+    const path = e.composedPath();
+    const insideMenu = path.includes(this.dropdownEl);
+    const insideTrigger = path.includes(this.el);
+    if (this.options.closeOnClick && insideMenu && !this.isTouchMoving) {
       // isTouchMoving to check if scrolling on mobile.
       this.close();
-    } else if (!target.closest('.dropdown-content') && !target.closest('.dropdown-trigger')) {
+    } else if (!insideMenu && !insideTrigger) {
       // Do this one frame later so that if the element clicked also triggers _handleClick
       // For example, if a label for a select was clicked, that we don't close/open the dropdown
       setTimeout(() => {

package/components/extensions/chart-print.test.mjs

@@ -0,0 +1,31 @@
+import { expect, test } from 'vitest';
+import { chartPrintLayout } from './chart-print';
+
+test('preserves A3 landscape defaults and avoids enlarging small charts', () => {
+  expect(chartPrintLayout(100, 100)).toMatchObject({format:'A3',orientation:'landscape',scale:1});
+});
+test('fits A4 landscape and portrait within 10mm margins', () => {
+  const landscape = chartPrintLayout(2000, 1000, {format:'A4',orientation:'landscape'});
+  const portrait = chartPrintLayout(2000, 1000, {format:'A4',orientation:'portrait'});
+  expect(landscape.scale).toBeCloseTo(277*96/25.4/2000);
+  expect(portrait.scale).toBeCloseTo(190*96/25.4/2000);
+});
+test('scales tall charts by height and supports Letter', () => {
+  expect(chartPrintLayout(100,2000,{format:'letter',orientation:'portrait'}).scale).toBeCloseTo(259.4*96/25.4/2000);
+});
+test('rejects invalid options', () => {
+  expect(()=>chartPrintLayout(100,100,{format:'invalid'})).toThrow(/format/);
+  expect(()=>chartPrintLayout(100,100,{orientation:'sideways'})).toThrow(/orientation/);
+});
+
+test('centers small and scaled charts within the printable area', () => {
+  for (const orientation of ['portrait', 'landscape']) {
+    for (const [width,height] of [[100,100],[1800,3000]]) {
+      const layout=chartPrintLayout(width,height,{format:'A4',orientation});
+      expect(layout.left).toBeGreaterThanOrEqual(0);
+      expect(layout.top).toBeGreaterThanOrEqual(0);
+      expect(layout.left*2+width*layout.scale).toBeCloseTo(layout.printableWidth);
+      expect(layout.top*2+height*layout.scale).toBeCloseTo(layout.printableHeight);
+    }
+  }
+});

package/components/extensions/chart-print.ts

@@ -1,12 +1,41 @@
 export interface ChartPrintOptions {
   /** PDF-only theme. Does not change the application theme. Defaults to light. */
   theme?: 'light' | 'dark';
+  /** Paper format. Defaults to A3. */
+  format?: 'A0' | 'A1' | 'A2' | 'A3' | 'A4' | 'A5' | 'A6' | 'letter' | 'legal' | 'tabloid';
+  /** Page orientation. Defaults to landscape. */
+  orientation?: 'portrait' | 'landscape';
+}
+
+const paperSizes = {
+  A0: [841, 1189], A1: [594, 841], A2: [420, 594], A3: [297, 420],
+  A4: [210, 297], A5: [148, 210], A6: [105, 148],
+  letter: [215.9, 279.4], legal: [215.9, 355.6], tabloid: [279.4, 431.8]
+} as const;
+
+export function chartPrintLayout(width: number, height: number, options: ChartPrintOptions = {}) {
+  const format = options.format ?? 'A3';
+  const orientation = options.orientation ?? 'landscape';
+  if (!Object.prototype.hasOwnProperty.call(paperSizes, format)) throw new TypeError('Invalid PDF paper format.');
+  if (orientation !== 'portrait' && orientation !== 'landscape') throw new TypeError('Invalid PDF orientation.');
+  const [short, long] = paperSizes[format];
+  const pageWidth = orientation === 'landscape' ? long : short;
+  const pageHeight = orientation === 'landscape' ? short : long;
+  const printableWidth = (pageWidth - 20) * 96 / 25.4;
+  const printableHeight = (pageHeight - 20) * 96 / 25.4;
+  const scale = Math.min(1, printableWidth / Math.max(1, width), printableHeight / Math.max(1, height));
+  return { format, orientation, scale, printableWidth, printableHeight,
+    left: (printableWidth - width * scale) / 2,
+    top: (printableHeight - height * scale) / 2 };
+
 }
 
 /** Print a full-size snapshot, without changing the live chart or its zoom. */
 export async function printChart(stage: HTMLElement, title: string, options: ChartPrintOptions = {}): Promise<void> {
   const theme = options.theme ?? 'light';
   if (theme !== 'light' && theme !== 'dark') throw new TypeError('Invalid PDF theme.');
+  const width = stage.offsetWidth, height = stage.offsetHeight;
+  const { format, orientation } = chartPrintLayout(width, height, options);
   // Open synchronously from the button click so popup blockers allow the preview.
   const preview = window.open('', '_blank');
   if (!preview) throw new Error('Allow popups to open the PDF print preview.');
@@ -43,14 +72,11 @@ export async function printChart(stage: HTMLElement, title: string, options: Cha
     doc.head.append(clone);
     return ready;
   });
-  const width = stage.offsetWidth, height = stage.offsetHeight;
-  // A3 landscape, 10 mm margins. Shrink large charts to one page.
-  const scale = Math.min(1, (400 * 96 / 25.4) / width, (277 * 96 / 25.4) / height);
   const style = doc.createElement('style');
-  style.textContent = `@page { size: A3 landscape; margin: 10mm; } html, body { margin: 0; padding: 0; } body { background: ${theme === 'light' ? 'white' : 'var(--md-sys-color-surface)'}; color: var(--md-sys-color-on-surface); } * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }`;
+  style.textContent = `@page { size: ${format} ${orientation}; margin: 10mm; } html, body { margin: 0; padding: 0; } body { background: ${theme === 'light' ? 'white' : 'var(--md-sys-color-surface)'}; color: var(--md-sys-color-on-surface); } * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }`;
   doc.head.append(style);
   snapshot.style.setProperty('zoom', '1');
-  snapshot.style.transform = `scale(${scale})`;
+  snapshot.style.transform = 'none';
   snapshot.style.transformOrigin = 'top left';
   snapshot.style.position = 'absolute';
   snapshot.style.left = '0'; snapshot.style.top = '0';
@@ -59,10 +85,33 @@ export async function printChart(stage: HTMLElement, title: string, options: Cha
     handle.style.opacity = '0';
   });
   const page = doc.createElement('div');
-  page.style.cssText = `position:relative;width:${width * scale}px;height:${height * scale}px;overflow:hidden`;
+  page.style.cssText = `position:relative;width:${width}px;height:${height}px;overflow:hidden`;
   page.append(snapshot);
   doc.body.replaceChildren(page);
   await Promise.all(resources);
   await doc.fonts.ready;
-  if (!preview.closed) { preview.focus(); preview.print(); }
+  if (!preview.closed) {
+    // Center the actual cards and connectors, excluding unused canvas space.
+    const boxes = Array.from(snapshot.querySelectorAll<HTMLElement>('.org-chart-team')).map(panel => ({
+      x: panel.offsetLeft, y: panel.offsetTop, width: panel.offsetWidth, height: panel.offsetHeight
+    }));
+    const links = snapshot.querySelector<SVGSVGElement>('.org-chart-links');
+    if (links?.childElementCount) {
+      const box = links.getBBox();
+      if (box.width > 0 || box.height > 0) boxes.push(box);
+    }
+    const left = boxes.length ? Math.min(...boxes.map(box => box.x)) - 8 : 0;
+    const top = boxes.length ? Math.min(...boxes.map(box => box.y)) - 8 : 0;
+    const contentWidth = boxes.length ? Math.max(...boxes.map(box => box.x + box.width)) - left + 8 : width;
+    const contentHeight = boxes.length ? Math.max(...boxes.map(box => box.y + box.height)) - top + 8 : height;
+    const layout = chartPrintLayout(contentWidth, contentHeight, options);
+    // Round down very slightly to avoid a blank second page from print rounding.
+    page.style.width = `${Math.floor(layout.printableWidth * 100) / 100}px`;
+    page.style.height = `${Math.floor(layout.printableHeight * 100) / 100}px`;
+    snapshot.style.transform = `scale(${layout.scale})`;
+    snapshot.style.left = `${layout.left - left * layout.scale}px`;
+    snapshot.style.top = `${layout.top - top * layout.scale}px`;
+    preview.focus();
+    preview.print();
+  }
 }

package/components/extensions/org-chart.scss

@@ -5,6 +5,8 @@
   max-height: 680px;
   border: 1px solid var(--md-sys-color-outline-variant);
   border-radius: 24px;
+  // Clip native scrollbars to the same rounded boundary as the chart.
+  clip-path: inset(0 round 24px);
   background-color: var(--md-sys-color-surface);
   color: var(--md-sys-color-on-surface);
   background-image: radial-gradient(var(--md-sys-color-outline-variant) 1px, transparent 1px);
@@ -49,6 +51,7 @@
 }
 .org-chart-team {
   position: absolute;
+  z-index: 2;
   width: 248px;
   padding: 8px;
   border: 1px solid var(--md-sys-color-outline-variant);
@@ -97,6 +100,9 @@
   &:last-child { margin-bottom: 0; }
 }
 .org-chart-avatar {
+  overflow: hidden;
+  min-width: 0;
+  > img { display: block; width: 100%; height: 100%; min-width: 0; object-fit: cover; }
   display: grid;
   place-items: center;
   flex: 0 0 38px;

package/components/extensions/org-chart.ts

@@ -12,13 +12,29 @@ export interface OrgChartAppearance {
   accent?: string;
   accentPosition?: "top" | "right" | "bottom" | "left";
 }
-export interface OrgChartTeam extends OrgChartAppearance { id: string; name: string; x: number; y: number }
-export interface OrgChartPerson extends OrgChartAppearance { id: string; teamId: string; name: string; role?: string }
+export interface OrgChartTeam extends OrgChartAppearance { id: string; name: string; x?: number; y?: number }
+export interface OrgChartPerson extends OrgChartAppearance {
+  id: string;
+  teamId: string;
+  name: string;
+  role?: string;
+  /** Custom avatar text; defaults to initials derived from name. */
+  avatarText?: string;
+  /** Image URL. A failed image falls back to avatarText or initials. */
+  avatarImage?: string;
+  /** How the image fills the avatar. Defaults to cover. */
+  avatarFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+}
 export interface OrgChartLink { from: string; to: string; fromType?: "person" | "team"; toType?: "person" | "team"; label?: string }
 export interface OrgChartData { teams: OrgChartTeam[]; people: OrgChartPerson[]; links: OrgChartLink[] }
 export interface OrgChartOptions {
   data: OrgChartData;
+  /** Shared movement default. Individual movement options take precedence. */
   draggable?: boolean;
+  /** Allow team movement. Defaults to draggable, then true. */
+  draggableTeams?: boolean;
+  /** Allow person reordering and movement between teams. Defaults to draggable, then true. */
+  draggablePeople?: boolean;
   /** Enable mouse/touch connection ports on cards and groups. Defaults to true. */
   connectable?: boolean;
   /** Allow inline link-label editing. Defaults to false. */
@@ -32,7 +48,12 @@ export interface OrgChartOptions {
 }
 
 const svgNS = "http://www.w3.org/2000/svg";
-const copy = (data: OrgChartData): OrgChartData => JSON.parse(JSON.stringify(data));
+type PositionedOrgChartData = Omit<OrgChartData, 'teams'> & { teams: (OrgChartTeam & { x: number; y: number })[] };
+const copy = (data: OrgChartData): PositionedOrgChartData => {
+  const result = JSON.parse(JSON.stringify(data));
+  result.teams.forEach((team: OrgChartTeam) => { team.x ??= 24; team.y ??= 24; });
+  return result;
+};
 const element = <K extends keyof HTMLElementTagNameMap>(tag: K, className: string, text?: string) => {
   const el = document.createElement(tag);
   el.className = className;
@@ -42,10 +63,13 @@ const element = <K extends keyof HTMLElementTagNameMap>(tag: K, className: strin
 
 /** Materialize organization chart; no graph dependency. */
 export class OrgChart {
+  private get canDragTeams(): boolean { return this.options.draggableTeams ?? this.options.draggable ?? true; }
+  private get canDragPeople(): boolean { return this.options.draggablePeople ?? this.options.draggable ?? true; }
   private zoom = 1;
   private labelEditor?: { index: number; input: HTMLInputElement };
   private static instances = new WeakMap<HTMLElement, OrgChart>();
-  private data: OrgChartData;
+  private data: PositionedOrgChartData;
+  private autoPositions = new Map<string, { x: boolean; y: boolean }>();
   private stage = element("div", "org-chart-stage");
   private svg = document.createElementNS(svgNS, "svg");
   private summary = element("div", "org-chart-summary");
@@ -71,6 +95,7 @@ export class OrgChart {
     this.validate(options.data);
     this.zoom = this.clampZoom(options.zoom ?? 1);
     OrgChart.getInstance(el)?.destroy();
+    this.rememberMissingPositions(options.data);
     this.data = copy(options.data);
     this.originalNodes = Array.from(el.childNodes);
     this.hadClass = el.classList.contains("org-chart");
@@ -144,6 +169,7 @@ export class OrgChart {
   setData(data: OrgChartData): void {
     this.validate(data);
     this.endDrag();
+    this.rememberMissingPositions(data);
     this.data = copy(data);
     this.render();
     this.options.onChange?.(this.getData());
@@ -166,9 +192,25 @@ export class OrgChart {
   private validate(data: OrgChartData): void {
     const teams = new Set<string>();
     const people = new Set<string>();
-    for (const team of data.teams) {
-      if (!team.id || teams.has(team.id) || !team.name.trim() || !Number.isFinite(team.x) || !Number.isFinite(team.y) || team.x < 0 || team.y < 0)
-        throw new Error("Teams need unique IDs, a name, and finite, non-negative coordinates.");
+    const groups = new Map<string, { name: string; index: number }[]>();
+    data.teams.forEach((team, index) => {
+      const group = groups.get(team.id) || [];
+      group.push({ name: team.name, index });
+      groups.set(team.id, group);
+    });
+    const duplicates = [...groups].filter(([, group]) => group.length > 1);
+    if (duplicates.length) {
+      throw new Error('Duplicate team IDs: ' + duplicates.map(([id, group]) =>
+        `${JSON.stringify(id)}: ${group.map(team => `${JSON.stringify(team.name)} (teams[${team.index}])`).join(', ')}`
+      ).join('; ') + '. Each team must have a unique ID.');
+    }
+    for (const [index, team] of data.teams.entries()) {
+      if (!team.id || typeof team.name !== 'string' || !team.name.trim())
+        throw new Error(`Invalid team at teams[${index}] (id=${JSON.stringify(team.id)}): a non-empty ID and name are required.`);
+      for (const axis of ['x', 'y'] as const) {
+        if (team[axis] != null && (!Number.isFinite(team[axis]) || team[axis] < 0))
+          throw new Error(`Invalid ${axis} for team ${JSON.stringify(team.name)} (id=${JSON.stringify(team.id)}, teams[${index}]): ${String(team[axis])}. Supply a finite, non-negative coordinate or omit it for automatic placement.`);
+      }
       teams.add(team.id);
     }
     for (const person of data.people) {
@@ -214,10 +256,10 @@ export class OrgChart {
       const header = element("button", "org-chart-team-handle");
       header.type = "button";
       header.dataset.team = team.id;
-      header.disabled = this.options.draggable === false;
+      header.disabled = !this.canDragTeams;
       header.setAttribute("aria-label", `${team.name}, ${members.length} people. Drag or use arrow keys to move; Shift moves faster.`);
       header.append(element("span", "org-chart-team-name", team.name), element("span", "org-chart-count", String(members.length)));
-      if (this.options.draggable !== false) {
+      if (this.canDragTeams) {
         const icon = element("i", "material-icons org-chart-drag-icon", "drag_indicator");
         icon.setAttribute("aria-hidden", "true");
         header.prepend(icon);
@@ -229,8 +271,18 @@ export class OrgChart {
         this.applyAppearance(card, person);
         card.dataset.orgPerson = person.id;
         const initials = person.name.trim().split(/\s+/).slice(0, 2).map(part => Array.from(part)[0]).join("");
-        const avatar = element("span", "org-chart-avatar", initials);
+        const avatarText = person.avatarText ?? initials;
+        const avatar = element("span", "org-chart-avatar", avatarText);
         avatar.setAttribute("aria-hidden", "true");
+        if (person.avatarImage) {
+          const image = document.createElement('img');
+          image.alt = '';
+          image.draggable = false;
+          image.style.objectFit = person.avatarFit ?? 'cover';
+          image.addEventListener('error', () => avatar.replaceChildren(document.createTextNode(avatarText)), { once: true });
+          image.src = person.avatarImage;
+          avatar.replaceChildren(image);
+        }
         const details = element("div", "org-chart-person-details");
         details.append(element("strong", "org-chart-person-name", person.name));
         if (person.role) details.append(element("span", "org-chart-person-role", person.role));
@@ -254,9 +306,9 @@ export class OrgChart {
       list.append(element("li", "", `${from.name} → ${to.name}: ${link.label || "Connected to"}`));
     }
     this.summary.append(element("h2", "", "Relationships"), list);
-    this.removeCardHandles = enableCardHandles(this.el, {
+    this.removeCardHandles = !this.canDragPeople ? undefined : enableCardHandles(this.el, {
       cardSelector: '.org-chart-person', dropSelector: '.org-chart-team',
-      enabled: () => this.options.draggable !== false,
+      enabled: () => this.canDragPeople,
       onMove: (card, _from, to) => {
         const person = this.data.people.find(person => person.id === card.dataset.orgPerson)!;
         person.teamId = to.dataset.orgTeam!;
@@ -286,7 +338,34 @@ export class OrgChart {
     return port;
   }
 
+  private rememberMissingPositions(data: OrgChartData): void {
+    this.autoPositions.clear();
+    for (const team of data.teams) {
+      if (team.x == null || team.y == null)
+        this.autoPositions.set(team.id, { x: team.x == null, y: team.y == null });
+    }
+  }
+
+  private placeAutomaticTeams(): void {
+    const placed = this.data.teams.filter(team => !this.autoPositions.has(team.id));
+    for (const team of this.data.teams) {
+      const missing = this.autoPositions.get(team.id);
+      if (!missing) continue;
+      // Place beyond occupied bounds; measured dimensions include all team members.
+      // Keep any authored coordinate, including zero.
+      if (missing.x) team.x = missing.y ? 24 : Math.max(24, ...placed.map(other =>
+        other.x + this.panels.get(other.id)!.offsetWidth + 48));
+      if (missing.y) team.y = Math.max(24, ...placed.map(other =>
+        other.y + this.panels.get(other.id)!.offsetHeight + 48));
+      const panel = this.panels.get(team.id)!;
+      panel.style.left = `${team.x}px`;
+      panel.style.top = `${team.y}px`;
+      placed.push(team);
+    }
+  }
+
   private draw(): void {
+    this.placeAutomaticTeams();
     const vertical = this.options.orientation === "vertical";
     const width = Math.max(vertical ? 0 : 900, ...this.data.teams.map(team => team.x + this.panels.get(team.id)!.offsetWidth + 80));
     const height = Math.max(560, ...this.data.teams.map(team => team.y + this.panels.get(team.id)!.offsetHeight + 80));
@@ -448,7 +527,7 @@ export class OrgChart {
   }
 
   private startDrag = (event: PointerEvent): void => {
-    if (this.options.draggable === false || event.button !== 0 || this.drag) return;
+    if (!this.canDragTeams || event.button !== 0 || this.drag) return;
     const handle = (event.target as HTMLElement).closest<HTMLElement>("[data-team]");
     if (!handle) return;
     const team = this.data.teams.find(team => team.id === handle.dataset.team)!;
@@ -472,7 +551,7 @@ export class OrgChart {
   };
 
   private moveWithKeyboard = (event: KeyboardEvent): void => {
-    if (this.options.draggable === false) return;
+    if (!this.canDragTeams) return;
     const handle = (event.target as HTMLElement).closest<HTMLElement>("[data-team]");
     const directions: Record<string, [number, number]> = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };
     if (!handle || !directions[event.key]) return;
@@ -485,6 +564,7 @@ export class OrgChart {
   };
 
   private move(id: string, x: number, y: number): void {
+    this.autoPositions.delete(id);
     const team = this.data.teams.find(team => team.id === id)!;
     team.x = Math.max(24, Math.round(x));
     team.y = Math.max(24, Math.round(y));

package/components/extensions/orgChartAvatarSpec.js

@@ -0,0 +1,22 @@
+describe('OrgChart custom avatars', () => {
+  it('renders custom text and a fitted image with a text fallback', () => {
+    const host = document.createElement('div'); document.body.append(host);
+    const chart = M.OrgChart.init(host, {connectable:false,data:{teams:[{id:'t',name:'Team'}],people:[
+      {id:'a',teamId:'t',name:'Alex Morgan',avatarText:'UX'},
+      {id:'b',teamId:'t',name:'Sam Rivera',avatarText:'SR!',avatarImage:'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="80" height="40"/%3E',avatarFit:'contain'},
+      {id:'c',teamId:'t',name:'Maya Patel'}
+    ],links:[]}});
+    try {
+      const avatars=host.querySelectorAll('.org-chart-avatar');
+      expect(avatars[0].textContent).toBe('UX');
+      expect(avatars[2].textContent).toBe('MP');
+      const image=avatars[1].querySelector('img');
+      expect(getComputedStyle(image).objectFit).toBe('contain');
+      expect(image.alt).toBe('');
+      expect(image.draggable).toBeFalse();
+      image.dispatchEvent(new Event('error'));
+      expect(avatars[1].textContent).toBe('SR!');
+      expect(chart.getData().people[1].avatarFit).toBe('contain');
+    } finally {chart.destroy();host.remove();}
+  });
+});

package/components/extensions/orgChartDragOptionsSpec.js

@@ -0,0 +1,27 @@
+describe('OrgChart independent drag options', () => {
+  const cases = [
+    [{}, true, true],
+    [{draggable:false}, false, false],
+    [{draggableTeams:true,draggablePeople:false}, true, false],
+    [{draggableTeams:false,draggablePeople:true}, false, true],
+    [{draggable:false,draggableTeams:true}, true, false],
+    [{draggable:false,draggablePeople:true}, false, true]
+  ];
+  cases.forEach(([options,teams,people]) => {
+    it('applies controls and team keyboard movement for '+JSON.stringify(options), () => {
+      const host=document.createElement('div');document.body.append(host);
+      const data={teams:[{id:'t',name:'Team',x:100,y:100}],people:[{id:'p',teamId:'t',name:'Person'}],links:[]};
+      const chart=M.OrgChart.init(host,{data,connectable:false,...options});
+      try {
+        const header=host.querySelector('.org-chart-team-handle');
+        expect(header.disabled).toBe(!teams);
+        expect(!!host.querySelector('.org-chart-drag-icon')).toBe(teams);
+        expect(!!host.querySelector('.card-drag-handle')).toBe(people);
+        header.dispatchEvent(new KeyboardEvent('keydown',{key:'ArrowRight',bubbles:true}));
+        expect(chart.getData().teams[0].x>100).toBe(teams);
+        chart.setData(data);
+        expect(!!host.querySelector('.card-drag-handle')).toBe(people);
+      } finally {chart.destroy();host.remove();}
+    });
+  });
+});

package/components/extensions/orgChartPlacementSpec.js

@@ -0,0 +1,24 @@
+describe('OrgChart automatic team placement', () => {
+  let host;
+  let chart;
+  beforeEach(() => { host = document.createElement('div'); host.style.width = '1000px'; document.body.append(host); });
+  afterEach(() => { chart?.destroy(); chart = null; host.remove(); });
+  it('lists all duplicate team IDs and team names', () => {
+    expect(() => M.OrgChart.init(host, {data:{teams:[{id:'a',name:'Design'},{id:'a',name:'Lighting'},{id:'b',name:'Production'},{id:'b',name:'Editorial'}],people:[],links:[]}})).toThrowError(/Duplicate team IDs:.*"a".*Design.*Lighting.*"b".*Production.*Editorial/);
+  });
+  it('places missing coordinates without overlaps and keeps authored coordinates', () => {
+    const data = {teams:[{id:'fixed',name:'Fixed',x:0,y:0},{id:'auto',name:'Automatic'},{id:'x',name:'Keep X',x:12},{id:'y',name:'Keep Y',y:0}],people:Array.from({length:8},(_,i)=>({id:String(i),name:'Person '+i,teamId:'fixed'})),links:[]};
+    chart = M.OrgChart.init(host,{data,connectable:false});
+    const teams = chart.getData().teams;
+    expect(teams[0].x).toBe(0); expect(teams[0].y).toBe(0);
+    expect(teams[2].x).toBe(12); expect(teams[3].y).toBe(0);
+    expect(data.teams[1].x).toBeUndefined();
+    const rects = [...host.querySelectorAll('.org-chart-team')].map(el=>el.getBoundingClientRect());
+    rects.forEach((a,i)=>rects.slice(i+1).forEach(b=>expect(a.right<=b.left||b.right<=a.left||a.bottom<=b.top||b.bottom<=a.top).toBeTrue()));
+    chart.setData({teams:[{id:'new',name:'New'}],people:[],links:[]});
+    expect(Number.isFinite(chart.getData().teams[0].x)).toBeTrue();
+  });
+  it('still rejects explicitly invalid coordinates with the team and axis', () => {
+    expect(()=>M.OrgChart.init(host,{data:{teams:[{id:'bad',name:'Bad Team',x:NaN}],people:[],links:[]}})).toThrowError(/Invalid x.*Bad Team.*bad/);
+  });
+});

package/components/extensions/orgChartReadonlySpec.js

@@ -0,0 +1,14 @@
+describe('OrgChart read-only controls', () => {
+  it('omits drag and connection controls when their options are disabled', () => {
+    const host = document.createElement('div'); document.body.append(host);
+    const data = { teams: [{ id:'t', name:'Team' }], people: [{ id:'p', teamId:'t', name:'Person' }], links: [] };
+    const chart = M.OrgChart.init(host, { data, editable:false, connectable:false, draggable:false });
+    try {
+      expect(host.querySelector('.card-drag-handle')).toBeNull();
+      expect(host.querySelector('.org-chart-drag-icon')).toBeNull();
+      expect(host.querySelector('.org-chart-connect-port')).toBeNull();
+      chart.setData(data);
+      expect(host.querySelector('.card-drag-handle')).toBeNull();
+    } finally { chart.destroy(); host.remove(); }
+  });
+});

package/components/search/autocomplete.ts

@@ -270,6 +270,7 @@ export class Autocomplete extends Component<AutocompleteOptions> {
   }
 
   _removeDropdown() {
+    this.el.parentElement.querySelector('.autocomplete-selected')?.remove();
     this.container.ariaExpanded = 'false';
     this.container.parentNode.removeChild(this.container);
   }
@@ -485,6 +486,36 @@ export class Autocomplete extends Component<AutocompleteOptions> {
   }
 
   _updateSelectedInfo() {
+    if (this.options.isMultiSelect) {
+      let selected = this.el.parentElement.querySelector<HTMLElement>('.autocomplete-selected');
+      if (!selected) {
+        selected = document.createElement('div');
+        selected.className = 'autocomplete-selected';
+        selected.setAttribute('aria-label', 'Selected items');
+        this.el.parentElement.append(selected);
+      }
+      selected.replaceChildren();
+      for (const entry of this.selectedValues) {
+        const chip = document.createElement('span');
+        chip.className = 'autocomplete-selected-chip';
+        const text = document.createElement('span');
+        text.textContent = String(entry.text ?? entry.id);
+        const remove = document.createElement('button');
+        remove.type = 'button';
+        remove.setAttribute('aria-label', `Remove ${text.textContent}`);
+        remove.textContent = '×';
+        remove.addEventListener('click', () => {
+          this.selectedValues = this.selectedValues.filter(item => item.id !== entry.id);
+          this._updateSelectedInfo();
+          if (this.dropdown.isOpen) this._renderDropdown();
+          this._triggerChanged();
+          this.el.focus({ preventScroll: true });
+        });
+        chip.append(text, remove);
+        selected.append(chip);
+      }
+      selected.hidden = !this.selectedValues.length;
+    }
     const statusElement = this.el.parentElement.querySelector('.status-info');
     if (statusElement) {
       if (this.options.isMultiSelect)

package/components/search/autocompleteChipsSpec.js

@@ -0,0 +1,20 @@
+describe('Multi autocomplete selected chips', () => {
+  it('keeps the menu open after selection and lets a chip remove its value', async () => {
+    const field = document.createElement('div');
+    field.className = 'input-field';
+    field.innerHTML = '<input placeholder=" "><label>Search</label>';
+    document.body.append(field);
+    const input = field.querySelector('input');
+    const instance = M.Autocomplete.init(input, { isMultiSelect: true, minLength: 0, data: [{id:'a',text:'Alpha'}], dropdownOptions: {inDuration:0,outDuration:0} });
+    try {
+      instance.open();
+      await new Promise(resolve => setTimeout(resolve, 50));
+      instance.container.querySelector('li').click();
+      await new Promise(resolve => setTimeout(resolve, 50));
+      expect(instance.dropdown.isOpen).toBeTrue();
+      expect(field.querySelector('.autocomplete-selected-chip').textContent).toContain('Alpha');
+      field.querySelector('.autocomplete-selected-chip button').click();
+      expect(instance.selectedValues.length).toBe(0);
+    } finally { instance.destroy(); field.remove(); }
+  });
+});

package/components/textfield/_input-fields.scss

@@ -422,3 +422,68 @@ textarea {
   > :is(input, textarea).invalid ~ .input-outline,
   &.error > .input-outline { border-color: var(--md-sys-color-error); }
 }
+
+// Explicitly authored copy buttons; no button is generated for ordinary inputs.
+.input-field {
+  > button.suffix.input-copy-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    top: 8px;
+    right: 8px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--md-sys-color-on-surface-variant);
+    cursor: pointer;
+    z-index: 1;
+    > i { margin: 0; font-size: 24px; line-height: 1; }
+    &:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
+    &:focus-visible { outline: 2px solid var(--input-color); outline-offset: 2px; }
+    &:disabled { opacity: .38; cursor: default; }
+  }
+  &:has(> .input-copy-button) > input:not([type=checkbox]):not([type=radio]),
+  &:has(> .input-copy-button) > textarea { padding-right: 56px; }
+}
+.input-copy-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.autocomplete-selected {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+  &[hidden] { display: none; }
+  .autocomplete-selected-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px 4px 12px;
+    border-radius: 8px;
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+    button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 28px;
+      min-height: 28px;
+      border: 0;
+      border-radius: 50%;
+      background: transparent;
+      color: inherit;
+      cursor: pointer;
+      font-size: 20px;
+      &:focus-visible { outline: 2px solid currentColor; }
+    }
+  }
+}

package/components/textfield/forms.ts

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