kmaterialize 2.3.3-1.0.35 → 2.3.3-1.0.38

package/components/code-card/_code-card.scss

@@ -36,7 +36,6 @@
         right: 6px;
 
         > .btn {
-            --button-icon: 24px;
             color: inherit;
         }
     }

package/components/code-card/codeCardSpec.js

@@ -89,6 +89,17 @@ describe("CodeCard", function(){
     });
 
     it("highlights JavaScript while preserving the source text", async function(){
+        // Load this test's peer explicitly instead of depending on Editor test order.
+        if(!window.Prism){
+            await new Promise((resolve, reject) => {
+                const script = document.createElement("script");
+                script.dataset.manual = "";
+                script.src = "/__spec__/node_modules/prismjs/prism.js";
+                script.onload = resolve;
+                script.onerror = () => reject(new Error("Failed to load Prism"));
+                document.head.append(script);
+            });
+        }
         instance = M.CodeCard.init(host);
         await instance.ready;
         expect(host.querySelectorAll(".token").length).toBeGreaterThan(0);

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

@@ -273,7 +273,9 @@ describe('Editor Handlebars workspace', function () {
       script.onload = () => resolve(); script.onerror = () => reject(new Error('Failed to load Prism'));
       document.head.append(script);
     });
-    await load('prism.js'); await load('components/prism-markup-templating.js'); await load('components/prism-handlebars.js');
+    // Preserve the Prism instance already used by other components and the peer cache.
+    if (!window.Prism) await load('prism.js');
+    await load('components/prism-markup-templating.js'); await load('components/prism-handlebars.js');
     const template = '<h1>{{name}}</h1>\n<style>h1 { color: red; }</style>\n' + 'x'.repeat(200);
     await start({ template, data: { name: 'Ada' }, highlight: true });
     const input = host.querySelector('textarea'), mirror = host.querySelector('.editor-highlight');
@@ -428,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/extensions/web/crazy-button.ts

@@ -33,6 +33,7 @@ export default class CrazyButton extends Kmcomponent {
     'icon-position': string('right', ['left', 'right']),
     'color-primary': string(), 'color-secondary': string(),
     'data-view': string(), 'aria-current': string(),
+    'aria-controls': string(), 'aria-pressed': string(),
     href: string(), target: string('_self', ['_self', '_blank']),
     variant: string('', ['', 'filled', 'tonal', 'outlined', 'elevated', 'text', 'standard']),
     disabled: boolean(), toggle: boolean(), pressed: boolean(),
@@ -84,7 +85,8 @@ export default class CrazyButton extends Kmcomponent {
       ${a['aria-label'] || iconOnly ? `aria-label="${escape(a['aria-label'] || a.label || a['icon-text'] || 'Button')}"` : ''}
       ${a['data-view'] ? `data-view="${escape(a['data-view'])}"` : ''}
       ${a['aria-current'] ? `aria-current="${escape(a['aria-current'])}"` : ''}
-      ${a.toggle ? `aria-pressed="${a.pressed}"` : ''} ${menu ? menuAttrs : ''}>${content}</${tag}>`;
+      ${a.toggle ? `aria-pressed="${a.pressed}"` : a['aria-pressed'] ? `aria-pressed="${escape(a['aria-pressed'])}"` : ''}
+      ${a['aria-controls'] && !menu ? `aria-controls="${escape(a['aria-controls'])}"` : ''} ${menu ? menuAttrs : ''}>${content}</${tag}>`;
     return a.split && a['menu-target']
       ? `<span class="btn-split">${button}<button type="button" class="${escape(classes)} btn-icon btn-menu-trigger dropdown-trigger no-autoinit" ${menuAttrs} aria-label="${escape(a['menu-label'])}" ${a.disabled ? 'disabled' : ''}><i class="material-icons" aria-hidden="true">arrow_drop_down</i></button></span>`
       : button;

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/password-input/password-input.ts

@@ -31,12 +31,12 @@ export class PasswordInput extends Component<PasswordInputOptions> {
         this._suffixEl = this.el.parentElement?.querySelector<HTMLElement>('[data-password-toggle-icon]') ?? null;
 
         if (this._suffixEl) {
-            for (const name of ['type', 'role', 'tabindex', 'aria-label', 'aria-pressed', 'aria-controls', 'aria-disabled', 'disabled'])
+            for (const name of ['type', 'role', 'tabindex', 'aria-label', 'aria-pressed', 'aria-controls', 'aria-disabled', 'disabled', 'icon-text'])
                 this._originalAttributes.set(name, this._suffixEl.getAttribute(name));
 
             if (this._suffixEl instanceof HTMLButtonElement) {
                 this._suffixEl.type = 'button';
-            } else {
+            } else if (!this._isCrazyButton()) {
                 this._suffixEl.setAttribute('role', 'button');
                 this._suffixEl.tabIndex = 0;
             }
@@ -96,6 +96,10 @@ export class PasswordInput extends Component<PasswordInputOptions> {
         this._syncState();
     }
 
+    private _isCrazyButton(): boolean {
+        return this._suffixEl?.matches('crazy-button, regular-btn') ?? false;
+    }
+
     private _syncState() {
         const visible = this.el.type === 'text';
         const disabled = this.el.matches(':disabled');
@@ -104,8 +108,13 @@ export class PasswordInput extends Component<PasswordInputOptions> {
         this._suffixEl?.setAttribute('aria-pressed', String(visible));
         this._suffixEl?.setAttribute('aria-disabled', String(disabled));
         if (this._suffixEl instanceof HTMLButtonElement) this._suffixEl.disabled = disabled;
-        const icon = this._suffixEl?.querySelector('i');
-        if (icon) icon.textContent = visible ? 'visibility_off' : 'visibility';
+        if (this._isCrazyButton()) {
+            this._suffixEl?.toggleAttribute('disabled', disabled);
+            this._suffixEl?.setAttribute('icon-text', visible ? 'visibility_off' : 'visibility');
+        } else {
+            const icon = this._suffixEl?.querySelector('i');
+            if (icon) icon.textContent = visible ? 'visibility_off' : 'visibility';
+        }
     }
 
     private _handleToggleClick = (event: MouseEvent) => {
@@ -115,7 +124,7 @@ export class PasswordInput extends Component<PasswordInputOptions> {
 
     private _handleToggleKeydown = (event: KeyboardEvent) => {
         // Native buttons already dispatch clicks for Enter and Space.
-        if (this._suffixEl instanceof HTMLButtonElement || !['Enter', ' '].includes(event.key)) return;
+        if (this._suffixEl instanceof HTMLButtonElement || this._isCrazyButton() || !['Enter', ' '].includes(event.key)) return;
         event.preventDefault();
         this.toggle();
     };

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/rich-textarea/_rich-textarea.scss

@@ -65,16 +65,28 @@
     button:hover .ql-fill, button.ql-active .ql-fill { fill: currentColor; }
     a { color: var(--md-sys-color-primary); }
   }
-  .ql-container.ql-snow { height: auto; border: 0; font-family: inherit; font-size: 1rem; }
+  .ql-container.ql-snow {
+    height: auto;
+    border: 0;
+    border-radius: 0 0 11px 11px;
+    font-family: inherit;
+    font-size: 1rem;
+    &:first-child { border-radius: 11px; }
+  }
   .ql-editor {
     min-height: var(--rich-textarea-min-height);
     max-height: var(--rich-textarea-max-height, 480px);
     padding: 16px;
     line-height: 1.6;
+    font-family: var(--rich-textarea-font-family, inherit);
     color: inherit;
+    // Keep the editor surface inside the rounded border without clipping toolbar popups.
+    background: transparent;
+    border-radius: inherit;
     overflow-wrap: anywhere;
     outline: none;
     &.ql-blank::before { left: 16px; right: 16px; color: var(--md-sys-color-on-surface-variant); font-style: normal; }
+    strong, b { font-weight: 800; }
     blockquote { border-color: var(--md-sys-color-outline); }
   }
   .ql-tooltip {

package/components/rich-textarea/rich-textarea.ts

@@ -9,6 +9,8 @@ export interface RichTextareaOptions extends BaseOptions {
   toolbar?: false | Array<ToolbarItem | ToolbarItem[]>;
   formats?: string[];
   placeholder?: string;
+  /** Default font stack for editor content; load any web fonts separately. */
+  fontFamily?: string;
   label?: string;
 }
 let sequence = 0;
@@ -80,6 +82,7 @@ export class RichTextarea extends Component<RichTextareaOptions> {
     const wrapper = document.createElement('div');
     this._wrapper = wrapper;
     wrapper.className = 'rich-textarea';
+    if (this.options.fontFamily) wrapper.style.setProperty('--rich-textarea-font-family', this.options.fontFamily);
     const editor = document.createElement('div');
     const error = document.createElement('div');
     this._error = error;