kmaterialize 2.3.3-1.0.36 → 2.3.3-1.0.38

package/components/editor/editor.ts

@@ -72,6 +72,8 @@ export class Editor {
   private prism?: typeof Prism;
   private dropCaret = make('span', 'editor-drop-caret');
   private dragPoint?: { x: number; y: number };
+  private _dragScroll?: { top: number; left: number; anchorY?: number; direction: number; speed: number };
+  private _dragScrollFrame?: number;
   private helpers: EditorHelpers;
   private undoStack: EditorEdit[] = [];
   private redoStack: EditorEdit[] = [];
@@ -310,7 +312,16 @@ export class Editor {
         this.lastTyping = undefined;
       }
     }, { signal });
-    this.source.addEventListener('scroll', () => { this.lines.scrollTop = this.source.scrollTop; this.syncHighlight(); if (this.dragPoint) this.showDropCaret(); }, { signal });
+    this.source.addEventListener('scroll', () => {
+      // Native textarea drag scrolling must not bypass the controlled edge scroll.
+      if (this._dragScroll) {
+        this.source.scrollTop = this._dragScroll.top;
+        this.source.scrollLeft = this._dragScroll.left;
+      }
+      this.lines.scrollTop = this.source.scrollTop;
+      this.syncHighlight();
+      if (this.dragPoint) this.showDropCaret();
+    }, { signal });
     this.selector.addEventListener('change', () => { void this.setSource(this.selector.value || this.activeSource.id).catch(() => {}); }, { signal });
     this.templateSelector.addEventListener('change', () => { void this.selectTemplate(this.templateSelector.value || this.activeTemplate.id).catch(() => {}); }, { signal });
     this.search.addEventListener('input', () => this.renderTokens(), { signal });
@@ -327,6 +338,7 @@ export class Editor {
         event.dataTransfer.setData(helperMime, helper.dataset.editorHelper!);
         event.dataTransfer.setData('text/plain', `{{${helper.dataset.editorHelper} }}`);
         event.dataTransfer.effectAllowed = 'copy';
+        this._startDragScroll();
         return;
       }
       if (!token || token.disabled || !event.dataTransfer) return;
