@vollowx/seele 0.13.7 → 0.13.9

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-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)}`;
+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}.icon{z-index:1;width:20px;height:20px}.ring{fill:none;r:9px;stroke:var(--md-sys-color-on-surface-variant);stroke-width:2px;transition:stroke var(--_default);will-change:r, stroke-width}:host(:state(checked)) .ring{stroke:var(--md-sys-color-primary)}.dot{fill:var(--md-sys-color-primary);r:0px;will-change:r}:host(:state(checked)) .dot{r:5px}:host(:state(checking)) .ring{animation:check-ring-1 var(--_default), check-ring-2 var(--_slow) var(--_d)}:host(:state(checking)) .dot{animation:check-dot-1 var(--_default), check-dot-2 var(--_slow) var(--_d)}@keyframes check-ring-1{0%{r:9px;stroke-width:2px}to{r:4.5px;stroke-width:9px}}@keyframes check-ring-2{0%{r:8px;stroke-width:2px}to{r:9px;stroke-width:2px}}@keyframes check-dot-1{0%,to{r:0px}}@keyframes check-dot-2{0%{r:7px}to{r:5px}}:host(:state(unchecking)) .ring{animation:uncheck-ring-1 var(--_default), uncheck-ring-2 var(--_slow) var(--_d)}:host(:state(unchecking)) .dot{animation:uncheck-dot-1 var(--_default)}@keyframes uncheck-ring-1{0%{r:9px;stroke:var(--md-sys-color-primary);stroke-width:2px}to{r:8px;stroke:var(--md-sys-color-on-surface-variant);stroke-width:2px}}@keyframes uncheck-ring-2{0%{r:4.5px;stroke-width:9px}to{r:9px;stroke-width:2px}}@keyframes uncheck-dot-1{0%{fill:var(--md-sys-color-primary);r:5px}to{fill:var(--md-sys-color-on-surface-variant);r:7.5px}}:host([disabled]){pointer-events:none}:host([disabled]) .ring{stroke:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}:host([disabled]) .dot{fill:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}@media (forced-colors:active){:host{--md-sys-color-primary:SelectedItem;--md-sys-color-on-surface-variant:CanvasText}:host(:disabled) .ring{stroke:graytext}:host(:disabled) .dot{fill:graytext}}`;

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

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

package/src/m3/radio/radio.js

@@ -1,19 +1,24 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
-import { Radio } from '../../base/radio.js';
+import { query } from 'lit/decorators.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 { Radio } from '../../base/radio.js';
 import '../focus-ring/focus-ring.js';
 import '../ripple/ripple.js';
