@m3e/button 1.0.0-rc.1
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/LICENSE +22 -0
- package/README.md +193 -0
- package/cem.config.mjs +16 -0
- package/demo/index.html +105 -0
- package/dist/css-custom-data.json +1582 -0
- package/dist/custom-elements.json +1753 -0
- package/dist/html-custom-data.json +83 -0
- package/dist/index.js +1781 -0
- package/dist/index.js.map +1 -0
- package/dist/index.min.js +468 -0
- package/dist/index.min.js.map +1 -0
- package/dist/src/ButtonElement.d.ts +429 -0
- package/dist/src/ButtonElement.d.ts.map +1 -0
- package/dist/src/ButtonShape.d.ts +3 -0
- package/dist/src/ButtonShape.d.ts.map +1 -0
- package/dist/src/ButtonSize.d.ts +3 -0
- package/dist/src/ButtonSize.d.ts.map +1 -0
- package/dist/src/ButtonVariant.d.ts +3 -0
- package/dist/src/ButtonVariant.d.ts.map +1 -0
- package/dist/src/index.d.ts +5 -0
- package/dist/src/index.d.ts.map +1 -0
- package/dist/src/styles/ButtonSizeStyle.d.ts +7 -0
- package/dist/src/styles/ButtonSizeStyle.d.ts.map +1 -0
- package/dist/src/styles/ButtonSizeToken.d.ts +27 -0
- package/dist/src/styles/ButtonSizeToken.d.ts.map +1 -0
- package/dist/src/styles/ButtonStyle.d.ts +7 -0
- package/dist/src/styles/ButtonStyle.d.ts.map +1 -0
- package/dist/src/styles/ButtonVariantStyle.d.ts +7 -0
- package/dist/src/styles/ButtonVariantStyle.d.ts.map +1 -0
- package/dist/src/styles/ButtonVariantToken.d.ts +75 -0
- package/dist/src/styles/ButtonVariantToken.d.ts.map +1 -0
- package/dist/src/styles/index.d.ts +4 -0
- package/dist/src/styles/index.d.ts.map +1 -0
- package/eslint.config.mjs +13 -0
- package/package.json +48 -0
- package/rollup.config.js +32 -0
- package/src/ButtonElement.ts +629 -0
- package/src/ButtonShape.ts +2 -0
- package/src/ButtonSize.ts +2 -0
- package/src/ButtonVariant.ts +2 -0
- package/src/index.ts +4 -0
- package/src/styles/ButtonSizeStyle.ts +102 -0
- package/src/styles/ButtonSizeToken.ts +180 -0
- package/src/styles/ButtonStyle.ts +191 -0
- package/src/styles/ButtonVariantStyle.ts +170 -0
- package/src/styles/ButtonVariantToken.ts +1165 -0
- package/src/styles/index.ts +3 -0
- package/tsconfig.json +9 -0
|
@@ -0,0 +1,468 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license MIT
|
|
3
|
+
* Copyright (c) 2025 matraic
|
|
4
|
+
* See LICENSE file in the project root for full license text.
|
|
5
|
+
*/
|
|
6
|
+
import{unsafeCSS as e,css as t,LitElement as o,nothing as r,html as a}from"lit";import{DesignToken as l,KeyboardClick as n,LinkButton as s,FormSubmitter as i,Focusable as c,DisabledInteractive as d,Disabled as u,AttachInternals as b,Role as v,ResizeController as h,FocusController as p,PressedController as m,renderPseudoLink as y,debounce as $,hasAssignedNodes as f}from"@m3e/core";function g(e,t,o,r){var a,l=arguments.length,n=l<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(n=(l<3?a(n):l>3?a(t,o,n):a(t,o))||n);return l>3&&n&&Object.defineProperty(t,o,n),n}function x(e,t,o,r){if("a"===o&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?r:"a"===o?r.call(e):r?r.value:t.get(e)}"function"==typeof SuppressedError&&SuppressedError;
|
|
7
|
+
/**
|
|
8
|
+
* @license
|
|
9
|
+
* Copyright 2017 Google LLC
|
|
10
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
|
+
*/
|
|
12
|
+
const C=globalThis,S=C.ShadowRoot&&(void 0===C.ShadyCSS||C.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,L=Symbol(),T=new WeakMap;
|
|
13
|
+
/**
|
|
14
|
+
* @license
|
|
15
|
+
* Copyright 2019 Google LLC
|
|
16
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
17
|
+
*/let _=class{constructor(e,t,o){if(this._$cssResult$=!0,o!==L)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(S&&void 0===e){const o=void 0!==t&&1===t.length;o&&(e=T.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),o&&T.set(t,e))}return e}toString(){return this.cssText}};const w=(e,t)=>{if(S)e.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const o of t){const t=document.createElement("style"),r=C.litNonce;void 0!==r&&t.setAttribute("nonce",r),t.textContent=o.cssText,e.appendChild(t)}},E=S?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const o of e.cssRules)t+=o.cssText;return(e=>new _("string"==typeof e?e:e+"",void 0,L))(t)})(e):e,{is:P,defineProperty:O,getOwnPropertyDescriptor:k,getOwnPropertyNames:z,getOwnPropertySymbols:I,getPrototypeOf:q}=Object,R=globalThis,V=R.trustedTypes,U=V?V.emptyScript:"",j=R.reactiveElementPolyfillSupport,M=(e,t)=>e,A={toAttribute(e,t){switch(t){case Boolean:e=e?U:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let o=e;switch(t){case Boolean:o=null!==e;break;case Number:o=null===e?null:Number(e);break;case Object:case Array:try{o=JSON.parse(e)}catch(e){o=null}}return o}},H=(e,t)=>!P(e,t),F={attribute:!0,type:String,converter:A,reflect:!1,useDefault:!1,hasChanged:H};
|
|
18
|
+
/**
|
|
19
|
+
* @license
|
|
20
|
+
* Copyright 2017 Google LLC
|
|
21
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
|
+
*/Symbol.metadata??=Symbol("metadata"),R.litPropertyMetadata??=new WeakMap;class W extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=F){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const o=Symbol(),r=this.getPropertyDescriptor(e,o,t);void 0!==r&&O(this.prototype,e,r)}}static getPropertyDescriptor(e,t,o){const{get:r,set:a}=k(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:r,set(t){const l=r?.call(this);a?.call(this,t),this.requestUpdate(e,l,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??F}static _$Ei(){if(this.hasOwnProperty(M("elementProperties")))return;const e=q(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(M("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(M("properties"))){const e=this.properties,t=[...z(e),...I(e)];for(const o of t)this.createProperty(o,e[o])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,o]of t)this.elementProperties.set(e,o)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const o=this._$Eu(e,t);void 0!==o&&this._$Eh.set(o,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const o=new Set(e.flat(1/0).reverse());for(const e of o)t.unshift(E(e))}else void 0!==e&&t.push(E(e));return t}static _$Eu(e,t){const o=t.attribute;return!1===o?void 0:"string"==typeof o?o:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const o of t.keys())this.hasOwnProperty(o)&&(e.set(o,this[o]),delete this[o]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return w(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,o){this._$AK(e,o)}_$ET(e,t){const o=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,o);if(void 0!==r&&!0===o.reflect){const a=(void 0!==o.converter?.toAttribute?o.converter:A).toAttribute(t,o.type);this._$Em=e,null==a?this.removeAttribute(r):this.setAttribute(r,a),this._$Em=null}}_$AK(e,t){const o=this.constructor,r=o._$Eh.get(e);if(void 0!==r&&this._$Em!==r){const e=o.getPropertyOptions(r),a="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:A;this._$Em=r;const l=a.fromAttribute(t,e.type);this[r]=l??this._$Ej?.get(r)??l,this._$Em=null}}requestUpdate(e,t,o){if(void 0!==e){const r=this.constructor,a=this[e];if(o??=r.getPropertyOptions(e),!((o.hasChanged??H)(a,t)||o.useDefault&&o.reflect&&a===this._$Ej?.get(e)&&!this.hasAttribute(r._$Eu(e,o))))return;this.C(e,t,o)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:o,reflect:r,wrapped:a},l){o&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,l??t??this[e]),!0!==a||void 0!==l)||(this._$AL.has(e)||(this.hasUpdated||o||(t=void 0),this._$AL.set(e,t)),!0===r&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,o]of e){const{wrapped:e}=o,r=this[t];!0!==e||this._$AL.has(t)||void 0===r||this.C(t,void 0,o,r)}}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(e=>e.hostUpdate?.()),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM()}updated(e){}firstUpdated(e){}}W.elementStyles=[],W.shadowRootOptions={mode:"open"},W[M("elementProperties")]=new Map,W[M("finalized")]=new Map,j?.({ReactiveElement:W}),(R.reactiveElementVersions??=[]).push("2.1.1");
|
|
23
|
+
/**
|
|
24
|
+
* @license
|
|
25
|
+
* Copyright 2017 Google LLC
|
|
26
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
27
|
+
*/
|
|
28
|
+
const B={attribute:!0,type:String,converter:A,reflect:!1,hasChanged:H},D=(e=B,t,o)=>{const{kind:r,metadata:a}=o;let l=globalThis.litPropertyMetadata.get(a);if(void 0===l&&globalThis.litPropertyMetadata.set(a,l=new Map),"setter"===r&&((e=Object.create(e)).wrapped=!0),l.set(o.name,e),"accessor"===r){const{name:r}=o;return{set(o){const a=t.get.call(this);t.set.call(this,o),this.requestUpdate(r,a,e)},init(t){return void 0!==t&&this.C(r,void 0,e,t),t}}}if("setter"===r){const{name:r}=o;return function(o){const a=this[r];t.call(this,o),this.requestUpdate(r,a,e)}}throw Error("Unsupported decorator location: "+r)};function N(e){return(t,o)=>"object"==typeof o?D(e,t,o):((e,t,o)=>{const r=t.hasOwnProperty(o);return t.constructor.createProperty(o,e),r?Object.getOwnPropertyDescriptor(t,o):void 0})(e,t,o)}
|
|
29
|
+
/**
|
|
30
|
+
* @license
|
|
31
|
+
* Copyright 2017 Google LLC
|
|
32
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
33
|
+
*/
|
|
34
|
+
/**
|
|
35
|
+
* @license
|
|
36
|
+
* Copyright 2017 Google LLC
|
|
37
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
38
|
+
*/
|
|
39
|
+
function K(e,t){return(t,o,r)=>((e,t,o)=>(o.configurable=!0,o.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,o),o))(t,o,{get(){return(t=>t.renderRoot?.querySelector(e)??null)(this)}})}const G={"extra-small":{containerHeight:e(`calc(var(--m3e-button-extra-small-container-height, 2rem) + ${l.density.calc(0)})`),outlineThickness:e("var(--m3e-button-extra-small-outline-thickness, 1px)"),labelTextFontSize:e(`var(--m3e-button-extra-small-label-text-font-size, ${l.typescale.standard.label.large.fontSize})`),labelTextFontWeight:e(`var(--m3e-button-extra-small-label-text-font-weight, ${l.typescale.standard.label.large.fontWeight})`),labelTextLineHeight:e(`var(--m3e-button-extra-small-label-text-line-height, ${l.typescale.standard.label.large.lineHeight})`),labelTextTracking:e(`var(--m3e-button-extra-small-label-text-tracking, ${l.typescale.standard.label.large.tracking})`),iconSize:e("var(--m3e-button-extra-small-icon-size, 1.25rem)"),shapeRound:e(`var(--m3e-button-extra-small-shape-round, ${l.shape.corner.full})`),shapeSquare:e(`var(--m3e-button-extra-small-shape-square, ${l.shape.corner.medium})`),selectedShapeRound:e(`var(--m3e-button-extra-small-selected-shape-round, ${l.shape.corner.medium})`),selectedShapeSquare:e(`var(--m3e-button-extra-small-selected-shape-square, ${l.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-button-extra-small-shape-pressed-morph, ${l.shape.corner.small})`),leadingSpace:e("var(--m3e-button-extra-small-leading-space, 0.75rem)"),trailingSpace:e("var(--m3e-button-extra-small-trailing-space, 0.75rem)"),iconLabelSpace:e("var(--m3e-button-extra-small-icon-label-space, 0.5rem)")},small:{containerHeight:e(`calc(var(--m3e-button-small-container-height, 2.5rem) + ${l.density.calc(-1)})`),outlineThickness:e("var(--m3e-button-small-outline-thickness, 1px)"),labelTextFontSize:e(`var(--m3e-button-small-label-text-font-size, ${l.typescale.standard.label.large.fontSize})`),labelTextFontWeight:e(`var(--m3e-button-small-label-text-font-weight, ${l.typescale.standard.label.large.fontWeight})`),labelTextLineHeight:e(`var(--m3e-button-small-label-text-line-height, ${l.typescale.standard.label.large.lineHeight})`),labelTextTracking:e(`var(--m3e-button-small-label-text-tracking, ${l.typescale.standard.label.large.tracking})`),iconSize:e("var(--m3e-button-small-icon-size, 1.25rem)"),shapeRound:e(`var(--m3e-button-small-shape-round, ${l.shape.corner.full})`),shapeSquare:e(`var(--m3e-button-small-shape-square, ${l.shape.corner.medium})`),selectedShapeRound:e(`var(--m3e-button-small-selected-shape-round, ${l.shape.corner.medium})`),selectedShapeSquare:e(`var(--m3e-button-small-selected-shape-square, ${l.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-button-small-shape-pressed-morph, ${l.shape.corner.small})`),leadingSpace:e("var(--m3e-button-small-leading-space, 1rem)"),trailingSpace:e("var(--m3e-button-small-trailing-space, 1rem)"),iconLabelSpace:e("var(--m3e-button-small-icon-label-space, 0.5rem)")},medium:{containerHeight:e(`calc(var(--m3e-button-medium-container-height, 3.5rem) + ${l.density.calc(-2)})`),outlineThickness:e("var(--m3e-button-medium-outline-thickness, 1px)"),labelTextFontSize:e(`var(--m3e-button-medium-label-text-font-size, ${l.typescale.standard.body.large.fontSize})`),labelTextFontWeight:e(`var(--m3e-button-medium-label-text-font-weight, ${l.typescale.standard.body.large.fontWeight})`),labelTextLineHeight:e(`var(--m3e-button-medium-label-text-line-height, ${l.typescale.standard.body.large.lineHeight})`),labelTextTracking:e(`var(--m3e-button-medium-label-text-tracking, ${l.typescale.standard.body.large.tracking})`),iconSize:e("var(--m3e-button-medium-icon-size, 1.5rem)"),shapeRound:e(`var(--m3e-button-medium-shape-round, ${l.shape.corner.full})`),shapeSquare:e(`var(--m3e-button-medium-shape-square, ${l.shape.corner.large})`),selectedShapeRound:e(`var(--m3e-button-medium-selected-shape-round, ${l.shape.corner.large})`),selectedShapeSquare:e(`var(--m3e-button-medium-selected-shape-square, ${l.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-button-medium-shape-pressed-morph, ${l.shape.corner.medium})`),leadingSpace:e("var(--m3e-button-medium-leading-space, 1.5rem)"),trailingSpace:e("var(--m3e-button-medium-trailing-space, 1.5rem)"),iconLabelSpace:e("var(--m3e-button-medium-icon-label-space, 0.5rem)")},large:{containerHeight:e(`calc(var(--m3e-button-large-container-height, 6rem) + ${l.density.calc(-3)})`),outlineThickness:e("var(--m3e-button-large-outline-thickness, 0.125rem)"),labelTextFontSize:e(`var(--m3e-button-large-label-text-font-size, ${l.typescale.standard.headline.small.fontSize})`),labelTextFontWeight:e(`var(--m3e-button-large-label-text-font-weight, ${l.typescale.standard.headline.small.fontWeight})`),labelTextLineHeight:e(`var(--m3e-button-large-label-text-line-height, ${l.typescale.standard.headline.small.lineHeight})`),labelTextTracking:e(`var(--m3e-button-large-label-text-tracking, ${l.typescale.standard.headline.small.tracking})`),iconSize:e("var(--m3e-button-large-icon-size, 2rem)"),shapeRound:e(`var(--m3e-button-large-shape-round, ${l.shape.corner.full})`),shapeSquare:e(`var(--m3e-button-large-shape-square, ${l.shape.corner.extraLarge})`),selectedShapeRound:e(`var(--m3e-button-large-selected-shape-round, ${l.shape.corner.extraLarge})`),selectedShapeSquare:e(`var(--m3e-button-large-selected-shape-square, ${l.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-button-large-shape-pressed-morph, ${l.shape.corner.large})`),leadingSpace:e("var(--m3e-button-large-leading-space, 3rem)"),trailingSpace:e("var(--m3e-button-large-trailing-space, 3rem)"),iconLabelSpace:e("var(--m3e-button-large-icon-label-space, 0.75rem)")},"extra-large":{containerHeight:e(`calc(var(--m3e-button-extra-large-container-height, 8.5rem) + ${l.density.calc(-3)})`),outlineThickness:e("var(--m3e-button-extra-large-outline-thickness, 0.1875rem)"),labelTextFontSize:e(`var(--m3e-button-extra-large-label-text-font-size, ${l.typescale.standard.headline.large.fontSize})`),labelTextFontWeight:e(`var(--m3e-button-extra-large-label-text-font-weight, ${l.typescale.standard.headline.large.fontWeight})`),labelTextLineHeight:e(`var(--m3e-button-extra-large-label-text-line-height, ${l.typescale.standard.headline.large.lineHeight})`),labelTextTracking:e(`var(--m3e-button-extra-large-label-text-tracking, ${l.typescale.standard.headline.large.tracking})`),iconSize:e("var(--m3e-button-extra-large-icon-size, 2.5rem)"),shapeRound:e(`var(--m3e-button-extra-large-shape-round, ${l.shape.corner.full})`),shapeSquare:e(`var(--m3e-button-extra-large-shape-square, ${l.shape.corner.extraLarge})`),selectedShapeRound:e(`var(--m3e-button-extra-large-selected-shape-round, ${l.shape.corner.extraLarge})`),selectedShapeSquare:e(`var(--m3e-button-extra-large-selected-shape-square, ${l.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-button-extra-large-shape-pressed-morph, ${l.shape.corner.large})`),leadingSpace:e("var(--m3e-button-extra-large-leading-space, 4rem)"),trailingSpace:e("var(--m3e-button-extra-large-trailing-space, 4rem)"),iconLabelSpace:e("var(--m3e-button-extra-large-icon-label-space, 1rem)")}};function J(o){return t`
|
|
40
|
+
:host([size="${e(o)}"]) .base {
|
|
41
|
+
height: ${G[o].containerHeight};
|
|
42
|
+
}
|
|
43
|
+
:host([size="${e(o)}"]) .wrapper {
|
|
44
|
+
padding-inline-start: ${G[o].leadingSpace};
|
|
45
|
+
padding-inline-end: ${G[o].trailingSpace};
|
|
46
|
+
column-gap: ${G[o].iconLabelSpace};
|
|
47
|
+
}
|
|
48
|
+
:host([size="${e(o)}"].-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .wrapper {
|
|
49
|
+
padding-inline-start: calc(
|
|
50
|
+
${G[o].leadingSpace} -
|
|
51
|
+
calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25)
|
|
52
|
+
);
|
|
53
|
+
padding-inline-end: calc(
|
|
54
|
+
${G[o].trailingSpace} -
|
|
55
|
+
calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25)
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
:host([size="${e(o)}"]) .label {
|
|
59
|
+
font-size: ${G[o].labelTextFontSize};
|
|
60
|
+
font-weight: ${G[o].labelTextFontWeight};
|
|
61
|
+
line-height: ${G[o].labelTextLineHeight};
|
|
62
|
+
letter-spacing: ${G[o].labelTextTracking};
|
|
63
|
+
}
|
|
64
|
+
:host([size="${e(o)}"]) .icon {
|
|
65
|
+
font-size: ${G[o].iconSize};
|
|
66
|
+
--m3e-icon-size: ${G[o].iconSize};
|
|
67
|
+
}
|
|
68
|
+
:host([size="${e(o)}"]) .base {
|
|
69
|
+
outline-offset: calc(0px - ${G[o].outlineThickness});
|
|
70
|
+
outline-width: ${G[o].outlineThickness};
|
|
71
|
+
}
|
|
72
|
+
:host(:not(.-connected)[size="${e(o)}"][shape="rounded"]) .base {
|
|
73
|
+
border-radius: var(--_button-shape, ${G[o].shapeRound});
|
|
74
|
+
}
|
|
75
|
+
:host(:not(.-connected)[size="${e(o)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base {
|
|
76
|
+
border-radius: ${G[o].selectedShapeRound};
|
|
77
|
+
}
|
|
78
|
+
:host(:not(.-connected)[size="${e(o)}"][shape="square"]) .base {
|
|
79
|
+
border-radius: ${G[o].shapeSquare};
|
|
80
|
+
}
|
|
81
|
+
:host(:not(.-connected)[size="${e(o)}"][shape="square"][toggle][selected]:not(.-pressed)) .base {
|
|
82
|
+
border-radius: var(--_button-shape, ${G[o].selectedShapeSquare});
|
|
83
|
+
}
|
|
84
|
+
:host(:not(.-connected)[size="${e(o)}"].-pressed) .base {
|
|
85
|
+
border-radius: ${G[o].shapePressedMorph};
|
|
86
|
+
}
|
|
87
|
+
:host(.-connected[size="${e(o)}"][shape="rounded"]) .base {
|
|
88
|
+
border-start-start-radius: var(
|
|
89
|
+
--_button-rounded-start-shape,
|
|
90
|
+
var(--_button-shape, ${G[o].shapeRound})
|
|
91
|
+
);
|
|
92
|
+
border-end-start-radius: var(
|
|
93
|
+
--_button-rounded-start-shape,
|
|
94
|
+
var(--_button-shape, ${G[o].shapeRound})
|
|
95
|
+
);
|
|
96
|
+
border-start-end-radius: var(
|
|
97
|
+
--_button-rounded-end-shape,
|
|
98
|
+
var(--_button-shape, ${G[o].shapeRound})
|
|
99
|
+
);
|
|
100
|
+
border-end-end-radius: var(
|
|
101
|
+
--_button-rounded-end-shape,
|
|
102
|
+
var(--_button-shape, ${G[o].shapeRound})
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
:host(.-connected[size="${e(o)}"][shape="square"]) .base {
|
|
106
|
+
border-start-start-radius: var(--_button-square-start-shape, ${G[o].shapeSquare});
|
|
107
|
+
border-end-start-radius: var(--_button-square-start-shape, ${G[o].shapeSquare});
|
|
108
|
+
border-start-end-radius: var(--_button-square-end-shape, ${G[o].shapeSquare});
|
|
109
|
+
border-end-end-radius: var(--_button-square-end-shape, ${G[o].shapeSquare});
|
|
110
|
+
}
|
|
111
|
+
:host(.-connected[size="${e(o)}"][shape="square"][toggle][selected]:not(.-pressed)) .base {
|
|
112
|
+
border-radius: var(--_button-shape, ${G[o].selectedShapeSquare});
|
|
113
|
+
}
|
|
114
|
+
:host(.-connected[size="${e(o)}"].-pressed) .base {
|
|
115
|
+
border-start-start-radius: var(--_button-start-shape-pressed-morph, ${G[o].shapePressedMorph});
|
|
116
|
+
border-end-start-radius: var(--_button-start-shape-pressed-morph, ${G[o].shapePressedMorph});
|
|
117
|
+
border-start-end-radius: var(--_button-end-shape-pressed-morph, ${G[o].shapePressedMorph});
|
|
118
|
+
border-end-end-radius: var(--_button-end-shape-pressed-morph, ${G[o].shapePressedMorph});
|
|
119
|
+
}
|
|
120
|
+
`}const Q=[J("extra-small"),J("small"),J("medium"),J("large"),J("extra-large")],X=t`
|
|
121
|
+
:host {
|
|
122
|
+
display: inline-block;
|
|
123
|
+
outline: none;
|
|
124
|
+
user-select: none;
|
|
125
|
+
}
|
|
126
|
+
.base {
|
|
127
|
+
box-sizing: border-box;
|
|
128
|
+
vertical-align: middle;
|
|
129
|
+
display: inline-flex;
|
|
130
|
+
align-items: center;
|
|
131
|
+
justify-content: center;
|
|
132
|
+
position: relative;
|
|
133
|
+
width: 100%;
|
|
134
|
+
transition: ${e(`background-color ${l.motion.duration.short4} ${l.motion.easing.standard}`)};
|
|
135
|
+
}
|
|
136
|
+
.touch {
|
|
137
|
+
position: absolute;
|
|
138
|
+
height: 3rem;
|
|
139
|
+
left: 0;
|
|
140
|
+
right: 0;
|
|
141
|
+
}
|
|
142
|
+
:host(.-pressed) .base,
|
|
143
|
+
:host(.-resting) .base {
|
|
144
|
+
transition: ${e(`background-color ${l.motion.duration.short4} ${l.motion.easing.standard},\n border-radius ${l.motion.spring.fastEffects}`)};
|
|
145
|
+
}
|
|
146
|
+
.wrapper {
|
|
147
|
+
width: 100%;
|
|
148
|
+
overflow: hidden;
|
|
149
|
+
display: inline-flex;
|
|
150
|
+
align-items: center;
|
|
151
|
+
}
|
|
152
|
+
.label {
|
|
153
|
+
justify-self: center;
|
|
154
|
+
flex: 1 1 auto;
|
|
155
|
+
text-align: center;
|
|
156
|
+
white-space: nowrap;
|
|
157
|
+
overflow: hidden;
|
|
158
|
+
text-overflow: ellipsis;
|
|
159
|
+
transition: ${e(`color ${l.motion.duration.short4} ${l.motion.easing.standard}`)};
|
|
160
|
+
}
|
|
161
|
+
.icon {
|
|
162
|
+
transition: ${e(`color ${l.motion.duration.short4} ${l.motion.easing.standard}`)};
|
|
163
|
+
}
|
|
164
|
+
:host(:not(:disabled):not([disabled-interactive])) {
|
|
165
|
+
cursor: pointer;
|
|
166
|
+
}
|
|
167
|
+
:host([disabled-interactive]) {
|
|
168
|
+
cursor: not-allowed;
|
|
169
|
+
}
|
|
170
|
+
::slotted([slot="icon"]),
|
|
171
|
+
::slotted([slot="selected-icon"]),
|
|
172
|
+
::slotted([slot="trailing-icon"]) {
|
|
173
|
+
font-size: inherit !important;
|
|
174
|
+
flex: none;
|
|
175
|
+
}
|
|
176
|
+
::slotted(svg[slot="icon"]),
|
|
177
|
+
::slotted(svg[slot="selected-icon"]),
|
|
178
|
+
::slotted(svg[slot="trailing-icon"]) {
|
|
179
|
+
width: 1em;
|
|
180
|
+
height: 1em;
|
|
181
|
+
}
|
|
182
|
+
:host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected-icon"],
|
|
183
|
+
:host([toggle][selected]) .base.with-selected-icon slot[name="icon"] {
|
|
184
|
+
display: none;
|
|
185
|
+
}
|
|
186
|
+
a {
|
|
187
|
+
all: unset;
|
|
188
|
+
display: block;
|
|
189
|
+
position: absolute;
|
|
190
|
+
top: 0px;
|
|
191
|
+
left: 0px;
|
|
192
|
+
right: 0px;
|
|
193
|
+
bottom: 0px;
|
|
194
|
+
z-index: 1;
|
|
195
|
+
}
|
|
196
|
+
:host(.-grouped.-connected) {
|
|
197
|
+
flex: 1 1 auto;
|
|
198
|
+
}
|
|
199
|
+
:host(.-grouped:not(.-connected)) {
|
|
200
|
+
transition: ${e(`padding-inline ${l.motion.spring.fastEffects}`)};
|
|
201
|
+
}
|
|
202
|
+
:host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) {
|
|
203
|
+
flex-shrink: 0;
|
|
204
|
+
flex-grow: 0;
|
|
205
|
+
}
|
|
206
|
+
:host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) {
|
|
207
|
+
flex-shrink: 1;
|
|
208
|
+
min-width: 0;
|
|
209
|
+
}
|
|
210
|
+
:host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label {
|
|
211
|
+
text-overflow: clip;
|
|
212
|
+
}
|
|
213
|
+
:host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) {
|
|
214
|
+
flex-shrink: 0;
|
|
215
|
+
flex-basis: calc(
|
|
216
|
+
var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15))
|
|
217
|
+
);
|
|
218
|
+
}
|
|
219
|
+
@media (forced-colors: active) {
|
|
220
|
+
.base,
|
|
221
|
+
.label,
|
|
222
|
+
.icon {
|
|
223
|
+
transition: none;
|
|
224
|
+
}
|
|
225
|
+
:host(.-pressed) .base,
|
|
226
|
+
:host(.-resting) .base {
|
|
227
|
+
transition: ${e(`border-radius ${l.motion.spring.fastEffects}`)};
|
|
228
|
+
}
|
|
229
|
+
:host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base {
|
|
230
|
+
background-color: ButtonFace;
|
|
231
|
+
outline-color: ButtonText;
|
|
232
|
+
}
|
|
233
|
+
:host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label,
|
|
234
|
+
:host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon {
|
|
235
|
+
color: ButtonText;
|
|
236
|
+
}
|
|
237
|
+
:host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base {
|
|
238
|
+
background-color: ButtonFace;
|
|
239
|
+
outline-color: ButtonText;
|
|
240
|
+
}
|
|
241
|
+
:host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label,
|
|
242
|
+
:host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon {
|
|
243
|
+
color: ButtonText;
|
|
244
|
+
}
|
|
245
|
+
:host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base {
|
|
246
|
+
background-color: ButtonText;
|
|
247
|
+
outline: none;
|
|
248
|
+
}
|
|
249
|
+
:host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label,
|
|
250
|
+
:host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon {
|
|
251
|
+
forced-color-adjust: none;
|
|
252
|
+
color: ButtonFace;
|
|
253
|
+
background-color: ButtonText;
|
|
254
|
+
}
|
|
255
|
+
:host([variant]:disabled) .base,
|
|
256
|
+
:host([variant][disabled-interactive]) .base {
|
|
257
|
+
outline-color: GrayText;
|
|
258
|
+
background-color: unset;
|
|
259
|
+
}
|
|
260
|
+
:host([variant]:disabled) .label,
|
|
261
|
+
:host([variant][disabled-interactive]) .label,
|
|
262
|
+
:host([variant]:disabled) .icon,
|
|
263
|
+
:host([variant][disabled-interactive]) .icon {
|
|
264
|
+
color: GrayText;
|
|
265
|
+
}
|
|
266
|
+
.base {
|
|
267
|
+
outline-style: solid;
|
|
268
|
+
}
|
|
269
|
+
:host([size="extra-small"]) .base {
|
|
270
|
+
outline-offset: calc(0px - var(--m3e-button-extra-small-outline-thickness, 1px));
|
|
271
|
+
outline-width: var(--m3e-button-extra-small-outline-thickness, 1px);
|
|
272
|
+
}
|
|
273
|
+
:host([size="small"]) .base {
|
|
274
|
+
outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px));
|
|
275
|
+
outline-width: var(--m3e-button-small-outline-thickness, 1px);
|
|
276
|
+
}
|
|
277
|
+
:host([size="medium"]) .base {
|
|
278
|
+
outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px));
|
|
279
|
+
outline-width: var(--m3e-button-medium-outline-thickness, 1px);
|
|
280
|
+
}
|
|
281
|
+
:host([size="large"]) .base {
|
|
282
|
+
outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 0.125rem));
|
|
283
|
+
outline-width: var(--m3e-button-large-outline-thickness, 0.125rem);
|
|
284
|
+
}
|
|
285
|
+
:host([size="extra-large"]) .base {
|
|
286
|
+
outline-offset: calc(0px - var(--m3e-button-extra-large-outline-thickness, 0.1875rem));
|
|
287
|
+
outline-width: var(--m3e-button-extra-large-outline-thickness, 0.1875rem);
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
@media (prefers-reduced-motion) {
|
|
291
|
+
:host(.-pressed) .base,
|
|
292
|
+
:host(.-resting) .base,
|
|
293
|
+
.base,
|
|
294
|
+
.label,
|
|
295
|
+
.icon {
|
|
296
|
+
transition: none;
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
`,Y={elevated:{labelTextColor:e(`var(--m3e-elevated-button-label-text-color, ${l.color.primary})`),iconColor:e(`var(--m3e-elevated-button-icon-color, ${l.color.primary})`),containerColor:e(`var(--m3e-elevated-button-container-color, ${l.color.surfaceContainerLow})`),containerElevation:e(`var(--m3e-elevated-button-container-elevation, ${l.elevation.level1})`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-unselected-label-text-color, ${l.color.primary})`),unselectedIconColor:e(`var(--m3e-elevated-button-unselected-icon-color, ${l.color.primary})`),unselectedContainerColor:e(`var(--m3e-elevated-button-unselected-container-color, ${l.color.surfaceContainerLow})`),selectedLabelTextColor:e(`var(--m3e-elevated-button-selected-label-text-color, ${l.color.onPrimary})`),selectedIconColor:e(`var(--m3e-elevated-button-selected-icon-color, ${l.color.onPrimary})`),selectedContainerColor:e(`var(--m3e-elevated-button-selected-container-color, ${l.color.primary})`),disabled:{containerColor:e(`var(--m3e-elevated-button-disabled-container-color, ${l.color.onSurface})`),containerOpacity:e("var(--m3e-elevated-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-elevated-button-disabled-icon-color, ${l.color.onSurface})`),iconOpacity:e("var(--m3e-elevated-button-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-elevated-button-disabled-label-text-color, ${l.color.onSurface})`),labelTextOpacity:e("var(--m3e-elevated-button-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-elevated-button-disabled-container-elevation, ${l.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-elevated-button-hover-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-elevated-button-hover-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-button-hover-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-button-hover-container-elevation, ${l.elevation.level2})`),unselectedIconColor:e(`var(--m3e-elevated-button-hover-unselected-icon-color, ${l.color.primary})`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-hover-unselected-label-text-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-hover-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-button-hover-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-elevated-button-hover-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-button-hover-selected-state-layer-color, ${l.color.onPrimary})`)},focus:{iconColor:e(`var(--m3e-elevated-button-focus-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-elevated-button-focus-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-button-focus-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-button-focus-container-elevation, ${l.elevation.level1})`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-focus-unselected-label-text-color, ${l.color.primary})`),unselectedIconColor:e(`var(--m3e-elevated-button-focus-unselected-icon-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-focus-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-button-focus-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-elevated-button-focus-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-button-focus-selected-state-layer-color, ${l.color.onPrimary})`)},pressed:{iconColor:e(`var(--m3e-elevated-button-pressed-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-elevated-button-pressed-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-button-pressed-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-button-pressed-container-elevation, ${l.elevation.level1})`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-pressed-unselected-label-text-color, ${l.color.primary})`),unselectedIconColor:e(`var(--m3e-elevated-button-pressed-unselected-icon-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-button-pressed-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-elevated-button-pressed-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-button-pressed-selected-state-layer-color, ${l.color.onPrimary})`)}},outlined:{labelTextColor:e(`var(--m3e-outlined-button-label-text-color, ${l.color.onSurfaceVariant})`),iconColor:e(`var(--m3e-outlined-button-icon-color, ${l.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-button-outline-color, ${l.color.outlineVariant})`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedIconColor:e(`var(--m3e-outlined-button-unselected-icon-color, ${l.color.onSurfaceVariant})`),selectedLabelTextColor:e(`var(--m3e-outlined-button-selected-label-text-color, ${l.color.inverseOnSurface})`),selectedIconColor:e(`var(--m3e-outlined-button-selected-icon-color, ${l.color.inverseOnSurface})`),selectedContainerColor:e(`var(--m3e-outlined-button-selected-container-color, ${l.color.inverseSurface})`),disabled:{containerColor:e(`var(--m3e-outlined-button-disabled-container-color, ${l.color.onSurface})`),containerOpacity:e("var(--m3e-outlined-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-outlined-button-disabled-icon-color, ${l.color.onSurface})`),iconOpacity:e("var(--m3e-outlined-button-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-outlined-button-disabled-label-text-color, ${l.color.onSurface})`),labelTextOpacity:e("var(--m3e-outlined-button-disabled-label-text-opacity, 38%)"),outlineColor:e(`var(--m3e-outlined-button-disabled-outline-color, ${l.color.outlineVariant})`)},hover:{iconColor:e(`var(--m3e-outlined-button-hover-icon-color, ${l.color.onSurfaceVariant})`),labelTextColor:e(`var(--m3e-outlined-button-hover-label-text-color, ${l.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-button-hover-outline-color, ${l.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-button-hover-state-layer-color, ${l.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-button-hover-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-hover-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-hover-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-button-hover-selected-icon-color, ${l.color.inverseOnSurface})`),selectedLabelTextColor:e(`var(--m3e-outlined-button-hover-selected-label-text-color, ${l.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-button-hover-selected-state-layer-color, ${l.color.inverseOnSurface})`)},focus:{iconColor:e(`var(--m3e-outlined-button-focus-icon-color, ${l.color.onSurfaceVariant})`),labelTextColor:e(`var(--m3e-outlined-button-focus-label-text-color, ${l.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-button-focus-outline-color, ${l.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-button-focus-state-layer-color, ${l.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-button-focus-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-focus-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-focus-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-button-focus-selected-icon-color, ${l.color.inverseOnSurface})`),selectedLabelTextColor:e(`var(--m3e-outlined-button-focus-selected-label-text-color, ${l.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-button-focus-selected-state-layer-color, ${l.color.inverseOnSurface})`)},pressed:{iconColor:e(`var(--m3e-outlined-button-pressed-icon-color, ${l.color.onSurfaceVariant})`),labelTextColor:e(`var(--m3e-outlined-button-pressed-label-text-color, ${l.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-button-pressed-outline-color, ${l.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-button-pressed-state-layer-color, ${l.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-button-pressed-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-pressed-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-button-pressed-selected-icon-color, ${l.color.inverseOnSurface})`),selectedLabelTextColor:e(`var(--m3e-outlined-button-pressed-selected-label-text-color, ${l.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-button-pressed-selected-state-layer-color, ${l.color.inverseOnSurface})`)}},filled:{labelTextColor:e(`var(--m3e-filled-button-label-text-color, ${l.color.onPrimary})`),iconColor:e(`var(--m3e-filled-button-icon-color, ${l.color.onPrimary})`),containerColor:e(`var(--m3e-filled-button-container-color, ${l.color.primary})`),containerElevation:e(`var(--m3e-filled-button-container-elevation, ${l.elevation.level0})`),unselectedLabelTextColor:e(`var(--m3e-filled-button-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedIconColor:e(`var(--m3e-filled-button-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedContainerColor:e(`var(--m3e-filled-button-unselected-container-color, ${l.color.surfaceContainer})`),selectedLabelTextColor:e(`var(--m3e-filled-button-selected-label-text-color, ${l.color.onPrimary})`),selectedIconColor:e(`var(--m3e-filled-button-selected-icon-color, ${l.color.onPrimary})`),selectedContainerColor:e(`var(--m3e-filled-button-selected-container-color, ${l.color.primary})`),disabled:{containerColor:e(`var(--m3e-filled-button-disabled-container-color, ${l.color.onSurface})`),containerOpacity:e("var(--m3e-filled-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-filled-button-disabled-icon-color, ${l.color.onSurface})`),iconOpacity:e("var(--m3e-filled-button-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-filled-button-disabled-label-text-color, ${l.color.onSurface})`),labelTextOpacity:e("var(--m3e-filled-button-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-filled-button-disabled-container-elevation, ${l.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-filled-button-hover-icon-color, ${l.color.onPrimary})`),labelTextColor:e(`var(--m3e-filled-button-hover-label-text-color, ${l.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-button-hover-state-layer-color, ${l.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-button-hover-container-elevation, ${l.elevation.level1})`),unselectedIconColor:e(`var(--m3e-filled-button-hover-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-filled-button-hover-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-button-hover-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-button-hover-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-filled-button-hover-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-button-hover-selected-state-layer-color, ${l.color.onPrimary})`)},focus:{iconColor:e(`var(--m3e-filled-button-focus-icon-color, ${l.color.onPrimary})`),labelTextColor:e(`var(--m3e-filled-button-focus-label-text-color, ${l.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-button-focus-state-layer-color, ${l.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-button-focus-container-elevation, ${l.elevation.level0})`),unselectedIconColor:e(`var(--m3e-filled-button-focus-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-filled-button-focus-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-button-focus-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-button-focus-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-filled-button-focus-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-button-focus-selected-state-layer-color, ${l.color.onPrimary})`)},pressed:{iconColor:e(`var(--m3e-filled-button-pressed-icon-color, ${l.color.onPrimary})`),labelTextColor:e(`var(--m3e-filled-button-pressed-label-text-color, ${l.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-button-pressed-state-layer-color, ${l.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-button-pressed-container-elevation, ${l.elevation.level0})`),unselectedIconColor:e(`var(--m3e-filled-button-pressed-unselected-icon-color, ${l.color.onSurfaceVariant})`),unselectedLabelTextColor:e(`var(--m3e-filled-button-pressed-unselected-label-text-color, ${l.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-button-pressed-unselected-state-layer-color, ${l.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-button-pressed-selected-icon-color, ${l.color.onPrimary})`),selectedLabelTextColor:e(`var(--m3e-filled-button-pressed-selected-label-text-color, ${l.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-button-pressed-selected-state-layer-color, ${l.color.onPrimary})`)}},tonal:{labelTextColor:e(`var(--m3e-tonal-button-label-text-color, ${l.color.onSecondaryContainer})`),iconColor:e(`var(--m3e-tonal-button-icon-color, ${l.color.onSecondaryContainer})`),containerColor:e(`var(--m3e-tonal-button-container-color, ${l.color.secondaryContainer})`),containerElevation:e(`var(--m3e-tonal-button-container-elevation, ${l.elevation.level0})`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-unselected-label-text-color, ${l.color.onSecondaryContainer})`),unselectedIconColor:e(`var(--m3e-tonal-button-unselected-icon-color, ${l.color.onSecondaryContainer})`),unselectedContainerColor:e(`var(--m3e-tonal-button-unselected-container-color, ${l.color.secondaryContainer})`),selectedLabelTextColor:e(`var(--m3e-tonal-button-selected-label-text-color, ${l.color.onSecondary})`),selectedIconColor:e(`var(--m3e-tonal-button-selected-icon-color, ${l.color.onSecondary})`),selectedContainerColor:e(`var(--m3e-tonal-button-selected-container-color, ${l.color.secondary})`),disabled:{containerColor:e(`var(--m3e-tonal-button-disabled-container-color, ${l.color.onSurface})`),containerOpacity:e("var(--m3e-tonal-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-tonal-button-disabled-icon-color, ${l.color.onSurface})`),iconOpacity:e("var(--m3e-tonal-button-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-tonal-button-disabled-label-text-color, ${l.color.onSurface})`),labelTextOpacity:e("var(--m3e-tonal-button-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-tonal-button-disabled-container-elevation, ${l.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-tonal-button-hover-icon-color, ${l.color.onSecondaryContainer})`),labelTextColor:e(`var(--m3e-tonal-button-hover-label-text-color, ${l.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-button-hover-state-layer-color, ${l.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-tonal-button-hover-container-elevation, ${l.elevation.level1})`),unselectedIconColor:e(`var(--m3e-tonal-button-hover-unselected-icon-color, ${l.color.onSecondaryContainer})`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-hover-unselected-label-text-color, ${l.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-hover-unselected-state-layer-color, ${l.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-button-hover-selected-icon-color, ${l.color.onSecondary})`),selectedLabelTextColor:e(`var(--m3e-tonal-button-hover-selected-label-text-color, ${l.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-button-hover-selected-state-layer-color, ${l.color.onSecondary})`)},focus:{iconColor:e(`var(--m3e-tonal-button-focus-icon-color, ${l.color.onSecondaryContainer})`),labelTextColor:e(`var(--m3e-tonal-button-focus-label-text-color, ${l.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-button-focus-state-layer-color, ${l.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-tonal-button-focus-container-elevation, ${l.elevation.level0})`),unselectedIconColor:e(`var(--m3e-tonal-button-focus-unselected-icon-color, ${l.color.onSecondaryContainer})`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-focus-unselected-label-text-color, ${l.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-focus-unselected-state-layer-color, ${l.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-button-focus-selected-icon-color, ${l.color.onSecondary})`),selectedLabelTextColor:e(`var(--m3e-tonal-button-focus-selected-label-text-color, ${l.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-button-focus-selected-state-layer-color, ${l.color.onSecondary})`)},pressed:{iconColor:e(`var(--m3e-tonal-button-pressed-icon-color, ${l.color.onSecondaryContainer})`),labelTextColor:e(`var(--m3e-tonal-button-pressed-label-text-color, ${l.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-button-pressed-state-layer-color, ${l.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-tonal-button-pressed-container-elevation, ${l.elevation.level0})`),unselectedIconColor:e(`var(--m3e-tonal-button-pressed-unselected-icon-color, ${l.color.onSecondaryContainer})`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-pressed-unselected-label-text-color, ${l.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, ${l.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-button-pressed-selected-icon-color, ${l.color.onSecondary})`),selectedLabelTextColor:e(`var(--m3e-tonal-button-pressed-selected-label-text-color, ${l.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-button-pressed-selected-state-layer-color, ${l.color.onSecondary})`)}},text:{labelTextColor:e(`var(--m3e-text-button-label-text-color, ${l.color.primary})`),iconColor:e(`var(--m3e-text-button-icon-color, ${l.color.primary})`),unselectedLabelTextColor:e(`var(--m3e-text-button-unselected-label-text-color, ${l.color.primary})`),unselectedIconColor:e(`var(--m3e-text-button-unselected-icon-color, ${l.color.primary})`),selectedLabelTextColor:e(`var(--m3e-text-button-selected-label-text-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-text-button-selected-icon-color, ${l.color.primary})`),disabled:{containerColor:e(`var(--m3e-text-button-disabled-container-color, ${l.color.onSurface})`),containerOpacity:e("var(--m3e-text-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-text-button-disabled-icon-color, ${l.color.onSurface})`),iconOpacity:e("var(--m3e-text-button-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-text-button-disabled-label-text-color, ${l.color.onSurface})`),labelTextOpacity:e("var(--m3e-text-button-disabled-label-text-opacity, 38%)")},hover:{iconColor:e(`var(--m3e-text-button-hover-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-text-button-hover-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-text-button-hover-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-text-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-text-button-hover-unselected-icon-color, ${l.color.primary})`),unselectedLabelTextColor:e(`var(--m3e-text-button-hover-unselected-label-text-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-text-button-hover-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-text-button-hover-selected-icon-color, ${l.color.primary})`),selectedLabelTextColor:e(`var(--m3e-text-button-hover-selected-label-text-color, ${l.color.primary})`),selectedStateLayerColor:e(`var(--m3e-text-button-hover-selected-state-layer-color, ${l.color.primary})`)},focus:{iconColor:e(`var(--m3e-text-button-focus-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-text-button-focus-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-text-button-focus-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-text-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-text-button-focus-unselected-icon-color, ${l.color.primary})`),unselectedLabelTextColor:e(`var(--m3e-text-button-focus-unselected-label-text-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-text-button-focus-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-text-button-focus-selected-icon-color, ${l.color.primary})`),selectedLabelTextColor:e(`var(--m3e-text-button-focus-selected-label-text-color, ${l.color.primary})`),selectedStateLayerColor:e(`var(--m3e-text-button-focus-selected-state-layer-color, ${l.color.primary})`)},pressed:{iconColor:e(`var(--m3e-text-button-pressed-icon-color, ${l.color.primary})`),labelTextColor:e(`var(--m3e-text-button-pressed-label-text-color, ${l.color.primary})`),stateLayerColor:e(`var(--m3e-text-button-pressed-state-layer-color, ${l.color.primary})`),stateLayerOpacity:e(`var(--m3e-text-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-text-button-pressed-unselected-icon-color, ${l.color.primary})`),unselectedLabelTextColor:e(`var(--m3e-text-button-pressed-unselected-label-text-color, ${l.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-text-button-pressed-unselected-state-layer-color, ${l.color.primary})`),selectedIconColor:e(`var(--m3e-text-button-pressed-selected-icon-color, ${l.color.primary})`),selectedLabelTextColor:e(`var(--m3e-text-button-pressed-selected-label-text-color, ${l.color.primary})`),selectedStateLayerColor:e(`var(--m3e-text-button-pressed-selected-state-layer-color, ${l.color.primary})`)}}};function Z(o){return t`
|
|
300
|
+
:host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .base {
|
|
301
|
+
background-color: ${Y[o].containerColor??e("unset")};
|
|
302
|
+
--m3e-state-layer-hover-color: ${Y[o].hover.stateLayerColor};
|
|
303
|
+
--m3e-state-layer-hover-opacity: ${Y[o].hover.stateLayerOpacity};
|
|
304
|
+
--m3e-state-layer-focus-color: ${Y[o].focus.stateLayerColor};
|
|
305
|
+
--m3e-state-layer-focus-opacity: ${Y[o].focus.stateLayerOpacity};
|
|
306
|
+
--m3e-ripple-color: ${Y[o].pressed.stateLayerColor};
|
|
307
|
+
--m3e-ripple-opacity: ${Y[o].pressed.stateLayerOpacity};
|
|
308
|
+
--m3e-elevation-level: ${Y[o].containerElevation??e("unset")};
|
|
309
|
+
--m3e-elevation-hover-level: ${Y[o].hover.containerElevation??e("unset")};
|
|
310
|
+
--m3e-elevation-focus-level: ${Y[o].focus.containerElevation??e("unset")};
|
|
311
|
+
--m3e-elevation-pressed-level: ${Y[o].pressed.containerElevation??e("unset")};
|
|
312
|
+
}
|
|
313
|
+
:host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base {
|
|
314
|
+
background-color: ${Y[o].unselectedContainerColor??e("unset")};
|
|
315
|
+
--m3e-state-layer-hover-color: ${Y[o].hover.unselectedStateLayerColor};
|
|
316
|
+
--m3e-state-layer-focus-color: ${Y[o].focus.unselectedStateLayerColor};
|
|
317
|
+
--m3e-ripple-color: ${Y[o].pressed.unselectedStateLayerColor};
|
|
318
|
+
}
|
|
319
|
+
:host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base {
|
|
320
|
+
background-color: ${Y[o].selectedContainerColor??e("unset")};
|
|
321
|
+
--m3e-state-layer-hover-color: ${Y[o].hover.selectedStateLayerColor};
|
|
322
|
+
--m3e-state-layer-focus-color: ${Y[o].focus.selectedStateLayerColor};
|
|
323
|
+
--m3e-ripple-color: ${Y[o].pressed.selectedStateLayerColor};
|
|
324
|
+
}
|
|
325
|
+
:host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .base {
|
|
326
|
+
outline-color: ${Y[o].outlineColor??e("unset")};
|
|
327
|
+
}
|
|
328
|
+
:host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .base {
|
|
329
|
+
outline-color: ${Y[o].focus.outlineColor??e("unset")};
|
|
330
|
+
}
|
|
331
|
+
:host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .base {
|
|
332
|
+
outline-color: ${Y[o].hover.outlineColor??e("unset")};
|
|
333
|
+
}
|
|
334
|
+
:host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .base {
|
|
335
|
+
outline-color: ${Y[o].pressed.outlineColor??e("unset")};
|
|
336
|
+
}
|
|
337
|
+
:host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .label {
|
|
338
|
+
color: ${Y[o].labelTextColor};
|
|
339
|
+
}
|
|
340
|
+
:host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .label {
|
|
341
|
+
color: ${Y[o].unselectedLabelTextColor};
|
|
342
|
+
}
|
|
343
|
+
:host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .label {
|
|
344
|
+
color: ${Y[o].selectedLabelTextColor};
|
|
345
|
+
}
|
|
346
|
+
:host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .label {
|
|
347
|
+
color: ${Y[o].focus.labelTextColor};
|
|
348
|
+
}
|
|
349
|
+
:host([variant="${e(o)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive]))
|
|
350
|
+
.label {
|
|
351
|
+
color: ${Y[o].focus.unselectedLabelTextColor};
|
|
352
|
+
}
|
|
353
|
+
:host([variant="${e(o)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .label {
|
|
354
|
+
color: ${Y[o].focus.selectedLabelTextColor};
|
|
355
|
+
}
|
|
356
|
+
:host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .label {
|
|
357
|
+
color: ${Y[o].hover.labelTextColor};
|
|
358
|
+
}
|
|
359
|
+
:host([variant="${e(o)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive]))
|
|
360
|
+
.label {
|
|
361
|
+
color: ${Y[o].hover.unselectedLabelTextColor};
|
|
362
|
+
}
|
|
363
|
+
:host([variant="${e(o)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .label {
|
|
364
|
+
color: ${Y[o].hover.selectedLabelTextColor};
|
|
365
|
+
}
|
|
366
|
+
:host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .label {
|
|
367
|
+
color: ${Y[o].pressed.labelTextColor};
|
|
368
|
+
}
|
|
369
|
+
:host([variant="${e(o)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive]))
|
|
370
|
+
.label {
|
|
371
|
+
color: ${Y[o].pressed.unselectedLabelTextColor};
|
|
372
|
+
}
|
|
373
|
+
:host([variant="${e(o)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive]))
|
|
374
|
+
.label {
|
|
375
|
+
color: ${Y[o].pressed.selectedLabelTextColor};
|
|
376
|
+
}
|
|
377
|
+
:host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .icon {
|
|
378
|
+
color: ${Y[o].iconColor};
|
|
379
|
+
}
|
|
380
|
+
:host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon {
|
|
381
|
+
color: ${Y[o].unselectedIconColor};
|
|
382
|
+
}
|
|
383
|
+
:host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon {
|
|
384
|
+
color: ${Y[o].selectedIconColor};
|
|
385
|
+
}
|
|
386
|
+
:host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .icon {
|
|
387
|
+
color: ${Y[o].focus.iconColor};
|
|
388
|
+
}
|
|
389
|
+
:host([variant="${e(o)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive]))
|
|
390
|
+
.icon {
|
|
391
|
+
color: ${Y[o].focus.unselectedIconColor};
|
|
392
|
+
}
|
|
393
|
+
:host([variant="${e(o)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon {
|
|
394
|
+
color: ${Y[o].focus.selectedIconColor};
|
|
395
|
+
}
|
|
396
|
+
:host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .icon {
|
|
397
|
+
color: ${Y[o].hover.iconColor};
|
|
398
|
+
}
|
|
399
|
+
:host([variant="${e(o)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive]))
|
|
400
|
+
.icon {
|
|
401
|
+
color: ${Y[o].hover.unselectedIconColor};
|
|
402
|
+
}
|
|
403
|
+
:host([variant="${e(o)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon {
|
|
404
|
+
color: ${Y[o].hover.selectedIconColor};
|
|
405
|
+
}
|
|
406
|
+
:host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .icon {
|
|
407
|
+
color: ${Y[o].pressed.iconColor};
|
|
408
|
+
}
|
|
409
|
+
:host([variant="${e(o)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive]))
|
|
410
|
+
.icon {
|
|
411
|
+
color: ${Y[o].pressed.unselectedIconColor};
|
|
412
|
+
}
|
|
413
|
+
:host([variant="${e(o)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive]))
|
|
414
|
+
.icon {
|
|
415
|
+
color: ${Y[o].pressed.selectedIconColor};
|
|
416
|
+
}
|
|
417
|
+
:host([variant="${e(o)}"]:disabled) .base,
|
|
418
|
+
:host([variant="${e(o)}"][disabled-interactive]) .base {
|
|
419
|
+
--m3e-elevation-level: ${Y[o].disabled.containerElevation??e("unset")};
|
|
420
|
+
outline-color: ${Y[o].disabled.outlineColor??e("unset")};
|
|
421
|
+
background-color: color-mix(
|
|
422
|
+
in srgb,
|
|
423
|
+
${Y[o].disabled.containerColor} ${Y[o].disabled.containerOpacity},
|
|
424
|
+
transparent
|
|
425
|
+
);
|
|
426
|
+
}
|
|
427
|
+
:host([variant="${e(o)}"]:disabled) .label,
|
|
428
|
+
:host([variant="${e(o)}"][disabled-interactive]) .label {
|
|
429
|
+
color: color-mix(
|
|
430
|
+
in srgb,
|
|
431
|
+
${Y[o].disabled.labelTextColor} ${Y[o].disabled.labelTextOpacity},
|
|
432
|
+
transparent
|
|
433
|
+
);
|
|
434
|
+
}
|
|
435
|
+
:host([variant="${e(o)}"]:disabled) .icon,
|
|
436
|
+
:host([variant="${e(o)}"][disabled-interactive]) .icon {
|
|
437
|
+
color: color-mix(
|
|
438
|
+
in srgb,
|
|
439
|
+
${Y[o].disabled.iconColor} ${Y[o].disabled.iconOpacity},
|
|
440
|
+
transparent
|
|
441
|
+
);
|
|
442
|
+
}
|
|
443
|
+
`}const ee=[Z("text"),Z("elevated"),Z("outlined"),Z("filled"),Z("tonal"),t`
|
|
444
|
+
:host([variant="outlined"]) .base {
|
|
445
|
+
outline-style: solid;
|
|
446
|
+
}
|
|
447
|
+
`];var te,oe,re,ae,le;let ne=class extends(n(s(i(c(d(u(b(v(o,"button"),!0)))))))){constructor(){super(),te.add(this),oe.set(this,e=>x(this,te,"m",re).call(this,e)),this.variant="text",this.shape="rounded",this.size="small",this.toggle=!1,this.selected=!1,new h(this,{callback:()=>{this.grouped&&this._handleResize()}}),new p(this,{callback:e=>{!this.disabledInteractive&&this._base&&(e?x(this,te,"m",le).call(this):this.grouped||this._base?.style.removeProperty("--_button-shape"))}}),new m(this,{isPressedKey:e=>" "===e||"Enter"===e,callback:e=>{if(!this.disabled&&!this.disabledInteractive){this.classList.toggle("-pressed",e),this.classList.toggle("-resting",!e);const t=this.closest("m3e-button-group");if(t){const o=this.getBoundingClientRect().width,r=[...t.querySelectorAll("m3e-button,m3e-icon-button")],a=r.indexOf(this);for(let t=0;t<r.length;t++){const l=r[t];t===a-1||t===a+1?(l.style.setProperty("--_adjacent-button-width",`${o}px`),l.classList.toggle("-adjacent-pressed",e)):(l.style.removeProperty("--_adjacent-button-width"),l.classList.remove("-adjacent-pressed"))}}}}})}get grouped(){return this.classList.contains("-grouped")}render(){return a`<div class="base">
|
|
448
|
+
<m3e-elevation class="elevation" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation>
|
|
449
|
+
<m3e-state-layer class="state-layer" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer>
|
|
450
|
+
<m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring>
|
|
451
|
+
<m3e-ripple class="ripple" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple>
|
|
452
|
+
<div class="touch" aria-hidden="true"></div>
|
|
453
|
+
${this[y]()}
|
|
454
|
+
<div class="wrapper">
|
|
455
|
+
${this.toggle?a`<slot
|
|
456
|
+
class="icon"
|
|
457
|
+
name="selected-icon"
|
|
458
|
+
aria-hidden="true"
|
|
459
|
+
@slotchange="${x(this,te,"m",ae)}"
|
|
460
|
+
></slot>`:r}
|
|
461
|
+
<slot class="icon" name="icon" aria-hidden="true"></slot>
|
|
462
|
+
<div class="label">
|
|
463
|
+
${this.toggle&&this.selected?a`<slot name="selected"><slot></slot></slot>`:a`<slot></slot>`}
|
|
464
|
+
</div>
|
|
465
|
+
<slot class="icon" name="trailing-icon" aria-hidden="true"></slot>
|
|
466
|
+
</div>
|
|
467
|
+
</div>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",x(this,oe,"f"))}disconnectedCallback(){super.disconnectedCallback(),["-pressed","-resting","-grouped","-connected"].forEach(e=>this.classList.remove(e)),this._base?.style.removeProperty("--_button-shape"),this.style.removeProperty("--_button-width"),this.style.removeProperty("--_adjacent-button-width"),this.classList.remove("-adjacent-pressed"),this.removeEventListener("click",x(this,oe,"f"))}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}updated(e){if(super.updated(e),(e.has("disabled")&&this.disabled||e.has("disabledInteractive")&&this.disabledInteractive)&&(this.classList.toggle("-pressed",!1),this.classList.toggle("-resting",!1)),(e.has("toggle")||e.has("selected"))&&(this.ariaPressed=this.toggle?`${this.selected}`:null,this.toggle))for(const e of this.querySelectorAll("m3e-icon"))e.toggleAttribute("filled",this.selected)}_handleResize(){this.grouped&&!this.classList.contains("-pressed")&&(this.style.setProperty("--_button-width",`${this.clientWidth}px`),x(this,te,"m",le).call(this,!0))}};oe=new WeakMap,te=new WeakSet,re=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation()),this.toggle&&!e.defaultPrevented&&(this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?this.dispatchEvent(new Event("change",{bubbles:!0})):this.selected=!this.selected)},ae=function(e){this._base?.classList.toggle("with-selected-icon",f(e.target))},le=function(e=!1){if(!this._base)return;const t=parseFloat(getComputedStyle(this._base).borderRadius);if(!isNaN(t)||e){const o=this.clientHeight/2;(o<t||e)&&this._base?.style.setProperty("--_button-shape",`${o}px`)}},ne.styles=[Q,ee,X],g([K(".base")],ne.prototype,"_base",void 0),g([K(".elevation")],ne.prototype,"_elevation",void 0),g([K(".focus-ring")],ne.prototype,"_focusRing",void 0),g([K(".state-layer")],ne.prototype,"_stateLayer",void 0),g([K(".ripple")],ne.prototype,"_ripple",void 0),g([N({reflect:!0})],ne.prototype,"variant",void 0),g([N({reflect:!0})],ne.prototype,"shape",void 0),g([N({reflect:!0})],ne.prototype,"size",void 0),g([N({type:Boolean,reflect:!0})],ne.prototype,"toggle",void 0),g([N({type:Boolean,reflect:!0})],ne.prototype,"selected",void 0),g([$(40)],ne.prototype,"_handleResize",null),ne=g([(e=>(t,o)=>{void 0!==o?o.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)})("m3e-button")],ne);export{ne as M3eButtonElement};
|
|
468
|
+
//# sourceMappingURL=index.min.js.map
|