@vollowx/seele 0.13.6 → 0.13.8

package/src/m3/experimental/popup.js

@@ -0,0 +1,11 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Popup } from '../../base/experimental/popup.js';
+import { popupStyles } from './popup-styles.css.js';
+let M3Popup = class M3Popup extends Popup {
+    static { this.styles = [...super.styles, popupStyles]; }
+};
+M3Popup = __decorate([
+    customElement('md-popup')
+], M3Popup);
+export { M3Popup };

package/src/m3/fab/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-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-effects-default-duration) var(--md-sys-motion-effects-default);-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}md-ripple,md-focus-ring{position:absolute}:host([size=m]){--_size:80px;--_border-radius:20px;--_icon-size:28px}:host([size=l]){--_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;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}::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-effects-default-duration) var(--md-sys-motion-effects-default);-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}md-ripple,md-focus-ring{position:absolute}:host([size=m]){--_size:80px;--_border-radius:20px;--_icon-size:28px}:host([size=l]){--_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;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}::slotted([slot=label]){margin-inline:4px}@media (forced-colors:active){:host{forced-color-adjust:none;color:buttontext;background:buttonface;border:1px solid buttonborder}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const fieldStyles = css`:host{--_min-height:56px;--_padding-top:16px;--_padding-bottom:16px;cursor:text;-webkit-user-select:none;user-select:none;vertical-align:top;flex-direction:column;display:inline-flex;position:relative}.container{box-sizing:border-box;min-height:var(--_min-height);flex:1;align-items:center;display:flex;position:relative}:host([disabled]){opacity:.38;pointer-events:none}.start,.end{color:var(--md-sys-color-on-surface-variant);justify-content:center;align-items:center;min-width:48px;display:flex}.start[hidden],.end[hidden]{display:none}.middle{flex-direction:column;flex:1;justify-content:center;height:100%;display:flex;position:relative;overflow:hidden}.label{font:var(--md-sys-typography-body-large);pointer-events:none;text-overflow:ellipsis;transform-origin:0 0;max-width:calc(100% - 24px);transition:margin-top var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default), font-size var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);white-space:nowrap}.input-wrapper{padding-block:var(--_padding-top) var(--_padding-bottom);flex:1;align-items:center;display:flex}:host([haslabel]:not([focused]):not([populated])) ::slotted(input:placeholder-shown),:host([haslabel]:not([focused]):not([populated])) ::slotted(textarea:placeholder-shown){opacity:0}::slotted(*){caret-color:var(--md-sys-color-primary);font:var(--md-sys-typography-body-large)}.supporting-text{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typography-body-small);padding-inline:16px;padding-top:4px}:host([error]) ::slotted(*){caret-color:var(--md-sys-color-error)}:host([error]) .supporting-text{color:var(--md-sys-color-error)}`;
+export const fieldStyles = css`:host{--_min-height:56px;--_padding-top:16px;--_padding-bottom:16px;cursor:text;-webkit-user-select:none;user-select:none;vertical-align:top;flex-direction:column;display:inline-flex;position:relative}.container{box-sizing:border-box;min-height:var(--_min-height);flex:1;align-items:center;display:flex;position:relative}:host([disabled]){opacity:.38;pointer-events:none}.start,.end{color:var(--md-sys-color-on-surface-variant);justify-content:center;align-items:center;min-width:48px;display:flex}.start[hidden],.end[hidden]{display:none}.middle{flex-direction:column;flex:1;justify-content:center;height:100%;display:flex;position:relative;overflow:hidden}.label{font:var(--md-sys-typography-body-large);pointer-events:none;text-overflow:ellipsis;transform-origin:0 0;max-width:calc(100% - 24px);transition:margin-top var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default), font-size var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);white-space:nowrap}.input-wrapper{padding-block:var(--_padding-top) var(--_padding-bottom);flex:1;align-items:center;display:flex}:host([haslabel]:not([focused]):not([populated])) ::slotted(input:placeholder-shown),:host([haslabel]:not([focused]):not([populated])) ::slotted(textarea:placeholder-shown){opacity:0}::slotted(*){caret-color:var(--md-sys-color-primary);font:var(--md-sys-typography-body-large)}.supporting-text{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typography-body-small);padding-inline:16px;padding-top:4px}:host([error]) ::slotted(*){caret-color:var(--md-sys-color-error)}:host([error]) .supporting-text{color:var(--md-sys-color-error)}@media (forced-colors:active){:host{--md-sys-color-primary:Highlight;--md-sys-color-error:VisitedText}}`;

package/src/m3/field/filled-field-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const filledFieldStyles = css`.container{--_indicator-height:1px;--_indicator-color:var(--md-sys-color-on-surface-variant);background-color:var(--md-sys-color-surface-container-highest);box-shadow:inset 0 calc(var(--_indicator-height) * -1) 0 0 var(--_indicator-color);transition:box-shadow var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);border-radius:4px 4px 0 0;padding:0 16px}:host([haslabel]){--_padding-top:24px;--_padding-bottom:8px}.label{color:var(--md-sys-color-on-surface-variant);margin-top:calc((var(--_padding-top) + var(--_padding-bottom)) / 2);position:absolute;top:0}:host([focused]) .label{color:var(--md-sys-color-primary)}:host([error]) .label{color:var(--md-sys-color-error)}:host([populated]) .label,:host([focused]) .label{margin-top:calc(var(--_padding-top) / 2 - .75em);font-size:.75em}:host([focused]) .container{--_indicator-height:3px;--_indicator-color:var(--md-sys-color-primary)}:host([error]) .container,:host([error][focused]) .container{--_indicator-color:var(--md-sys-color-error)}`;
+export const filledFieldStyles = css`.container{--_indicator-height:1px;--_indicator-color:var(--md-sys-color-on-surface-variant);background-color:var(--md-sys-color-surface-container-highest);box-shadow:inset 0 calc(var(--_indicator-height) * -1) 0 0 var(--_indicator-color);transition:box-shadow var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);border-radius:4px 4px 0 0;padding:0 16px}:host([haslabel]){--_padding-top:24px;--_padding-bottom:8px}.label{color:var(--md-sys-color-on-surface-variant);margin-top:calc((var(--_padding-top) + var(--_padding-bottom)) / 2);position:absolute;top:0}:host([focused]) .label{color:var(--md-sys-color-primary)}:host([error]) .label{color:var(--md-sys-color-error)}:host([populated]) .label,:host([focused]) .label{margin-top:calc(var(--_padding-top) / 2 - .75em);font-size:.75em}:host([focused]) .container{--_indicator-height:3px;--_indicator-color:var(--md-sys-color-primary)}:host([error]) .container,:host([error][focused]) .container{--_indicator-color:var(--md-sys-color-error)}@media (forced-colors:active){:host{--md-sys-color-primary:Highlight;outline:1px solid canvastext}:host([focused]){outline-color:highlight}}`;

package/src/m3/focus-ring/focus-ring-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const focusRingStyles = css`:host{animation-delay:0s, calc(var(--md-focus-ring-duration,.6s) * .25);animation-duration:calc(var(--md-focus-ring-duration,.6s) * .25), calc(var(--md-focus-ring-duration,.6s) * .75);box-sizing:border-box;color:var(--md-focus-ring-color,var(--md-sys-color-secondary));pointer-events:none;animation-timing-function:cubic-bezier(.2,0,0,1),cubic-bezier(.2,0,0,1);display:none;position:absolute}:host(:state(visible)){display:flex}:host(:not([inward])){box-shadow:0 0 0 var(--md-focus-ring-width,3px) currentColor;inset:calc(-1 * var(--md-focus-ring-outward-offset,2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));animation-name:outward-grow,outward-shrink}:host([inward]){box-shadow:inset 0 0 0 var(--md-focus-ring-width,3px) currentColor;inset:var(--md-focus-ring-inward-offset,0px);border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));animation-name:inward-grow,inward-shrink}@keyframes outward-grow{0%{box-shadow:0 0}to{box-shadow:0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes outward-shrink{0%{box-shadow:0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes inward-grow{0%{box-shadow:inset 0 0}to{box-shadow:inset 0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes inward-shrink{0%{box-shadow:inset 0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@media (prefers-reduced-motion){:host{animation:none}}`;
+export const focusRingStyles = css`:host{animation-delay:0s, calc(var(--md-focus-ring-duration,.6s) * .25);animation-duration:calc(var(--md-focus-ring-duration,.6s) * .25), calc(var(--md-focus-ring-duration,.6s) * .75);box-sizing:border-box;color:var(--md-focus-ring-color,var(--md-sys-color-secondary));pointer-events:none;animation-timing-function:cubic-bezier(.2,0,0,1),cubic-bezier(.2,0,0,1);display:none;position:absolute}:host(:state(visible)){display:flex}:host(:not([inward])){box-shadow:0 0 0 var(--md-focus-ring-width,3px) currentColor;inset:calc(-1 * var(--md-focus-ring-outward-offset,2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));animation-name:outward-grow,outward-shrink}:host([inward]){box-shadow:inset 0 0 0 var(--md-focus-ring-width,3px) currentColor;inset:var(--md-focus-ring-inward-offset,0px);border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));animation-name:inward-grow,inward-shrink}@keyframes outward-grow{0%{box-shadow:0 0}to{box-shadow:0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes outward-shrink{0%{box-shadow:0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes inward-grow{0%{box-shadow:inset 0 0}to{box-shadow:inset 0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes inward-shrink{0%{box-shadow:inset 0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@media (prefers-reduced-motion){:host{animation:none}}@media (forced-colors:active){:host{color:highlight}}`;

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

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

package/src/m3/list/list-item.d.ts

@@ -1,7 +1,9 @@
 import { ListItem } from '../../base/list-item.js';
 import '../item/item.js';
-import { M3Ripple } from '../ripple/ripple.js';
-import { M3FocusRing } from '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+import '../focus-ring/focus-ring.js';
+import type { M3Ripple } from '../ripple/ripple.js';
+import type { M3FocusRing } from '../focus-ring/focus-ring.js';
 /**
  * @tag md-list-item
  *

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

@@ -3,6 +3,8 @@ import { html } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { ListItem } from '../../base/list-item.js';
 import '../item/item.js';
+import '../ripple/ripple.js';
+import '../focus-ring/focus-ring.js';
 import { listItemStyles } from './list-item-styles.css.js';
 /**
  * @tag md-list-item

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const menuStyles = css`:host{min-width:112px;display:contents}[part=menu]{background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);box-sizing:border-box;color:var(--md-sys-color-on-surface);height:inherit;max-height:var(--md-menu-max-height,inherit);max-width:inherit;min-width:inherit;opacity:0;-webkit-user-select:none;user-select:none;z-index:1000;border-radius:16px;outline:0;padding:4px;position:absolute;inset:auto;overflow-y:auto;transform:scaleY(.35)}:host([color=vibrant]){& [part=menu]{--md-divider-color:var(--md-sys-color-tertiary);--md-item-supporting-text-color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}& ::slotted([selected]){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary);background-color:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}}:host([alignstrategy=fixed]) [part=menu]{position:fixed}[part=items]{opacity:0;flex-direction:column;gap:2px;display:flex}:host(:state(closed)) [part=menu]{display:none}:host(:state(opening)){& [part=menu]{opacity:1;transition:opacity 67ms, transform var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);display:block;transform:scaleY(1)}& [part=items]{opacity:1;transition:opacity 67ms linear 67ms}}:host(:state(opened)){& [part=menu]{opacity:1;display:block;transform:scaleY(1)}& [part=items]{opacity:1}}:host(:state(closing)){& [part=menu]{opacity:0;transition:opacity var(--md-sys-motion-effects-fast-duration), transform var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);transform:scaleY(.35)}& [part=items]{opacity:0;transition:opacity 67ms}}::slotted(md-divider){margin-block:6px}`;
+export const menuStyles = css`:host{min-width:112px;display:contents}[part=menu]{background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);box-sizing:border-box;color:var(--md-sys-color-on-surface);height:inherit;max-height:var(--md-menu-max-height,inherit);max-width:inherit;min-width:inherit;opacity:0;-webkit-user-select:none;user-select:none;z-index:1000;border-radius:16px;outline:0;padding:4px;position:absolute;inset:auto;overflow-y:auto;transform:scaleY(.35)}:host([color=vibrant]){& [part=menu]{--md-divider-color:var(--md-sys-color-tertiary);--md-item-supporting-text-color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}& ::slotted([selected]){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary);background-color:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}}:host([alignstrategy=fixed]) [part=menu]{position:fixed}[part=items]{opacity:0;flex-direction:column;gap:2px;display:flex}:host(:state(closed)) [part=menu]{display:none}:host(:state(opening)){& [part=menu]{opacity:1;transition:opacity 67ms, transform var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);display:block;transform:scaleY(1)}& [part=items]{opacity:1;transition:opacity 67ms linear 67ms}}:host(:state(opened)){& [part=menu]{opacity:1;display:block;transform:scaleY(1)}& [part=items]{opacity:1}}:host(:state(closing)){& [part=menu]{opacity:0;transition:opacity var(--md-sys-motion-effects-fast-duration), transform var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);transform:scaleY(.35)}& [part=items]{opacity:0;transition:opacity 67ms}}::slotted(md-divider){margin-block:6px}@media (forced-colors:active){[part=menu]{border:1px solid canvastext}}`;

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;-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}:host:before,.middle,:host:after{content:"";box-sizing:border-box;border-radius:50%;position:absolute;animation-fill-mode:forwards!important}:host:before{z-index:1;background-color:var(--md-sys-color-on-surface-variant);width:20px;height:20px;transition:background var(--_default)}.middle{z-index:2;background-color:var(--md-sys-color-surface);width:16px;height:16px}:host:after{z-index:3;background-color:var(--md-sys-color-primary);width:10px;height:10px;transform:scale(0)}:host(:state(unchecking)) .middle{animation:uncheck-mid-2 var(--_slow) var(--_d)}:host(:state(unchecking)):after{animation:uncheck-inner-1 var(--_default), uncheck-inner-2 var(--_slow) var(--_d)}:host([checked]):before{background-color:var(--md-sys-color-primary)}:host([checked]):after{transform:scale(1)}:host(:state(checking)) .middle{animation:check-mid-1 var(--_default), check-mid-2 var(--_slow) var(--_d)}:host(:state(checking)):after{animation:check-inner-1 var(--_default), check-inner-2 var(--_slow) var(--_d)}@keyframes uncheck-mid-2{0%,to{z-index:4}0%{transform:scale(0)}to{transform:scale(1)}}@keyframes uncheck-inner-1{0%{background-color:var(--md-sys-color-primary);transform:scale(1)}to{background-color:var(--md-sys-color-on-surface-variant);transform:scale(1.6)}}@keyframes uncheck-inner-2{0%{transform:scale(1.6)}to{transform:scale(1.6)}}@keyframes check-mid-1{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes check-mid-2{0%{transform:scale(.625)}to{transform:scale(1)}}@keyframes check-inner-1{0%,to{transform:scale(0)}}@keyframes check-inner-2{0%,to{transform:scale(1)}}:host([disabled]){pointer-events:none}:host([disabled]):before,:host([disabled]):after{background:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}`;
+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;-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}:host:before,.middle,:host:after{content:"";box-sizing:border-box;border-radius:50%;position:absolute;animation-fill-mode:forwards!important}:host:before{z-index:1;background-color:var(--md-sys-color-on-surface-variant);width:20px;height:20px;transition:background var(--_default)}.middle{z-index:2;background-color:var(--md-sys-color-surface);width:16px;height:16px}:host:after{z-index:3;background-color:var(--md-sys-color-primary);width:10px;height:10px;transform:scale(0)}:host(:state(unchecking)) .middle{animation:uncheck-mid-2 var(--_slow) var(--_d)}:host(:state(unchecking)):after{animation:uncheck-inner-1 var(--_default), uncheck-inner-2 var(--_slow) var(--_d)}:host([checked]):before{background-color:var(--md-sys-color-primary)}:host([checked]):after{transform:scale(1)}:host(:state(checking)) .middle{animation:check-mid-1 var(--_default), check-mid-2 var(--_slow) var(--_d)}:host(:state(checking)):after{animation:check-inner-1 var(--_default), check-inner-2 var(--_slow) var(--_d)}@keyframes uncheck-mid-2{0%,to{z-index:4}0%{transform:scale(0)}to{transform:scale(1)}}@keyframes uncheck-inner-1{0%{background-color:var(--md-sys-color-primary);transform:scale(1)}to{background-color:var(--md-sys-color-on-surface-variant);transform:scale(1.6)}}@keyframes uncheck-inner-2{0%{transform:scale(1.6)}to{transform:scale(1.6)}}@keyframes check-mid-1{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes check-mid-2{0%{transform:scale(.625)}to{transform:scale(1)}}@keyframes check-inner-1{0%,to{transform:scale(0)}}@keyframes check-inner-2{0%,to{transform:scale(1)}}:host([disabled]){pointer-events:none}:host([disabled]):before,:host([disabled]):after{background: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):before,:host(:disabled):after{background:graytext}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const rippleStyles = css`:host{border-radius:inherit;pointer-events:none;display:block;position:absolute;inset:0;overflow:hidden}[part~=ripple]{background-image:radial-gradient(closest-side, var(--md-ripple-color,currentColor) max(calc(100% - 70px), 65%), transparent 100%);position:absolute;top:0;left:0}:host:before{background-color:var(--md-ripple-color,currentColor);border-radius:inherit;content:"";opacity:0;transition:opacity 67ms linear;display:block;position:absolute;inset:0}:host(:state(hover)):before{opacity:.08}`;
+export const rippleStyles = css`:host{--_color:var(--md-ripple-color,currentColor);border-radius:inherit;pointer-events:none;display:block;position:absolute;inset:0;overflow:hidden}[part~=ripple]{background-image:radial-gradient(closest-side, var(--_color) max(calc(100% - 70px), 65%), transparent 100%);position:absolute;top:0;left:0}:host:before{background-color:var(--_color);border-radius:inherit;content:"";opacity:0;transition:opacity 67ms linear;display:block;position:absolute;inset:0}:host(:state(hover)):before{opacity:.08}@media (forced-colors:active){:host{--_color:var(--md-ripple-color,Highlight)}}`;

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

@@ -20,20 +20,9 @@ export declare class M3Ripple extends M3Ripple_base {
     handlePointerDown: (e: PointerEvent) => void;
     handlePointerUp: () => void;
     handleControlChange(prev?: HTMLElement | null, next?: HTMLElement | HTMLInputElement | null): void;
-    calculateRipple(e?: MouseEvent | null): {
-        startCenter: {
-            x: number;
-            y: number;
-        };
-        endCenter: {
-            x: number;
-            y: number;
-        };
-        radius: number;
-    };
     addRipple(e?: MouseEvent | null): void;
     removeRipple(ripple: HTMLSpanElement): void;
-    removeRippleAll(): void;
+    keepLastRipple(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/ripple/ripple.js

@@ -32,7 +32,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             if ((e.key === 'Enter' && this.enterBehavior === 'always') ||
                 (e.key === ' ' && this.spaceBehavior === 'always')) {
                 this.addRipple();
-                this.removeRippleAll();
+                this.keepLastRipple();
             }
             else if (e.key === ' ' && this.spaceBehavior === 'once') {
                 if (!this.#spaceKeyDown)
@@ -43,7 +43,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
         this.handleKeyUp = (e) => {
             if (e.key === ' ' && this.spaceBehavior === 'once') {
                 this.#spaceKeyDown = false;
-                this.removeRippleAll();
+                this.keepLastRipple();
             }
         };
         this.handlePointerEnter = (e) => {
@@ -56,7 +56,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
         this.handlePointerLeave = () => {
             this[internals].states.delete('hover');
             if (this.#pointerDown && this.clickBehavior === 'always')
-                this.removeRippleAll();
+                this.keepLastRipple();
         };
         this.handlePointerDown = (e) => {
             if (e.pointerType === 'mouse')
@@ -65,7 +65,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             document.addEventListener('touchcancel', this.handlePointerUp);
             document.addEventListener('touchend', this.handlePointerUp);
             document.addEventListener('touchmove', this.handlePointerUp);
-            if (e.button === 2)
+            if (e.button !== 0)
                 return;
             if (this.clickBehavior === 'always')
                 this.addRipple(e);
@@ -76,7 +76,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             document.removeEventListener('touchcancel', this.handlePointerUp);
             document.removeEventListener('touchend', this.handlePointerUp);
             document.removeEventListener('touchmove', this.handlePointerUp);
-            this.removeRippleAll();
+            this.keepLastRipple();
         };
         this[internals].ariaHidden = 'true';
     }
@@ -111,7 +111,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,
@@ -134,7 +134,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`;
@@ -156,7 +156,6 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             scale: [0.2, 1.35],
         }, {
             duration: PRESS_GROW_MS,
-            // TODO: Control by global variables
             easing: 'cubic-bezier(0.2, 0, 0, 1)',
             fill: 'forwards',
         });
@@ -174,7 +173,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             animation.onfinish = animation.oncancel = () => ripple.remove();
         }, Math.max(MINIMUM_PRESS_MS - (Date.now() - this.#lastTime), 0));
     }
-    removeRippleAll() {
+    keepLastRipple() {
         for (const ripple of this.$ripples.splice(0))
             this.removeRipple(ripple);
     }

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

@@ -1,3 +1,4 @@
+import '../menu/menu.js';
 import { Select } from '../../base/select.js';
 import { M3Field } from '../field/field.js';
 /**

package/src/m3/select/select.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import '../menu/menu.js';
 import { Select } from '../../base/select.js';
 /**
  * @fires {Event} change - Fired when the selected value has changed.

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

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

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

@@ -1,5 +1,6 @@
 import { ToggleButton } from '../../base/toggle-button.js';
 import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
 import { M3Ripple } from '../ripple/ripple.js';
 /**
  * @tag md-switch
@@ -9,6 +10,8 @@ import { M3Ripple } from '../ripple/ripple.js';
  */
 export declare class M3Switch extends ToggleButton {
     #private;
+    icons: boolean;
+    checkedIconOnly: boolean;
     $ripple: M3Ripple;
     $thumb: HTMLSpanElement;
     static styles: any[];
@@ -17,8 +20,6 @@ export declare class M3Switch extends ToggleButton {
     renderOffIcon(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    icons: boolean;
-    checkedIconOnly: boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/switch/switch.js

@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { ToggleButton } from '../../base/toggle-button.js';
 import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
 import { switchStyles } from './switch-styles.css.js';
 import { targetStyles } from '../target-styles.css.js';
 function isRTL() {
@@ -53,12 +54,12 @@ let M3Switch = class M3Switch extends ToggleButton {
             this.$thumb.style.setProperty('--_thumb-diameter', '');
             this.$thumb.style.transitionDuration = '';
             if (this.checked != shouldBeChecked)
-                this.toggleChecked();
+                this._toggle();
         };
     }
     static { this.styles = [targetStyles, switchStyles]; }
     render() {
-        return html `<md-focus-ring></md-focus-ring><div part="thumb"><md-ripple spacebehavior="always"></md-ripple><span part="target"></span> ${this.renderOffIcon()}${this.renderOnIcon()}</div>`;
+        return html `<md-focus-ring></md-focus-ring><div part="thumb"><md-ripple></md-ripple><span part="target"></span> ${this.renderOffIcon()}${this.renderOnIcon()}</div>`;
     }
     renderOnIcon() {
         return html `<svg part="icons icon-on" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z"/></svg>`;
@@ -69,33 +70,33 @@ let M3Switch = class M3Switch extends ToggleButton {
     connectedCallback() {
         super.connectedCallback();
         this.updateComplete.then(() => {
-            this.$ripple.attach(this);
+            this.$ripple.attach(this, true);
         });
         this.addEventListener('pointerdown', this.#handlePointerDown);
         this.addEventListener('pointerup', this.#handlePointerUp);
     }
     disconnectedCallback() {
-        super.disconnectedCallback();
         this.removeEventListener('pointerdown', this.#handlePointerDown);
         this.removeEventListener('pointerup', this.#handlePointerUp);
+        super.disconnectedCallback();
     }
     #pointerDownX;
     #handlePointerDown;
     #handlePointerMove;
     #handlePointerUp;
 };
-__decorate([
-    query('md-ripple')
-], M3Switch.prototype, "$ripple", void 0);
-__decorate([
-    query('[part~="thumb"]')
-], M3Switch.prototype, "$thumb", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], M3Switch.prototype, "icons", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], M3Switch.prototype, "checkedIconOnly", void 0);
+__decorate([
+    query('md-ripple')
+], M3Switch.prototype, "$ripple", void 0);
+__decorate([
+    query('[part~="thumb"]')
+], M3Switch.prototype, "$thumb", void 0);
 M3Switch = __decorate([
     customElement('md-switch')
 ], M3Switch);

package/src/m3/tab/tabs-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const tabsStyles = css`:host{--_tab-selected-color:var(--md-sys-color-primary);--_tab-indicator-height:3px;border-bottom:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none;display:block;position:relative;overflow:auto hidden}[part=tablist]{display:flex}[part=indicator]{height:var(--_tab-indicator-height);background-color:var(--md-sys-color-primary);transition:left var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default), width var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);will-change:left, width;border-radius:3px 3px 0 0;position:absolute;bottom:0}::slotted(*){flex:1}:host([secondary]){--_tab-selected-color:var(--md-sys-color-on-surface);--_tab-indicator-height:2px}:host([secondary]) [part=indicator]{border-radius:0}:host([iconsabove]){--_tab-flex-dir:column;--_tab-height:64px;--_tab-gap:2px}`;
+export const tabsStyles = css`:host{--_tab-selected-color:var(--md-sys-color-primary);--_tab-indicator-height:3px;border-bottom:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none;display:block;position:relative;overflow:auto hidden}[part=tablist]{display:flex}[part=indicator]{height:var(--_tab-indicator-height);background-color:var(--md-sys-color-primary);transition:left var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default), width var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);will-change:left, width;border-radius:3px 3px 0 0;position:absolute;bottom:0}::slotted(*){flex:1}:host([secondary]){--_tab-selected-color:var(--md-sys-color-on-surface);--_tab-indicator-height:2px}:host([secondary]) [part=indicator]{border-radius:0}:host([iconsabove]){--_tab-flex-dir:column;--_tab-height:64px;--_tab-gap:2px}@media (forced-colors:active){[part=indicator]{background-color:highlight}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const toolbarStyles = css`:host{--_padding:16px;--_gap:32px;--_container-color:var(--md-sys-color-surface-container);--_on-color:var(--md-sys-color-on-surface);background-color:color-mix(in srgb, var(--_container-color) var(--_container-opacity,100%), transparent);box-sizing:border-box;color:color-mix(in srgb, var(--_on-color) var(--_on-opacity,100%), transparent);align-items:center;width:100%;height:64px;display:flex}[part=container]{box-sizing:border-box;align-items:center;gap:var(--_gap);height:64px;padding:0 var(--_padding);flex:auto;justify-content:space-between;width:100%;display:flex}[part=fab-slot]{justify-content:flex-end;align-items:center;display:flex}:host(:not([orientation=vertical])) ::slotted([slot=fab]){margin-inline-start:8px}:host([orientation=vertical]) ::slotted([slot=fab]){margin-block-start:8px}:host([type=floating]){--_padding:12px;--_gap:4px;--_container-color:var(--md-sys-color-surface-container-high);box-shadow:none;background:0 0;width:fit-content;max-width:calc(100% - 32px);& [part=container]{background-color:color-mix(in srgb, var(--_container-color) var(--_container-opacity,100%), transparent);box-shadow:var(--md-toolbar-shadow,var(--md-sys-elevation-shadow-3));border-radius:32px;width:fit-content}& ::slotted(md-button),& ::slotted(md-button-toggle),& ::slotted(md-icon-button),& ::slotted(md-icon-button-toggle){--md-focus-ring-shape:calc(var(--_h) / 2);border-radius:calc(var(--_h) / 2)}}:host([type=floating][orientation=vertical]){flex-direction:column;align-items:stretch;width:64px;min-height:auto;& [part=container]{height:fit-content;padding:var(--_padding) 0;flex-direction:column;width:100%}}::slotted(md-button-toggle[variant=tonal]:not(:state(checked))),::slotted(md-icon-button-toggle[variant=tonal]:not(:state(checked))){--_background-color:transparent}:host([color=vibrant]){--_container-color:var(--md-sys-color-primary-container);--_on-color:var(--md-sys-color-on-primary-container);& ::slotted(md-icon-button[variant=text]),& ::slotted(md-icon-button-toggle[variant=tonal]){--_text-color:var(--md-sys-color-on-primary-container)}& ::slotted(md-icon-button-toggle[variant=tonal]:state(checked)){--_background-color:var(--md-sys-color-surface-container);--_text-color:var(--md-sys-color-on-surface)}}`;
+export const toolbarStyles = css`:host{--_padding:16px;--_gap:32px;--_container-color:var(--md-sys-color-surface-container);--_on-color:var(--md-sys-color-on-surface);background-color:color-mix(in srgb, var(--_container-color) var(--_container-opacity,100%), transparent);box-sizing:border-box;color:color-mix(in srgb, var(--_on-color) var(--_on-opacity,100%), transparent);align-items:center;width:100%;height:64px;display:flex}[part=container]{box-sizing:border-box;align-items:center;gap:var(--_gap);height:64px;padding:0 var(--_padding);flex:auto;justify-content:space-between;width:100%;display:flex}[part=fab-slot]{justify-content:flex-end;align-items:center;display:flex}:host(:not([orientation=vertical])) ::slotted([slot=fab]){margin-inline-start:8px}:host([orientation=vertical]) ::slotted([slot=fab]){margin-block-start:8px}:host([type=floating]){--_padding:12px;--_gap:4px;--_container-color:var(--md-sys-color-surface-container-high);box-shadow:none;background:0 0;width:fit-content;max-width:calc(100% - 32px);& [part=container]{background-color:color-mix(in srgb, var(--_container-color) var(--_container-opacity,100%), transparent);box-shadow:var(--md-toolbar-shadow,var(--md-sys-elevation-shadow-3));border-radius:32px;width:fit-content}& ::slotted(md-button),& ::slotted(md-button-toggle),& ::slotted(md-icon-button),& ::slotted(md-icon-button-toggle){--md-focus-ring-shape:calc(var(--_h) / 2);border-radius:calc(var(--_h) / 2)}}:host([type=floating][orientation=vertical]){flex-direction:column;align-items:stretch;width:64px;min-height:auto;& [part=container]{height:fit-content;padding:var(--_padding) 0;flex-direction:column;width:100%}}::slotted(md-button-toggle[variant=tonal]:not(:state(checked))),::slotted(md-icon-button-toggle[variant=tonal]:not(:state(checked))){--_background-color:transparent}:host([color=vibrant]){--_container-color:var(--md-sys-color-primary-container);--_on-color:var(--md-sys-color-on-primary-container);& ::slotted(md-icon-button[variant=text]),& ::slotted(md-icon-button-toggle[variant=tonal]){--_text-color:var(--md-sys-color-on-primary-container)}& ::slotted(md-icon-button-toggle[variant=tonal]:state(checked)){--_background-color:var(--md-sys-color-surface-container);--_text-color:var(--md-sys-color-on-surface)}}@media (forced-colors:active){[part=container]{outline:1px solid canvastext}}`;

package/src/win98/button/button-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const buttonStyles = css`:host{-webkit-font-smoothing:none;box-sizing:border-box;color:#0000;text-shadow:0 0 #222;-webkit-user-select:none;user-select:none;cursor:default;background:silver;border:none;border-radius:0;justify-content:center;align-items:center;min-width:75px;min-height:23px;padding:0 12px;font-family:Arial;font-size:11px;display:inline-flex;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px #dfdfdf}:host(:active){text-shadow:1px 1px #222;box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px gray}:host(:focus){outline-offset:-4px;outline:1px dotted #000}:host(:disabled){color:gray;text-shadow:1px 1px #fff;pointer-events:none}`;
+export const buttonStyles = css`:host{-webkit-font-smoothing:none;box-sizing:border-box;color:#0000;text-shadow:0 0 #222;-webkit-user-select:none;user-select:none;cursor:default;background:silver;border:none;border-radius:0;justify-content:center;align-items:center;min-width:75px;min-height:23px;padding:0 12px;font-family:Arial;font-size:11px;display:inline-flex;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px #dfdfdf}:host(:active),:host(:state(active)){text-shadow:1px 1px #222;box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px gray}:host(:focus){outline-offset:-4px;outline:1px dotted #000}:host(:disabled){color:gray;text-shadow:1px 1px #fff;pointer-events:none}`;

package/src/m3/dialog/dialog-spring.d.ts

@@ -1,45 +0,0 @@
-import { Dialog } from '../../base/dialog.js';
-/**
- * TODO: test if form actions `cancel` and other things related work - no,
- *       event listener needed
- *
- * To get an approximation of the "not Expressive" version like:
- * https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration#e5b958f0-435d-4e84-aed4-8d1ea395fa5c
- *
- * ```css
- * --md-sys-motion-spatial-default: cubic-bezier(0, 0, 0, 1);
- * --md-sys-motion-spatial-default-duration: 500ms;
- * --md-sys-motion-spatial-fast: cubic-bezier(0.3, 0, 1, 1);
- * --md-sys-motion-spatial-fast-duration: 300ms;
- *
- * --md-sys-motion-effects-fast: linear;
- * --md-sys-motion-effects-fast-duration: 200ms;
- * --md-sys-motion-effects-default: linear;
- * --md-sys-motion-effects-default-duration: 300ms;
- * ```
- *
- * @tag md-dialog
- *
- * @csspart container
- * @csspart headline
- * @csspart content
- * @csspart actions
- *
- * @slot icon
- * @slot headline
- * @slot - content
- * @slot actions
- */
-export declare class M3Dialog extends Dialog {
-    #private;
-    private hasIcon;
-    $container: HTMLDivElement;
-    $body: HTMLDivElement;
-    $actions: HTMLDivElement;
-    $actionsPlaceholder: HTMLDivElement;
-    $scrim: HTMLDivElement;
-    static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
-    show(): void;
-    close(): void;
-}

package/src/m3/dialog/dialog-spring.js

@@ -1,176 +0,0 @@
-import { __decorate } from "tslib";
-import { html } from 'lit';
-import { query, state, customElement } from 'lit/decorators.js';
-import { Dialog } from '../../base/dialog.js';
-import { getSpring } from '../system/motion.js';
-import { dialogStyles } from './dialog-styles.css.js';
-/**
- * TODO: test if form actions `cancel` and other things related work - no,
- *       event listener needed
- *
- * To get an approximation of the "not Expressive" version like:
- * https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration#e5b958f0-435d-4e84-aed4-8d1ea395fa5c
- *
- * ```css
- * --md-sys-motion-spatial-default: cubic-bezier(0, 0, 0, 1);
- * --md-sys-motion-spatial-default-duration: 500ms;
- * --md-sys-motion-spatial-fast: cubic-bezier(0.3, 0, 1, 1);
- * --md-sys-motion-spatial-fast-duration: 300ms;
- *
- * --md-sys-motion-effects-fast: linear;
- * --md-sys-motion-effects-fast-duration: 200ms;
- * --md-sys-motion-effects-default: linear;
- * --md-sys-motion-effects-default-duration: 300ms;
- * ```
- *
- * @tag md-dialog
- *
- * @csspart container
- * @csspart headline
- * @csspart content
- * @csspart actions
- *
- * @slot icon
- * @slot headline
- * @slot - content
- * @slot actions
- */
-let M3Dialog = class M3Dialog extends Dialog {
-    constructor() {
-        super(...arguments);
-        this.hasIcon = false;
-        this.#activeAnimations = [];
-        this.#handleClick = (e) => {
-            const target = e.target;
-            if (!this.$container.contains(target) && !this.contains(target))
-                this.close();
-        };
-        this.#handleIconSlotChange = (e) => {
-            const slot = e.target;
-            this.hasIcon = slot.assignedElements({ flatten: true }).length > 0;
-        };
-        this.#opening = false;
-        this.#closing = false;
-    }
-    static { this.styles = [dialogStyles]; }
-    render() {
-        return html `<dialog part="dialog" @click="${this.#handleClick}" @cancel="${this._handleCancel}"><div part="container"><div part="body"><div part="headline" class="${this.hasIcon ? 'has-icon' : ''}"><slot name="icon" @slotchange="${this.#handleIconSlotChange}"></slot><slot name="headline"></slot></div><div part="content"><slot></slot></div><div class="actions-placeholder"></div></div><div part="actions"><slot name="actions"></slot></div></div></dialog><div part="scrim"></div>`;
-    }
-    #activeAnimations;
-    #clearAnimations() {
-        this.#activeAnimations.forEach((anim) => anim.cancel());
-        this.#activeAnimations = [];
-        this.#opening = this.#closing = false;
-    }
-    #handleClick;
-    #handleIconSlotChange;
-    get #springs() {
-        return {
-            spatialDefault: getSpring(this, 'spatial', 'default'),
-            spatialFast: getSpring(this, 'spatial', 'fast'),
-            effectsDefault: getSpring(this, 'effects', 'default'),
-            effectsFast: getSpring(this, 'effects', 'fast'),
-        };
-    }
-    #opening;
-    show() {
-        if (this.#opening)
-            return;
-        this.#clearAnimations();
-        this.#opening = true;
-        // Reset margins to allow browser centering
-        this.$dialog.style.marginTop = 'auto';
-        this.$dialog.style.marginBottom = 'auto';
-        super.show();
-        const actionsHeight = this.$actions.offsetHeight;
-        this.$actionsPlaceholder.style.height = `${actionsHeight}px`;
-        this.$container.style.height = 'auto';
-        const startHeight = 0;
-        const endHeight = this.$container.offsetHeight;
-        // Lock the position to prevent auto-centering during animation
-        const rect = this.$container.getBoundingClientRect();
-        this.$dialog.style.marginTop = `${rect.top}px`;
-        this.$dialog.style.marginBottom = 'auto';
-        this.$container.style.minHeight = '0px';
-        const container = this.$container.animate([
-            {
-                height: `${startHeight}px`,
-                transform: `translateY(-40px)`,
-            },
-            {
-                height: `${endHeight}px`,
-                transform: 'translateY(0px)',
-            },
-        ], this.#springs.spatialDefault);
-        const scrim = this.$scrim.animate([{ opacity: 0 }, { opacity: 0.32 }], {
-            ...this.#springs.effectsDefault,
-            fill: 'forwards',
-        });
-        const body = this.$body.animate([{ opacity: 0.2 }, { opacity: 1 }], {
-            ...this.#springs.effectsDefault,
-            fill: 'forwards',
-        });
-        const actions = this.$actions.animate([{ opacity: 0.5 }, { opacity: 1 }], {
-            ...this.#springs.effectsDefault,
-            fill: 'forwards',
-        });
-        this.#activeAnimations.push(container, scrim, body, actions);
-        container.onfinish = () => {
-            this.$container.style.minHeight = '';
-            this.#clearAnimations();
-        };
-    }
-    #closing;
-    close() {
-        if (this.#closing)
-            return;
-        this.#clearAnimations();
-        this.#closing = true;
-        const startHeight = this.$container.offsetHeight;
-        const endHeight = startHeight * 0.35;
-        this.$container.style.minHeight = '0px';
-        const containerSpatial = this.$container.animate([
-            { height: `${startHeight}px`, transform: 'translateY(0px)' },
-            {
-                height: `${endHeight}px`,
-                transform: `translateY(-40px)`,
-            },
-        ], this.#springs.spatialFast);
-        const containerEffects = this.$container.animate([{ opacity: 1 }, { opacity: 0 }], {
-            ...this.#springs.effectsFast,
-            fill: 'forwards',
-        });
-        const scrim = this.$scrim.animate([{ opacity: 0.32 }, { opacity: 0 }], {
-            ...this.#springs.effectsFast,
-            fill: 'forwards',
-        });
-        this.#activeAnimations.push(containerSpatial, containerEffects, scrim);
-        containerEffects.onfinish = () => {
-            this.$container.style.minHeight = '';
-            super.close();
-            this.#clearAnimations();
-        };
-    }
-};
-__decorate([
-    state()
-], M3Dialog.prototype, "hasIcon", void 0);
-__decorate([
-    query('[part=container]')
-], M3Dialog.prototype, "$container", void 0);
-__decorate([
-    query('[part=body]')
-], M3Dialog.prototype, "$body", void 0);
-__decorate([
-    query('[part=actions]')
-], M3Dialog.prototype, "$actions", void 0);
-__decorate([
-    query('.actions-placeholder')
-], M3Dialog.prototype, "$actionsPlaceholder", void 0);
-__decorate([
-    query('[part=scrim]')
-], M3Dialog.prototype, "$scrim", void 0);
-M3Dialog = __decorate([
-    customElement('md-dialog')
-], M3Dialog);
-export { M3Dialog };

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

@@ -1,3 +0,0 @@
-import { Radio } from '../../base/radio.js';
-export declare class Win98Radio extends Radio {
-}

package/src/win98/button/radio.js

@@ -1,9 +0,0 @@
-import { __decorate } from "tslib";
-import { Radio } from '../../base/radio.js';
-import { customElement } from '../../core/decorators.js';
-let Win98Radio = class Win98Radio extends Radio {
-};
-Win98Radio = __decorate([
-    customElement('win98-radio')
-], Win98Radio);
-export { Win98Radio };

package/src/win98/radio/radio.d.ts

@@ -1,3 +0,0 @@
-import { Radio } from '../../base/radio.js';
-export declare class Win98Radio extends Radio {
-}