@vollowx/seele 0.13.8 → 0.13.9

package/src/m3/nagivation/navigation-rail-item.js

@@ -0,0 +1,44 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { internals } from '../../base/mixins/internals-attached.js';
+import { Button } from '../../base/button.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+import { navigationRailItemStyles } from './navigation-rail-item-styles.css.js';
+let M3NavigationRailItem = class M3NavigationRailItem extends Button {
+    constructor() {
+        super(...arguments);
+        this.active = false;
+    }
+    static { this.styles = [navigationRailItemStyles]; }
+    render() {
+        return html `<div class="pill-root"><div class="pill"><md-focus-ring></md-focus-ring><md-ripple></md-ripple></div><slot></slot><slot name="active"></slot><span class="label-inside">${this.label}</span></div><span class="label-outside">${this.label}</span>`;
+    }
+    updated(changed) {
+        if (changed.has('label'))
+            this[internals].ariaLabel = this.label;
+        if (changed.has('active'))
+            this[internals].ariaCurrent = this.active ? 'true' : null;
+    }
+    firstUpdated() {
+        this.$focusRing.attach(this);
+        this.$ripple.attach(this);
+    }
+};
+__decorate([
+    property({ reflect: true })
+], M3NavigationRailItem.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3NavigationRailItem.prototype, "active", void 0);
+__decorate([
+    query('md-focus-ring')
+], M3NavigationRailItem.prototype, "$focusRing", void 0);
+__decorate([
+    query('md-ripple')
+], M3NavigationRailItem.prototype, "$ripple", void 0);
+M3NavigationRailItem = __decorate([
+    customElement('md-nav-rail-item')
+], M3NavigationRailItem);
+export { M3NavigationRailItem };

package/src/m3/nagivation/navigation-rail-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const navigationRailStyles = css`:host{background-color:var(--md-sys-color-surface-container);-webkit-user-select:none;user-select:none;z-index:10;flex-shrink:0;grid-template-rows:min-content auto;justify-content:space-between;gap:40px;width:96px;height:100%;padding-top:44px;padding-bottom:20px;display:grid;overflow:visible}.actions{z-index:10;place-self:center;display:grid;position:sticky;top:-44px}::slotted(md-fab){box-shadow:none}.items{grid-template-areas:"stack";display:grid}slot:not([name]){flex-direction:column;grid-area:stack;gap:8px;padding:0;list-style:none;display:flex;position:relative}`;

package/src/m3/nagivation/navigation-rail.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+import { type M3NavigationRailItem } from './navigation-rail-item.js';
+export declare class M3NavigationRail extends LitElement {
+    get $items(): Array<M3NavigationRailItem>;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-nav-rail': M3NavigationRail;
+    }
+}

package/src/m3/nagivation/navigation-rail.js

