@vollowx/seele 0.12.10 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -20
- package/package.json +5 -5
- package/src/all.js +3 -0
- package/src/base/dialog.js +32 -0
- package/src/m3/badge/badge-styles.css.js +1 -1
- package/src/m3/button/common-button-styles.css.js +1 -1
- package/src/m3/button/icon-button-styles.css.js +1 -1
- package/src/m3/button/shared-button-toggle-styles.css.js +1 -1
- package/src/m3/checkbox/checkbox-styles.css.js +1 -1
- package/src/m3/dialog/dialog-styles.css.js +2 -0
- package/src/m3/dialog/dialog.js +220 -0
- package/src/m3/fab/fab-styles.css.js +1 -1
- package/src/m3/field/field-styles.css.js +1 -1
- package/src/m3/field/filled-field-styles.css.js +1 -1
- package/src/m3/field/outlined-field-styles.css.js +1 -1
- package/src/m3/loading-indicator/loading-indicator-styles.css.js +2 -0
- package/src/m3/loading-indicator/loading-indicator.js +324 -0
- package/src/m3/menu/menu-styles.css.js +1 -1
- package/src/m3/slider/slider-styles.css.js +1 -1
- package/src/m3/switch/switch-styles.css.js +1 -1
- package/src/m3/system/base.css +0 -1
- package/src/m3/system/typography.css +5 -5
- package/src/m3/tab/tabs-styles.css.js +1 -1
- package/src/m3/text-field/text-field-styles.css.js +1 -1
- package/src/m3/tooltip/tooltip-styles.css.js +1 -1
- package/src/win98/button/button-styles.css.js +2 -0
- package/src/win98/button/button.js +21 -0
- package/src/m3/system/motion.css +0 -30
package/README.md
CHANGED
|
@@ -1,27 +1,42 @@
|
|
|
1
|
-
#
|
|
1
|
+
# seele
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@vollowx/seele)
|
|
4
4
|
[](https://builds.sr.ht/~lucaz/seele?)
|
|
5
5
|
[](https://www.webcomponents.org/element/@vollowx/seele)
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
[
|
|
9
|
-
|
|
7
|
+
[https://tideover.cc/seele/](https://tideover.cc/seele/)
|
|
8
|
+
[docs/](https://tideover.cc/seele/docs/)
|
|
9
|
+
|
|
10
|
+
seele (**S**tandard **E**xtensible **Ele**ments) is a extensible
|
|
11
|
+
[Web Components][web-comps] library with a focus on accessibility and
|
|
12
|
+
keyboard-control.
|
|
10
13
|
|
|
11
14
|
It also provides styled components in the following design guideline(s):
|
|
12
15
|
|
|
13
16
|
- [Material You Expressive](https://m3.material.io/)
|
|
17
|
+
- Windows 98, most styles are from [98.css](https://jdan.github.io/98.css/)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
## Features
|
|
22
|
+
|
|
23
|
+
What's the differences comparing to other projects?
|
|
14
24
|
|
|
15
|
-
|
|
25
|
+
- Accessible and keyboard-accessible - all components are based on the
|
|
26
|
+
[APG Patterns][apg-patterns]
|
|
27
|
+
- Flexible - seele provides not only the styled components, but also the base
|
|
28
|
+
ones and the mix-ins that compose them, allowing you to write your components
|
|
29
|
+
easily
|
|
30
|
+
- Up-to-date - seele uses new Web features as much as possible, (see the README),
|
|
31
|
+
meaning that its size is relatively small and the compatibility is not the
|
|
32
|
+
best
|
|
16
33
|
|
|
17
34
|
## Installation
|
|
18
35
|
|
|
19
|
-
|
|
20
|
-
install with your preferred package manager
|
|
36
|
+
seele is published on [npm](https://www.npmjs.com/package/@vollowx/seele),
|
|
37
|
+
install with your preferred package manager like
|
|
21
38
|
|
|
22
39
|
```sh
|
|
23
|
-
bun add @vollowx/seele
|
|
24
|
-
yarn add @vollowx/seele
|
|
25
40
|
npm install @vollowx/seele
|
|
26
41
|
```
|
|
27
42
|
|
|
@@ -39,6 +54,8 @@ import '@vollowx/seele';
|
|
|
39
54
|
// They all follow such path: @/catagory/group/component.js
|
|
40
55
|
import '@vollowx/seele/m3/button/common-button.js';
|
|
41
56
|
import '@vollowx/seele/m3/checkbox/checkbox.js';
|
|
57
|
+
|
|
58
|
+
import '@vollowx/seele/win98/button/button.js';
|
|
42
59
|
```
|
|
43
60
|
|
|
44
61
|
### Using
|
|
@@ -53,30 +70,45 @@ Once imported, the components can be used just like standard HTML elements.
|
|
|
53
70
|
<md-checkbox checked></md-checkbox>
|
|
54
71
|
Labelled Checkbox
|
|
55
72
|
</label>
|
|
73
|
+
|
|
74
|
+
<win98-button>Look old?</win98-button>
|
|
56
75
|
```
|
|
57
76
|
|
|
58
77
|
### Theming
|
|
59
78
|
|
|
60
|
-
|
|
61
|
-
this to your style files.
|
|
79
|
+
seele components use CSS variables for styling. To include the systems for
|
|
80
|
+
Material You Expressive ones, add this to your style files.
|
|
62
81
|
|
|
63
82
|
```css
|
|
64
83
|
@import '@vollowx/seele/m3/systems/base.css';
|
|
65
|
-
/* This includes basic system variables
|
|
84
|
+
/* This includes basic system variables including elevation system and
|
|
85
|
+
typography system */
|
|
66
86
|
@import '@vollowx/seele/m3/systems/defaults.css';
|
|
67
87
|
/* (Optional) This includes basic styling for body, selection and links */
|
|
68
|
-
|
|
69
|
-
/*
|
|
70
|
-
* Note that there is no default color system since the way you implement theme
|
|
71
|
-
* switching and color changing varies.
|
|
72
|
-
*
|
|
73
|
-
* You can still find some references in dev/shared.css
|
|
74
|
-
*/
|
|
75
88
|
```
|
|
76
89
|
|
|
90
|
+
Note that there is no default color system and motion physics system to
|
|
91
|
+
have more flexibility and reduce redundant code.
|
|
92
|
+
|
|
93
|
+
For the color system, you can use the official
|
|
94
|
+
[Material Theme Builder](https://material-foundation.github.io/material-theme-builder/).
|
|
95
|
+
You can also find some references in ./dev/shared.css.
|
|
96
|
+
|
|
97
|
+
For the motion physics system, check [docs/05-Material_You_Expressive.md](./docs/05-Material_You_Expressive.md).
|
|
98
|
+
|
|
99
|
+
## Documentations
|
|
100
|
+
|
|
101
|
+
[Documentations and demos](https://tideover.cc/seele/docs/).
|
|
102
|
+
|
|
103
|
+
## Download
|
|
104
|
+
|
|
105
|
+
- [npm package](https://www.npmjs.com/package/@vollowx/seele)
|
|
106
|
+
- [The source at SourceHut](https://sr.ht/~lucaz/seele)
|
|
107
|
+
- [The source at GitHub](https://github.com/vollowx/seele)
|
|
108
|
+
|
|
77
109
|
## Browser Support
|
|
78
110
|
|
|
79
|
-
|
|
111
|
+
seele relies on the folling modern web standards:
|
|
80
112
|
|
|
81
113
|
- [`ElementInternals`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals), Baseline 2023
|
|
82
114
|
- [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:
|
|
|
101
133
|
- [Roadmap](./ROADMAP.md)
|
|
102
134
|
- [Contributing](./CONTRIBUTING.md)
|
|
103
135
|
- [License (Apache-2.0)](./LICENSE)
|
|
136
|
+
|
|
137
|
+
[web-comps]: https://developer.mozilla.org/en-US/docs/Web/API/Web_components
|
|
138
|
+
[apg-patterns]: https://www.w3.org/WAI/ARIA/apg/patterns/
|
|
139
|
+
[lit]: https://lit.dev/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vollowx/seele",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.13.0",
|
|
4
4
|
"description": "A extensible Web Components library, with Material Design 3 components pre-provided.",
|
|
5
5
|
"author": "vollowx",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -46,16 +46,16 @@
|
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@custom-elements-manifest/analyzer": "^0.11.0",
|
|
49
|
-
"@swc/core": "^1.15.
|
|
49
|
+
"@swc/core": "^1.15.46",
|
|
50
50
|
"@types/bun": "^1.3.14",
|
|
51
51
|
"@web/dev-server": "^0.4.6",
|
|
52
52
|
"@web/dev-server-esbuild": "^1.0.5",
|
|
53
53
|
"chokidar": "^5.0.0",
|
|
54
|
-
"lightningcss": "^1.
|
|
55
|
-
"prettier": "^3.9.
|
|
54
|
+
"lightningcss": "^1.33.0",
|
|
55
|
+
"prettier": "^3.9.6"
|
|
56
56
|
},
|
|
57
57
|
"dependencies": {
|
|
58
|
-
"@floating-ui/dom": "^1.
|
|
58
|
+
"@floating-ui/dom": "^1.8.0",
|
|
59
59
|
"@swc/helpers": "^0.5.23",
|
|
60
60
|
"lit": "^3.3.3"
|
|
61
61
|
}
|
package/src/all.js
CHANGED
|
@@ -6,12 +6,14 @@ export { M3ButtonToggle } from './m3/button/common-button-toggle.js';
|
|
|
6
6
|
export { M3IconButton } from './m3/button/icon-button.js';
|
|
7
7
|
export { M3IconButtonToggle } from './m3/button/icon-button-toggle.js';
|
|
8
8
|
export { M3Checkbox } from './m3/checkbox/checkbox.js';
|
|
9
|
+
export { M3Dialog } from './m3/dialog/dialog.js';
|
|
9
10
|
export { M3Divider } from './m3/divider/divider.js';
|
|
10
11
|
export { M3Fab } from './m3/fab/fab.js';
|
|
11
12
|
export { M3FocusRing } from './m3/focus-ring/focus-ring.js';
|
|
12
13
|
export { M3Item } from './m3/item/item.js';
|
|
13
14
|
export { M3List } from './m3/list/list.js';
|
|
14
15
|
export { M3ListItem } from './m3/list/list-item.js';
|
|
16
|
+
export { M3LoadingIndicator } from './m3/loading-indicator/loading-indicator.js';
|
|
15
17
|
export { M3Menu } from './m3/menu/menu.js';
|
|
16
18
|
export { M3MenuItem } from './m3/menu/menu-item.js';
|
|
17
19
|
export { M3Ripple } from './m3/ripple/ripple.js';
|
|
@@ -27,3 +29,4 @@ export { M3FilledTextField } from './m3/text-field/filled-text-field.js';
|
|
|
27
29
|
export { M3OutlinedTextField } from './m3/text-field/outlined-text-field.js';
|
|
28
30
|
export { M3Toolbar } from './m3/toolbar/toolbar.js';
|
|
29
31
|
export { M3Tooltip } from './m3/tooltip/tooltip.js';
|
|
32
|
+
export { Win98Button } from './win98/button/button.js';
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
|
|
2
|
+
import { LitElement } from 'lit';
|
|
3
|
+
import { query } from 'lit/decorators.js';
|
|
4
|
+
/**
|
|
5
|
+
* @csspart dialog
|
|
6
|
+
*
|
|
7
|
+
* Example `render()`:
|
|
8
|
+
*
|
|
9
|
+
* ```
|
|
10
|
+
* <dialog
|
|
11
|
+
* part="dialog"
|
|
12
|
+
* @cancel="${this._handleCancel}">
|
|
13
|
+
* <slot></slot>
|
|
14
|
+
* </dialog>
|
|
15
|
+
* ```
|
|
16
|
+
*/ export class Dialog extends LitElement {
|
|
17
|
+
show() {
|
|
18
|
+
this.$dialog.showModal();
|
|
19
|
+
}
|
|
20
|
+
close() {
|
|
21
|
+
this.$dialog.close();
|
|
22
|
+
}
|
|
23
|
+
constructor(...args){
|
|
24
|
+
super(...args), this._handleCancel = (e)=>{
|
|
25
|
+
e.preventDefault();
|
|
26
|
+
this.close();
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
_ts_decorate([
|
|
31
|
+
query('dialog')
|
|
32
|
+
], Dialog.prototype, "$dialog", void 0);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
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-
|
|
2
|
+
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%}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
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-
|
|
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)}}}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
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-
|
|
2
|
+
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)}}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const sharedButtonToggleStyles = css`@layer shared-toggle{:host{transition:
|
|
2
|
+
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}}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
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-
|
|
2
|
+
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}`;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
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}`;
|
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
import { query } from 'lit/decorators.js';
|
|
4
|
+
import { customElement } from '../../core/decorators';
|
|
5
|
+
import { Dialog } from '../../base/dialog';
|
|
6
|
+
import { dialogStyles } from './dialog-styles.css.js';
|
|
7
|
+
export class M3Dialog extends Dialog {
|
|
8
|
+
static{
|
|
9
|
+
this.styles = [
|
|
10
|
+
dialogStyles
|
|
11
|
+
];
|
|
12
|
+
}
|
|
13
|
+
render() {
|
|
14
|
+
return html`
|
|
15
|
+
<dialog
|
|
16
|
+
part="dialog"
|
|
17
|
+
@click="${this._handleClick}"
|
|
18
|
+
@cancel="${this._handleCancel}"
|
|
19
|
+
>
|
|
20
|
+
<div part="container">
|
|
21
|
+
<div part="inner">
|
|
22
|
+
<div part="headline">
|
|
23
|
+
<slot name="headline"></slot>
|
|
24
|
+
</div>
|
|
25
|
+
<div part="content">
|
|
26
|
+
<slot></slot>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="actions-placeholder"></div>
|
|
29
|
+
</div>
|
|
30
|
+
<div part="actions">
|
|
31
|
+
<slot name="actions"></slot>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</dialog>
|
|
35
|
+
<div part="scrim"></div>
|
|
36
|
+
`;
|
|
37
|
+
}
|
|
38
|
+
#activeAnimations;
|
|
39
|
+
#clearAnimations() {
|
|
40
|
+
this.#activeAnimations.forEach((anim)=>anim.cancel());
|
|
41
|
+
this.#activeAnimations = [];
|
|
42
|
+
}
|
|
43
|
+
show() {
|
|
44
|
+
this.#clearAnimations();
|
|
45
|
+
// Reset margins to allow browser centering
|
|
46
|
+
this.$dialog.style.marginTop = 'auto';
|
|
47
|
+
this.$dialog.style.marginBottom = 'auto';
|
|
48
|
+
super.show();
|
|
49
|
+
const actionsHeight = this.$actions.offsetHeight;
|
|
50
|
+
this.$actionsPlaceholder.style.height = `${actionsHeight}px`;
|
|
51
|
+
this.$container.style.height = 'auto';
|
|
52
|
+
const startHeight = 0;
|
|
53
|
+
const endHeight = this.$container.offsetHeight;
|
|
54
|
+
// Lock the position to prevent auto-centering during animation
|
|
55
|
+
const rect = this.$container.getBoundingClientRect();
|
|
56
|
+
this.$dialog.style.marginTop = `${rect.top}px`;
|
|
57
|
+
this.$dialog.style.marginBottom = 'auto';
|
|
58
|
+
this.$container.style.minHeight = '0px';
|
|
59
|
+
const container = this.$container.animate([
|
|
60
|
+
{
|
|
61
|
+
height: `${startHeight}px`,
|
|
62
|
+
transform: `translateY(-${this._config.vertSlide}px)`
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
height: `${endHeight}px`,
|
|
66
|
+
transform: 'translateY(0px)'
|
|
67
|
+
}
|
|
68
|
+
], {
|
|
69
|
+
duration: this._config.openDur,
|
|
70
|
+
easing: this._config.openEase
|
|
71
|
+
});
|
|
72
|
+
const scrim = this.$scrim.animate([
|
|
73
|
+
{
|
|
74
|
+
opacity: 0
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
opacity: 0.32
|
|
78
|
+
}
|
|
79
|
+
], {
|
|
80
|
+
duration: this._config.openDur,
|
|
81
|
+
easing: this._config.openEase,
|
|
82
|
+
fill: 'forwards'
|
|
83
|
+
});
|
|
84
|
+
const inner = this.$inner.animate([
|
|
85
|
+
{
|
|
86
|
+
opacity: 0.2
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
opacity: 1
|
|
90
|
+
}
|
|
91
|
+
], {
|
|
92
|
+
duration: this._config.innerFadeInDur,
|
|
93
|
+
easing: 'linear',
|
|
94
|
+
fill: 'forwards'
|
|
95
|
+
});
|
|
96
|
+
const actions = this.$actions.animate([
|
|
97
|
+
{
|
|
98
|
+
opacity: 0.5
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
opacity: 1
|
|
102
|
+
}
|
|
103
|
+
], {
|
|
104
|
+
duration: this._config.innerFadeInDur,
|
|
105
|
+
easing: 'linear',
|
|
106
|
+
fill: 'forwards'
|
|
107
|
+
});
|
|
108
|
+
this.#activeAnimations.push(container, scrim, inner, actions);
|
|
109
|
+
container.onfinish = ()=>{
|
|
110
|
+
this.$container.style.minHeight = '';
|
|
111
|
+
};
|
|
112
|
+
}
|
|
113
|
+
close() {
|
|
114
|
+
this.#clearAnimations();
|
|
115
|
+
const startHeight = this.$container.offsetHeight;
|
|
116
|
+
const endHeight = startHeight * 0.35;
|
|
117
|
+
this.$container.style.minHeight = '0px';
|
|
118
|
+
const containerSpatial = this.$container.animate([
|
|
119
|
+
{
|
|
120
|
+
height: `${startHeight}px`,
|
|
121
|
+
transform: 'translateY(0px)'
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
height: `${endHeight}px`,
|
|
125
|
+
transform: `translateY(-${this._config.vertSlide}px)`
|
|
126
|
+
}
|
|
127
|
+
], {
|
|
128
|
+
duration: this._config.closeDur,
|
|
129
|
+
easing: this._config.closeEase
|
|
130
|
+
});
|
|
131
|
+
const containerEffects = this.$container.animate([
|
|
132
|
+
{
|
|
133
|
+
opacity: 1
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
opacity: 0
|
|
137
|
+
}
|
|
138
|
+
], {
|
|
139
|
+
duration: this._config.closeDur - this._config.innerFadeOutDur,
|
|
140
|
+
delay: this._config.innerFadeOutDur,
|
|
141
|
+
easing: 'linear',
|
|
142
|
+
fill: 'forwards'
|
|
143
|
+
});
|
|
144
|
+
const scrim = this.$scrim.animate([
|
|
145
|
+
{
|
|
146
|
+
opacity: 0.32
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
opacity: 0
|
|
150
|
+
}
|
|
151
|
+
], {
|
|
152
|
+
duration: this._config.closeDur,
|
|
153
|
+
easing: this._config.closeEase,
|
|
154
|
+
fill: 'forwards'
|
|
155
|
+
});
|
|
156
|
+
const inner = this.$inner.animate([
|
|
157
|
+
{
|
|
158
|
+
opacity: 1
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
opacity: 0
|
|
162
|
+
}
|
|
163
|
+
], {
|
|
164
|
+
duration: this._config.innerFadeOutDur,
|
|
165
|
+
easing: 'linear',
|
|
166
|
+
fill: 'forwards'
|
|
167
|
+
});
|
|
168
|
+
const actions = this.$actions.animate([
|
|
169
|
+
{
|
|
170
|
+
opacity: 1
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
opacity: 0
|
|
174
|
+
}
|
|
175
|
+
], {
|
|
176
|
+
duration: this._config.innerFadeOutDur,
|
|
177
|
+
easing: 'linear',
|
|
178
|
+
fill: 'forwards'
|
|
179
|
+
});
|
|
180
|
+
this.#activeAnimations.push(containerSpatial, containerEffects, scrim, inner, actions);
|
|
181
|
+
containerSpatial.onfinish = ()=>{
|
|
182
|
+
this.$container.style.minHeight = '';
|
|
183
|
+
super.close();
|
|
184
|
+
this.#clearAnimations();
|
|
185
|
+
};
|
|
186
|
+
}
|
|
187
|
+
constructor(...args){
|
|
188
|
+
super(...args), this._config = {
|
|
189
|
+
openEase: 'cubic-bezier(0, 0, 0, 1)',
|
|
190
|
+
closeEase: 'cubic-bezier(0.3, 0, 1, 1)',
|
|
191
|
+
vertSlide: 36,
|
|
192
|
+
openDur: 500,
|
|
193
|
+
closeDur: 200,
|
|
194
|
+
innerFadeInDur: 200,
|
|
195
|
+
innerFadeOutDur: 100
|
|
196
|
+
} /* Perhaps make them constants? I don't think that there will be anyone
|
|
197
|
+
making classes inheriting this class... */ , this.#activeAnimations = [], this._handleClick = (e)=>{
|
|
198
|
+
const target = e.target;
|
|
199
|
+
if (!this.$container.contains(target) && !this.contains(target)) this.close();
|
|
200
|
+
};
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
_ts_decorate([
|
|
204
|
+
query('[part=container]')
|
|
205
|
+
], M3Dialog.prototype, "$container", void 0);
|
|
206
|
+
_ts_decorate([
|
|
207
|
+
query('[part=inner]')
|
|
208
|
+
], M3Dialog.prototype, "$inner", void 0);
|
|
209
|
+
_ts_decorate([
|
|
210
|
+
query('[part=actions]')
|
|
211
|
+
], M3Dialog.prototype, "$actions", void 0);
|
|
212
|
+
_ts_decorate([
|
|
213
|
+
query('.actions-placeholder')
|
|
214
|
+
], M3Dialog.prototype, "$actionsPlaceholder", void 0);
|
|
215
|
+
_ts_decorate([
|
|
216
|
+
query('[part=scrim]')
|
|
217
|
+
], M3Dialog.prototype, "$scrim", void 0);
|
|
218
|
+
M3Dialog = _ts_decorate([
|
|
219
|
+
customElement('md-dialog', false)
|
|
220
|
+
], M3Dialog);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
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-
|
|
2
|
+
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}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
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-
|
|
2
|
+
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)}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
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-
|
|
2
|
+
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)}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
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-
|
|
2
|
+
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)}`;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
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}`;
|
|
@@ -0,0 +1,324 @@
|
|
|
1
|
+
import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
|
|
2
|
+
// Origin: https://github.com/brahmkshatriya/material-osc/blob/main/assets/loading-shape-morph-demo.html
|
|
3
|
+
import { LitElement, html } from 'lit';
|
|
4
|
+
import { customElement, property, query } from 'lit/decorators.js';
|
|
5
|
+
import { InternalsAttached, internals } from '../../base/mixins/internals-attached.js';
|
|
6
|
+
import { loadingIndicatorStyles } from './loading-indicator-styles.css.js';
|
|
7
|
+
const STEP_MS = 650;
|
|
8
|
+
const FULL_ROTATION_MS = 4666;
|
|
9
|
+
const QUARTER_ROTATION = 90;
|
|
10
|
+
const TOTAL_POINTS = 240;
|
|
11
|
+
const CANVAS_SIZE = 640;
|
|
12
|
+
const RADIUS_BASE = CANVAS_SIZE / 2;
|
|
13
|
+
const CENTER = CANVAS_SIZE / 2;
|
|
14
|
+
export class M3LoadingIndicator extends InternalsAttached(LitElement) {
|
|
15
|
+
static{
|
|
16
|
+
this.styles = [
|
|
17
|
+
loadingIndicatorStyles
|
|
18
|
+
];
|
|
19
|
+
}
|
|
20
|
+
render() {
|
|
21
|
+
return html`<canvas
|
|
22
|
+
width="${CANVAS_SIZE}"
|
|
23
|
+
height="${CANVAS_SIZE}"
|
|
24
|
+
aria-hidden="true"
|
|
25
|
+
></canvas>`;
|
|
26
|
+
}
|
|
27
|
+
#ctx;
|
|
28
|
+
#animationFrame;
|
|
29
|
+
#startTime;
|
|
30
|
+
#color;
|
|
31
|
+
constructor(){
|
|
32
|
+
super(), this.contained = false, this.#animationFrame = 0, this.#startTime = 0, this.#color = '#ff0000', this.#animate = (now)=>{
|
|
33
|
+
if (this.#startTime === 0) {
|
|
34
|
+
this.#startTime = now;
|
|
35
|
+
}
|
|
36
|
+
const elapsed = now - this.#startTime;
|
|
37
|
+
const step = Math.floor(elapsed / STEP_MS);
|
|
38
|
+
const morphElapsed = elapsed % STEP_MS;
|
|
39
|
+
const progress = springProgress(morphElapsed);
|
|
40
|
+
const from = sampledSequence[step % sampledSequence.length];
|
|
41
|
+
const to = sampledSequence[(step + 1) % sampledSequence.length];
|
|
42
|
+
const stepRotation = step * QUARTER_ROTATION + progress * QUARTER_ROTATION;
|
|
43
|
+
const globalRotation = elapsed % FULL_ROTATION_MS / FULL_ROTATION_MS * 360;
|
|
44
|
+
this.#draw(from, to, progress, stepRotation + globalRotation, scalePulse(morphElapsed));
|
|
45
|
+
this.#animationFrame = requestAnimationFrame(this.#animate);
|
|
46
|
+
};
|
|
47
|
+
this[internals].role = 'progressbar';
|
|
48
|
+
this[internals].ariaValueMin = '0';
|
|
49
|
+
this[internals].ariaValueMax = '1';
|
|
50
|
+
}
|
|
51
|
+
firstUpdated() {
|
|
52
|
+
this.#ctx = this.$canvas.getContext('2d');
|
|
53
|
+
this.#cacheColors();
|
|
54
|
+
setInterval(this.#cacheColors.bind(this), 1000);
|
|
55
|
+
this.#animationFrame = requestAnimationFrame(this.#animate);
|
|
56
|
+
}
|
|
57
|
+
disconnectedCallback() {
|
|
58
|
+
super.disconnectedCallback();
|
|
59
|
+
cancelAnimationFrame(this.#animationFrame);
|
|
60
|
+
}
|
|
61
|
+
#cacheColors() {
|
|
62
|
+
const computed = getComputedStyle(this);
|
|
63
|
+
const color = computed.getPropertyValue(this.contained ? '--md-sys-color-on-primary-container' : '--md-sys-color-primary').trim();
|
|
64
|
+
if (color) this.#color = color;
|
|
65
|
+
}
|
|
66
|
+
#draw(from, to, progress, rotation, scale) {
|
|
67
|
+
if (!this.#ctx || !this.$canvas) return;
|
|
68
|
+
const ctx = this.#ctx;
|
|
69
|
+
ctx.clearRect(0, 0, this.$canvas.width, this.$canvas.height);
|
|
70
|
+
ctx.save();
|
|
71
|
+
ctx.translate(CENTER, CENTER);
|
|
72
|
+
ctx.scale(scale, scale);
|
|
73
|
+
ctx.rotate(rotation * Math.PI / 180);
|
|
74
|
+
ctx.translate(-CENTER, -CENTER);
|
|
75
|
+
ctx.beginPath();
|
|
76
|
+
from.points.forEach((point, i)=>{
|
|
77
|
+
const next = to.points[i];
|
|
78
|
+
const x = lerp(point.x, next.x, progress);
|
|
79
|
+
const y = lerp(point.y, next.y, progress);
|
|
80
|
+
if (i === 0) ctx.moveTo(x, y);
|
|
81
|
+
else ctx.lineTo(x, y);
|
|
82
|
+
});
|
|
83
|
+
ctx.closePath();
|
|
84
|
+
ctx.fillStyle = this.#color;
|
|
85
|
+
ctx.fill();
|
|
86
|
+
ctx.restore();
|
|
87
|
+
}
|
|
88
|
+
#animate;
|
|
89
|
+
}
|
|
90
|
+
_ts_decorate([
|
|
91
|
+
property({
|
|
92
|
+
type: Boolean,
|
|
93
|
+
reflect: true
|
|
94
|
+
})
|
|
95
|
+
], M3LoadingIndicator.prototype, "contained", void 0);
|
|
96
|
+
_ts_decorate([
|
|
97
|
+
query('canvas')
|
|
98
|
+
], M3LoadingIndicator.prototype, "$canvas", void 0);
|
|
99
|
+
M3LoadingIndicator = _ts_decorate([
|
|
100
|
+
customElement('md-loading')
|
|
101
|
+
], M3LoadingIndicator);
|
|
102
|
+
const lerp = (a, b, t)=>a + (b - a) * t;
|
|
103
|
+
const clamp = (v, lo, hi)=>Math.max(lo, Math.min(hi, v));
|
|
104
|
+
const dist = (a, b)=>Math.hypot(a.x - b.x, a.y - b.y);
|
|
105
|
+
const norm = (x, y, fallback = {
|
|
106
|
+
x: 1,
|
|
107
|
+
y: 0
|
|
108
|
+
})=>{
|
|
109
|
+
const len = Math.hypot(x, y);
|
|
110
|
+
return len < 1e-6 ? fallback : {
|
|
111
|
+
x: x / len,
|
|
112
|
+
y: y / len
|
|
113
|
+
};
|
|
114
|
+
};
|
|
115
|
+
const sequence = [
|
|
116
|
+
[
|
|
117
|
+
10,
|
|
118
|
+
0.85,
|
|
119
|
+
0.67,
|
|
120
|
+
0.75,
|
|
121
|
+
0.5
|
|
122
|
+
],
|
|
123
|
+
[
|
|
124
|
+
9,
|
|
125
|
+
0.85,
|
|
126
|
+
0.755,
|
|
127
|
+
0.8,
|
|
128
|
+
0.5
|
|
129
|
+
],
|
|
130
|
+
[
|
|
131
|
+
5,
|
|
132
|
+
0.85,
|
|
133
|
+
0.731,
|
|
134
|
+
0.45,
|
|
135
|
+
1
|
|
136
|
+
],
|
|
137
|
+
[
|
|
138
|
+
2,
|
|
139
|
+
0.85,
|
|
140
|
+
0.67,
|
|
141
|
+
0.8,
|
|
142
|
+
0.95
|
|
143
|
+
],
|
|
144
|
+
[
|
|
145
|
+
8,
|
|
146
|
+
0.85,
|
|
147
|
+
0.731,
|
|
148
|
+
0.6,
|
|
149
|
+
0.45
|
|
150
|
+
],
|
|
151
|
+
[
|
|
152
|
+
4,
|
|
153
|
+
0.925,
|
|
154
|
+
0.67,
|
|
155
|
+
1,
|
|
156
|
+
0.4
|
|
157
|
+
],
|
|
158
|
+
[
|
|
159
|
+
2,
|
|
160
|
+
0.9,
|
|
161
|
+
0.565,
|
|
162
|
+
0.8,
|
|
163
|
+
0.6
|
|
164
|
+
]
|
|
165
|
+
].map(([points, outerRadius, innerRadius, outerRoundness, innerRoundness])=>({
|
|
166
|
+
points,
|
|
167
|
+
outerRadius,
|
|
168
|
+
innerRadius,
|
|
169
|
+
outerRoundness,
|
|
170
|
+
innerRoundness
|
|
171
|
+
}));
|
|
172
|
+
function springProgress(ms) {
|
|
173
|
+
const t = ms / 1000;
|
|
174
|
+
const stiffness = 200;
|
|
175
|
+
const damping = 0.6;
|
|
176
|
+
const omega0 = Math.sqrt(stiffness);
|
|
177
|
+
const omegaD = omega0 * Math.sqrt(1 - damping * damping);
|
|
178
|
+
const displacement = Math.exp(-damping * omega0 * t) * (-Math.cos(omegaD * t) - damping * omega0 / omegaD * Math.sin(omegaD * t));
|
|
179
|
+
return clamp(1 + displacement, 0, 1);
|
|
180
|
+
}
|
|
181
|
+
function scalePulse(ms) {
|
|
182
|
+
const t = ms / STEP_MS;
|
|
183
|
+
const smooth = (p)=>p * p * (3 - 2 * p);
|
|
184
|
+
const outCubic = (p)=>1 - (1 - p) ** 3;
|
|
185
|
+
const segments = [
|
|
186
|
+
[
|
|
187
|
+
0,
|
|
188
|
+
0.14,
|
|
189
|
+
1,
|
|
190
|
+
0.985,
|
|
191
|
+
smooth
|
|
192
|
+
],
|
|
193
|
+
[
|
|
194
|
+
0.14,
|
|
195
|
+
0.46,
|
|
196
|
+
0.985,
|
|
197
|
+
1.04,
|
|
198
|
+
outCubic
|
|
199
|
+
],
|
|
200
|
+
[
|
|
201
|
+
0.46,
|
|
202
|
+
0.76,
|
|
203
|
+
1.04,
|
|
204
|
+
1,
|
|
205
|
+
smooth
|
|
206
|
+
]
|
|
207
|
+
];
|
|
208
|
+
const segment = segments.find(([start, end])=>t < end && t >= start);
|
|
209
|
+
if (!segment) return 1;
|
|
210
|
+
const [start, end, from, to, ease] = segment;
|
|
211
|
+
return lerp(from, to, ease((t - start) / (end - start)));
|
|
212
|
+
}
|
|
213
|
+
function starGeometry(shape) {
|
|
214
|
+
const points = Math.max(2, Math.floor(shape.points));
|
|
215
|
+
const count = points * 2;
|
|
216
|
+
const anchors = Array.from({
|
|
217
|
+
length: count
|
|
218
|
+
}, (_, i)=>{
|
|
219
|
+
const outer = i % 2 === 0;
|
|
220
|
+
const radius = (outer ? shape.outerRadius : shape.innerRadius) * RADIUS_BASE;
|
|
221
|
+
const angle = i * Math.PI / points;
|
|
222
|
+
return {
|
|
223
|
+
x: CENTER + Math.cos(angle) * radius,
|
|
224
|
+
y: CENTER + Math.sin(angle) * radius,
|
|
225
|
+
outer
|
|
226
|
+
};
|
|
227
|
+
});
|
|
228
|
+
const tangents = anchors.map((_, i)=>{
|
|
229
|
+
const prev = anchors[(i - 1 + count) % count];
|
|
230
|
+
const next = anchors[(i + 1) % count];
|
|
231
|
+
return norm(next.x - prev.x, next.y - prev.y);
|
|
232
|
+
});
|
|
233
|
+
const lengths = anchors.map((anchor, i)=>{
|
|
234
|
+
const prev = anchors[(i - 1 + count) % count];
|
|
235
|
+
const next = anchors[(i + 1) % count];
|
|
236
|
+
const roundness = anchor.outer ? shape.outerRoundness : shape.innerRoundness;
|
|
237
|
+
return Math.max(0, roundness) * Math.min(dist(anchor, prev), dist(anchor, next)) * 0.5;
|
|
238
|
+
});
|
|
239
|
+
const handles = anchors.map((anchor, i)=>{
|
|
240
|
+
const tangent = tangents[i];
|
|
241
|
+
const length = lengths[i];
|
|
242
|
+
return {
|
|
243
|
+
in: {
|
|
244
|
+
x: anchor.x - tangent.x * length,
|
|
245
|
+
y: anchor.y - tangent.y * length
|
|
246
|
+
},
|
|
247
|
+
out: {
|
|
248
|
+
x: anchor.x + tangent.x * length,
|
|
249
|
+
y: anchor.y + tangent.y * length
|
|
250
|
+
}
|
|
251
|
+
};
|
|
252
|
+
});
|
|
253
|
+
return {
|
|
254
|
+
anchors,
|
|
255
|
+
handles
|
|
256
|
+
};
|
|
257
|
+
}
|
|
258
|
+
function cubic(p0, c1, c2, p1, t) {
|
|
259
|
+
const inv = 1 - t;
|
|
260
|
+
return {
|
|
261
|
+
x: inv ** 3 * p0.x + 3 * inv * inv * t * c1.x + 3 * inv * t * t * c2.x + t ** 3 * p1.x,
|
|
262
|
+
y: inv ** 3 * p0.y + 3 * inv * inv * t * c1.y + 3 * inv * t * t * c2.y + t ** 3 * p1.y
|
|
263
|
+
};
|
|
264
|
+
}
|
|
265
|
+
function resample(points) {
|
|
266
|
+
const lengths = points.map((point, i)=>dist(point, points[(i + 1) % points.length]));
|
|
267
|
+
const perimeter = lengths.reduce((sum, length)=>sum + length, 0);
|
|
268
|
+
const sampled = [];
|
|
269
|
+
let edge = 0;
|
|
270
|
+
let consumed = 0;
|
|
271
|
+
for(let i = 0; i < TOTAL_POINTS; i++){
|
|
272
|
+
const target = perimeter * i / TOTAL_POINTS;
|
|
273
|
+
while(consumed + lengths[edge] < target && edge < lengths.length - 1){
|
|
274
|
+
consumed += lengths[edge++];
|
|
275
|
+
}
|
|
276
|
+
const point = points[edge];
|
|
277
|
+
const next = points[(edge + 1) % points.length];
|
|
278
|
+
const t = (target - consumed) / (lengths[edge] || 1);
|
|
279
|
+
sampled.push({
|
|
280
|
+
x: lerp(point.x, next.x, t),
|
|
281
|
+
y: lerp(point.y, next.y, t)
|
|
282
|
+
});
|
|
283
|
+
}
|
|
284
|
+
return sampled;
|
|
285
|
+
}
|
|
286
|
+
function sampleShape(shape) {
|
|
287
|
+
const { anchors, handles } = starGeometry(shape);
|
|
288
|
+
const dense = [];
|
|
289
|
+
anchors.forEach((anchor, i)=>{
|
|
290
|
+
const next = (i + 1) % anchors.length;
|
|
291
|
+
for(let step = 0; step < 18; step++){
|
|
292
|
+
dense.push(cubic(anchor, handles[i].out, handles[next].in, anchors[next], step / 18));
|
|
293
|
+
}
|
|
294
|
+
});
|
|
295
|
+
return {
|
|
296
|
+
points: resample(dense)
|
|
297
|
+
};
|
|
298
|
+
}
|
|
299
|
+
function shifted(points, offset) {
|
|
300
|
+
return points.map((_, i)=>points[(i + offset) % points.length]);
|
|
301
|
+
}
|
|
302
|
+
function alignTo(from, to) {
|
|
303
|
+
let bestOffset = 0;
|
|
304
|
+
let bestScore = Infinity;
|
|
305
|
+
for(let offset = 0; offset < to.points.length; offset++){
|
|
306
|
+
let score = 0;
|
|
307
|
+
for(let i = 0; i < from.points.length; i += 4){
|
|
308
|
+
const point = to.points[(i + offset) % to.points.length];
|
|
309
|
+
score += (from.points[i].x - point.x) ** 2 + (from.points[i].y - point.y) ** 2;
|
|
310
|
+
}
|
|
311
|
+
if (score < bestScore) {
|
|
312
|
+
bestScore = score;
|
|
313
|
+
bestOffset = offset;
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
return {
|
|
317
|
+
...to,
|
|
318
|
+
points: shifted(to.points, bestOffset)
|
|
319
|
+
};
|
|
320
|
+
}
|
|
321
|
+
const sampledSequence = sequence.map(sampleShape).reduce((aligned, shape)=>{
|
|
322
|
+
aligned.push(aligned.length ? alignTo(aligned.at(-1), shape) : shape);
|
|
323
|
+
return aligned;
|
|
324
|
+
}, []);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
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-
|
|
2
|
+
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}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const sliderStyles = css`:host{--_target-size:48px;--_half-target:calc(var(--_target-size) / 2);--_handle-width-start:var(--md-slider-handle-width,4px);--_handle-width-end:var(--md-slider-handle-width,4px);--_handle-height:var(--md-slider-handle-height,44px);--_handle-shape:var(--md-slider-handle-shape,20px);--_handle-margin:6px;--_tick-size:var(--md-slider-tick-size,2px);--_track-shape:8px;--_track-height:var(--md-slider-track-height,16px);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-
|
|
2
|
+
export const sliderStyles = css`:host{--_target-size:48px;--_half-target:calc(var(--_target-size) / 2);--_handle-width-start:var(--md-slider-handle-width,4px);--_handle-width-end:var(--md-slider-handle-width,4px);--_handle-height:var(--md-slider-handle-height,44px);--_handle-shape:var(--md-slider-handle-shape,20px);--_handle-margin:6px;--_tick-size:var(--md-slider-tick-size,2px);--_track-shape:8px;--_track-height:var(--md-slider-track-height,16px);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}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
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-
|
|
2
|
+
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
CHANGED
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
|
|
4
4
|
--md-sys-typography-display-large: 400 3.5625rem / 4rem
|
|
5
5
|
var(--md-sys-typography-family);
|
|
6
|
-
--md-sys-typography-display-medium: 400 2.8125rem / 3.
|
|
6
|
+
--md-sys-typography-display-medium: 400 2.8125rem / 3.25rem
|
|
7
7
|
var(--md-sys-typography-family);
|
|
8
|
-
--md-sys-typography-display-small: 400 2.25rem /
|
|
8
|
+
--md-sys-typography-display-small: 400 2.25rem / 2.75rem
|
|
9
9
|
var(--md-sys-typography-family);
|
|
10
|
-
--md-sys-typography-headline-large: 400
|
|
10
|
+
--md-sys-typography-headline-large: 400 2rem / 2.5rem
|
|
11
11
|
var(--md-sys-typography-family);
|
|
12
|
-
--md-sys-typography-headline-medium: 400
|
|
12
|
+
--md-sys-typography-headline-medium: 400 1.75rem / 2.25rem
|
|
13
13
|
var(--md-sys-typography-family);
|
|
14
|
-
--md-sys-typography-headline-small: 400
|
|
14
|
+
--md-sys-typography-headline-small: 400 1.5rem / 2rem
|
|
15
15
|
var(--md-sys-typography-family);
|
|
16
16
|
--md-sys-typography-title-large: 400 1.375rem / 1.75rem
|
|
17
17
|
var(--md-sys-typography-family);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
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:var(--md-sys-motion-
|
|
2
|
+
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}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
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:
|
|
2
|
+
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}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
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-
|
|
2
|
+
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)}`;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
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}`;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
import { customElement } from 'lit/decorators.js';
|
|
4
|
+
import { Button } from '../../base/button.js';
|
|
5
|
+
import { buttonStyles } from './button-styles.css.js';
|
|
6
|
+
export class Win98Button extends Button {
|
|
7
|
+
static{
|
|
8
|
+
this.styles = [
|
|
9
|
+
...super.styles,
|
|
10
|
+
buttonStyles
|
|
11
|
+
];
|
|
12
|
+
}
|
|
13
|
+
render() {
|
|
14
|
+
return html`
|
|
15
|
+
<slot></slot>
|
|
16
|
+
`;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
Win98Button = _ts_decorate([
|
|
20
|
+
customElement('win98-button')
|
|
21
|
+
], Win98Button);
|
package/src/m3/system/motion.css
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
/* std: standard, exp: expressive, mot: motion */
|
|
3
|
-
--md-sys-motion-exp-spatial-fast: cubic-bezier(0.42, 1.67, 0.21, 0.9);
|
|
4
|
-
--md-sys-motion-exp-spatial-fast-duration: 350ms;
|
|
5
|
-
--md-sys-motion-exp-spatial-default: cubic-bezier(0.38, 1.21, 0.22, 1);
|
|
6
|
-
--md-sys-motion-exp-spatial-default-duration: 500ms;
|
|
7
|
-
--md-sys-motion-exp-spatial-slow: cubic-bezier(0.39, 1.29, 0.35, 0.98);
|
|
8
|
-
--md-sys-motion-exp-spatial-slow-duration: 650ms;
|
|
9
|
-
|
|
10
|
-
--md-sys-motion-exp-effects-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
|
|
11
|
-
--md-sys-motion-exp-effects-fast-duration: 150ms;
|
|
12
|
-
--md-sys-motion-exp-effects-default: cubic-bezier(0.34, 0.8, 0.34, 1);
|
|
13
|
-
--md-sys-motion-exp-effects-default-duration: 200ms;
|
|
14
|
-
--md-sys-motion-exp-effects-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
|
|
15
|
-
--md-sys-motion-exp-effects-slow-duration: 300ms;
|
|
16
|
-
|
|
17
|
-
--md-sys-motion-std-spatial-fast: cubic-bezier(0.27, 1.06, 0.18, 1);
|
|
18
|
-
--md-sys-motion-std-spatial-fast-duration: 350ms;
|
|
19
|
-
--md-sys-motion-std-spatial-default: cubic-bezier(0.27, 1.06, 0.18, 1);
|
|
20
|
-
--md-sys-motion-std-spatial-default-duration: 500ms;
|
|
21
|
-
--md-sys-motion-std-spatial-slow: cubic-bezier(0.27, 1.06, 0.18, 1);
|
|
22
|
-
--md-sys-motion-std-spatial-slow-duration: 750ms;
|
|
23
|
-
|
|
24
|
-
--md-sys-motion-std-effects-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
|
|
25
|
-
--md-sys-motion-std-effects-fast-duration: 150ms;
|
|
26
|
-
--md-sys-motion-std-effects-default: cubic-bezier(0.34, 0.8, 0.34, 1);
|
|
27
|
-
--md-sys-motion-std-effects-default-duration: 200ms;
|
|
28
|
-
--md-sys-motion-std-effects-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
|
|
29
|
-
--md-sys-motion-std-effects-slow-duration: 300ms;
|
|
30
|
-
}
|