@lit-material/button 0.2.0 → 0.3.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
CHANGED
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
{
|
|
130
130
|
"kind": "variable",
|
|
131
131
|
"name": "styles",
|
|
132
|
-
"default": "css` :host { display: inline-flex; outline: none; vertical-align: top; -webkit-tap-highlight-color: transparent; } :host([disabled]) { pointer-events: none; } .button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; height: var(--lit-material-button-height, 40px); min-width: 64px; padding: 0 var(--lit-material-button-padding-inline, 24px); border: none; border-start-start-radius: var(--lit-material-button-shape-start, var(--lit-material-button-shape, var(--md-sys-shape-corner-full, 9999px))); border-end-start-radius: var(--lit-material-button-shape-start, var(--lit-material-button-shape, var(--md-sys-shape-corner-full, 9999px))); border-start-end-radius: var(--lit-material-button-shape-end, var(--lit-material-button-shape, var(--md-sys-shape-corner-full, 9999px))); border-end-end-radius: var(--lit-material-button-shape-end, var(--lit-material-button-shape, var(--md-sys-shape-corner-full, 9999px))); background-color: transparent; cursor: pointer; font-family: var(--md-sys-typescale-label-large-font, Roboto, system-ui, sans-serif); font-size: var(--md-sys-typescale-label-large-size, 0.875rem); font-weight: var(--md-sys-typescale-label-large-weight, 500); line-height: var(--md-sys-typescale-label-large-line-height, 1.25rem); letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.00625rem); text-decoration: none; -webkit-appearance: none; appearance: none; transition: box-shadow 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)), background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)), transform 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)); } .button:active { transform: scale(var(--lit-material-button-pressed-scale, 1)); } @media (prefers-reduced-motion: reduce) { .button:active { transform: none; } } .button:disabled, .button[aria-disabled=\"true\"] { cursor: default; } .state-layer { position: absolute; inset: 0; border-radius: inherit; background-color: currentColor; opacity: 0; pointer-events: none; transition: opacity 100ms linear; } .button:hover .state-layer { opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08); } .state-layer[data-pressed] { opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.1); } .focus-ring { position: absolute; inset: -2px; border-radius: inherit; outline: 3px solid var(--md-sys-color-secondary, #625b71); outline-offset: 2px; pointer-events: none; } .focus-ring[hidden] { display: none; } slot.icon::slotted(*) { width: 18px; height: 18px; } .label { position: relative; } /* Filled (default): solid primary container. */ :host([variant=\"filled\"]) .button, :host(:not([variant])) .button { background-color: var(--md-sys-color-primary, #6750a4); color: var(--md-sys-color-on-primary, #ffffff); } /* Tonal: solid secondary container, lower emphasis than filled. */ :host([variant=\"tonal\"]) .button { background-color: var(--md-sys-color-secondary-container, #e8def8); color: var(--md-sys-color-on-secondary-container, #1d192b); } /* Elevated: surface-colored container that floats above the page via shadow. */ :host([variant=\"elevated\"]) .button { background-color: var(--md-sys-color-surface-container-low, #f7f2fa); color: var(--md-sys-color-primary, #6750a4); box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.3)); } :host([variant=\"elevated\"]) .button:hover { box-shadow: var(--md-sys-elevation-level2, 0 1px 3px rgba(0, 0, 0, 0.3)); } /* Outlined: transparent container with a visible border, for medium emphasis. */ :host([variant=\"outlined\"]) .button { background-color: transparent; color: var(--md-sys-color-primary, #6750a4); border: 1px solid var(--md-sys-color-outline, #79747e); } :host([variant=\"outlined\"][disabled]) .button { border-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 12%, transparent); } /* Text: no container at all, lowest emphasis. */ :host([variant=\"text\"]) .button { background-color: transparent; color: var(--md-sys-color-primary, #6750a4); padding: 0 var(--lit-material-button-text-padding-inline, 12px); } /* Disabled treatment is identical across variants: on-surface at fixed opacities. */ :host([disabled]) .button { background-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 12%, transparent); color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 38%, transparent); box-shadow: none; } :host([variant=\"outlined\"][disabled]) .button, :host([variant=\"text\"][disabled]) .button { background-color: transparent; } `"
|
|
132
|
+
"default": "css` :host { display: inline-flex; outline: none; vertical-align: top; -webkit-tap-highlight-color: transparent; } :host([hidden]) { display: none; } :host([disabled]) { pointer-events: none; } .button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; height: var(--lit-material-button-height, 40px); min-width: 64px; padding: 0 var(--lit-material-button-padding-inline, 24px); border: none; border-start-start-radius: var(--lit-material-button-shape-start, var(--lit-material-button-shape, var(--md-sys-shape-corner-full, 9999px))); border-end-start-radius: var(--lit-material-button-shape-start, var(--lit-material-button-shape, var(--md-sys-shape-corner-full, 9999px))); border-start-end-radius: var(--lit-material-button-shape-end, var(--lit-material-button-shape, var(--md-sys-shape-corner-full, 9999px))); border-end-end-radius: var(--lit-material-button-shape-end, var(--lit-material-button-shape, var(--md-sys-shape-corner-full, 9999px))); background-color: transparent; cursor: pointer; font-family: var(--md-sys-typescale-label-large-font, Roboto, system-ui, sans-serif); font-size: var(--md-sys-typescale-label-large-size, 0.875rem); font-weight: var(--md-sys-typescale-label-large-weight, 500); line-height: var(--md-sys-typescale-label-large-line-height, 1.25rem); letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.00625rem); text-decoration: none; -webkit-appearance: none; appearance: none; transition: box-shadow 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)), background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)), transform 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)); } .button:active { transform: scale(var(--lit-material-button-pressed-scale, 1)); } @media (prefers-reduced-motion: reduce) { .button:active { transform: none; } } .button:disabled, .button[aria-disabled=\"true\"] { cursor: default; } .state-layer { position: absolute; inset: 0; border-radius: inherit; background-color: currentColor; opacity: 0; pointer-events: none; transition: opacity 100ms linear; } .button:hover .state-layer { opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08); } .state-layer[data-pressed] { opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.1); } .focus-ring { position: absolute; inset: -2px; border-radius: inherit; outline: 3px solid var(--md-sys-color-secondary, #625b71); outline-offset: 2px; pointer-events: none; } .focus-ring[hidden] { display: none; } slot.icon::slotted(*) { width: 18px; height: 18px; } .label { position: relative; } /* Filled (default): solid primary container. */ :host([variant=\"filled\"]) .button, :host(:not([variant])) .button { background-color: var(--md-sys-color-primary, #6750a4); color: var(--md-sys-color-on-primary, #ffffff); } /* Tonal: solid secondary container, lower emphasis than filled. */ :host([variant=\"tonal\"]) .button { background-color: var(--md-sys-color-secondary-container, #e8def8); color: var(--md-sys-color-on-secondary-container, #1d192b); } /* Elevated: surface-colored container that floats above the page via shadow. */ :host([variant=\"elevated\"]) .button { background-color: var(--md-sys-color-surface-container-low, #f7f2fa); color: var(--md-sys-color-primary, #6750a4); box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.3)); } :host([variant=\"elevated\"]) .button:hover { box-shadow: var(--md-sys-elevation-level2, 0 1px 3px rgba(0, 0, 0, 0.3)); } /* Outlined: transparent container with a visible border, for medium emphasis. */ :host([variant=\"outlined\"]) .button { background-color: transparent; color: var(--md-sys-color-primary, #6750a4); border: 1px solid var(--md-sys-color-outline, #79747e); } :host([variant=\"outlined\"][disabled]) .button { border-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 12%, transparent); } /* Text: no container at all, lowest emphasis. */ :host([variant=\"text\"]) .button { background-color: transparent; color: var(--md-sys-color-primary, #6750a4); padding: 0 var(--lit-material-button-text-padding-inline, 12px); } /* Disabled treatment is identical across variants: on-surface at fixed opacities. */ :host([disabled]) .button { background-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 12%, transparent); color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 38%, transparent); box-shadow: none; } :host([variant=\"outlined\"][disabled]) .button, :host([variant=\"text\"][disabled]) .button { background-color: transparent; } `"
|
|
133
133
|
}
|
|
134
134
|
],
|
|
135
135
|
"exports": [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-styles.d.ts","sourceRoot":"","sources":["../src/button-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"button-styles.d.ts","sourceRoot":"","sources":["../src/button-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA2JlB,CAAC"}
|
package/dist/button-styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-styles.js","sourceRoot":"","sources":["../src/button-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"button-styles.js","sourceRoot":"","sources":["../src/button-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2JxB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lit-material/button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Material Design 3 button web component (filled, outlined, text, elevated, tonal).",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": {
|
|
@@ -30,6 +30,14 @@
|
|
|
30
30
|
".": {
|
|
31
31
|
"types": "./dist/index.d.ts",
|
|
32
32
|
"default": "./dist/index.js"
|
|
33
|
+
},
|
|
34
|
+
"./button.js": {
|
|
35
|
+
"types": "./dist/button.d.ts",
|
|
36
|
+
"default": "./dist/button.js"
|
|
37
|
+
},
|
|
38
|
+
"./action-list.js": {
|
|
39
|
+
"types": "./dist/action-list.d.ts",
|
|
40
|
+
"default": "./dist/action-list.js"
|
|
33
41
|
}
|
|
34
42
|
},
|
|
35
43
|
"files": [
|
|
@@ -41,8 +49,8 @@
|
|
|
41
49
|
},
|
|
42
50
|
"dependencies": {
|
|
43
51
|
"lit": "^3.2.0",
|
|
44
|
-
"@lit-material/core": "0.0
|
|
45
|
-
"@lit-material/tokens": "0.0
|
|
52
|
+
"@lit-material/core": "0.1.0",
|
|
53
|
+
"@lit-material/tokens": "0.1.0"
|
|
46
54
|
},
|
|
47
55
|
"devDependencies": {
|
|
48
56
|
"@lit-labs/ssr": "^3.3.1",
|