@vollowx/seele 0.14.2 → 0.14.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (94) hide show
  1. package/README.md +7 -2
  2. package/package.json +5 -5
  3. package/src/all.d.ts +3 -0
  4. package/src/all.js +3 -0
  5. package/src/base/anchor.d.ts +21 -0
  6. package/src/base/anchor.js +60 -0
  7. package/src/base/autocomplete.d.ts +2 -2
  8. package/src/base/composed-menu.d.ts +2 -2
  9. package/src/base/composed-menu.js +6 -3
  10. package/src/base/controllers/list-controller.d.ts +1 -1
  11. package/src/base/controllers/list-controller.js +1 -1
  12. package/src/base/dialog.d.ts +1 -1
  13. package/src/base/dialog.js +2 -0
  14. package/src/base/input.d.ts +1 -1
  15. package/src/base/list.d.ts +1 -1
  16. package/src/base/menu.d.ts +1 -1
  17. package/src/base/menu.js +2 -1
  18. package/src/base/mixins/internals-attached.d.ts +1 -1
  19. package/src/base/mixins/internals-attached.js +4 -1
  20. package/src/base/popup.d.ts +1 -1
  21. package/src/base/select.d.ts +5 -6
  22. package/src/base/slider.d.ts +1 -3
  23. package/src/base/slider.js +0 -8
  24. package/src/base/tab-panel.d.ts +1 -1
  25. package/src/base/tab.d.ts +1 -1
  26. package/src/base/tabs.d.ts +1 -1
  27. package/src/base/tooltip.d.ts +1 -1
  28. package/src/base/tooltip.js +3 -5
  29. package/src/core/ensure-ready.js +1 -1
  30. package/src/m3/autocomplete/autocomplete.d.ts +1 -1
  31. package/src/m3/badge/badge.d.ts +2 -2
  32. package/src/m3/button/common-button-link.d.ts +30 -0
  33. package/src/m3/button/common-button-link.js +62 -0
  34. package/src/m3/button/common-button-styles.css.js +1 -1
  35. package/src/m3/button/common-button-toggle.d.ts +1 -1
  36. package/src/m3/button/common-button.d.ts +2 -2
  37. package/src/m3/button/common-button.js +1 -0
  38. package/src/m3/button/icon-button-link.d.ts +24 -0
  39. package/src/m3/button/icon-button-link.js +53 -0
  40. package/src/m3/button/icon-button-styles.css.js +1 -1
  41. package/src/m3/button/icon-button-toggle.d.ts +1 -1
  42. package/src/m3/button/icon-button.d.ts +1 -1
  43. package/src/m3/button/shared-button-link-styles.css.js +2 -0
  44. package/src/m3/button/shared-button-styles.css.js +1 -1
  45. package/src/m3/button/shared-button-toggle-styles.css.js +1 -1
  46. package/src/m3/button-group/connected-button-group-styles.css.js +1 -1
  47. package/src/m3/button-group/connected-button-group.d.ts +1 -1
  48. package/src/m3/button-group/standard-button-group.d.ts +7 -2
  49. package/src/m3/button-group/standard-button-group.js +3 -1
  50. package/src/m3/checkbox/checkbox-styles.css.js +1 -1
  51. package/src/m3/checkbox/checkbox.d.ts +3 -3
  52. package/src/m3/dialog/dialog.d.ts +20 -18
  53. package/src/m3/dialog/dialog.js +135 -85
  54. package/src/m3/fab/fab-styles.css.js +1 -1
  55. package/src/m3/fab/fab.d.ts +1 -1
  56. package/src/m3/field/field.d.ts +7 -12
  57. package/src/m3/field/field.js +5 -10
  58. package/src/m3/field/filled-field.d.ts +1 -1
  59. package/src/m3/field/outlined-field.d.ts +2 -2
  60. package/src/m3/focus-ring/focus-ring.js +3 -2
  61. package/src/m3/item/item.d.ts +3 -3
  62. package/src/m3/item/item.js +2 -3
  63. package/src/m3/list/list-item.d.ts +3 -3
  64. package/src/m3/list/list-item.js +2 -2
  65. package/src/m3/loading/loading.d.ts +2 -2
  66. package/src/m3/loading/loading.js +1 -1
  67. package/src/m3/navigation/navigation-rail-item.d.ts +3 -3
  68. package/src/m3/navigation/navigation-rail-item.js +2 -1
  69. package/src/m3/navigation/navigation-rail.d.ts +1 -1
  70. package/src/m3/progress/circular-progress-styles.css.js +2 -0
  71. package/src/m3/progress/circular-progress.d.ts +19 -0
  72. package/src/m3/progress/circular-progress.js +29 -0
  73. package/src/m3/progress/linear-progress.d.ts +1 -1
  74. package/src/m3/radio/radio-styles.css.js +1 -1
  75. package/src/m3/radio/radio.d.ts +2 -2
  76. package/src/m3/ripple/ripple.js +3 -0
  77. package/src/m3/select/filled-select.d.ts +1 -1
  78. package/src/m3/select/outlined-select.d.ts +1 -1
  79. package/src/m3/select/select.d.ts +1 -1
  80. package/src/m3/slider/slider-styles.css.js +1 -1
  81. package/src/m3/slider/slider.d.ts +5 -2
  82. package/src/m3/slider/slider.js +22 -4
  83. package/src/m3/switch/switch.d.ts +5 -5
  84. package/src/m3/tab/tab-styles.css.js +1 -1
  85. package/src/m3/tab/tab.d.ts +3 -4
  86. package/src/m3/tab/tab.js +2 -4
  87. package/src/m3/text-field/filled-text-field.d.ts +1 -1
  88. package/src/m3/text-field/outlined-text-field.d.ts +1 -1
  89. package/src/m3/toolbar/toolbar.d.ts +1 -1
  90. package/src/win98/button/button.d.ts +1 -1
  91. package/src/base/field.d.ts +0 -3
  92. package/src/base/field.js +0 -3
  93. package/src/base/item.d.ts +0 -7
  94. package/src/base/item.js +0 -7