@@ -0,0 +1,17 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { navigationRailStyles } from './navigation-rail-styles.css.js';
+let M3NavigationRail = class M3NavigationRail extends LitElement {
+    get $items() {
+        return [...this.querySelectorAll('md-nav-rail-item')];
+    }
+    static { this.styles = [navigationRailStyles]; }
+    render() {
+        return html `<div class="actions"><slot name="menu"></slot><slot name="fab"></slot></div><div class="items"><slot></slot></div>`;
+    }
+};
+M3NavigationRail = __decorate([
+    customElement('md-nav-rail')
+], M3NavigationRail);
+export { M3NavigationRail };

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)}@media (forced-colors:active){:host{--md-sys-color-primary:SelectedItem;--md-sys-color-on-surface-variant:CanvasText}:host(:disabled):before,:host(:disabled):after{background:graytext}}`;
+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.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,7 +20,7 @@ export declare class M3Ripple extends M3Ripple_base {
     handlePointerLeave: () => void;
     handlePointerDown: (e: PointerEvent) => void;
     handlePointerUp: () => void;
-    handleControlChange(prev?: HTMLElement | null, next?: HTMLElement | HTMLInputElement | null): void;
+    [handleControlChange](prev?: HTMLElement | null, next?: HTMLElement | null): void;
     addRipple(e?: MouseEvent | null): void;
     removeRipple(ripple: HTMLSpanElement): void;
     keepLastRipple(): void;

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
  *
@@ -83,31 +83,29 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
     #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);
             }
         });
     }
@@ -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;

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.d.ts

@@ -20,6 +20,7 @@ export declare class M3Switch extends ToggleButton {
     renderOffIcon(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    firstUpdated(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/switch/switch.js

@@ -69,9 +69,6 @@ let M3Switch = class M3Switch extends ToggleButton {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.updateComplete.then(() => {
-            this.$ripple.attach(this, true);
-        });
         this.addEventListener('pointerdown', this.#handlePointerDown);
         this.addEventListener('pointerup', this.#handlePointerUp);
     }
@@ -80,6 +77,10 @@ let M3Switch = class M3Switch extends ToggleButton {
         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;

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}@media (forced-colors:active){[part=indicator]{background-color:highlight}}`;
+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 {

package/src/m3/tab/tabs.js

@@ -1,7 +1,5 @@
 import { __decorate } from "tslib";
-import { html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { computePosition, autoUpdate } from '@floating-ui/dom';
+import { customElement, property } from 'lit/decorators.js';
 import { Tabs } from '../../base/tabs.js';
 import { tabsStyles } from './tabs-styles.css.js';
 /**
@@ -9,52 +7,21 @@ import { tabsStyles } from './tabs-styles.css.js';
  *
  * @tag md-tabs
  *
- * @csspart indicator
- *
  * @slot - tabs
  */
 let M3Tabs = class M3Tabs extends Tabs {
     constructor() {
         super(...arguments);
-        this.secondary = false;
         this.iconsAbove = false;
     }
-    #cleanup;
     static { this.styles = [tabsStyles]; }
-    render() {
-        return html `${super.render()}<div part="indicator" role="presentation"></div>`;
-    }
-    selectTab(selectedTab) {
-        super.selectTab(selectedTab);
-        // It's kinda ridiculous to use floating-ui on such simple element, but I
-        // do not want to have indicators in each tab either.
-        // Another solution is using CSS anchor, which does not work across Shadow
-        // DOM for now.
-        this.#cleanup?.();
-        const updatePosition = () => {
-            computePosition(selectedTab, this.$indicator, {
-                placement: 'bottom',
-                strategy: 'absolute',
-            }).then(({ x }) => {
-                const left = (this.secondary ? x : (x + 2));
-                const width = this.secondary
-                    ? selectedTab.offsetWidth
-                    : (selectedTab.$content.offsetWidth - 4);
-                Object.assign(this.$indicator.style, {
-                    left: `${left}px`,
-                    width: `${width}px`,
-                });
-            });
-        };
-        this.#cleanup = autoUpdate(selectedTab, this.$indicator, updatePosition);
+    _selectTab(selectedTab) {
+        const previousTab = this.$tabs.find((t) => t.selected);
+        super._selectTab(selectedTab);
+        if (previousTab && previousTab !== selectedTab)
+            selectedTab.animateIndicator(previousTab);
     }
 };
-__decorate([
-    query('[part="indicator"]')
-], M3Tabs.prototype, "$indicator", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], M3Tabs.prototype, "secondary", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], M3Tabs.prototype, "iconsAbove", void 0);

package/src/m3/system/typography.css

@@ -1,34 +0,0 @@
-:root {
-  --md-sys-typography-family: sans-serif;
-
-  --md-sys-typography-display-large: 400 3.5625rem / 4rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-display-medium: 400 2.8125rem / 3.25rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-display-small: 400 2.25rem / 2.75rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-headline-large: 400 2rem / 2.5rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-headline-medium: 400 1.75rem / 2.25rem
-    var(--md-sys-typography-family);
-  --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);
-  --md-sys-typography-title-medium: 500 1rem / 1.25rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-title-small: 500 0.875rem / 1.125rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-label-large: 500 0.875rem / 1.25rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-label-medium: 500 0.75rem / 1rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-label-small: 500 0.6875rem / 0.875rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-body-large: 400 1rem / 1.5rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-body-medium: 400 0.875rem / 1.25rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-body-small: 400 0.75rem / 1rem
-    var(--md-sys-typography-family);
-}