kmaterialize 2.3.3-1.0.35 → 2.3.3-1.0.36

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/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');

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/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/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;

package/components/slider/_range.scss

@@ -150,3 +150,208 @@ input[type='range'] + .thumb {
   input[type='range']::-moz-range-thumb { border: 1px solid CanvasText; }
   input[type='range'] + .thumb { border: 1px solid CanvasText; }
 }
+
+/// Two-handle interval. Native inputs retain focus, keyboard, touch and form behavior.
+.range-interval {
+    position: relative;
+    display: grid;
+    min-width: 0;
+    isolation: isolate;
+
+    --range-direction: to right;
+    --range-outer-color: var(--range-muted-color, var(--md-sys-color-surface-variant));
+    --range-inner-color: var(--md-sys-color-primary);
+    &:dir(rtl) { --range-direction: to left; }
+
+    &::before {
+        content: '';
+        grid-area: 1 / 1;
+        align-self: center;
+        height: var(--range-track-height, 4px);
+        border-radius: 999px;
+        background: linear-gradient(var(--range-direction),
+            var(--range-outer-color) 0 var(--range-start),
+            var(--range-inner-color) var(--range-start) var(--range-end),
+            var(--range-outer-color) var(--range-end) 100%);
+    }
+    &:has(input:disabled)::before { opacity: .38; }
+    &.range-compact { --range-track-height: 2px; }
+    &.range-expressive { --range-track-height: 12px; }
+
+    > input[type='range'] {
+        grid-area: 1 / 1;
+        pointer-events: none;
+        z-index: var(--range-start-layer, 1);
+
+        ~ input[type='range'] { z-index: 1; }
+        &:focus-visible { z-index: 2; }
+
+        &::-webkit-slider-runnable-track { background: transparent; }
+        &::-moz-range-track { background: transparent; }
+        &::-webkit-slider-thumb { pointer-events: auto; }
+        &::-moz-range-thumb { pointer-events: auto; }
+        &:disabled::-webkit-slider-thumb { pointer-events: none; }
+        &:disabled::-moz-range-thumb { pointer-events: none; }
+    }
+
+    // Interval steps use native snapping; single-value ranges provide tick marks.
+    > .range-ticks { display: none; }
+}
+
+/// Size variants preserve the native 48px interaction area.
+.range-field.range-compact input[type='range'],
+.range-interval.range-compact > input[type='range'] {
+    --range-track-height: 2px;
+    --range-handle-size: 16px;
+}
+.range-field.range-expressive input[type='range'],
+.range-interval.range-expressive > input[type='range'] {
+    --range-track-height: 12px;
+    --range-handle-size: 24px;
+}
+
+@media (forced-colors: active) {
+    .range-interval::before { background: CanvasText; }
+}
+
+/// Highlight the two outside segments, with visible end stops.
+.range-interval.range-outside {
+    --range-outer-color: var(--md-sys-color-primary);
+    --range-inner-color: var(--range-muted-color, var(--md-sys-color-surface-variant));
+
+    &::before { clip-path: inset(0 var(--range-edge, 10px)); }
+    &::after {
+        content: '';
+        position: absolute;
+        inset-inline: calc(var(--range-edge, 10px) - 1px);
+        top: 50%;
+        height: 16px;
+        transform: translateY(-50%);
+        border-inline: 2px solid var(--md-sys-color-primary);
+        pointer-events: none;
+    }
+    &:has(input:disabled)::after { opacity: .38; }
+}
+
+/// Editable values use the flat, segmented appearance of number controls.
+.range-control {
+    --range-muted-color: color-mix(in srgb, var(--md-sys-color-on-surface) 24%, transparent);
+    display: grid;
+    grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr) minmax(0, 4.5rem);
+    align-items: stretch;
+    gap: 0;
+    padding: 0;
+    border: 0;
+    border-bottom: 1px solid var(--md-sys-color-outline);
+    border-radius: 0;
+    background: var(--md-sys-color-surface-variant);
+    color: var(--md-sys-color-on-surface);
+    min-width: 0;
+
+    &.range-control-single { grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr); }
+    &:focus-within {
+        outline: 2px solid var(--md-sys-color-primary);
+        outline-offset: -2px;
+    }
+    &[data-range-variant='outlined'] {
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: 4px;
+        background: var(--md-sys-color-surface);
+    }
+    &[data-range-variant='rounded'] {
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: 16px;
+    }
+
+    > .range-interval,
+    > .range-control-track {
+        margin-inline: 16px;
+        align-self: center;
+        min-width: 0;
+
+        > input[type='range'] { height: 56px; margin-block: 0; }
+    }
+    > .range-control-value {
+        position: static;
+        display: flex;
+        flex-direction: column-reverse;
+        justify-content: center;
+        min-width: 0;
+        min-height: 56px;
+        margin: 0;
+        padding: 4px;
+        box-sizing: border-box;
+        border-radius: inherit;
+        background: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+        font-size: 10px;
+        line-height: 1.2;
+        text-align: center;
+        transform: none;
+
+        &:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
+        &:last-child { border-start-start-radius: 0; border-end-start-radius: 0; }
+        > span { overflow-wrap: anywhere; }
+        > .range-control-number > input[type='number'] {
+            appearance: textfield;
+            box-sizing: border-box;
+            width: 100%;
+            min-width: 0;
+            height: 30px;
+            margin: 0;
+            padding: 0 2px;
+            border: 0;
+            border-radius: 0;
+            background: transparent;
+            color: inherit;
+            box-shadow: none;
+            font: inherit;
+            font-size: 16px;
+            text-align: center;
+            font-variant-numeric: tabular-nums;
+
+            &::-webkit-inner-spin-button,
+            &::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+            color: transparent;
+            -webkit-text-fill-color: transparent;
+            &:focus {
+                color: inherit;
+                -webkit-text-fill-color: currentColor;
+            }
+            &:focus-visible { outline: 2px solid var(--md-sys-color-primary); }
+            &:disabled { opacity: .38; }
+        }
+    }
+}
+
+@media (forced-colors: active) {
+    .range-interval.range-outside::after { border-color: CanvasText; }
+    .range-control { border-color: CanvasText; }
+}
+
+/// Fixed viewport for the centered film-roll readout. Focus reveals the real input.
+.range-control-number {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 30px;
+    min-width: 0;
+    font-size: 16px;
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+
+    &:focus-within > .range-control-readout { visibility: hidden; }
+    &:has(input:disabled) > .range-control-readout { opacity: .38; }
+}
+.range-control-readout {
+    position: absolute;
+    inset: 0 2px;
+    overflow: hidden;
+    pointer-events: none;
+    white-space: nowrap;
+    direction: ltr;
+}
+.range-control-reel {
+    display: block;
+    > span { display: block; height: 30px; line-height: 30px; }
+}