@vollowx/seele 0.13.5 → 0.13.6

package/src/m3/list/list.js

@@ -1,24 +1,25 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { customElement, property } from 'lit/decorators.js';
 import { List } from '../../base/list.js';
 import { listStyles } from './list-styles.css.js';
-export class M3List extends List {
-    static{
-        this.styles = [
-            listStyles
-        ];
-    }
-    constructor(...args){
-        super(...args), // FIXME: Might cause a long list to scroll more than expected
+/**
+ * @tag md-list
+ *
+ * TODO: Use listController
+ */
+let M3List = class M3List extends List {
+    constructor() {
+        // FIXME: Might cause a long list to scroll more than expected
         // override readonly _scrollPadding = 4;
+        super(...arguments);
         this.color = 'standard';
     }
-}
-_ts_decorate([
-    property({
-        reflect: true
-    })
+    static { this.styles = [listStyles]; }
+};
+__decorate([
+    property({ reflect: true })
 ], M3List.prototype, "color", void 0);
-M3List = _ts_decorate([
+M3List = __decorate([
     customElement('md-list')
 ], M3List);
+export { M3List };

package/src/m3/loading-indicator/loading-indicator.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+declare const M3LoadingIndicator_base: Constructor<import("../../base/mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+/**
+ * @tag md-loading
+ *
+ * TODO: shape system, https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/MaterialShapes.kt?q=file:androidx%2Fcompose%2Fmaterial3%2FMaterialShapes.kt%20class:androidx.compose.material3.MaterialShapes
+ * NOTE: this component is not following them color system dynamically, but
+ *       pulls the color once per second
+ * NOTE: the pantagon is completely not following the shape system
+ */
+export declare class M3LoadingIndicator extends M3LoadingIndicator_base {
+    #private;
+    contained: boolean;
+    $canvas: HTMLCanvasElement;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    constructor();
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-loading': M3LoadingIndicator;
+    }
+}
+export {};

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

@@ -1,5 +1,5 @@
-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 { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { InternalsAttached, internals } from '../../base/mixins/internals-attached.js';
@@ -11,21 +11,30 @@ 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
-        ];
-    }
+/**
+ * @tag md-loading
+ *
+ * TODO: shape system, https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/MaterialShapes.kt?q=file:androidx%2Fcompose%2Fmaterial3%2FMaterialShapes.kt%20class:androidx.compose.material3.MaterialShapes
+ * NOTE: this component is not following them color system dynamically, but
+ *       pulls the color once per second
+ * NOTE: the pantagon is completely not following the shape system
+ */
+let M3LoadingIndicator = class M3LoadingIndicator extends InternalsAttached(LitElement) {
+    static { this.styles = [loadingIndicatorStyles]; }
     render() {
-        return html`<canvas width="${CANVAS_SIZE}" height="${CANVAS_SIZE}" aria-hidden="true"></canvas>`;
+        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)=>{
+    constructor() {
+        super();
+        this.contained = false;
+        this.#animationFrame = 0;
+        this.#startTime = 0;
+        this.#color = '#ff0000';
+        this.#animate = (now) => {
             if (this.#startTime === 0) {
                 this.#startTime = now;
             }
@@ -36,7 +45,7 @@ export class M3LoadingIndicator extends InternalsAttached(LitElement) {
             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;
+            const globalRotation = ((elapsed % FULL_ROTATION_MS) / FULL_ROTATION_MS) * 360;
             this.#draw(from, to, progress, stepRotation + globalRotation, scalePulse(morphElapsed));
             this.#animationFrame = requestAnimationFrame(this.#animate);
         };
@@ -56,25 +65,33 @@ export class M3LoadingIndicator extends InternalsAttached(LitElement) {
     }
     #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;
+        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;
+        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.rotate((rotation * Math.PI) / 180);
         ctx.translate(-CENTER, -CENTER);
         ctx.beginPath();
-        from.points.forEach((point, i)=>{
+        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);
+            if (i === 0)
+                ctx.moveTo(x, y);
+            else
+                ctx.lineTo(x, y);
         });
         ctx.closePath();
         ctx.fillStyle = this.#color;
@@ -82,239 +99,174 @@ export class M3LoadingIndicator extends InternalsAttached(LitElement) {
         ctx.restore();
     }
     #animate;
-}
-_ts_decorate([
-    property({
-        type: Boolean,
-        reflect: true
-    })
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], M3LoadingIndicator.prototype, "contained", void 0);
-_ts_decorate([
+__decorate([
     query('canvas')
 ], M3LoadingIndicator.prototype, "$canvas", void 0);
-M3LoadingIndicator = _ts_decorate([
+M3LoadingIndicator = __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
-})=>{
+export { 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
-    };
+    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
-    }));
+    [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));
+    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 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
-        ]
+        [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 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 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;
+        const angle = (i * Math.PI) / points;
         return {
             x: CENTER + Math.cos(angle) * radius,
             y: CENTER + Math.sin(angle) * radius,
-            outer
+            outer,
         };
     });
-    const tangents = anchors.map((_, i)=>{
+    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 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 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 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
+                y: anchor.y - tangent.y * length,
             },
             out: {
                 x: anchor.x + tangent.x * length,
-                y: anchor.y + tangent.y * length
-            }
+                y: anchor.y + tangent.y * length,
+            },
         };
     });
