@vandeurenglenn/lite-elements 0.3.57 → 0.3.58

package/exports/bundle/button.js

@@ -1,10 +1,11 @@
-import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{r as a,i as s,x as o,s as l}from"./property-COFqvTC-.js";import{e as r}from"./custom-element-B_TPyPQO.js";import"./elevation.js";let n=(()=>{let n,i,c,d,h,y,b=[r("custom-button")],p=[],m=l,v=[],g=[],u=[],f=[],_=[],x=[],k=[],L=[];return class extends m{static{i=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;c=[a({attribute:"has-icon",reflect:!0})],d=[a({attribute:"has-label",reflect:!0})],h=[a({attribute:"type",reflect:!0})],y=[a({attribute:!0})],e(this,null,c,{kind:"accessor",name:"hasIcon",static:!1,private:!1,access:{has:e=>"hasIcon"in e,get:e=>e.hasIcon,set:(e,t)=>{e.hasIcon=t}},metadata:t},v,g),e(this,null,d,{kind:"accessor",name:"hasLabel",static:!1,private:!1,access:{has:e=>"hasLabel"in e,get:e=>e.hasLabel,set:(e,t)=>{e.hasLabel=t}},metadata:t},u,f),e(this,null,h,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:e=>"type"in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},_,x),e(this,null,y,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:e=>"label"in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:t},k,L),e(null,n={value:i},b,{kind:"class",name:i.name,metadata:t},null,p),i=n.value,t&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,v,void 0);get hasIcon(){return this.#e}set hasIcon(e){this.#e=e}#t=(t(this,g),t(this,u,void 0));get hasLabel(){return this.#t}set hasLabel(e){this.#t=e}#a=(t(this,f),t(this,_,"text"));get type(){return this.#a}set type(e){this.#a=e}#s=(t(this,x),t(this,k,void 0));get label(){return this.#s}set label(e){this.#s=e}static styles=[s`
+import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{r as o,i as a,x as s,s as r}from"./property-COFqvTC-.js";import{e as l}from"./custom-element-B_TPyPQO.js";import"./elevation.js";let n=(()=>{let n,i,c,h,d,y,p=[l("custom-button")],v=[],b=r,m=[],u=[],g=[],f=[],_=[],x=[],k=[],L=[];return class extends b{static{i=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(b[Symbol.metadata]??null):void 0;c=[o({attribute:"has-icon",reflect:!0})],h=[o({attribute:"has-label",reflect:!0})],d=[o({attribute:"type",reflect:!0})],y=[o({attribute:!0})],e(this,null,c,{kind:"accessor",name:"hasIcon",static:!1,private:!1,access:{has:e=>"hasIcon"in e,get:e=>e.hasIcon,set:(e,t)=>{e.hasIcon=t}},metadata:t},m,u),e(this,null,h,{kind:"accessor",name:"hasLabel",static:!1,private:!1,access:{has:e=>"hasLabel"in e,get:e=>e.hasLabel,set:(e,t)=>{e.hasLabel=t}},metadata:t},g,f),e(this,null,d,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:e=>"type"in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},_,x),e(this,null,y,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:e=>"label"in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:t},k,L),e(null,n={value:i},p,{kind:"class",name:i.name,metadata:t},null,v),i=n.value,t&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,m,void 0);get hasIcon(){return this.#e}set hasIcon(e){this.#e=e}#t=(t(this,u),t(this,g,void 0));get hasLabel(){return this.#t}set hasLabel(e){this.#t=e}#o=(t(this,f),t(this,_,"text"));get type(){return this.#o}set type(e){this.#o=e}#a=(t(this,x),t(this,k,void 0));get label(){return this.#a}set label(e){this.#a=e}static styles=[a`
       :host {
+        --custom-button-border-radius: var(--md-sys-shape-corner-large);
         color: var(--custom-button-color, --md-sys-color-on-background);
         display: flex;
 
         height: 40px;
-        border-radius: 20px;
+        border-radius: var(--custom-button-border-radius);
         position: relative;
         pointer-events: auto;
         cursor: pointer;
@@ -23,10 +24,11 @@ import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{r as a,i as s,x as o,s
         outline: none;
         cursor: pointer;
         border-radius: inherit;
-        padding: none;
+        padding: 0;
         width: inherit;
         height: inherit;
         display: flex;
+        position: relative;
         pointer-events: none;
       }
 
@@ -80,8 +82,8 @@ import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{r as a,i as s,x as o,s
       :host([type='tonal']),
       :host([type='tonal']) ::slotted(*) {
         background: var(--md-sys-color-secondary-container);
-        color: var(--md-sys-color-on-seconday-container);
-        fill: var(--md-sys-color-on-seconday-container);
+        color: var(--md-sys-color-on-secondary-container);
+        fill: var(--md-sys-color-on-secondary-container);
       }
 
       custom-elevation {
@@ -121,15 +123,15 @@ import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{r as a,i as s,x as o,s
 
       :host([disabled]) .label,
       :host([disabled]) slot[name='icon']::slotted(*) {
-        opacity: 0.38;
+        opacity: 0.28;
       }
 
       ::slotted(*) {
         pointer-events: none;
       }
 
-      :host(:focus),
-      :host(:hover) {
+      :host([type='elevated']:focus),
+      :host([type='elevated']:hover) {
         --elevation-level: 2;
       }
 
@@ -140,10 +142,59 @@ import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{r as a,i as s,x as o,s
       button * {
         pointer-events: none;
       }
-    `];connectedCallback(){const e=Array.from(this.shadowRoot.querySelectorAll("slot"));for(const t of e)t.addEventListener("slotchange",(()=>this.#o(t)));this.#o(e[0])}onChange(e,t){"label"===e&&(this.hasLabel=!!t)}#o=(t(this,L),e=>{"icon"===e.getAttribute("name")&&(this.hasIcon=0!==Array.from(e?.assignedNodes()||[]).length)});render(){return o`
+      .hover {
+        position: absolute;
+        inset: 0;
+        background-color: var(--md-sys-color-primary);
+        opacity: 0;
+        transition: opacity 200ms;
+        border-radius: var(--custom-button-border-radius);
+      }
+
+      :host(:focus) .hover,
+      :host(:hover) .hover {
+        opacity: 0.1;
+      }
+
+      :host(:active) .hover {
+        opacity: 0.2;
+      }
+
+      :host([type='filled']:focus) .hover,
+      :host([type='filled']:hover) .hover {
+        background-color: var(--md-sys-color-on-primary);
+        opacity: 0.1;
+      }
+
+      :host([type='filled']:active) .hover {
+        opacity: 0.2;
+      }
+
+      :host([type='tertiary']:focus) .hover,
+      :host([type='tertiary']:hover) .hover {
+        background-color: var(--md-sys-color-on-tertiary);
+        opacity: 0.1;
+      }
+
+      :host([type='tertiary']:active) .hover {
+        opacity: 0.2;
+      }
+
+      :host([type='tonal']:focus) .hover,
+      :host([type='tonal']:hover) .hover {
+        background-color: var(--md-sys-color-on-secondary-container);
+        opacity: 0.1;
+      }
+
+      :host([type='tonal']:active) .hover {
+        opacity: 0.2;
+      }
+    `];connectedCallback(){const e=Array.from(this.shadowRoot.querySelectorAll("slot"));for(const t of e)t.addEventListener("slotchange",(()=>this.#s(t)));this.#s(e[0])}onChange(e,t){"label"===e&&(this.hasLabel=!!t)}#s=(t(this,L),e=>{"icon"===e.getAttribute("name")&&(this.hasIcon=0!==Array.from(e?.assignedNodes()||[]).length)});render(){return s`
       <button label=${this.label}>
         <custom-elevation></custom-elevation>
         <slot name="icon"></slot>
         <span class="label">${this.label}</span>
+
+        <span class="hover"></span>
       </button>
-    `}static{t(i,p)}},i})();export{n as CustomButton};
+    `}static{t(i,v)}},i})();export{n as CustomButton};

package/exports/bundle/icon-button.js

@@ -1,13 +1,53 @@
-import{_ as t,a as o}from"./tslib.es6-B87RQr7F.js";import{r as s,i as e,x as c,s as i}from"./property-COFqvTC-.js";import{e as a}from"./custom-element-B_TPyPQO.js";import"./button.js";import"./icon.js";import"./elevation.js";let n=(()=>{let n,r,m,l=[a("custom-icon-button")],u=[],b=i,p=[],d=[];return class extends b{static{r=this}static{const o="function"==typeof Symbol&&Symbol.metadata?Object.create(b[Symbol.metadata]??null):void 0;m=[s({type:String})],t(this,null,m,{kind:"accessor",name:"icon",static:!1,private:!1,access:{has:t=>"icon"in t,get:t=>t.icon,set:(t,o)=>{t.icon=o}},metadata:o},p,d),t(null,n={value:r},l,{kind:"class",name:r.name,metadata:o},null,u),r=n.value,o&&Object.defineProperty(r,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:o})}#t=o(this,p,void 0);get icon(){return this.#t}set icon(t){this.#t=t}static styles=[e`
+import{_ as t,a as o}from"./tslib.es6-B87RQr7F.js";import{r as e,i as s,x as i,s as a}from"./property-COFqvTC-.js";import{e as r}from"./custom-element-B_TPyPQO.js";import"./button.js";import"./icon.js";import"./elevation.js";let c=(()=>{let c,n,l,m=[r("custom-icon-button")],u=[],v=a,d=[],p=[];return class extends v{static{n=this}static{const o="function"==typeof Symbol&&Symbol.metadata?Object.create(v[Symbol.metadata]??null):void 0;l=[e({type:String})],t(this,null,l,{kind:"accessor",name:"icon",static:!1,private:!1,access:{has:t=>"icon"in t,get:t=>t.icon,set:(t,o)=>{t.icon=o}},metadata:o},d,p),t(null,c={value:n},m,{kind:"class",name:n.name,metadata:o},null,u),n=c.value,o&&Object.defineProperty(n,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:o})}#t=o(this,d,void 0);get icon(){return this.#t}set icon(t){this.#t=t}static styles=[s`
       :host {
-        display: block;
+        --custom-button-border-radius: var(--md-sys-shape-corner-medium);
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--custom-button-border-radius);
+        width: 40px;
+        height: 40px;
+        cursor: pointer;
+      }
+
+      .hover {
+        position: absolute;
+        inset: 0;
+        background-color: var(--md-sys-color-primary);
+        opacity: 0;
+        transition: opacity 200ms;
+        border-radius: var(--custom-button-border-radius);
+      }
+
+      :host(:focus) .hover,
+      :host(:hover) .hover {
+        opacity: 0.1;
+      }
+
+      :host(:active) .hover {
+        opacity: 0.2;
+      }
+
+      custom-elevation {
+        --md-elevation-level: var(--elevation-level);
+      }
+
+      :host([type='elevated']) custom-elevation {
+        --elevation-level: 1;
+      }
+
+      :host(:active) {
+        --elevation-level: 0;
       }
 
       custom-icon {
         --custom-icon-color: var(--md-sys-color-on-surface);
       }
-    `];render(){return c`
-      <custom-button>
-        <custom-icon slot="icon" .icon=${this.icon}></custom-icon>
-      </custom-button>
-    `}constructor(){super(...arguments),o(this,d)}static{o(r,u)}},r})();export{n as CustomIconButton};
+    `];render(){return i`
+      <custom-elevation></custom-elevation>
+
+      <custom-icon slot="icon" .icon=${this.icon}></custom-icon>
+
+      <span class="hover"></span>
+    `}constructor(){super(...arguments),o(this,p)}static{o(n,u)}},n})();export{c as CustomIconButton};

package/exports/button.js

@@ -51,11 +51,12 @@ let CustomButton = (() => {
         static styles = [
             css `
       :host {
+        --custom-button-border-radius: var(--md-sys-shape-corner-large);
         color: var(--custom-button-color, --md-sys-color-on-background);
         display: flex;
 
         height: 40px;
-        border-radius: 20px;
+        border-radius: var(--custom-button-border-radius);
         position: relative;
         pointer-events: auto;
         cursor: pointer;
@@ -74,10 +75,11 @@ let CustomButton = (() => {
         outline: none;
         cursor: pointer;
         border-radius: inherit;
-        padding: none;
+        padding: 0;
         width: inherit;
         height: inherit;
         display: flex;
+        position: relative;
         pointer-events: none;
       }
 
@@ -131,8 +133,8 @@ let CustomButton = (() => {
       :host([type='tonal']),
       :host([type='tonal']) ::slotted(*) {
         background: var(--md-sys-color-secondary-container);
-        color: var(--md-sys-color-on-seconday-container);
-        fill: var(--md-sys-color-on-seconday-container);
+        color: var(--md-sys-color-on-secondary-container);
+        fill: var(--md-sys-color-on-secondary-container);
       }
 
       custom-elevation {
@@ -172,15 +174,15 @@ let CustomButton = (() => {
 
       :host([disabled]) .label,
       :host([disabled]) slot[name='icon']::slotted(*) {
-        opacity: 0.38;
+        opacity: 0.28;
       }
 
       ::slotted(*) {
         pointer-events: none;
       }
 
-      :host(:focus),
-      :host(:hover) {
+      :host([type='elevated']:focus),
+      :host([type='elevated']:hover) {
         --elevation-level: 2;
       }
 
@@ -191,6 +193,53 @@ let CustomButton = (() => {
       button * {
         pointer-events: none;
       }
+      .hover {
+        position: absolute;
+        inset: 0;
+        background-color: var(--md-sys-color-primary);
+        opacity: 0;
+        transition: opacity 200ms;
+        border-radius: var(--custom-button-border-radius);
+      }
+
+      :host(:focus) .hover,
+      :host(:hover) .hover {
+        opacity: 0.1;
+      }
+
+      :host(:active) .hover {
+        opacity: 0.2;
+      }
+
+      :host([type='filled']:focus) .hover,
+      :host([type='filled']:hover) .hover {
+        background-color: var(--md-sys-color-on-primary);
+        opacity: 0.1;
+      }
+
+      :host([type='filled']:active) .hover {
+        opacity: 0.2;
+      }
+
+      :host([type='tertiary']:focus) .hover,
+      :host([type='tertiary']:hover) .hover {
+        background-color: var(--md-sys-color-on-tertiary);
+        opacity: 0.1;
+      }
+
+      :host([type='tertiary']:active) .hover {
+        opacity: 0.2;
+      }
+
+      :host([type='tonal']:focus) .hover,
+      :host([type='tonal']:hover) .hover {
+        background-color: var(--md-sys-color-on-secondary-container);
+        opacity: 0.1;
+      }
+
+      :host([type='tonal']:active) .hover {
+        opacity: 0.2;
+      }
     `
         ];
         connectedCallback() {
@@ -219,6 +268,8 @@ let CustomButton = (() => {
         <custom-elevation></custom-elevation>
         <slot name="icon"></slot>
         <span class="label">${this.label}</span>
+
+        <span class="hover"></span>
       </button>
     `;
         }

package/exports/icon-button.js

@@ -30,7 +30,45 @@ let CustomIconButton = (() => {
         static styles = [
             css `
       :host {
-        display: block;
+        --custom-button-border-radius: var(--md-sys-shape-corner-medium);
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--custom-button-border-radius);
+        width: 40px;
+        height: 40px;
+        cursor: pointer;
+      }
+
+      .hover {
+        position: absolute;
+        inset: 0;
+        background-color: var(--md-sys-color-primary);
+        opacity: 0;
+        transition: opacity 200ms;
+        border-radius: var(--custom-button-border-radius);
+      }
+
+      :host(:focus) .hover,
+      :host(:hover) .hover {
+        opacity: 0.1;
+      }
+
+      :host(:active) .hover {
+        opacity: 0.2;
+      }
+
+      custom-elevation {
+        --md-elevation-level: var(--elevation-level);
+      }
+
+      :host([type='elevated']) custom-elevation {
+        --elevation-level: 1;
+      }
+
+      :host(:active) {
+        --elevation-level: 0;
       }
 
       custom-icon {
@@ -40,9 +78,11 @@ let CustomIconButton = (() => {
         ];
         render() {
             return html `
-      <custom-button>
-        <custom-icon slot="icon" .icon=${this.icon}></custom-icon>
-      </custom-button>
+      <custom-elevation></custom-elevation>
+
+      <custom-icon slot="icon" .icon=${this.icon}></custom-icon>
+
+      <span class="hover"></span>
     `;
         }
         constructor() {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vandeurenglenn/lite-elements",
-	"version": "0.3.57",
+	"version": "0.3.58",
 	"description": "set of lite elements following Material Design 3 spec",
 	"type": "module",
 	"scripts": {
@@ -24,6 +24,7 @@
 		"@vandeurenglenn/custom-shared-styles": "^0.0.20",
 		"@vandeurenglenn/flex-elements": "^1.3.2",
 		"@vandeurenglenn/lite": "^0.2.52",
+		"@vandeurenglenn/project": "^0.2.3",
 		"custom-element-decorator": "^0.6.0"
 	},
 	"devDependencies": {