@vollowx/seele 0.12.10 → 0.13.1

package/src/m3/loading-indicator/loading-indicator.js

@@ -0,0 +1,320 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+// Origin: https://github.com/brahmkshatriya/material-osc/blob/main/assets/loading-shape-morph-demo.html
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { InternalsAttached, internals } from '../../base/mixins/internals-attached.js';
+import { loadingIndicatorStyles } from './loading-indicator-styles.css.js';
+const STEP_MS = 650;
+const FULL_ROTATION_MS = 4666;
+const QUARTER_ROTATION = 90;
+const TOTAL_POINTS = 240;
+const CANVAS_SIZE = 640;
+const RADIUS_BASE = CANVAS_SIZE / 2;
+const CENTER = CANVAS_SIZE / 2;
+export class M3LoadingIndicator extends InternalsAttached(LitElement) {
+    static{
+        this.styles = [
+            loadingIndicatorStyles
+        ];
+    }
+    render() {
+        return html`<canvas width="${CANVAS_SIZE}" height="${CANVAS_SIZE}" aria-hidden="true"></canvas>`;
+    }
+    #ctx;
+    #animationFrame;
+    #startTime;
+    #color;
+    constructor(){
+        super(), this.contained = false, this.#animationFrame = 0, this.#startTime = 0, this.#color = '#ff0000', this.#animate = (now)=>{
+            if (this.#startTime === 0) {
+                this.#startTime = now;
+            }
+            const elapsed = now - this.#startTime;
+            const step = Math.floor(elapsed / STEP_MS);
+            const morphElapsed = elapsed % STEP_MS;
+            const progress = springProgress(morphElapsed);
+            const from = sampledSequence[step % sampledSequence.length];
+            const to = sampledSequence[(step + 1) % sampledSequence.length];
+            const stepRotation = step * QUARTER_ROTATION + progress * QUARTER_ROTATION;
+            const globalRotation = elapsed % FULL_ROTATION_MS / FULL_ROTATION_MS * 360;
+            this.#draw(from, to, progress, stepRotation + globalRotation, scalePulse(morphElapsed));
+            this.#animationFrame = requestAnimationFrame(this.#animate);
+        };
+        this[internals].role = 'progressbar';
+        this[internals].ariaValueMin = '0';
+        this[internals].ariaValueMax = '1';
+    }
+    firstUpdated() {
+        this.#ctx = this.$canvas.getContext('2d');
+        this.#cacheColors();
+        setInterval(this.#cacheColors.bind(this), 1000);
+        this.#animationFrame = requestAnimationFrame(this.#animate);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        cancelAnimationFrame(this.#animationFrame);
+    }
+    #cacheColors() {
+        const computed = getComputedStyle(this);
+        const color = computed.getPropertyValue(this.contained ? '--md-sys-color-on-primary-container' : '--md-sys-color-primary').trim();
+        if (color) this.#color = color;
+    }
+    #draw(from, to, progress, rotation, scale) {
+        if (!this.#ctx || !this.$canvas) return;
+        const ctx = this.#ctx;
+        ctx.clearRect(0, 0, this.$canvas.width, this.$canvas.height);
+        ctx.save();
+        ctx.translate(CENTER, CENTER);
+        ctx.scale(scale, scale);
+        ctx.rotate(rotation * Math.PI / 180);
+        ctx.translate(-CENTER, -CENTER);
+        ctx.beginPath();
+        from.points.forEach((point, i)=>{
+            const next = to.points[i];
+            const x = lerp(point.x, next.x, progress);
+            const y = lerp(point.y, next.y, progress);
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+        });
+        ctx.closePath();
+        ctx.fillStyle = this.#color;
+        ctx.fill();
+        ctx.restore();
+    }
+    #animate;
+}
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: true
+    })
+], M3LoadingIndicator.prototype, "contained", void 0);
+_ts_decorate([
+    query('canvas')
+], M3LoadingIndicator.prototype, "$canvas", void 0);
+M3LoadingIndicator = _ts_decorate([
+    customElement('md-loading')
+], M3LoadingIndicator);
+const lerp = (a, b, t)=>a + (b - a) * t;
+const clamp = (v, lo, hi)=>Math.max(lo, Math.min(hi, v));
+const dist = (a, b)=>Math.hypot(a.x - b.x, a.y - b.y);
+const norm = (x, y, fallback = {
+    x: 1,
+    y: 0
+})=>{
+    const len = Math.hypot(x, y);
+    return len < 1e-6 ? fallback : {
+        x: x / len,
+        y: y / len
+    };
+};
+const sequence = [
+    [
+        10,
+        0.85,
+        0.67,
+        0.75,
+        0.5
+    ],
+    [
+        9,
+        0.85,
+        0.755,
+        0.8,
+        0.5
+    ],
+    [
+        5,
+        0.85,
+        0.731,
+        0.45,
+        1
+    ],
+    [
+        2,
+        0.85,
+        0.67,
+        0.8,
+        0.95
+    ],
+    [
+        8,
+        0.85,
+        0.731,
+        0.6,
+        0.45
+    ],
+    [
+        4,
+        0.925,
+        0.67,
+        1,
+        0.4
+    ],
+    [
+        2,
+        0.9,
+        0.565,
+        0.8,
+        0.6
+    ]
+].map(([points, outerRadius, innerRadius, outerRoundness, innerRoundness])=>({
+        points,
+        outerRadius,
+        innerRadius,
+        outerRoundness,
+        innerRoundness
+    }));
+function springProgress(ms) {
+    const t = ms / 1000;
+    const stiffness = 200;
+    const damping = 0.6;
+    const omega0 = Math.sqrt(stiffness);
+    const omegaD = omega0 * Math.sqrt(1 - damping * damping);
+    const displacement = Math.exp(-damping * omega0 * t) * (-Math.cos(omegaD * t) - damping * omega0 / omegaD * Math.sin(omegaD * t));
+    return clamp(1 + displacement, 0, 1);
+}
+function scalePulse(ms) {
+    const t = ms / STEP_MS;
+    const smooth = (p)=>p * p * (3 - 2 * p);
+    const outCubic = (p)=>1 - (1 - p) ** 3;
+    const segments = [
+        [
+            0,
+            0.14,
+            1,
+            0.985,
+            smooth
+        ],
+        [
+            0.14,
+            0.46,
+            0.985,
+            1.04,
+            outCubic
+        ],
+        [
+            0.46,
+            0.76,
+            1.04,
+            1,
+            smooth
+        ]
+    ];
+    const segment = segments.find(([start, end])=>t < end && t >= start);
+    if (!segment) return 1;
+    const [start, end, from, to, ease] = segment;
+    return lerp(from, to, ease((t - start) / (end - start)));
+}
+function starGeometry(shape) {
+    const points = Math.max(2, Math.floor(shape.points));
+    const count = points * 2;
+    const anchors = Array.from({
+        length: count
+    }, (_, i)=>{
+        const outer = i % 2 === 0;
+        const radius = (outer ? shape.outerRadius : shape.innerRadius) * RADIUS_BASE;
+        const angle = i * Math.PI / points;
+        return {
+            x: CENTER + Math.cos(angle) * radius,
+            y: CENTER + Math.sin(angle) * radius,
+            outer
+        };
+    });
+    const tangents = anchors.map((_, i)=>{
+        const prev = anchors[(i - 1 + count) % count];
+        const next = anchors[(i + 1) % count];
+        return norm(next.x - prev.x, next.y - prev.y);
+    });
+    const lengths = anchors.map((anchor, i)=>{
+        const prev = anchors[(i - 1 + count) % count];
+        const next = anchors[(i + 1) % count];
+        const roundness = anchor.outer ? shape.outerRoundness : shape.innerRoundness;
+        return Math.max(0, roundness) * Math.min(dist(anchor, prev), dist(anchor, next)) * 0.5;
+    });
+    const handles = anchors.map((anchor, i)=>{
+        const tangent = tangents[i];
+        const length = lengths[i];
+        return {
+            in: {
+                x: anchor.x - tangent.x * length,
+                y: anchor.y - tangent.y * length
+            },
+            out: {
+                x: anchor.x + tangent.x * length,
+                y: anchor.y + tangent.y * length
+            }
+        };
+    });
+    return {
+        anchors,
+        handles
+    };
+}
+function cubic(p0, c1, c2, p1, t) {
+    const inv = 1 - t;
+    return {
+        x: inv ** 3 * p0.x + 3 * inv * inv * t * c1.x + 3 * inv * t * t * c2.x + t ** 3 * p1.x,
+        y: inv ** 3 * p0.y + 3 * inv * inv * t * c1.y + 3 * inv * t * t * c2.y + t ** 3 * p1.y
+    };
+}
+function resample(points) {
+    const lengths = points.map((point, i)=>dist(point, points[(i + 1) % points.length]));
+    const perimeter = lengths.reduce((sum, length)=>sum + length, 0);
+    const sampled = [];
+    let edge = 0;
+    let consumed = 0;
+    for(let i = 0; i < TOTAL_POINTS; i++){
+        const target = perimeter * i / TOTAL_POINTS;
+        while(consumed + lengths[edge] < target && edge < lengths.length - 1){
+            consumed += lengths[edge++];
+        }
+        const point = points[edge];
+        const next = points[(edge + 1) % points.length];
+        const t = (target - consumed) / (lengths[edge] || 1);
+        sampled.push({
+            x: lerp(point.x, next.x, t),
+            y: lerp(point.y, next.y, t)
+        });
+    }
+    return sampled;
+}
+function sampleShape(shape) {
+    const { anchors, handles } = starGeometry(shape);
+    const dense = [];
+    anchors.forEach((anchor, i)=>{
+        const next = (i + 1) % anchors.length;
+        for(let step = 0; step < 18; step++){
+            dense.push(cubic(anchor, handles[i].out, handles[next].in, anchors[next], step / 18));
+        }
+    });
+    return {
+        points: resample(dense)
+    };
+}
+function shifted(points, offset) {
+    return points.map((_, i)=>points[(i + offset) % points.length]);
+}
+function alignTo(from, to) {
+    let bestOffset = 0;
+    let bestScore = Infinity;
+    for(let offset = 0; offset < to.points.length; offset++){
+        let score = 0;
+        for(let i = 0; i < from.points.length; i += 4){
+            const point = to.points[(i + offset) % to.points.length];
+            score += (from.points[i].x - point.x) ** 2 + (from.points[i].y - point.y) ** 2;
+        }
+        if (score < bestScore) {
+            bestScore = score;
+            bestOffset = offset;
+        }
+    }
+    return {
+        ...to,
+        points: shifted(to.points, bestOffset)
+    };
+}
+const sampledSequence = sequence.map(sampleShape).reduce((aligned, shape)=>{
+    aligned.push(aligned.length ? alignTo(aligned.at(-1), shape) : shape);
+    return aligned;
+}, []);