-    return {
-        anchors,
-        handles
-    };
+    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
+        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 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){
+    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)
-        });
+        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)=>{
+    anchors.forEach((anchor, i) => {
         const next = (i + 1) % anchors.length;
-        for(let step = 0; step < 18; step++){
+        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)
-    };
+    return { points: resample(dense) };
 }
 function shifted(points, offset) {
-    return points.map((_, i)=>points[(i + offset) % points.length]);
+    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++){
+    for (let offset = 0; offset < to.points.length; offset++) {
         let score = 0;
-        for(let i = 0; i < from.points.length; i += 4){
+        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;
+            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)
-    };
+    return { ...to, points: shifted(to.points, bestOffset) };
 }
-const sampledSequence = sequence.map(sampleShape).reduce((aligned, shape)=>{
+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-item.d.ts

@@ -0,0 +1,15 @@
+import { M3ListItem } from '../list/list-item.js';
+declare const M3MenuItem_base: typeof M3ListItem;
+/**
+ * @tag md-menu-item
+ *
+ * @slot - contents in md-item
+ */
+export declare class M3MenuItem extends M3MenuItem_base {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-menu-item': M3MenuItem;
+    }
+}
+export {};

package/src/m3/menu/menu-item.js

@@ -1,9 +1,15 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import { M3ListItem } from '../list/list-item.js';
 import { MenuItemMixin } from '../../base/menu-item.js';
-export class M3MenuItem extends MenuItemMixin(M3ListItem) {
-}
-M3MenuItem = _ts_decorate([
+/**
+ * @tag md-menu-item
+ *
+ * @slot - contents in md-item
+ */
+let M3MenuItem = class M3MenuItem extends MenuItemMixin(M3ListItem) {
+};
+M3MenuItem = __decorate([
     customElement('md-menu-item')
 ], M3MenuItem);
+export { M3MenuItem };

package/src/m3/menu/menu.d.ts

@@ -0,0 +1,22 @@
+import { Menu } from '../../base/menu.js';
+/**
+ * @tag md-menu
+ *
+ * @csspart menu-surface
+ * @csspart list
+ *
+ * @slot - menu items
+ */
+export declare class M3Menu extends Menu {
+    readonly _durations: {
+        show: number;
+        hide: number;
+    };
+    color: 'standard' | 'vibrant';
+    static styles: any[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-menu': M3Menu;
+    }
+}

package/src/m3/menu/menu.js

@@ -1,28 +1,30 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import { property } from 'lit/decorators.js';
 import { Menu } from '../../base/menu.js';
 import { menuStyles } from './menu-styles.css.js';
-export class M3Menu extends Menu {
-    static{
-        this.styles = [
-            menuStyles
-        ];
-    }
-    constructor(...args){
-        super(...args), this._durations = {
-            show: 300,
-            hide: 150
-        }, // FIXME: Might cause a long list to scroll more than expected
+/**
+ * @tag md-menu
+ *
+ * @csspart menu-surface
+ * @csspart list
+ *
+ * @slot - menu items
+ */
+let M3Menu = class M3Menu extends Menu {
+    constructor() {
+        super(...arguments);
+        this._durations = { show: 300, hide: 150 };
+        // FIXME: Might cause a long list to scroll more than expected
         // override readonly _scrollPadding = 4;
         this.color = 'standard';
     }
-}
-_ts_decorate([
-    property({
-        reflect: true
-    })
+    static { this.styles = [menuStyles]; }
+};
+__decorate([
+    property({ reflect: true })
 ], M3Menu.prototype, "color", void 0);
-M3Menu = _ts_decorate([
+M3Menu = __decorate([
     customElement('md-menu')
 ], M3Menu);
+export { M3Menu };

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const radioStyles = css`:host{--_default:var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);--_slow:var(--md-sys-motion-effects-slow-duration) var(--md-sys-motion-effects-slow);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:20px;outline:0;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex;position:relative}:host:before,:host:after{content:"";box-sizing:border-box;border-radius:9999px;position:absolute}:host:before{z-index:1;background-color:var(--md-sys-color-on-surface-variant);width:20px;height:20px;transition:background var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast)}.middle{background-color:var(--md-sys-color-surface);z-index:2;width:16px;height:16px;animation:uncheck-middle-2 var(--_slow) var(--md-sys-motion-effects-default-duration);border-radius:9999px}:host:after{z-index:3;background-color:var(--md-sys-color-primary);width:10px;height:10px;animation:uncheck-inner-1 var(--_default), uncheck-inner-2 var(--_slow) var(--md-sys-motion-effects-default-duration);transform:scale(0)}@keyframes uncheck-middle-2{0%{z-index:4;transform:scale(0)}to{z-index:4;transform:scale(1)}}@keyframes uncheck-inner-1{0%{background-color:var(--md-sys-color-primary);transform:scale(1)}to{background-color:var(--md-sys-color-on-surface-variant);transform:scale(1.6)}}@keyframes uncheck-inner-2{0%{background-color:var(--md-sys-color-on-surface-variant);transform:scale(1.6)}to{background-color:var(--md-sys-color-on-surface-variant);transform:scale(1.6)}}:host([checked]):before{background-color:var(--md-sys-color-primary)}:host([checked]) .middle{animation:check-middle-1 var(--_default), check-middle-2 var(--_slow) var(--md-sys-motion-effects-default-duration);animation-fill-mode:forwards}:host([checked]):after{animation:check-inner-2 var(--_slow) var(--md-sys-motion-effects-default-duration);animation-fill-mode:forwards}@keyframes check-middle-1{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes check-middle-2{0%{transform:scale(.625)}to{transform:scale(1)}}@keyframes check-inner-2{0%,to{transform:scale(1)}}:host([disabled]){pointer-events:none}:host([disabled]):before,:host([disabled]):after{background:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}`;
+export const radioStyles = css`:host{--_d:var(--md-sys-motion-effects-default-duration);--_default:var(--_d) var(--md-sys-motion-effects-default);--_slow:var(--md-sys-motion-effects-slow-duration) var(--md-sys-motion-effects-slow);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:20px;outline:0;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex;position:relative}:host:before,.middle,:host:after{content:"";box-sizing:border-box;border-radius:50%;position:absolute;animation-fill-mode:forwards!important}:host:before{z-index:1;background-color:var(--md-sys-color-on-surface-variant);width:20px;height:20px;transition:background var(--_default)}.middle{z-index:2;background-color:var(--md-sys-color-surface);width:16px;height:16px}:host:after{z-index:3;background-color:var(--md-sys-color-primary);width:10px;height:10px;transform:scale(0)}:host(:state(unchecking)) .middle{animation:uncheck-mid-2 var(--_slow) var(--_d)}:host(:state(unchecking)):after{animation:uncheck-inner-1 var(--_default), uncheck-inner-2 var(--_slow) var(--_d)}:host([checked]):before{background-color:var(--md-sys-color-primary)}:host([checked]):after{transform:scale(1)}:host(:state(checking)) .middle{animation:check-mid-1 var(--_default), check-mid-2 var(--_slow) var(--_d)}:host(:state(checking)):after{animation:check-inner-1 var(--_default), check-inner-2 var(--_slow) var(--_d)}@keyframes uncheck-mid-2{0%,to{z-index:4}0%{transform:scale(0)}to{transform:scale(1)}}@keyframes uncheck-inner-1{0%{background-color:var(--md-sys-color-primary);transform:scale(1)}to{background-color:var(--md-sys-color-on-surface-variant);transform:scale(1.6)}}@keyframes uncheck-inner-2{0%{transform:scale(1.6)}to{transform:scale(1.6)}}@keyframes check-mid-1{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes check-mid-2{0%{transform:scale(.625)}to{transform:scale(1)}}@keyframes check-inner-1{0%,to{transform:scale(0)}}@keyframes check-inner-2{0%,to{transform:scale(1)}}:host([disabled]){pointer-events:none}:host([disabled]):before,:host([disabled]):after{background:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}`;

package/src/m3/radio/radio.d.ts

@@ -0,0 +1,17 @@
+import { PropertyValues } from 'lit';
+import { Radio } from '../../base/radio.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+/**
+ * @tag md-radio
+ */
+export declare class M3Radio extends Radio {
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-radio': M3Radio;
+    }
+}

package/src/m3/radio/radio.js

@@ -1,22 +1,33 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { html } from 'lit';
 import { Radio } from '../../base/radio.js';
 import { customElement } from '../../core/decorators.js';
+import { internals } from '../../base/mixins/internals-attached.js';
 import { radioStyles } from './radio-styles.css.js';
 import { targetStyles } from '../target-styles.css.js';
 import '../focus-ring/focus-ring.js';
 import '../ripple/ripple.js';
-export class M3Radio extends Radio {
-    static{
-        this.styles = [
-            targetStyles,
-            radioStyles
-        ];
-    }
+/**
+ * @tag md-radio
+ */
+let M3Radio = class M3Radio extends Radio {
+    static { this.styles = [targetStyles, radioStyles]; }
     render() {
-        return html`<md-focus-ring></md-focus-ring><md-ripple></md-ripple><span part="target"></span> <span class="middle"></span>`;
+        return html `<md-focus-ring></md-focus-ring><md-ripple></md-ripple><span part="target"></span> <span class="middle"></span>`;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('checked')) {
+            const oldValue = changedProperties.get('checked');
+            if (oldValue === undefined)
+                return;
+            this[internals].states.delete('checking');
+            this[internals].states.delete('unchecking');
+            this[internals].states.add(this.checked ? 'checking' : 'unchecking');
+        }
     }
-}
-M3Radio = _ts_decorate([
+};
+M3Radio = __decorate([
     customElement('md-radio')
 ], M3Radio);
+export { M3Radio };