+import { targetStyles } from '../target-styles.css.js';
+import { radioStyles } from './radio-styles.css.js';
 /**
  * @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 enterbehavior="none"></md-ripple><span part="target"></span> <svg class="icon" viewBox="0 0 20 20" aria-hidden="true"><circle class="ring" cx="10" cy="10" r="9"/><circle class="dot" cx="10" cy="10" r="0"/></svg>`;
+    }
+    firstUpdated() {
+        // SSR'd <md-radio> components don't have their labels set up on time
+        this.$ripple.attach(this, true);
     }
     updated(changedProperties) {
         super.updated(changedProperties);
@@ -27,6 +32,9 @@ let M3Radio = class M3Radio extends Radio {
         }
     }
 };
+__decorate([
+    query('md-ripple')
+], M3Radio.prototype, "$ripple", void 0);
 M3Radio = __decorate([
     customElement('md-radio')
 ], M3Radio);

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{--_color:var(--md-ripple-color,currentColor);border-radius:inherit;pointer-events:none;display:block;position:absolute;inset:0;overflow:hidden}[part~=ripple]{background-image:radial-gradient(closest-side, var(--_color) max(calc(100% - 70px), 65%), transparent 100%);position:absolute;top:0;left:0}:host:before{background-color:var(--_color);border-radius:inherit;content:"";opacity:0;transition:opacity 67ms linear;display:block;position:absolute;inset:0}:host(:state(hover)):before{opacity:.08}@media (forced-colors:active){:host{--_color:var(--md-ripple-color,Highlight)}}`;

package/src/m3/ripple/ripple.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { handleControlChange } from '../../base/mixins/attachable.js';
 declare const M3Ripple_base: Constructor<import("../../base/mixins/attachable.js").AttachableInterface> & Constructor<import("../../base/mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
 /**
  * @tag md-ripple
@@ -19,21 +20,10 @@ export declare class M3Ripple extends M3Ripple_base {
     handlePointerLeave: () => void;
     handlePointerDown: (e: PointerEvent) => void;
     handlePointerUp: () => void;
-    handleControlChange(prev?: HTMLElement | null, next?: HTMLElement | HTMLInputElement | null): void;
-    calculateRipple(e?: MouseEvent | null): {
-        startCenter: {
-            x: number;
-            y: number;
-        };
-        endCenter: {
-            x: number;
-            y: number;
-        };
-        radius: number;
-    };
+    [handleControlChange](prev?: HTMLElement | null, next?: HTMLElement | null): void;
     addRipple(e?: MouseEvent | null): void;
     removeRipple(ripple: HTMLSpanElement): void;
-    removeRippleAll(): void;
+    keepLastRipple(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/ripple/ripple.js

@@ -2,16 +2,16 @@ import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { customElement } from '../../core/decorators.js';
-import { Attachable } from '../../base/mixins/attachable.js';
+import { Attachable, handleControlChange, } from '../../base/mixins/attachable.js';
 import { InternalsAttached, internals, } from '../../base/mixins/internals-attached.js';
 import { rippleStyles } from './ripple-styles.css.js';
 const PRESS_GROW_MS = 450;
 const MINIMUM_PRESS_MS = 225;
 const OPACITY_IN_MS = 105;
 const OPACITY_OUT_MS = 375;
-function distance({ x: ax, y: ay }, { x: bx, y: by }) {
+const distance = ({ x: ax, y: ay }, { x: bx, y: by }) => {
     return Math.sqrt((ax - bx) ** 2 + (ay - by) ** 2);
-}
+};
 /**
  * @tag md-ripple
  *
@@ -32,7 +32,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             if ((e.key === 'Enter' && this.enterBehavior === 'always') ||
                 (e.key === ' ' && this.spaceBehavior === 'always')) {
                 this.addRipple();
-                this.removeRippleAll();
+                this.keepLastRipple();
             }
             else if (e.key === ' ' && this.spaceBehavior === 'once') {
                 if (!this.#spaceKeyDown)
@@ -43,7 +43,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
         this.handleKeyUp = (e) => {
             if (e.key === ' ' && this.spaceBehavior === 'once') {
                 this.#spaceKeyDown = false;
-                this.removeRippleAll();
+                this.keepLastRipple();
             }
         };
         this.handlePointerEnter = (e) => {
@@ -56,7 +56,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
         this.handlePointerLeave = () => {
             this[internals].states.delete('hover');
             if (this.#pointerDown && this.clickBehavior === 'always')
-                this.removeRippleAll();
+                this.keepLastRipple();
         };
         this.handlePointerDown = (e) => {
             if (e.pointerType === 'mouse')
@@ -65,7 +65,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             document.addEventListener('touchcancel', this.handlePointerUp);
             document.addEventListener('touchend', this.handlePointerUp);
             document.addEventListener('touchmove', this.handlePointerUp);
-            if (e.button === 2)
+            if (e.button !== 0)
                 return;
             if (this.clickBehavior === 'always')
                 this.addRipple(e);
@@ -76,42 +76,40 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             document.removeEventListener('touchcancel', this.handlePointerUp);
             document.removeEventListener('touchend', this.handlePointerUp);
             document.removeEventListener('touchmove', this.handlePointerUp);
-            this.removeRippleAll();
+            this.keepLastRipple();
         };
         this[internals].ariaHidden = 'true';
     }
     #spaceKeyDown;
     #pointerDown;
     #lastTime;
-    handleControlChange(prev = null, next = null) {
+    [handleControlChange](prev = null, next = null) {
         const eventHandlers = {
-            keydown: this.handleKeyDown,
-            keyup: this.handleKeyUp,
-            pointerenter: this.handlePointerEnter,
-            pointerleave: this.handlePointerLeave,
-            pointerdown: this.handlePointerDown,
+            keydown: { fn: this.handleKeyDown, kbd: true },
+            keyup: { fn: this.handleKeyUp, kbd: true },
+            pointerenter: { fn: this.handlePointerEnter, kbd: false },
+            pointerleave: { fn: this.handlePointerLeave, kbd: false },
+            pointerdown: { fn: this.handlePointerDown, kbd: false },
         };
-        Object.keys(eventHandlers).forEach((eventName) => {
-            // @ts-ignore
-            prev?.labels?.forEach((label) => label.removeEventListener(eventName, eventHandlers[eventName]));
-            prev?.removeEventListener(eventName, eventHandlers[eventName]);
+        Object.entries(eventHandlers).forEach(([eventName, { fn, kbd }]) => {
+            prev?.labels?.forEach((label) => label.removeEventListener(eventName, fn));
+            prev?.removeEventListener(eventName, fn);
             // Check if control is nested in label, if so, only bind to label
             let isNestedInLabel = false;
-            // @ts-ignore
             next?.labels?.forEach((label) => {
-                if (label.contains(next))
+                if (label.contains(next)) {
                     isNestedInLabel = true;
+                }
+                if (!kbd) {
+                    label.addEventListener(eventName, fn);
+                }
             });
-            if (isNestedInLabel) {
-                // @ts-ignore
-                next.labels?.forEach((label) => label.addEventListener(eventName, eventHandlers[eventName]));
-            }
-            else {
-                next?.addEventListener(eventName, eventHandlers[eventName]);
+            if (!isNestedInLabel || kbd) {
+                next?.addEventListener(eventName, fn);
             }
         });
     }
-    calculateRipple(e = null) {
+    #calculateRipple(e = null) {
         const containerRect = this.getBoundingClientRect();
         const containerMiddle = {
             x: containerRect.width / 2,
@@ -119,7 +117,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
         };
         const centered = !e;
         const endCenter = containerMiddle;
-        let startCenter = endCenter;
+        let startCenter = { ...endCenter };
         if (!centered) {
             startCenter.x = e.clientX - containerRect.left;
             startCenter.y = e.clientY - containerRect.top;
@@ -134,7 +132,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
         return { startCenter, endCenter, radius };
     }
     addRipple(e = null) {
-        const { startCenter, endCenter, radius } = this.calculateRipple(e);
+        const { startCenter, endCenter, radius } = this.#calculateRipple(e);
         const diameter = radius * 2 + 'px';
         const translateStart = `${startCenter.x - radius}px ${startCenter.y - radius}px`;
         const translateEnd = `${endCenter.x - radius}px ${endCenter.y - radius}px`;
@@ -156,7 +154,6 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             scale: [0.2, 1.35],
         }, {
             duration: PRESS_GROW_MS,
-            // TODO: Control by global variables
             easing: 'cubic-bezier(0.2, 0, 0, 1)',
             fill: 'forwards',
         });
@@ -174,7 +171,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             animation.onfinish = animation.oncancel = () => ripple.remove();
         }, Math.max(MINIMUM_PRESS_MS - (Date.now() - this.#lastTime), 0));
     }
-    removeRippleAll() {
+    keepLastRipple() {
         for (const ripple of this.$ripples.splice(0))
             this.removeRipple(ripple);
     }

package/src/m3/{system → styles}/defaults.css

@@ -2,7 +2,7 @@ body {
   accent-color: var(--md-sys-color-primary);
   background-color: var(--md-sys-color-background);
   color: var(--md-sys-color-on-background);
-  font-family: var(--md-sys-typography-family);
+  font: var(--md-sys-typography-body-large);
 }
 
 ::selection {

package/src/m3/styles/motion-expressive.css

@@ -0,0 +1,15 @@
+:root {
+  --md-sys-motion-spatial-fast: cubic-bezier(0.42, 1.67, 0.21, 0.9);
+  --md-sys-motion-spatial-fast-duration: 350ms;
+  --md-sys-motion-spatial-default: cubic-bezier(0.38, 1.21, 0.22, 1);
+  --md-sys-motion-spatial-default-duration: 500ms;
+  --md-sys-motion-spatial-slow: cubic-bezier(0.39, 1.29, 0.35, 0.98);
+  --md-sys-motion-spatial-slow-duration: 650ms;
+
+  --md-sys-motion-effects-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
+  --md-sys-motion-effects-fast-duration: 150ms;
+  --md-sys-motion-effects-default: cubic-bezier(0.34, 0.8, 0.34, 1);
+  --md-sys-motion-effects-default-duration: 200ms;
+  --md-sys-motion-effects-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
+  --md-sys-motion-effects-slow-duration: 300ms;
+}

package/src/m3/styles/motion-standard.css

@@ -0,0 +1,15 @@
+:root {
+  --md-sys-motion-spatial-fast: cubic-bezier(0.27, 1.06, 0.18, 1);
+  --md-sys-motion-spatial-fast-duration: 350ms;
+  --md-sys-motion-spatial-default: cubic-bezier(0.27, 1.06, 0.18, 1);
+  --md-sys-motion-spatial-default-duration: 500ms;
+  --md-sys-motion-spatial-slow: cubic-bezier(0.27, 1.06, 0.18, 1);
+  --md-sys-motion-spatial-slow-duration: 750ms;
+
+  --md-sys-motion-effects-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
+  --md-sys-motion-effects-fast-duration: 150ms;
+  --md-sys-motion-effects-default: cubic-bezier(0.34, 0.8, 0.34, 1);
+  --md-sys-motion-effects-default-duration: 200ms;
+  --md-sys-motion-effects-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
+  --md-sys-motion-effects-slow-duration: 300ms;
+}

package/src/m3/styles/typography.css

@@ -0,0 +1,24 @@
+:root {
+  --_brand: var(--md-ref-typeface-brand, sans-serif);
+  --_plain: var(--md-ref-typeface-plain, sans-serif);
+
+  --md-sys-typography-display-large:   400 3.5625rem / 4rem     var(--_brand);
+  --md-sys-typography-display-medium:  400 2.8125rem / 3.25rem  var(--_brand);
+  --md-sys-typography-display-small:   400 2.25rem   / 2.75rem  var(--_brand);
+
+  --md-sys-typography-headline-large:  400 2rem      / 2.5rem   var(--_brand);
+  --md-sys-typography-headline-medium: 400 1.75rem   / 2.25rem  var(--_brand);
+  --md-sys-typography-headline-small:  400 1.5rem    / 2rem     var(--_brand);
+
+  --md-sys-typography-title-large:     400 1.375rem  / 1.75rem  var(--_brand);
+  --md-sys-typography-title-medium:    500 1rem      / 1.25rem  var(--_plain);
+  --md-sys-typography-title-small:     500 0.875rem  / 1.125rem var(--_plain);
+
+  --md-sys-typography-label-large:     500 0.875rem  / 1.25rem  var(--_plain);
+  --md-sys-typography-label-medium:    500 0.75rem   / 1rem     var(--_plain);
+  --md-sys-typography-label-small:     500 0.6875rem / 0.875rem var(--_plain);
+
+  --md-sys-typography-body-large:      400 1rem      / 1.5rem   var(--_plain);
+  --md-sys-typography-body-medium:     400 0.875rem  / 1.25rem  var(--_plain);
+  --md-sys-typography-body-small:      400 0.75rem   / 1rem     var(--_plain);
+}

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-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}`;
+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}@media (forced-colors:active){:host{--md-sys-color-primary:SelectedItem;--md-sys-color-primary-container:SelectedItemText;--md-sys-color-on-primary:SelectedItemText}}`;

package/src/m3/switch/switch.d.ts

@@ -1,5 +1,6 @@
 import { ToggleButton } from '../../base/toggle-button.js';
 import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
 import { M3Ripple } from '../ripple/ripple.js';
 /**
  * @tag md-switch
@@ -9,6 +10,8 @@ import { M3Ripple } from '../ripple/ripple.js';
  */
 export declare class M3Switch extends ToggleButton {
     #private;
+    icons: boolean;
+    checkedIconOnly: boolean;
     $ripple: M3Ripple;
     $thumb: HTMLSpanElement;
     static styles: any[];
@@ -17,8 +20,7 @@ export declare class M3Switch extends ToggleButton {
     renderOffIcon(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    icons: boolean;
-    checkedIconOnly: boolean;
+    firstUpdated(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/switch/switch.js

@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { ToggleButton } from '../../base/toggle-button.js';
 import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
 import { switchStyles } from './switch-styles.css.js';
 import { targetStyles } from '../target-styles.css.js';
 function isRTL() {
@@ -53,12 +54,12 @@ let M3Switch = class M3Switch extends ToggleButton {
             this.$thumb.style.setProperty('--_thumb-diameter', '');
             this.$thumb.style.transitionDuration = '';
             if (this.checked != shouldBeChecked)
-                this.toggleChecked();
+                this._toggle();
         };
     }
     static { this.styles = [targetStyles, switchStyles]; }
     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></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>`;
@@ -68,34 +69,35 @@ let M3Switch = class M3Switch extends ToggleButton {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.updateComplete.then(() => {
-            this.$ripple.attach(this);
-        });
         this.addEventListener('pointerdown', this.#handlePointerDown);
         this.addEventListener('pointerup', this.#handlePointerUp);
     }
     disconnectedCallback() {
-        super.disconnectedCallback();
         this.removeEventListener('pointerdown', this.#handlePointerDown);
         this.removeEventListener('pointerup', this.#handlePointerUp);
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        // SSR'd <md-switch> components don't have their labels set up on time
+        this.$ripple.attach(this, true);
     }
     #pointerDownX;
     #handlePointerDown;
     #handlePointerMove;
     #handlePointerUp;
 };
-__decorate([
-    query('md-ripple')
-], M3Switch.prototype, "$ripple", void 0);
-__decorate([
-    query('[part~="thumb"]')
-], M3Switch.prototype, "$thumb", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], M3Switch.prototype, "icons", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], M3Switch.prototype, "checkedIconOnly", void 0);
+__decorate([
+    query('md-ripple')
+], M3Switch.prototype, "$ripple", void 0);
+__decorate([
+    query('[part~="thumb"]')
+], M3Switch.prototype, "$thumb", void 0);
 M3Switch = __decorate([
     customElement('md-switch')
 ], M3Switch);

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const secondaryTabStyles = css`:host{--_tab-selected-color:var(--md-sys-color-on-surface);--_indicator-height:2px}[part=indicator]{border-radius:0;left:0;right:0}`;

package/src/m3/tab/secondary-tab.d.ts

@@ -0,0 +1,5 @@
+import { M3Tab } from './tab.js';
+export declare class M3SecondaryTab extends M3Tab {
+    protected _isSecondary: boolean;
+    static styles: any[];
+}

package/src/m3/tab/secondary-tab.js

@@ -0,0 +1,15 @@
+import { __decorate } from "tslib";
+import { customElement } from '../../core/decorators.js';
+import { M3Tab } from './tab.js';
+import { secondaryTabStyles } from './secondary-tab-styles.css.js';
+let M3SecondaryTab = class M3SecondaryTab extends M3Tab {
+    constructor() {
+        super(...arguments);
+        this._isSecondary = true;
+    }
+    static { this.styles = [...super.styles, secondaryTabStyles]; }
+};
+M3SecondaryTab = __decorate([
+    customElement('md-secondary-tab')
+], M3SecondaryTab);
+export { M3SecondaryTab };

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const tabPanelStyles = css`:host{display:block}:host([hidden]){display:none}`;
+export const tabPanelStyles = css`:host{display:block}:host(:not([selected])){display:none!important}`;

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;-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);& md-focus-ring{margin-bottom:calc(var(--_indicator-height) + 2px)}& [part=indicator]{opacity:1}}:host([disabled]){pointer-events:none;color:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}[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;position:relative}[part=indicator]{height:var(--_indicator-height);background-color:var(--md-sys-color-primary);opacity:0;transform-origin:0;pointer-events:none;will-change:transform, opacity;border-radius:3px 3px 0 0;min-width:24px;position:absolute;bottom:0;left:2px;right:2px}::slotted([slot=icon]){fill:currentColor;block-size:1em;inline-size:1em;font-size:24px}`;

package/src/m3/tab/tab.d.ts

@@ -9,8 +9,11 @@ import '../ripple/ripple.js';
  */
 export declare class M3Tab extends Tab {
     $content: HTMLDivElement;
+    $indicator: HTMLElement;
+    protected _isSecondary: boolean;
     static styles: any[];
     render(): import("lit-html").TemplateResult<1>;
+    animateIndicator(previousTab: M3Tab): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/tab/tab.js

@@ -1,11 +1,13 @@
 import { __decorate } from "tslib";
-import { html } from 'lit';
-import { customElement, query } from 'lit/decorators.js';
+import { html, nothing } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
 import { Tab } from '../../base/tab.js';
+import { getSpring } from '../styles/motion.js';
 import '../focus-ring/focus-ring.js';
 import '../ripple/ripple.js';
 import { targetStyles } from '../target-styles.css.js';
 import { tabStyles } from './tab-styles.css.js';
+const KEYFRAMES = 20;
 /**
  * @tag md-tab
  *
@@ -13,14 +15,77 @@ import { tabStyles } from './tab-styles.css.js';
  * @slot - label
  */
 let M3Tab = class M3Tab extends Tab {
+    constructor() {
+        super(...arguments);
+        this._isSecondary = false;
+    }
     static { this.styles = [targetStyles, tabStyles]; }
     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></md-ripple><span part="target"></span><div part="content"><slot part="icon" name="icon" aria-hidden="true"></slot><slot part="label"></slot>${!this._isSecondary ? html `<div part="indicator" role="presentation"></div>` : nothing}</div>${this._isSecondary ? html `<div part="indicator" role="presentation"></div>` : nothing}`;
+    }
+    animateIndicator(previousTab) {
+        const indicator = this.$indicator;
+        indicator.getAnimations().forEach((a) => a.cancel());
+        const prevIndicator = previousTab.$indicator;
+        if (prevIndicator &&
+            !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            const from = prevIndicator.getBoundingClientRect();
+            const to = indicator.getBoundingClientRect();
+            let keyframes = [];
+            if (!this._isSecondary) {
+                const startLeft = from.left - to.left;
+                const startRight = from.right - to.left;
+                const endLeft = 0;
+                const endRight = to.width;
+                const movingRight = startLeft < 0;
+                for (let i = 0; i <= KEYFRAMES; i++) {
+                    const t = i / KEYFRAMES;
+                    const dec = Math.sin((t * Math.PI) / 2);
+                    const acc = 1 - Math.cos((t * Math.PI) / 2);
+                    const leftProgress = movingRight ? acc : dec;
+                    const rightProgress = movingRight ? dec : acc;
+                    const left = startLeft + (endLeft - startLeft) * leftProgress;
+                    const right = startRight + (endRight - startRight) * rightProgress;
+                    const width = right - left;
+                    const translateX = left.toFixed(4);
+                    const scaleX = (width / to.width).toFixed(4);
+                    keyframes.push({
+                        transform: `translateX(${translateX}px) scaleX(${scaleX})`,
+                    });
+                }
+            }
+            else {
+                const translateX = (from.left - to.left).toFixed(4);
+                const scaleX = (from.width / to.width).toFixed(4);
+                keyframes = [
+                    {
+                        transform: `translateX(${translateX}px) scaleX(${scaleX})`,
+                    },
+                    { transform: 'none' },
+                ];
+            }
+            indicator.animate(keyframes, {
+                ...getSpring(this, 'spatial', 'default'),
+                fill: 'none',
+            });
+        }
+        else {
+            indicator.animate([{ opacity: '0' }, { opacity: '1' }], {
+                ...getSpring(this, 'effects', 'default'),
+                fill: 'none',
+            });
+        }
     }
 };
 __decorate([
     query('[part="content"]')
 ], M3Tab.prototype, "$content", void 0);
+__decorate([
+    query('[part="indicator"]')
+], M3Tab.prototype, "$indicator", void 0);
+__decorate([
+    state()
+], M3Tab.prototype, "_isSecondary", void 0);
 M3Tab = __decorate([
     customElement('md-tab')
 ], M3Tab);

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: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}`;
+export const tabsStyles = css`:host{--_tab-selected-color:var(--md-sys-color-primary);--_indicator-height:3px;box-sizing:border-box;flex-direction:column;display:flex;position:relative}[part=tablist]{border-bottom:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none;display:flex;overflow:auto hidden}::slotted(md-tab),::slotted(md-secondary-tab){flex:1}:host([iconsabove]){--_tab-flex-dir:column;--_tab-height:64px;--_tab-gap:2px}@media (forced-colors:active){[part=indicator]{background-color:highlight}}`;

package/src/m3/tab/tabs.d.ts

@@ -5,18 +5,12 @@ import type { M3Tab } from './tab.js';
  *
  * @tag md-tabs
  *
- * @csspart indicator
- *
  * @slot - tabs
  */
 export declare class M3Tabs extends Tabs {
-    #private;
-    $indicator: HTMLElement;
-    secondary: boolean;
     iconsAbove: boolean;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
-    selectTab(selectedTab: M3Tab): void;
+    _selectTab(selectedTab: M3Tab): void;
 }
 declare global {
     interface HTMLElementTagNameMap {