@vollowx/seele 0.9.1 → 0.10.0

package/custom-elements.json

@@ -38,6 +38,13 @@
               "default": "false",
               "attribute": "error",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "$ripple",
+              "type": {
+                "text": "M3Ripple"
+              }
             }
           ],
           "attributes": [
@@ -120,7 +127,7 @@
               "type": {
                 "text": "| 'surface'\r\n    | 'primary-container'\r\n    | 'secondary-container'\r\n    | 'tertiary-container'\r\n    | 'primary'\r\n    | 'secondary'\r\n    | 'tertiary'"
               },
-              "default": "'surface'",
+              "default": "'primary'",
               "attribute": "color",
               "reflects": true
             }
@@ -139,7 +146,7 @@
               "type": {
                 "text": "| 'surface'\r\n    | 'primary-container'\r\n    | 'secondary-container'\r\n    | 'tertiary-container'\r\n    | 'primary'\r\n    | 'secondary'\r\n    | 'tertiary'"
               },
-              "default": "'surface'",
+              "default": "'primary'",
               "fieldName": "color"
             }
           ],
@@ -850,33 +857,27 @@
             },
             {
               "kind": "field",
-              "name": "#handleKeyDown",
-              "privacy": "private"
+              "name": "handleKeyDown"
             },
             {
               "kind": "field",
-              "name": "#handleKeyUp",
-              "privacy": "private"
+              "name": "handleKeyUp"
             },
             {
               "kind": "field",
-              "name": "#handlePointerEnter",
-              "privacy": "private"
+              "name": "handlePointerEnter"
             },
             {
               "kind": "field",
-              "name": "#handlePointerLeave",
-              "privacy": "private"
+              "name": "handlePointerLeave"
             },
             {
               "kind": "field",
-              "name": "#handlePointerDown",
-              "privacy": "private"
+              "name": "handlePointerDown"
             },
             {
               "kind": "field",
-              "name": "#handlePointerUp",
-              "privacy": "private"
+              "name": "handlePointerUp"
             },
             {
               "kind": "method",
@@ -900,8 +901,7 @@
             },
             {
               "kind": "method",
-              "name": "#calculateRipple",
-              "privacy": "private",
+              "name": "calculateRipple",
               "parameters": [
                 {
                   "name": "e",
@@ -1013,6 +1013,74 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/m3/slider.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "M3Slider",
+          "members": [
+            {
+              "kind": "method",
+              "name": "renderTrack",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderHandle",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "{ start, label }",
+                  "type": {
+                    "text": "{ start: boolean; label: string }"
+                  }
+                }
+              ]
+            }
+          ],
+          "superclass": {
+            "name": "Slider",
+            "module": "/src/base/slider.js"
+          },
+          "tagName": "md-slider",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3Slider",
+          "declaration": {
+            "name": "M3Slider",
+            "module": "src/m3/slider.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "md-slider",
+          "declaration": {
+            "name": "M3Slider",
+            "module": "src/m3/slider.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/m3/switch.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Standard Extensible Elements. A web components library that can be styled and extended freely, pre-providing components in Material Design 3.",
   "author": "vollowx",
   "license": "MIT",

package/src/all.js

@@ -14,6 +14,7 @@ export { M3Menu } from './m3/menu.js';
 export { M3MenuItem } from './m3/menu-item.js';
 export { M3Option } from './m3/option.js';
 export { M3Ripple } from './m3/ripple.js';
+export { M3Slider } from './m3/slider.js';
 export { M3Switch } from './m3/switch.js';
 export { M3Tooltip } from './m3/tooltip.js';
 export { M3Toolbar } from './m3/toolbar.js';

package/src/base/slider.js

@@ -0,0 +1,444 @@
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { FormAssociated } from './mixins/form-associated.js';
+import { InternalsAttached, internals } from './mixins/internals-attached.js';
+const Base = FormAssociated(InternalsAttached(LitElement));
+export class Slider extends Base {
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    get nameStart() {
+        return this.getAttribute('name-start') ?? this.name ?? '';
+    }
+    set nameStart(name) {
+        this.setAttribute('name-start', name);
+    }
+    get nameEnd() {
+        return this.getAttribute('name-end') ?? this.nameStart;
+    }
+    set nameEnd(name) {
+        this.setAttribute('name-end', name);
+    }
+    get renderAriaLabelStart() {
+        return (this.ariaLabelStart ||
+            (this.ariaLabel && `${this.ariaLabel} start`) ||
+            this.valueLabelStart ||
+            String(this.valueStart));
+    }
+    get renderAriaValueTextStart() {
+        return (this.ariaValueTextStart || this.valueLabelStart || String(this.valueStart));
+    }
+    get renderAriaLabelEnd() {
+        if (this.range) {
+            return (this.ariaLabelEnd ||
+                (this.ariaLabel && `${this.ariaLabel} end`) ||
+                this.valueLabelEnd ||
+                String(this.valueEnd));
+        }
+        return this.ariaLabel || this.valueLabel || String(this.value);
+    }
+    get renderAriaValueTextEnd() {
+        if (this.range) {
+            return (this.ariaValueTextEnd || this.valueLabelEnd || String(this.valueEnd));
+        }
+        return this.ariaValueText || this.valueLabel || String(this.value);
+    }
+    renderInput({ start, value, ariaLabel, ariaValueText, ariaMin, ariaMax, }) {
+        const name = start ? `start` : `end`;
+        return html `<input
+      type="range"
+      class="${classMap({
+            start,
+            end: !start,
+        })}"
+      @focus=${this.handleFocus}
+      @pointerdown=${this.handleDown}
+      @pointerup=${this.handleUp}
+      @keydown=${this.handleKeydown}
+      @keyup=${this.handleKeyup}
+      @input=${this.handleInput}
+      @change=${this.handleChange}
+      id=${name}
+      .disabled=${this.disabled}
+      .min=${String(this.min)}
+      aria-valuemin=${ariaMin}
+      .max=${String(this.max)}
+      aria-valuemax=${ariaMax}
+      .step=${String(this.step)}
+      .value=${String(value)}
+      .tabIndex=${start ? 1 : 0}
+      aria-label=${ariaLabel || nothing}
+      aria-valuetext=${ariaValueText}
+    />`;
+    }
+    constructor() {
+        super();
+        this.min = 0;
+        this.max = 100;
+        this.valueLabel = '';
+        this.valueLabelStart = '';
+        this.valueLabelEnd = '';
+        this.ariaLabelStart = '';
+        this.ariaValueTextStart = '';
+        this.ariaLabelEnd = '';
+        this.ariaValueTextEnd = '';
+        this.step = 1;
+        this.ticks = false;
+        this.labeled = false;
+        this.range = false;
+        this.startOnTop = false;
+        this.handlesOverlapping = false;
+        this.isRedispatchingEvent = false;
+        // @TODO: Delegate ARIA attributes to inputs, automatically convert from
+        // aria-* to data-aria-*.
+        this.ariaLabel = null;
+        this.ariaValueText = null;
+        // Activation click handling usually goes here if needed
+        this.addEventListener('click', (event) => {
+            if (!isActivationClick(event) || !this.inputEnd) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.inputEnd);
+        });
+    }
+    focus() {
+        this.inputEnd?.focus();
+    }
+    willUpdate(changed) {
+        this.renderValueStart = changed.has('valueStart')
+            ? this.valueStart
+            : this.inputStart?.valueAsNumber;
+        const endValueChanged = (changed.has('valueEnd') && this.range) || changed.has('value');
+        this.renderValueEnd = endValueChanged
+            ? this.range
+                ? this.valueEnd
+                : this.value
+            : this.inputEnd?.valueAsNumber;
+    }
+    updated(changed) {
+        if (this.range) {
+            this.renderValueStart = this.inputStart.valueAsNumber;
+        }
+        this.renderValueEnd = this.inputEnd.valueAsNumber;
+        if (this.range) {
+            const segment = (this.max - this.min) / 3;
+            if (this.valueStart === undefined) {
+                this.inputStart.valueAsNumber = this.min + segment;
+                const v = this.inputStart.valueAsNumber;
+                this.valueStart = this.renderValueStart = v;
+            }
+            if (this.valueEnd === undefined) {
+                this.inputEnd.valueAsNumber = this.min + 2 * segment;
+                const v = this.inputEnd.valueAsNumber;
+                this.valueEnd = this.renderValueEnd = v;
+            }
+        }
+        else {
+            this.value ??= this.renderValueEnd;
+        }
+        if (changed.has('range') ||
+            changed.has('renderValueStart') ||
+            changed.has('renderValueEnd') ||
+            this.isUpdatePending) {
+            const startNub = this.handleStart?.querySelector('.handleNub');
+            const endNub = this.handleEnd?.querySelector('.handleNub');
+            this.handlesOverlapping = isOverlapping(startNub, endNub);
+        }
+        this.updateFormValue();
+        this.performUpdate();
+    }
+    // Event Handlers - Changed to protected for subclass template usage
+    handleFocus(event) {
+        this.updateOnTop(event.target);
+    }
+    handleKeydown(event) {
+        this.startAction(event);
+    }
+    handleKeyup(event) {
+        this.finishAction(event);
+    }
+    handleDown(event) {
+        this.startAction(event);
+    }
+    async handleUp(event) {
+        if (!this.action) {
+            return;
+        }
+        const { target, values, flipped } = this.action;
+        await new Promise(requestAnimationFrame);
+        if (target !== undefined) {
+            target.focus();
+            if (flipped && target.valueAsNumber !== values.get(target)) {
+                target.dispatchEvent(new Event('change', { bubbles: true }));
+            }
+        }
+        this.finishAction(event);
+    }
+    handleInput(event) {
+        if (this.isRedispatchingEvent) {
+            return;
+        }
+        let stopPropagation = false;
+        let redispatch = false;
+        if (this.range) {
+            if (this.isActionFlipped()) {
+                stopPropagation = true;
+                redispatch = this.flipAction();
+            }
+            if (this.clampAction()) {
+                stopPropagation = true;
+                redispatch = false;
+            }
+        }
+        const target = event.target;
+        this.updateOnTop(target);
+        if (this.range) {
+            this.valueStart = this.inputStart.valueAsNumber;
+            this.valueEnd = this.inputEnd.valueAsNumber;
+        }
+        else {
+            this.value = this.inputEnd.valueAsNumber;
+        }
+        if (stopPropagation) {
+            event.stopPropagation();
+        }
+        if (redispatch) {
+            this.isRedispatchingEvent = true;
+            redispatchEvent(target, event);
+            this.isRedispatchingEvent = false;
+        }
+    }
+    handleChange(event) {
+        const changeTarget = event.target;
+        const { target, values } = this.action ?? {};
+        const squelch = target && target.valueAsNumber === values.get(changeTarget);
+        if (!squelch) {
+            redispatchEvent(this, event);
+        }
+        this.finishAction(event);
+    }
+    // Logic helpers
+    startAction(event) {
+        const target = event.target;
+        const fixed = target === this.inputStart ? this.inputEnd : this.inputStart;
+        this.action = {
+            canFlip: event.type === 'pointerdown',
+            flipped: false,
+            target,
+            fixed,
+            values: new Map([
+                [target, target.valueAsNumber],
+                [fixed, fixed?.valueAsNumber],
+            ]),
+        };
+    }
+    finishAction(event) {
+        this.action = undefined;
+    }
+    updateOnTop(input) {
+        this.startOnTop = input.classList.contains('start');
+    }
+    needsClamping() {
+        if (!this.action) {
+            return false;
+        }
+        const { target, fixed } = this.action;
+        const isStart = target === this.inputStart;
+        return isStart
+            ? target.valueAsNumber > fixed.valueAsNumber
+            : target.valueAsNumber < fixed.valueAsNumber;
+    }
+    isActionFlipped() {
+        const { action } = this;
+        if (!action) {
+            return false;
+        }
+        const { target, fixed, values } = action;
+        if (action.canFlip) {
+            const coincident = values.get(target) === values.get(fixed);
+            if (coincident && this.needsClamping()) {
+                action.canFlip = false;
+                action.flipped = true;
+                action.target = fixed;
+                action.fixed = target;
+            }
+        }
+        return action.flipped;
+    }
+    flipAction() {
+        if (!this.action) {
+            return false;
+        }
+        const { target, fixed, values } = this.action;
+        const changed = target.valueAsNumber !== fixed.valueAsNumber;
+        target.valueAsNumber = fixed.valueAsNumber;
+        fixed.valueAsNumber = values.get(fixed);
+        return changed;
+    }
+    clampAction() {
+        if (!this.needsClamping() || !this.action) {
+            return false;
+        }
+        const { target, fixed } = this.action;
+        target.valueAsNumber = fixed.valueAsNumber;
+        return true;
+    }
+    // Form associated callbacks
+    formResetCallback() {
+        if (this.range) {
+            const valueStart = this.getAttribute('value-start');
+            this.valueStart = valueStart !== null ? Number(valueStart) : undefined;
+            const valueEnd = this.getAttribute('value-end');
+            this.valueEnd = valueEnd !== null ? Number(valueEnd) : undefined;
+            return;
+        }
+        const value = this.getAttribute('value');
+        this.value = value !== null ? Number(value) : undefined;
+    }
+    formStateRestoreCallback(state) {
+        if (Array.isArray(state)) {
+            const [[, valueStart], [, valueEnd]] = state;
+            this.valueStart = Number(valueStart);
+            this.valueEnd = Number(valueEnd);
+            this.range = true;
+            return;
+        }
+        this.value = Number(state);
+        this.range = false;
+    }
+    // Use Internals for form value
+    updateFormValue() {
+        if (this.range) {
+            const data = new FormData();
+            data.append(this.nameStart, String(this.valueStart));
+            data.append(this.nameEnd, String(this.valueEnd));
+            this[internals].setFormValue(data);
+        }
+        else {
+            this[internals].setFormValue(String(this.value));
+        }
+    }
+}
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "value", void 0);
+__decorate([
+    property({ type: Number, attribute: 'value-start' })
+], Slider.prototype, "valueStart", void 0);
+__decorate([
+    property({ type: Number, attribute: 'value-end' })
+], Slider.prototype, "valueEnd", void 0);
+__decorate([
+    property({ attribute: 'value-label' })
+], Slider.prototype, "valueLabel", void 0);
+__decorate([
+    property({ attribute: 'value-label-start' })
+], Slider.prototype, "valueLabelStart", void 0);
+__decorate([
+    property({ attribute: 'value-label-end' })
+], Slider.prototype, "valueLabelEnd", void 0);
+__decorate([
+    property({ attribute: 'aria-label-start' })
+], Slider.prototype, "ariaLabelStart", void 0);
+__decorate([
+    property({ attribute: 'aria-valuetext-start' })
+], Slider.prototype, "ariaValueTextStart", void 0);
+__decorate([
+    property({ attribute: 'aria-label-end' })
+], Slider.prototype, "ariaLabelEnd", void 0);
+__decorate([
+    property({ attribute: 'aria-valuetext-end' })
+], Slider.prototype, "ariaValueTextEnd", void 0);
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "step", void 0);
+__decorate([
+    property({ type: Boolean })
+], Slider.prototype, "ticks", void 0);
+__decorate([
+    property({ type: Boolean })
+], Slider.prototype, "labeled", void 0);
+__decorate([
+    property({ type: Boolean })
+], Slider.prototype, "range", void 0);
+__decorate([
+    query('input.start')
+], Slider.prototype, "inputStart", void 0);
+__decorate([
+    query('input.end')
+], Slider.prototype, "inputEnd", void 0);
+__decorate([
+    query('.handle.start')
+], Slider.prototype, "handleStart", void 0);
+__decorate([
+    query('.handle.end')
+], Slider.prototype, "handleEnd", void 0);
+__decorate([
+    state()
+], Slider.prototype, "startOnTop", void 0);
+__decorate([
+    state()
+], Slider.prototype, "handlesOverlapping", void 0);
+__decorate([
+    state()
+], Slider.prototype, "renderValueStart", void 0);
+__decorate([
+    state()
+], Slider.prototype, "renderValueEnd", void 0);
+__decorate([
+    property({ attribute: 'data-aria-label' })
+], Slider.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ attribute: 'data-aria-valuetext' })
+], Slider.prototype, "ariaValueText", void 0);
+function isOverlapping(elA, elB) {
+    if (!(elA && elB)) {
+        return false;
+    }
+    const a = elA.getBoundingClientRect();
+    const b = elB.getBoundingClientRect();
+    return !(a.top > b.bottom ||
+        a.right < b.left ||
+        a.bottom < b.top ||
+        a.left > b.right);
+}
+function isActivationClick(event) {
+    // Simple check for now, simplified version of material web's check
+    // If it's a mouse event, primary button, bubbles etc.
+    // Or just assume true if it reached here for now as placeholder description
+    // In real impl this checks if the event invalidates activation (like bubbling from a label)
+    return event.type === 'click';
+}
+function dispatchActivationClick(element) {
+    const event = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+    });
+    element.dispatchEvent(event);
+}
+function redispatchEvent(element, event) {
+    if (event.bubbles && (event.composed || event.defaultPrevented)) {
+        const copy = new event.constructor(event.type, event);
+        element.dispatchEvent(copy);
+        return true;
+    }
+    const copy = new event.constructor(event.type, {
+        bubbles: event.bubbles,
+        cancelable: event.cancelable,
+        composed: event.composed,
+        // detail: (event as any).detail,
+    });
+    element.dispatchEvent(copy);
+    return true;
+}