@@ -334,19 +346,22 @@ export class Editor {
       event.dataTransfer.setData(tokenMime, JSON.stringify(path));
       event.dataTransfer.setData('text/plain', this.expression(path));
       event.dataTransfer.effectAllowed = 'copy';
+      this._startDragScroll();
+    }, { signal });
+    this.source.addEventListener('dragenter', event => {
+      if (!this.source.readOnly && event.dataTransfer?.types.some(type => type === tokenMime || type === helperMime)) this._startDragScroll();
     }, { signal });
     this.source.addEventListener('dragover', event => {
       if (!this.source.readOnly && event.dataTransfer?.types.some(type => type === tokenMime || type === helperMime)) {
         event.preventDefault(); event.dataTransfer.dropEffect = 'copy';
         code.classList.add('is-drop-target');
         this.dragPoint = { x: event.clientX, y: event.clientY };
-        const bounds = this.source.getBoundingClientRect();
-        if (event.clientY < bounds.top + 20) this.source.scrollTop -= 16;
-        else if (event.clientY > bounds.bottom - 20) this.source.scrollTop += 16;
+        this._updateDragScroll(event.clientX, event.clientY);
         this.showDropCaret();
       }
     }, { signal });
     const clearDrop = () => {
+      this._stopDragScroll();
       this.spreadsheetView?.clearDropCarets();
       code.classList.remove('is-drop-target');
       this.dropCaret.hidden = true;
@@ -382,6 +397,57 @@ export class Editor {
     this.renderTokens();
   }
 
+  /** Freeze native scrolling until movement inside the source requests edge scrolling. */
+  private _startDragScroll(): void {
+    if (this._dragScroll || this.spreadsheetView || this.source.readOnly) return;
+    const state = this._dragScroll = {
+      top: this.source.scrollTop, left: this.source.scrollLeft, anchorY: undefined as number | undefined,
+      direction: 0, speed: 0
+    };
+    let previous = performance.now();
+    const step = (time: number) => {
+      if (this._dragScroll !== state) return;
+      const elapsed = Math.min(32, Math.max(0, time - previous));
+      previous = time;
+      // Retain fractional pixels so slow movement also works on high-refresh displays.
+      state.top = Math.max(0, Math.min(this.source.scrollHeight - this.source.clientHeight, state.top + state.speed * elapsed / 1000));
+      this.source.scrollTop = state.top;
+      this.source.scrollLeft = state.left;
+      if (this.dragPoint) this.showDropCaret();
+      this._dragScrollFrame = requestAnimationFrame(step);
+    };
+    this._dragScrollFrame = requestAnimationFrame(step);
+  }
+
+  private _updateDragScroll(x: number, y: number): void {
+    this._startDragScroll();
+    const state = this._dragScroll;
+    if (!state) return;
+    const bounds = this.source.getBoundingClientRect();
+    if (x < bounds.left || x > bounds.right || y < bounds.top || y > bounds.bottom) {
+      state.speed = state.direction = 0;
+      state.anchorY = undefined;
+      return;
+    }
+    // The first point establishes entry; small pointer jitter does not enable scrolling.
+    if (state.anchorY === undefined) state.anchorY = y;
+    const movement = y - state.anchorY;
+    if (Math.abs(movement) >= 6) {
+      state.direction = Math.sign(movement);
+      state.anchorY = y;
+    }
+    const edge = Math.min(32, bounds.height / 4);
+    const depth = state.direction < 0 ? bounds.top + edge - y : y - (bounds.bottom - edge);
+    state.speed = edge > 0 && state.direction && depth > 0
+      ? state.direction * 120 * Math.min(1, depth / edge) : 0;
+  }
+
+  private _stopDragScroll(): void {
+    if (this._dragScrollFrame !== undefined) cancelAnimationFrame(this._dragScrollFrame);
+    this._dragScrollFrame = undefined;
+    this._dragScroll = undefined;
+  }
+
   private expression(path: string[]): string {
     // Segment literals preserve dotted keys and numeric array indices.
     if (path.some(key => key.includes(']') || key.includes('[') || key === '')) {
@@ -932,6 +998,7 @@ export class Editor {
   destroy(): void {
     if (this.destroyed) return;
     this.destroyed = true; this.version++;
+    this._stopDragScroll();
     this.templateRequest?.abort(); this.dataRequest?.abort();
     this.listRequests.forEach(request => request.abort()); this.listRequests.clear();
     this.spreadsheetView?.destroy();

package/components/editor/editorSpec.js

@@ -430,4 +430,93 @@ describe('Editor Handlebars workspace', function () {
       parent.replaceWith(host);
     }
   });
+  describe('token drag scrolling', function () {
+    let input, bounds, transfer, frames, clock, nextFrame;
+    async function begin(helper = false) {
+      await start({ template: ('long line '.repeat(30) + '\n').repeat(100), data: { name: 'Ada' }, helpers: { greet: value => value }, templateSelect: false, sourceSelect: false });
+      input = host.querySelector('.editor-source');
+      input.scrollTop = 240;
+      input.scrollLeft = 50;
+      bounds = input.getBoundingClientRect();
+      frames = new Map(); clock = performance.now(); nextFrame = 0;
+      spyOn(window, 'requestAnimationFrame').and.callFake(callback => { frames.set(++nextFrame, callback); return nextFrame; });
+      spyOn(window, 'cancelAnimationFrame').and.callFake(id => frames.delete(id));
+      transfer = new DataTransfer();
+      host.querySelector(helper ? '[data-editor-helper="greet"]' : '[aria-label="Insert name"]').dispatchEvent(new DragEvent('dragstart', { bubbles: true, dataTransfer: transfer }));
+    }
+    function over(y) {
+      input.dispatchEvent(new DragEvent('dragover', { bubbles: true, cancelable: true, dataTransfer: transfer, clientX: bounds.left + 60, clientY: y }));
+    }
+    function tick(count = 1) {
+      for (let i = 0; i < count; i++) {
+        clock += 16;
+        const pending = [...frames.values()]; frames.clear();
+        pending.forEach(callback => callback(clock));
+      }
+    }
+    it('freezes entry at the bottom and rejects native scroll jumps and pointer jitter', async function () {
+      await begin();
+      over(bounds.bottom - 4); tick(20);
+      expect(input.scrollTop).toBe(240);
+      over(bounds.bottom - 3); tick(20);
+      expect(input.scrollTop).toBe(240);
+      input.scrollTop = 900; input.scrollLeft = 200;
+      input.dispatchEvent(new Event('scroll'));
+      expect(input.scrollTop).toBe(240);
+      expect(input.scrollLeft).toBe(50);
+    });
+    it('scrolls gradually only after downward movement inside and stops away from the edge', async function () {
+      await begin();
+      over(bounds.top + bounds.height / 2);
+      over(bounds.bottom - 2);
+      expect(input.scrollTop).toBe(240);
+      tick();
+      expect(input.scrollTop).toBeGreaterThan(240);
+      expect(input.scrollTop).toBeLessThanOrEqual(244);
+      tick(15);
+      expect(input.scrollTop).toBeLessThan(290);
+      over(bounds.top + bounds.height / 2);
+      const stopped = input.scrollTop; tick(20);
+      expect(input.scrollTop).toBe(stopped);
+    });
+    it('accumulates slow scrolling at the beginning of the edge zone', async function () {
+      await begin();
+      over(bounds.top + bounds.height / 2); over(bounds.bottom - 31); tick(20);
+      expect(input.scrollTop).toBeGreaterThan(240);
+      expect(input.scrollTop).toBeLessThan(244);
+    });
+    it('supports gentle upward scrolling for helper drags too', async function () {
+      await begin(true);
+      over(bounds.top + 2); tick(10);
+      expect(input.scrollTop).toBe(240);
+      over(bounds.top + bounds.height / 2);
+      over(bounds.top + 2); tick(10);
+      expect(input.scrollTop).toBeLessThan(240);
+      expect(input.scrollTop).toBeGreaterThan(210);
+    });
+    it('resets the entry gate on leaving and reentering', async function () {
+      await begin();
+      over(bounds.top + bounds.height / 2); over(bounds.bottom - 2); tick(10);
+      input.dispatchEvent(new DragEvent('dragleave'));
+      const stopped = input.scrollTop; tick(10);
+      expect(input.scrollTop).toBe(stopped);
+      over(bounds.bottom - 2); tick(10);
+      expect(input.scrollTop).toBe(stopped);
+    });
+    for (const end of ['drop', 'dragend', 'Escape', 'destroy']) {
+      it(`releases scrolling and cancels animation on ${end}`, async function () {
+        await begin();
+        over(bounds.top + bounds.height / 2); over(bounds.bottom - 2);
+        if (end === 'destroy') editor.destroy();
+        else if (end === 'Escape') input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        else document.dispatchEvent(new DragEvent(end));
+        expect(frames.size).toBe(0);
+        if (end !== 'destroy') {
+          input.scrollTop = 400; input.dispatchEvent(new Event('scroll'));
+          expect(input.scrollTop).toBe(400);
+        }
+      });
+    }
+  });
+
 });

package/components/file-input/_file-input-enhanced.scss

@@ -33,6 +33,10 @@
     font-size: 1rem;
   }
 
+  &:has(> .supporting-text) .filepond--root {
+    margin-bottom: 0;
+  }
+
   .filepond--panel-root {
     border-radius: 12px;
     background-color: var(--md-sys-color-surface-variant);

package/components/otp-input/_otp-input.scss

@@ -6,6 +6,11 @@
   width: max-content;
   max-width: 100%;
   margin-block: 8px;
+  margin-left: auto;
+  margin-right: auto;
+
+  &[data-otp-align='left'] { margin-left: 0; margin-right: auto; }
+  &[data-otp-align='right'] { margin-left: auto; margin-right: 0; }
   border-radius: var(--otp-slot-radius);
 
   // One native control preserves selection, password semantics, autofill and form validation.
@@ -61,12 +66,21 @@
 // Standard text-field markup: input, label, supporting text. Keep the label
 // above the entire code so it never overlaps an individual slot or separator.
 .input-field:has(> .otp-input) {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-block: 24px;
-  > .otp-input { margin: 0; }
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
+  justify-items: start;
+  &:has(> .otp-input[data-otp-align='left']) { grid-template-columns: 0 minmax(0, max-content) minmax(0, 1fr); }
+  &:has(> .otp-input[data-otp-align='right']) { grid-template-columns: minmax(0, 1fr) minmax(0, max-content) 0; }
+  > .otp-input {
+    grid-column: 2;
+    grid-row: 2;
+    margin: 0;
+    &[data-otp-align] { margin: 0; }
+  }
   > label {
+    grid-column: 2;
+    grid-row: 1;
+    max-width: 100%;
     position: static;
     order: -1;
     transform: none;
@@ -76,7 +90,7 @@
     line-height: 1.4;
     background: transparent;
   }
-  > .supporting-text { display: block; padding-inline: 0; }
+  > .supporting-text { grid-column: 2; grid-row: 3; max-width: 100%; padding-inline: 0; }
   &:focus-within > label { color: var(--input-color); }
   &:has(input:disabled) > label { opacity: .38; }
   &.error, &:has(input[aria-invalid='true']), &:has(.otp-input[data-invalid]), &:has(input:user-invalid) {

package/components/otp-input/otp-input.ts

@@ -6,6 +6,8 @@ export interface OtpInputOptions extends BaseOptions {
   /** Number of editable slots (1–32); inferred when pattern is supplied. */
   length?: number;
   characters?: 'digits' | 'alphanumeric';
+  /** Horizontal alignment of the code within its container. Defaults to center. */
+  align?: 'left' | 'center' | 'right';
   /** # = digit, A = ASCII letter, * = alphanumeric; backslash escapes literals. */
   pattern?: string;
   /** Maskito processing and overwrite behavior. The slot pattern owns the mask. */
@@ -40,6 +42,7 @@ export class OtpInput extends Component<OtpInputOptions> {
   constructor(el: HTMLInputElement, options: Partial<OtpInputOptions> = {}) {
     if (!['text', 'tel', 'password'].includes(el.type)) throw new TypeError('OtpInput requires a text, tel, or password input.');
     const settings = { ...OtpInput.defaults, ...OtpInput._markup(el), ...options };
+    if (!['left', 'center', 'right'].includes(settings.align!)) throw new TypeError('Unknown OTP alignment.');
     if (!['digits', 'alphanumeric'].includes(settings.characters!)) throw new TypeError('Unknown OTP character set.');
     if (!Number.isInteger(settings.groupSize) || settings.groupSize! < 0 || settings.groupSize! > 32) throw new TypeError('OTP groupSize must be an integer between 0 and 32.');
     if (settings.length !== undefined && (!Number.isInteger(settings.length) || settings.length < 1 || settings.length > 32)) throw new TypeError('OTP length must be an integer between 1 and 32.');
@@ -65,7 +68,7 @@ export class OtpInput extends Component<OtpInputOptions> {
     this._hadClass = el.classList.contains('otp-input-native');
     this.ready = this._setup().catch(error => { this.destroy(); throw error; });
   }
-  static get defaults(): OtpInputOptions { return { characters: 'digits', groupSize: 0 }; }
+  static get defaults(): OtpInputOptions { return { characters: 'digits', groupSize: 0, align: 'center' }; }
   static init(el: HTMLInputElement, options?: Partial<OtpInputOptions>): OtpInput;
   static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<OtpInputOptions>): OtpInput[];
   static init(els: HTMLInputElement | InitElements<HTMLInputElement | MElement>, options: Partial<OtpInputOptions> = {}): OtpInput | OtpInput[] {
@@ -74,6 +77,7 @@ export class OtpInput extends Component<OtpInputOptions> {
   static getInstance(el: HTMLInputElement): OtpInput { return el['M_OtpInput']; }
   private static _markup(el: HTMLInputElement): Partial<OtpInputOptions> {
     return {
+      ...(el.dataset.otpAlign !== undefined ? { align: el.dataset.otpAlign as OtpInputOptions['align'] } : {}),
       ...(el.dataset.otpLength !== undefined ? { length: Number(el.dataset.otpLength) } : {}),
       ...(el.dataset.otpPattern !== undefined ? { pattern: el.dataset.otpPattern } : {}),
       ...(el.dataset.otpGroupSize !== undefined ? { groupSize: Number(el.dataset.otpGroupSize) } : {}),
@@ -102,6 +106,7 @@ export class OtpInput extends Component<OtpInputOptions> {
     const wrapper = this._wrapper = document.createElement('div');
     wrapper.className = 'otp-input';
     wrapper.dir = 'ltr';
+    wrapper.dataset.otpAlign = this.options.align;
     const cells = document.createElement('div');
     cells.className = 'otp-input-slots';
     cells.setAttribute('aria-hidden', 'true');

package/components/radio-button/_radio-buttons.scss

@@ -128,3 +128,50 @@
     border-radius: 4px;
   }
 }
+
+// A semantic group needs its own layout; floating text-field labels do not apply.
+fieldset.radio-group {
+  min-width: 0;
+  margin: 0;
+  padding: 8px 16px 12px;
+  border: 1px solid var(--md-sys-color-outline);
+  border-radius: 4px;
+
+  > legend {
+    padding: 0 4px;
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  > p:not(.supporting-text) { margin: 0; }
+
+  label {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: 44px;
+    color: var(--md-sys-color-on-surface);
+    cursor: pointer;
+  }
+
+  input[type="radio"] + span {
+    height: auto;
+    min-height: 24px;
+    padding-left: 28px;
+    line-height: 24px;
+    &::before, &::after { margin: 4px 0; }
+  }
+
+  input:focus-visible + span {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: 4px;
+    border-radius: 4px;
+  }
+
+  &.error {
+    background: transparent;
+    border-color: var(--md-sys-color-error);
+    > legend { color: var(--md-sys-color-error); }
+  }
+}

package/components/slider/_range.scss

@@ -1,4 +1,32 @@
-.range-field { position: relative; min-width: 0; }
+.range-field {
+  position: relative;
+  min-width: 0;
+
+  // Keep supporting messages close without reducing the slider's interaction area.
+  &:has(> .supporting-text),
+  &:has(+ .supporting-text) {
+    > input[type='range'] { margin-bottom: 0; }
+  }
+
+  > .supporting-text,
+  + .supporting-text { margin-top: 0; }
+}
+
+.range-field-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+
+  > label { min-width: 0; }
+  > output {
+    flex-shrink: 0;
+    color: var(--md-sys-color-on-surface);
+    font-size: 14px;
+    font-variant-numeric: tabular-nums;
+  }
+}
+
 
 input[type='range'] {
   --range-active-color: var(--md-sys-color-primary);

package/components/switch/_switches.scss

@@ -39,7 +39,7 @@
   &:checked + .lever {
     &:before, &:after {
       top: var(--gap-on);
-      left: calc(var(--track-width) - var(--size-on) - var(--gap-on) - 2 * var(--border-width));
+      inset-inline-start: calc(var(--track-width) - var(--size-on) - var(--gap-on) - 2 * var(--border-width));
       width: var(--size-on);
       height: var(--size-on);
     }
@@ -66,6 +66,7 @@
   margin-right: 10px;
   transition: background 0.3s ease;
   vertical-align: middle;
+  touch-action: pan-y;
   margin: 0 16px;
 
   // DOT
@@ -77,10 +78,10 @@
     height: var(--size-off);
     border-radius: 50%;
 
-    left: var(--gap-off);
+    inset-inline-start: var(--gap-off);
     top: var(--gap-off);
 
-    transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
+    transition: inset-inline-start 0.3s ease, top .3s ease, width .3s ease, height .3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
   }
 
   // NOT CHECKED [DOT]
@@ -150,7 +151,54 @@ input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
   color: var(--md-sys-color-primary);
 }
 
-.switch.switch-with-icon label input[type="checkbox"]:focus-visible + .lever {
+.switch label input[type="checkbox"]:focus-visible + .lever {
   outline: 2px solid var(--md-sys-color-primary);
   outline-offset: 4px;
 }
+
+/// Preview the pointer position while the native checked state waits for release.
+.switch label input[type="checkbox"] + .lever.is-dragging {
+  --switch-drag-size: calc(var(--size-off) + (var(--size-on) - var(--size-off)) * var(--switch-drag-progress));
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) var(--switch-drag-percent), var(--md-sys-color-surface-variant));
+  border-color: color-mix(in srgb, var(--md-sys-color-primary) var(--switch-drag-percent), var(--md-sys-color-outline));
+  transition: none;
+
+  &::before,
+  &::after {
+    width: var(--switch-drag-size);
+    height: var(--switch-drag-size);
+    top: calc((var(--track-height) - var(--switch-drag-size)) / 2 - var(--border-width));
+    inset-inline-start: calc(var(--track-height) / 2 - var(--border-width) + (var(--track-width) - var(--track-height)) * var(--switch-drag-progress) - var(--switch-drag-size) / 2);
+    transition: none;
+  }
+
+  &::after {
+    background-color: color-mix(in srgb, var(--md-sys-color-surface) var(--switch-drag-percent), var(--md-sys-color-outline));
+  }
+}
+
+// Keep the drag halo equally visible for plain and icon thumbs, on either side.
+.switch label input[type="checkbox"]:not(:disabled) + .lever.is-dragging::before {
+  width: var(--size-on);
+  height: var(--size-on);
+  top: var(--gap-on);
+  inset-inline-start: calc(var(--track-height) / 2 - var(--border-width) + (var(--track-width) - var(--track-height)) * var(--switch-drag-progress) - var(--size-on) / 2);
+  transform: scale(2.4);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);
+  pointer-events: none;
+}
+
+.switch.switch-with-icon label input[type="checkbox"] + .lever.is-dragging::after {
+  content: var(--switch-icon-off, "\e5cd");
+  color: color-mix(in srgb, var(--md-sys-color-primary) var(--switch-drag-percent), var(--md-sys-color-surface));
+}
+
+.switch.switch-with-icon label input[type="checkbox"] + .lever.is-dragging.is-drag-on::after {
+  content: var(--switch-icon-on, "\e5ca");
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .switch label .lever,
+  .switch label .lever::before,
+  .switch label .lever::after { transition: none; }
+}