@vollowx/seele 0.7.0

package/src/m3/item.js

@@ -0,0 +1,46 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { Item } from '../base/item.js';
+import { itemStyles } from './item-styles.css.js';
+/**
+ * @tag md-item
+ *
+ * @csspart container
+ * @csspart start
+ * @csspart text
+ * @csspart overline
+ * @csspart headline
+ * @csspart supporting-text
+ * @csspart trailing-supporting-text
+ * @csspart end
+ *
+ * @slot container - container element
+ * @slot start - start content
+ * @slot overline - overline text
+ * @slot headline - headline text
+ * @slot supporting-text - supporting text
+ * @slot trailing-supporting-text - trailing supporting text
+ * @slot end - end content
+ */
+let M3Item = class M3Item extends Item {
+    static { this.styles = [itemStyles]; }
+    render() {
+        return html `
+      <slot name="container"></slot>
+      <slot name="start"></slot>
+      <div class="text">
+        <slot name="overline"></slot>
+        <slot></slot>
+        <slot name="headline"></slot>
+        <slot name="supporting-text"></slot>
+      </div>
+      <slot name="trailing-supporting-text"></slot>
+      <slot name="end"></slot>
+    `;
+    }
+};
+M3Item = __decorate([
+    customElement('md-item')
+], M3Item);
+export { M3Item };

package/src/m3/list-item-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const listItemStyles = css `:host{--md-focus-ring-shape:12px;--md-focus-ring-inward-offset:-4px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:12px;outline:0;display:flex}:host(:state(selected)){background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}:host(:disabled){cursor:default;opacity:.3;pointer-events:none}md-item,md-item div[slot=container]{border-radius:inherit}`;

package/src/m3/list-item.js

@@ -0,0 +1,52 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+import { ListItem } from '../base/list-item.js';
+import { listItemStyles } from './list-item-styles.css.js';
+/**
+ * @tag md-list-item
+ *
+ * @slot - contents in md-item
+ */
+let M3ListItem = class M3ListItem extends ListItem {
+    constructor() {
+        super();
+        this.updateComplete.then(() => {
+            this.ripple.$control = this;
+            this.focusRing.$control = this;
+        });
+    }
+    static { this.styles = [...super.styles, listItemStyles]; }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('focused')) {
+            if (this.focused) {
+                this.focusRing.visualFocus();
+            }
+            else {
+                this.focusRing.visualBlur();
+            }
+        }
+    }
+    render() {
+        return html `
+      <md-item>
+        <div slot="container">
+          <md-focus-ring inward></md-focus-ring>
+          <md-ripple></md-ripple>
+        </div>
+        <slot></slot>
+      </md-item>
+    `;
+    }
+};
+__decorate([
+    query('md-ripple')
+], M3ListItem.prototype, "ripple", void 0);
+__decorate([
+    query('md-focus-ring')
+], M3ListItem.prototype, "focusRing", void 0);
+M3ListItem = __decorate([
+    customElement('md-list-item')
+], M3ListItem);
+export { M3ListItem };

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const listStyles = css `:host{box-sizing:border-box;flex-direction:column;display:flex}`;

package/src/m3/list.js

