@vollowx/seele 0.12.9 → 0.13.0

package/README.md

@@ -1,27 +1,42 @@
-# Standard Extensible Elements
+# seele
 
 [![npm package](https://img.shields.io/npm/v/%40vollowx%2Fseele)](https://www.npmjs.com/package/@vollowx/seele)
 [![builds.sr.ht status](https://builds.sr.ht/~lucaz/seele.svg)](https://builds.sr.ht/~lucaz/seele?)
 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@vollowx/seele)
 
-Seele (**S**tandard **E**xtensible **Ele**ments) is a extensible
-[Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
-library with a focus on accessibility and keyboard-control.
+[https://tideover.cc/seele/](https://tideover.cc/seele/)
+[docs/](https://tideover.cc/seele/docs/)
+
+seele (**S**tandard **E**xtensible **Ele**ments) is a extensible
+[Web Components][web-comps] library with a focus on accessibility and
+keyboard-control.
 
 It also provides styled components in the following design guideline(s):
 
 - [Material You Expressive](https://m3.material.io/)
+- Windows 98, most styles are from [98.css](https://jdan.github.io/98.css/)
+
+![seele components screenshot](./preview.png)
+
+## Features
+
+What's the differences comparing to other projects?
 
-Documentations and demos are at [tideover.cc/seele/](https://tideover.cc/seele/).
+- Accessible and keyboard-accessible - all components are based on the
+  [APG Patterns][apg-patterns]
+- Flexible - seele provides not only the styled components, but also the base
+  ones and the mix-ins that compose them, allowing you to write your components
+  easily
+- Up-to-date - seele uses new Web features as much as possible, (see the README),
+  meaning that its size is relatively small and the compatibility is not the
+  best
 
 ## Installation
 
-Seele is published on [npm](https://www.npmjs.com/package/@vollowx/seele),
-install with your preferred package manager:
+seele is published on [npm](https://www.npmjs.com/package/@vollowx/seele),
+install with your preferred package manager like
 
 ```sh
-bun add @vollowx/seele
-yarn add @vollowx/seele
 npm install @vollowx/seele
 ```
 
@@ -39,6 +54,8 @@ import '@vollowx/seele';
 // They all follow such path: @/catagory/group/component.js
 import '@vollowx/seele/m3/button/common-button.js';
 import '@vollowx/seele/m3/checkbox/checkbox.js';
+
+import '@vollowx/seele/win98/button/button.js';
 ```
 
 ### Using
@@ -53,30 +70,45 @@ Once imported, the components can be used just like standard HTML elements.
   <md-checkbox checked></md-checkbox>
   Labelled Checkbox
 </label>
+
+<win98-button>Look old?</win98-button>
 ```
 
 ### Theming
 
-Seele components use CSS variables for styling. To include the systems, add
-this to your style files.
+seele components use CSS variables for styling. To include the systems for
+Material You Expressive ones, add this to your style files.
 
 ```css
 @import '@vollowx/seele/m3/systems/base.css';
-/* This includes basic system variables like motion system and typography system */
+/* This includes basic system variables including elevation system and
+   typography system */
 @import '@vollowx/seele/m3/systems/defaults.css';
 /* (Optional) This includes basic styling for body, selection and links */
-
-/*
- * Note that there is no default color system since the way you implement theme
- * switching and color changing varies.
- *
- * You can still find some references in dev/shared.css
- */
 ```
 
+Note that there is no default color system and motion physics system to
+have more flexibility and reduce redundant code.
+
+For the color system, you can use the official
+[Material Theme Builder](https://material-foundation.github.io/material-theme-builder/).
+You can also find some references in ./dev/shared.css.
+
+For the motion physics system, check [docs/05-Material_You_Expressive.md](./docs/05-Material_You_Expressive.md).
+
+## Documentations
+
+[Documentations and demos](https://tideover.cc/seele/docs/).
+
+## Download
+
+- [npm package](https://www.npmjs.com/package/@vollowx/seele)
+- [The source at SourceHut](https://sr.ht/~lucaz/seele)
+- [The source at GitHub](https://github.com/vollowx/seele)
+
 ## Browser Support
 
-Seele relies on the folling modern web standards:
+seele relies on the folling modern web standards:
 
 - [`ElementInternals`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals), Baseline 2023
 - [Constructable Stylesheets](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet), Baseline 2024, C[^1] 90, F 126
@@ -101,3 +133,7 @@ these following web features might be used and require higher browser versions:
 - [Roadmap](./ROADMAP.md)
 - [Contributing](./CONTRIBUTING.md)
 - [License (Apache-2.0)](./LICENSE)
+
+[web-comps]: https://developer.mozilla.org/en-US/docs/Web/API/Web_components
+[apg-patterns]: https://www.w3.org/WAI/ARIA/apg/patterns/
+[lit]: https://lit.dev/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.12.9",
+  "version": "0.13.0",
   "description": "A extensible Web Components library, with Material Design 3 components pre-provided.",
   "author": "vollowx",
   "license": "Apache-2.0",
@@ -46,16 +46,16 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@swc/core": "^1.15.43",
+    "@swc/core": "^1.15.46",
     "@types/bun": "^1.3.14",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-esbuild": "^1.0.5",
     "chokidar": "^5.0.0",
-    "lightningcss": "^1.32.0",
-    "prettier": "^3.9.1"
+    "lightningcss": "^1.33.0",
+    "prettier": "^3.9.6"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.6",
+    "@floating-ui/dom": "^1.8.0",
     "@swc/helpers": "^0.5.23",
     "lit": "^3.3.3"
   }

package/src/all.js

@@ -1,16 +1,19 @@
 // TODO: export core, base elements, mixins and controllers
 export { M3Autocomplete } from './m3/autocomplete/autocomplete.js';
+export { M3Badge } from './m3/badge/badge.js';
 export { M3Button } from './m3/button/common-button.js';
 export { M3ButtonToggle } from './m3/button/common-button-toggle.js';
 export { M3IconButton } from './m3/button/icon-button.js';
 export { M3IconButtonToggle } from './m3/button/icon-button-toggle.js';
 export { M3Checkbox } from './m3/checkbox/checkbox.js';
+export { M3Dialog } from './m3/dialog/dialog.js';
 export { M3Divider } from './m3/divider/divider.js';
 export { M3Fab } from './m3/fab/fab.js';
 export { M3FocusRing } from './m3/focus-ring/focus-ring.js';
 export { M3Item } from './m3/item/item.js';
 export { M3List } from './m3/list/list.js';
 export { M3ListItem } from './m3/list/list-item.js';
+export { M3LoadingIndicator } from './m3/loading-indicator/loading-indicator.js';
 export { M3Menu } from './m3/menu/menu.js';
 export { M3MenuItem } from './m3/menu/menu-item.js';
 export { M3Ripple } from './m3/ripple/ripple.js';
@@ -26,3 +29,4 @@ export { M3FilledTextField } from './m3/text-field/filled-text-field.js';
 export { M3OutlinedTextField } from './m3/text-field/outlined-text-field.js';
 export { M3Toolbar } from './m3/toolbar/toolbar.js';
 export { M3Tooltip } from './m3/tooltip/tooltip.js';
+export { Win98Button } from './win98/button/button.js';

package/src/base/dialog.js

@@ -0,0 +1,32 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { LitElement } from 'lit';
+import { query } from 'lit/decorators.js';
+/**
+ * @csspart dialog
+ *
+ * Example `render()`:
+ *
+ * ```
+ * <dialog
+ *   part="dialog"
+ *   @cancel="${this._handleCancel}">
+ *   <slot></slot>
+ * </dialog>
+ * ```
+ */ export class Dialog extends LitElement {
+    show() {
+        this.$dialog.showModal();
+    }
+    close() {
+        this.$dialog.close();
+    }
+    constructor(...args){
+        super(...args), this._handleCancel = (e)=>{
+            e.preventDefault();
+            this.close();
+        };
+    }
+}
+_ts_decorate([
+    query('dialog')
+], Dialog.prototype, "$dialog", void 0);

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const badgeStyles = css`:host{--md-badge-offset:0}[part~=root]{vertical-align:middle;flex-shrink:0;display:inline-flex;position:relative}[part~=badge]{--md-badge-scale:1;top:var(--md-badge-offset);right:var(--md-badge-offset);box-sizing:border-box;font:var(--md-sys-typography-label-small);z-index:1;background-color:var(--md-sys-color-error);min-width:16px;height:16px;color:var(--md-sys-color-on-error);transform:scale(var(--md-badge-scale)) translate(50%, -50%);transform-origin:100% 0;transition:transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);pointer-events:none;border-radius:8px;flex-flow:wrap;justify-content:center;align-items:center;padding:0 2.5px;display:flex;position:absolute}:host([small]) [part~=badge]{--md-badge-scale:.375;color:#0000}:host([hidden]){display:hidden}:host([value="0"]:not([show-zero])) [part~=badge],:host([hidden]) [part~=badge]{--md-badge-scale:0}:host([circle]){--md-badge-offset:14%}:host([left]:not([dir=rtl])) [part~=badge],:host(:not([left])[dir=rtl]) [part~=badge]{right:auto;left:var(--md-badge-offset);transform:scale(var(--md-badge-scale)) translate(-50%, -50%);transform-origin:0 0}:host([bottom]) [part~=badge]{top:auto;bottom:var(--md-badge-offset);transform:scale(var(--md-badge-scale)) translate(50%, 50%);transform-origin:100% 100%}:host([left][bottom]:not([dir=rtl])) [part~=badge],:host(:not([left])[dir=rtl][bottom]) [part~=badge]{transform:scale(var(--md-badge-scale)) translate(-50%, 50%);transform-origin:0 100%}`;

package/src/m3/badge/badge.js

@@ -0,0 +1,65 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { badgeStyles } from './badge-styles.css.js';
+export class M3Badge extends LitElement {
+    static{
+        this.styles = [
+            badgeStyles
+        ];
+    }
+    render() {
+        return html`
+      <div part="root">
+        <slot></slot>
+        <span part="badge">${this.#getDisplayValue()}</span>
+      </div>
+    `;
+    }
+    #getDisplayValue() {
+        const value = this.value;
+        const max = this.max;
+        if (max !== 0 && value > max) {
+            return `${max}+`;
+        }
+        return value;
+    }
+    constructor(...args){
+        super(...args), this.showZero = false, this.left = false, this.bottom = false;
+    }
+}
+_ts_decorate([
+    property({
+        type: Number
+    })
+], M3Badge.prototype, "value", void 0);
+_ts_decorate([
+    property({
+        type: Number
+    })
+], M3Badge.prototype, "max", void 0);
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'show-zero'
+    })
+], M3Badge.prototype, "showZero", void 0);
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: true
+    })
+], M3Badge.prototype, "left", void 0);
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: true
+    })
+], M3Badge.prototype, "bottom", void 0);
+_ts_decorate([
+    query('[part~="badge"]')
+], M3Badge.prototype, "$badge", void 0);
+M3Badge = _ts_decorate([
+    customElement('md-badge')
+], M3Badge);

package/src/m3/button/common-button-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const commonButtonStyles = css`@layer common-button{:host{--_padding:16px;--md-focus-ring-shape:calc(var(--_h) / 2);background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);border-radius:calc(var(--_h) / 2);color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);font:var(--md-sys-typography-label-large);min-width:64px;padding-inline:var(--_padding);transition:box-shadow var(--md-sys-motion-std-effects-slow-duration) var(--md-sys-motion-std-effects-slow), border-radius var(--md-sys-motion-std-effects-slow-duration) var(--md-sys-motion-std-effects-slow);gap:8px}:host([size=xsmall]){--_padding:12px;gap:4px}:host([size=medium]){--_padding:24px;font:var(--md-sys-typography-title-medium);gap:8px}:host([size=large]){--_padding:48px;font:var(--md-sys-typography-headline-small);gap:12px}:host([size=xlarge]){--_padding:64px;font:var(--md-sys-typography-headline-medium);gap:16px}:host([trailing-icon]){flex-direction:row-reverse}:host([variant=outlined]){padding-inline:calc(var(--_padding) - 1px)}:host([variant=text]){padding-inline:calc(var(--_padding) / 4 * 3)}[part~=icon]{fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}}@layer override{:host([variant=elevated]){--_background-color:var(--md-sys-color-surface-container-low);--_text-color:var(--_color);box-shadow:var(--md-sys-elevation-shadow-1)}@media (hover:hover) and (pointer:fine){:host([variant=filled]:hover:not(:active)),:host([variant=tonal]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-1)}:host([variant=elevated]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-2)}}}`;
+export const commonButtonStyles = css`@layer common-button{:host{--_padding:16px;--md-focus-ring-shape:calc(var(--_h) / 2);background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);border-radius:calc(var(--_h) / 2);color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);font:var(--md-sys-typography-label-large);min-width:64px;padding-inline:var(--_padding);transition:box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default), border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);gap:8px}:host([size=xsmall]){--_padding:12px;gap:4px}:host([size=medium]){--_padding:24px;font:var(--md-sys-typography-title-medium);gap:8px}:host([size=large]){--_padding:48px;font:var(--md-sys-typography-headline-small);gap:12px}:host([size=xlarge]){--_padding:64px;font:var(--md-sys-typography-headline-medium);gap:16px}:host([trailing-icon]){flex-direction:row-reverse}:host([variant=outlined]){padding-inline:calc(var(--_padding) - 1px)}:host([variant=text]){padding-inline:calc(var(--_padding) / 4 * 3)}[part~=icon]{fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}}@layer override{:host([variant=elevated]){--_background-color:var(--md-sys-color-surface-container-low);--_text-color:var(--_color);box-shadow:var(--md-sys-elevation-shadow-1)}@media (hover:hover) and (pointer:fine){:host([variant=filled]:hover:not(:active)),:host([variant=tonal]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-1)}:host([variant=elevated]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-2)}}}`;

package/src/m3/button/icon-button-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const iconButtonStyles = css`@layer icon-button{:host{--_wn:32px;--_ww:52px;background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);border-radius:calc(var(--_h) / 2);color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);transition:border-radius var(--md-sys-motion-std-effects-slow-duration) var(--md-sys-motion-std-effects-slow);width:var(--_h)}:host([size=xsmall]){--_wn:28px;--_ww:40px}:host([size=medium]){--_wn:48px;--_ww:72px}:host([size=large]){--_wn:64px;--_ww:128px}:host([size=xlarge]){--_wn:104px;--_ww:184px}:host([width=narrow]){width:var(--_wn)}:host([width=wide]){width:var(--_ww)}::slotted(*){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}}@layer override{:host([size=small]){--_icon-size:24px}:host([variant=text]){--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=text]:state(checked)){--_text-color:var(--_color)}}`;
+export const iconButtonStyles = css`@layer icon-button{:host{--_wn:32px;--_ww:52px;background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);border-radius:calc(var(--_h) / 2);color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);transition:border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);width:var(--_h)}:host([size=xsmall]){--_wn:28px;--_ww:40px}:host([size=medium]){--_wn:48px;--_ww:72px}:host([size=large]){--_wn:64px;--_ww:128px}:host([size=xlarge]){--_wn:104px;--_ww:184px}:host([width=narrow]){width:var(--_wn)}:host([width=wide]){width:var(--_ww)}::slotted(*){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}}@layer override{:host([size=small]){--_icon-size:24px}:host([variant=text]){--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=text]:state(checked)){--_text-color:var(--_color)}}`;

package/src/m3/button/shared-button-toggle-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const sharedButtonToggleStyles = css`@layer shared-toggle{:host{transition:box-shadow var(--md-sys-motion-std-effects-slow-duration) var(--md-sys-motion-std-effects-slow), border-radius var(--md-sys-motion-std-effects-slow-duration) var(--md-sys-motion-std-effects-slow), background-color var(--md-sys-motion-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-fast), color var(--md-sys-motion-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-fast)}:host(:state(checked)){--md-focus-ring-shape:var(--_rad-sq);border-radius:var(--_rad-sq)}:host(:state(checked)) [part~=unchecked],:host(:not(:state(checked))) [part~=checked]{display:none}:host([variant=filled]:not(:state(checked))){--_background-color:var(--md-sys-color-surface-container);--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=tonal]:not(:state(checked))){--_background-color:var(--md-sys-color-surface-container-highest);--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=outlined]:state(checked)){--_background-color:var(--md-sys-color-inverse-surface);--_text-color:var(--md-sys-color-inverse-on-surface);border-width:0}}`;
+export const sharedButtonToggleStyles = css`@layer shared-toggle{:host{transition:border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default), background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast)}:host(:state(checked)){--md-focus-ring-shape:var(--_rad-sq);border-radius:var(--_rad-sq)}:host(:state(checked)) [part~=unchecked],:host(:not(:state(checked))) [part~=checked]{display:none}:host([variant=filled]:not(:state(checked))){--_background-color:var(--md-sys-color-surface-container);--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=tonal]:not(:state(checked))){--_background-color:var(--md-sys-color-surface-container-highest);--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=outlined]:state(checked)){--_background-color:var(--md-sys-color-inverse-surface);--_text-color:var(--md-sys-color-inverse-on-surface);border-width:0}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const checkboxStyles = css`:host{--md-focus-ring-radius:9999px;--_container-color:transparent;--_outline-color:var(--md-sys-color-on-surface-variant);--_mark-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-on-surface);--_checkbox-size:18px;background-color:color-mix(in srgb, var(--_container-color) var(--_container-opacity,100%), transparent);border-color:color-mix(in srgb, var(--_outline-color) var(--_outline-opacity,100%), transparent);border-style:solid;border-width:var(--md-checkbox-outline-width,2px);box-sizing:border-box;cursor:pointer;height:var(--_checkbox-size);-webkit-tap-highlight-color:transparent;transition:background-color var(--md-sys-motion-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-fast), border-color var(--md-sys-motion-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-fast);-webkit-user-select:none;user-select:none;vertical-align:top;width:var(--_checkbox-size);border-radius:2px;outline:0;place-content:center;place-items:center;margin:15px;display:inline-grid;position:relative}:host(:state(checked)),:host(:state(indeterminate)){--_container-color:var(--md-sys-color-primary);--_outline-color:var(--md-sys-color-primary);--_mark-color:var(--md-sys-color-on-primary);--_mark-opacity:100%;--_ripple-color:var(--md-sys-color-primary)}:host([error]){--_outline-color:var(--md-sys-color-error);--_mark-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-error)}:host([error]:state(checked)),:host([error]:state(indeterminate)){--_container-color:var(--md-sys-color-error);--_outline-color:var(--md-sys-color-error);--_mark-color:var(--md-sys-color-on-error);--_ripple-color:var(--md-sys-color-error)}:host(:disabled){--_outline-color:var(--md-sys-color-on-surface);--_outline-opacity:38%;--_mark-color:var(--md-sys-color-surface-container-highest);cursor:default;pointer-events:none}:host(:disabled:state(checked)),:host(:disabled:state(indeterminate)){--_container-color:var(--md-sys-color-on-surface);--_container-opacity:38%;--_outline-color:var(--md-sys-color-surface);--_outline-opacity:0%;--_mark-color:var(--md-sys-color-surface)}@media (hover:hover) and (pointer:fine){:host(:hover){--_unchecked-outline-color:var(--md-sys-color-on-surface)}}@media (forced-colors:active){:host{forced-color-adjust:none}}:host(:disabled){--_unchecked-container-opacity:38%}[part~=icon]{fill:color-mix(in srgb, var(--_mark-color) var(--_mark-opacity,0%), transparent);height:18px;transition:fill var(--md-sys-motion-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-fast);width:18px;position:absolute;inset:-2px}[part~=mark]{transition-duration:var(--md-sys-motion-exp-effects-fast-duration);transition-timing-function:var(--md-sys-motion-exp-effects-fast);transform:scaleY(-1)translate(7px,-14px)rotate(45deg)}:host(:state(indeterminate)) [part~=mark]{transform:scaleY(-1)translate(4px,-10px)rotate(0)}:host(:state(checked)) [part~=mark],:host(:state(indeterminate)) [part~=mark]{transition-duration:var(--md-sys-motion-exp-effects-slow-duration);transition-timing-function:var(--md-sys-motion-exp-effects-slow)}[part~=mark-short]{width:2px;height:0;transition-property:transform,height}[part~=mark-long]{width:0;height:2px;transition-property:transform,width}:host(:not(:state(checked)):not(:state(indeterminate)):state(was-checked)) [part~=mark],:host(:not(:state(checked)):not(:state(indeterminate)):state(was-indeterminate)) [part~=mark]{transition-delay:var(--md-sys-motion-exp-effects-fast-duration)}:host(:state(checked)) [part~=mark-short]{height:5.65685px}:host(:state(checked)) [part~=mark-long]{width:11.3137px}:host(:state(checked):state(was-unchecked)) [part~=mark-short]{transition-property:none}:host(:state(indeterminate)) [part~=mark-short]{height:2px}:host(:state(indeterminate)) [part~=mark-long]{width:10px}:host(:state(indeterminate):state(was-unchecked)) [part~=mark-short]{transition-property:height}:host(:state(indeterminate):state(was-unchecked)) [part~=mark-long]{transition-property:width}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}`;
+export const checkboxStyles = css`:host{--md-focus-ring-radius:9999px;--_container-color:transparent;--_outline-color:var(--md-sys-color-on-surface-variant);--_mark-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-on-surface);--_checkbox-size:18px;background-color:color-mix(in srgb, var(--_container-color) var(--_container-opacity,100%), transparent);border-color:color-mix(in srgb, var(--_outline-color) var(--_outline-opacity,100%), transparent);border-style:solid;border-width:var(--md-checkbox-outline-width,2px);box-sizing:border-box;cursor:pointer;height:var(--_checkbox-size);-webkit-tap-highlight-color:transparent;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;width:var(--_checkbox-size);border-radius:2px;outline:0;place-content:center;place-items:center;margin:15px;display:inline-grid;position:relative}:host(:state(checked)),:host(:state(indeterminate)){--_container-color:var(--md-sys-color-primary);--_outline-color:var(--md-sys-color-primary);--_mark-color:var(--md-sys-color-on-primary);--_mark-opacity:100%;--_ripple-color:var(--md-sys-color-primary)}:host([error]){--_outline-color:var(--md-sys-color-error);--_mark-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-error)}:host([error]:state(checked)),:host([error]:state(indeterminate)){--_container-color:var(--md-sys-color-error);--_outline-color:var(--md-sys-color-error);--_mark-color:var(--md-sys-color-on-error);--_ripple-color:var(--md-sys-color-error)}:host(:disabled){--_outline-color:var(--md-sys-color-on-surface);--_outline-opacity:38%;--_mark-color:var(--md-sys-color-surface-container-highest);cursor:default;pointer-events:none}:host(:disabled:state(checked)),:host(:disabled:state(indeterminate)){--_container-color:var(--md-sys-color-on-surface);--_container-opacity:38%;--_outline-color:var(--md-sys-color-surface);--_outline-opacity:0%;--_mark-color:var(--md-sys-color-surface)}@media (hover:hover) and (pointer:fine){:host(:hover){--_unchecked-outline-color:var(--md-sys-color-on-surface)}}@media (forced-colors:active){:host{forced-color-adjust:none}}:host(:disabled){--_unchecked-container-opacity:38%}[part~=icon]{fill:color-mix(in srgb, var(--_mark-color) var(--_mark-opacity,0%), transparent);height:18px;transition:fill var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);width:18px;position:absolute;inset:-2px}[part~=mark]{transition-duration:var(--md-sys-motion-effects-default-duration);transition-timing-function:var(--md-sys-motion-effects-default);transform:scaleY(-1)translate(7px,-14px)rotate(45deg)}:host(:state(indeterminate)) [part~=mark]{transform:scaleY(-1)translate(4px,-10px)rotate(0)}:host(:state(checked)) [part~=mark],:host(:state(indeterminate)) [part~=mark]{transition-duration:var(--md-sys-motion-effects-default-duration);transition-timing-function:var(--md-sys-motion-effects-default)}[part~=mark-short]{width:2px;height:0;transition-property:transform,height}[part~=mark-long]{width:0;height:2px;transition-property:transform,width}:host(:not(:state(checked)):not(:state(indeterminate)):state(was-checked)) [part~=mark],:host(:not(:state(checked)):not(:state(indeterminate)):state(was-indeterminate)) [part~=mark]{transition-delay:var(--md-sys-motion-effects-fast-duration)}:host(:state(checked)) [part~=mark-short]{height:5.65685px}:host(:state(checked)) [part~=mark-long]{width:11.3137px}:host(:state(checked):state(was-unchecked)) [part~=mark-short]{transition-property:none}:host(:state(indeterminate)) [part~=mark-short]{height:2px}:host(:state(indeterminate)) [part~=mark-long]{width:10px}:host(:state(indeterminate):state(was-unchecked)) [part~=mark-short]{transition-property:height}:host(:state(indeterminate):state(was-unchecked)) [part~=mark-long]{transition-property:width}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}`;

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const dialogStyles = css`dialog{background:0 0;border:none;outline:0;min-width:280px;max-width:min(560px,100% - 48px);min-height:140px;max-height:min(560px,100% - 48px);padding:0;overflow:visible}dialog[open]{display:flex}dialog::backdrop{background:0 0}[part=container]{box-sizing:border-box;will-change:height, transform, opacity;background-color:var(--md-sys-color-surface-container-high);border-radius:28px;flex-direction:column;flex-grow:1;display:flex;position:relative;overflow:hidden}[part=content]{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typography-body-medium);will-change:transform, opacity;padding:24px 24px 0;display:block}[part=actions]{justify-content:flex-end;gap:8px;display:flex;position:absolute;bottom:0;left:0;right:0}::slotted([slot=headline]){font:var(--md-sys-typography-headline-small);color:var(--md-sys-color-on-surface);margin:0;padding:24px 24px 0}slot[name=actions]::slotted(*){box-sizing:border-box;justify-content:flex-end;gap:8px;padding:24px;display:flex}[part=scrim]{background:var(--md-sys-color-scrim);opacity:.32;pointer-events:none;z-index:1;display:none;position:fixed;inset:0}dialog[open]+[part=scrim]{display:block}`;

package/src/m3/dialog/dialog.js

@@ -0,0 +1,220 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { html } from 'lit';
+import { query } from 'lit/decorators.js';
+import { customElement } from '../../core/decorators';
+import { Dialog } from '../../base/dialog';
+import { dialogStyles } from './dialog-styles.css.js';
+export class M3Dialog extends Dialog {
+    static{
+        this.styles = [
+            dialogStyles
+        ];
+    }
+    render() {
+        return html`
+      <dialog
+        part="dialog"
+        @click="${this._handleClick}"
+        @cancel="${this._handleCancel}"
+      >
+        <div part="container">
+          <div part="inner">
+            <div part="headline">
+              <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 = [];
+    }
+    show() {
+        this.#clearAnimations();
+        // 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(-${this._config.vertSlide}px)`
+            },
+            {
+                height: `${endHeight}px`,
+                transform: 'translateY(0px)'
+            }
+        ], {
+            duration: this._config.openDur,
+            easing: this._config.openEase
+        });
+        const scrim = this.$scrim.animate([
+            {
+                opacity: 0
+            },
+            {
+                opacity: 0.32
+            }
+        ], {
+            duration: this._config.openDur,
+            easing: this._config.openEase,
+            fill: 'forwards'
+        });
+        const inner = this.$inner.animate([
+            {
+                opacity: 0.2
+            },
+            {
+                opacity: 1
+            }
+        ], {
+            duration: this._config.innerFadeInDur,
+            easing: 'linear',
+            fill: 'forwards'
+        });
+        const actions = this.$actions.animate([
+            {
+                opacity: 0.5
+            },
+            {
+                opacity: 1
+            }
+        ], {
+            duration: this._config.innerFadeInDur,
+            easing: 'linear',
+            fill: 'forwards'
+        });
+        this.#activeAnimations.push(container, scrim, inner, actions);
+        container.onfinish = ()=>{
+            this.$container.style.minHeight = '';
+        };
+    }
+    close() {
+        this.#clearAnimations();
+        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(-${this._config.vertSlide}px)`
+            }
+        ], {
+            duration: this._config.closeDur,
+            easing: this._config.closeEase
+        });
+        const containerEffects = this.$container.animate([
+            {
+                opacity: 1
+            },
+            {
+                opacity: 0
+            }
+        ], {
+            duration: this._config.closeDur - this._config.innerFadeOutDur,
+            delay: this._config.innerFadeOutDur,
+            easing: 'linear',
+            fill: 'forwards'
+        });
+        const scrim = this.$scrim.animate([
+            {
+                opacity: 0.32
+            },
+            {
+                opacity: 0
+            }
+        ], {
+            duration: this._config.closeDur,
+            easing: this._config.closeEase,
+            fill: 'forwards'
+        });
+        const inner = this.$inner.animate([
+            {
+                opacity: 1
+            },
+            {
+                opacity: 0
+            }
+        ], {
+            duration: this._config.innerFadeOutDur,
+            easing: 'linear',
+            fill: 'forwards'
+        });
+        const actions = this.$actions.animate([
+            {
+                opacity: 1
+            },
+            {
+                opacity: 0
+            }
+        ], {
+            duration: this._config.innerFadeOutDur,
+            easing: 'linear',
+            fill: 'forwards'
+        });
+        this.#activeAnimations.push(containerSpatial, containerEffects, scrim, inner, actions);
+        containerSpatial.onfinish = ()=>{
+            this.$container.style.minHeight = '';
+            super.close();
+            this.#clearAnimations();
+        };
+    }
+    constructor(...args){
+        super(...args), this._config = {
+            openEase: 'cubic-bezier(0, 0, 0, 1)',
+            closeEase: 'cubic-bezier(0.3, 0, 1, 1)',
+            vertSlide: 36,
+            openDur: 500,
+            closeDur: 200,
+            innerFadeInDur: 200,
+            innerFadeOutDur: 100
+        } /* Perhaps make them constants? I don't think that there will be anyone
+        making classes inheriting this class... */ , this.#activeAnimations = [], this._handleClick = (e)=>{
+            const target = e.target;
+            if (!this.$container.contains(target) && !this.contains(target)) this.close();
+        };
+    }
+}
+_ts_decorate([
+    query('[part=container]')
+], M3Dialog.prototype, "$container", void 0);
+_ts_decorate([
+    query('[part=inner]')
+], M3Dialog.prototype, "$inner", void 0);
+_ts_decorate([
+    query('[part=actions]')
+], M3Dialog.prototype, "$actions", void 0);
+_ts_decorate([
+    query('.actions-placeholder')
+], M3Dialog.prototype, "$actionsPlaceholder", void 0);
+_ts_decorate([
+    query('[part=scrim]')
+], M3Dialog.prototype, "$scrim", void 0);
+M3Dialog = _ts_decorate([
+    customElement('md-dialog', false)
+], M3Dialog);

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-std-effects-slow-duration) var(--md-sys-motion-std-effects-slow);-webkit-user-select:none;user-select:none;vertical-align:middle;outline:0;justify-content:center;align-items:center;gap:8px;display:inline-flex;position:relative}:host([size=medium]){--_size:80px;--_border-radius:20px;--_icon-size:28px}:host([size=large]){--_size:96px;--_border-radius:28px;--_icon-size:36px}:host([color=primary-container]){--_text-color:var(--md-sys-color-on-primary-container);--_background-color:var(--md-sys-color-primary-container)}:host([color=secondary-container]){--_text-color:var(--md-sys-color-on-secondary-container);--_background-color:var(--md-sys-color-secondary-container)}:host([color=tertiary-container]){--_text-color:var(--md-sys-color-on-tertiary-container);--_background-color:var(--md-sys-color-tertiary-container)}:host([color=secondary]){--_text-color:var(--md-sys-color-on-secondary);--_background-color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_text-color:var(--md-sys-color-on-tertiary);--_background-color:var(--md-sys-color-tertiary)}:host([color=surface]){--_text-color:var(--md-sys-color-primary);--_background-color:var(--md-sys-color-surface-container-high)}:host(:disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:12%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;box-shadow:none;cursor:default;pointer-events:none}@media (hover:hover) and (pointer:fine){:host(:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-4)}}::slotted(:not([slot=label])){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em;display:inline-flex}::slotted([slot=label]){margin-inline:4px}`;
+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}:host([size=medium]){--_size:80px;--_border-radius:20px;--_icon-size:28px}:host([size=large]){--_size:96px;--_border-radius:28px;--_icon-size:36px}:host([color=primary-container]){--_text-color:var(--md-sys-color-on-primary-container);--_background-color:var(--md-sys-color-primary-container)}:host([color=secondary-container]){--_text-color:var(--md-sys-color-on-secondary-container);--_background-color:var(--md-sys-color-secondary-container)}:host([color=tertiary-container]){--_text-color:var(--md-sys-color-on-tertiary-container);--_background-color:var(--md-sys-color-tertiary-container)}:host([color=secondary]){--_text-color:var(--md-sys-color-on-secondary);--_background-color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_text-color:var(--md-sys-color-on-tertiary);--_background-color:var(--md-sys-color-tertiary)}:host([color=surface]){--_text-color:var(--md-sys-color-primary);--_background-color:var(--md-sys-color-surface-container-high)}:host(:disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:12%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;box-shadow:none;cursor:default;pointer-events:none}@media (hover:hover) and (pointer:fine){:host(:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-4)}}::slotted(:not([slot=label])){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em;display:inline-flex}::slotted([slot=label]){margin-inline:4px}`;

package/src/m3/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-exp-effects-default-duration) var(--md-sys-motion-exp-effects-default), font-size var(--md-sys-motion-exp-effects-default-duration) var(--md-sys-motion-exp-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)}`;

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-exp-effects-default-duration) var(--md-sys-motion-exp-effects-default);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)}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const outlinedFieldStyles = css`:host{--_outline-width:1px}.container{border-radius:4px;padding-inline:16px}.outline{border-radius:inherit;color:var(--md-sys-color-outline);pointer-events:none;display:flex;position:absolute;inset:0}.outline-start,.outline-notch,.outline-end{border:var(--_outline-width) solid currentColor;box-sizing:border-box;transition:border-width var(--md-sys-motion-exp-effects-default-duration) var(--md-sys-motion-exp-effects-default), border-top-color var(--md-sys-motion-exp-effects-default-duration) var(--md-sys-motion-exp-effects-default)}.outline-start{border-radius:inherit;border-inline-end:none;border-start-end-radius:0;border-end-end-radius:0;width:12px}.outline-end{border-radius:inherit;border-inline-start:none;border-start-start-radius:0;border-end-start-radius:0;flex:1}.outline-notch{border-inline:none;align-items:flex-start;max-width:calc(100% - 24px);margin-top:0;padding:0 4px;display:flex}:host(:not([haslabel])) .outline-notch{display:none}.label{margin-top:calc(var(--_padding-top) - 1px)}:host(:hover) .label,:host(:hover) .outline{color:var(--md-sys-color-on-surface)}:host([focused]){--_outline-width:3px}:host([focused]) .label,:host([focused]) .outline{color:var(--md-sys-color-primary)}:host([error]) .label,:host([error]) .outline{color:var(--md-sys-color-error)}:host([populated]) .outline-notch,:host([focused]) .outline-notch{border-top-width:0;border-top-color:#0000}:host([populated]) .label,:host([focused]) .label{margin-top:calc(-.75em - 3px);font-size:.75em}:host([disabled]) .outline{color:var(--md-sys-color-outline-variant)}:host([disabled]) .label{color:var(--md-sys-color-on-surface-variant)}`;
+export const outlinedFieldStyles = css`:host{--_outline-width:1px}.container{border-radius:4px;padding-inline:16px}.outline{border-radius:inherit;color:var(--md-sys-color-outline);pointer-events:none;display:flex;position:absolute;inset:0}.outline-start,.outline-notch,.outline-end{border:var(--_outline-width) solid currentColor;box-sizing:border-box;transition:border-width var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), border-top-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast)}.outline-start{border-radius:inherit;border-inline-end:none;border-start-end-radius:0;border-end-end-radius:0;width:12px}.outline-end{border-radius:inherit;border-inline-start:none;border-start-start-radius:0;border-end-start-radius:0;flex:1}.outline-notch{border-inline:none;align-items:flex-start;max-width:calc(100% - 24px);margin-top:0;padding:0 4px;display:flex}:host(:not([haslabel])) .outline-notch{display:none}.label{margin-top:calc(var(--_padding-top) - 1px)}:host(:hover) .label,:host(:hover) .outline{color:var(--md-sys-color-on-surface)}:host([focused]){--_outline-width:3px}:host([focused]) .label,:host([focused]) .outline{color:var(--md-sys-color-primary)}:host([error]) .label,:host([error]) .outline{color:var(--md-sys-color-error)}:host([populated]) .outline-notch,:host([focused]) .outline-notch{border-top-width:0;border-top-color:#0000}:host([populated]) .label,:host([focused]) .label{margin-top:calc(-.75em - 3px);font-size:.75em}:host([disabled]) .outline{color:var(--md-sys-color-outline-variant)}:host([disabled]) .label{color:var(--md-sys-color-on-surface-variant)}`;

