@vollowx/seele 0.8.12 → 0.9.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/custom-elements.json +6 -24
- package/package.json +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-styles.css.js +1 -1
- package/src/m3/fab-styles.css.js +1 -1
- package/src/m3/fab.js +1 -5
- 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/custom-elements.json
CHANGED
|
@@ -108,9 +108,9 @@
|
|
|
108
108
|
"kind": "field",
|
|
109
109
|
"name": "size",
|
|
110
110
|
"type": {
|
|
111
|
-
"text": "'
|
|
111
|
+
"text": "'default' | 'medium' | 'large'"
|
|
112
112
|
},
|
|
113
|
-
"default": "'
|
|
113
|
+
"default": "'default'",
|
|
114
114
|
"attribute": "size",
|
|
115
115
|
"reflects": true
|
|
116
116
|
},
|
|
@@ -118,47 +118,29 @@
|
|
|
118
118
|
"kind": "field",
|
|
119
119
|
"name": "color",
|
|
120
120
|
"type": {
|
|
121
|
-
"text": "| 'surface'\r\n | 'primary'\r\n | 'secondary'\r\n | 'tertiary'"
|
|
121
|
+
"text": "| 'surface'\r\n | 'primary-container'\r\n | 'secondary-container'\r\n | 'tertiary-container'\r\n | 'primary'\r\n | 'secondary'\r\n | 'tertiary'"
|
|
122
122
|
},
|
|
123
123
|
"default": "'surface'",
|
|
124
124
|
"attribute": "color",
|
|
125
125
|
"reflects": true
|
|
126
|
-
},
|
|
127
|
-
{
|
|
128
|
-
"kind": "field",
|
|
129
|
-
"name": "lowered",
|
|
130
|
-
"type": {
|
|
131
|
-
"text": "boolean"
|
|
132
|
-
},
|
|
133
|
-
"default": "false",
|
|
134
|
-
"attribute": "lowered",
|
|
135
|
-
"reflects": true
|
|
136
126
|
}
|
|
137
127
|
],
|
|
138
128
|
"attributes": [
|
|
139
129
|
{
|
|
140
130
|
"name": "size",
|
|
141
131
|
"type": {
|
|
142
|
-
"text": "'
|
|
132
|
+
"text": "'default' | 'medium' | 'large'"
|
|
143
133
|
},
|
|
144
|
-
"default": "'
|
|
134
|
+
"default": "'default'",
|
|
145
135
|
"fieldName": "size"
|
|
146
136
|
},
|
|
147
137
|
{
|
|
148
138
|
"name": "color",
|
|
149
139
|
"type": {
|
|
150
|
-
"text": "| 'surface'\r\n | 'primary'\r\n | 'secondary'\r\n | 'tertiary'"
|
|
140
|
+
"text": "| 'surface'\r\n | 'primary-container'\r\n | 'secondary-container'\r\n | 'tertiary-container'\r\n | 'primary'\r\n | 'secondary'\r\n | 'tertiary'"
|
|
151
141
|
},
|
|
152
142
|
"default": "'surface'",
|
|
153
143
|
"fieldName": "color"
|
|
154
|
-
},
|
|
155
|
-
{
|
|
156
|
-
"name": "lowered",
|
|
157
|
-
"type": {
|
|
158
|
-
"text": "boolean"
|
|
159
|
-
},
|
|
160
|
-
"default": "false",
|
|
161
|
-
"fieldName": "lowered"
|
|
162
144
|
}
|
|
163
145
|
],
|
|
164
146
|
"superclass": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vollowx/seele",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"description": "Standard Extensible Elements. A web components library that can be styled and extended freely, pre-providing components in Material Design 3.",
|
|
5
5
|
"author": "vollowx",
|
|
6
6
|
"license": "MIT",
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const commonButtonStyles = css `:host{--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);gap:var(--_gap);height:var(--_h);min-width:64px;padding-inline:var(--_pad);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)}:host([trailingicon]){flex-direction:row-reverse}:host([variant=elevated]){--_background-color:var(--md-sys-color-surface-container-low);--_text-color:var(--_color);box-shadow:var(--md-sys-elevation-shadow-1)}:host([variant=outlined]){padding-inline:calc(var(--_pad) - 1px)}:host([variant=text]){padding-inline:calc(var(--_pad)/
|
|
2
|
+
export const commonButtonStyles = css `:host{--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);gap:var(--_gap);height:var(--_h);min-width:64px;padding-inline:var(--_pad);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)}:host([trailingicon]){flex-direction:row-reverse}:host([variant=elevated]){--_background-color:var(--md-sys-color-surface-container-low);--_text-color:var(--_color);box-shadow:var(--md-sys-elevation-shadow-1)}:host([variant=outlined]){padding-inline:calc(var(--_pad) - 1px)}:host([variant=text]){padding-inline:calc(var(--_pad)/4*3)}@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)}}:host(:disabled),:host([variant=outlined]:state(checked):disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:10%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;--_outline-color:var(--md-sys-color-on-surface);--_outline-opacity:10%;box-shadow:none;pointer-events:none}[part~=icon]{fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const iconButtonStyles = css `:host{--_icon-size:24px;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);height:var(--_h);transition:border-radius var(--md-sys-motion-std-effects-slow-duration)var(--md-sys-motion-std-effects-slow);width:var(--_h)}:host([variant=text]){--_color:var(--md-sys-color-on-surface-variant)}:host([variant=text]:state(checked):not(:disabled)){--_text-color:var(--md-sys-color-primary)}:host([width=narrow]){width:var(--
|
|
2
|
+
export const iconButtonStyles = css `:host{--_icon-size:24px;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);height:var(--_h);transition:border-radius var(--md-sys-motion-std-effects-slow-duration)var(--md-sys-motion-std-effects-slow);width:var(--_h)}:host([variant=text]){--_color:var(--md-sys-color-on-surface-variant)}:host([variant=text]:state(checked):not(:disabled)){--_text-color:var(--md-sys-color-primary)}:host([width=narrow]){width:var(--_wn)}:host([width=wide]){width:var(--_ww)}:host(:disabled),:host([variant=outlined]:state(checked):disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:10%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;--_outline-color:var(--md-sys-color-on-surface);--_outline-opacity:10%;pointer-events:none}::slotted(*){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const sharedButtonStyles = css `:host{--_on-color:var(--md-sys-color-on-primary);--_color:var(--md-sys-color-primary);--_h:40px;--
|
|
2
|
+
export const sharedButtonStyles = css `:host{--_on-color:var(--md-sys-color-on-primary);--_color:var(--md-sys-color-primary);--_h:40px;--_wn:32px;--_ww:52px;--_icon-size:20px;--_pad:16px;--_gap:8px;--_rad-sq:12px;--_rad-pr:8px;--_text-color:var(--_on-color);--_background-color:var(--_color);--_outline-color:var(--md-sys-color-outline-variant);box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;vertical-align:top;outline:0;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}:host([size=xsmall]){--_h:32px;--_wn:28px;--_ww:40px;--_pad:12px;--_gap:4px}:host([size=medium]){--_h:56px;--_wn:48px;--_ww:72px;--_icon-size:24px;--_pad:24px;--_gap:8px;--_rad-sq:16px;--_rad-pr:12px;font:var(--md-sys-typography-title-medium)}:host([size=large]){--_h:96px;--_wn:64px;--_ww:128px;--_icon-size:32px;--_pad:48px;--_gap:12px;--_rad-sq:28px;--_rad-pr:16px;font:var(--md-sys-typography-headline-small)}:host([size=xlarge]){--_h:136px;--_wn:104px;--_ww:184px;--_icon-size:40px;--_pad:64px;--_gap:16px;--_rad-sq:28px;--_rad-pr:16px;font:var(--md-sys-typography-headline-medium)}:host([color=secondary]){--_on-color:var(--md-sys-color-on-secondary);--_color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_on-color:var(--md-sys-color-on-tertiary);--_color:var(--md-sys-color-tertiary)}:host([variant=tonal]){--_background-color:var(--md-sys-color-secondary-container);--_text-color:var(--md-sys-color-on-secondary-container)}:host([variant=outlined]){--_background-color:transparent;--_text-color:var(--md-sys-color-on-surface-variant);--md-focus-ring-offset:3px;border-color:color-mix(in srgb,var(--_outline-color)var(--_outline-opacity,100%),transparent);box-shadow:none;border-style:solid;border-width:1px}:host([variant=outlined]:disabled){--_background-color:var(--md-sys-color-outline)}:host([variant=text]){--_text-color:var(--_color);--_background-color:transparent!important}:host([shape=square]){--md-focus-ring-shape:var(--_rad-sq);border-radius:var(--_rad-sq)}:host(:active){--md-focus-ring-shape:var(--_rad-pr);border-radius:var(--_rad-pr)}`;
|
package/src/m3/fab-styles.css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const fabStyles = css `:host{--_text-color:var(--md-sys-color-primary);--_background-color:var(--md-sys-color-surface-container-high);--_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([lowered]){--_background-color:var(--md-sys-color-surface-container-low);box-shadow:var(--md-sys-elevation-shadow-1)}:host([size=
|
|
2
|
+
export const fabStyles = css `:host{--md-focus-ring-shape:var(--_border-radius);--_text-color:var(--md-sys-color-primary);--_background-color:var(--md-sys-color-surface-container-high);--_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([lowered]){--_background-color:var(--md-sys-color-surface-container-low);box-shadow:var(--md-sys-elevation-shadow-1)}: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=primary]){--_text-color:var(--md-sys-color-on-primary);--_background-color:var(--md-sys-color-primary)}: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(: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/fab.js
CHANGED
|
@@ -18,9 +18,8 @@ import { targetStyles } from './target-styles.css.js';
|
|
|
18
18
|
let M3FAB = class M3FAB extends Button {
|
|
19
19
|
constructor() {
|
|
20
20
|
super(...arguments);
|
|
21
|
-
this.size = '
|
|
21
|
+
this.size = 'default';
|
|
22
22
|
this.color = 'surface';
|
|
23
|
-
this.lowered = false;
|
|
24
23
|
}
|
|
25
24
|
static { this.styles = [...super.styles, targetStyles, fabStyles]; }
|
|
26
25
|
render() {
|
|
@@ -39,9 +38,6 @@ __decorate([
|
|
|
39
38
|
__decorate([
|
|
40
39
|
property({ reflect: true })
|
|
41
40
|
], M3FAB.prototype, "color", void 0);
|
|
42
|
-
__decorate([
|
|
43
|
-
property({ type: Boolean, reflect: true })
|
|
44
|
-
], M3FAB.prototype, "lowered", void 0);
|
|
45
41
|
M3FAB = __decorate([
|
|
46
42
|
customElement('md-fab')
|
|
47
43
|
], M3FAB);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const fieldStyles = css `:host{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;flex:1;align-items:center;
|
|
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-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,:host([haslabel]:not([focused]):not([populated])) ::slotted(textarea)::placeholder{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-exp-effects-default-duration)var(--md-sys-motion-exp-effects-default);border-radius:4px 4px 0 0;padding:0 16px}:host([haslabel])
|
|
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-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)}`;
|
|
@@ -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-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:
|
|
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-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-end-end-radius:0;border-radius:inherit;border-inline-end:none;border-start-end-radius:0;width:12px}.outline-end{border-end-start-radius:0;border-radius:inherit;border-inline-start:none;border-start-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)}`;
|