@justeattakeaway/pie-icons-webc 0.3.0 → 0.4.0

package/dist/IconBackpack.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--backpack"><path d="M13.25 8V5.436a1.601 1.601 0 0 0-1.592-1.592h-.578l-.875-2.625H5.777l-.875 2.625h-.56A1.601 1.601 0 0 0 2.75 5.436V8a.875.875 0 0 0-.875.875v3.5a.875.875 0 0 0 .875.875.937.937 0 0 0 .271-.053 1.576 1.576 0 0 0 1.322.71h7.315a1.575 1.575 0 0 0 1.32-.71c.088.031.18.049.272.053a.875.875 0 0 0 .875-.875v-3.5A.875.875 0 0 0 13.25 8ZM6.723 2.531h2.554l.42 1.313H6.303l.42-1.313Zm5.25 9.783a.28.28 0 0 1-.28.28h-7.35a.28.28 0 0 1-.28-.28V5.436a.28.28 0 0 1 .28-.28h7.315a.28.28 0 0 1 .28.28l.034 6.878Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--backpack"><path d="M13.25 8V5.436a1.601 1.601 0 0 0-1.592-1.592h-.578l-.875-2.625H5.777l-.875 2.625h-.56A1.601 1.601 0 0 0 2.75 5.436V8a.875.875 0 0 0-.875.875v3.5a.875.875 0 0 0 .875.875.937.937 0 0 0 .271-.053 1.576 1.576 0 0 0 1.322.71h7.315a1.575 1.575 0 0 0 1.32-.71c.088.031.18.049.272.053a.875.875 0 0 0 .875-.875v-3.5A.875.875 0 0 0 13.25 8ZM6.723 2.531h2.554l.42 1.313H6.303l.42-1.313Zm5.25 9.783a.28.28 0 0 1-.28.28h-7.35a.28.28 0 0 1-.28-.28V5.436a.28.28 0 0 1 .28-.28h7.315a.28.28 0 0 1 .28.28l.034 6.878Z"></path></svg>';
 
 class IconBackpack extends HTMLElement {
     constructor () {

package/dist/IconBackpackLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--backpackLarge"><path d="M23.875 7.25h-3.106l-1.374-3.5h-6.79l-1.374 3.5H8.125A2.625 2.625 0 0 0 5.5 9.875v15.75a2.625 2.625 0 0 0 2.625 2.625h15.75a2.625 2.625 0 0 0 2.625-2.625V9.875a2.625 2.625 0 0 0-2.625-2.625ZM13.795 5.5h4.375l.682 1.75h-5.74l.683-1.75ZM24.75 25.625a.875.875 0 0 1-.875.875H8.125a.875.875 0 0 1-.875-.875V9.875A.875.875 0 0 1 8.125 9h15.75a.875.875 0 0 1 .875.875v15.75ZM9.875 10.75h12.25v1.75H12.5c.153.873.111 1.77-.123 2.625a1.27 1.27 0 0 1-2.415-.787 5.33 5.33 0 0 1 1.094-1.838H9.875v-1.75Zm9.363 7a31.01 31.01 0 0 0-.158-1.348.875.875 0 0 0-.744-.743h-.218a.875.875 0 0 0-.7.21l-.105.114a4.55 4.55 0 0 0-.744-.64 1.085 1.085 0 0 0-1.138 0 11.18 11.18 0 0 0-3.5 3.614.874.874 0 0 0 0 .805.875.875 0 0 0 .63.49h.166c.08 1.418.158 2.416.237 2.905a.876.876 0 0 0 .875.735h4.375a.875.875 0 0 0 .875-.726c.079-.498.157-1.505.236-2.913h.158a.874.874 0 0 0 .586-1.313 10.2 10.2 0 0 0-.831-1.19Zm-1.672 2.144v.114a75.165 75.165 0 0 1-.14 2.126h-2.843a51.947 51.947 0 0 1-.14-2.127v-.13a1.417 1.417 0 0 0-.43-.876 9.619 9.619 0 0 1 1.943-1.925c.201.193.464.473.7.744l.683.796a.875.875 0 0 0 .604.306l.052.07c-.238.238-.39.55-.429.884v.018Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--backpackLarge"><path d="M23.875 7.25h-3.106l-1.374-3.5h-6.79l-1.374 3.5H8.125A2.625 2.625 0 0 0 5.5 9.875v15.75a2.625 2.625 0 0 0 2.625 2.625h15.75a2.625 2.625 0 0 0 2.625-2.625V9.875a2.625 2.625 0 0 0-2.625-2.625ZM13.795 5.5h4.375l.682 1.75h-5.74l.683-1.75ZM24.75 25.625a.875.875 0 0 1-.875.875H8.125a.875.875 0 0 1-.875-.875V9.875A.875.875 0 0 1 8.125 9h15.75a.875.875 0 0 1 .875.875v15.75ZM9.875 10.75h12.25v1.75H12.5c.153.873.111 1.77-.123 2.625a1.27 1.27 0 0 1-2.415-.787 5.33 5.33 0 0 1 1.094-1.838H9.875v-1.75Zm9.363 7a31.01 31.01 0 0 0-.158-1.348.875.875 0 0 0-.744-.743h-.218a.875.875 0 0 0-.7.21l-.105.114a4.55 4.55 0 0 0-.744-.64 1.085 1.085 0 0 0-1.138 0 11.18 11.18 0 0 0-3.5 3.614.874.874 0 0 0 0 .805.875.875 0 0 0 .63.49h.166c.08 1.418.158 2.416.237 2.905a.876.876 0 0 0 .875.735h4.375a.875.875 0 0 0 .875-.726c.079-.498.157-1.505.236-2.913h.158a.874.874 0 0 0 .586-1.313 10.2 10.2 0 0 0-.831-1.19Zm-1.672 2.144v.114a75.165 75.165 0 0 1-.14 2.126h-2.843a51.947 51.947 0 0 1-.14-2.127v-.13a1.417 1.417 0 0 0-.43-.876 9.619 9.619 0 0 1 1.943-1.925c.201.193.464.473.7.744l.683.796a.875.875 0 0 0 .604.306l.052.07c-.238.238-.39.55-.429.884v.018Z"></path></svg>';
 
 class IconBackpackLarge extends HTMLElement {
     constructor () {

package/dist/IconBag.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bag"><path d="M12.996 4.719h-2.371V2.53L9.313 1.22H6.688L5.375 2.53V4.72H3.004l-.429 8.452a1.523 1.523 0 0 0 1.531 1.61h7.788a1.522 1.522 0 0 0 1.531-1.61l-.429-8.452ZM6.688 2.53h2.625V4.72H6.688V2.53ZM12.05 13.4a.219.219 0 0 1-.157.07H4.106a.228.228 0 0 1-.218-.219l.358-7.21h7.508l.359 7.21a.22.22 0 0 1-.062.149Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bag"><path d="M12.996 4.719h-2.371V2.53L9.313 1.22H6.688L5.375 2.53V4.72H3.004l-.429 8.452a1.523 1.523 0 0 0 1.531 1.61h7.788a1.522 1.522 0 0 0 1.531-1.61l-.429-8.452ZM6.688 2.53h2.625V4.72H6.688V2.53ZM12.05 13.4a.219.219 0 0 1-.157.07H4.106a.228.228 0 0 1-.218-.219l.358-7.21h7.508l.359 7.21a.22.22 0 0 1-.062.149Z"></path></svg>';
 
 class IconBag extends HTMLElement {
     constructor () {

package/dist/IconBagFilled.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bagFilled"><path d="M12.996 4.719h-2.371V2.53L9.313 1.22H6.688L5.375 2.53V4.72H3.004l-.429 8.452a1.523 1.523 0 0 0 1.531 1.61h7.788a1.522 1.522 0 0 0 1.531-1.61l-.429-8.452ZM6.688 2.53h2.625V4.72H6.688V2.53Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bagFilled"><path d="M12.996 4.719h-2.371V2.53L9.313 1.22H6.688L5.375 2.53V4.72H3.004l-.429 8.452a1.523 1.523 0 0 0 1.531 1.61h7.788a1.522 1.522 0 0 0 1.531-1.61l-.429-8.452ZM6.688 2.53h2.625V4.72H6.688V2.53Z"></path></svg>';
 
 class IconBagFilled extends HTMLElement {
     constructor () {

package/dist/IconBagFilledLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bagFilledLarge"><path d="M25.625 8.125h-5.25v-3.5l-1.75-1.75h-5.25l-1.75 1.75v3.5h-5.25l-.788 18.253a2.625 2.625 0 0 0 1.584 2.535c.326.14.678.212 1.033.212h15.592a2.626 2.626 0 0 0 1.899-.814 2.624 2.624 0 0 0 .718-1.933l-.788-18.253Zm-7 7.875v-3.5h1.75V16l-1.75 1.75h-5.25L11.625 16v-3.5h1.75V16h5.25Zm-5.25-11.375h5.25v3.5h-5.25v-3.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bagFilledLarge"><path d="M25.625 8.125h-5.25v-3.5l-1.75-1.75h-5.25l-1.75 1.75v3.5h-5.25l-.788 18.253a2.625 2.625 0 0 0 1.584 2.535c.326.14.678.212 1.033.212h15.592a2.626 2.626 0 0 0 1.899-.814 2.624 2.624 0 0 0 .718-1.933l-.788-18.253Zm-7 7.875v-3.5h1.75V16l-1.75 1.75h-5.25L11.625 16v-3.5h1.75V16h5.25Zm-5.25-11.375h5.25v3.5h-5.25v-3.5Z"></path></svg>';
 
 class IconBagFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconBagLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bagLarge"><path d="M13.375 17.75h5.25l1.75-1.75v-3.5h-1.75V16h-5.25v-3.5h-1.75V16l1.75 1.75Z"></path><path d="M25.625 8.125h-5.25v-3.5l-1.75-1.75h-5.25l-1.75 1.75v3.5h-5.25l-.788 18.253a2.625 2.625 0 0 0 1.584 2.535c.326.14.678.212 1.033.212h15.592a2.626 2.626 0 0 0 1.899-.814 2.624 2.624 0 0 0 .718-1.933l-.788-18.253Zm-12.25-3.5h5.25v3.5h-5.25v-3.5Zm11.051 22.479a.873.873 0 0 1-.63.271H8.204a.876.876 0 0 1-.875-.875l.796-16.625h15.75l.761 16.625a.874.874 0 0 1-.21.604Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bagLarge"><path d="M13.375 17.75h5.25l1.75-1.75v-3.5h-1.75V16h-5.25v-3.5h-1.75V16l1.75 1.75Z"></path><path d="M25.625 8.125h-5.25v-3.5l-1.75-1.75h-5.25l-1.75 1.75v3.5h-5.25l-.788 18.253a2.625 2.625 0 0 0 1.584 2.535c.326.14.678.212 1.033.212h15.592a2.626 2.626 0 0 0 1.899-.814 2.624 2.624 0 0 0 .718-1.933l-.788-18.253Zm-12.25-3.5h5.25v3.5h-5.25v-3.5Zm11.051 22.479a.873.873 0 0 1-.63.271H8.204a.876.876 0 0 1-.875-.875l.796-16.625h15.75l.761 16.625a.874.874 0 0 1-.21.604Z"></path></svg>';
 
 class IconBagLarge extends HTMLElement {
     constructor () {

package/dist/IconBallotBox.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--ballotBox"><path d="M3.625 6.469V7.78h8.75V6.47h-1.094V3.625a2.406 2.406 0 0 0-2.406-2.406H4.719v5.25H3.625ZM6.031 2.53h2.844a1.094 1.094 0 0 1 1.094 1.094v2.844H6.03V2.53Zm8.75 1.313v8.312H1.22V3.844h2.406v1.312H2.531v5.688H13.47V5.156h-1.094V3.844h2.406Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--ballotBox"><path d="M3.625 6.469V7.78h8.75V6.47h-1.094V3.625a2.406 2.406 0 0 0-2.406-2.406H4.719v5.25H3.625ZM6.031 2.53h2.844a1.094 1.094 0 0 1 1.094 1.094v2.844H6.03V2.53Zm8.75 1.313v8.312H1.22V3.844h2.406v1.312H2.531v5.688H13.47V5.156h-1.094V3.844h2.406Z"></path></svg>';
 
 class IconBallotBox extends HTMLElement {
     constructor () {

package/dist/IconBallotBoxLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--ballotBoxLarge"><path d="m17.855 7.53 1.286 1.19L16 12.115a1.189 1.189 0 0 1-1.35.286 1.217 1.217 0 0 1-.4-.277l-1.26-1.374 1.304-1.164.831.893 2.73-2.949Zm-7.98 6.72V3.75h7.875a4.375 4.375 0 0 1 4.375 4.375v6.125h1.75V16H8.125v-1.75h1.75Zm1.75 0h8.75V8.125A2.625 2.625 0 0 0 17.75 5.5h-6.125v8.75ZM28.25 9v18.375H3.75V9h4.375v1.75H5.5v8.75h21v-8.75h-2.625V9h4.375ZM26.5 25.625V21.25h-21v4.375h21Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--ballotBoxLarge"><path d="m17.855 7.53 1.286 1.19L16 12.115a1.189 1.189 0 0 1-1.35.286 1.217 1.217 0 0 1-.4-.277l-1.26-1.374 1.304-1.164.831.893 2.73-2.949Zm-7.98 6.72V3.75h7.875a4.375 4.375 0 0 1 4.375 4.375v6.125h1.75V16H8.125v-1.75h1.75Zm1.75 0h8.75V8.125A2.625 2.625 0 0 0 17.75 5.5h-6.125v8.75ZM28.25 9v18.375H3.75V9h4.375v1.75H5.5v8.75h21v-8.75h-2.625V9h4.375ZM26.5 25.625V21.25h-21v4.375h21Z"></path></svg>';
 
 class IconBallotBoxLarge extends HTMLElement {
     constructor () {

package/dist/IconBarcode.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--barcode"><path d="M3.188 12.375H1.875V2.75h1.313v9.625Zm10.5-9.625h-1.313v9.625h1.313V2.75Zm-2.626 0H9.75v7.875h1.313V2.75Zm-2.624 0H7.125v7.875h1.313V2.75Zm-2.626 0H4.5v7.875h1.313V2.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--barcode"><path d="M3.188 12.375H1.875V2.75h1.313v9.625Zm10.5-9.625h-1.313v9.625h1.313V2.75Zm-2.626 0H9.75v7.875h1.313V2.75Zm-2.624 0H7.125v7.875h1.313V2.75Zm-2.626 0H4.5v7.875h1.313V2.75Z"></path></svg>';
 
 class IconBarcode extends HTMLElement {
     constructor () {

package/dist/IconBarcodeLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--barcodeLarge"><path d="M8.125 8.125v15.75h-1.75V8.125h1.75Zm15.75 0v15.75h1.75V8.125h-1.75ZM19.5 21.25h1.75V8.125H19.5V21.25Zm-4.375 0h1.75V8.125h-1.75V21.25Zm-4.375 0h1.75V8.125h-1.75V21.25Zm17.5-16.625H23v1.75h4.375v4.375h1.75V5.5a.875.875 0 0 0-.875-.875ZM2.875 5.5v5.25h1.75V6.375H9v-1.75H3.75a.875.875 0 0 0-.875.875Zm1.75 15.75h-1.75v5.25a.875.875 0 0 0 .875.875H9v-1.75H4.625V21.25Zm22.75 4.375H23v1.75h5.25a.875.875 0 0 0 .875-.875v-5.25h-1.75v4.375Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--barcodeLarge"><path d="M8.125 8.125v15.75h-1.75V8.125h1.75Zm15.75 0v15.75h1.75V8.125h-1.75ZM19.5 21.25h1.75V8.125H19.5V21.25Zm-4.375 0h1.75V8.125h-1.75V21.25Zm-4.375 0h1.75V8.125h-1.75V21.25Zm17.5-16.625H23v1.75h4.375v4.375h1.75V5.5a.875.875 0 0 0-.875-.875ZM2.875 5.5v5.25h1.75V6.375H9v-1.75H3.75a.875.875 0 0 0-.875.875Zm1.75 15.75h-1.75v5.25a.875.875 0 0 0 .875.875H9v-1.75H4.625V21.25Zm22.75 4.375H23v1.75h5.25a.875.875 0 0 0 .875-.875v-5.25h-1.75v4.375Z"></path></svg>';
 
 class IconBarcodeLarge extends HTMLElement {
     constructor () {

package/dist/IconBasket.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--basket"><path d="M6.031 11.5 5.594 8h1.312l.438 3.5H6.03ZM9.094 8l-.438 3.5H9.97l.437-3.5H9.094ZM15 5.594v1.312h-.752l-.945 5.714a1.522 1.522 0 0 1-1.506 1.286H4.202a1.522 1.522 0 0 1-1.505-1.286l-.945-5.714H1V5.594h3.876L5.918 2.75h1.39L6.25 5.594h3.5L8.691 2.75h1.391l1.042 2.844H15Zm-2.082 1.312H3.082l.874 5.504a.219.219 0 0 0 .21.184h7.595a.219.219 0 0 0 .21-.184l.946-5.504Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--basket"><path d="M6.031 11.5 5.594 8h1.312l.438 3.5H6.03ZM9.094 8l-.438 3.5H9.97l.437-3.5H9.094ZM15 5.594v1.312h-.752l-.945 5.714a1.522 1.522 0 0 1-1.506 1.286H4.202a1.522 1.522 0 0 1-1.505-1.286l-.945-5.714H1V5.594h3.876L5.918 2.75h1.39L6.25 5.594h3.5L8.691 2.75h1.391l1.042 2.844H15Zm-2.082 1.312H3.082l.874 5.504a.219.219 0 0 0 .21.184h7.595a.219.219 0 0 0 .21-.184l.946-5.504Z"></path></svg>';
 
 class IconBasket extends HTMLElement {
     constructor () {

package/dist/IconBasketLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--basketLarge"><path d="M16.875 15.125h-1.75v7h1.75v-7Z"></path><path d="m12.518 22.125-.858-7H9.875l.875 7h1.768Z"></path><path d="m21.88 9.875-1.75-5.25h-1.846l1.75 5.25h-8.068l1.75-5.25H11.87l-1.75 5.25H2v1.75h1.873L5.84 25.126a2.625 2.625 0 0 0 2.625 2.249H23.56a2.625 2.625 0 0 0 2.625-2.249l1.943-13.501H30v-1.75h-8.12Zm2.546 14.997a.875.875 0 0 1-.875.753H8.44a.875.875 0 0 1-.875-.753L5.64 11.625h20.72l-1.934 13.247Z"></path><path d="m20.358 15.125-.85 7h1.76l.857-7h-1.767Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--basketLarge"><path d="M16.875 15.125h-1.75v7h1.75v-7Z"></path><path d="m12.518 22.125-.858-7H9.875l.875 7h1.768Z"></path><path d="m21.88 9.875-1.75-5.25h-1.846l1.75 5.25h-8.068l1.75-5.25H11.87l-1.75 5.25H2v1.75h1.873L5.84 25.126a2.625 2.625 0 0 0 2.625 2.249H23.56a2.625 2.625 0 0 0 2.625-2.249l1.943-13.501H30v-1.75h-8.12Zm2.546 14.997a.875.875 0 0 1-.875.753H8.44a.875.875 0 0 1-.875-.753L5.64 11.625h20.72l-1.934 13.247Z"></path><path d="m20.358 15.125-.85 7h1.76l.857-7h-1.767Z"></path></svg>';
 
 class IconBasketLarge extends HTMLElement {
     constructor () {

package/dist/IconBattery.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--battery"><path d="M14.781 6.25h-.875v-.875a1.54 1.54 0 0 0-1.531-1.531H2.75a1.54 1.54 0 0 0-1.531 1.531v5.25a1.54 1.54 0 0 0 1.531 1.531h9.625a1.54 1.54 0 0 0 1.531-1.531V9.75h.875v-3.5Zm-2.187 4.375a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219v-5.25a.219.219 0 0 1 .219-.219h9.625a.219.219 0 0 1 .219.219v5.25ZM3.844 6.25h1.312v3.5H3.844v-3.5Zm2.625 0H7.78v3.5H6.47v-3.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--battery"><path d="M14.781 6.25h-.875v-.875a1.54 1.54 0 0 0-1.531-1.531H2.75a1.54 1.54 0 0 0-1.531 1.531v5.25a1.54 1.54 0 0 0 1.531 1.531h9.625a1.54 1.54 0 0 0 1.531-1.531V9.75h.875v-3.5Zm-2.187 4.375a.219.219 0 0 1-.219.219H2.75a.219.219 0 0 1-.219-.219v-5.25a.219.219 0 0 1 .219-.219h9.625a.219.219 0 0 1 .219.219v5.25ZM3.844 6.25h1.312v3.5H3.844v-3.5Zm2.625 0H7.78v3.5H6.47v-3.5Z"></path></svg>';
 
 class IconBattery extends HTMLElement {
     constructor () {

package/dist/IconBatteryLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--batteryLarge"><path d="M27.375 12.5V9.875A2.625 2.625 0 0 0 24.75 7.25H5.5a2.625 2.625 0 0 0-2.625 2.625v12.25A2.625 2.625 0 0 0 5.5 24.75h19.25a2.625 2.625 0 0 0 2.625-2.625V19.5h1.75v-7h-1.75Zm-1.75 9.625a.875.875 0 0 1-.875.875H5.5a.875.875 0 0 1-.875-.875V9.875A.875.875 0 0 1 5.5 9h19.25a.875.875 0 0 1 .875.875v12.25ZM8.125 12.5h1.75v7h-1.75v-7Zm4.375 0h1.75v7H12.5v-7Zm4.375 0h1.75v7h-1.75v-7Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--batteryLarge"><path d="M27.375 12.5V9.875A2.625 2.625 0 0 0 24.75 7.25H5.5a2.625 2.625 0 0 0-2.625 2.625v12.25A2.625 2.625 0 0 0 5.5 24.75h19.25a2.625 2.625 0 0 0 2.625-2.625V19.5h1.75v-7h-1.75Zm-1.75 9.625a.875.875 0 0 1-.875.875H5.5a.875.875 0 0 1-.875-.875V9.875A.875.875 0 0 1 5.5 9h19.25a.875.875 0 0 1 .875.875v12.25ZM8.125 12.5h1.75v7h-1.75v-7Zm4.375 0h1.75v7H12.5v-7Zm4.375 0h1.75v7h-1.75v-7Z"></path></svg>';
 
 class IconBatteryLarge extends HTMLElement {
     constructor () {

package/dist/IconBike.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bike"><path d="M12.139 7.405 11 4.159a.218.218 0 0 1 0-.158.246.246 0 0 1 .158-.122l1.216-.447v-1.4l-1.627.613a1.514 1.514 0 0 0-.998 1.934l.359 1.015H9.75a2.433 2.433 0 0 0-1.925.962l-1.207 1.61-1.06-2.135h.692V4.72h-3.5V6.03h1.339l.726 1.461a2.87 2.87 0 0 0-.735-.105 2.826 2.826 0 1 0 2.826 2.818v-.201l1.969-2.66a1.111 1.111 0 0 1 .875-.438h.831l.254.718a2.844 2.844 0 1 0 1.313-.219h-.01ZM4.08 11.719a1.514 1.514 0 1 1 1.514-1.514 1.505 1.505 0 0 1-1.514 1.514Zm7.875 0a1.514 1.514 0 1 1 1.4-.933 1.505 1.505 0 0 1-1.4.933Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bike"><path d="M12.139 7.405 11 4.159a.218.218 0 0 1 0-.158.246.246 0 0 1 .158-.122l1.216-.447v-1.4l-1.627.613a1.514 1.514 0 0 0-.998 1.934l.359 1.015H9.75a2.433 2.433 0 0 0-1.925.962l-1.207 1.61-1.06-2.135h.692V4.72h-3.5V6.03h1.339l.726 1.461a2.87 2.87 0 0 0-.735-.105 2.826 2.826 0 1 0 2.826 2.818v-.201l1.969-2.66a1.111 1.111 0 0 1 .875-.438h.831l.254.718a2.844 2.844 0 1 0 1.313-.219h-.01ZM4.08 11.719a1.514 1.514 0 1 1 1.514-1.514 1.505 1.505 0 0 1-1.514 1.514Zm7.875 0a1.514 1.514 0 1 1 1.4-.933 1.505 1.505 0 0 1-1.4.933Z"></path></svg>';
 
 class IconBike extends HTMLElement {
     constructor () {

package/dist/IconBikeFilled.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bikeFilled"><path d="M12.138 7.405 11.01 4.159c0-.114 0-.228.167-.28l1.198-.447v-1.4l-1.627.613a1.523 1.523 0 0 0-.998 1.934l.36 1.015h-.36a2.433 2.433 0 0 0-1.925.962l-1.207 1.61-1.059-2.135h.691V4.72h-3.5V6.03h1.348l.717 1.461a2.87 2.87 0 0 0-.735-.105 2.826 2.826 0 1 0 2.827 2.818v-.201l1.968-2.66a1.111 1.111 0 0 1 .875-.438h.832l.253.718a2.844 2.844 0 1 0 1.313-.219h-.009Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bikeFilled"><path d="M12.138 7.405 11.01 4.159c0-.114 0-.228.167-.28l1.198-.447v-1.4l-1.627.613a1.523 1.523 0 0 0-.998 1.934l.36 1.015h-.36a2.433 2.433 0 0 0-1.925.962l-1.207 1.61-1.059-2.135h.691V4.72h-3.5V6.03h1.348l.717 1.461a2.87 2.87 0 0 0-.735-.105 2.826 2.826 0 1 0 2.827 2.818v-.201l1.968-2.66a1.111 1.111 0 0 1 .875-.438h.832l.253.718a2.844 2.844 0 1 0 1.313-.219h-.009Z"></path></svg>';
 
 class IconBikeFilled extends HTMLElement {
     constructor () {

package/dist/IconBikeFilledLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bikeFilledLarge"><g clip-path="url(#prefix__clip0_1380_970)"><path d="M21.661 8.125a.875.875 0 0 1 .534-1.068l.875-.306v-1.89l-1.444.534a2.625 2.625 0 0 0-1.61 3.185l.359 1.295h-.201a3.5 3.5 0 0 0-3.002 1.697L14.47 16l-1.566-5.25h1.347V9H8.449L9 10.75h2.039l1.54 5.162a5.687 5.687 0 1 0 1.671 4.025 4.77 4.77 0 0 0 0-.498c-.49.449-1.097.752-1.75.875-.188.03-.378.048-.569.052L9 20.323l-.586-1.75h3.5c.112-.006.223-.02.332-.044a1.75 1.75 0 0 0 .971-.56 1.7 1.7 0 0 0 .193-.245l.236-.385c.182.366.325.75.429 1.146.086.312.145.631.175.954a3.29 3.29 0 0 0 .674-.797l3.701-6.142a1.75 1.75 0 0 1 1.505-.875h.709l.927 3.246a5.68 5.68 0 0 1 1.672-.542L21.66 8.125Z"></path><path d="M24.347 14.25a5.94 5.94 0 0 0-.875.079l.49 1.75c.088.288 1.252 4.331 1.252 4.331h-1.838l-1.094-3.78-.498-1.75a5.67 5.67 0 1 0 2.563-.63Z"></path><path d="M7.285 10.75 6.699 9h-4.41l.586 1.75h4.41Z"></path><path d="M5.229 13.375h2.93l-.585-1.75h-2.94l.595 1.75Z"></path></g><defs><clipPath id="prefix__clip0_1380_970"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bikeFilledLarge"><g clip-path="url(#prefix__clip0_1380_970)"><path d="M21.661 8.125a.875.875 0 0 1 .534-1.068l.875-.306v-1.89l-1.444.534a2.625 2.625 0 0 0-1.61 3.185l.359 1.295h-.201a3.5 3.5 0 0 0-3.002 1.697L14.47 16l-1.566-5.25h1.347V9H8.449L9 10.75h2.039l1.54 5.162a5.687 5.687 0 1 0 1.671 4.025 4.77 4.77 0 0 0 0-.498c-.49.449-1.097.752-1.75.875-.188.03-.378.048-.569.052L9 20.323l-.586-1.75h3.5c.112-.006.223-.02.332-.044a1.75 1.75 0 0 0 .971-.56 1.7 1.7 0 0 0 .193-.245l.236-.385c.182.366.325.75.429 1.146.086.312.145.631.175.954a3.29 3.29 0 0 0 .674-.797l3.701-6.142a1.75 1.75 0 0 1 1.505-.875h.709l.927 3.246a5.68 5.68 0 0 1 1.672-.542L21.66 8.125Z"></path><path d="M24.347 14.25a5.94 5.94 0 0 0-.875.079l.49 1.75c.088.288 1.252 4.331 1.252 4.331h-1.838l-1.094-3.78-.498-1.75a5.67 5.67 0 1 0 2.563-.63Z"></path><path d="M7.285 10.75 6.699 9h-4.41l.586 1.75h4.41Z"></path><path d="M5.229 13.375h2.93l-.585-1.75h-2.94l.595 1.75Z"></path></g><defs><clipPath id="prefix__clip0_1380_970"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 class IconBikeFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconBikeLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bikeLarge"><g clip-path="url(#prefix__clip0_2_1966)"><path fill-rule="evenodd" d="M23.438 14.329a5.94 5.94 0 0 1 .875-.079 5.687 5.687 0 1 1-2.547.613l-.927-3.238h-.709a1.75 1.75 0 0 0-1.505.875l-3.701 6.142c-.184.298-.41.566-.674.797a4.77 4.77 0 0 1 0 .498 5.688 5.688 0 1 1-1.671-4.025l-1.54-5.162H9L8.414 9h5.836v1.75h-1.383L14.434 16l2.677-4.428a3.5 3.5 0 0 1 3.002-1.697h.2l-.367-1.295a2.625 2.625 0 0 1 1.61-3.185L23 4.861v1.864l-.875.306a.875.875 0 0 0-.499 1.094l1.811 6.204ZM6.521 23.314a3.92 3.92 0 0 0 5.925-3.035 3.07 3.07 0 0 1-.568.061H8.983l-.587-1.75h3.5c.113-.004.224-.022.333-.052a3.938 3.938 0 1 0-5.707 4.776Zm15.413-.23c.685.517 1.52.794 2.378.791a3.937 3.937 0 0 0 0-7.875 2.987 2.987 0 0 0-.438.044l1.286 4.331h-1.82l-1.094-3.78a3.928 3.928 0 0 0-.312 6.49Z" clip-rule="evenodd"></path><path d="M2.84 10.75h4.41L6.664 9h-4.41l.586 1.75Z"></path><path d="M7.539 11.625h-2.94l.595 1.75h2.931l-.586-1.75Z"></path></g><defs><clipPath id="prefix__clip0_2_1966"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bikeLarge"><g clip-path="url(#prefix__clip0_2_1966)"><path fill-rule="evenodd" d="M23.438 14.329a5.94 5.94 0 0 1 .875-.079 5.687 5.687 0 1 1-2.547.613l-.927-3.238h-.709a1.75 1.75 0 0 0-1.505.875l-3.701 6.142c-.184.298-.41.566-.674.797a4.77 4.77 0 0 1 0 .498 5.688 5.688 0 1 1-1.671-4.025l-1.54-5.162H9L8.414 9h5.836v1.75h-1.383L14.434 16l2.677-4.428a3.5 3.5 0 0 1 3.002-1.697h.2l-.367-1.295a2.625 2.625 0 0 1 1.61-3.185L23 4.861v1.864l-.875.306a.875.875 0 0 0-.499 1.094l1.811 6.204ZM6.521 23.314a3.92 3.92 0 0 0 5.925-3.035 3.07 3.07 0 0 1-.568.061H8.983l-.587-1.75h3.5c.113-.004.224-.022.333-.052a3.938 3.938 0 1 0-5.707 4.776Zm15.413-.23c.685.517 1.52.794 2.378.791a3.937 3.937 0 0 0 0-7.875 2.987 2.987 0 0 0-.438.044l1.286 4.331h-1.82l-1.094-3.78a3.928 3.928 0 0 0-.312 6.49Z" clip-rule="evenodd"></path><path d="M2.84 10.75h4.41L6.664 9h-4.41l.586 1.75Z"></path><path d="M7.539 11.625h-2.94l.595 1.75h2.931l-.586-1.75Z"></path></g><defs><clipPath id="prefix__clip0_2_1966"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 class IconBikeLarge extends HTMLElement {
     constructor () {

package/dist/IconBookmark.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bookmark"><g clip-path="url(#prefix__clip0_7724_3883)"><path fill-rule="evenodd" d="M3.835 1.84h8.321c1.085 0 1.969.884 1.969 1.969v10.57L8 11.465l-6.134 2.914V3.809c0-1.085.884-1.969 1.969-1.969Zm4.174 8.172 4.812 2.293V3.809a.661.661 0 0 0-.656-.657H3.844a.661.661 0 0 0-.657.657v8.496l4.822-2.293ZM8 4.492l.709 1.452 1.592.227L9.155 7.3l.271 1.584L8 8.13l-1.426.753.28-1.584-1.155-1.129 1.592-.227L8 4.49Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_7724_3883"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bookmark"><g clip-path="url(#prefix__clip0_7724_3883)"><path fill-rule="evenodd" d="M3.835 1.84h8.321c1.085 0 1.969.884 1.969 1.969v10.57L8 11.465l-6.134 2.914V3.809c0-1.085.884-1.969 1.969-1.969Zm4.174 8.172 4.812 2.293V3.809a.661.661 0 0 0-.656-.657H3.844a.661.661 0 0 0-.657.657v8.496l4.822-2.293ZM8 4.492l.709 1.452 1.592.227L9.155 7.3l.271 1.584L8 8.13l-1.426.753.28-1.584-1.155-1.129 1.592-.227L8 4.49Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_7724_3883"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconBookmark extends HTMLElement {
     constructor () {

package/dist/IconBookmarkFilled.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bookmarkFilled"><g clip-path="url(#prefix__clip0_7724_3886)"><path fill-rule="evenodd" d="M3.835 1.84h8.321c1.085 0 1.969.884 1.969 1.969v10.57L8 11.465l-6.134 2.914V3.809c0-1.085.884-1.969 1.969-1.969ZM8 4.491l.709 1.453 1.592.227L9.155 7.3l.271 1.584L8 8.13l-1.426.753.28-1.584-1.155-1.129 1.592-.227L8 4.49Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_7724_3886"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bookmarkFilled"><g clip-path="url(#prefix__clip0_7724_3886)"><path fill-rule="evenodd" d="M3.835 1.84h8.321c1.085 0 1.969.884 1.969 1.969v10.57L8 11.465l-6.134 2.914V3.809c0-1.085.884-1.969 1.969-1.969ZM8 4.491l.709 1.453 1.592.227L9.155 7.3l.271 1.584L8 8.13l-1.426.753.28-1.584-1.155-1.129 1.592-.227L8 4.49Z" clip-rule="evenodd"></path></g><defs><clipPath id="prefix__clip0_7724_3886"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconBookmarkFilled extends HTMLElement {
     constructor () {

package/dist/IconBookmarkFilledLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bookmarkFilledLarge"><path d="m17.636 14.329.578-.56h.017l1.015-.99-1.4-.21-.796-.113-.359-.717-.63-1.27-.63 1.27-.358.717-.797.114-1.4.21 1.015.989.578.56-.14.796-.236 1.4 1.25-.656.71-.377.708.377 1.252.656-.237-1.4-.14-.796Z"></path><path fill-rule="evenodd" d="M7.268 4.188h17.5a2.633 2.633 0 0 1 2.625 2.625v21.542l-11.358-5.688-11.392 5.688V6.812a2.633 2.633 0 0 1 2.625-2.625Zm13.72 7.297h-.035a.745.745 0 0 1 .62.516.764.764 0 0 1-.192.779l-2.126 2.074.508 2.922a.77.77 0 0 1-.762.901.749.749 0 0 1-.358-.087l-2.625-1.383-2.625 1.383a.766.766 0 0 1-.814-.061.785.785 0 0 1-.306-.753l.507-2.922-2.126-2.074A.734.734 0 0 1 10.46 12a.77.77 0 0 1 .622-.516l2.94-.429 1.32-2.66c.132-.262.403-.394.692-.394.289 0 .56.132.691.394l1.322 2.66 2.94.429Z" clip-rule="evenodd"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bookmarkFilledLarge"><path d="m17.636 14.329.578-.56h.017l1.015-.99-1.4-.21-.796-.113-.359-.717-.63-1.27-.63 1.27-.358.717-.797.114-1.4.21 1.015.989.578.56-.14.796-.236 1.4 1.25-.656.71-.377.708.377 1.252.656-.237-1.4-.14-.796Z"></path><path fill-rule="evenodd" d="M7.268 4.188h17.5a2.633 2.633 0 0 1 2.625 2.625v21.542l-11.358-5.688-11.392 5.688V6.812a2.633 2.633 0 0 1 2.625-2.625Zm13.72 7.297h-.035a.745.745 0 0 1 .62.516.764.764 0 0 1-.192.779l-2.126 2.074.508 2.922a.77.77 0 0 1-.762.901.749.749 0 0 1-.358-.087l-2.625-1.383-2.625 1.383a.766.766 0 0 1-.814-.061.785.785 0 0 1-.306-.753l.507-2.922-2.126-2.074A.734.734 0 0 1 10.46 12a.77.77 0 0 1 .622-.516l2.94-.429 1.32-2.66c.132-.262.403-.394.692-.394.289 0 .56.132.691.394l1.322 2.66 2.94.429Z" clip-rule="evenodd"></path></svg>';
 
 class IconBookmarkFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconBookmarkLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bookmarkLarge"><path d="m20.988 11.485-2.94-.429-1.322-2.66c-.13-.262-.402-.394-.69-.394-.29 0-.56.132-.692.394l-1.321 2.66-2.94.429a.77.77 0 0 0-.622.516.734.734 0 0 0 .193.779l2.126 2.074-.507 2.922a.785.785 0 0 0 .306.753.765.765 0 0 0 .814.061l2.625-1.383 2.625 1.383a.75.75 0 0 0 .358.087.77.77 0 0 0 .761-.901l-.507-2.922 2.126-2.074c.21-.21.28-.507.193-.779a.745.745 0 0 0-.621-.516h.035Zm-2.774 2.284-.578.56.14.796.237 1.4-1.252-.656-.708-.377-.71.377-1.25.656.236-1.4.14-.796-.578-.56-1.015-.989 1.4-.21.797-.114.358-.717.63-1.269.63 1.269.36.717.795.114 1.4.21-1.015.989h-.017Z"></path><path d="M24.768 4.188h-17.5a2.633 2.633 0 0 0-2.625 2.625v21.542l11.392-5.688 11.358 5.688V6.812a2.633 2.633 0 0 0-2.625-2.625Zm.875 21.332-9.608-4.813-9.642 4.813V6.813c0-.482.393-.875.875-.875h17.5c.48 0 .875.393.875.875V25.52Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bookmarkLarge"><path d="m20.988 11.485-2.94-.429-1.322-2.66c-.13-.262-.402-.394-.69-.394-.29 0-.56.132-.692.394l-1.321 2.66-2.94.429a.77.77 0 0 0-.622.516.734.734 0 0 0 .193.779l2.126 2.074-.507 2.922a.785.785 0 0 0 .306.753.765.765 0 0 0 .814.061l2.625-1.383 2.625 1.383a.75.75 0 0 0 .358.087.77.77 0 0 0 .761-.901l-.507-2.922 2.126-2.074c.21-.21.28-.507.193-.779a.745.745 0 0 0-.621-.516h.035Zm-2.774 2.284-.578.56.14.796.237 1.4-1.252-.656-.708-.377-.71.377-1.25.656.236-1.4.14-.796-.578-.56-1.015-.989 1.4-.21.797-.114.358-.717.63-1.269.63 1.269.36.717.795.114 1.4.21-1.015.989h-.017Z"></path><path d="M24.768 4.188h-17.5a2.633 2.633 0 0 0-2.625 2.625v21.542l11.392-5.688 11.358 5.688V6.812a2.633 2.633 0 0 0-2.625-2.625Zm.875 21.332-9.608-4.813-9.642 4.813V6.813c0-.482.393-.875.875-.875h17.5c.48 0 .875.393.875.875V25.52Z"></path></svg>';
 
 class IconBookmarkLarge extends HTMLElement {
     constructor () {

package/dist/IconBrandHighlight.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--brandHighlight"><path d="m11.579 8.928-.359-.43v-.157c0-.332 0-.673-.044-.953a6.413 6.413 0 0 0 0-.665.648.648 0 0 0-.56-.56h-.166a.647.647 0 0 0-.726.56v.236A7.49 7.49 0 0 0 8.34 5.734a.875.875 0 0 0-.936 0 11.874 11.874 0 0 0-3.78 3.946.656.656 0 0 0 .411.945l.438.061v.097c.079 1.662.175 2.87.262 3.412a.665.665 0 0 0 .648.551h-.009 4.944a.657.657 0 0 0 .638-.551c.15-1.123.24-2.254.272-3.386v-.105l.429-.079a.665.665 0 0 0 .446-.98 6.603 6.603 0 0 0-.525-.717ZM9.95 10.625v.131c-.078 1.374-.14 2.205-.192 2.695h-3.78c-.07-.621-.131-1.566-.193-2.721v-.105a1.33 1.33 0 0 0-.595-.954A10.579 10.579 0 0 1 7.86 7.046c.219.184.481.473.875.875l.91.954c.093.1.216.167.35.193l.149.218.332.412a1.372 1.372 0 0 0-.525.927Zm-1.295-7H7.344V1h1.312v2.625Zm2.345 1.61-1.023-.823 1.67-2.073 1.024.822-1.67 2.074Zm-5.985 0L3.328 3.161 4.35 2.34 6.04 4.43l-1.024.805Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--brandHighlight"><path d="m11.579 8.928-.359-.43v-.157c0-.332 0-.673-.044-.953a6.413 6.413 0 0 0 0-.665.648.648 0 0 0-.56-.56h-.166a.647.647 0 0 0-.726.56v.236A7.49 7.49 0 0 0 8.34 5.734a.875.875 0 0 0-.936 0 11.874 11.874 0 0 0-3.78 3.946.656.656 0 0 0 .411.945l.438.061v.097c.079 1.662.175 2.87.262 3.412a.665.665 0 0 0 .648.551h-.009 4.944a.657.657 0 0 0 .638-.551c.15-1.123.24-2.254.272-3.386v-.105l.429-.079a.665.665 0 0 0 .446-.98 6.603 6.603 0 0 0-.525-.717ZM9.95 10.625v.131c-.078 1.374-.14 2.205-.192 2.695h-3.78c-.07-.621-.131-1.566-.193-2.721v-.105a1.33 1.33 0 0 0-.595-.954A10.579 10.579 0 0 1 7.86 7.046c.219.184.481.473.875.875l.91.954c.093.1.216.167.35.193l.149.218.332.412a1.372 1.372 0 0 0-.525.927Zm-1.295-7H7.344V1h1.312v2.625Zm2.345 1.61-1.023-.823 1.67-2.073 1.024.822-1.67 2.074Zm-5.985 0L3.328 3.161 4.35 2.34 6.04 4.43l-1.024.805Z"></path></svg>';
 
 class IconBrandHighlight extends HTMLElement {
     constructor () {

package/dist/IconBrandHighlightLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--brandHighlightLarge"><path d="M10.453 29.125a.875.875 0 0 1-.875-.726C9.394 27.27 9.184 24.75 9 21.25v-.21a.63.63 0 0 0-.464-.429l-.988-.175a.874.874 0 0 1-.587-1.33 25.988 25.988 0 0 1 8.348-8.155 1.391 1.391 0 0 1 1.426 0 15.515 15.515 0 0 1 2.835 2.494l.875.875.227-1.627a.875.875 0 0 1 .972-.744h.105c.081-.008.163-.008.245 0a.875.875 0 0 1 .761.744c.048.444.069.891.061 1.338 0 .63 0 1.339.088 2.056v.386l.113.166.858.954c.441.46.845.954 1.207 1.478a.875.875 0 0 1-.612 1.304l-.971.166a.621.621 0 0 0-.473.482v.227c-.245 4.375-.463 6.291-.604 7.105a.875.875 0 0 1-.875.726l-11.086.044h-.008ZM9.149 18.984a2.354 2.354 0 0 1 1.601 1.89v.271c.149 2.756.315 4.944.473 6.23h9.624c.114-.971.29-2.8.473-6.186v-.263a2.371 2.371 0 0 1 1.47-1.907l-.21-.236a12.977 12.977 0 0 1-.875-1.042l-.315-.437a.874.874 0 0 1-.131-.289.875.875 0 0 1-.753-.236l-2.056-1.995A18.377 18.377 0 0 0 16 12.57a23.765 23.765 0 0 0-6.851 6.414Zm7.726-16.109h-1.75V7.95h1.75V2.875Zm7.429 3.885-1.444-.997-2.774 4.007 1.444.98 2.774-3.99ZM11.94 9.796 9.131 5.763l-1.435.997 2.809 4.034 1.435-.998Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--brandHighlightLarge"><path d="M10.453 29.125a.875.875 0 0 1-.875-.726C9.394 27.27 9.184 24.75 9 21.25v-.21a.63.63 0 0 0-.464-.429l-.988-.175a.874.874 0 0 1-.587-1.33 25.988 25.988 0 0 1 8.348-8.155 1.391 1.391 0 0 1 1.426 0 15.515 15.515 0 0 1 2.835 2.494l.875.875.227-1.627a.875.875 0 0 1 .972-.744h.105c.081-.008.163-.008.245 0a.875.875 0 0 1 .761.744c.048.444.069.891.061 1.338 0 .63 0 1.339.088 2.056v.386l.113.166.858.954c.441.46.845.954 1.207 1.478a.875.875 0 0 1-.612 1.304l-.971.166a.621.621 0 0 0-.473.482v.227c-.245 4.375-.463 6.291-.604 7.105a.875.875 0 0 1-.875.726l-11.086.044h-.008ZM9.149 18.984a2.354 2.354 0 0 1 1.601 1.89v.271c.149 2.756.315 4.944.473 6.23h9.624c.114-.971.29-2.8.473-6.186v-.263a2.371 2.371 0 0 1 1.47-1.907l-.21-.236a12.977 12.977 0 0 1-.875-1.042l-.315-.437a.874.874 0 0 1-.131-.289.875.875 0 0 1-.753-.236l-2.056-1.995A18.377 18.377 0 0 0 16 12.57a23.765 23.765 0 0 0-6.851 6.414Zm7.726-16.109h-1.75V7.95h1.75V2.875Zm7.429 3.885-1.444-.997-2.774 4.007 1.444.98 2.774-3.99ZM11.94 9.796 9.131 5.763l-1.435.997 2.809 4.034 1.435-.998Z"></path></svg>';
 
 class IconBrandHighlightLarge extends HTMLElement {
     constructor () {

package/dist/IconBug.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bug"><path d="m12.156 5.83 1.969-1.243V3.03L11.5 4.719h-.245a3.273 3.273 0 0 0-6.423 0h-.288L1.875 3.03v1.557L3.844 5.83v1.514H1v1.312h2.844v1.514l-1.969 1.242v1.558l2.109-1.339a4.139 4.139 0 0 0 8.032 0l2.109 1.339v-1.558l-1.969-1.242V8.656H15V7.344h-2.844V5.83ZM8 3.406A1.96 1.96 0 0 1 9.846 4.72H6.154A1.96 1.96 0 0 1 8 3.406Zm2.844 7.219a2.844 2.844 0 0 1-5.688 0V6.031h5.688v4.594Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bug"><path d="m12.156 5.83 1.969-1.243V3.03L11.5 4.719h-.245a3.273 3.273 0 0 0-6.423 0h-.288L1.875 3.03v1.557L3.844 5.83v1.514H1v1.312h2.844v1.514l-1.969 1.242v1.558l2.109-1.339a4.139 4.139 0 0 0 8.032 0l2.109 1.339v-1.558l-1.969-1.242V8.656H15V7.344h-2.844V5.83ZM8 3.406A1.96 1.96 0 0 1 9.846 4.72H6.154A1.96 1.96 0 0 1 8 3.406Zm2.844 7.219a2.844 2.844 0 0 1-5.688 0V6.031h5.688v4.594Z"></path></svg>';
 
 class IconBug extends HTMLElement {
     constructor () {

package/dist/IconBugLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bugLarge"><path d="m23.875 12.045 3.5-2.8v-2.24l-3.587 2.87h-1.75a6.125 6.125 0 0 0-12.093 0h-1.75l-3.57-2.87v2.24l3.5 2.8V16H3.75v1.75h4.375v3.938L5.5 23.805v2.24l3.001-2.398a7.875 7.875 0 0 0 14.998 0l3.001 2.398v-2.24l-2.625-2.117V17.75h4.375V16h-4.375v-3.955ZM16 6.375a4.375 4.375 0 0 1 4.288 3.5h-8.575A4.375 4.375 0 0 1 16 6.375Zm6.125 14.875a6.125 6.125 0 0 1-5.25 6.055v-10.43h-1.75v10.43a6.125 6.125 0 0 1-5.25-6.055v-9.625h12.25v9.625Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bugLarge"><path d="m23.875 12.045 3.5-2.8v-2.24l-3.587 2.87h-1.75a6.125 6.125 0 0 0-12.093 0h-1.75l-3.57-2.87v2.24l3.5 2.8V16H3.75v1.75h4.375v3.938L5.5 23.805v2.24l3.001-2.398a7.875 7.875 0 0 0 14.998 0l3.001 2.398v-2.24l-2.625-2.117V17.75h4.375V16h-4.375v-3.955ZM16 6.375a4.375 4.375 0 0 1 4.288 3.5h-8.575A4.375 4.375 0 0 1 16 6.375Zm6.125 14.875a6.125 6.125 0 0 1-5.25 6.055v-10.43h-1.75v10.43a6.125 6.125 0 0 1-5.25-6.055v-9.625h12.25v9.625Z"></path></svg>';
 
 class IconBugLarge extends HTMLElement {
     constructor () {

package/dist/IconBulbLightning.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bulbLightning"><path d="M10.162 13.469H5.838l.35 1.312h3.622l.35-1.312Z"></path><path d="m5.375 10.117.35 2.04h4.611l.29-2.048c.07-.393.267-.752.56-1.024a4.523 4.523 0 0 0 1.408-3.273 4.594 4.594 0 0 0-9.126-.76A4.533 4.533 0 0 0 4.77 9.067c.306.278.517.645.604 1.05Zm-.612-4.856a3.281 3.281 0 0 1 6.518.551 3.239 3.239 0 0 1-.988 2.337c-.49.47-.821 1.082-.945 1.75l-.158.954H6.801l-.148-.945a3.238 3.238 0 0 0-.963-1.75 3.281 3.281 0 0 1-.927-2.897Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--bulbLightning"><path d="M10.162 13.469H5.838l.35 1.312h3.622l.35-1.312Z"></path><path d="m5.375 10.117.35 2.04h4.611l.29-2.048c.07-.393.267-.752.56-1.024a4.523 4.523 0 0 0 1.408-3.273 4.594 4.594 0 0 0-9.126-.76A4.533 4.533 0 0 0 4.77 9.067c.306.278.517.645.604 1.05Zm-.612-4.856a3.281 3.281 0 0 1 6.518.551 3.239 3.239 0 0 1-.988 2.337c-.49.47-.821 1.082-.945 1.75l-.158.954H6.801l-.148-.945a3.238 3.238 0 0 0-.963-1.75 3.281 3.281 0 0 1-.927-2.897Z"></path></svg>';
 
 class IconBulbLightning extends HTMLElement {
     constructor () {

package/dist/IconBulbLightningLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bulbLightningLarge"><path d="m10.96 20.891.665 3.859h8.75l.639-3.867a4.489 4.489 0 0 1 1.33-2.407 9.083 9.083 0 0 0-.63-13.562 9.17 9.17 0 0 0-7.692-1.838 9.1 9.1 0 0 0-4.427 15.365 4.655 4.655 0 0 1 1.365 2.45ZM8.746 10.75a7.359 7.359 0 1 1 14.041 4.085 7.271 7.271 0 0 1-1.642 2.399 6.196 6.196 0 0 0-1.829 3.368L18.914 23h-5.828l-.402-2.398A6.247 6.247 0 0 0 10.82 17.2a7.324 7.324 0 0 1-2.074-6.449Z"></path><path d="m16 17.75 3.027-5.758H16V8.125l-3.028 5.801H16v3.824Z"></path><path d="M20.2 26.5h-8.4l.463 1.75h7.473l.464-1.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--bulbLightningLarge"><path d="m10.96 20.891.665 3.859h8.75l.639-3.867a4.489 4.489 0 0 1 1.33-2.407 9.083 9.083 0 0 0-.63-13.562 9.17 9.17 0 0 0-7.692-1.838 9.1 9.1 0 0 0-4.427 15.365 4.655 4.655 0 0 1 1.365 2.45ZM8.746 10.75a7.359 7.359 0 1 1 14.041 4.085 7.271 7.271 0 0 1-1.642 2.399 6.196 6.196 0 0 0-1.829 3.368L18.914 23h-5.828l-.402-2.398A6.247 6.247 0 0 0 10.82 17.2a7.324 7.324 0 0 1-2.074-6.449Z"></path><path d="m16 17.75 3.027-5.758H16V8.125l-3.028 5.801H16v3.824Z"></path><path d="M20.2 26.5h-8.4l.463 1.75h7.473l.464-1.75Z"></path></svg>';
 
 class IconBulbLightningLarge extends HTMLElement {
     constructor () {

package/dist/IconCalendar.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--calendar"><path d="M11.447 6.469H4.614L5.27 7.78h5.521l.656-1.312Z"></path><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625Zm1.313 7.656a1.969 1.969 0 0 1-1.969 1.969H3.406V4.28H4.72v1.094H6.03V4.281H9.97v1.094h1.312V4.281h1.313v6.344Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--calendar"><path d="M11.447 6.469H4.614L5.27 7.78h5.521l.656-1.312Z"></path><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625Zm1.313 7.656a1.969 1.969 0 0 1-1.969 1.969H3.406V4.28H4.72v1.094H6.03V4.281H9.97v1.094h1.312V4.281h1.313v6.344Z"></path></svg>';
 
 class IconCalendar extends HTMLElement {
     constructor () {

package/dist/IconCalendarAdd.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--calendarAdd"><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625Zm1.313 7.656a1.969 1.969 0 0 1-1.969 1.969H3.406V4.28H4.72v1.094H6.03V4.281H9.97v1.094h1.312V4.281h1.313v6.344Z"></path><path d="m10.625 8.07-1.969.009V6.1H7.344V8.07H5.375v1.313l1.969-.018v1.986h1.312V9.382h1.969V8.07Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--calendarAdd"><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625Zm1.313 7.656a1.969 1.969 0 0 1-1.969 1.969H3.406V4.28H4.72v1.094H6.03V4.281H9.97v1.094h1.312V4.281h1.313v6.344Z"></path><path d="m10.625 8.07-1.969.009V6.1H7.344V8.07H5.375v1.313l1.969-.018v1.986h1.312V9.382h1.969V8.07Z"></path></svg>';
 
 class IconCalendarAdd extends HTMLElement {
     constructor () {

package/dist/IconCalendarAddLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--calendarAddLarge"><path d="M10.327 12.474h11.46l.873-1.746H9.454l.873 1.746Z"></path><path d="M22.075 6.364V4.618h-1.746v1.746h-8.728V4.618H9.855v1.746H4.618v20.948h18.33a4.364 4.364 0 0 0 4.364-4.364V6.364h-5.237Zm3.491 16.584a2.618 2.618 0 0 1-2.618 2.618H6.364V8.11h3.491v.873h1.746V8.11h8.728v.873h1.746V8.11h3.491v14.838Z"></path><path d="M19.928 18.147h-3.055v-3.055h-1.746v3.055h-3.055v1.746h3.055v3.055h1.746v-3.055h3.055v-1.746Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--calendarAddLarge"><path d="M10.327 12.474h11.46l.873-1.746H9.454l.873 1.746Z"></path><path d="M22.075 6.364V4.618h-1.746v1.746h-8.728V4.618H9.855v1.746H4.618v20.948h18.33a4.364 4.364 0 0 0 4.364-4.364V6.364h-5.237Zm3.491 16.584a2.618 2.618 0 0 1-2.618 2.618H6.364V8.11h3.491v.873h1.746V8.11h8.728v.873h1.746V8.11h3.491v14.838Z"></path><path d="M19.928 18.147h-3.055v-3.055h-1.746v3.055h-3.055v1.746h3.055v3.055h1.746v-3.055h3.055v-1.746Z"></path></svg>';
 
 class IconCalendarAddLarge extends HTMLElement {
     constructor () {

package/dist/IconCalendarAlert.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--calendarAlert"><path d="M11.273 2.842V1.75h-1.31v1.09H6.037v-1.09H4.727v1.09H2.109v10.91H10.6a3.273 3.273 0 0 0 3.273-3.272V2.842h-2.6Zm1.31 7.637a1.964 1.964 0 0 1-1.982 1.964H3.418V4.15h1.309v1.09h1.31v-1.09h3.927v1.09h1.31v-1.09h1.308v6.328Z"></path><path d="M8.655 6.263h-1.31v2.619h1.31V6.263Z"></path><path d="M8 11.5a.873.873 0 1 0 0-1.746.873.873 0 0 0 0 1.746Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--calendarAlert"><path d="M11.273 2.842V1.75h-1.31v1.09H6.037v-1.09H4.727v1.09H2.109v10.91H10.6a3.273 3.273 0 0 0 3.273-3.272V2.842h-2.6Zm1.31 7.637a1.964 1.964 0 0 1-1.982 1.964H3.418V4.15h1.309v1.09h1.31v-1.09h3.927v1.09h1.31v-1.09h1.308v6.328Z"></path><path d="M8.655 6.263h-1.31v2.619h1.31V6.263Z"></path><path d="M8 11.5a.873.873 0 1 0 0-1.746.873.873 0 0 0 0 1.746Z"></path></svg>';
 
 class IconCalendarAlert extends HTMLElement {
     constructor () {

package/dist/IconCalendarAlertLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--calendarAlertLarge"><path d="M10.327 12.474h11.46l.873-1.746H9.454l.873 1.746Z"></path><path d="M22.075 6.364V4.618h-1.746v1.746h-8.728V4.618H9.855v1.746H4.618v20.948h18.33a4.364 4.364 0 0 0 4.364-4.364V6.364h-5.237Zm3.491 16.584a2.618 2.618 0 0 1-2.618 2.618H6.364V8.11h3.491v.873h1.746V8.11h8.728v.873h1.746V8.11h3.491v14.838Z"></path><path d="M16.873 14.22h-1.746v5.236h1.746V14.22Z"></path><path d="M16 23.82a1.31 1.31 0 1 0 0-2.618 1.31 1.31 0 0 0 0 2.618Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--calendarAlertLarge"><path d="M10.327 12.474h11.46l.873-1.746H9.454l.873 1.746Z"></path><path d="M22.075 6.364V4.618h-1.746v1.746h-8.728V4.618H9.855v1.746H4.618v20.948h18.33a4.364 4.364 0 0 0 4.364-4.364V6.364h-5.237Zm3.491 16.584a2.618 2.618 0 0 1-2.618 2.618H6.364V8.11h3.491v.873h1.746V8.11h8.728v.873h1.746V8.11h3.491v14.838Z"></path><path d="M16.873 14.22h-1.746v5.236h1.746V14.22Z"></path><path d="M16 23.82a1.31 1.31 0 1 0 0-2.618 1.31 1.31 0 0 0 0 2.618Z"></path></svg>';
 
 class IconCalendarAlertLarge extends HTMLElement {
     constructor () {

package/dist/IconCalendarDay.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--calendarDay"><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625Zm1.313 7.656a1.969 1.969 0 0 1-1.969 1.969H3.406V4.28H4.72v1.094H6.03V4.281H9.97v1.094h1.312V4.281h1.313v6.344ZM8.219 7.344h2.187V9.53H8.22V7.344Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--calendarDay"><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625Zm1.313 7.656a1.969 1.969 0 0 1-1.969 1.969H3.406V4.28H4.72v1.094H6.03V4.281H9.97v1.094h1.312V4.281h1.313v6.344ZM8.219 7.344h2.187V9.53H8.22V7.344Z"></path></svg>';
 
 class IconCalendarDay extends HTMLElement {
     constructor () {

package/dist/IconCalendarDayLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--calendarDayLarge"><path d="M22.125 6.375v-1.75h-1.75v1.75h-8.75v-1.75h-1.75v1.75h-5.25v21H23A4.375 4.375 0 0 0 27.375 23V6.375h-5.25ZM25.625 23A2.625 2.625 0 0 1 23 25.625H6.375v-17.5h3.5V9h1.75v-.875h8.75V9h1.75v-.875h3.5V23ZM16 19.5h7v-7h-7v7Zm1.75-5.25h3.5v3.5h-3.5v-3.5Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--calendarDayLarge"><path d="M22.125 6.375v-1.75h-1.75v1.75h-8.75v-1.75h-1.75v1.75h-5.25v21H23A4.375 4.375 0 0 0 27.375 23V6.375h-5.25ZM25.625 23A2.625 2.625 0 0 1 23 25.625H6.375v-17.5h3.5V9h1.75v-.875h8.75V9h1.75v-.875h3.5V23ZM16 19.5h7v-7h-7v7Zm1.75-5.25h3.5v3.5h-3.5v-3.5Z"></path></svg>';
 
 class IconCalendarDayLarge extends HTMLElement {
     constructor () {

package/dist/IconCalendarEdit.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--calendarEdit"><path d="m13.136 6.189.77.77v-3.99h-2.625V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h2.844l.008-.061.14-1.251h-1.68V4.28H4.72v1.094H6.03V4.281H9.97v1.094h1.312V4.281h1.313v1.392"></path><path d="m13.119 8-.875-.875a1.077 1.077 0 0 0-1.505 0l-3.92 3.867c-.17.18-.278.41-.306.657l-.263 2.336 2.336-.262c.247-.025.479-.133.656-.307l3.877-3.885a1.06 1.06 0 0 0 0-1.505V8Zm-4.752 4.375-.56-.56 2.573-2.572.56.56-2.572 2.572Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--calendarEdit"><path d="m13.136 6.189.77.77v-3.99h-2.625V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h2.844l.008-.061.14-1.251h-1.68V4.28H4.72v1.094H6.03V4.281H9.97v1.094h1.312V4.281h1.313v1.392"></path><path d="m13.119 8-.875-.875a1.077 1.077 0 0 0-1.505 0l-3.92 3.867c-.17.18-.278.41-.306.657l-.263 2.336 2.336-.262c.247-.025.479-.133.656-.307l3.877-3.885a1.06 1.06 0 0 0 0-1.505V8Zm-4.752 4.375-.56-.56 2.573-2.572.56.56-2.572 2.572Z"></path></svg>';
 
 class IconCalendarEdit extends HTMLElement {
     constructor () {

package/dist/IconCalendarEditLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--calendarEditLarge"><path d="M10.265 12.509h11.47l.872-1.746H9.393l.872 1.746Z"></path><path d="M6.364 25.566V8.11h3.491v.873h1.746V8.11h8.728v.873h1.746V8.11h3.491v3.954c.5.163.954.441 1.327.811l.419.472V6.364h-5.237V4.618h-1.746v1.746h-8.728V4.618H9.855v1.746H4.618v20.948h7.603l.192-1.746H6.364Z"></path><path d="m27.573 16.087-1.937-1.937a1.748 1.748 0 0 0-2.47 0l-8.274 8.274a1.745 1.745 0 0 0-.515 1.073l-.48 4.365 4.364-.48a1.869 1.869 0 0 0 1.073-.524l8.24-8.274a1.746 1.746 0 0 0 0-2.462v-.035Zm-5.498 1.624 1.937 1.937-5.944 5.918-2.199.253.253-2.19 5.953-5.918Zm4.233-.35-1.056 1.057-1.938-1.938 1.047-1.056 1.947 1.938Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--calendarEditLarge"><path d="M10.265 12.509h11.47l.872-1.746H9.393l.872 1.746Z"></path><path d="M6.364 25.566V8.11h3.491v.873h1.746V8.11h8.728v.873h1.746V8.11h3.491v3.954c.5.163.954.441 1.327.811l.419.472V6.364h-5.237V4.618h-1.746v1.746h-8.728V4.618H9.855v1.746H4.618v20.948h7.603l.192-1.746H6.364Z"></path><path d="m27.573 16.087-1.937-1.937a1.748 1.748 0 0 0-2.47 0l-8.274 8.274a1.745 1.745 0 0 0-.515 1.073l-.48 4.365 4.364-.48a1.869 1.869 0 0 0 1.073-.524l8.24-8.274a1.746 1.746 0 0 0 0-2.462v-.035Zm-5.498 1.624 1.937 1.937-5.944 5.918-2.199.253.253-2.19 5.953-5.918Zm4.233-.35-1.056 1.057-1.938-1.938 1.047-1.056 1.947 1.938Z"></path></svg>';
 
 class IconCalendarEditLarge extends HTMLElement {
     constructor () {

package/dist/IconCalendarError.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--calendarError"><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625Zm1.313 7.656a1.969 1.969 0 0 1-1.969 1.969H3.406V4.28H4.72v1.094H6.03V4.281H9.97v1.094h1.312V4.281h1.313v6.344Z"></path><path d="m9.391 11.198.928-.928-3.712-3.713-.928.928 3.712 3.713Z"></path><path d="m10.323 7.484-.928-.928-3.713 3.712.928.928 3.713-3.712Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--calendarError"><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625Zm1.313 7.656a1.969 1.969 0 0 1-1.969 1.969H3.406V4.28H4.72v1.094H6.03V4.281H9.97v1.094h1.312V4.281h1.313v6.344Z"></path><path d="m9.391 11.198.928-.928-3.712-3.713-.928.928 3.712 3.713Z"></path><path d="m10.323 7.484-.928-.928-3.713 3.712.928.928 3.713-3.712Z"></path></svg>';
 
 class IconCalendarError extends HTMLElement {
     constructor () {

package/dist/IconCalendarErrorLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--calendarErrorLarge"><path d="M10.327 12.509h11.46l.873-1.746H9.454l.873 1.746Z"></path><path d="M22.075 6.364V4.618h-1.746v1.746h-8.728V4.618H9.855v1.746H4.618v20.948h18.33a4.364 4.364 0 0 0 4.364-4.364V6.364h-5.237Zm3.491 16.584a2.618 2.618 0 0 1-2.618 2.618H6.364V8.11h3.491v.873h1.746V8.11h8.728v.873h1.746V8.11h3.491v14.838Z"></path><path d="m19.77 16.244-1.23-1.239-2.776 2.775-2.775-2.775-1.24 1.24 2.776 2.775-2.776 2.776 1.24 1.23 2.775-2.775 2.776 2.775 1.23-1.23-2.775-2.776 2.775-2.776Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--calendarErrorLarge"><path d="M10.327 12.509h11.46l.873-1.746H9.454l.873 1.746Z"></path><path d="M22.075 6.364V4.618h-1.746v1.746h-8.728V4.618H9.855v1.746H4.618v20.948h18.33a4.364 4.364 0 0 0 4.364-4.364V6.364h-5.237Zm3.491 16.584a2.618 2.618 0 0 1-2.618 2.618H6.364V8.11h3.491v.873h1.746V8.11h8.728v.873h1.746V8.11h3.491v14.838Z"></path><path d="m19.77 16.244-1.23-1.239-2.776 2.775-2.775-2.775-1.24 1.24 2.776 2.775-2.776 2.776 1.24 1.23 2.775-2.775 2.776 2.775 1.23-1.23-2.775-2.776 2.775-2.776Z"></path></svg>';
 
 class IconCalendarErrorLarge extends HTMLElement {
     constructor () {

package/dist/IconCalendarFilled.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--calendarFilled"><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625ZM5.261 7.78 4.605 6.47h6.842l-.656 1.312h-5.53Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--calendarFilled"><path d="M11.281 2.969V1.875H9.97v1.094H6.03V1.875H4.72v1.094H2.094v10.937h8.531a3.282 3.282 0 0 0 3.281-3.281V2.969h-2.625ZM5.261 7.78 4.605 6.47h6.842l-.656 1.312h-5.53Z"></path></svg>';
 
 class IconCalendarFilled extends HTMLElement {
     constructor () {

package/dist/IconCalendarFilledLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--calendarFilledLarge"><path d="M22.125 6.375V9h-1.75V6.375h-8.75V9h-1.75V6.375h-5.25v21H23A4.375 4.375 0 0 0 27.375 23V6.375h-5.25ZM15.799 19.5h-.875v-1.488h.831c.787 0 1.225-.393 1.225-.962s-.63-.963-1.286-.963a2.343 2.343 0 0 0-1.689.736l-1.024-1.164a3.71 3.71 0 0 1 2.853-1.112c1.75 0 2.931 1.024 2.931 2.31a2.012 2.012 0 0 1-1.199 1.82 2.048 2.048 0 0 1 1.514 1.952c0 1.365-1.172 2.423-3.281 2.423a3.85 3.85 0 0 1-2.966-1.084l1.023-1.182a2.562 2.562 0 0 0 1.829.726c.98 0 1.601-.376 1.601-1.058 0-.683-.604-.954-1.487-.954Zm6.877-8.75-.875 1.75H10.313l-.876-1.75h13.24Z"></path><path d="M11.625 4.625h-1.75v1.75h1.75v-1.75Z"></path><path d="M22.125 4.625h-1.75v1.75h1.75v-1.75Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--calendarFilledLarge"><path d="M22.125 6.375V9h-1.75V6.375h-8.75V9h-1.75V6.375h-5.25v21H23A4.375 4.375 0 0 0 27.375 23V6.375h-5.25ZM15.799 19.5h-.875v-1.488h.831c.787 0 1.225-.393 1.225-.962s-.63-.963-1.286-.963a2.343 2.343 0 0 0-1.689.736l-1.024-1.164a3.71 3.71 0 0 1 2.853-1.112c1.75 0 2.931 1.024 2.931 2.31a2.012 2.012 0 0 1-1.199 1.82 2.048 2.048 0 0 1 1.514 1.952c0 1.365-1.172 2.423-3.281 2.423a3.85 3.85 0 0 1-2.966-1.084l1.023-1.182a2.562 2.562 0 0 0 1.829.726c.98 0 1.601-.376 1.601-1.058 0-.683-.604-.954-1.487-.954Zm6.877-8.75-.875 1.75H10.313l-.876-1.75h13.24Z"></path><path d="M11.625 4.625h-1.75v1.75h1.75v-1.75Z"></path><path d="M22.125 4.625h-1.75v1.75h1.75v-1.75Z"></path></svg>';
 
 class IconCalendarFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconCalendarLarge.js

@@ -3,7 +3,7 @@
 var configs = require('./pie-icons-configs/configs.js');
 
 const template = document.createElement('template');
-template.innerHTML = '<style>:host-context(pie-icon-button) svg { width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--calendarLarge"><path d="M17.593 18.677a2.013 2.013 0 0 0 1.198-1.802c0-1.286-1.198-2.301-2.931-2.301a3.728 3.728 0 0 0-2.852 1.111l1.023 1.155a2.336 2.336 0 0 1 1.689-.726c.656 0 1.286.271 1.286.953 0 .683-.437.963-1.225.963h-.831v1.47h.875c.875 0 1.514.324 1.514.989s-.621 1.067-1.601 1.067a2.571 2.571 0 0 1-1.83-.735l-1.023 1.181a3.85 3.85 0 0 0 2.966 1.085c2.109 0 3.281-1.058 3.281-2.415a2.056 2.056 0 0 0-1.54-1.995Z"></path><path d="M10.313 12.5H21.8l.875-1.75H9.438l.874 1.75Z"></path><path d="M22.125 6.375v-1.75h-1.75v1.75h-8.75v-1.75h-1.75v1.75h-5.25v21H23A4.375 4.375 0 0 0 27.375 23V6.375h-5.25ZM25.625 23A2.625 2.625 0 0 1 23 25.625H6.375v-17.5h3.5V9h1.75v-.875h8.75V9h1.75v-.875h3.5V23Z"></path></svg>';
+template.innerHTML = '<style>:host-context(pie-icon-button) svg, :host-context(pie-button) svg { display:block; width: var(--btn-icon-size); height: var(--btn-icon-size); }</style><svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 32 32" class="c-pieIcon c-pieIcon--calendarLarge"><path d="M17.593 18.677a2.013 2.013 0 0 0 1.198-1.802c0-1.286-1.198-2.301-2.931-2.301a3.728 3.728 0 0 0-2.852 1.111l1.023 1.155a2.336 2.336 0 0 1 1.689-.726c.656 0 1.286.271 1.286.953 0 .683-.437.963-1.225.963h-.831v1.47h.875c.875 0 1.514.324 1.514.989s-.621 1.067-1.601 1.067a2.571 2.571 0 0 1-1.83-.735l-1.023 1.181a3.85 3.85 0 0 0 2.966 1.085c2.109 0 3.281-1.058 3.281-2.415a2.056 2.056 0 0 0-1.54-1.995Z"></path><path d="M10.313 12.5H21.8l.875-1.75H9.438l.874 1.75Z"></path><path d="M22.125 6.375v-1.75h-1.75v1.75h-8.75v-1.75h-1.75v1.75h-5.25v21H23A4.375 4.375 0 0 0 27.375 23V6.375h-5.25ZM25.625 23A2.625 2.625 0 0 1 23 25.625H6.375v-17.5h3.5V9h1.75v-.875h8.75V9h1.75v-.875h3.5V23Z"></path></svg>';
 
 class IconCalendarLarge extends HTMLElement {
     constructor () {