package/src/m3/loading-indicator/loading-indicator-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const loadingIndicatorStyles = css`:host{aspect-ratio:1;background-color:var(--md-sys-color-surface);border-radius:9999px;place-items:center;width:48px;display:grid}:host([contained]){background-color:var(--md-sys-color-primary-container)}canvas{width:82%;height:82%;display:block}`;

package/src/m3/loading-indicator/loading-indicator.js

@@ -0,0 +1,324 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+// Origin: https://github.com/brahmkshatriya/material-osc/blob/main/assets/loading-shape-morph-demo.html
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { InternalsAttached, internals } from '../../base/mixins/internals-attached.js';
+import { loadingIndicatorStyles } from './loading-indicator-styles.css.js';
+const STEP_MS = 650;
+const FULL_ROTATION_MS = 4666;
+const QUARTER_ROTATION = 90;
+const TOTAL_POINTS = 240;
+const CANVAS_SIZE = 640;
+const RADIUS_BASE = CANVAS_SIZE / 2;
+const CENTER = CANVAS_SIZE / 2;
+export class M3LoadingIndicator extends InternalsAttached(LitElement) {
+    static{
+        this.styles = [
+            loadingIndicatorStyles
+        ];
+    }
+    render() {
+        return html`<canvas
+      width="${CANVAS_SIZE}"
+      height="${CANVAS_SIZE}"
+      aria-hidden="true"
+    ></canvas>`;
+    }
+    #ctx;
+    #animationFrame;
+    #startTime;
+    #color;
+    constructor(){
+        super(), this.contained = false, this.#animationFrame = 0, this.#startTime = 0, this.#color = '#ff0000', this.#animate = (now)=>{
+            if (this.#startTime === 0) {
+                this.#startTime = now;
+            }
+            const elapsed = now - this.#startTime;
+            const step = Math.floor(elapsed / STEP_MS);
+            const morphElapsed = elapsed % STEP_MS;
+            const progress = springProgress(morphElapsed);
+            const from = sampledSequence[step % sampledSequence.length];
+            const to = sampledSequence[(step + 1) % sampledSequence.length];
+            const stepRotation = step * QUARTER_ROTATION + progress * QUARTER_ROTATION;
+            const globalRotation = elapsed % FULL_ROTATION_MS / FULL_ROTATION_MS * 360;
+            this.#draw(from, to, progress, stepRotation + globalRotation, scalePulse(morphElapsed));
+            this.#animationFrame = requestAnimationFrame(this.#animate);
+        };
+        this[internals].role = 'progressbar';
+        this[internals].ariaValueMin = '0';
+        this[internals].ariaValueMax = '1';
+    }
+    firstUpdated() {
+        this.#ctx = this.$canvas.getContext('2d');
+        this.#cacheColors();
+        setInterval(this.#cacheColors.bind(this), 1000);
+        this.#animationFrame = requestAnimationFrame(this.#animate);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        cancelAnimationFrame(this.#animationFrame);
+    }
+    #cacheColors() {
+        const computed = getComputedStyle(this);
+        const color = computed.getPropertyValue(this.contained ? '--md-sys-color-on-primary-container' : '--md-sys-color-primary').trim();
+        if (color) this.#color = color;
+    }
+    #draw(from, to, progress, rotation, scale) {
+        if (!this.#ctx || !this.$canvas) return;
+        const ctx = this.#ctx;
+        ctx.clearRect(0, 0, this.$canvas.width, this.$canvas.height);
+        ctx.save();
+        ctx.translate(CENTER, CENTER);
+        ctx.scale(scale, scale);
+        ctx.rotate(rotation * Math.PI / 180);
+        ctx.translate(-CENTER, -CENTER);
+        ctx.beginPath();
+        from.points.forEach((point, i)=>{
+            const next = to.points[i];
+            const x = lerp(point.x, next.x, progress);
+            const y = lerp(point.y, next.y, progress);
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+        });
+        ctx.closePath();
+        ctx.fillStyle = this.#color;
+        ctx.fill();
+        ctx.restore();
+    }
+    #animate;
+}
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: true
+    })
+], M3LoadingIndicator.prototype, "contained", void 0);
+_ts_decorate([
+    query('canvas')
+], M3LoadingIndicator.prototype, "$canvas", void 0);
+M3LoadingIndicator = _ts_decorate([
+    customElement('md-loading')
+], M3LoadingIndicator);
+const lerp = (a, b, t)=>a + (b - a) * t;
+const clamp = (v, lo, hi)=>Math.max(lo, Math.min(hi, v));
+const dist = (a, b)=>Math.hypot(a.x - b.x, a.y - b.y);
+const norm = (x, y, fallback = {
+    x: 1,
+    y: 0
+})=>{
+    const len = Math.hypot(x, y);
+    return len < 1e-6 ? fallback : {
+        x: x / len,
+        y: y / len
+    };
+};
+const sequence = [
+    [
+        10,
+        0.85,
+        0.67,
+        0.75,
+        0.5
+    ],
+    [
+        9,
+        0.85,
+        0.755,
+        0.8,
+        0.5
+    ],
+    [
+        5,
+        0.85,
+        0.731,
+        0.45,
+        1
+    ],
+    [
+        2,
+        0.85,
+        0.67,
+        0.8,
+        0.95
+    ],
+    [
+        8,
+        0.85,
+        0.731,
+        0.6,
+        0.45
+    ],
+    [
+        4,
+        0.925,
+        0.67,
+        1,
+        0.4
+    ],
+    [
+        2,
+        0.9,
+        0.565,
+        0.8,
+        0.6
+    ]
+].map(([points, outerRadius, innerRadius, outerRoundness, innerRoundness])=>({
+        points,
+        outerRadius,
+        innerRadius,
+        outerRoundness,
+        innerRoundness
+    }));
+function springProgress(ms) {
+    const t = ms / 1000;
+    const stiffness = 200;
+    const damping = 0.6;
+    const omega0 = Math.sqrt(stiffness);
+    const omegaD = omega0 * Math.sqrt(1 - damping * damping);
+    const displacement = Math.exp(-damping * omega0 * t) * (-Math.cos(omegaD * t) - damping * omega0 / omegaD * Math.sin(omegaD * t));
+    return clamp(1 + displacement, 0, 1);
+}
+function scalePulse(ms) {
+    const t = ms / STEP_MS;
+    const smooth = (p)=>p * p * (3 - 2 * p);
+    const outCubic = (p)=>1 - (1 - p) ** 3;
+    const segments = [
+        [
+            0,
+            0.14,
+            1,
+            0.985,
+            smooth
+        ],
+        [
+            0.14,
+            0.46,
+            0.985,
+            1.04,
+            outCubic
+        ],
+        [
+            0.46,
+            0.76,
+            1.04,
+            1,
+            smooth
+        ]
+    ];
+    const segment = segments.find(([start, end])=>t < end && t >= start);
+    if (!segment) return 1;
+    const [start, end, from, to, ease] = segment;
+    return lerp(from, to, ease((t - start) / (end - start)));
+}
+function starGeometry(shape) {
+    const points = Math.max(2, Math.floor(shape.points));
+    const count = points * 2;
+    const anchors = Array.from({
+        length: count
+    }, (_, i)=>{
+        const outer = i % 2 === 0;
+        const radius = (outer ? shape.outerRadius : shape.innerRadius) * RADIUS_BASE;
+        const angle = i * Math.PI / points;
+        return {
+            x: CENTER + Math.cos(angle) * radius,
+            y: CENTER + Math.sin(angle) * radius,
+            outer
+        };
+    });
+    const tangents = anchors.map((_, i)=>{
+        const prev = anchors[(i - 1 + count) % count];
+        const next = anchors[(i + 1) % count];
+        return norm(next.x - prev.x, next.y - prev.y);
+    });
+    const lengths = anchors.map((anchor, i)=>{
+        const prev = anchors[(i - 1 + count) % count];
+        const next = anchors[(i + 1) % count];
+        const roundness = anchor.outer ? shape.outerRoundness : shape.innerRoundness;
+        return Math.max(0, roundness) * Math.min(dist(anchor, prev), dist(anchor, next)) * 0.5;
+    });
+    const handles = anchors.map((anchor, i)=>{
+        const tangent = tangents[i];
+        const length = lengths[i];
+        return {
+            in: {
+                x: anchor.x - tangent.x * length,
+                y: anchor.y - tangent.y * length
+            },
+            out: {
+                x: anchor.x + tangent.x * length,
+                y: anchor.y + tangent.y * length
+            }
+        };
+    });
+    return {
+        anchors,
+        handles
+    };
+}
+function cubic(p0, c1, c2, p1, t) {
+    const inv = 1 - t;
+    return {
+        x: inv ** 3 * p0.x + 3 * inv * inv * t * c1.x + 3 * inv * t * t * c2.x + t ** 3 * p1.x,
+        y: inv ** 3 * p0.y + 3 * inv * inv * t * c1.y + 3 * inv * t * t * c2.y + t ** 3 * p1.y
+    };
+}
+function resample(points) {
+    const lengths = points.map((point, i)=>dist(point, points[(i + 1) % points.length]));
+    const perimeter = lengths.reduce((sum, length)=>sum + length, 0);
+    const sampled = [];
+    let edge = 0;
+    let consumed = 0;
+    for(let i = 0; i < TOTAL_POINTS; i++){
+        const target = perimeter * i / TOTAL_POINTS;
+        while(consumed + lengths[edge] < target && edge < lengths.length - 1){
+            consumed += lengths[edge++];
+        }
+        const point = points[edge];
+        const next = points[(edge + 1) % points.length];
+        const t = (target - consumed) / (lengths[edge] || 1);
+        sampled.push({
+            x: lerp(point.x, next.x, t),
+            y: lerp(point.y, next.y, t)
+        });
+    }
+    return sampled;
+}
+function sampleShape(shape) {
+    const { anchors, handles } = starGeometry(shape);
+    const dense = [];
+    anchors.forEach((anchor, i)=>{
+        const next = (i + 1) % anchors.length;
+        for(let step = 0; step < 18; step++){
+            dense.push(cubic(anchor, handles[i].out, handles[next].in, anchors[next], step / 18));
+        }
+    });
+    return {
+        points: resample(dense)
+    };
+}
+function shifted(points, offset) {
+    return points.map((_, i)=>points[(i + offset) % points.length]);
+}
+function alignTo(from, to) {
+    let bestOffset = 0;
+    let bestScore = Infinity;
+    for(let offset = 0; offset < to.points.length; offset++){
+        let score = 0;
+        for(let i = 0; i < from.points.length; i += 4){
+            const point = to.points[(i + offset) % to.points.length];
+            score += (from.points[i].x - point.x) ** 2 + (from.points[i].y - point.y) ** 2;
+        }
+        if (score < bestScore) {
+            bestScore = score;
+            bestOffset = offset;
+        }
+    }
+    return {
+        ...to,
+        points: shifted(to.points, bestOffset)
+    };
+}
+const sampledSequence = sequence.map(sampleShape).reduce((aligned, shape)=>{
+    aligned.push(aligned.length ? alignTo(aligned.at(-1), shape) : shape);
+    return aligned;
+}, []);

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-exp-spatial-default-duration) var(--md-sys-motion-exp-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-exp-effects-fast-duration), transform var(--md-sys-motion-exp-effects-slow-duration) var(--md-sys-motion-exp-effects-slow);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}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const sliderStyles = css`:host{--_target-size:48px;--_half-target:calc(var(--_target-size) / 2);--_handle-width-start:var(--md-slider-handle-width,4px);--_handle-width-end:var(--md-slider-handle-width,4px);--_handle-height:var(--md-slider-handle-height,44px);--_handle-shape:var(--md-slider-handle-shape,20px);--_handle-margin:6px;--_tick-size:var(--md-slider-tick-size,2px);--_track-shape:8px;--_track-height:var(--md-slider-track-height,16px);vertical-align:middle;min-inline-size:200px;display:inline-flex}md-focus-ring{width:16px;height:56px;inset:unset}:host([disabled]){opacity:.38}:host([disabled]) input{cursor:default;pointer-events:none}.container{--_start-px:calc(100% * var(--_start));--_end-px:calc(100% * var(--_end));--_inv-start-px:calc(100% * (1 - var(--_start)));--_inv-end-px:calc(100% * (1 - var(--_end)));--_mask-offset-start:calc(var(--_handle-width-start) / 2 + var(--_handle-margin));--_mask-offset-end:calc(var(--_handle-width-end) / 2 + var(--_handle-margin));--_cut-start:calc(var(--_start-px) + var(--_mask-offset-start));--_cut-end:calc(var(--_inv-end-px) + var(--_mask-offset-end));--_cut-inv-start:calc(var(--_inv-start-px) + var(--_mask-offset-start));--_cut-inv-end:calc(var(--_end-px) + var(--_mask-offset-end));block-size:var(--_target-size);pointer-events:none;touch-action:none;user-select:none;flex:1;align-items:center;display:flex;position:relative}.track,.tickmarks{block-size:var(--_track-height);align-items:center;display:flex;position:absolute;inset-inline:0}.track div,.tickmarks div{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-std-effects-fast-duration) var(--md-sys-motion-std-effects-fast);position:absolute}.start .nub{width:var(--_handle-width-start)}:host([disabled]) .nub{background:var(--md-sys-color-on-surface)}.onTop.isOverlapping .nub{border:1px solid var(--md-sys-color-surface)}.label{box-sizing:border-box;color:var(--md-sys-color-inverse-on-surface);background:var(--md-sys-color-inverse-surface);font:var(--md-sys-typography-label-large);opacity:0;border-radius:9999px;place-content:center;place-items:center;min-block-size:44px;min-inline-size:48px;padding:0 16px;transition:opacity 67ms linear;display:flex;position:absolute;inset-block-end:100%;transform:translateY(-2px)}:host(:not(:disabled)) :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}`;
+export const sliderStyles = css`:host{--_target-size:48px;--_half-target:calc(var(--_target-size) / 2);--_handle-width-start:var(--md-slider-handle-width,4px);--_handle-width-end:var(--md-slider-handle-width,4px);--_handle-height:var(--md-slider-handle-height,44px);--_handle-shape:var(--md-slider-handle-shape,20px);--_handle-margin:6px;--_tick-size:var(--md-slider-tick-size,2px);--_track-shape:8px;--_track-height:var(--md-slider-track-height,16px);vertical-align:middle;min-inline-size:200px;display:inline-flex}md-focus-ring{width:16px;height:56px;inset:unset}:host([disabled]){opacity:.38}:host([disabled]) input{cursor:default;pointer-events:none}.container{--_start-px:calc(100% * var(--_start));--_end-px:calc(100% * var(--_end));--_inv-start-px:calc(100% * (1 - var(--_start)));--_inv-end-px:calc(100% * (1 - var(--_end)));--_mask-offset-start:calc(var(--_handle-width-start) / 2 + var(--_handle-margin));--_mask-offset-end:calc(var(--_handle-width-end) / 2 + var(--_handle-margin));--_cut-start:calc(var(--_start-px) + var(--_mask-offset-start));--_cut-end:calc(var(--_inv-end-px) + var(--_mask-offset-end));--_cut-inv-start:calc(var(--_inv-start-px) + var(--_mask-offset-start));--_cut-inv-end:calc(var(--_end-px) + var(--_mask-offset-end));block-size:var(--_target-size);pointer-events:none;touch-action:none;user-select:none;flex:1;align-items:center;display:flex;position:relative}.track,.tickmarks{block-size:var(--_track-height);align-items:center;display:flex;position:absolute;inset-inline:0}.track div,.tickmarks div{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}`;

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-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-fast), border-color var(--md-sys-motion-exp-effects-fast-duration) var(--md-sys-motion-exp-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-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-fast), width var(--md-sys-motion-exp-spatial-fast-duration) var(--md-sys-motion-exp-spatial-fast), height var(--md-sys-motion-exp-spatial-fast-duration) var(--md-sys-motion-exp-spatial-fast), margin var(--md-sys-motion-exp-spatial-fast-duration) var(--md-sys-motion-exp-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}`;

package/src/m3/system/base.css

@@ -1,3 +1,2 @@
 @import './elevation.css';
-@import './motion.css';
 @import './typography.css';

package/src/m3/system/typography.css

@@ -3,15 +3,15 @@
 
   --md-sys-typography-display-large: 400 3.5625rem / 4rem
     var(--md-sys-typography-family);
-  --md-sys-typography-display-medium: 400 2.8125rem / 3.5rem
+  --md-sys-typography-display-medium: 400 2.8125rem / 3.25rem
     var(--md-sys-typography-family);
-  --md-sys-typography-display-small: 400 2.25rem / 3rem
+  --md-sys-typography-display-small: 400 2.25rem / 2.75rem
     var(--md-sys-typography-family);
-  --md-sys-typography-headline-large: 400 2.5rem / 3.125rem
+  --md-sys-typography-headline-large: 400 2rem / 2.5rem
     var(--md-sys-typography-family);
-  --md-sys-typography-headline-medium: 400 2.25rem / 2.75rem
+  --md-sys-typography-headline-medium: 400 1.75rem / 2.25rem
     var(--md-sys-typography-family);
-  --md-sys-typography-headline-small: 400 2rem / 2.5rem
+  --md-sys-typography-headline-small: 400 1.5rem / 2rem
     var(--md-sys-typography-family);
   --md-sys-typography-title-large: 400 1.375rem / 1.75rem
     var(--md-sys-typography-family);

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const tabStyles = css`:host{--md-focus-ring-shape:8px;box-sizing:border-box;color:var(--md-sys-color-on-surface-variant);cursor:pointer;font:var(--md-sys-typography-title-small);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)}:host([selected]) md-focus-ring{margin-bottom:4px}[part=content]{flex-direction:var(--_tab-flex-dir,row);height:var(--_tab-height,48px);justify-content:center;align-items:center;gap:8px;display:inline-flex}[part~=icon]{fill:currentColor;block-size:1em;inline-size:1em;font-size:24px}`;
+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)}:host([selected]) md-focus-ring{margin-bottom:calc(var(--_tab-indicator-height) + 2px)}[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}[part~=icon]{fill:currentColor;block-size:1em;inline-size:1em;font-size:24px}`;

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);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]{background-color:var(--md-sys-color-primary);height:3px;transition:var(--md-sys-motion-std-effects-slow-duration) var(--md-sys-motion-std-effects-slow);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)}:host([secondary]) [part=indicator]{border-radius:0;height:2px}:host([iconsabove]){--_tab-flex-dir:column;--_tab-height:64px}`;
+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}`;