package/src/m3/menu/menu-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const menuStyles = css`:host{min-width:112px;display:contents}[part=menu]{background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);box-sizing:border-box;color:var(--md-sys-color-on-surface);height:inherit;max-height:var(--md-menu-max-height,inherit);max-width:inherit;min-width:inherit;opacity:0;-webkit-user-select:none;user-select:none;z-index:1000;border-radius:16px;outline:0;padding:4px;position:absolute;inset:auto;overflow-y:auto;transform:scaleY(.35)}:host([color=vibrant]){& [part=menu]{--md-divider-color:var(--md-sys-color-tertiary);--md-item-supporting-text-color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}& ::slotted([selected]){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary);background-color:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}}:host([alignstrategy=fixed]) [part=menu]{position:fixed}[part=items]{opacity:0;flex-direction:column;gap:2px;display:flex}:host(:state(closed)) [part=menu]{display:none}:host(:state(opening)){& [part=menu]{opacity:1;transition:opacity 67ms, transform var(--md-sys-motion-exp-spatial-default-duration) var(--md-sys-motion-exp-spatial-default);display:block;transform:scaleY(1)}& [part=items]{opacity:1;transition:opacity 67ms linear 67ms}}:host(:state(opened)){& [part=menu]{opacity:1;display:block;transform:scaleY(1)}& [part=items]{opacity:1}}:host(:state(closing)){& [part=menu]{opacity:0;transition:opacity var(--md-sys-motion-exp-effects-fast-duration), transform var(--md-sys-motion-exp-effects-slow-duration) var(--md-sys-motion-exp-effects-slow);transform:scaleY(.35)}& [part=items]{opacity:0;transition:opacity 67ms}}::slotted(md-divider){margin-block:6px}`;
+export const menuStyles = css`:host{min-width:112px;display:contents}[part=menu]{background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);box-sizing:border-box;color:var(--md-sys-color-on-surface);height:inherit;max-height:var(--md-menu-max-height,inherit);max-width:inherit;min-width:inherit;opacity:0;-webkit-user-select:none;user-select:none;z-index:1000;border-radius:16px;outline:0;padding:4px;position:absolute;inset:auto;overflow-y:auto;transform:scaleY(.35)}:host([color=vibrant]){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}& ::slotted([selected]){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary);background-color:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}[part=items]{opacity:0;flex-direction:column;gap:2px;display:flex}:host(:state(closed)) [part=menu]{display:none}:host(:state(opening)){transition:opacity 67ms,transform var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);display:block;transform:scaleY(1)}& [part=items]{opacity:1;transition:opacity 67ms linear 67ms}& [part=items]{opacity:1}& [part=items]{opacity:0;transition:opacity 67ms}`;