package/src/m3/field/field.js CHANGED
@@ -1,13 +1,8 @@
1
1
  import { __decorate } from "tslib";
2
- import { html } from 'lit';
2
+ import { html, LitElement } from 'lit';
3
3
  import { property, state } from 'lit/decorators.js';
4
- import { Field } from '../../base/field.js';
5
4
  import { fieldStyles } from './field-styles.css.js';
6
- /**
7
- * @fires {Event} change - Fired when the selected value has changed.
8
- * @fires {Event} input - Fired when the selected value has changed.
9
- */
10
- export class M3Field extends Field {
5
+ export class M3Field extends LitElement {
11
6
  constructor() {
12
7
  super(...arguments);
13
8
  this.label = '';
@@ -31,10 +26,10 @@ export class M3Field extends Field {
31
26
  return html `<div class="supporting-text">${this.supportingText}</div>`;
32
27
  }
33
28
  renderStart() {
34
- return html `<slot name="start" class="start" ?hidden="${!this.hasStart}" @slotchange="${this.handleSlotChange}"></slot>`;
29
+ return html `<slot name="start" class="start" ?hidden="${!this.hasStart}" @slotchange="${this.#handleSlotChange}"></slot>`;
35
30
  }
36
31
  renderEnd() {
37
- return html `<slot name="end" class="end" ?hidden="${!this.hasEnd}" @slotchange="${this.handleSlotChange}"></slot>`;
32
+ return html `<slot name="end" class="end" ?hidden="${!this.hasEnd}" @slotchange="${this.#handleSlotChange}"></slot>`;
38
33
  }
39
34
  update(changedProperties) {
40
35
  if (changedProperties.has('label')) {
@@ -42,7 +37,7 @@ export class M3Field extends Field {
42
37
  }
43
38
  super.update(changedProperties);
44
39
  }
45
- handleSlotChange(e) {
40
+ #handleSlotChange(e) {
46
41
  const slot = e.target;
47
42
  const hasContent = slot.assignedNodes({ flatten: true }).length > 0;
48
43
  if (slot.name === 'start')
package/src/m3/field/filled-field.d.ts CHANGED
@@ -2,7 +2,7 @@ import { M3Field } from './field.js';
2
2
  import '../ripple/ripple.js';
3
3
  export declare class M3FilledField extends M3Field {
4
4
  static styles: any[];
5
- protected renderContainerContent(): import("lit-html").TemplateResult<1>;
5
+ renderContainerContent(): import("lit").TemplateResult<1>;
6
6
  }
7
7
  declare global {
8
8
  interface HTMLElementTagNameMap {
package/src/m3/field/outlined-field.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { M3Field } from './field.js';
2
2
  export declare class M3OutlinedField extends M3Field {
3
3
  static styles: any[];
4
- protected renderContainerContent(): import("lit-html").TemplateResult<1>;
5
- protected renderOutline(): import("lit-html").TemplateResult<1>;
4
+ renderContainerContent(): import("lit").TemplateResult<1>;
5
+ renderOutline(): import("lit").TemplateResult<1>;
6
6
  }
7
7
  declare global {
8
8
  interface HTMLElementTagNameMap {
package/src/m3/focus-ring/focus-ring.js CHANGED
@@ -53,8 +53,9 @@ let M3FocusRing = class M3FocusRing extends Attachable(InternalsAttached(LitElem
53
53
  pointerdown: this.#handlePointerDown,
54
54
  };
55
55
  Object.keys(eventHandlers).forEach((eventName) => {
56
- prev?.removeEventListener(eventName, eventHandlers[eventName]);
57
- next?.addEventListener(eventName, eventHandlers[eventName]);
56
+ const handler = eventHandlers[eventName];
57
+ prev?.removeEventListener(eventName, handler);
58
+ next?.addEventListener(eventName, handler);
58
59
  });
59
60
  }
60
61
  };
package/src/m3/item/item.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Item } from '../../base/item.js';
1
+ import { LitElement } from 'lit';
2
2
  /**
3
3
  * @tag md-item
4
4
  *
@@ -19,10 +19,10 @@ import { Item } from '../../base/item.js';
19
19
  * @slot trailing-supporting-text - trailing supporting text
20
20
  * @slot end - end content
21
21
  */
22
- export declare class M3Item extends Item {
22
+ export declare class M3Item extends LitElement {
23
23
  multiline: boolean;
24
24
  static styles: any[];
25
- render(): import("lit-html").TemplateResult<1>;
25
+ render(): import("lit").TemplateResult<1>;
26
26
  }
27
27
  declare global {
28
28
  interface HTMLElementTagNameMap {
package/src/m3/item/item.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { __decorate } from "tslib";
2
- import { html } from 'lit';
2
+ import { html, LitElement } from 'lit';
3
3
  import { customElement, property } from 'lit/decorators.js';
4
- import { Item } from '../../base/item.js';
5
4
  import { itemStyles } from './item-styles.css.js';
6
5
  /**
7
6
  * @tag md-item
@@ -23,7 +22,7 @@ import { itemStyles } from './item-styles.css.js';
23
22
  * @slot trailing-supporting-text - trailing supporting text
24
23
  * @slot end - end content
25
24
  */
26
- let M3Item = class M3Item extends Item {
25
+ let M3Item = class M3Item extends LitElement {
27
26
  constructor() {
28
27
  super(...arguments);
29
28
  this.multiline = false;
package/src/m3/list/list-item.d.ts CHANGED
@@ -10,10 +10,10 @@ import type { M3FocusRing } from '../focus-ring/focus-ring.js';
10
10
  * @slot - contents in md-item
11
11
  */
12
12
  export declare class M3ListItem extends ListItem {
13
- $ripple: M3Ripple;
14
- $focusRing: M3FocusRing;
13
+ $ripple: M3Ripple | null;
14
+ $focusRing: M3FocusRing | null;
15
15
  static styles: any[];
16
- render(): import("lit-html").TemplateResult<1>;
16
+ render(): import("lit").TemplateResult<1>;
17
17
  constructor();
18
18
  protected updated(changed: Map<string, any>): void;
19
19
  }
package/src/m3/list/list-item.js CHANGED
@@ -19,8 +19,8 @@ let M3ListItem = class M3ListItem extends ListItem {
19
19
  constructor() {
20
20
  super();
21
21
  this.updateComplete.then(() => {
22
- this.$ripple.$control = this;
23
- this.$focusRing.$control = this;
22
+ this.$ripple.attach(this);
23
+ this.$focusRing.attach(this);
24
24
  });
25
25
  }
26
26
  updated(changed) {
package/src/m3/loading/loading.d.ts CHANGED
@@ -17,9 +17,9 @@ declare const M3Loading_base: Constructor<import("../../base/mixins/internals-at
17
17
  export declare class M3Loading extends M3Loading_base {
18
18
  #private;
19
19
  contained: boolean;
20
- $canvas: HTMLCanvasElement;
20
+ $canvas: HTMLCanvasElement | null;
21
21
  static styles: any[];
22
- render(): import("lit-html").TemplateResult<1>;
22
+ render(): import("lit").TemplateResult<1>;
23
23
  constructor();
24
24
  firstUpdated(): void;
25
25
  disconnectedCallback(): void;
package/src/m3/loading/loading.js CHANGED
@@ -80,7 +80,7 @@ let M3Loading = class M3Loading extends InternalsAttached(LitElement) {
80
80
  this.#color = color;
81
81
  }
82
82
  #draw(from, to, progress, rotation, scale) {
83
- if (!this.#ctx || !this.$canvas)
83
+ if (!this.#ctx)
84
84
  return;
85
85
  const ctx = this.#ctx;
86
86
  ctx.clearRect(0, 0, this.$canvas.width, this.$canvas.height);
package/src/m3/navigation/navigation-rail-item.d.ts CHANGED
@@ -7,10 +7,10 @@ import { type M3Ripple } from '../ripple/ripple.js';
7
7
  export declare class M3NavigationRailItem extends Button {
8
8
  label: string;
9
9
  active: boolean;
10
- $focusRing: M3FocusRing;
11
- $ripple: M3Ripple;
10
+ $focusRing: M3FocusRing | null;
11
+ $ripple: M3Ripple | null;
12
12
  static styles: any[];
13
- render(): import("lit-html").TemplateResult<1>;
13
+ render(): import("lit").TemplateResult<1>;
14
14
  updated(changed: PropertyValues): void;
15
15
  firstUpdated(): void;
16
16
  }
package/src/m3/navigation/navigation-rail-item.js CHANGED
@@ -9,6 +9,7 @@ import { navigationRailItemStyles } from './navigation-rail-item-styles.css.js';
9
9
  let M3NavigationRailItem = class M3NavigationRailItem extends Button {
10
10
  constructor() {
11
11
  super(...arguments);
12
+ this.label = '';
12
13
  this.active = false;
13
14
  }
14
15
  static { this.styles = [navigationRailItemStyles]; }
@@ -27,7 +28,7 @@ let M3NavigationRailItem = class M3NavigationRailItem extends Button {
27
28
  }
28
29
  };
29
30
  __decorate([
30
- property({ reflect: true })
31
+ property()
31
32
  ], M3NavigationRailItem.prototype, "label", void 0);
32
33
  __decorate([
33
34
  property({ type: Boolean, reflect: true })
package/src/m3/navigation/navigation-rail.d.ts CHANGED
@@ -3,7 +3,7 @@ import { type M3NavigationRailItem } from './navigation-rail-item.js';
3
3
  export declare class M3NavigationRail extends LitElement {
4
4
  get $items(): Array<M3NavigationRailItem>;
5
5
  static styles: any[];
6
- render(): import("lit-html").TemplateResult<1>;
6
+ render(): import("lit").TemplateResult<1>;
7
7
  }
8
8
  declare global {
9
9
  interface HTMLElementTagNameMap {
package/src/m3/progress/circular-progress-styles.css.js ADDED
@@ -0,0 +1,2 @@
1
+ import { css } from 'lit';
2
+ export const circularProgressStyles = css`:host{--_size:var(--md-circular-progress-size,40px);--_thickness:var(--md-circular-progress-thickness,4px);--_gap:var(--md-circular-progress-gap,4px);--_value:0;height:var(--_size);width:var(--_size);display:inline-flex;position:relative;overflow:hidden}[part=container]{width:100%;height:100%;position:absolute;transform:rotate(-90deg)}svg{fill:#0000;width:100%;height:100%}[part~=track]{stroke:var(--md-sys-color-secondary-container);stroke-width:var(--_thickness);stroke-linecap:round;cx:calc(var(--_size) / 2);cy:calc(var(--_size) / 2);r:calc((var(--_size) - var(--_thickness)) / 2);stroke-dasharray:min((1 - var(--_value)) * (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) - var(--_gap) - var(--_thickness), 6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap) - var(--_gap) - 2 * var(--_thickness)) calc(6.28319 * (var(--_size) - var(--_thickness)) / 2 - min((1 - var(--_value)) * (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) - var(--_gap) - var(--_thickness), 6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap) - var(--_gap) - 2 * var(--_thickness)));stroke-dashoffset:calc(min((1 - var(--_value)) * (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) - var(--_gap) - var(--_thickness), 6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap) - var(--_gap) - 2 * var(--_thickness)) + var(--_gap) + var(--_thickness));transition:stroke-dasharray .5s cubic-bezier(0,0,.2,1),stroke-dashoffset .5s cubic-bezier(0,0,.2,1),stroke-width .25s cubic-bezier(.4,0,.6,1)}[part=active]{stroke:var(--md-sys-color-primary);stroke-width:var(--_thickness);stroke-linecap:round;cx:calc(var(--_size) / 2);cy:calc(var(--_size) / 2);r:calc((var(--_size) - var(--_thickness)) / 2);stroke-dasharray:calc(var(--_value) * (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) - var(--_thickness)) calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - var(--_value) * (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) + var(--_thickness));transition:stroke-dasharray .5s cubic-bezier(0,0,.2,1),stroke-width .25s cubic-bezier(.4,0,.6,1)}:host([indeterminate]){animation:6s linear infinite rotate;& [part=container]{animation:6s infinite container-rotate}& [part=track]{animation:6s infinite track-grow}& [part=active]{animation:6s infinite active-grow}}@keyframes rotate{0%{transform:rotate(-90deg)}to{transform:rotate(990deg)}}@keyframes container-rotate{0%{transform:rotate(0)}8.33333%{transform:rotate(90deg)}25%{transform:rotate(90deg)}33.3333%{transform:rotate(180deg)}50%{transform:rotate(180deg)}58.3333%{transform:rotate(270deg)}75%{transform:rotate(270deg)}83.3333%{transform:rotate(360deg)}to{transform:rotate(360deg)}}@keyframes track-grow{0%{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 - var(--_gap) - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 + var(--_gap) + var(--_thickness));stroke-dashoffset:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 - var(--_gap) - var(--_thickness) + var(--_gap) + var(--_thickness))}50%{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .13 - var(--_gap) - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .13 + var(--_gap) + var(--_thickness));stroke-dashoffset:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .13 - var(--_gap) - var(--_thickness) + var(--_gap) + var(--_thickness))}to{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 - var(--_gap) - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 + var(--_gap) + var(--_thickness));stroke-dashoffset:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 - var(--_gap) - var(--_thickness) + var(--_gap) + var(--_thickness))}}@keyframes active-grow{0%{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .16 - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .16 + var(--_thickness))}50%{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .87 - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .87 + var(--_thickness))}to{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .16 - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .16 + var(--_thickness))}}`;
package/src/m3/progress/circular-progress.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import { ProgressBar } from '../../base/progressbar.js';
2
+ /**
3
+ * TODO: wavy?
4
+ *
5
+ * @tag md-circular-progress
6
+ *
7
+ * @csspart container
8
+ * @csspart track
9
+ * @csspart active
10
+ */
11
+ export declare class M3CircularProgress extends ProgressBar {
12
+ static styles: any[];
13
+ render(): import("lit").TemplateResult<1>;
14
+ }
15
+ declare global {
16
+ interface HTMLElementTagNameMap {
17
+ 'md-circular-progress': M3CircularProgress;
18
+ }
19
+ }
package/src/m3/progress/circular-progress.js ADDED
@@ -0,0 +1,29 @@
1
+ import { __decorate } from "tslib";
2
+ import { html } from 'lit';
3
+ import { styleMap } from 'lit/directives/style-map.js';
4
+ import { customElement } from '../../core/decorators.js';
5
+ import { ProgressBar } from '../../base/progressbar.js';
6
+ import { circularProgressStyles } from './circular-progress-styles.css.js';
7
+ /**
8
+ * TODO: wavy?
9
+ *
10
+ * @tag md-circular-progress
11
+ *
12
+ * @csspart container
13
+ * @csspart track
14
+ * @csspart active
15
+ */
16
+ let M3CircularProgress = class M3CircularProgress extends ProgressBar {
17
+ static { this.styles = [circularProgressStyles]; }
18
+ render() {
19
+ const progress = Math.min(Math.max(this.value, 0), 100);
20
+ const style = {
21
+ '--_value': `${progress === 100 ? 1.08 : (progress) / 100}`,
22
+ };
23
+ return html `<div part="container" aria-hidden="true" style="${styleMap(style)}"><svg xmlns="http://www.w3.org/2000/svg"><circle part="track"></circle><circle part="active"></circle></svg></div>`;
24
+ }
25
+ };
26
+ M3CircularProgress = __decorate([
27
+ customElement('md-circular-progress')
28
+ ], M3CircularProgress);
29
+ export { M3CircularProgress };
package/src/m3/progress/linear-progress.d.ts CHANGED
@@ -13,7 +13,7 @@ import { ProgressBar } from '../../base/progressbar.js';
13
13
  */
14
14
  export declare class M3LinearProgress extends ProgressBar {
15
15
  static styles: any[];
16
- render(): import("lit-html").TemplateResult<1>;
16
+ render(): import("lit").TemplateResult<1>;
17
17
  }
18
18
  declare global {
19
19
  interface HTMLElementTagNameMap {
package/src/m3/radio/radio-styles.css.js CHANGED
@@ -1,2 +1,2 @@
1
1
  import { css } from 'lit';
2
- 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:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}:host([disabled]) .dot{fill:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}@media (forced-colors:active){:host{--md-sys-color-primary:SelectedItem;--md-sys-color-on-surface-variant:CanvasText}:host(:disabled) .ring{stroke:graytext}:host(:disabled) .dot{fill:graytext}}`;
2
+ 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 CHANGED
@@ -7,9 +7,9 @@ import type { M3Ripple } from '../ripple/ripple.js';
7
7
  * @tag md-radio
8
8
  */
9
9
  export declare class M3Radio extends Radio {
10
- $ripple: M3Ripple;
10
+ $ripple: M3Ripple | null;
11
11
  static styles: any[];
12
- render(): import("lit-html").TemplateResult<1>;
12
+ render(): import("lit").TemplateResult<1>;
13
13
  firstUpdated(): void;
14
14
  updated(changedProperties: PropertyValues<this>): void;
15
15
  }
package/src/m3/ripple/ripple.js CHANGED
@@ -62,6 +62,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
62
62
  if (e.pointerType === 'mouse')
63
63
  this.#pointerDown = true;
64
64
  document.addEventListener('pointerup', this.handlePointerUp);
65
+ document.addEventListener('pointercancel', this.handlePointerUp);
65
66
  document.addEventListener('touchcancel', this.handlePointerUp);
66
67
  document.addEventListener('touchend', this.handlePointerUp);
67
68
  document.addEventListener('touchmove', this.handlePointerUp);
@@ -73,6 +74,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
73
74
  this.handlePointerUp = () => {
74
75
  this.#pointerDown = false;
75
76
  document.removeEventListener('pointerup', this.handlePointerUp);
77
+ document.removeEventListener('pointercancel', this.handlePointerUp);
76
78
  document.removeEventListener('touchcancel', this.handlePointerUp);
77
79
  document.removeEventListener('touchend', this.handlePointerUp);
78
80
  document.removeEventListener('touchmove', this.handlePointerUp);
@@ -90,6 +92,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
90
92
  pointerenter: { fn: this.handlePointerEnter, kbd: false },
91
93
  pointerleave: { fn: this.handlePointerLeave, kbd: false },
92
94
  pointerdown: { fn: this.handlePointerDown, kbd: false },
95
+ pointercancel: { fn: this.handlePointerUp, kbd: false },
93
96
  };
94
97
  Object.entries(eventHandlers).forEach(([eventName, { fn, kbd }]) => {
95
98
  prev?.labels?.forEach((label) => label.removeEventListener(eventName, fn));
package/src/m3/select/filled-select.d.ts CHANGED
@@ -7,7 +7,7 @@ import '../field/filled-field.js';
7
7
  */
8
8
  export declare class M3FilledSelect extends M3Select {
9
9
  static styles: any[];
10
- protected renderField(): import("lit-html").TemplateResult<1>;
10
+ protected renderField(): import("lit").TemplateResult<1>;
11
11
  }
12
12
  declare global {
13
13
  interface HTMLElementTagNameMap {
package/src/m3/select/outlined-select.d.ts CHANGED
@@ -7,7 +7,7 @@ import '../field/outlined-field.js';
7
7
  */
8
8
  export declare class M3OutlinedSelect extends M3Select {
9
9
  static styles: any[];
10
- protected renderField(): import("lit-html").TemplateResult<1>;
10
+ protected renderField(): import("lit").TemplateResult<1>;
11
11
  }
12
12
  declare global {
13
13
  interface HTMLElementTagNameMap {
package/src/m3/select/select.d.ts CHANGED
@@ -7,5 +7,5 @@ export declare abstract class M3Select extends Select {
7
7
  supportingText: string;
8
8
  protected focused: boolean;
9
9
  protected field: M3Field;
10
- protected renderMenu(): import("lit-html").TemplateResult<1>;
10
+ protected renderMenu(): import("lit").TemplateResult<1>;
11
11
  }
package/src/m3/slider/slider-styles.css.js CHANGED
@@ -1,2 +1,2 @@
1
1
  import { css } from 'lit';
2
- 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);isolation:isolate;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{inset:0 calc(var(--_target-size) / 2);position:absolute}.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-padded{block-size:100%;inline-size:100%;padding-inline:calc(var(--_target-size) / 2);box-sizing:border-box;position:absolute;inset:0}.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-effects-fast-duration) var(--md-sys-motion-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)) :where(:has(input:active)) .label,:host(:not(:disabled)) :where(:has(input:focus-visible)) .label{opacity:1}@media (hover:hover) and (pointer:fine){:host(:not(:disabled)) :where(:has(input:hover)) .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(--_target-size);inline-size:var(--_target-size);opacity:0;z-index:2}::-moz-range-thumb{appearance:none;block-size:var(--_target-size);inline-size:var(--_target-size);opacity:0;z-index:2;transform:scaleX(0)}.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}`;
2
+ export const sliderStyles = css`:host{--_target-width:48px;--_half-target:calc(var(--_target-width) / 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,4px);--_tick-color:var(--md-sys-color-on-secondary-container);--_tick-active-color:var(--md-sys-color-on-primary);--_track-shape:var(--md-slider-track-shape,8px);--_track-height:var(--md-slider-track-height,16px);isolation:isolate;vertical-align:middle;min-inline-size:200px;display:inline-flex}:host([size=s]){--md-slider-track-height:24px}:host([size=m]){--md-slider-handle-height:52px;--md-slider-track-height:40px;--md-slider-track-shape:12px}:host([size=l]){--md-slider-handle-height:68px;--md-slider-track-height:56px;--md-slider-track-shape:16px}:host([size=xl]){--md-slider-handle-height:108px;--md-slider-track-height:96px;--md-slider-track-shape:28px}md-focus-ring{height:calc(var(--_handle-height) + 12px);width:16px;inset:unset}:host([disabled]){--_tick-color:oklch(from var(--md-sys-color-on-surface) l c h / .38);--_tick-active-color:var(--md-sys-color-inverse-on-surface)}:host([disabled]) input{cursor:default;pointer-events:none}.container{block-size:var(--_handle-height);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{--_clip-1:calc(var(--_clip-offset) + var(--_handle-margin) + (100% - var(--_clip-offset) * 2) * var(--_start-value) + var(--_handle-width-start) / 2);--_clip-1-till-end:calc(var(--_clip-offset) + var(--_handle-margin) + (100% - var(--_clip-offset) * 2) * (1 - var(--_start-value)) + var(--_handle-width-start) / 2);--_clip-2:calc(var(--_clip-offset) + var(--_handle-margin) + (100% - var(--_clip-offset) * 2) * var(--_end-value) + var(--_handle-width-end) / 2);--_clip-2-till-end:calc(var(--_clip-offset) + var(--_handle-margin) + (100% - var(--_clip-offset) * 2) * (1 - var(--_end-value)) + var(--_handle-width-end) / 2);inset:0 calc(var(--_target-width) / 2);position:absolute}.track div{--_clip-offset:6px;inset:0 calc(var(--_target-width) / 2 - var(--_clip-offset))}.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:oklch(from var(--md-sys-color-on-surface) l c h / .12)}:host([disabled]) .track .active{background:oklch(from var(--md-sys-color-on-surface) l c h / .38)}.tickmarks div{--_clip-offset:calc(var(--_tick-size) / 2);inset:0 calc(var(--_target-width) / 2 - var(--_clip-offset));background-size:calc((100% - var(--_tick-size)) / var(--_ticks)) 100%;background-image:radial-gradient(circle at calc(var(--_tick-size) / 2) center, var(--_tick-color) 0, var(--_tick-color) calc(var(--_tick-size) / 2), transparent calc(var(--_tick-size) / 2))}.tickmarks .active{--_tick-color:var(--_tick-active-color)}.inactive-before{clip-path:inset(0 var(--_clip-1-till-end) 0 0 round var(--_track-shape) 2px 2px var(--_track-shape))}.inactive-after{clip-path:inset(0 0 0 var(--_clip-2) round 2px var(--_track-shape) var(--_track-shape) 2px)}.active{clip-path:inset(0 var(--_clip-2-till-end) 0 0 round var(--_track-shape) 2px 2px var(--_track-shape))}.ranged .active{clip-path:inset(0 var(--_clip-2-till-end) 0 var(--_clip-1) round 2px)}:host(:dir(rtl)) .inactive-before{clip-path:inset(0 0 0 var(--_clip-1-till-end) round 2px var(--_track-shape) var(--_track-shape) 2px)}:host(:dir(rtl)) .inactive-after{clip-path:inset(0 var(--_clip-2) 0 0 round var(--_track-shape) 2px 2px var(--_track-shape))}:host(:dir(rtl)) .active{clip-path:inset(0 0 0 var(--_clip-2-till-end) round 2px var(--_track-shape) var(--_track-shape) 2px)}:host(:dir(rtl)) .ranged .active{clip-path:inset(0 var(--_clip-1) 0 var(--_clip-2-till-end) round 2px)}:host([stop]:not(:is([ticks],[range]))) .inactive-after:before{content:"";inline-size:var(--_tick-size);block-size:var(--_tick-size);background:var(--_tick-color);border-radius:50%;margin-block:auto;position:absolute;inset-block:0;inset-inline-end:calc(var(--_clip-offset) - var(--_tick-size) / 2)}.handles-padded{block-size:100%;inline-size:100%;padding-inline:calc(var(--_target-width) / 2);box-sizing:border-box;position:absolute;inset:0}.handles{block-size:100%;inline-size:100%;inline-size:calc(100% * (var(--_end-value) - var(--_start-value)));position:relative;inset-block:0;inset-inline-start:calc(100% * var(--_start-value))}.handle{block-size:var(--_handle-height);inline-size:var(--_target-width);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-effects-fast-duration) var(--md-sys-motion-effects-fast);position:absolute}.start .nub{width:var(--_handle-width-start)}:host([disabled]) .nub{background:oklch(from var(--md-sys-color-on-surface) l c h / .38)}.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)) :where(:has(input:active)) .label,:host(:not(:disabled)) :where(:has(input:focus-visible)) .label{opacity:1}@media (hover:hover) and (pointer:fine){:host(:not(:disabled)) :where(:has(input:hover)) .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(--_target-width);opacity:0;z-index:2}::-moz-range-thumb{appearance:none;block-size:var(--_handle-height);inline-size:var(--_target-width);opacity:0;z-index:2;transform:scaleX(0)}.ranged input{--_track-len:calc(100% - var(--_target-width));--_mid-frac:calc(var(--_start-value) + ((var(--_end-value) - var(--_start-value)) / 2));--_clip-input:calc(var(--_half-target) + var(--_track-len) * var(--_mid-frac))}.ranged input.start{clip-path:inset(0 calc(100% - var(--_clip-input)) 0 0)}.ranged input.end{clip-path:inset(0 0 0 var(--_clip-input))}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - var(--_clip-input)))}.ranged input.end:dir(rtl){clip-path:inset(0 var(--_clip-input) 0 0)}.onTop{z-index:1}`;
package/src/m3/slider/slider.d.ts CHANGED
@@ -1,14 +1,17 @@
1
1
  import { Slider } from '../../base/slider.js';
2
2
  import '../focus-ring/focus-ring.js';
3
3
  /**
4
- * TODO: Add size variants
5
4
  * TODO: Add orientation: vertical
6
5
  *
7
6
  * @tag md-slider
8
7
  */
9
8
  export declare class M3Slider extends Slider {
9
+ size: 'xs' | 's' | 'm' | 'l' | 'xl';
10
+ stop: boolean;
11
+ ticks: boolean;
12
+ labeled: boolean;
10
13
  static styles: any[];
11
- render(): import("lit-html").TemplateResult<1>;
14
+ render(): import("lit").TemplateResult<1>;
12
15
  private renderTrack;
13
16
  private renderLabel;
14
17
  private renderHandle;
package/src/m3/slider/slider.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { html, nothing } from 'lit';
3
- import { customElement } from 'lit/decorators.js';
3
+ import { customElement, property } from 'lit/decorators.js';
4
4
  import { classMap } from 'lit/directives/class-map.js';
5
5
  import { styleMap } from 'lit/directives/style-map.js';
6
6
  import { when } from 'lit/directives/when.js';
@@ -8,12 +8,18 @@ import { Slider } from '../../base/slider.js';
8
8
  import '../focus-ring/focus-ring.js';
9
9
  import { sliderStyles } from './slider-styles.css.js';
10
10
  /**
11
- * TODO: Add size variants
12
11
  * TODO: Add orientation: vertical
13
12
  *
14
13
  * @tag md-slider
15
14
  */
16
15
  let M3Slider = class M3Slider extends Slider {
16
+ constructor() {
17
+ super(...arguments);
18
+ this.size = 'xs';
19
+ this.stop = false;
20
+ this.ticks = false;
21
+ this.labeled = false;
22
+ }
17
23
  static { this.styles = [sliderStyles]; }
18
24
  render() {
19
25
  const step = this.step === 0 ? 1 : this.step;
@@ -23,8 +29,8 @@ let M3Slider = class M3Slider extends Slider {
23
29
  : 0;
24
30
  const endFraction = ((this.renderValueEnd ?? this.min) - this.min) / range;
25
31
  const containerStyles = {
26
- '--_start': String(startFraction),
27
- '--_end': String(endFraction),
32
+ '--_start-value': String(startFraction),
33
+ '--_end-value': String(endFraction),
28
34
  '--_ticks': String(range / step),
29
35
  };
30
36
  const containerClasses = { ranged: this.range };
@@ -76,6 +82,18 @@ let M3Slider = class M3Slider extends Slider {
76
82
  })}"><md-focus-ring part="focus-ring" for="${name}"></md-focus-ring><div class="nub"></div>${when(this.labeled, () => this.renderLabel(label))}</div>`;
77
83
  }
78
84
  };
85
+ __decorate([
86
+ property({ reflect: true })
87
+ ], M3Slider.prototype, "size", void 0);
88
+ __decorate([
89
+ property({ reflect: true, type: Boolean })
90
+ ], M3Slider.prototype, "stop", void 0);
91
+ __decorate([
92
+ property({ reflect: true, type: Boolean })
93
+ ], M3Slider.prototype, "ticks", void 0);
94
+ __decorate([
95
+ property({ type: Boolean })
96
+ ], M3Slider.prototype, "labeled", void 0);
79
97
  M3Slider = __decorate([
80
98
  customElement('md-slider')
81
99
  ], M3Slider);
package/src/m3/switch/switch.d.ts CHANGED
@@ -12,12 +12,12 @@ export declare class M3Switch extends ToggleButton {
12
12
  #private;
13
13
  icons: boolean;
14
14
  checkedIconOnly: boolean;
15
- $ripple: M3Ripple;
16
- $thumb: HTMLSpanElement;
15
+ $ripple: M3Ripple | null;
16
+ $thumb: HTMLSpanElement | null;
17
17
  static styles: any[];
18
- render(): import("lit-html").TemplateResult<1>;
19
- renderOnIcon(): import("lit-html").TemplateResult<1>;
20
- renderOffIcon(): import("lit-html").TemplateResult<1>;
18
+ render(): import("lit").TemplateResult<1>;
19
+ renderOnIcon(): import("lit").TemplateResult<1>;
20
+ renderOffIcon(): import("lit").TemplateResult<1>;
21
21
  connectedCallback(): void;
22
22
  disconnectedCallback(): void;
23
23
  firstUpdated(): void;
package/src/m3/tab/tab-styles.css.js CHANGED
@@ -1,2 +1,2 @@
1
1
  import { css } from 'lit';
2
- export const tabStyles = css`:host{--md-focus-ring-shape:12px;box-sizing:border-box;color:var(--md-sys-color-on-surface-variant);cursor:pointer;font:var(--md-sys-typography-title-small);-webkit-tap-highlight-color:transparent;text-wrap-mode:nowrap;user-select:none;-webkit-user-select-:none;outline:none;flex-shrink:0;justify-content:center;padding:0 16px;display:inline-flex;position:relative}:host([selected]){color:var(--_tab-selected-color);& md-focus-ring{margin-bottom:calc(var(--_indicator-height) + 2px)}& [part=indicator]{opacity:1}}:host([disabled]){pointer-events:none;color:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}[part=content]{flex-direction:var(--_tab-flex-dir,row);align-items:center;gap:var(--_tab-gap,8px);height:var(--_tab-height,48px);justify-content:center;display:inline-flex;position:relative}[part=indicator]{height:var(--_indicator-height);background-color:var(--md-sys-color-primary);opacity:0;transform-origin:0;pointer-events:none;will-change:transform, opacity;border-radius:3px 3px 0 0;min-width:24px;position:absolute;bottom:0;left:2px;right:2px}::slotted([slot=icon]){fill:currentColor;block-size:1em;inline-size:1em;font-size:24px}`;
2
+ export const tabStyles = css`:host{--md-focus-ring-shape:12px;box-sizing:border-box;color:var(--md-sys-color-on-surface-variant);cursor:pointer;font:var(--md-sys-typography-title-small);-webkit-tap-highlight-color:transparent;text-wrap-mode:nowrap;user-select:none;-webkit-user-select-:none;outline:none;flex-shrink:0;justify-content:center;padding:0 16px;display:inline-flex;position:relative}:host([selected]){color:var(--_tab-selected-color);& md-focus-ring{margin-bottom:calc(var(--_indicator-height) + 2px)}& [part=indicator]{opacity:1}}:host([disabled]){pointer-events:none;color:oklch(from var(--md-sys-color-on-surface) l c h / 38%)}[part=content]{flex-direction:var(--_tab-flex-dir,row);align-items:center;gap:var(--_tab-gap,8px);height:var(--_tab-height,48px);justify-content:center;display:inline-flex;position:relative}[part=indicator]{height:var(--_indicator-height);background-color:var(--md-sys-color-primary);opacity:0;transform-origin:0;pointer-events:none;will-change:transform, opacity;border-radius:3px 3px 0 0;min-width:24px;position:absolute;bottom:0;left:2px;right:2px}::slotted([slot=icon]){fill:currentColor;block-size:1em;inline-size:1em;font-size:24px}`;
package/src/m3/tab/tab.d.ts CHANGED
@@ -8,12 +8,11 @@ import '../ripple/ripple.js';
8
8
  * @slot - label
9
9
  */
10
10
  export declare class M3Tab extends Tab {
11
- $content: HTMLDivElement;
12
- $indicator: HTMLElement;
11
+ $indicator: HTMLElement | null;
13
12
  protected _isSecondary: boolean;
14
13
  static styles: any[];
15
- render(): import("lit-html").TemplateResult<1>;
16
- animateIndicator(previousTab: M3Tab): void;
14
+ render(): import("lit").TemplateResult<1>;
15
+ animateIndicator(previousTab: M3Tab): Promise<void>;
17
16
  }
18
17
  declare global {
19
18
  interface HTMLElementTagNameMap {
package/src/m3/tab/tab.js CHANGED
@@ -23,7 +23,8 @@ let M3Tab = class M3Tab extends Tab {
23
23
  render() {
24
24
  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}`;
25
25
  }
26
- animateIndicator(previousTab) {
26
+ async animateIndicator(previousTab) {
27
+ await this.updateComplete;
27
28
  const indicator = this.$indicator;
28
29
  indicator.getAnimations().forEach((a) => a.cancel());
29
30
  const prevIndicator = previousTab.$indicator;
@@ -77,9 +78,6 @@ let M3Tab = class M3Tab extends Tab {
77
78
  }
78
79
  }
79
80
  };
80
- __decorate([
81
- query('[part="content"]')
82
- ], M3Tab.prototype, "$content", void 0);
83
81
  __decorate([
84
82
  query('[part="indicator"]')
85
83
  ], M3Tab.prototype, "$indicator", void 0);
package/src/m3/text-field/filled-text-field.d.ts CHANGED
@@ -4,7 +4,7 @@ export declare class M3FilledTextField extends Input {
4
4
  label: string;
5
5
  supportingText: string;
6
6
  static styles: any[];
7
- render(): import("lit-html").TemplateResult<1>;
7
+ render(): import("lit").TemplateResult<1>;
8
8
  }
9
9
  declare global {
10
10
  interface HTMLElementTagNameMap {
package/src/m3/text-field/outlined-text-field.d.ts CHANGED
@@ -4,7 +4,7 @@ export declare class M3OutlinedTextField extends Input {
4
4
  label: string;
5
5
  supportingText: string;
6
6
  static styles: any[];
7
- render(): import("lit-html").TemplateResult<1>;
7
+ render(): import("lit").TemplateResult<1>;
8
8
  }
9
9
  declare global {
10
10
  interface HTMLElementTagNameMap {
package/src/m3/toolbar/toolbar.d.ts CHANGED
@@ -14,7 +14,7 @@ export declare class M3Toolbar extends M3Toolbar_base {
14
14
  color: 'standard' | 'vibrant';
15
15
  orientation: 'horizontal' | 'vertical';
16
16
  static styles: any[];
17
- render(): import("lit-html").TemplateResult<1>;
17
+ render(): import("lit").TemplateResult<1>;
18
18
  constructor();
19
19
  protected updated(changed: Map<string, unknown>): void;
20
20
  }
package/src/win98/button/button.d.ts CHANGED
@@ -4,7 +4,7 @@ import { Button } from '../../base/button.js';
4
4
  */
5
5
  export declare class Win98Button extends Button {
6
6
  static styles: any[];
7
- render(): import("lit-html").TemplateResult<1>;
7
+ render(): import("lit").TemplateResult<1>;
8
8
  }
9
9
  declare global {
10
10
  interface HTMLElementTagNameMap {
package/src/base/field.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { LitElement } from 'lit';
2
- export declare class Field extends LitElement {
3
- }
package/src/base/field.js DELETED
@@ -1,3 +0,0 @@
1
- import { LitElement } from 'lit';
2
- export class Field extends LitElement {
3
- }
package/src/base/item.d.ts DELETED
@@ -1,7 +0,0 @@
1
- import { LitElement } from 'lit';
2
- /**
3
- * This class works as a "UI item", it should be contained in menu items,
4
- * options, etc.
5
- */
6
- export declare class Item extends LitElement {
7
- }
package/src/base/item.js DELETED
@@ -1,7 +0,0 @@
1
- import { LitElement } from 'lit';
2
- /**
3
- * This class works as a "UI item", it should be contained in menu items,
4
- * options, etc.
5
- */
6
- export class Item extends LitElement {
7
- }