@vollowx/seele 0.14.3 → 0.14.4

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

@@ -19,8 +19,8 @@ let M3ListItem = class M3ListItem extends ListItem {
     constructor() {
         super();
         this.updateComplete.then(() => {
-            this.$ripple.$control = this;
-            this.$focusRing.$control = this;
+            this.$ripple.attach(this);
+            this.$focusRing.attach(this);
         });
     }
     updated(changed) {

package/src/m3/loading/loading.d.ts

@@ -17,9 +17,9 @@ declare const M3Loading_base: Constructor<import("../../base/mixins/internals-at
 export declare class M3Loading extends M3Loading_base {
     #private;
     contained: boolean;
-    $canvas: HTMLCanvasElement;
+    $canvas: HTMLCanvasElement | null;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     constructor();
     firstUpdated(): void;
     disconnectedCallback(): void;

package/src/m3/loading/loading.js

@@ -80,7 +80,7 @@ let M3Loading = class M3Loading extends InternalsAttached(LitElement) {
             this.#color = color;
     }
     #draw(from, to, progress, rotation, scale) {
-        if (!this.#ctx || !this.$canvas)
+        if (!this.#ctx)
             return;
         const ctx = this.#ctx;
         ctx.clearRect(0, 0, this.$canvas.width, this.$canvas.height);

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

@@ -7,10 +7,10 @@ import { type M3Ripple } from '../ripple/ripple.js';
 export declare class M3NavigationRailItem extends Button {
     label: string;
     active: boolean;
-    $focusRing: M3FocusRing;
-    $ripple: M3Ripple;
+    $focusRing: M3FocusRing | null;
+    $ripple: M3Ripple | null;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     updated(changed: PropertyValues): void;
     firstUpdated(): void;
 }

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

@@ -9,6 +9,7 @@ import { navigationRailItemStyles } from './navigation-rail-item-styles.css.js';
 let M3NavigationRailItem = class M3NavigationRailItem extends Button {
     constructor() {
         super(...arguments);
+        this.label = '';
         this.active = false;
     }
     static { this.styles = [navigationRailItemStyles]; }
@@ -27,7 +28,7 @@ let M3NavigationRailItem = class M3NavigationRailItem extends Button {
     }
 };
 __decorate([
-    property({ reflect: true })
+    property()
 ], M3NavigationRailItem.prototype, "label", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

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

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

package/src/m3/progress/circular-progress.d.ts

@@ -10,7 +10,7 @@ import { ProgressBar } from '../../base/progressbar.js';
  */
 export declare class M3CircularProgress extends ProgressBar {
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/progress/linear-progress.d.ts

@@ -13,7 +13,7 @@ import { ProgressBar } from '../../base/progressbar.js';
  */
 export declare class M3LinearProgress extends ProgressBar {
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const radioStyles = css`:host{--_d:var(--md-sys-motion-effects-default-duration);--_default:var(--_d) var(--md-sys-motion-effects-default);--_slow:var(--md-sys-motion-effects-slow-duration) var(--md-sys-motion-effects-slow);cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:20px;outline:0;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex;position:relative}.icon{z-index:1;width:20px;height:20px}.ring{fill:none;r:9px;stroke:var(--md-sys-color-on-surface-variant);stroke-width:2px;transition:stroke var(--_default);will-change:r, stroke-width}:host(:state(checked)) .ring{stroke:var(--md-sys-color-primary)}.dot{fill:var(--md-sys-color-primary);r:0px;will-change:r}:host(:state(checked)) .dot{r:5px}:host(:state(checking)) .ring{animation:check-ring-1 var(--_default), check-ring-2 var(--_slow) var(--_d)}:host(:state(checking)) .dot{animation:check-dot-1 var(--_default), check-dot-2 var(--_slow) var(--_d)}@keyframes check-ring-1{0%{r:9px;stroke-width:2px}to{r:4.5px;stroke-width:9px}}@keyframes check-ring-2{0%{r:8px;stroke-width:2px}to{r:9px;stroke-width:2px}}@keyframes check-dot-1{0%,to{r:0px}}@keyframes check-dot-2{0%{r:7px}to{r:5px}}:host(:state(unchecking)) .ring{animation:uncheck-ring-1 var(--_default), uncheck-ring-2 var(--_slow) var(--_d)}:host(:state(unchecking)) .dot{animation:uncheck-dot-1 var(--_default)}@keyframes uncheck-ring-1{0%{r:9px;stroke:var(--md-sys-color-primary);stroke-width:2px}to{r:8px;stroke:var(--md-sys-color-on-surface-variant);stroke-width:2px}}@keyframes uncheck-ring-2{0%{r:4.5px;stroke-width:9px}to{r:9px;stroke-width:2px}}@keyframes uncheck-dot-1{0%{fill:var(--md-sys-color-primary);r:5px}to{fill:var(--md-sys-color-on-surface-variant);r:7.5px}}:host([disabled]){pointer-events:none}:host([disabled]) .ring{stroke:oklch(from var(--md-sys-color-on-surface) l c h / 38%)}:host([disabled]) .dot{fill:oklch(from var(--md-sys-color-on-surface) l c h / 38%)}@media (forced-colors:active){:host{--md-sys-color-primary:SelectedItem;--md-sys-color-on-surface-variant:CanvasText}:host(:disabled) .ring{stroke:graytext}:host(:disabled) .dot{fill:graytext}}`;
+export const radioStyles = css`:host{--_d:var(--md-sys-motion-effects-default-duration);--_default:var(--_d) var(--md-sys-motion-effects-default);--_slow:var(--md-sys-motion-effects-slow-duration) var(--md-sys-motion-effects-slow);cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:0;place-content:center;place-items:center;margin:10px;display:inline-grid;position:relative}.icon{z-index:1;width:20px;height:20px}.ring{fill:none;r:9px;stroke:var(--md-sys-color-on-surface-variant);stroke-width:2px;transition:stroke var(--_default);will-change:r, stroke-width}:host(:state(checked)){--_ripple-color:var(--md-sys-color-primary);& .ring{stroke:var(--md-sys-color-primary)}}.dot{fill:var(--md-sys-color-primary);r:0px;will-change:r}:host(:state(checked)) .dot{r:5px}:host(:state(checking)) .ring{animation:check-ring-1 var(--_default), check-ring-2 var(--_slow) var(--_d)}:host(:state(checking)) .dot{animation:check-dot-1 var(--_default), check-dot-2 var(--_slow) var(--_d)}@keyframes check-ring-1{0%{r:9px;stroke-width:2px}to{r:4.5px;stroke-width:9px}}@keyframes check-ring-2{0%{r:8px;stroke-width:2px}to{r:9px;stroke-width:2px}}@keyframes check-dot-1{0%,to{r:0px}}@keyframes check-dot-2{0%{r:7px}to{r:5px}}:host(:state(unchecking)) .ring{animation:uncheck-ring-1 var(--_default), uncheck-ring-2 var(--_slow) var(--_d)}:host(:state(unchecking)) .dot{animation:uncheck-dot-1 var(--_default)}@keyframes uncheck-ring-1{0%{r:9px;stroke:var(--md-sys-color-primary);stroke-width:2px}to{r:8px;stroke:var(--md-sys-color-on-surface-variant);stroke-width:2px}}@keyframes uncheck-ring-2{0%{r:4.5px;stroke-width:9px}to{r:9px;stroke-width:2px}}@keyframes uncheck-dot-1{0%{fill:var(--md-sys-color-primary);r:5px}to{fill:var(--md-sys-color-on-surface-variant);r:7.5px}}:host([disabled]){pointer-events:none}:host([disabled]) .ring{stroke:oklch(from var(--md-sys-color-on-surface) l c h / 38%)}:host([disabled]) .dot{fill:oklch(from var(--md-sys-color-on-surface) l c h / 38%)}md-focus-ring{height:44px;inset:unset;width:44px}md-ripple{--md-ripple-color:var(--_ripple-color);height:40px;inset:unset;border-radius:9999px;width:40px}@media (forced-colors:active){:host{--md-sys-color-primary:SelectedItem;--md-sys-color-on-surface-variant:CanvasText}:host(:disabled) .ring{stroke:graytext}:host(:disabled) .dot{fill:graytext}}`;

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

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

package/src/m3/ripple/ripple.js

@@ -62,6 +62,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             if (e.pointerType === 'mouse')
                 this.#pointerDown = true;
             document.addEventListener('pointerup', this.handlePointerUp);
+            document.addEventListener('pointercancel', this.handlePointerUp);
             document.addEventListener('touchcancel', this.handlePointerUp);
             document.addEventListener('touchend', this.handlePointerUp);
             document.addEventListener('touchmove', this.handlePointerUp);
@@ -73,6 +74,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
         this.handlePointerUp = () => {
             this.#pointerDown = false;
             document.removeEventListener('pointerup', this.handlePointerUp);
+            document.removeEventListener('pointercancel', this.handlePointerUp);
             document.removeEventListener('touchcancel', this.handlePointerUp);
             document.removeEventListener('touchend', this.handlePointerUp);
             document.removeEventListener('touchmove', this.handlePointerUp);
@@ -90,6 +92,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             pointerenter: { fn: this.handlePointerEnter, kbd: false },
             pointerleave: { fn: this.handlePointerLeave, kbd: false },
             pointerdown: { fn: this.handlePointerDown, kbd: false },
+            pointercancel: { fn: this.handlePointerUp, kbd: false },
         };
         Object.entries(eventHandlers).forEach(([eventName, { fn, kbd }]) => {
             prev?.labels?.forEach((label) => label.removeEventListener(eventName, fn));

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

@@ -7,7 +7,7 @@ import '../field/filled-field.js';
  */
 export declare class M3FilledSelect extends M3Select {
     static styles: any[];
-    protected renderField(): import("lit-html").TemplateResult<1>;
+    protected renderField(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -7,7 +7,7 @@ import '../field/outlined-field.js';
  */
 export declare class M3OutlinedSelect extends M3Select {
     static styles: any[];
-    protected renderField(): import("lit-html").TemplateResult<1>;
+    protected renderField(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -7,5 +7,5 @@ export declare abstract class M3Select extends Select {
     supportingText: string;
     protected focused: boolean;
     protected field: M3Field;
-    protected renderMenu(): import("lit-html").TemplateResult<1>;
+    protected renderMenu(): import("lit").TemplateResult<1>;
 }

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

@@ -11,7 +11,7 @@ export declare class M3Slider extends Slider {
     ticks: boolean;
     labeled: boolean;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     private renderTrack;
     private renderLabel;
     private renderHandle;

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

@@ -12,12 +12,12 @@ export declare class M3Switch extends ToggleButton {
     #private;
     icons: boolean;
     checkedIconOnly: boolean;
-    $ripple: M3Ripple;
-    $thumb: HTMLSpanElement;
+    $ripple: M3Ripple | null;
+    $thumb: HTMLSpanElement | null;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
-    renderOnIcon(): import("lit-html").TemplateResult<1>;
-    renderOffIcon(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+    renderOnIcon(): import("lit").TemplateResult<1>;
+    renderOffIcon(): import("lit").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;

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

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

package/src/m3/tab/tab.js

@@ -23,7 +23,8 @@ let M3Tab = class M3Tab extends Tab {
     render() {
         return html `<md-focus-ring inward></md-focus-ring><md-ripple></md-ripple><span part="target"></span><div part="content"><slot part="icon" name="icon" aria-hidden="true"></slot><slot part="label"></slot>${!this._isSecondary ? html `<div part="indicator" role="presentation"></div>` : nothing}</div>${this._isSecondary ? html `<div part="indicator" role="presentation"></div>` : nothing}`;
     }
-    animateIndicator(previousTab) {
+    async animateIndicator(previousTab) {
+        await this.updateComplete;
         const indicator = this.$indicator;
         indicator.getAnimations().forEach((a) => a.cancel());
         const prevIndicator = previousTab.$indicator;
@@ -77,9 +78,6 @@ let M3Tab = class M3Tab extends Tab {
         }
     }
 };
-__decorate([
-    query('[part="content"]')
-], M3Tab.prototype, "$content", void 0);
 __decorate([
     query('[part="indicator"]')
 ], M3Tab.prototype, "$indicator", void 0);

package/src/m3/text-field/filled-text-field.d.ts

@@ -4,7 +4,7 @@ export declare class M3FilledTextField extends Input {
     label: string;
     supportingText: string;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/text-field/outlined-text-field.d.ts

@@ -4,7 +4,7 @@ export declare class M3OutlinedTextField extends Input {
     label: string;
     supportingText: string;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/toolbar/toolbar.d.ts

@@ -14,7 +14,7 @@ export declare class M3Toolbar extends M3Toolbar_base {
     color: 'standard' | 'vibrant';
     orientation: 'horizontal' | 'vertical';
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     constructor();
     protected updated(changed: Map<string, unknown>): void;
 }

package/src/win98/button/button.d.ts

@@ -4,7 +4,7 @@ import { Button } from '../../base/button.js';
  */
 export declare class Win98Button extends Button {
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/base/field.d.ts

@@ -1,3 +0,0 @@
-import { LitElement } from 'lit';
-export declare class Field extends LitElement {
-}

package/src/base/field.js

@@ -1,3 +0,0 @@
-import { LitElement } from 'lit';
-export class Field extends LitElement {
-}

package/src/base/item.d.ts

@@ -1,7 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * This class works as a "UI item", it should be contained in menu items,
- * options, etc.
- */
-export declare class Item extends LitElement {
-}

package/src/base/item.js

@@ -1,7 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * This class works as a "UI item", it should be contained in menu items,
- * options, etc.
- */
-export class Item extends LitElement {
-}