@vollowx/seele 0.13.4 → 0.13.6

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

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+declare const M3Ripple_base: Constructor<import("../../base/mixins/attachable.js").AttachableInterface> & Constructor<import("../../base/mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+/**
+ * @tag md-ripple
+ *
+ * @cssprop --md-ripple-color
+ */
+export declare class M3Ripple extends M3Ripple_base {
+    #private;
+    clickBehavior: 'always' | 'none';
+    enterBehavior: 'always' | 'none';
+    spaceBehavior: 'always' | 'once' | 'none';
+    $ripples: HTMLSpanElement[];
+    static styles: any[];
+    constructor();
+    handleKeyDown: (e: KeyboardEvent) => void;
+    handleKeyUp: (e: KeyboardEvent) => void;
+    handlePointerEnter: (e: PointerEvent) => void;
+    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;
+    };
+    addRipple(e?: MouseEvent | null): void;
+    removeRipple(ripple: HTMLSpanElement): void;
+    removeRippleAll(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-ripple': M3Ripple;
+    }
+}
+export {};

package/src/m3/ripple/ripple.js

@@ -1,9 +1,9 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+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 { InternalsAttached, internals } from '../../base/mixins/internals-attached.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;
@@ -12,42 +12,65 @@ const OPACITY_OUT_MS = 375;
 function distance({ x: ax, y: ay }, { x: bx, y: by }) {
     return Math.sqrt((ax - bx) ** 2 + (ay - by) ** 2);
 }
-export 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') {
+/**
+ * @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();
+            }
+            else if (e.key === ' ' && this.spaceBehavior === 'once') {
+                if (!this.#spaceKeyDown)
+                    this.addRipple();
                 this.#spaceKeyDown = true;
             }
-        }, this.handleKeyUp = (e)=>{
+        };
+        this.handleKeyUp = (e) => {
             if (e.key === ' ' && this.spaceBehavior === 'once') {
                 this.#spaceKeyDown = false;
                 this.removeRippleAll();
             }
-        }, this.handlePointerEnter = (e)=>{
-            if (e.pointerType === 'touch') return;
+        };
+        this.handlePointerEnter = (e) => {
+            if (e.pointerType === 'touch')
+                return;
             this[internals].states.add('hover');
-            if (this.#pointerDown && this.clickBehavior === 'always') this.addRipple(e);
-        }, this.handlePointerLeave = ()=>{
+            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;
+            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 = ()=>{
+            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);
@@ -66,22 +89,24 @@ export class M3Ripple extends Attachable(InternalsAttached(LitElement)) {
             keyup: this.handleKeyUp,
             pointerenter: this.handlePointerEnter,
             pointerleave: this.handlePointerLeave,
-            pointerdown: this.handlePointerDown
+            pointerdown: this.handlePointerDown,
         };
-        Object.keys(eventHandlers).forEach((eventName)=>{
+        Object.keys(eventHandlers).forEach((eventName) => {
             // @ts-ignore
-            prev?.labels?.forEach((label)=>label.removeEventListener(eventName, eventHandlers[eventName]));
+            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;
+            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.labels?.forEach((label) => label.addEventListener(eventName, eventHandlers[eventName]));
+            }
+            else {
                 next?.addEventListener(eventName, eventHandlers[eventName]);
             }
         });
@@ -90,7 +115,7 @@ export class M3Ripple extends Attachable(InternalsAttached(LitElement)) {
         const containerRect = this.getBoundingClientRect();
         const containerMiddle = {
             x: containerRect.width / 2,
-            y: containerRect.height / 2
+            y: containerRect.height / 2,
         };
         const centered = !e;
         const endCenter = containerMiddle;
@@ -100,29 +125,13 @@ export class M3Ripple extends Attachable(InternalsAttached(LitElement)) {
             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
-            }
+            { 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
-        };
+        const radius = Math.max(...corners.map((corner) => distance(endCenter, corner)));
+        return { startCenter, endCenter, radius };
     }
     addRipple(e = null) {
         const { startCenter, endCenter, radius } = this.calculateRipple(e);
@@ -134,68 +143,52 @@ export class M3Ripple extends Attachable(InternalsAttached(LitElement)) {
         this.renderRoot.append(ripple);
         this.$ripples.push(ripple);
         ripple.animate({
-            opacity: [
-                0,
-                0.1
-            ]
+            opacity: [0, 0.1],
         }, {
             duration: OPACITY_IN_MS,
             easing: 'linear',
-            fill: 'forwards'
+            fill: 'forwards',
         });
         ripple.animate({
-            height: [
-                diameter,
-                diameter
-            ],
-            width: [
-                diameter,
-                diameter
-            ],
-            translate: [
-                translateStart,
-                translateEnd
-            ],
-            scale: [
-                0.2,
-                1.35
-            ]
+            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'
+            fill: 'forwards',
         });
         this.#lastTime = Date.now();
     }
     removeRipple(ripple) {
-        setTimeout(()=>{
+        setTimeout(() => {
             const animation = ripple.animate({
-                opacity: [
-                    getComputedStyle(ripple).opacity,
-                    '0'
-                ]
+                opacity: [getComputedStyle(ripple).opacity, '0'],
             }, {
                 duration: OPACITY_OUT_MS,
                 fill: 'forwards',
-                easing: 'linear'
+                easing: 'linear',
             });
-            animation.onfinish = animation.oncancel = ()=>ripple.remove();
+            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);
+        for (const ripple of this.$ripples.splice(0))
+            this.removeRipple(ripple);
     }
-}
-_ts_decorate([
+};
+__decorate([
     property()
 ], M3Ripple.prototype, "clickBehavior", void 0);
-_ts_decorate([
+__decorate([
     property()
 ], M3Ripple.prototype, "enterBehavior", void 0);
-_ts_decorate([
+__decorate([
     property()
 ], M3Ripple.prototype, "spaceBehavior", void 0);
-M3Ripple = _ts_decorate([
+M3Ripple = __decorate([
     customElement('md-ripple', false)
 ], M3Ripple);
+export { M3Ripple };

package/src/m3/select/filled-select.d.ts

@@ -0,0 +1,16 @@
+import { M3Select } from './select.js';
+import '../field/filled-field.js';
+/**
+ * @tag md-filled-select
+ *
+ * @slot - options
+ */
+export declare class MdFilledSelect extends M3Select {
+    static styles: any[];
+    protected renderField(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-filled-select': MdFilledSelect;
+    }
+}

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