package/src/m3/ripple/ripple-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const rippleStyles = css`:host{border-radius:inherit;pointer-events:none;display:block;position:absolute;inset:0;overflow:hidden}[part~=ripple]{background-image:radial-gradient(closest-side, var(--md-ripple-color,currentColor) max(calc(100% - 70px), 65%), transparent 100%);position:absolute;top:0;left:0}:host:before{background-color:var(--md-ripple-color,currentColor);border-radius:inherit;content:"";opacity:0;transition:opacity 67ms linear;display:block;position:absolute;inset:0}:host(:state(hover)):before{opacity:.08}`;
+export const rippleStyles = css`:host{border-radius:inherit;pointer-events:none;display:block;position:absolute;inset:0;overflow:hidden}[part~=ripple]{background-image:radial-gradient(closest-side,var(--md-ripple-color,currentColor) max(calc(100% - 70px),65%),transparent 100%);position:absolute;top:0;left:0}:host:before{background-color:var(--md-ripple-color,currentColor);border-radius:inherit;content:"";opacity:0;transition:opacity 67ms linear;display:block;position:absolute;inset:0}:host(:state(hover)):before{opacity:.08}`;

package/src/m3/select/filled-select.js

@@ -11,32 +11,7 @@ export class MdFilledSelect extends M3Select {
         ];
     }
     renderField() {
-        return html`
-      <md-filled-field
-        id="field"
-        part="field"
-        .label=${this.label}
-        .populated=${!!this.value}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        .error=${this.error}
-        .focused=${this.open || this.focused}
-        supportingtext=${this.supportingText}
-        @click=${this.toggle}
-        @keydown=${this._handleFieldKeydown}
-        @focus=${()=>this.focused = true}
-        @blur=${()=>this.focused = false}
-        tabindex=${this.disabled ? '-1' : '0'}
-        role="combobox"
-        aria-haspopup="listbox"
-        aria-expanded=${this.open}
-        aria-controls="menu"
-        aria-disabled=${this.disabled}
-        aria-required=${this.required}
-      >
-        ${this.renderFieldContent()}
-      </md-filled-field>
-    `;
+        return html`<md-filled-field id="field" part="field" .label="${this.label}" .populated="${!!this.value}" .disabled="${this.disabled}" .required="${this.required}" .error="${this.error}" .focused="${this.open || this.focused}" supportingtext="${this.supportingText}" @click="${this.toggle}" @keydown="${this._handleFieldKeydown}" @focus="${()=>this.focused = true}" @blur="${()=>this.focused = false}" tabindex="${this.disabled ? '-1' : '0'}" role="combobox" aria-haspopup="listbox" aria-expanded="${this.open}" aria-controls="menu" aria-disabled="${this.disabled}" aria-required="${this.required}">${this.renderFieldContent()}</md-filled-field>`;
     }
 }
 MdFilledSelect = _ts_decorate([

package/src/m3/select/outlined-select.js

@@ -11,32 +11,7 @@ export class MdOutlinedSelect extends M3Select {
         ];
     }
     renderField() {
-        return html`
-      <md-outlined-field
-        id="field"
-        part="field"
-        .label=${this.label}
-        .populated=${!!this.value}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        .error=${this.error}
-        .focused=${this.open || this.focused}
-        supportingtext=${this.supportingText}
-        @click=${this.toggle}
-        @keydown=${this._handleFieldKeydown}
-        @focus=${()=>this.focused = true}
-        @blur=${()=>this.focused = false}
-        tabindex=${this.disabled ? '-1' : '0'}
-        role="combobox"
-        aria-haspopup="listbox"
-        aria-expanded=${this.open}
-        aria-controls="menu"
-        aria-disabled=${this.disabled}
-        aria-required=${this.required}
-      >
-        ${this.renderFieldContent()}
-      </md-outlined-field>
-    `;
+        return html`<md-outlined-field id="field" part="field" .label="${this.label}" .populated="${!!this.value}" .disabled="${this.disabled}" .required="${this.required}" .error="${this.error}" .focused="${this.open || this.focused}" supportingtext="${this.supportingText}" @click="${this.toggle}" @keydown="${this._handleFieldKeydown}" @focus="${()=>this.focused = true}" @blur="${()=>this.focused = false}" tabindex="${this.disabled ? '-1' : '0'}" role="combobox" aria-haspopup="listbox" aria-expanded="${this.open}" aria-controls="menu" aria-disabled="${this.disabled}" aria-required="${this.required}">${this.renderFieldContent()}</md-outlined-field>`;
     }
 }
 MdOutlinedSelect = _ts_decorate([

package/src/m3/select/select-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const selectStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block;position:relative}[part=field]{cursor:pointer;outline:none;width:100%}[part=value]{font:var(--md-sys-typography-body-large);height:1.5em}[part=menu]{--md-menu-max-height:300px;min-width:100%}`;
+export const selectStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block;position:relative}[part=field]{cursor:pointer;outline:0;width:100%}[part=value]{font:var(--md-sys-typography-body-large);height:1.5em}[part=menu]{--md-menu-max-height:300px;min-width:100%}`;

package/src/m3/select/select.js

@@ -7,28 +7,7 @@ import { Select } from '../../base/select.js';
  * @fires {Event} input - Fired when the selected value has changed.
  */ export class M3Select extends Select {
     renderMenu() {
-        return html`
-      <md-menu
-        part="menu"
-        id="menu"
-        for="field"
-        type="listbox"
-        data-tabindex="-1"
-        ?quick="${this.quick}"
-        offset="${this.offset}"
-        align="${this.align}"
-        align-strategy="${this.alignStrategy}"
-        keep-open-blur
-        no-focus-control
-        ?open="${this.open}"
-        @open="${()=>this.open = true}"
-        @close="${()=>this.open = false}"
-        @item-focus="${this._handleMenuItemFocus}"
-        @select="${this._handleMenuSelect}"
-      >
-        <slot part="items" @slotchange=${this._handleSlotChange}></slot>
-      </md-menu>
-    `;
+        return html`<md-menu part="menu" id="menu" for="field" type="listbox" data-tabindex="-1" ?quick="${this.quick}" offset="${this.offset}" align="${this.align}" align-strategy="${this.alignStrategy}" keep-open-blur no-focus-control ?open="${this.open}" @open="${()=>this.open = true}" @close="${()=>this.open = false}" @item-focus="${this._handleMenuItemFocus}" @select="${this._handleMenuSelect}"><slot part="items" @slotchange="${this._handleSlotChange}"></slot></md-menu>`;
     }
     constructor(...args){
         super(...args), this.label = '', this.supportingText = '', this.focused = false;

package/src/m3/slider/slider-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const sliderStyles = css`:host{--_target-size:48px;--_half-target:calc(var(--_target-size) / 2);--_handle-width-start:var(--md-slider-handle-width,4px);--_handle-width-end:var(--md-slider-handle-width,4px);--_handle-height:var(--md-slider-handle-height,44px);--_handle-shape:var(--md-slider-handle-shape,20px);--_handle-margin:6px;--_tick-size:var(--md-slider-tick-size,2px);--_track-shape:8px;--_track-height:var(--md-slider-track-height,16px);vertical-align:middle;min-inline-size:200px;display:inline-flex}md-focus-ring{width:16px;height:56px;inset:unset}:host([disabled]){opacity:.38}:host([disabled]) input{cursor:default;pointer-events:none}.container{--_start-px:calc(100% * var(--_start));--_end-px:calc(100% * var(--_end));--_inv-start-px:calc(100% * (1 - var(--_start)));--_inv-end-px:calc(100% * (1 - var(--_end)));--_mask-offset-start:calc(var(--_handle-width-start) / 2 + var(--_handle-margin));--_mask-offset-end:calc(var(--_handle-width-end) / 2 + var(--_handle-margin));--_cut-start:calc(var(--_start-px) + var(--_mask-offset-start));--_cut-end:calc(var(--_inv-end-px) + var(--_mask-offset-end));--_cut-inv-start:calc(var(--_inv-start-px) + var(--_mask-offset-start));--_cut-inv-end:calc(var(--_end-px) + var(--_mask-offset-end));block-size:var(--_target-size);pointer-events:none;touch-action:none;user-select:none;flex:1;align-items:center;display:flex;position:relative}.track,.tickmarks{block-size:var(--_track-height);align-items:center;display:flex;position:absolute;inset-inline:0}.track div,.tickmarks div{inset:0 calc(var(--_target-size) / 2);position:absolute}.track div{border-radius:var(--_track-shape)}.track .inactive-before,.track .inactive-after{background:var(--md-sys-color-secondary-container)}.track .active{background:var(--md-sys-color-primary)}:host([disabled]) .track .inactive-before,:host([disabled]) .track .inactive-after{background:var(--md-sys-color-on-surface);opacity:.315789}:host([disabled]) .track .active{background:var(--md-sys-color-on-surface)}.tickmarks div{--_tick-color:var(--md-sys-color-on-secondary-container);background-size:calc((100% - var(--_tick-size) * 2) / var(--_ticks)) 100%;background-image:radial-gradient(circle at var(--_tick-size) center, var(--_tick-color) 0, var(--_tick-color) calc(var(--_tick-size) / 2), transparent calc(var(--_tick-size) / 2))}.tickmarks .active{--_tick-color:var(--md-sys-color-on-primary)}:host([disabled]) .tickmarks div{--_tick-color:var(--md-sys-color-on-surface)}:host([disabled]) .tickmarks .active{--_tick-color:var(--md-sys-color-inverse-on-surface)}.inactive-before{clip-path:inset(0 var(--_cut-inv-start) 0 0 round 2px)}.inactive-after{clip-path:inset(0 0 0 var(--_cut-inv-end) round 2px)}.active{clip-path:inset(0 var(--_cut-end) 0 0 round 2px)}.ranged .active{clip-path:inset(0 var(--_cut-end) 0 var(--_cut-start) round 2px)}:host(:dir(rtl)) .inactive-before{clip-path:inset(0 0 0 var(--_cut-inv-start) round 2px)}:host(:dir(rtl)) .inactive-after{clip-path:inset(0 var(--_cut-inv-end) 0 0 round 2px)}:host(:dir(rtl)) .active{clip-path:inset(0 0 0 var(--_cut-end) round 2px)}:host(:dir(rtl)) .ranged .active{clip-path:inset(0 var(--_cut-start) 0 var(--_cut-end) round 2px)}.handles-padded{block-size:100%;inline-size:100%;padding-inline:calc(var(--_target-size) / 2);box-sizing:border-box;position:absolute;inset:0}.handles{block-size:100%;inline-size:100%;inline-size:calc(var(--_end-px) - var(--_start-px));position:relative;inset-block:0;inset-inline-start:var(--_start-px)}.handle{--md-ripple-color:var(--md-sys-color-primary);block-size:var(--_target-size);inline-size:var(--_target-size);border-radius:var(--_handle-shape);place-content:center;place-items:center;display:flex;position:absolute}.handle.start{inset-inline-start:calc(0px - var(--_half-target))}.handle.end{inset-inline-end:calc(0px - var(--_half-target))}.nub{height:var(--_handle-height);width:var(--_handle-width-end);border-radius:var(--_handle-shape);background:var(--md-sys-color-primary);transition:width var(--md-sys-motion-std-effects-fast-duration) var(--md-sys-motion-std-effects-fast);position:absolute}.start .nub{width:var(--_handle-width-start)}:host([disabled]) .nub{background:var(--md-sys-color-on-surface)}.onTop.isOverlapping .nub{border:1px solid var(--md-sys-color-surface)}.label{box-sizing:border-box;color:var(--md-sys-color-inverse-on-surface);background:var(--md-sys-color-inverse-surface);font:var(--md-sys-typography-label-large);opacity:0;border-radius:9999px;place-content:center;place-items:center;min-block-size:44px;min-inline-size:48px;padding:0 16px;transition:opacity 67ms linear;display:flex;position:absolute;inset-block-end:100%;transform:translateY(-2px)}:host(:not(:disabled)) :where(:has(input:active)) .label,:host(:not(:disabled)) :where(:has(input:focus-visible)) .label{opacity:1}@media (hover:hover) and (pointer:fine){:host(:not(:disabled)) :where(:has(input:hover)) .label{opacity:1}}input[type=range]{opacity:0;-webkit-tap-highlight-color:transparent;box-sizing:border-box;cursor:pointer;pointer-events:auto;appearance:none;width:100%;height:100%;margin:0;position:absolute}input[type=range]:focus{outline:none}:host(:not([disabled])) :has(input.start:active){--_handle-width-start:2px}:host(:not([disabled])) :has(input.end:active){--_handle-width-end:2px}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_target-size);inline-size:var(--_target-size);opacity:0;z-index:2}::-moz-range-thumb{appearance:none;block-size:var(--_target-size);inline-size:var(--_target-size);opacity:0;z-index:2;transform:scaleX(0)}.ranged input{--track-len:calc(100% - var(--_target-size));--mid-frac:calc(var(--_start) + ((var(--_end) - var(--_start)) / 2));--clip-px:calc(var(--_half-target) + var(--track-len) * var(--mid-frac))}.ranged input.start{clip-path:inset(0 calc(100% - var(--clip-px)) 0 0)}.ranged input.end{clip-path:inset(0 0 0 var(--clip-px))}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - var(--clip-px)))}.ranged input.end:dir(rtl){clip-path:inset(0 var(--clip-px) 0 0)}.onTop{z-index:1}`;
+export const sliderStyles = css`:host{--_target-size:48px;--_half-target:calc(var(--_target-size) / 2);--_handle-width-start:var(--md-slider-handle-width,4px);--_handle-width-end:var(--md-slider-handle-width,4px);--_handle-height:var(--md-slider-handle-height,44px);--_handle-shape:var(--md-slider-handle-shape,20px);--_handle-margin:6px;--_tick-size:var(--md-slider-tick-size,2px);--_track-shape:8px;--_track-height:var(--md-slider-track-height,16px);vertical-align:middle;min-inline-size:200px;display:inline-flex}md-focus-ring{width:16px;height:56px;inset:unset}:host([disabled]){opacity:.38}:host([disabled]) input{cursor:default;pointer-events:none}.container{--_start-px:calc(100% * var(--_start));--_end-px:calc(100% * var(--_end));--_inv-start-px:calc(100% * (1 - var(--_start)));--_inv-end-px:calc(100% * (1 - var(--_end)));--_mask-offset-start:calc(var(--_handle-width-start) / 2 + var(--_handle-margin));--_mask-offset-end:calc(var(--_handle-width-end) / 2 + var(--_handle-margin));--_cut-start:calc(var(--_start-px) + var(--_mask-offset-start));--_cut-end:calc(var(--_inv-end-px) + var(--_mask-offset-end));--_cut-inv-start:calc(var(--_inv-start-px) + var(--_mask-offset-start));--_cut-inv-end:calc(var(--_end-px) + var(--_mask-offset-end));block-size:var(--_target-size);pointer-events:none;touch-action:none;user-select:none;flex:1;align-items:center;display:flex;position:relative}.tickmarks,.track{block-size:var(--_track-height);align-items:center;display:flex;position:absolute;inset-inline:0}.tickmarks div,.track div{inset:0 calc(var(--_target-size)/ 2);position:absolute}.track div{border-radius:var(--_track-shape)}.track .inactive-after,.track .inactive-before{background:var(--md-sys-color-secondary-container)}.track .active{background:var(--md-sys-color-primary)}:host([disabled]) .track .inactive-after,:host([disabled]) .track .inactive-before{background:var(--md-sys-color-on-surface);opacity:.315789}:host([disabled]) .track .active{background:var(--md-sys-color-on-surface)}.tickmarks div{--_tick-color:var(--md-sys-color-on-secondary-container);background-size:calc((100% - var(--_tick-size) * 2)/ var(--_ticks)) 100%;background-image:radial-gradient(circle at var(--_tick-size) center,var(--_tick-color) 0,var(--_tick-color) calc(var(--_tick-size)/ 2),transparent calc(var(--_tick-size)/ 2))}.tickmarks .active{--_tick-color:var(--md-sys-color-on-primary)}:host([disabled]) .tickmarks div{--_tick-color:var(--md-sys-color-on-surface)}:host([disabled]) .tickmarks .active{--_tick-color:var(--md-sys-color-inverse-on-surface)}.inactive-before{clip-path:inset(0 var(--_cut-inv-start) 0 0 round 2px)}.inactive-after{clip-path:inset(0 0 0 var(--_cut-inv-end) round 2px)}.active{clip-path:inset(0 var(--_cut-end) 0 0 round 2px)}.ranged .active{clip-path:inset(0 var(--_cut-end) 0 var(--_cut-start) round 2px)}:host(:dir(rtl)) .inactive-before{clip-path:inset(0 0 0 var(--_cut-inv-start) round 2px)}:host(:dir(rtl)) .inactive-after{clip-path:inset(0 var(--_cut-inv-end) 0 0 round 2px)}:host(:dir(rtl)) .active{clip-path:inset(0 0 0 var(--_cut-end) round 2px)}:host(:dir(rtl)) .ranged .active{clip-path:inset(0 var(--_cut-start) 0 var(--_cut-end) round 2px)}.handles-padded{block-size:100%;inline-size:100%;padding-inline:calc(var(--_target-size)/ 2);box-sizing:border-box;position:absolute;inset:0}.handles{block-size:100%;inline-size:100%;inline-size:calc(var(--_end-px) - var(--_start-px));position:relative;inset-block:0;inset-inline-start:var(--_start-px)}.handle{--md-ripple-color:var(--md-sys-color-primary);block-size:var(--_target-size);inline-size:var(--_target-size);border-radius:var(--_handle-shape);place-content:center;place-items:center;display:flex;position:absolute}.handle.start{inset-inline-start:calc(0px - var(--_half-target))}.handle.end{inset-inline-end:calc(0px - var(--_half-target))}.nub{height:var(--_handle-height);width:var(--_handle-width-end);border-radius:var(--_handle-shape);background:var(--md-sys-color-primary);transition:width var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);position:absolute}.start .nub{width:var(--_handle-width-start)}:host([disabled]) .nub{background:var(--md-sys-color-on-surface)}.onTop.isOverlapping .nub{border:1px solid var(--md-sys-color-surface)}.label{box-sizing:border-box;color:var(--md-sys-color-inverse-on-surface);background:var(--md-sys-color-inverse-surface);font:var(--md-sys-typography-label-large);opacity:0;border-radius:9999px;place-content:center;place-items:center;min-block-size:44px;min-inline-size:48px;padding:0 16px;transition:opacity 67ms linear;display:flex;position:absolute;inset-block-end:100%;transform:translateY(-2px)}:host(:not(:disabled)) :where(:has(input:active)) .label,:host(:not(:disabled)) :where(:has(input:focus-visible)) .label{opacity:1}@media (hover:hover) and (pointer:fine){:host(:not(:disabled)) :where(:has(input:hover)) .label{opacity:1}}input[type=range]{opacity:0;-webkit-tap-highlight-color:transparent;box-sizing:border-box;cursor:pointer;pointer-events:auto;appearance:none;width:100%;height:100%;margin:0;position:absolute}input[type=range]:focus{outline:0}:host(:not([disabled])) :has(input.start:active){--_handle-width-start:2px}:host(:not([disabled])) :has(input.end:active){--_handle-width-end:2px}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_target-size);inline-size:var(--_target-size);opacity:0;z-index:2}::-moz-range-thumb{appearance:none;block-size:var(--_target-size);inline-size:var(--_target-size);opacity:0;z-index:2;transform:scaleX(0)}.ranged input{--track-len:calc(100% - var(--_target-size));--mid-frac:calc(var(--_start) + ((var(--_end) - var(--_start)) / 2));--clip-px:calc(var(--_half-target) + var(--track-len) * var(--mid-frac))}.ranged input.start{clip-path:inset(0 calc(100% - var(--clip-px)) 0 0)}.ranged input.end{clip-path:inset(0 0 0 var(--clip-px))}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - var(--clip-px)))}.ranged input.end:dir(rtl){clip-path:inset(0 var(--clip-px) 0 0)}.onTop{z-index:1}`;

package/src/m3/slider/slider.js

@@ -52,56 +52,23 @@ export class M3Slider extends Slider {
             start: false,
             label: labelEnd
         };
-        return html` <div
-      class="container ${classMap(containerClasses)}"
-      style=${styleMap(containerStyles)}
-    >
-      ${when(this.range, ()=>this.renderInput(inputStartProps))}
-      ${this.renderInput(inputEndProps)} ${this.renderTrack()}
-      <div class="handles-padded">
-        <div class="handles">
-          ${when(this.range, ()=>this.renderHandle(handleStartProps))}
-          ${this.renderHandle(handleEndProps)}
-        </div>
-      </div>
-    </div>`;
+        return html`<div class="container ${classMap(containerClasses)}" style="${styleMap(containerStyles)}">${when(this.range, ()=>this.renderInput(inputStartProps))} ${this.renderInput(inputEndProps)} ${this.renderTrack()}<div class="handles-padded"><div class="handles">${when(this.range, ()=>this.renderHandle(handleStartProps))} ${this.renderHandle(handleEndProps)}</div></div></div>`;
     }
     renderTrack() {
-        return html`
-      <div class="track">
-        <div class="inactive-before"></div>
-        <div class="active"></div>
-        <div class="inactive-after"></div>
-      </div>
-      ${this.ticks ? html`
-              <div class="tickmarks">
-                <div class="inactive-before"></div>
-                <div class="active"></div>
-                <div class="inactive-after"></div>
-              </div>
-            ` : nothing}
-    `;
+        return html`<div class="track"><div class="inactive-before"></div><div class="active"></div><div class="inactive-after"></div></div>${this.ticks ? html`<div class="tickmarks"><div class="inactive-before"></div><div class="active"></div><div class="inactive-after"></div></div>` : nothing}`;
     }
     renderLabel(value) {
-        return html`<div class="label" aria-hidden="true">
-      <span part="label">${value}</span>
-    </div>`;
+        return html`<div class="label" aria-hidden="true"><span part="label">${value}</span></div>`;
     }
     renderHandle({ start, label }) {
         const onTop = !this.disabled && start === this.startOnTop;
         const isOverlapping = !this.disabled && this.handlesOverlapping;
         const name = start ? 'start' : 'end';
-        return html`<div
-      class="handle ${classMap({
+        return html`<div class="handle ${classMap({
             [name]: true,
             onTop,
             isOverlapping
-        })}"
-    >
-      <md-focus-ring part="focus-ring" for=${name}></md-focus-ring>
-      <div class="nub"></div>
-      ${when(this.labeled, ()=>this.renderLabel(label))}
-    </div>`;
+        })}"><md-focus-ring part="focus-ring" for="${name}"></md-focus-ring><div class="nub"></div>${when(this.labeled, ()=>this.renderLabel(label))}</div>`;
     }
 }
 M3Slider = _ts_decorate([

package/src/m3/switch/switch-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const switchStyles = css`:host{--_outline-color:var(--md-sys-color-outline);--_track-color:var(--md-sys-color-surface-container-highest);--_thumb-color:var(--md-sys-color-outline);--_icon-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-on-surface);background-color:color-mix(in srgb, var(--_track-color) var(--_track-opacity,100%), transparent);border-color:color-mix(in srgb, var(--_outline-color) var(--_outline-opacity,100%), transparent);box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;height:32px;transition:background-color var(--md-sys-motion-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-fast), border-color var(--md-sys-motion-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-fast);-webkit-user-select:none;user-select:none;vertical-align:top;border-style:solid;border-width:2px;border-radius:9999px;outline:0;place-content:center;place-items:center;width:52px;display:inline-grid;position:relative}:host(:state(checked)){--_outline-color:var(--md-sys-color-primary);--_track-color:var(--md-sys-color-primary);--_thumb-color:var(--md-sys-color-on-primary);--_icon-color:var(--md-sys-color-on-primary-container);--_ripple-color:var(--md-sys-color-primary)}:host(:disabled){--_outline-color:var(--md-sys-color-on-surface);--_outline-opacity:12%;--_track-color:var(--md-sys-color-surface-variant);--_track-opacity:12%;--_thumb-color:var(--md-sys-color-on-surface);--_thumb-opacity:38%;--_icon-color:var(--md-sys-color-surface-container-highest);cursor:default;pointer-events:none}:host(:disabled:state(checked)){--_outline-color:var(--md-sys-color-surface);--_track-color:var(--md-sys-color-on-surface);--_thumb-color:var(--md-sys-color-surface);--_thumb-opacity:100%;--_icon-color:var(--md-sys-color-on-surface)}:host([icons]:not(:state(checked)):not([checkedicononly])) [part~=icon-off],:host([icons]:state(checked)) [part~=icon-on]{--_icon-opacity:100%}:host([icons]:state(checked):disabled) [part~=icon-on]{--_icon-opacity:38%}@media (hover:hover) and (pointer:fine){:host(:hover){--_thumb-color:var(--md-sys-color-on-surface-variant)}:host(:state(checked):hover){--_thumb-color:var(--md-sys-color-primary-container)}}@media (forced-colors:active){:host{forced-color-adjust:none}}[part~=thumb]{--_thumb-diameter:16px;--_thumb-diff-default:20px;background-color:color-mix(in srgb, var(--_thumb-color) var(--_thumb-opacity,100%), transparent);height:var(--_thumb-diameter);transition:background-color var(--md-sys-motion-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-fast), width var(--md-sys-motion-exp-spatial-fast-duration) var(--md-sys-motion-exp-spatial-fast), height var(--md-sys-motion-exp-spatial-fast-duration) var(--md-sys-motion-exp-spatial-fast), margin var(--md-sys-motion-exp-spatial-fast-duration) var(--md-sys-motion-exp-spatial-fast);width:var(--_thumb-diameter);z-index:1;border-radius:50%;place-content:center;place-items:center;margin-inline-start:calc(var(--_thumb-diff-pointer,0px) - var(--_thumb-diff-default));display:grid;position:absolute}:host(:state(checked)) [part~=thumb]{--_thumb-diameter:24px;--_thumb-diff-default:-20px;background-color:var(--_thumb-color)}:host([icons]:not([checkedicononly])) [part~=thumb]{--_thumb-diameter:24px}:host(:active) [part~=thumb]{--_thumb-color:var(--md-sys-color-on-surface-variant);--_thumb-diameter:28px!important}:host(:state(checked):active) [part~=thumb]{--_thumb-color:var(--md-sys-color-primary-container)}[part~=icons]{fill:color-mix(in srgb, var(--_icon-color) var(--_icon-opacity,0%), transparent);width:16px;height:16px;transition:fill 67ms linear;position:absolute}md-focus-ring{inset:-4px}md-ripple{color:var(--_ripple-color);height:40px;inset:unset;width:40px}`;
+export const switchStyles = css`:host{--_outline-color:var(--md-sys-color-outline);--_track-color:var(--md-sys-color-surface-container-highest);--_thumb-color:var(--md-sys-color-outline);--_icon-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-on-surface);background-color:color-mix(in srgb,var(--_track-color) var(--_track-opacity,100%),transparent);border-color:color-mix(in srgb,var(--_outline-color) var(--_outline-opacity,100%),transparent);box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;height:32px;transition:background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast),border-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);-webkit-user-select:none;user-select:none;vertical-align:top;border-style:solid;border-width:2px;border-radius:9999px;outline:0;place-content:center;place-items:center;width:52px;display:inline-grid;position:relative}:host(:state(checked)){--_outline-color:var(--md-sys-color-primary);--_track-color:var(--md-sys-color-primary);--_thumb-color:var(--md-sys-color-on-primary);--_icon-color:var(--md-sys-color-on-primary-container);--_ripple-color:var(--md-sys-color-primary)}:host(:disabled){--_outline-color:var(--md-sys-color-on-surface);--_outline-opacity:12%;--_track-color:var(--md-sys-color-surface-variant);--_track-opacity:12%;--_thumb-color:var(--md-sys-color-on-surface);--_thumb-opacity:38%;--_icon-color:var(--md-sys-color-surface-container-highest);cursor:default;pointer-events:none}:host(:disabled:state(checked)){--_outline-color:var(--md-sys-color-surface);--_track-color:var(--md-sys-color-on-surface);--_thumb-color:var(--md-sys-color-surface);--_thumb-opacity:100%;--_icon-color:var(--md-sys-color-on-surface)}:host([icons]:not(:state(checked)):not([checkedicononly])) [part~=icon-off],:host([icons]:state(checked)) [part~=icon-on]{--_icon-opacity:100%}:host([icons]:state(checked):disabled) [part~=icon-on]{--_icon-opacity:38%}@media (hover:hover) and (pointer:fine){:host(:hover){--_thumb-color:var(--md-sys-color-on-surface-variant)}:host(:state(checked):hover){--_thumb-color:var(--md-sys-color-primary-container)}}@media (forced-colors:active){:host{forced-color-adjust:none}}[part~=thumb]{--_thumb-diameter:16px;--_thumb-diff-default:20px;background-color:color-mix(in srgb,var(--_thumb-color) var(--_thumb-opacity,100%),transparent);height:var(--_thumb-diameter);transition:background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast),width var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast),height var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast),margin var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);width:var(--_thumb-diameter);z-index:1;border-radius:50%;place-content:center;place-items:center;margin-inline-start:calc(var(--_thumb-diff-pointer,0px) - var(--_thumb-diff-default));display:grid;position:absolute}:host(:state(checked)) [part~=thumb]{--_thumb-diameter:24px;--_thumb-diff-default:-20px;background-color:var(--_thumb-color)}:host([icons]:not([checkedicononly])) [part~=thumb]{--_thumb-diameter:24px}:host(:active) [part~=thumb]{--_thumb-color:var(--md-sys-color-on-surface-variant);--_thumb-diameter:28px!important}:host(:state(checked):active) [part~=thumb]{--_thumb-color:var(--md-sys-color-primary-container)}[part~=icons]{fill:color-mix(in srgb,var(--_icon-color) var(--_icon-opacity,0),transparent);width:16px;height:16px;transition:fill 67ms linear;position:absolute}md-focus-ring{inset:-4px}md-ripple{color:var(--_ripple-color);height:40px;inset:unset;width:40px}`;

package/src/m3/switch/switch.js

@@ -16,32 +16,13 @@ export class M3Switch extends ToggleButton {
         ];
     }
     render() {
-        return html`
-      <md-focus-ring></md-focus-ring>
-      <div part="thumb">
-        <md-ripple spacebehavior="always"></md-ripple>
-        <span part="target"></span>
-        ${this.renderOffIcon()}${this.renderOnIcon()}
-      </div>
-    `;
+        return html`<md-focus-ring></md-focus-ring><div part="thumb"><md-ripple spacebehavior="always"></md-ripple><span part="target"></span> ${this.renderOffIcon()}${this.renderOnIcon()}</div>`;
     }
     renderOnIcon() {
-        return html`
-      <svg part="icons icon-on" viewBox="0 0 24 24" aria-hidden="true">
-        <path
-          d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z"
-        />
-      </svg>
-    `;
+        return html`<svg part="icons icon-on" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z"/></svg>`;
     }
     renderOffIcon() {
-        return html`
-      <svg part="icons icon-off" viewBox="0 0 24 24" aria-hidden="true">
-        <path
-          d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z"
-        />
-      </svg>
-    `;
+        return html`<svg part="icons icon-off" viewBox="0 0 24 24" aria-hidden="true"><path d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z"/></svg>`;
     }
     connectedCallback() {
         super.connectedCallback();

package/src/m3/system/base.css

@@ -1,3 +1,2 @@
 @import './elevation.css';
-@import './motion.css';
 @import './typography.css';

package/src/m3/system/typography.css

@@ -3,15 +3,15 @@
 
   --md-sys-typography-display-large: 400 3.5625rem / 4rem
     var(--md-sys-typography-family);
-  --md-sys-typography-display-medium: 400 2.8125rem / 3.5rem
+  --md-sys-typography-display-medium: 400 2.8125rem / 3.25rem
     var(--md-sys-typography-family);
-  --md-sys-typography-display-small: 400 2.25rem / 3rem
+  --md-sys-typography-display-small: 400 2.25rem / 2.75rem
     var(--md-sys-typography-family);
-  --md-sys-typography-headline-large: 400 2.5rem / 3.125rem
+  --md-sys-typography-headline-large: 400 2rem / 2.5rem
     var(--md-sys-typography-family);
-  --md-sys-typography-headline-medium: 400 2.25rem / 2.75rem
+  --md-sys-typography-headline-medium: 400 1.75rem / 2.25rem
     var(--md-sys-typography-family);
-  --md-sys-typography-headline-small: 400 2rem / 2.5rem
+  --md-sys-typography-headline-small: 400 1.5rem / 2rem
     var(--md-sys-typography-family);
   --md-sys-typography-title-large: 400 1.375rem / 1.75rem
     var(--md-sys-typography-family);

package/src/m3/tab/tab-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const tabStyles = css`:host{--md-focus-ring-shape:12px;box-sizing:border-box;color:var(--md-sys-color-on-surface-variant);cursor:pointer;font:var(--md-sys-typography-title-small);-webkit-tap-highlight-color:transparent;text-wrap-mode:nowrap;user-select:none;-webkit-user-select-:none;outline:none;flex-shrink:0;justify-content:center;padding:0 16px;display:inline-flex;position:relative}:host([selected]){color:var(--_tab-selected-color)}:host([selected]) md-focus-ring{margin-bottom:calc(var(--_tab-indicator-height) + 2px)}[part=content]{flex-direction:var(--_tab-flex-dir,row);align-items:center;gap:var(--_tab-gap,8px);height:var(--_tab-height,48px);justify-content:center;display:inline-flex}[part~=icon]{fill:currentColor;block-size:1em;inline-size:1em;font-size:24px}`;
+export const tabStyles = css`:host{--md-focus-ring-shape:12px;box-sizing:border-box;color:var(--md-sys-color-on-surface-variant);cursor:pointer;font:var(--md-sys-typography-title-small);-webkit-tap-highlight-color:transparent;text-wrap-mode:nowrap;user-select:none;outline:0;flex-shrink:0;justify-content:center;padding:0 16px;display:inline-flex;position:relative}:host([selected]){color:var(--_tab-selected-color)}:host([selected]) md-focus-ring{margin-bottom:calc(var(--_tab-indicator-height) + 2px)}[part=content]{flex-direction:var(--_tab-flex-dir,row);align-items:center;gap:var(--_tab-gap,8px);height:var(--_tab-height,48px);justify-content:center;display:inline-flex}[part~=icon]{fill:currentColor;block-size:1em;inline-size:1em;font-size:24px}`;

package/src/m3/tab/tab.js

@@ -14,15 +14,7 @@ export class M3Tab extends Tab {
         ];
     }
     render() {
-        return html`
-      <md-focus-ring inward></md-focus-ring>
-      <md-ripple inward></md-ripple>
-      <span part="target"></span>
-      <div part="content">
-        <slot part="icon" name="icon" aria-hidden="true"></slot>
-        <slot part="label"></slot>
-      </div>
-    `;
+        return html`<md-focus-ring inward></md-focus-ring><md-ripple inward></md-ripple><span part="target"></span><div part="content"><slot part="icon" name="icon" aria-hidden="true"></slot><slot part="label"></slot></div>`;
     }
 }
 _ts_decorate([

package/src/m3/tab/tabs-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const tabsStyles = css`:host{--_tab-selected-color:var(--md-sys-color-primary);--_tab-indicator-height:3px;border-bottom:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none;display:block;position:relative;overflow:auto hidden}[part=tablist]{display:flex}[part=indicator]{height:var(--_tab-indicator-height);background-color:var(--md-sys-color-primary);transition:var(--md-sys-motion-std-effects-slow-duration) var(--md-sys-motion-std-effects-slow);will-change:left, width;border-radius:3px 3px 0 0;position:absolute;bottom:0}::slotted(*){flex:1}:host([secondary]){--_tab-selected-color:var(--md-sys-color-on-surface);--_tab-indicator-height:2px}:host([secondary]) [part=indicator]{border-radius:0}:host([iconsabove]){--_tab-flex-dir:column;--_tab-height:64px;--_tab-gap:2px}`;
+export const tabsStyles = css`:host{--_tab-selected-color:var(--md-sys-color-primary);--_tab-indicator-height:3px;border-bottom:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none;display:block;position:relative;overflow:auto hidden}[part=tablist]{display:flex}[part=indicator]{height:var(--_tab-indicator-height);background-color:var(--md-sys-color-primary);transition:left var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default),width var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);will-change:left,width;border-radius:3px 3px 0 0;position:absolute;bottom:0}::slotted(*){flex:1}:host([secondary]){--_tab-selected-color:var(--md-sys-color-on-surface);--_tab-indicator-height:2px}:host([secondary]) [part=indicator]{border-radius:0}:host([iconsabove]){--_tab-flex-dir:column;--_tab-height:64px;--_tab-gap:2px}`;