package/src/m3/tab/tabs.js

@@ -1,9 +1,11 @@
 import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
 import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
+import { computePosition, autoUpdate } from '@floating-ui/dom';
 import { Tabs } from '../../base/tabs.js';
 import { tabsStyles } from './tabs-styles.css.js';
 export class M3Tabs extends Tabs {
+    #cleanup;
     static{
         this.styles = [
             tabsStyles
@@ -17,12 +19,25 @@ export class M3Tabs extends Tabs {
     }
     selectTab(selectedTab) {
         super.selectTab(selectedTab);
-        requestAnimationFrame(()=>{
-            const left = selectedTab.offsetLeft + (this.secondary ? 0 : selectedTab.$content.offsetLeft);
-            const width = this.secondary ? selectedTab.offsetWidth : selectedTab.$content.offsetWidth;
-            this.$indicator.style.left = `${left}px`;
-            this.$indicator.style.width = `${width}px`;
-        });
+        // It's kinda ridiculous to use floating-ui on such simple element, but I
+        // do not want to have indicators in each tab either.
+        // Another solution is using CSS anchor, which does not work across Shadow
+        // DOM for now.
+        this.#cleanup?.();
+        const updatePosition = ()=>{
+            computePosition(selectedTab, this.$indicator, {
+                placement: 'bottom',
+                strategy: 'absolute'
+            }).then(({ x })=>{
+                const left = this.secondary ? x : x + 2;
+                const width = this.secondary ? selectedTab.offsetWidth : selectedTab.$content.offsetWidth - 4;
+                Object.assign(this.$indicator.style, {
+                    left: `${left}px`,
+                    width: `${width}px`
+                });
+            });
+        };
+        this.#cleanup = autoUpdate(selectedTab, this.$indicator, updatePosition);
     }
     constructor(...args){
         super(...args), this.secondary = false, this.iconsAbove = false;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const textFieldStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block}md-filled-field,md-outlined-field{width:100%}[part=input]{color:inherit;font:inherit;-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;width:100%;height:100%;margin:0;padding:0}`;
+export const textFieldStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block}md-filled-field,md-outlined-field{width:100%}[part=input]{color:inherit;font:var(--md-sys-typography-body-large);-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;width:100%;height:100%;margin:0;padding:0}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const tooltipStyles = css`:host{background-color:var(--md-sys-color-inverse-surface);box-sizing:border-box;color:#0000;font:var(--md-sys-typography-body-small);max-width:var(--_max-width,300px);opacity:0;pointer-events:none;z-index:800;border-radius:4px;align-items:center;width:max-content;min-height:24px;padding:4px 8px;display:flex;position:absolute;top:0;left:0;transform:scaleY(.35)}:host(:state(closed)){display:none}:host(:state(opening):not([forceinvisible])){color:var(--md-sys-color-inverse-on-surface);opacity:1;pointer-events:auto;transition:color linear 67ms 67ms, opacity var(--md-sys-motion-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-fast), transform var(--md-sys-motion-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-fast);transform:scaleY(1)}:host(:state(opened):not([forceinvisible])){color:var(--md-sys-color-inverse-on-surface);opacity:1;pointer-events:auto;transform:scaleY(1)}:host(:state(closing):not([forceinvisible])){color:#0000;opacity:0;transition:color linear 67ms, opacity var(--md-sys-motion-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-fast), transform var(--md-sys-motion-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-fast);transform:scaleY(.35)}`;
+export const tooltipStyles = css`:host{background-color:var(--md-sys-color-inverse-surface);box-sizing:border-box;color:#0000;font:var(--md-sys-typography-body-small);max-width:var(--_max-width,300px);opacity:0;pointer-events:none;z-index:800;border-radius:4px;align-items:center;width:max-content;min-height:24px;padding:4px 8px;display:flex;position:absolute;top:0;left:0;transform:scaleY(.35)}:host(:state(closed)){display:none}:host(:state(opening):not([forceinvisible])){color:var(--md-sys-color-inverse-on-surface);opacity:1;pointer-events:auto;transition:color linear 67ms 67ms, opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);transform:scaleY(1)}:host(:state(opened):not([forceinvisible])){color:var(--md-sys-color-inverse-on-surface);opacity:1;pointer-events:auto;transform:scaleY(1)}:host(:state(closing):not([forceinvisible])){color:#0000;opacity:0;transition:color linear 67ms, opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);transform:scaleY(.35)}`;

package/src/m3/tooltip/tooltip.js

@@ -16,5 +16,5 @@ export class M3Tooltip extends Tooltip {
     }
 }
 M3Tooltip = _ts_decorate([
-    customElement('md-tooltip', false)
+    customElement('md-tooltip', true)
 ], M3Tooltip);

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

@@ -0,0 +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}`;

package/src/win98/button/button.js

@@ -0,0 +1,21 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { Button } from '../../base/button.js';
+import { buttonStyles } from './button-styles.css.js';
+export class Win98Button extends Button {
+    static{
+        this.styles = [
+            ...super.styles,
+            buttonStyles
+        ];
+    }
+    render() {
+        return html`
+      <slot></slot>
+    `;
+    }
+}
+Win98Button = _ts_decorate([
+    customElement('win98-button')
+], Win98Button);

package/src/m3/system/motion.css

@@ -1,30 +0,0 @@
-:root {
-  /* std: standard, exp: expressive, mot: motion */
-  --md-sys-motion-exp-spatial-fast: cubic-bezier(0.42, 1.67, 0.21, 0.9);
-  --md-sys-motion-exp-spatial-fast-duration: 350ms;
-  --md-sys-motion-exp-spatial-default: cubic-bezier(0.38, 1.21, 0.22, 1);
-  --md-sys-motion-exp-spatial-default-duration: 500ms;
-  --md-sys-motion-exp-spatial-slow: cubic-bezier(0.39, 1.29, 0.35, 0.98);
-  --md-sys-motion-exp-spatial-slow-duration: 650ms;
-
-  --md-sys-motion-exp-effects-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
-  --md-sys-motion-exp-effects-fast-duration: 150ms;
-  --md-sys-motion-exp-effects-default: cubic-bezier(0.34, 0.8, 0.34, 1);
-  --md-sys-motion-exp-effects-default-duration: 200ms;
-  --md-sys-motion-exp-effects-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
-  --md-sys-motion-exp-effects-slow-duration: 300ms;
-
-  --md-sys-motion-std-spatial-fast: cubic-bezier(0.27, 1.06, 0.18, 1);
-  --md-sys-motion-std-spatial-fast-duration: 350ms;
-  --md-sys-motion-std-spatial-default: cubic-bezier(0.27, 1.06, 0.18, 1);
-  --md-sys-motion-std-spatial-default-duration: 500ms;
-  --md-sys-motion-std-spatial-slow: cubic-bezier(0.27, 1.06, 0.18, 1);
-  --md-sys-motion-std-spatial-slow-duration: 750ms;
-
-  --md-sys-motion-std-effects-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
-  --md-sys-motion-std-effects-fast-duration: 150ms;
-  --md-sys-motion-std-effects-default: cubic-bezier(0.34, 0.8, 0.34, 1);
-  --md-sys-motion-std-effects-default-duration: 200ms;
-  --md-sys-motion-std-effects-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
-  --md-sys-motion-std-effects-slow-duration: 300ms;
-}