@@ -1,19 +1,21 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+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';
-export class MdFilledSelect extends M3Select {
-    static{
-        this.styles = [
-            selectStyles
-        ];
-    }
+/**
+ * @tag md-filled-select
+ *
+ * @slot - options
+ */
+let MdFilledSelect = class MdFilledSelect extends M3Select {
+    static { this.styles = [selectStyles]; }
     renderField() {
-        return html`<md-filled-field id="field" part="field" .label="${this.label}" .populated="${!!this.value}" .disabled="${this.disabled}" .required="${this.required}" .error="${this.error}" .focused="${this.open || this.focused}" supportingtext="${this.supportingText}" @click="${this.toggle}" @keydown="${this._handleFieldKeydown}" @focus="${()=>this.focused = true}" @blur="${()=>this.focused = false}" tabindex="${this.disabled ? '-1' : '0'}" role="combobox" aria-haspopup="listbox" aria-expanded="${this.open}" aria-controls="menu" aria-disabled="${this.disabled}" aria-required="${this.required}">${this.renderFieldContent()}</md-filled-field>`;
+        return html `<md-filled-field id="field" part="field" .label="${this.label}" .populated="${!!this.value}" .disabled="${this.disabled}" .required="${this.required}" .error="${this.error}" .focused="${this.open || this.focused}" supportingtext="${this.supportingText}" @click="${this.toggle}" @keydown="${this._handleFieldKeydown}" @focus="${() => (this.focused = true)}" @blur="${() => (this.focused = false)}" tabindex="${this.disabled ? '-1' : '0'}" role="combobox" aria-haspopup="listbox" aria-expanded="${this.open}" aria-controls="menu" aria-disabled="${this.disabled}" aria-required="${this.required}">${this.renderFieldContent()}</md-filled-field>`;
     }
-}
-MdFilledSelect = _ts_decorate([
+};
+MdFilledSelect = __decorate([
     customElement('md-filled-select')
 ], MdFilledSelect);
+export { MdFilledSelect };

package/src/m3/select/option.d.ts

@@ -0,0 +1,15 @@
+import { M3ListItem } from '../list/list-item.js';
+declare const M3Option_base: Constructor<import("../../base/option.js").OptionInterface> & typeof M3ListItem;
+/**
+ * @tag md-option
+ *
+ * @slot - contents in md-menu-item
+ */
+export declare class M3Option extends M3Option_base {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-option': M3Option;
+    }
+}
+export {};

package/src/m3/select/option.js

@@ -1,9 +1,15 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import { OptionMixin } from '../../base/option.js';
 import { M3ListItem } from '../list/list-item.js';
-export class M3Option extends OptionMixin(M3ListItem) {
-}
-M3Option = _ts_decorate([
+/**
+ * @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/select/outlined-select.d.ts

@@ -0,0 +1,16 @@
+import { M3Select } from './select.js';
+import '../field/outlined-field.js';
+/**
+ * @tag md-outlined-select
+ *
+ * @slot - options
+ */
+export declare class MdOutlinedSelect extends M3Select {
+    static styles: any[];
+    protected renderField(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-outlined-select': MdOutlinedSelect;
+    }
+}

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

@@ -1,19 +1,21 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+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';
-export class MdOutlinedSelect extends M3Select {
-    static{
-        this.styles = [
-            selectStyles
-        ];
-    }
+/**
+ * @tag md-outlined-select
+ *
+ * @slot - options
+ */
+let MdOutlinedSelect = class MdOutlinedSelect extends M3Select {
+    static { this.styles = [selectStyles]; }
     renderField() {
-        return html`<md-outlined-field id="field" part="field" .label="${this.label}" .populated="${!!this.value}" .disabled="${this.disabled}" .required="${this.required}" .error="${this.error}" .focused="${this.open || this.focused}" supportingtext="${this.supportingText}" @click="${this.toggle}" @keydown="${this._handleFieldKeydown}" @focus="${()=>this.focused = true}" @blur="${()=>this.focused = false}" tabindex="${this.disabled ? '-1' : '0'}" role="combobox" aria-haspopup="listbox" aria-expanded="${this.open}" aria-controls="menu" aria-disabled="${this.disabled}" aria-required="${this.required}">${this.renderFieldContent()}</md-outlined-field>`;
+        return html `<md-outlined-field id="field" part="field" .label="${this.label}" .populated="${!!this.value}" .disabled="${this.disabled}" .required="${this.required}" .error="${this.error}" .focused="${this.open || this.focused}" supportingtext="${this.supportingText}" @click="${this.toggle}" @keydown="${this._handleFieldKeydown}" @focus="${() => (this.focused = true)}" @blur="${() => (this.focused = false)}" tabindex="${this.disabled ? '-1' : '0'}" role="combobox" aria-haspopup="listbox" aria-expanded="${this.open}" aria-controls="menu" aria-disabled="${this.disabled}" aria-required="${this.required}">${this.renderFieldContent()}</md-outlined-field>`;
     }
-}
-MdOutlinedSelect = _ts_decorate([
+};
+MdOutlinedSelect = __decorate([
     customElement('md-outlined-select')
 ], MdOutlinedSelect);
+export { MdOutlinedSelect };

package/src/m3/select/select.d.ts

@@ -0,0 +1,13 @@
+import { Select } from '../../base/select.js';
+import { M3Field } from '../field/field.js';
+/**
+ * @fires {Event} change - Fired when the selected value has changed.
+ * @fires {Event} input - Fired when the selected value has changed.
+ */
+export declare abstract class M3Select extends Select {
+    label: string;
+    supportingText: string;
+    protected focused: boolean;
+    protected field: M3Field;
+    protected renderMenu(): import("lit-html").TemplateResult<1>;
+}

package/src/m3/select/select.js

@@ -1,31 +1,31 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { html } from 'lit';
 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 {
-    renderMenu() {
-        return html`<md-menu part="menu" id="menu" for="field" type="listbox" data-tabindex="-1" ?quick="${this.quick}" offset="${this.offset}" align="${this.align}" align-strategy="${this.alignStrategy}" keep-open-blur no-focus-control ?open="${this.open}" @open="${()=>this.open = true}" @close="${()=>this.open = false}" @item-focus="${this._handleMenuItemFocus}" @select="${this._handleMenuSelect}"><slot part="items" @slotchange="${this._handleSlotChange}"></slot></md-menu>`;
+ */
+export class M3Select extends Select {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.supportingText = '';
+        this.focused = false;
     }
-    constructor(...args){
-        super(...args), this.label = '', this.supportingText = '', this.focused = false;
+    renderMenu() {
+        return html `<md-menu part="menu" id="menu" for="field" type="listbox" data-tabindex="-1" ?quick="${this.quick}" offset="${this.offset}" align="${this.align}" align-strategy="${this.alignStrategy}" keep-open-blur no-focus-control ?open="${this.open}" @open="${() => (this.open = true)}" @close="${() => (this.open = false)}" @item-focus="${this._handleMenuItemFocus}" @select="${this._handleMenuSelect}"><slot part="items" @slotchange="${this._handleSlotChange}"></slot></md-menu>`;
     }
 }
-_ts_decorate([
-    property({
-        type: String
-    })
+__decorate([
+    property({ type: String })
 ], M3Select.prototype, "label", void 0);
-_ts_decorate([
-    property({
-        type: String
-    })
+__decorate([
+    property({ type: String })
 ], M3Select.prototype, "supportingText", void 0);
-_ts_decorate([
+__decorate([
     state()
 ], M3Select.prototype, "focused", void 0);
-_ts_decorate([
+__decorate([
     query('md-filled-field, md-outlined-field')
 ], M3Select.prototype, "field", void 0);

package/src/m3/slider/slider.d.ts

@@ -0,0 +1,20 @@
+import { Slider } from '../../base/slider.js';
+import '../focus-ring/focus-ring.js';
+/**
+ * TODO: Add size variants
+ * TODO: Add orientation: vertical
+ *
+ * @tag md-slider
+ */
+export declare class M3Slider extends Slider {
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    private renderTrack;
+    private renderLabel;
+    private renderHandle;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-slider': M3Slider;
+    }
+}

package/src/m3/slider/slider.js

@@ -1,4 +1,4 @@
-import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { __decorate } from "tslib";
 import { html, nothing } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -7,70 +7,76 @@ import { when } from 'lit/directives/when.js';
 import { Slider } from '../../base/slider.js';
 import '../focus-ring/focus-ring.js';
 import { sliderStyles } from './slider-styles.css.js';
-export class M3Slider extends Slider {
-    static{
-        this.styles = [
-            sliderStyles
-        ];
-    }
+/**
+ * TODO: Add size variants
+ * TODO: Add orientation: vertical
+ *
+ * @tag md-slider
+ */
+let M3Slider = class M3Slider extends Slider {
+    static { this.styles = [sliderStyles]; }
     render() {
         const step = this.step === 0 ? 1 : this.step;
         const range = Math.max(this.max - this.min, step);
-        const startFraction = this.range ? ((this.renderValueStart ?? this.min) - this.min) / range : 0;
+        const startFraction = this.range
+            ? ((this.renderValueStart ?? this.min) - this.min) / range
+            : 0;
         const endFraction = ((this.renderValueEnd ?? this.min) - this.min) / range;
         const containerStyles = {
             '--_start': String(startFraction),
             '--_end': String(endFraction),
-            '--_ticks': String(range / step)
-        };
-        const containerClasses = {
-            ranged: this.range
+            '--_ticks': String(range / step),
         };
+        const containerClasses = { ranged: this.range };
         const labelStart = this.valueLabelStart || String(this.renderValueStart);
-        const labelEnd = (this.range ? this.valueLabelEnd : this.valueLabel) || String(this.renderValueEnd);
+        const labelEnd = (this.range ? this.valueLabelEnd : this.valueLabel) ||
+            String(this.renderValueEnd);
         const inputStartProps = {
             start: true,
             value: this.renderValueStart,
             ariaLabel: this.renderAriaLabelStart,
             ariaValueText: this.renderAriaValueTextStart,
             ariaMin: this.min,
-            ariaMax: this.valueEnd ?? this.max
+            ariaMax: this.valueEnd ?? this.max,
         };
         const inputEndProps = {
             start: false,
             value: this.renderValueEnd,
             ariaLabel: this.renderAriaLabelEnd,
             ariaValueText: this.renderAriaValueTextEnd,
-            ariaMin: this.range ? this.valueStart ?? this.min : this.min,
-            ariaMax: this.max
+            ariaMin: this.range ? (this.valueStart ?? this.min) : this.min,
+            ariaMax: this.max,
         };
         const handleStartProps = {
             start: true,
-            label: labelStart
+            label: labelStart,
         };
         const handleEndProps = {
             start: false,
-            label: labelEnd
+            label: labelEnd,
         };
-        return html`<div class="container ${classMap(containerClasses)}" style="${styleMap(containerStyles)}">${when(this.range, ()=>this.renderInput(inputStartProps))} ${this.renderInput(inputEndProps)} ${this.renderTrack()}<div class="handles-padded"><div class="handles">${when(this.range, ()=>this.renderHandle(handleStartProps))} ${this.renderHandle(handleEndProps)}</div></div></div>`;
+        return html `<div class="container ${classMap(containerClasses)}" style="${styleMap(containerStyles)}">${when(this.range, () => this.renderInput(inputStartProps))} ${this.renderInput(inputEndProps)} ${this.renderTrack()}<div class="handles-padded"><div class="handles">${when(this.range, () => this.renderHandle(handleStartProps))} ${this.renderHandle(handleEndProps)}</div></div></div>`;
     }
     renderTrack() {
-        return html`<div class="track"><div class="inactive-before"></div><div class="active"></div><div class="inactive-after"></div></div>${this.ticks ? html`<div class="tickmarks"><div class="inactive-before"></div><div class="active"></div><div class="inactive-after"></div></div>` : nothing}`;
+        return html `<div class="track"><div class="inactive-before"></div><div class="active"></div><div class="inactive-after"></div></div>${this.ticks
+            ? html `<div class="tickmarks"><div class="inactive-before"></div><div class="active"></div><div class="inactive-after"></div></div>`
+            : nothing}`;
     }
     renderLabel(value) {
-        return html`<div class="label" aria-hidden="true"><span part="label">${value}</span></div>`;
+        return html `<div class="label" aria-hidden="true"><span part="label">${value}</span></div>`;
     }
     renderHandle({ start, label }) {
         const onTop = !this.disabled && start === this.startOnTop;
         const isOverlapping = !this.disabled && this.handlesOverlapping;
         const name = start ? 'start' : 'end';
-        return html`<div class="handle ${classMap({
+        return html `<div class="handle ${classMap({
             [name]: true,
             onTop,
-            isOverlapping
-        })}"><md-focus-ring part="focus-ring" for="${name}"></md-focus-ring><div class="nub"></div>${when(this.labeled, ()=>this.renderLabel(label))}</div>`;
+            isOverlapping,
+        })}"><md-focus-ring part="focus-ring" for="${name}"></md-focus-ring><div class="nub"></div>${when(this.labeled, () => this.renderLabel(label))}</div>`;
     }
-}
-M3Slider = _ts_decorate([
+};
+M3Slider = __decorate([
     customElement('md-slider')
 ], M3Slider);
+export { M3Slider };