@@ -0,0 +1,16 @@
+import { __decorate } from "tslib";
+import { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { listStyles } from './list-styles.css.js';
+/**
+ * @tag md-list
+ *
+ * TODO: Use listController
+ */
+let M3List = class M3List extends LitElement {
+    static { this.styles = [listStyles]; }
+};
+M3List = __decorate([
+    customElement('md-list')
+], M3List);
+export { M3List };

package/src/m3/menu-item.js

@@ -0,0 +1,15 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { M3ListItem } from './list-item.js';
+import { MenuItemMixin } from '../base/menu-item.js';
+/**
+ * @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-part-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const menuPartStyles = css `[part=menu]{background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);box-sizing:border-box;color:var(--md-sys-color-on-surface);height:inherit;max-height:inherit;max-width:inherit;min-width:inherit;opacity:0;z-index:1000;border-radius:16px;padding:4px;inset:auto;overflow-y:auto;transform:scaleY(.4)}:host(:state(closed)) [part=menu]{display:none}:host(:state(opening)) [part=menu]{opacity:1;transition:opacity 67ms,transform var(--md-sys-motion-exp-effects-slow-duration)var(--md-sys-motion-exp-effects-slow);display:block;transform:scaleY(1)}:host(:state(opened)) [part=menu]{opacity:1;display:block;transform:scaleY(1)}:host(:state(closing)) [part=menu]{opacity:0;transition:opacity var(--md-sys-motion-exp-effects-default-duration),transform var(--md-sys-motion-exp-effects-default-duration)var(--md-sys-motion-exp-effects-default);transform:scaleY(.4)}[part=items]{opacity:0;flex-direction:column;gap:2px;display:flex}:host(:state(opening)) [part=items]{opacity:1;transition:opacity 67ms linear 67ms}:host(:state(opened)) [part=items]{opacity:1}:host(:state(closing)) [part=items]{opacity:0;transition:opacity 67ms}`;

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const menuStyles = css `:host{outline:0;min-width:112px;display:block}`;

package/src/m3/menu.js

@@ -0,0 +1,30 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Menu } from '../base/menu.js';
+import { menuPartStyles } from './menu-part-styles.css.js';
+import { menuStyles } from './menu-styles.css.js';
+/**
+ * @tag md-menu
+ *
+ * @csspart menu-surface
+ * @csspart list
+ *
+ * @slot - menu items
+ */
+let M3Menu = class M3Menu extends Menu {
+    constructor() {
+        super(...arguments);
+        this._possibleItemTags = [
+            'md-menu-item',
+            'md-menu-item-checkbox',
+            'md-menu-item-radio',
+        ];
+        this._durations = { show: 300, hide: 200 };
+        this._scrollPadding = 4;
+    }
+    static { this.styles = [menuPartStyles, menuStyles]; }
+};
+M3Menu = __decorate([
+    customElement('md-menu')
+], M3Menu);
+export { M3Menu };

package/src/m3/option.js

@@ -0,0 +1,15 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { OptionMixin } from '../base/option.js';
+import { M3ListItem } from './list-item.js';
+/**
+ * @tag md-option
+ *
+ * @slot - contents in md-menu-item
+ */
+let M3Option = class M3Option extends OptionMixin(M3ListItem) {
+};
+M3Option = __decorate([
+    customElement('md-option')
+], M3Option);
+export { M3Option };

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

@@ -0,0 +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}`;

package/src/m3/ripple.js

@@ -0,0 +1,199 @@
+import { __decorate } from "tslib";
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Attachable } 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 }) {
+    return Math.sqrt((ax - bx) ** 2 + (ay - by) ** 2);
+}
+/**
+ * @tag md-ripple
+ *
+ * @cssprop --md-ripple-color
+ */
+let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement)) {
+    static { this.styles = [rippleStyles]; }
+    constructor() {
+        super();
+        this.clickBehavior = 'always';
+        this.enterBehavior = 'always';
+        this.spaceBehavior = 'once';
+        this.$ripples = [];
+        this.#spaceKeyDown = false;
+        this.#pointerDown = false;
+        this.#lastTime = 0;
+        this.#handleKeyDown = (e) => {
+            if ((e.key === 'Enter' && this.enterBehavior === 'always') ||
+                (e.key === ' ' && this.spaceBehavior === 'always')) {
+                this.addRipple();
+                this.removeRippleAll();
+            }
+            else if (e.key === ' ' && this.spaceBehavior === 'once') {
+                if (!this.#spaceKeyDown)
+                    this.addRipple();
+                this.#spaceKeyDown = true;
+            }
+        };
+        this.#handleKeyUp = (e) => {
+            if (e.key === ' ' && this.spaceBehavior === 'once') {
+                this.#spaceKeyDown = false;
+                this.removeRippleAll();
+            }
+        };
+        this.#handlePointerEnter = (e) => {
+            if (e.pointerType === 'touch')
+                return;
+            this[internals].states.add('hover');
+            if (this.#pointerDown && this.clickBehavior === 'always')
+                this.addRipple(e);
+        };
+        this.#handlePointerLeave = () => {
+            this[internals].states.delete('hover');
+            if (this.#pointerDown && this.clickBehavior === 'always')
+                this.removeRippleAll();
+        };
+        this.#handlePointerDown = (e) => {
+            if (e.pointerType === 'mouse')
+                this.#pointerDown = true;
+            document.addEventListener('pointerup', this.#handlePointerUp);
+            document.addEventListener('touchcancel', this.#handlePointerUp);
+            document.addEventListener('touchend', this.#handlePointerUp);
+            document.addEventListener('touchmove', this.#handlePointerUp);
+            if (e.button === 2)
+                return;
+            if (this.clickBehavior === 'always')
+                this.addRipple(e);
+        };
+        this.#handlePointerUp = () => {
+            this.#pointerDown = false;
+            document.removeEventListener('pointerup', this.#handlePointerUp);
+            document.removeEventListener('touchcancel', this.#handlePointerUp);
+            document.removeEventListener('touchend', this.#handlePointerUp);
+            document.removeEventListener('touchmove', this.#handlePointerUp);
+            this.removeRippleAll();
+        };
+        this[internals].ariaHidden = 'true';
+    }
+    #spaceKeyDown;
+    #pointerDown;
+    #lastTime;
+    #handleKeyDown;
+    #handleKeyUp;
+    #handlePointerEnter;
+    #handlePointerLeave;
+    #handlePointerDown;
+    #handlePointerUp;
+    handleControlChange(prev = null, next = null) {
+        const eventHandlers = {
+            keydown: this.#handleKeyDown,
+            keyup: this.#handleKeyUp,
+            pointerenter: this.#handlePointerEnter,
+            pointerleave: this.#handlePointerLeave,
+            pointerdown: this.#handlePointerDown,
+        };
+        Object.keys(eventHandlers).forEach((eventName) => {
+            // @ts-ignore
+            prev?.labels?.forEach((label) => label.removeEventListener(eventName, eventHandlers[eventName]));
+            prev?.removeEventListener(eventName, eventHandlers[eventName]);
+            // 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))
+                    isNestedInLabel = true;
+            });
+            if (isNestedInLabel) {
+                // @ts-ignore
+                next.labels?.forEach((label) => label.addEventListener(eventName, eventHandlers[eventName]));
+            }
+            else {
+                next?.addEventListener(eventName, eventHandlers[eventName]);
+            }
+        });
+    }
+    #calculateRipple(e = null) {
+        const containerRect = this.getBoundingClientRect();
+        const containerMiddle = {
+            x: containerRect.width / 2,
+            y: containerRect.height / 2,
+        };
+        const centered = !e;
+        const endCenter = containerMiddle;
+        let startCenter = endCenter;
+        if (!centered) {
+            startCenter.x = e.clientX - containerRect.left;
+            startCenter.y = e.clientY - containerRect.top;
+        }
+        const corners = [
+            { x: 0, y: 0 },
+            { x: containerRect.width, y: 0 },
+            { x: 0, y: containerRect.height },
+            { x: containerRect.width, y: containerRect.height },
+        ];
+        const radius = Math.max(...corners.map((corner) => distance(endCenter, corner)));
+        return { startCenter, endCenter, radius };
+    }
+    addRipple(e = null) {
+        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`;
+        const ripple = document.createElement('div');
+        ripple.setAttribute('part', 'ripple');
+        this.renderRoot.append(ripple);
+        this.$ripples.push(ripple);
+        ripple.animate({
+            opacity: [0, 0.1],
+        }, {
+            duration: OPACITY_IN_MS,
+            easing: 'linear',
+            fill: 'forwards',
+        });
+        ripple.animate({
+            height: [diameter, diameter],
+            width: [diameter, diameter],
+            translate: [translateStart, translateEnd],
+            scale: [0.2, 1.35],
+        }, {
+            duration: PRESS_GROW_MS,
+            // TODO: Control by global variables
+            easing: 'cubic-bezier(0.2, 0, 0, 1)',
+            fill: 'forwards',
+        });
+        this.#lastTime = Date.now();
+    }
+    removeRipple(ripple) {
+        setTimeout(() => {
+            const animation = ripple.animate({
+                opacity: [getComputedStyle(ripple).opacity, '0'],
+            }, {
+                duration: OPACITY_OUT_MS,
+                fill: 'forwards',
+                easing: 'linear',
+            });
+            animation.onfinish = animation.oncancel = () => ripple.remove();
+        }, Math.max(MINIMUM_PRESS_MS - (Date.now() - this.#lastTime), 0));
+    }
+    removeRippleAll() {
+        for (const ripple of this.$ripples.splice(0))
+            this.removeRipple(ripple);
+    }
+};
+__decorate([
+    property()
+], M3Ripple.prototype, "clickBehavior", void 0);
+__decorate([
+    property()
+], M3Ripple.prototype, "enterBehavior", void 0);
+__decorate([
+    property()
+], M3Ripple.prototype, "spaceBehavior", void 0);
+M3Ripple = __decorate([
+    customElement('md-ripple')
+], M3Ripple);
+export { M3Ripple };

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

@@ -0,0 +1,41 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { M3Select } from './select.js';
+import '../field/filled-field.js';
+import { selectStyles } from './select-styles.css.js';
+import { menuPartStyles } from '../menu-part-styles.css.js';
+let MdFilledSelect = class MdFilledSelect extends M3Select {
+    static { this.styles = [menuPartStyles, selectStyles]; }
+    renderField() {
+        return html `
+      <md-filled-field
+        part="field"
+        .label=${this.label}
+        .populated=${!!this.value}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .error=${this.error}
+        .focused=${this.open || this.fieldFocused}
+        supportingtext=${this.supportingText}
+        @click=${this.toggle}
+        @keydown=${this.handleFieldKeydown}
+        @focus=${() => (this.fieldFocused = true)}
+        @blur=${() => (this.fieldFocused = false)}
+        tabindex=${this.disabled ? '-1' : '0'}
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded=${this.open}
+        aria-controls="menu"
+        aria-disabled=${this.disabled}
+        aria-required=${this.required}
+      >
+        ${this.renderFieldContent()}
+      </md-filled-field>
+    `;
+    }
+};
+MdFilledSelect = __decorate([
+    customElement('md-filled-select')
+], MdFilledSelect);
+export { MdFilledSelect };

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

@@ -0,0 +1,41 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { M3Select } from './select.js';
+import '../field/outlined-field.js';
+import { selectStyles } from './select-styles.css.js';
+import { menuPartStyles } from '../menu-part-styles.css.js';
+let MdOutlinedSelect = class MdOutlinedSelect extends M3Select {
+    static { this.styles = [menuPartStyles, selectStyles]; }
+    renderField() {
+        return html `
+      <md-outlined-field
+        part="field"
+        .label=${this.label}
+        .populated=${!!this.value}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .error=${this.error}
+        .focused=${this.open || this.fieldFocused}
+        supportingtext=${this.supportingText}
+        @click=${this.toggle}
+        @keydown=${this.handleFieldKeydown}
+        @focus=${() => (this.fieldFocused = true)}
+        @blur=${() => (this.fieldFocused = false)}
+        tabindex=${this.disabled ? '-1' : '0'}
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded=${this.open}
+        aria-controls="menu"
+        aria-disabled=${this.disabled}
+        aria-required=${this.required}
+      >
+        ${this.renderFieldContent()}
+      </md-outlined-field>
+    `;
+    }
+};
+MdOutlinedSelect = __decorate([
+    customElement('md-outlined-select')
+], MdOutlinedSelect);
+export { MdOutlinedSelect };

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

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

package/src/m3/select/select.js

@@ -0,0 +1,34 @@
+import { __decorate } from "tslib";
+import { property, query, state } from 'lit/decorators.js';
+import { Select } from '../../base/select.js';
+/**
+ * @fires {Event} change - Fired when the selected value has changed.
+ * @fires {Event} input - Fired when the selected value has changed.
+ */
+export class M3Select extends Select {
+    constructor() {
+        super(...arguments);
+        this._possibleItemTags = ['md-option'];
+        this._durations = { show: 300, hide: 200 };
+        this._scrollPadding = 4;
+        this.label = '';
+        this.supportingText = '';
+        this.error = false;
+        this.fieldFocused = false;
+    }
+}
+__decorate([
+    property({ type: String })
+], M3Select.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], M3Select.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3Select.prototype, "error", void 0);
+__decorate([
+    state()
+], M3Select.prototype, "fieldFocused", void 0);
+__decorate([
+    query('md-filled-field, md-outlined-field')
+], M3Select.prototype, "field", void 0);

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

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

package/src/m3/switch.js

@@ -0,0 +1,129 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Switch } from '../base/switch.js';
+import './focus-ring.js';
+import './ripple.js';
+import { switchStyles } from './switch-styles.css.js';
+import { targetStyles } from './target-styles.css.js';
+// FIXME: Drag-and-drop breaks the support for working with `<label>`. Temporarily disabled.
+// function isRTL() {
+//   return document.documentElement.dir === 'rtl';
+// }
+/**
+ * @tag md-switch
+ *
+ * @csspart thumb
+ * @csspart label
+ */
+let M3Switch = class M3Switch extends Switch {
+    constructor() {
+        super(...arguments);
+        // /** @type {M3Ripple} */
+        // @query('md-ripple') $ripple;
+        // /** @type {HTMLSpanElement} */
+        // @query('[part~="thumb"]') $thumb;
+        // connectedCallback() {
+        //   super.connectedCallback();
+        //   this.$ripple.attach(this);
+        //   this.addEventListener('pointerdown', this.#boundPointerDown);
+        //   this.addEventListener('pointerup', this.#boundPointerUp);
+        // }
+        // disconnectedCallback() {
+        //   super.disconnectedCallback();
+        //   this.removeEventListener('pointerdown', this.#boundPointerDown);
+        //   this.removeEventListener('pointerup', this.#boundPointerUp);
+        // }
+        this.icons = false;
+        this.checkedIconOnly = false;
+        // #pointerDownX = 0;
+        //
+        // #boundPointerDown = this.#handlePointerDown.bind(this);
+        // #boundPointerMove = this.#handlePointerMove.bind(this);
+        // #boundPointerUp = this.#handlePointerUp.bind(this);
+        // /** @param {PointerEvent} e */
+        // #handlePointerDown(e) {
+        //   this._ignoreClick = false;
+        //
+        //   if (e.button !== 0) return;
+        //   this.#pointerDownX = e.clientX;
+        //   this.setPointerCapture(e.pointerId);
+        //   this.addEventListener('pointermove', this.#boundPointerMove);
+        // }
+        // /** @param {PointerEvent} e */
+        // #handlePointerMove(e) {
+        //   this._ignoreClick = true;
+        //
+        //   const diff = (isRTL() ? -1 : 1) * (e.clientX - this.#pointerDownX);
+        //   const limitedDiff = this.checked
+        //     ? Math.min(0, Math.max(-20, diff))
+        //     : Math.min(20, Math.max(0, diff));
+        //   this.$thumb.style.setProperty(
+        //     '--_thumb-diff-pointer',
+        //     `${2 * limitedDiff}px`
+        //   );
+        //   // Thumb loses its `:active` status before pointer up event
+        //   this.$thumb.style.setProperty('--_thumb-diameter', '28px');
+        //   this.$thumb.style.transitionDuration = '0s';
+        // }
+        // /** @param {PointerEvent} e */
+        // #handlePointerUp(e) {
+        //   this.removeEventListener('pointermove', this.#boundPointerMove);
+        //   this.releasePointerCapture(e.pointerId);
+        //
+        //   const trackRect = this.getBoundingClientRect();
+        //   const thumbRect = this.$thumb.getBoundingClientRect();
+        //   const diff =
+        //     thumbRect.left +
+        //     thumbRect.width / 2 -
+        //     trackRect.left -
+        //     trackRect.width / 2;
+        //   const shouldBeChecked = (diff >= 0 && !isRTL()) || (diff < 0 && isRTL());
+        //
+        //   this.$thumb.style.setProperty('--_thumb-diff-pointer', '');
+        //   this.$thumb.style.setProperty('--_thumb-diameter', '');
+        //   this.$thumb.style.transitionDuration = '';
+        //
+        //   if (this.checked != shouldBeChecked) this.__toggleStatus();
+        // }
+    }
+    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>
+    `;
+    }
+    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>
+    `;
+    }
+    renderOffIcon() {
+        return html `
+      <svg part="icons icon-off" viewBox="0 0 24 24" aria-hidden="true">
+        <path
+          d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z"
+        />
+      </svg>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3Switch.prototype, "icons", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3Switch.prototype, "checkedIconOnly", void 0);
+M3Switch = __decorate([
+    customElement('md-switch')
+], M3Switch);
+export { M3Switch };

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const targetStyles = css `[part~=target]{box-sizing:border-box;content:"";width:100%;min-width:48px;height:100%;min-height:48px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}`;