package/src/m3/checkbox.js

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { Checkbox } from '../base/checkbox.js';
 import './focus-ring.js';
-import './ripple.js';
 import { checkboxStyles } from './checkbox-styles.css.js';
 import { targetStyles } from './target-styles.css.js';
 /**
@@ -36,10 +35,20 @@ let M3Checkbox = class M3Checkbox extends Checkbox {
       </svg>
     `;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        // SSR'd <md-checkbox> components don't have their labels set up on time
+        setTimeout(() => {
+            this.$ripple.attach(this);
+        });
+    }
 };
 __decorate([
     property({ type: Boolean, reflect: true })
 ], M3Checkbox.prototype, "error", void 0);
+__decorate([
+    query('md-ripple')
+], M3Checkbox.prototype, "$ripple", void 0);
 M3Checkbox = __decorate([
     customElement('md-checkbox')
 ], M3Checkbox);

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const fabStyles = css `:host{--md-focus-ring-shape:var(--_border-radius);--_text-color:var(--md-sys-color-primary);--_background-color:var(--md-sys-color-surface-container-high);--_size:56px;--_border-radius:16px;--_icon-size:24px;background-color:color-mix(in srgb,var(--_background-color)var(--_background-opacity,100%),transparent);border-radius:var(--_border-radius);box-shadow:var(--md-sys-elevation-shadow-3);box-sizing:border-box;color:color-mix(in srgb,var(--_text-color)var(--_text-opacity,100%),transparent);cursor:pointer;font:var(--md-sys-typography-label-large);height:var(--_size);min-width:var(--_size);padding-inline:calc((var(--_size) - var(--_icon-size))/2);-webkit-tap-highlight-color:transparent;transition:box-shadow var(--md-sys-motion-std-effects-slow-duration)var(--md-sys-motion-std-effects-slow);-webkit-user-select:none;user-select:none;vertical-align:middle;outline:0;justify-content:center;align-items:center;gap:8px;display:inline-flex;position:relative}:host([lowered]){--_background-color:var(--md-sys-color-surface-container-low);box-shadow:var(--md-sys-elevation-shadow-1)}:host([size=medium]){--_size:80px;--_border-radius:20px;--_icon-size:28px}:host([size=large]){--_size:96px;--_border-radius:28px;--_icon-size:36px}:host([color=primary-container]){--_text-color:var(--md-sys-color-on-primary-container);--_background-color:var(--md-sys-color-primary-container)}:host([color=secondary-container]){--_text-color:var(--md-sys-color-on-secondary-container);--_background-color:var(--md-sys-color-secondary-container)}:host([color=tertiary-container]){--_text-color:var(--md-sys-color-on-tertiary-container);--_background-color:var(--md-sys-color-tertiary-container)}:host([color=primary]){--_text-color:var(--md-sys-color-on-primary);--_background-color:var(--md-sys-color-primary)}:host([color=secondary]){--_text-color:var(--md-sys-color-on-secondary);--_background-color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_text-color:var(--md-sys-color-on-tertiary);--_background-color:var(--md-sys-color-tertiary)}:host(:disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:12%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;box-shadow:none;cursor:default;pointer-events:none}@media (hover:hover) and (pointer:fine){:host(:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-4)}}::slotted(:not([slot=label])){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em;display:inline-flex}::slotted([slot=label]){margin-inline:4px}`;
+export const fabStyles = css `:host{--md-focus-ring-shape:var(--_border-radius);--_text-color:var(--md-sys-color-on-primary);--_background-color:var(--md-sys-color-primary);--_size:56px;--_border-radius:16px;--_icon-size:24px;background-color:color-mix(in srgb,var(--_background-color)var(--_background-opacity,100%),transparent);border-radius:var(--_border-radius);box-shadow:var(--md-sys-elevation-shadow-3);box-sizing:border-box;color:color-mix(in srgb,var(--_text-color)var(--_text-opacity,100%),transparent);cursor:pointer;font:var(--md-sys-typography-label-large);height:var(--_size);min-width:var(--_size);padding-inline:calc((var(--_size) - var(--_icon-size))/2);-webkit-tap-highlight-color:transparent;transition:box-shadow var(--md-sys-motion-std-effects-slow-duration)var(--md-sys-motion-std-effects-slow);-webkit-user-select:none;user-select:none;vertical-align:middle;outline:0;justify-content:center;align-items:center;gap:8px;display:inline-flex;position:relative}:host([lowered]){--_background-color:var(--md-sys-color-surface-container-low);box-shadow:var(--md-sys-elevation-shadow-1)}:host([size=medium]){--_size:80px;--_border-radius:20px;--_icon-size:28px}:host([size=large]){--_size:96px;--_border-radius:28px;--_icon-size:36px}:host([color=primary-container]){--_text-color:var(--md-sys-color-on-primary-container);--_background-color:var(--md-sys-color-primary-container)}:host([color=secondary-container]){--_text-color:var(--md-sys-color-on-secondary-container);--_background-color:var(--md-sys-color-secondary-container)}:host([color=tertiary-container]){--_text-color:var(--md-sys-color-on-tertiary-container);--_background-color:var(--md-sys-color-tertiary-container)}:host([color=secondary]){--_text-color:var(--md-sys-color-on-secondary);--_background-color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_text-color:var(--md-sys-color-on-tertiary);--_background-color:var(--md-sys-color-tertiary)}:host([color=surface]){--_text-color:var(--md-sys-color-primary);--_background-color:var(--md-sys-color-surface-container-high)}:host(:disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:12%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;box-shadow:none;cursor:default;pointer-events:none}@media (hover:hover) and (pointer:fine){:host(:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-4)}}::slotted(:not([slot=label])){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em;display:inline-flex}::slotted([slot=label]){margin-inline:4px}`;

package/src/m3/fab.js

@@ -19,7 +19,7 @@ let M3FAB = class M3FAB extends Button {
     constructor() {
         super(...arguments);
         this.size = 'default';
-        this.color = 'surface';
+        this.color = 'primary';
     }
     static { this.styles = [...super.styles, targetStyles, fabStyles]; }
     render() {

package/src/m3/ripple.js

@@ -27,7 +27,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
         this.#spaceKeyDown = false;
         this.#pointerDown = false;
         this.#lastTime = 0;
-        this.#handleKeyDown = (e) => {
+        this.handleKeyDown = (e) => {
             if ((e.key === 'Enter' && this.enterBehavior === 'always') ||
                 (e.key === ' ' && this.spaceBehavior === 'always')) {
                 this.addRipple();
@@ -39,42 +39,42 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
                 this.#spaceKeyDown = true;
             }
         };
-        this.#handleKeyUp = (e) => {
+        this.handleKeyUp = (e) => {
             if (e.key === ' ' && this.spaceBehavior === 'once') {
                 this.#spaceKeyDown = false;
                 this.removeRippleAll();
             }
         };
-        this.#handlePointerEnter = (e) => {
+        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.handlePointerLeave = () => {
             this[internals].states.delete('hover');
             if (this.#pointerDown && this.clickBehavior === 'always')
                 this.removeRippleAll();
         };
-        this.#handlePointerDown = (e) => {
+        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);
+            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.handlePointerUp = () => {
             this.#pointerDown = false;
-            document.removeEventListener('pointerup', this.#handlePointerUp);
-            document.removeEventListener('touchcancel', this.#handlePointerUp);
-            document.removeEventListener('touchend', this.#handlePointerUp);
-            document.removeEventListener('touchmove', this.#handlePointerUp);
+            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';
@@ -82,19 +82,13 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
     #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,
+            keydown: this.handleKeyDown,
+            keyup: this.handleKeyUp,
+            pointerenter: this.handlePointerEnter,
+            pointerleave: this.handlePointerLeave,
+            pointerdown: this.handlePointerDown,
         };
         Object.keys(eventHandlers).forEach((eventName) => {
             // @ts-ignore
@@ -116,7 +110,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             }
         });
     }
-    #calculateRipple(e = null) {
+    calculateRipple(e = null) {
         const containerRect = this.getBoundingClientRect();
         const containerMiddle = {
             x: containerRect.width / 2,
@@ -139,7 +133,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`;

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const sliderStyles = css `:host{--_target-size:48px;--_half-target:calc(var(--_target-size)/2);--_handle-width-start:var(--md-slider-handle-width,4px);--_handle-width-end:var(--md-slider-handle-width,4px);--_handle-height:var(--md-slider-handle-height,44px);--_handle-shape:var(--md-slider-handle-shape,20px);--_handle-margin:6px;--_tick-size:var(--md-slider-tick-size,2px);--_track-shape:8px;--_track-height:var(--md-slider-track-height,16px);vertical-align:middle;min-inline-size:200px;display:inline-flex}md-focus-ring{width:16px;height:56px;inset:unset}:host([disabled]){opacity:.38}:host([disabled]) input{cursor:default;pointer-events:none}.container{--_start-px:calc(100%*var(--_start));--_end-px:calc(100%*var(--_end));--_inv-start-px:calc(100%*(1 - var(--_start)));--_inv-end-px:calc(100%*(1 - var(--_end)));--_mask-offset-start:calc(var(--_handle-width-start)/2 + var(--_handle-margin));--_mask-offset-end:calc(var(--_handle-width-end)/2 + var(--_handle-margin));--_cut-start:calc(var(--_start-px) + var(--_mask-offset-start));--_cut-end:calc(var(--_inv-end-px) + var(--_mask-offset-end));--_cut-inv-start:calc(var(--_inv-start-px) + var(--_mask-offset-start));--_cut-inv-end:calc(var(--_end-px) + var(--_mask-offset-end));block-size:var(--_target-size);pointer-events:none;touch-action:none;user-select:none;flex:1;align-items:center;display:flex;position:relative}.track,.tickmarks{block-size:var(--_track-height);align-items:center;display:flex;position:absolute;inset-inline:0}.track div,.tickmarks div{position:absolute;inset:0}.track div{border-radius:var(--_track-shape)}.track .inactive-before,.track .inactive-after{background:var(--md-sys-color-secondary-container)}.track .active{background:var(--md-sys-color-primary)}:host([disabled]) .track .inactive-before,:host([disabled]) .track .inactive-after{background:var(--md-sys-color-on-surface);opacity:.315789}:host([disabled]) .track .active{background:var(--md-sys-color-on-surface)}.tickmarks div{--_tick-color:var(--md-sys-color-on-secondary-container);background-size:calc((100% - var(--_tick-size)*2)/var(--_ticks))100%;background-image:radial-gradient(circle at var(--_tick-size)center,var(--_tick-color)0,var(--_tick-color)calc(var(--_tick-size)/2),transparent calc(var(--_tick-size)/2))}.tickmarks .active{--_tick-color:var(--md-sys-color-on-primary)}:host([disabled]) .tickmarks div{--_tick-color:var(--md-sys-color-on-surface)}:host([disabled]) .tickmarks .active{--_tick-color:var(--md-sys-color-inverse-on-surface)}.inactive-before{clip-path:inset(0 var(--_cut-inv-start)0 0 round 2px)}.inactive-after{clip-path:inset(0 0 0 var(--_cut-inv-end)round 2px)}.active{clip-path:inset(0 var(--_cut-end)0 0 round 2px)}.ranged .active{clip-path:inset(0 var(--_cut-end)0 var(--_cut-start)round 2px)}:host(:dir(rtl)) .inactive-before{clip-path:inset(0 0 0 var(--_cut-inv-start)round 2px)}:host(:dir(rtl)) .inactive-after{clip-path:inset(0 var(--_cut-inv-end)0 0 round 2px)}:host(:dir(rtl)) .active{clip-path:inset(0 0 0 var(--_cut-end)round 2px)}:host(:dir(rtl)) .ranged .active{clip-path:inset(0 var(--_cut-start)0 var(--_cut-end)round 2px)}.handles{block-size:100%;inline-size:100%;inline-size:calc(var(--_end-px) - var(--_start-px));position:relative;inset-block:0;inset-inline-start:var(--_start-px)}.handle{--md-ripple-color:var(--md-sys-color-primary);block-size:var(--_target-size);inline-size:var(--_target-size);border-radius:var(--_handle-shape);place-content:center;place-items:center;display:flex;position:absolute}.handle.start{inset-inline-start:calc(0px - var(--_half-target))}.handle.end{inset-inline-end:calc(0px - var(--_half-target))}.nub{height:var(--_handle-height);width:var(--_handle-width-end);border-radius:var(--_handle-shape);background:var(--md-sys-color-primary);transition:width var(--md-sys-motion-std-effects-fast-duration)var(--md-sys-motion-std-effects-fast);position:absolute}.start .nub{width:var(--_handle-width-start)}:host([disabled]) .nub{background:var(--md-sys-color-on-surface)}.onTop.isOverlapping .nub{border:1px solid var(--md-sys-color-surface)}.label{box-sizing:border-box;color:var(--md-sys-color-inverse-on-surface);background:var(--md-sys-color-inverse-surface);font:var(--md-sys-typography-label-large);opacity:0;border-radius:9999px;place-content:center;place-items:center;min-block-size:44px;min-inline-size:48px;padding:0 16px;transition:opacity 67ms linear;display:flex;position:absolute;inset-block-end:100%;transform:translateY(-2px)}:host(:not(:disabled):hover) .label,:host(:not(:disabled)) :where(:has(input:active)) .label,:host(:not(:disabled)) :where(:has(input:focus-visible)) .label{opacity:1}input[type=range]{opacity:0;-webkit-tap-highlight-color:transparent;box-sizing:border-box;cursor:pointer;pointer-events:auto;appearance:none;width:100%;height:100%;margin:0;position:absolute}input[type=range]:focus{outline:none}:host(:not([disabled])) :has(input.start:active){--_handle-width-start:2px}:host(:not([disabled])) :has(input.end:active){--_handle-width-end:2px}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_handle-height);inline-size:var(--_handle-width-end);opacity:0;z-index:2}::-moz-range-thumb{appearance:none;block-size:var(--_handle-height);inline-size:var(--_handle-width-end);opacity:0;z-index:2;transform:scaleX(0)}input.start::-webkit-slider-thumb{--_pad:calc((var(--_target-size) - var(--_handle-width-start))/2);transform:translateX(calc(var(--_pad) - 2*var(--_start)*var(--_pad)))}input.end::-webkit-slider-thumb{--_pad:calc((var(--_target-size) - var(--_handle-width-end))/2);transform:translateX(calc(var(--_pad) - 2*var(--_end)*var(--_pad)))}input:dir(rtl)::-webkit-slider-thumb{transform:translateX(calc(-1*(var(--_pad) - 2*var(--frac)*var(--_pad))))}.ranged input{--track-len:calc(100% - var(--_target-size));--mid-frac:calc(var(--_start) + ((var(--_end) - var(--_start))/2));--clip-px:calc(var(--_half-target) + var(--track-len)*var(--mid-frac))}.ranged input.start{clip-path:inset(0 calc(100% - var(--clip-px))0 0)}.ranged input.end{clip-path:inset(0 0 0 var(--clip-px))}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - var(--clip-px)))}.ranged input.end:dir(rtl){clip-path:inset(0 var(--clip-px)0 0)}.onTop{z-index:1}`;

package/src/m3/slider.js

@@ -0,0 +1,111 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { when } from 'lit/directives/when.js';
+import { Slider } from '../base/slider.js';
+import './focus-ring.js';
+import { sliderStyles } from './slider-styles.css.js';
+/**
+ * @TODO: Add size variants
+ * @TODO: Add orientation: vertical
+ */
+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 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 };
+        const labelStart = this.valueLabelStart || String(this.renderValueStart);
+        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,
+        };
+        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,
+        };
+        const handleStartProps = {
+            start: true,
+            label: labelStart,
+        };
+        const handleEndProps = {
+            start: false,
+            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">
+        ${when(this.range, () => this.renderHandle(handleStartProps))}
+        ${this.renderHandle(handleEndProps)}
+      </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}
+    `;
+    }
+    renderLabel(value) {
+        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({
+            [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>`;
+    }
+};
+M3Slider = __decorate([
+    customElement('md-slider')
+], M3Slider);
+export { M3Slider };

package/src/m3/switch.js

@@ -87,7 +87,7 @@ let M3Switch = class M3Switch extends Switch {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.updateComplete.then(() => {
+        setTimeout(() => {
             this.$ripple.attach(this);
         });
         this.addEventListener('pointerdown', this.#handlePointerDown);