@justeattakeaway/pie-icons-webc 0.3.0 → 0.4.0

package/dist/IconMinusCircle.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--minusCircle"><path d="M4.596 7.344v1.312h6.808V7.344H4.596Z"></path><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.792 6.792 0 0 0 0-9.625Zm-.927 8.662a5.469 5.469 0 1 1-7.734-7.735 5.469 5.469 0 0 1 7.734 7.736Z"></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--minusCircle"><path d="M4.596 7.344v1.312h6.808V7.344H4.596Z"></path><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.792 6.792 0 0 0 0-9.625Zm-.927 8.662a5.469 5.469 0 1 1-7.734-7.735 5.469 5.469 0 0 1 7.734 7.736Z"></path></svg>';
 
 class IconMinusCircle extends HTMLElement {
     constructor () {

package/dist/IconMinusCircleFilled.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--minusCircleFilled"><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.792 6.792 0 0 0 0-9.625Zm-1.391 5.451H4.596V7.344h6.808v1.312Z"></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--minusCircleFilled"><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.792 6.792 0 0 0 0-9.625Zm-1.391 5.451H4.596V7.344h6.808v1.312Z"></path></svg>';
 
 class IconMinusCircleFilled extends HTMLElement {
     constructor () {

package/dist/IconMinusCircleFilledLarge.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--minusCircleFilledLarge"><path d="M24.663 7.338A12.25 12.25 0 1 0 7.339 24.663 12.25 12.25 0 0 0 24.663 7.338Zm-2.477 9.537H9.814v-1.75h12.372v1.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--minusCircleFilledLarge"><path d="M24.663 7.338A12.25 12.25 0 1 0 7.339 24.663 12.25 12.25 0 0 0 24.663 7.338Zm-2.477 9.537H9.814v-1.75h12.372v1.75Z"></path></svg>';
 
 class IconMinusCircleFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconMinusCircleLarge.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--minusCircleLarge"><path d="M9.814 15.125v1.75h12.372v-1.75H9.814Z"></path><path d="M24.663 7.338A12.25 12.25 0 1 0 7.339 24.663 12.25 12.25 0 0 0 24.663 7.338Zm-1.234 16.09A10.5 10.5 0 1 1 8.605 8.555 10.5 10.5 0 0 1 23.43 23.43Z"></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--minusCircleLarge"><path d="M9.814 15.125v1.75h12.372v-1.75H9.814Z"></path><path d="M24.663 7.338A12.25 12.25 0 1 0 7.339 24.663 12.25 12.25 0 0 0 24.663 7.338Zm-1.234 16.09A10.5 10.5 0 1 1 8.605 8.555 10.5 10.5 0 0 1 23.43 23.43Z"></path></svg>';
 
 class IconMinusCircleLarge extends HTMLElement {
     constructor () {

package/dist/IconMinusLarge.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--minusLarge"><path d="M27.375 16.875v-1.75H4.625v1.75h22.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--minusLarge"><path d="M27.375 16.875v-1.75H4.625v1.75h22.75Z"></path></svg>';
 
 class IconMinusLarge extends HTMLElement {
     constructor () {

package/dist/IconMolluscs.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--molluscs"><g clip-path="url(#prefix__clip0_8387_3631)"><path d="M13.563 4.72a1.548 1.548 0 0 0-.854-.627 1.586 1.586 0 0 0-.523-.784c-.81-.662-1.9-1.159-2.988-1.35-.427-.08-.863.052-1.202.304a1.528 1.528 0 0 0-1.203-.305c-1.089.2-2.178.689-2.988 1.36-.252.208-.435.479-.522.783a1.548 1.548 0 0 0-.854.628 7.082 7.082 0 0 0-1.08 2.787c0 .053-.018.105-.018.149-.044.296-.07.6-.07.932v.305l2.335 1.995v.392a1.966 1.966 0 0 0 1.96 1.96h.793l.375.313c.366.34.827.514 1.29.514.46 0 .923-.174 1.262-.514l.401-.348h.854a1.978 1.978 0 0 0 1.942-1.969v-.418l2.257-1.925v-.305a7.068 7.068 0 0 0-1.168-3.868V4.72Zm-1.717 4.913-1.55 1.325-1.107.94-.81.689c-.218.218-.566.218-.819-.035l-.74-.636-.776-.662-3.485-2.97a5.55 5.55 0 0 1 .114-.802c.026-.131.06-.262.096-.392.034-.122.07-.244.104-.358.096-.26.288-.723.601-1.193.026-.035.07-.07.105-.105l1.62 3.494h1.438L4.546 4.415c.026-.043.043-.087.07-.104.635-.523 1.524-.924 2.395-1.08.087-.018.2.034.235.095l.053.096.017 5.506h1.307L8.605 3.5l.088-.148c.052-.087.165-.14.252-.122.863.157 1.76.558 2.396 1.08.035.027.07.079.087.14L9.372 8.937h1.438l1.611-3.52s.026.017.035.026c.331.497.871 1.498.941 2.849L11.82 9.633h.026Z"></path></g><defs><clipPath id="prefix__clip0_8387_3631"><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--molluscs"><g clip-path="url(#prefix__clip0_8387_3631)"><path d="M13.563 4.72a1.548 1.548 0 0 0-.854-.627 1.586 1.586 0 0 0-.523-.784c-.81-.662-1.9-1.159-2.988-1.35-.427-.08-.863.052-1.202.304a1.528 1.528 0 0 0-1.203-.305c-1.089.2-2.178.689-2.988 1.36-.252.208-.435.479-.522.783a1.548 1.548 0 0 0-.854.628 7.082 7.082 0 0 0-1.08 2.787c0 .053-.018.105-.018.149-.044.296-.07.6-.07.932v.305l2.335 1.995v.392a1.966 1.966 0 0 0 1.96 1.96h.793l.375.313c.366.34.827.514 1.29.514.46 0 .923-.174 1.262-.514l.401-.348h.854a1.978 1.978 0 0 0 1.942-1.969v-.418l2.257-1.925v-.305a7.068 7.068 0 0 0-1.168-3.868V4.72Zm-1.717 4.913-1.55 1.325-1.107.94-.81.689c-.218.218-.566.218-.819-.035l-.74-.636-.776-.662-3.485-2.97a5.55 5.55 0 0 1 .114-.802c.026-.131.06-.262.096-.392.034-.122.07-.244.104-.358.096-.26.288-.723.601-1.193.026-.035.07-.07.105-.105l1.62 3.494h1.438L4.546 4.415c.026-.043.043-.087.07-.104.635-.523 1.524-.924 2.395-1.08.087-.018.2.034.235.095l.053.096.017 5.506h1.307L8.605 3.5l.088-.148c.052-.087.165-.14.252-.122.863.157 1.76.558 2.396 1.08.035.027.07.079.087.14L9.372 8.937h1.438l1.611-3.52s.026.017.035.026c.331.497.871 1.498.941 2.849L11.82 9.633h.026Z"></path></g><defs><clipPath id="prefix__clip0_8387_3631"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconMolluscs extends HTMLElement {
     constructor () {

package/dist/IconMolluscsLarge.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--molluscsLarge"><path d="M26.244 10.863a2.584 2.584 0 0 0-1.63-1.09l-.035-.148a2.67 2.67 0 0 0-.888-1.377c-1.5-1.228-3.521-2.143-5.543-2.51a2.554 2.554 0 0 0-2.24.698 2.611 2.611 0 0 0-2.265-.663 12.91 12.91 0 0 0-4.445 1.743c-.427.27-.836.567-1.228.89a2.542 2.542 0 0 0-.88 1.524v.061a2.614 2.614 0 0 0-1.552 1.072c-1.098 1.63-1.551 3.216-1.568 3.268a12.469 12.469 0 0 0-.567 3.721v.401l3.617 3.085v2.31a2.622 2.622 0 0 0 2.614 2.614h3.163l.863.732a3.15 3.15 0 0 0 2.248.932c.855 0 1.648-.33 2.197-.88l.915-.784h3.154a2.622 2.622 0 0 0 2.615-2.614v-2.31l3.616-3.085v-.4c0-3.426-1.36-5.97-2.17-7.182l.009-.008ZM9.643 24.719a.874.874 0 0 1-.872-.872v-.827l1.987 1.699H9.643Zm13.412-.872c0 .48-.393.872-.872.872h-1.115l1.986-1.69v.819Zm.33-3.39L21.347 22.2l-2.954 2.519-1.455 1.246c-.54.54-1.438.593-2.074-.043l-1.403-1.203-2.955-2.519-2.039-1.742-3.285-2.798c.035-.959.192-1.9.48-2.823 0-.018.409-1.403 1.341-2.79a.835.835 0 0 1 .323-.278l3.294 7.111h1.917l-3.8-8.209.079-.427a.8.8 0 0 1 .27-.488c.331-.27.688-.532 1.054-.758a11.063 11.063 0 0 1 3.835-1.508.855.855 0 0 1 .897.418l.166.288.044 10.684h1.743L16.78 8.187l.192-.313c.183-.305.54-.48.871-.41 1.708.305 3.486 1.107 4.75 2.144a.94.94 0 0 1 .313.47l.166.62-3.852 8.19h1.926l3.416-7.267c.096.06.192.13.253.226a11.269 11.269 0 0 1 1.873 5.822l-3.285 2.797-.017-.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 32 32" class="c-pieIcon c-pieIcon--molluscsLarge"><path d="M26.244 10.863a2.584 2.584 0 0 0-1.63-1.09l-.035-.148a2.67 2.67 0 0 0-.888-1.377c-1.5-1.228-3.521-2.143-5.543-2.51a2.554 2.554 0 0 0-2.24.698 2.611 2.611 0 0 0-2.265-.663 12.91 12.91 0 0 0-4.445 1.743c-.427.27-.836.567-1.228.89a2.542 2.542 0 0 0-.88 1.524v.061a2.614 2.614 0 0 0-1.552 1.072c-1.098 1.63-1.551 3.216-1.568 3.268a12.469 12.469 0 0 0-.567 3.721v.401l3.617 3.085v2.31a2.622 2.622 0 0 0 2.614 2.614h3.163l.863.732a3.15 3.15 0 0 0 2.248.932c.855 0 1.648-.33 2.197-.88l.915-.784h3.154a2.622 2.622 0 0 0 2.615-2.614v-2.31l3.616-3.085v-.4c0-3.426-1.36-5.97-2.17-7.182l.009-.008ZM9.643 24.719a.874.874 0 0 1-.872-.872v-.827l1.987 1.699H9.643Zm13.412-.872c0 .48-.393.872-.872.872h-1.115l1.986-1.69v.819Zm.33-3.39L21.347 22.2l-2.954 2.519-1.455 1.246c-.54.54-1.438.593-2.074-.043l-1.403-1.203-2.955-2.519-2.039-1.742-3.285-2.798c.035-.959.192-1.9.48-2.823 0-.018.409-1.403 1.341-2.79a.835.835 0 0 1 .323-.278l3.294 7.111h1.917l-3.8-8.209.079-.427a.8.8 0 0 1 .27-.488c.331-.27.688-.532 1.054-.758a11.063 11.063 0 0 1 3.835-1.508.855.855 0 0 1 .897.418l.166.288.044 10.684h1.743L16.78 8.187l.192-.313c.183-.305.54-.48.871-.41 1.708.305 3.486 1.107 4.75 2.144a.94.94 0 0 1 .313.47l.166.62-3.852 8.19h1.926l3.416-7.267c.096.06.192.13.253.226a11.269 11.269 0 0 1 1.873 5.822l-3.285 2.797-.017-.009Z"></path></svg>';
 
 class IconMolluscsLarge extends HTMLElement {
     constructor () {

package/dist/IconMoon.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--moon"><path d="M8.219 8a4.174 4.174 0 0 1 3.412-4.078 5.249 5.249 0 0 0-1.444-.927A5.39 5.39 0 0 0 8 2.531 5.469 5.469 0 0 0 8 13.47a5.39 5.39 0 0 0 2.188-.464 5.248 5.248 0 0 0 1.443-.928A4.174 4.174 0 0 1 8.22 8ZM8 12.156a4.155 4.155 0 0 1-3.689-6.18 4.156 4.156 0 0 1 4.433-2.054 5.443 5.443 0 0 0 0 8.155 4.12 4.12 0 0 1-.744.08Z"></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--moon"><path d="M8.219 8a4.174 4.174 0 0 1 3.412-4.078 5.249 5.249 0 0 0-1.444-.927A5.39 5.39 0 0 0 8 2.531 5.469 5.469 0 0 0 8 13.47a5.39 5.39 0 0 0 2.188-.464 5.248 5.248 0 0 0 1.443-.928A4.174 4.174 0 0 1 8.22 8ZM8 12.156a4.155 4.155 0 0 1-3.689-6.18 4.156 4.156 0 0 1 4.433-2.054 5.443 5.443 0 0 0 0 8.155 4.12 4.12 0 0 1-.744.08Z"></path></svg>';
 
 class IconMoon extends HTMLElement {
     constructor () {

package/dist/IconMoonLarge.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--moonLarge"><path d="M15.125 16a8.794 8.794 0 0 1 6.93-8.558 10.612 10.612 0 0 0-.805-.524 10.213 10.213 0 0 0-1.321-.64A10.317 10.317 0 0 0 16 5.5a10.5 10.5 0 1 0 0 21c1.348 0 2.683-.265 3.929-.779.455-.18.897-.394 1.321-.639.28-.166.551-.34.805-.524A8.793 8.793 0 0 1 15.125 16ZM16 24.75a8.75 8.75 0 1 1 1.811-17.308 10.5 10.5 0 0 0 0 17.116A8.834 8.834 0 0 1 16 24.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--moonLarge"><path d="M15.125 16a8.794 8.794 0 0 1 6.93-8.558 10.612 10.612 0 0 0-.805-.524 10.213 10.213 0 0 0-1.321-.64A10.317 10.317 0 0 0 16 5.5a10.5 10.5 0 1 0 0 21c1.348 0 2.683-.265 3.929-.779.455-.18.897-.394 1.321-.639.28-.166.551-.34.805-.524A8.793 8.793 0 0 1 15.125 16ZM16 24.75a8.75 8.75 0 1 1 1.811-17.308 10.5 10.5 0 0 0 0 17.116A8.834 8.834 0 0 1 16 24.75Z"></path></svg>';
 
 class IconMoonLarge extends HTMLElement {
     constructor () {

package/dist/IconMoped.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--moped"><path d="M14.072 9.802a2.354 2.354 0 0 0-1.697-.682c.06-.31.06-.627 0-.936l-1.75-5.872A1.514 1.514 0 0 0 9.102 1.22H6.355L7.02 2.53h2.082a.228.228 0 0 1 .21.158l1.75 5.871a1.102 1.102 0 0 1-.559 1.296c-.152.076-.32.115-.49.113H8.63l-.7-2.503a1.54 1.54 0 0 0-1.487-1.164H2.75a1.54 1.54 0 0 0-1.531 1.532v3.447h1.33a2.354 2.354 0 0 0 .691 1.916 2.39 2.39 0 0 0 3.395 0 2.353 2.353 0 0 0 .691-1.916h2.625v.219a2.406 2.406 0 1 0 4.104-1.698h.018ZM5.708 12.27a1.094 1.094 0 0 1-1.818-.456 1.059 1.059 0 0 1-.02-.533h2.135a1.059 1.059 0 0 1-.298.989ZM2.53 9.969V7.834a.219.219 0 0 1 .219-.219h3.692a.236.236 0 0 1 .22.184l.603 2.17H2.531Zm10.614 2.301a1.103 1.103 0 0 1-1.54 0 1.094 1.094 0 1 1 1.54 0Z"></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--moped"><path d="M14.072 9.802a2.354 2.354 0 0 0-1.697-.682c.06-.31.06-.627 0-.936l-1.75-5.872A1.514 1.514 0 0 0 9.102 1.22H6.355L7.02 2.53h2.082a.228.228 0 0 1 .21.158l1.75 5.871a1.102 1.102 0 0 1-.559 1.296c-.152.076-.32.115-.49.113H8.63l-.7-2.503a1.54 1.54 0 0 0-1.487-1.164H2.75a1.54 1.54 0 0 0-1.531 1.532v3.447h1.33a2.354 2.354 0 0 0 .691 1.916 2.39 2.39 0 0 0 3.395 0 2.353 2.353 0 0 0 .691-1.916h2.625v.219a2.406 2.406 0 1 0 4.104-1.698h.018ZM5.708 12.27a1.094 1.094 0 0 1-1.818-.456 1.059 1.059 0 0 1-.02-.533h2.135a1.059 1.059 0 0 1-.298.989ZM2.53 9.969V7.834a.219.219 0 0 1 .219-.219h3.692a.236.236 0 0 1 .22.184l.603 2.17H2.531Zm10.614 2.301a1.103 1.103 0 0 1-1.54 0 1.094 1.094 0 1 1 1.54 0Z"></path></svg>';
 
 class IconMoped extends HTMLElement {
     constructor () {

package/dist/IconMopedLarge.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--mopedLarge"><g clip-path="url(#prefix__clip0_4_686)"><path d="M12.5 9.875H2.875v1.75H12.5v-1.75Z"></path><path d="M28.723 20.777a4.375 4.375 0 0 0-3.5-1.233 4.377 4.377 0 0 0-.097-2.179l-3.5-11.742a2.625 2.625 0 0 0-2.555-1.873h-3.946L16 5.5h3.071a.875.875 0 0 1 .875.621l3.5 11.751a2.626 2.626 0 0 1-.42 2.363 2.425 2.425 0 0 1-1.96 1.015H16.15l-1.637-5.889a2.625 2.625 0 0 0-2.537-1.986h-7.35A2.625 2.625 0 0 0 2 16v7h2.713a4.288 4.288 0 0 0 1.198 3.955 4.331 4.331 0 0 0 6.169 0A4.313 4.313 0 0 0 13.287 23h8.06a4.374 4.374 0 1 0 7.375-2.205v-.018Zm-17.877 4.944a2.625 2.625 0 0 1-3.701 0 2.555 2.555 0 0 1-.612-2.712h4.934a2.563 2.563 0 0 1-.62 2.712ZM3.75 21.25V16a.875.875 0 0 1 .875-.875h7.35a.875.875 0 0 1 .875.674l1.479 5.451H3.75Zm23.73 4.48a2.625 2.625 0 0 1-3.71-3.71 2.625 2.625 0 0 1 4.478 1.855c0 .696-.276 1.363-.768 1.855Z"></path></g><defs><clipPath id="prefix__clip0_4_686"><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--mopedLarge"><g clip-path="url(#prefix__clip0_4_686)"><path d="M12.5 9.875H2.875v1.75H12.5v-1.75Z"></path><path d="M28.723 20.777a4.375 4.375 0 0 0-3.5-1.233 4.377 4.377 0 0 0-.097-2.179l-3.5-11.742a2.625 2.625 0 0 0-2.555-1.873h-3.946L16 5.5h3.071a.875.875 0 0 1 .875.621l3.5 11.751a2.626 2.626 0 0 1-.42 2.363 2.425 2.425 0 0 1-1.96 1.015H16.15l-1.637-5.889a2.625 2.625 0 0 0-2.537-1.986h-7.35A2.625 2.625 0 0 0 2 16v7h2.713a4.288 4.288 0 0 0 1.198 3.955 4.331 4.331 0 0 0 6.169 0A4.313 4.313 0 0 0 13.287 23h8.06a4.374 4.374 0 1 0 7.375-2.205v-.018Zm-17.877 4.944a2.625 2.625 0 0 1-3.701 0 2.555 2.555 0 0 1-.612-2.712h4.934a2.563 2.563 0 0 1-.62 2.712ZM3.75 21.25V16a.875.875 0 0 1 .875-.875h7.35a.875.875 0 0 1 .875.674l1.479 5.451H3.75Zm23.73 4.48a2.625 2.625 0 0 1-3.71-3.71 2.625 2.625 0 0 1 4.478 1.855c0 .696-.276 1.363-.768 1.855Z"></path></g><defs><clipPath id="prefix__clip0_4_686"><rect width="28" height="28" transform="translate(2 2)"></rect></clipPath></defs></svg>';
 
 class IconMopedLarge extends HTMLElement {
     constructor () {

package/dist/IconMoreHorizontal.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--moreHorizontal"><path d="M3.188 6.688a1.313 1.313 0 1 1 0 2.625 1.313 1.313 0 0 1 0-2.626ZM6.688 8a1.313 1.313 0 1 0 2.625 0 1.313 1.313 0 0 0-2.626 0ZM11.5 8a1.313 1.313 0 1 0 2.625 0A1.313 1.313 0 0 0 11.5 8Z"></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--moreHorizontal"><path d="M3.188 6.688a1.313 1.313 0 1 1 0 2.625 1.313 1.313 0 0 1 0-2.626ZM6.688 8a1.313 1.313 0 1 0 2.625 0 1.313 1.313 0 0 0-2.626 0ZM11.5 8a1.313 1.313 0 1 0 2.625 0A1.313 1.313 0 0 0 11.5 8Z"></path></svg>';
 
 class IconMoreHorizontal extends HTMLElement {
     constructor () {

package/dist/IconMoreHorizontalLarge.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--moreHorizontalLarge"><path d="M7.688 14.031a1.969 1.969 0 1 1 0 3.938 1.969 1.969 0 0 1 0-3.938ZM14.03 16a1.97 1.97 0 1 0 3.938 0 1.97 1.97 0 0 0-3.938 0Zm8.313 0a1.97 1.97 0 1 0 3.938 0 1.97 1.97 0 0 0-3.938 0Z"></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--moreHorizontalLarge"><path d="M7.688 14.031a1.969 1.969 0 1 1 0 3.938 1.969 1.969 0 0 1 0-3.938ZM14.03 16a1.97 1.97 0 1 0 3.938 0 1.97 1.97 0 0 0-3.938 0Zm8.313 0a1.97 1.97 0 1 0 3.938 0 1.97 1.97 0 0 0-3.938 0Z"></path></svg>';
 
 class IconMoreHorizontalLarge extends HTMLElement {
     constructor () {

package/dist/IconMoreVertical.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--moreVertical"><path d="M9.313 3.188a1.313 1.313 0 1 1-2.626 0 1.313 1.313 0 0 1 2.625 0ZM8 6.688a1.313 1.313 0 1 0 0 2.625 1.313 1.313 0 0 0 0-2.626ZM8 11.5a1.313 1.313 0 1 0 0 2.625A1.313 1.313 0 0 0 8 11.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--moreVertical"><path d="M9.313 3.188a1.313 1.313 0 1 1-2.626 0 1.313 1.313 0 0 1 2.625 0ZM8 6.688a1.313 1.313 0 1 0 0 2.625 1.313 1.313 0 0 0 0-2.626ZM8 11.5a1.313 1.313 0 1 0 0 2.625A1.313 1.313 0 0 0 8 11.5Z"></path></svg>';
 
 class IconMoreVertical extends HTMLElement {
     constructor () {

package/dist/IconMoreVerticalLarge.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--moreVerticalLarge"><path d="M17.969 7.688a1.969 1.969 0 1 1-3.938 0 1.969 1.969 0 0 1 3.938 0ZM16 14.03a1.97 1.97 0 1 0 0 3.938 1.97 1.97 0 0 0 0-3.938Zm0 8.313a1.969 1.969 0 1 0 0 3.938 1.969 1.969 0 0 0 0-3.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--moreVerticalLarge"><path d="M17.969 7.688a1.969 1.969 0 1 1-3.938 0 1.969 1.969 0 0 1 3.938 0ZM16 14.03a1.97 1.97 0 1 0 0 3.938 1.97 1.97 0 0 0 0-3.938Zm0 8.313a1.969 1.969 0 1 0 0 3.938 1.969 1.969 0 0 0 0-3.938Z"></path></svg>';
 
 class IconMoreVerticalLarge extends HTMLElement {
     constructor () {

package/dist/IconMustard.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--mustard"><path d="M11.576 7.586v-.122c0-.4-.165-.801-.496-1.132l-.915-.758-.035-1.63h-.618l-.933-2.787H7.334l-.872 2.788h-.61l-.017 1.629-.967.793c-.287.287-.453.679-.453 1.088v.122l.044.114a6.731 6.731 0 0 1 .287 4.138l-.322 1.307-.018.157a1.54 1.54 0 0 0 1.542 1.542h4.077a1.54 1.54 0 0 0 1.543-1.543l-.34-1.454a6.796 6.796 0 0 1 .287-4.139l.044-.113h.017Zm-5.828-.244 1.385-1.141v-.932h1.725l.018.932L10.2 7.299s.043.052.052.087c-.052.13-.078.27-.113.4H5.86c-.043-.13-.07-.27-.122-.4 0-.018.009-.035 0-.035l.009-.009Zm4.025 3.546H6.236a7.82 7.82 0 0 0-.07-1.803h3.685a7.802 7.802 0 0 0-.07 1.803h-.008Zm.27 2.648H5.966a.233.233 0 0 1-.227-.183l.288-1.167H9.99l.287 1.167a.233.233 0 0 1-.226.183h-.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--mustard"><path d="M11.576 7.586v-.122c0-.4-.165-.801-.496-1.132l-.915-.758-.035-1.63h-.618l-.933-2.787H7.334l-.872 2.788h-.61l-.017 1.629-.967.793c-.287.287-.453.679-.453 1.088v.122l.044.114a6.731 6.731 0 0 1 .287 4.138l-.322 1.307-.018.157a1.54 1.54 0 0 0 1.542 1.542h4.077a1.54 1.54 0 0 0 1.543-1.543l-.34-1.454a6.796 6.796 0 0 1 .287-4.139l.044-.113h.017Zm-5.828-.244 1.385-1.141v-.932h1.725l.018.932L10.2 7.299s.043.052.052.087c-.052.13-.078.27-.113.4H5.86c-.043-.13-.07-.27-.122-.4 0-.018.009-.035 0-.035l.009-.009Zm4.025 3.546H6.236a7.82 7.82 0 0 0-.07-1.803h3.685a7.802 7.802 0 0 0-.07 1.803h-.008Zm.27 2.648H5.966a.233.233 0 0 1-.227-.183l.288-1.167H9.99l.287 1.167a.233.233 0 0 1-.226.183h-.009Z"></path></svg>';
 
 class IconMustard extends HTMLElement {
     constructor () {

package/dist/IconMustardLarge.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--mustardLarge"><path d="M22.619 15.255v-.166c0-.697-.27-1.35-.828-1.9l-1.935-1.603-.06-2.98h-1.09L16.884 2.87h-1.856l-1.743 5.735h-1.089l-.035 2.98-2.013 1.656a2.59 2.59 0 0 0-.767 1.847v.166l.061.157a13.738 13.738 0 0 1 .593 8.383l-.628 2.562-.026.21a2.622 2.622 0 0 0 2.615 2.614h8.017a2.622 2.622 0 0 0 2.614-2.615l-.653-2.77c-.689-2.807-.48-5.7.592-8.384l.061-.157h-.008Zm-5.735-6.632H15.09l.88-2.884.915 2.884Zm-5.577 5.9 2.58-2.118.026-2.074h.017v.026h4.122v-.026h.009l.061 2.074 2.492 2.057c.131.13.218.296.244.48-.148.383-.279.775-.4 1.167h-8.942a11.54 11.54 0 0 0-.4-1.168.847.847 0 0 1 .182-.418h.01Zm.619 3.329h8.14a15.582 15.582 0 0 0-.14 4.366h-7.87c.166-1.456.114-2.92-.139-4.366h.009Zm8.078 9.569h-8.017a.885.885 0 0 1-.872-.785l.602-2.44.052-.244h8.453c.018.078.026.166.052.244l.602 2.44a.878.878 0 0 1-.872.785Z"></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--mustardLarge"><path d="M22.619 15.255v-.166c0-.697-.27-1.35-.828-1.9l-1.935-1.603-.06-2.98h-1.09L16.884 2.87h-1.856l-1.743 5.735h-1.089l-.035 2.98-2.013 1.656a2.59 2.59 0 0 0-.767 1.847v.166l.061.157a13.738 13.738 0 0 1 .593 8.383l-.628 2.562-.026.21a2.622 2.622 0 0 0 2.615 2.614h8.017a2.622 2.622 0 0 0 2.614-2.615l-.653-2.77c-.689-2.807-.48-5.7.592-8.384l.061-.157h-.008Zm-5.735-6.632H15.09l.88-2.884.915 2.884Zm-5.577 5.9 2.58-2.118.026-2.074h.017v.026h4.122v-.026h.009l.061 2.074 2.492 2.057c.131.13.218.296.244.48-.148.383-.279.775-.4 1.167h-8.942a11.54 11.54 0 0 0-.4-1.168.847.847 0 0 1 .182-.418h.01Zm.619 3.329h8.14a15.582 15.582 0 0 0-.14 4.366h-7.87c.166-1.456.114-2.92-.139-4.366h.009Zm8.078 9.569h-8.017a.885.885 0 0 1-.872-.785l.602-2.44.052-.244h8.453c.018.078.026.166.052.244l.602 2.44a.878.878 0 0 1-.872.785Z"></path></svg>';
 
 class IconMustardLarge extends HTMLElement {
     constructor () {

package/dist/IconNachos.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--nachos"><path d="M7.256 7.265a.875.875 0 0 0 .805.612.875.875 0 0 0 .49-.14 31.253 31.253 0 0 0 2.38-1.653 30.579 30.579 0 0 0 2.424-2.074.875.875 0 0 0 .271-.718.823.823 0 0 0-.411-.612c-.847-.469-1.75-.83-2.686-1.076a12.855 12.855 0 0 0-2.984-.429.875.875 0 0 0-.656.262.875.875 0 0 0-.263.604c-.01.93.045 1.86.167 2.783.1.823.256 1.638.463 2.441Zm2.931-4.375c.602.165 1.187.381 1.75.647A28.356 28.356 0 0 1 10.1 5.07c-.639.49-1.155.875-1.75 1.251a17.3 17.3 0 0 1-.289-1.636c-.09-.714-.14-1.433-.148-2.153.766.04 1.528.152 2.274.333v.026Z"></path><path d="M14.659 11.115a.675.675 0 0 0-.534-.271h-.245a14.953 14.953 0 0 0-1.575-3.063.927.927 0 0 0-1.277-.271 24.573 24.573 0 0 0-2.512 1.977c-.253.237-.481.455-.7.683l-.402-.298a25 25 0 0 0-2.485-1.54.875.875 0 0 0-.735-.06.928.928 0 0 0-.569.49c-.305.679-.573 1.374-.805 2.082h-.945a.674.674 0 0 0-.534.271.656.656 0 0 0-.087.595l.542 1.627a2.108 2.108 0 0 0 1.995 1.444h8.418a2.109 2.109 0 0 0 1.995-1.444l.542-1.627a.656.656 0 0 0-.087-.595ZM11.43 8.814c.4.647.745 1.326 1.033 2.03h-3.5l.402-.385a22.903 22.903 0 0 1 2.065-1.645Zm-6.764.875c.639.358 1.243.743 1.838 1.155H4.22c.14-.385.28-.77.446-1.155Zm8.295 3.237a.797.797 0 0 1-.752.543H3.79a.796.796 0 0 1-.752-.543l-.289-.77h10.5l-.289.77Z"></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--nachos"><path d="M7.256 7.265a.875.875 0 0 0 .805.612.875.875 0 0 0 .49-.14 31.253 31.253 0 0 0 2.38-1.653 30.579 30.579 0 0 0 2.424-2.074.875.875 0 0 0 .271-.718.823.823 0 0 0-.411-.612c-.847-.469-1.75-.83-2.686-1.076a12.855 12.855 0 0 0-2.984-.429.875.875 0 0 0-.656.262.875.875 0 0 0-.263.604c-.01.93.045 1.86.167 2.783.1.823.256 1.638.463 2.441Zm2.931-4.375c.602.165 1.187.381 1.75.647A28.356 28.356 0 0 1 10.1 5.07c-.639.49-1.155.875-1.75 1.251a17.3 17.3 0 0 1-.289-1.636c-.09-.714-.14-1.433-.148-2.153.766.04 1.528.152 2.274.333v.026Z"></path><path d="M14.659 11.115a.675.675 0 0 0-.534-.271h-.245a14.953 14.953 0 0 0-1.575-3.063.927.927 0 0 0-1.277-.271 24.573 24.573 0 0 0-2.512 1.977c-.253.237-.481.455-.7.683l-.402-.298a25 25 0 0 0-2.485-1.54.875.875 0 0 0-.735-.06.928.928 0 0 0-.569.49c-.305.679-.573 1.374-.805 2.082h-.945a.674.674 0 0 0-.534.271.656.656 0 0 0-.087.595l.542 1.627a2.108 2.108 0 0 0 1.995 1.444h8.418a2.109 2.109 0 0 0 1.995-1.444l.542-1.627a.656.656 0 0 0-.087-.595ZM11.43 8.814c.4.647.745 1.326 1.033 2.03h-3.5l.402-.385a22.903 22.903 0 0 1 2.065-1.645Zm-6.764.875c.639.358 1.243.743 1.838 1.155H4.22c.14-.385.28-.77.446-1.155Zm8.295 3.237a.797.797 0 0 1-.752.543H3.79a.796.796 0 0 1-.752-.543l-.289-.77h10.5l-.289.77Z"></path></svg>';
 
 class IconNachos extends HTMLElement {
     constructor () {

package/dist/IconNachosLarge.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--nachosLarge"><path d="M18.188 9a.875.875 0 1 1 0 1.75.875.875 0 0 1 0-1.75Zm-.875-1.75a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Zm3.5.875a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Zm-6.8 1.47a41.126 41.126 0 0 1-.323-5.512c.018-.333.162-.646.402-.875a1.435 1.435 0 0 1 1.033-.412c1.98.049 3.946.325 5.863.823 1.832.485 3.596 1.2 5.25 2.126a1.198 1.198 0 0 1 .603.875 1.296 1.296 0 0 1-.402 1.076 60.339 60.339 0 0 1-4.822 4.113 60.719 60.719 0 0 1-4.725 3.29 1.41 1.41 0 0 1-.735.219 1.313 1.313 0 0 1-.48-.097 1.18 1.18 0 0 1-.718-.805 40.53 40.53 0 0 1-.945-4.821Zm1.427-5.04c.005 1.612.107 3.222.306 4.821.17 1.318.406 2.627.709 3.92a52.45 52.45 0 0 0 4.069-2.87 61.767 61.767 0 0 0 4.174-3.5 21.042 21.042 0 0 0-4.2-1.601 24 24 0 0 0-5.058-.77ZM29.125 23.28l-1.137 3.264a3.763 3.763 0 0 1-3.58 2.581H7.592a3.762 3.762 0 0 1-3.579-2.581L2.92 23.28a.875.875 0 0 1 .122-.788.875.875 0 0 1 .709-.367h2.24a43.578 43.578 0 0 1 1.697-4.427 1.4 1.4 0 0 1 1.96-.648 48.003 48.003 0 0 1 4.55 2.8 36.939 36.939 0 0 1 3.5-2.765 1.286 1.286 0 0 1 1.75.367c.175.263.333.525.5.788a44.762 44.762 0 0 1 4.287-.77 1.32 1.32 0 0 1 1.041.297 1.365 1.365 0 0 1 .499.998c.061 1.111.061 2.24 0 3.36h2.476a.876.876 0 0 1 .709.367.875.875 0 0 1 .166.788ZM20.9 19.85c.358.708.676 1.436.954 2.179v.096h2.231v-2.861a38.866 38.866 0 0 0-3.229.586h.044Zm-5.775 1.505c-.289.262-.543.516-.796.77h5.635a20.785 20.785 0 0 0-1.698-3.308 35.634 35.634 0 0 0-3.141 2.538Zm-7.289.77h4.043c.315-.341.647-.691 1.006-1.041-1.225-.875-2.459-1.61-3.754-2.328a39.289 39.289 0 0 0-1.295 3.369Zm19.198 1.75H4.966l.7 2.117a2.039 2.039 0 0 0 1.925 1.383H24.41a2.039 2.039 0 0 0 1.925-1.383l.7-2.117Z"></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--nachosLarge"><path d="M18.188 9a.875.875 0 1 1 0 1.75.875.875 0 0 1 0-1.75Zm-.875-1.75a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Zm3.5.875a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75Zm-6.8 1.47a41.126 41.126 0 0 1-.323-5.512c.018-.333.162-.646.402-.875a1.435 1.435 0 0 1 1.033-.412c1.98.049 3.946.325 5.863.823 1.832.485 3.596 1.2 5.25 2.126a1.198 1.198 0 0 1 .603.875 1.296 1.296 0 0 1-.402 1.076 60.339 60.339 0 0 1-4.822 4.113 60.719 60.719 0 0 1-4.725 3.29 1.41 1.41 0 0 1-.735.219 1.313 1.313 0 0 1-.48-.097 1.18 1.18 0 0 1-.718-.805 40.53 40.53 0 0 1-.945-4.821Zm1.427-5.04c.005 1.612.107 3.222.306 4.821.17 1.318.406 2.627.709 3.92a52.45 52.45 0 0 0 4.069-2.87 61.767 61.767 0 0 0 4.174-3.5 21.042 21.042 0 0 0-4.2-1.601 24 24 0 0 0-5.058-.77ZM29.125 23.28l-1.137 3.264a3.763 3.763 0 0 1-3.58 2.581H7.592a3.762 3.762 0 0 1-3.579-2.581L2.92 23.28a.875.875 0 0 1 .122-.788.875.875 0 0 1 .709-.367h2.24a43.578 43.578 0 0 1 1.697-4.427 1.4 1.4 0 0 1 1.96-.648 48.003 48.003 0 0 1 4.55 2.8 36.939 36.939 0 0 1 3.5-2.765 1.286 1.286 0 0 1 1.75.367c.175.263.333.525.5.788a44.762 44.762 0 0 1 4.287-.77 1.32 1.32 0 0 1 1.041.297 1.365 1.365 0 0 1 .499.998c.061 1.111.061 2.24 0 3.36h2.476a.876.876 0 0 1 .709.367.875.875 0 0 1 .166.788ZM20.9 19.85c.358.708.676 1.436.954 2.179v.096h2.231v-2.861a38.866 38.866 0 0 0-3.229.586h.044Zm-5.775 1.505c-.289.262-.543.516-.796.77h5.635a20.785 20.785 0 0 0-1.698-3.308 35.634 35.634 0 0 0-3.141 2.538Zm-7.289.77h4.043c.315-.341.647-.691 1.006-1.041-1.225-.875-2.459-1.61-3.754-2.328a39.289 39.289 0 0 0-1.295 3.369Zm19.198 1.75H4.966l.7 2.117a2.039 2.039 0 0 0 1.925 1.383H24.41a2.039 2.039 0 0 0 1.925-1.383l.7-2.117Z"></path></svg>';
 
 class IconNachosLarge extends HTMLElement {
     constructor () {

package/dist/IconNavigationCollapse.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--navigationCollapse"><path d="M2.32 2.373V13.45h8.64a3.325 3.325 0 0 0 3.331-3.322V2.373H2.321Zm1.338 1.33h1.33v8.417h-1.33V3.703Zm9.304 6.424a1.994 1.994 0 0 1-1.994 1.993H6.317V3.703h6.645v6.424Z"></path><path d="M11.793 9.666v-3.5L9.187 7.99l2.606 1.675Z"></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--navigationCollapse"><path d="M2.32 2.373V13.45h8.64a3.325 3.325 0 0 0 3.331-3.322V2.373H2.321Zm1.338 1.33h1.33v8.417h-1.33V3.703Zm9.304 6.424a1.994 1.994 0 0 1-1.994 1.993H6.317V3.703h6.645v6.424Z"></path><path d="M11.793 9.666v-3.5L9.187 7.99l2.606 1.675Z"></path></svg>';
 
 class IconNavigationCollapse extends HTMLElement {
     constructor () {

package/dist/IconNavigationCollapseLarge.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--navigationCollapseLarge"><path d="M4.625 4.625v22.75H23A4.375 4.375 0 0 0 27.375 23V4.625H4.625Zm1.75 1.75h1.75v19.25h-1.75V6.375ZM25.625 23A2.625 2.625 0 0 1 23 25.625H9.875V6.375h15.75V23Z"></path><path d="m19.614 16.945-1.243-1.242-2.861 2.87a1.305 1.305 0 0 0 0 1.854l2.861 2.87 1.243-1.242-1.68-1.68h5.941v-1.75h-5.941l1.68-1.68Z"></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--navigationCollapseLarge"><path d="M4.625 4.625v22.75H23A4.375 4.375 0 0 0 27.375 23V4.625H4.625Zm1.75 1.75h1.75v19.25h-1.75V6.375ZM25.625 23A2.625 2.625 0 0 1 23 25.625H9.875V6.375h15.75V23Z"></path><path d="m19.614 16.945-1.243-1.242-2.861 2.87a1.305 1.305 0 0 0 0 1.854l2.861 2.87 1.243-1.242-1.68-1.68h5.941v-1.75h-5.941l1.68-1.68Z"></path></svg>';
 
 class IconNavigationCollapseLarge extends HTMLElement {
     constructor () {

package/dist/IconNavigationExpand.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--navigationExpand"><path d="M1.93 2.373V13.45h8.64a3.323 3.323 0 0 0 3.322-3.322V2.373H1.93Zm1.33 1.33h3.1v8.417h-3.1V3.703Zm9.303 6.424a1.994 1.994 0 0 1-1.994 1.993H7.69V3.703h4.874v6.424Z"></path><path d="m8.797 9.666 2.605-1.826-2.605-1.674"></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--navigationExpand"><path d="M1.93 2.373V13.45h8.64a3.323 3.323 0 0 0 3.322-3.322V2.373H1.93Zm1.33 1.33h3.1v8.417h-3.1V3.703Zm9.303 6.424a1.994 1.994 0 0 1-1.994 1.993H7.69V3.703h4.874v6.424Z"></path><path d="m8.797 9.666 2.605-1.826-2.605-1.674"></path></svg>';
 
 class IconNavigationExpand extends HTMLElement {
     constructor () {

package/dist/IconNavigationExpandLarge.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--navigationExpandLarge"><path d="M4.48 4.48v23.03h18.602a4.429 4.429 0 0 0 4.429-4.428V4.48H4.48Zm7.086 21.26H6.252V6.251h5.314v19.487Zm14.173-2.658a2.657 2.657 0 0 1-2.657 2.657h-9.744V6.252h12.401v16.83Z"></path><path d="m19.468 16.952 1.7 1.701H15.11v1.771h6.058l-1.7 1.701 1.249 1.258 2.905-2.905a1.338 1.338 0 0 0 0-1.878l-2.905-2.897-1.25 1.25Z"></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--navigationExpandLarge"><path d="M4.48 4.48v23.03h18.602a4.429 4.429 0 0 0 4.429-4.428V4.48H4.48Zm7.086 21.26H6.252V6.251h5.314v19.487Zm14.173-2.658a2.657 2.657 0 0 1-2.657 2.657h-9.744V6.252h12.401v16.83Z"></path><path d="m19.468 16.952 1.7 1.701H15.11v1.771h6.058l-1.7 1.701 1.249 1.258 2.905-2.905a1.338 1.338 0 0 0 0-1.878l-2.905-2.897-1.25 1.25Z"></path></svg>';
 
 class IconNavigationExpandLarge extends HTMLElement {
     constructor () {

package/dist/IconNetworkError.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--networkError"><path d="M13.189 3.013H9.05v5.46L4.824 1.437H3.3l3.063 5.11H2.81v6.44H6.95v-5.46l2.1 3.5v1.96h1.181l.945 1.575H12.7l-.937-1.574h1.427V3.011Zm-7.551 8.75H4.124V7.824h1.514v3.937Zm6.238 0h-.875l-.638-1.138V4.299h1.513v7.463Z"></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--networkError"><path d="M13.189 3.013H9.05v5.46L4.824 1.437H3.3l3.063 5.11H2.81v6.44H6.95v-5.46l2.1 3.5v1.96h1.181l.945 1.575H12.7l-.937-1.574h1.427V3.011Zm-7.551 8.75H4.124V7.824h1.514v3.937Zm6.238 0h-.875l-.638-1.138V4.299h1.513v7.463Z"></path></svg>';
 
 class IconNetworkError extends HTMLElement {
     constructor () {

package/dist/IconNetworkErrorLarge.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--networkErrorLarge"><path d="M7 25h4.8V14.5H7V25Zm1.5-9h1.8v7.5H8.5V16Z"></path><path d="M25 7h-4.8v14.543l-1.8-3V10.75h-4.65l-3.623-6H8.372l5.25 8.707V25h4.8v-3.54l1.8 3V25h.278l1.35 2.25h1.755L22.255 25H25V7Zm-9.9 5.25h1.8v3.795l-1.8-3v-.795Zm1.8 11.25h-1.8v-7.545l1.8 3V23.5Zm6.6 0h-1.8v-15h1.8v15Z"></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--networkErrorLarge"><path d="M7 25h4.8V14.5H7V25Zm1.5-9h1.8v7.5H8.5V16Z"></path><path d="M25 7h-4.8v14.543l-1.8-3V10.75h-4.65l-3.623-6H8.372l5.25 8.707V25h4.8v-3.54l1.8 3V25h.278l1.35 2.25h1.755L22.255 25H25V7Zm-9.9 5.25h1.8v3.795l-1.8-3v-.795Zm1.8 11.25h-1.8v-7.545l1.8 3V23.5Zm6.6 0h-1.8v-15h1.8v15Z"></path></svg>';
 
 class IconNetworkErrorLarge extends HTMLElement {
     constructor () {

package/dist/IconNoodles.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--noodles"><path d="m14.125 3.793-.942-.83-3.59 3.762L11.35 2.34l-1.2-.465-1.593 4.011A3.191 3.191 0 0 0 7.11 4.788a3.299 3.299 0 0 0-1.832-.147 3.234 3.234 0 0 0-1.613.852c-.44.431-.741.978-.865 1.573h-.925V9.35c0 .807.258 1.595.736 2.256a4.047 4.047 0 0 0 1.937 1.44l.257 1.079h5.705l.257-1.08a4.047 4.047 0 0 0 1.937-1.44 3.854 3.854 0 0 0 .736-2.255V7.066h-2.425l3.11-3.273ZM5.945 5.82c.396 0 .783.12 1.107.344.324.223.568.538.7.902H4.137c.13-.364.375-.679.699-.902a1.96 1.96 0 0 1 1.108-.344Zm6.21 3.53a2.639 2.639 0 0 1-.587 1.646c-.378.47-.907.806-1.503.953l-.377.1-.197.83H5.824l-.197-.83-.377-.1a2.784 2.784 0 0 1-1.504-.953A2.64 2.64 0 0 1 3.16 9.35V8.31h8.995V9.35Z"></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--noodles"><path d="m14.125 3.793-.942-.83-3.59 3.762L11.35 2.34l-1.2-.465-1.593 4.011A3.191 3.191 0 0 0 7.11 4.788a3.299 3.299 0 0 0-1.832-.147 3.234 3.234 0 0 0-1.613.852c-.44.431-.741.978-.865 1.573h-.925V9.35c0 .807.258 1.595.736 2.256a4.047 4.047 0 0 0 1.937 1.44l.257 1.079h5.705l.257-1.08a4.047 4.047 0 0 0 1.937-1.44 3.854 3.854 0 0 0 .736-2.255V7.066h-2.425l3.11-3.273ZM5.945 5.82c.396 0 .783.12 1.107.344.324.223.568.538.7.902H4.137c.13-.364.375-.679.699-.902a1.96 1.96 0 0 1 1.108-.344Zm6.21 3.53a2.639 2.639 0 0 1-.587 1.646c-.378.47-.907.806-1.503.953l-.377.1-.197.83H5.824l-.197-.83-.377-.1a2.784 2.784 0 0 1-1.504-.953A2.64 2.64 0 0 1 3.16 9.35V8.31h8.995V9.35Z"></path></svg>';
 
 class IconNoodles extends HTMLElement {
     constructor () {

package/dist/IconNoodlesLarge.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--noodlesLarge"><path d="M24.755 14.854a4.376 4.376 0 0 0-3.902-3.5l5.652-5.906-1.26-1.173-7 7.35 2.537-9.152L19.102 2l-2.432 8.627a7 7 0 0 0-11.734 4.227H4v4.375a7.875 7.875 0 0 0 5.39 7.446l.508 2.179h10.954l.508-2.179a7.875 7.875 0 0 0 5.39-7.446v-4.375h-1.995Zm-1.82 0h-4.121a7.008 7.008 0 0 0-.201-.963 2.626 2.626 0 0 1 4.322.963Zm-11.06-4.375a5.25 5.25 0 0 1 4.375 2.345c.146.23.272.474.376.726.2.413.34.852.42 1.304h-1.338a3.11 3.11 0 0 0-.254-.744 4.218 4.218 0 0 0-.289-.551 3.938 3.938 0 0 0-7.122 1.295h-1.34a5.25 5.25 0 0 1 5.172-4.375Zm1.995 4.375H9.871a2.197 2.197 0 0 1 3.824-.35c.053.096.105.192.166.324l.009.026ZM25 19.229a6.125 6.125 0 0 1-4.594 5.906l-.516.131-.429 1.838H11.29l-.429-1.838-.516-.131a6.125 6.125 0 0 1-4.594-5.906v-2.625H25v2.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--noodlesLarge"><path d="M24.755 14.854a4.376 4.376 0 0 0-3.902-3.5l5.652-5.906-1.26-1.173-7 7.35 2.537-9.152L19.102 2l-2.432 8.627a7 7 0 0 0-11.734 4.227H4v4.375a7.875 7.875 0 0 0 5.39 7.446l.508 2.179h10.954l.508-2.179a7.875 7.875 0 0 0 5.39-7.446v-4.375h-1.995Zm-1.82 0h-4.121a7.008 7.008 0 0 0-.201-.963 2.626 2.626 0 0 1 4.322.963Zm-11.06-4.375a5.25 5.25 0 0 1 4.375 2.345c.146.23.272.474.376.726.2.413.34.852.42 1.304h-1.338a3.11 3.11 0 0 0-.254-.744 4.218 4.218 0 0 0-.289-.551 3.938 3.938 0 0 0-7.122 1.295h-1.34a5.25 5.25 0 0 1 5.172-4.375Zm1.995 4.375H9.871a2.197 2.197 0 0 1 3.824-.35c.053.096.105.192.166.324l.009.026ZM25 19.229a6.125 6.125 0 0 1-4.594 5.906l-.516.131-.429 1.838H11.29l-.429-1.838-.516-.131a6.125 6.125 0 0 1-4.594-5.906v-2.625H25v2.625Z"></path></svg>';
 
 class IconNoodlesLarge extends HTMLElement {
     constructor () {

package/dist/IconNote.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--note"><path d="M15 7.344H1v1.312h14V7.344Z"></path><path d="M11.5 11.719H1v1.312h10.5V11.72Z"></path><path d="M15 2.969H1V4.28h14V2.97Z"></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--note"><path d="M15 7.344H1v1.312h14V7.344Z"></path><path d="M11.5 11.719H1v1.312h10.5V11.72Z"></path><path d="M15 2.969H1V4.28h14V2.97Z"></path></svg>';
 
 class IconNote extends HTMLElement {
     constructor () {

package/dist/IconNoteLarge.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--noteLarge"><path d="M22.125 23H3.75v1.75h18.375V23Z"></path><path d="M28.25 7.25H3.75V9h24.5V7.25Z"></path><path d="M28.25 15.125H3.75v1.75h24.5v-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--noteLarge"><path d="M22.125 23H3.75v1.75h18.375V23Z"></path><path d="M28.25 7.25H3.75V9h24.5V7.25Z"></path><path d="M28.25 15.125H3.75v1.75h24.5v-1.75Z"></path></svg>';
 
 class IconNoteLarge extends HTMLElement {
     constructor () {

package/dist/IconNotification.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--notification"><path d="m13.906 10.354-.402-.403a4.577 4.577 0 0 1-1.348-3.255V6.25a4.165 4.165 0 0 0-1.365-3.08 4.208 4.208 0 0 0-2.135-1.006V1H7.344v1.164a4.287 4.287 0 0 0-3.5 4.252v.28a4.576 4.576 0 0 1-1.348 3.255l-.402.403v1.802h3.089a2.827 2.827 0 0 0 5.635 0h3.088v-1.802ZM8 13.469a1.532 1.532 0 0 1-1.514-1.313h3.028A1.531 1.531 0 0 1 8 13.47Zm2.686-2.625H3.46a5.871 5.871 0 0 0 1.697-4.148v-.28a2.958 2.958 0 0 1 2.555-2.992 2.844 2.844 0 0 1 3.133 2.826v.446a5.872 5.872 0 0 0 1.697 4.148h-1.855Z"></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--notification"><path d="m13.906 10.354-.402-.403a4.577 4.577 0 0 1-1.348-3.255V6.25a4.165 4.165 0 0 0-1.365-3.08 4.208 4.208 0 0 0-2.135-1.006V1H7.344v1.164a4.287 4.287 0 0 0-3.5 4.252v.28a4.576 4.576 0 0 1-1.348 3.255l-.402.403v1.802h3.089a2.827 2.827 0 0 0 5.635 0h3.088v-1.802ZM8 13.469a1.532 1.532 0 0 1-1.514-1.313h3.028A1.531 1.531 0 0 1 8 13.47Zm2.686-2.625H3.46a5.871 5.871 0 0 0 1.697-4.148v-.28a2.958 2.958 0 0 1 2.555-2.992 2.844 2.844 0 0 1 3.133 2.826v.446a5.872 5.872 0 0 0 1.697 4.148h-1.855Z"></path></svg>';
 
 class IconNotification extends HTMLElement {
     constructor () {

package/dist/IconNotificationFilled.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--notificationFilled"><path d="M13.504 9.951a4.577 4.577 0 0 1-1.348-3.255V6.25a4.165 4.165 0 0 0-1.365-3.08 4.208 4.208 0 0 0-2.135-1.006V1H7.344v1.164a4.287 4.287 0 0 0-3.5 4.252v.28a4.576 4.576 0 0 1-1.348 3.255l-.402.403v1.802h11.812v-1.802l-.402-.403Z"></path><path d="M8 14.781a2.817 2.817 0 0 0 2.371-1.312H5.63A2.819 2.819 0 0 0 8 14.78Z"></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--notificationFilled"><path d="M13.504 9.951a4.577 4.577 0 0 1-1.348-3.255V6.25a4.165 4.165 0 0 0-1.365-3.08 4.208 4.208 0 0 0-2.135-1.006V1H7.344v1.164a4.287 4.287 0 0 0-3.5 4.252v.28a4.576 4.576 0 0 1-1.348 3.255l-.402.403v1.802h11.812v-1.802l-.402-.403Z"></path><path d="M8 14.781a2.817 2.817 0 0 0 2.371-1.312H5.63A2.819 2.819 0 0 0 8 14.78Z"></path></svg>';
 
 class IconNotificationFilled extends HTMLElement {
     constructor () {

package/dist/IconNotificationFilledLarge.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--notificationFilledLarge"><path d="M16 29.125a4.506 4.506 0 0 0 4.086-2.625h-8.172A4.507 4.507 0 0 0 16 29.125Z"></path><path d="M26.692 21.084a9.554 9.554 0 0 1-2.817-6.834v-.875a7.875 7.875 0 0 0-7-7.822V2.875h-1.75v2.678a8.137 8.137 0 0 0-7 8.146v.551a9.555 9.555 0 0 1-2.817 6.808l-.683.708v2.984h22.75v-2.984l-.683-.682Z"></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--notificationFilledLarge"><path d="M16 29.125a4.506 4.506 0 0 0 4.086-2.625h-8.172A4.507 4.507 0 0 0 16 29.125Z"></path><path d="M26.692 21.084a9.554 9.554 0 0 1-2.817-6.834v-.875a7.875 7.875 0 0 0-7-7.822V2.875h-1.75v2.678a8.137 8.137 0 0 0-7 8.146v.551a9.555 9.555 0 0 1-2.817 6.808l-.683.708v2.984h22.75v-2.984l-.683-.682Z"></path></svg>';
 
 class IconNotificationFilledLarge extends HTMLElement {
     constructor () {

package/dist/IconNotificationLarge.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--notificationLarge"><path d="m27.375 21.766-.683-.682a9.554 9.554 0 0 1-2.817-6.834v-.875a7.875 7.875 0 0 0-7-7.822V2.875h-1.75v2.678a8.137 8.137 0 0 0-7 8.146v.551a9.555 9.555 0 0 1-2.817 6.808l-.683.708v2.984h6.869a4.506 4.506 0 1 0 9.012 0h6.869v-2.984ZM16 27.375a2.765 2.765 0 0 1-2.765-2.625h5.53A2.765 2.765 0 0 1 16 27.375ZM25.625 23H6.375v-.516l.166-.167a11.28 11.28 0 0 0 3.334-8.067v-.578a6.361 6.361 0 0 1 5.512-6.422 6.072 6.072 0 0 1 4.726 1.549 6.126 6.126 0 0 1 2.012 4.576v.875a11.28 11.28 0 0 0 3.334 8.041l.166.166V23Z"></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--notificationLarge"><path d="m27.375 21.766-.683-.682a9.554 9.554 0 0 1-2.817-6.834v-.875a7.875 7.875 0 0 0-7-7.822V2.875h-1.75v2.678a8.137 8.137 0 0 0-7 8.146v.551a9.555 9.555 0 0 1-2.817 6.808l-.683.708v2.984h6.869a4.506 4.506 0 1 0 9.012 0h6.869v-2.984ZM16 27.375a2.765 2.765 0 0 1-2.765-2.625h5.53A2.765 2.765 0 0 1 16 27.375ZM25.625 23H6.375v-.516l.166-.167a11.28 11.28 0 0 0 3.334-8.067v-.578a6.361 6.361 0 0 1 5.512-6.422 6.072 6.072 0 0 1 4.726 1.549 6.126 6.126 0 0 1 2.012 4.576v.875a11.28 11.28 0 0 0 3.334 8.041l.166.166V23Z"></path></svg>';
 
 class IconNotificationLarge extends HTMLElement {
     constructor () {

package/dist/IconNotificationOff.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--notificationOff"><path d="m13.906 10.459-.402-.403a4.567 4.567 0 0 1-1.348-3.246v-.455a4.182 4.182 0 0 0-1.365-3.08 4.121 4.121 0 0 0-2.135-.998V1.105H7.344v1.172c-.58.098-1.13.326-1.61.665l-.91-1.505H3.3L4.754 3.87a4.375 4.375 0 0 0-.875 2.625v.289A4.568 4.568 0 0 1 2.53 10.03l-.402.402v1.803h3.054a2.817 2.817 0 0 0 5.293 1.138l.7 1.163H12.7l-1.374-2.275h2.581V10.46ZM8 13.574a1.531 1.531 0 0 1-1.514-1.313h3.028A1.531 1.531 0 0 1 8 13.574Zm-2.144-2.625H3.46A5.871 5.871 0 0 0 5.156 6.81v-.289a3.08 3.08 0 0 1 .35-1.409l3.5 5.837h-3.15Zm4.83 0h-.148l-4.14-6.895a2.747 2.747 0 0 1 1.313-.525 2.844 2.844 0 0 1 3.133 2.826v.455a5.871 5.871 0 0 0 1.697 4.139h-1.855Z"></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--notificationOff"><path d="m13.906 10.459-.402-.403a4.567 4.567 0 0 1-1.348-3.246v-.455a4.182 4.182 0 0 0-1.365-3.08 4.121 4.121 0 0 0-2.135-.998V1.105H7.344v1.172c-.58.098-1.13.326-1.61.665l-.91-1.505H3.3L4.754 3.87a4.375 4.375 0 0 0-.875 2.625v.289A4.568 4.568 0 0 1 2.53 10.03l-.402.402v1.803h3.054a2.817 2.817 0 0 0 5.293 1.138l.7 1.163H12.7l-1.374-2.275h2.581V10.46ZM8 13.574a1.531 1.531 0 0 1-1.514-1.313h3.028A1.531 1.531 0 0 1 8 13.574Zm-2.144-2.625H3.46A5.871 5.871 0 0 0 5.156 6.81v-.289a3.08 3.08 0 0 1 .35-1.409l3.5 5.837h-3.15Zm4.83 0h-.148l-4.14-6.895a2.747 2.747 0 0 1 1.313-.525 2.844 2.844 0 0 1 3.133 2.826v.455a5.871 5.871 0 0 0 1.697 4.139h-1.855Z"></path></svg>';
 
 class IconNotificationOff extends HTMLElement {
     constructor () {

package/dist/IconNotificationOffLarge.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--notificationOffLarge"><path d="m27.375 21.766-.683-.682a9.554 9.554 0 0 1-2.817-6.834v-.875a7.875 7.875 0 0 0-7-7.822V2.875h-1.75v2.678a7.508 7.508 0 0 0-3.5 1.382l-2.476-4.06H7.1l3.15 5.25a8.409 8.409 0 0 0-2.126 5.574v.551a9.555 9.555 0 0 1-2.817 6.808l-.683.708v2.984h6.869a4.497 4.497 0 0 0 8.96.376l2.397 3.999H24.9l-2.625-4.375h5.101v-2.984ZM16 27.375a2.765 2.765 0 0 1-2.765-2.625h5.53A2.765 2.765 0 0 1 16 27.375ZM11.713 23H6.375v-.516l.166-.167a11.28 11.28 0 0 0 3.334-8.067v-.578a6.667 6.667 0 0 1 1.33-3.99L19.176 23h-7.463Zm13.912 0H21.25L12.5 8.431a5.757 5.757 0 0 1 2.887-1.181 6.072 6.072 0 0 1 4.726 1.549 6.126 6.126 0 0 1 2.012 4.576v.875a11.28 11.28 0 0 0 3.334 8.041l.166.166V23Z"></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--notificationOffLarge"><path d="m27.375 21.766-.683-.682a9.554 9.554 0 0 1-2.817-6.834v-.875a7.875 7.875 0 0 0-7-7.822V2.875h-1.75v2.678a7.508 7.508 0 0 0-3.5 1.382l-2.476-4.06H7.1l3.15 5.25a8.409 8.409 0 0 0-2.126 5.574v.551a9.555 9.555 0 0 1-2.817 6.808l-.683.708v2.984h6.869a4.497 4.497 0 0 0 8.96.376l2.397 3.999H24.9l-2.625-4.375h5.101v-2.984ZM16 27.375a2.765 2.765 0 0 1-2.765-2.625h5.53A2.765 2.765 0 0 1 16 27.375ZM11.713 23H6.375v-.516l.166-.167a11.28 11.28 0 0 0 3.334-8.067v-.578a6.667 6.667 0 0 1 1.33-3.99L19.176 23h-7.463Zm13.912 0H21.25L12.5 8.431a5.757 5.757 0 0 1 2.887-1.181 6.072 6.072 0 0 1 4.726 1.549 6.126 6.126 0 0 1 2.012 4.576v.875a11.28 11.28 0 0 0 3.334 8.041l.166.166V23Z"></path></svg>';
 
 class IconNotificationOffLarge extends HTMLElement {
     constructor () {

package/dist/IconNumberSymbol.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--numberSymbol"><path d="m13.18 6.049.184-1.295h-1.96l.472-3.247h-1.312l-.473 3.247H6.854l.472-3.247H6.022l-.48 3.247H3.545l-.184 1.295h2.013L4.806 9.95H2.82l-.184 1.295h1.96l-.472 3.246h1.312l.473-3.246h3.237l-.472 3.246h1.303l.482-3.246h1.995l.183-1.295h-2.012l.569-3.902h1.986ZM9.33 9.95H6.101L6.67 6.05h3.229L9.33 9.95Z"></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--numberSymbol"><path d="m13.18 6.049.184-1.295h-1.96l.472-3.247h-1.312l-.473 3.247H6.854l.472-3.247H6.022l-.48 3.247H3.545l-.184 1.295h2.013L4.806 9.95H2.82l-.184 1.295h1.96l-.472 3.246h1.312l.473-3.246h3.237l-.472 3.246h1.303l.482-3.246h1.995l.183-1.295h-2.012l.569-3.902h1.986ZM9.33 9.95H6.101L6.67 6.05h3.229L9.33 9.95Z"></path></svg>';
 
 class IconNumberSymbol extends HTMLElement {
     constructor () {

package/dist/IconNumberSymbolLarge.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--numberSymbolLarge"><path d="m23 13.375.245-1.75H20.62l.63-4.375H19.5l-.639 4.375h-4.375l.639-4.375h-1.75l-.639 4.375H9.997l-.245 1.75h2.687l-.77 5.25h-2.67l-.244 1.75h2.625l-.63 4.375h1.75l.639-4.375h4.375l-.64 4.375h1.75l.64-4.375h2.695l.245-1.75H19.56l.814-5.25H23Zm-5.189 5.25h-4.375l.814-5.25h4.375l-.814 5.25Z"></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--numberSymbolLarge"><path d="m23 13.375.245-1.75H20.62l.63-4.375H19.5l-.639 4.375h-4.375l.639-4.375h-1.75l-.639 4.375H9.997l-.245 1.75h2.687l-.77 5.25h-2.67l-.244 1.75h2.625l-.63 4.375h1.75l.639-4.375h4.375l-.64 4.375h1.75l.64-4.375h2.695l.245-1.75H19.56l.814-5.25H23Zm-5.189 5.25h-4.375l.814-5.25h4.375l-.814 5.25Z"></path></svg>';
 
 class IconNumberSymbolLarge extends HTMLElement {
     constructor () {

package/dist/IconNumeroSymbol.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--numeroSymbol"><path d="M12.183 9.015a2.827 2.827 0 0 1-1.13-.21 2.371 2.371 0 0 1-.813-.56 2.17 2.17 0 0 1-.49-.823 3.001 3.001 0 0 1-.166-1.006 2.923 2.923 0 0 1 .166-1.041c.096-.325.264-.623.49-.875.229-.242.506-.433.814-.56a2.827 2.827 0 0 1 1.129-.21c.39-.009.776.063 1.137.21.305.127.58.318.805.56.218.255.379.553.473.875.114.323.17.664.166 1.006.002.343-.054.683-.166 1.006a2.248 2.248 0 0 1-.473.823c-.225.242-.5.433-.805.56-.358.16-.745.243-1.137.245ZM10.93 6.39a1.83 1.83 0 0 0 .333 1.155 1.198 1.198 0 0 0 1.837 0c.235-.338.35-.745.324-1.155a1.838 1.838 0 0 0-.324-1.164 1.199 1.199 0 0 0-1.837 0 1.838 1.838 0 0 0-.333 1.19V6.39Z"></path><path d="M6.661 2.986v7.464L3.18 2.986H1.236v10.028h1.357V4.806l3.84 8.208h1.585V2.986H6.66Z"></path><path d="M14.361 11.281V9.97H9.986v1.312h4.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 16 16" class="c-pieIcon c-pieIcon--numeroSymbol"><path d="M12.183 9.015a2.827 2.827 0 0 1-1.13-.21 2.371 2.371 0 0 1-.813-.56 2.17 2.17 0 0 1-.49-.823 3.001 3.001 0 0 1-.166-1.006 2.923 2.923 0 0 1 .166-1.041c.096-.325.264-.623.49-.875.229-.242.506-.433.814-.56a2.827 2.827 0 0 1 1.129-.21c.39-.009.776.063 1.137.21.305.127.58.318.805.56.218.255.379.553.473.875.114.323.17.664.166 1.006.002.343-.054.683-.166 1.006a2.248 2.248 0 0 1-.473.823c-.225.242-.5.433-.805.56-.358.16-.745.243-1.137.245ZM10.93 6.39a1.83 1.83 0 0 0 .333 1.155 1.198 1.198 0 0 0 1.837 0c.235-.338.35-.745.324-1.155a1.838 1.838 0 0 0-.324-1.164 1.199 1.199 0 0 0-1.837 0 1.838 1.838 0 0 0-.333 1.19V6.39Z"></path><path d="M6.661 2.986v7.464L3.18 2.986H1.236v10.028h1.357V4.806l3.84 8.208h1.585V2.986H6.66Z"></path><path d="M14.361 11.281V9.97H9.986v1.312h4.375Z"></path></svg>';
 
 class IconNumeroSymbol extends HTMLElement {
     constructor () {

package/dist/IconNumeroSymbolLarge.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--numeroSymbolLarge"><path d="M26.5 21.25V19.5h-7v1.75h7Z"></path><path d="M23 17.75a5.11 5.11 0 0 1-1.978-.359 4.374 4.374 0 0 1-1.417-.971 4.006 4.006 0 0 1-.875-1.444 5.608 5.608 0 0 1 0-3.5 3.99 3.99 0 0 1 2.275-2.423A4.952 4.952 0 0 1 23 8.703a4.953 4.953 0 0 1 1.977.358 3.78 3.78 0 0 1 1.4.98c.386.418.684.909.875 1.444.189.564.283 1.155.28 1.75 0 .595-.094 1.185-.28 1.75a4.235 4.235 0 0 1-.875 1.444c-.393.418-.87.75-1.4.971a5.108 5.108 0 0 1-1.977.35Zm-2.188-4.533c-.04.72.164 1.432.578 2.022A1.934 1.934 0 0 0 23 16a1.916 1.916 0 0 0 1.592-.744c.414-.59.617-1.302.578-2.021a3.22 3.22 0 0 0-.578-2.03A1.909 1.909 0 0 0 23 10.47a1.925 1.925 0 0 0-1.61.735 3.22 3.22 0 0 0-.56 2.03l-.018-.018Z"></path><path d="M14.092 7.25v13.02L8.002 7.25H4.625v17.5h2.362V10.435l6.694 14.315h2.774V7.25h-2.362Z"></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--numeroSymbolLarge"><path d="M26.5 21.25V19.5h-7v1.75h7Z"></path><path d="M23 17.75a5.11 5.11 0 0 1-1.978-.359 4.374 4.374 0 0 1-1.417-.971 4.006 4.006 0 0 1-.875-1.444 5.608 5.608 0 0 1 0-3.5 3.99 3.99 0 0 1 2.275-2.423A4.952 4.952 0 0 1 23 8.703a4.953 4.953 0 0 1 1.977.358 3.78 3.78 0 0 1 1.4.98c.386.418.684.909.875 1.444.189.564.283 1.155.28 1.75 0 .595-.094 1.185-.28 1.75a4.235 4.235 0 0 1-.875 1.444c-.393.418-.87.75-1.4.971a5.108 5.108 0 0 1-1.977.35Zm-2.188-4.533c-.04.72.164 1.432.578 2.022A1.934 1.934 0 0 0 23 16a1.916 1.916 0 0 0 1.592-.744c.414-.59.617-1.302.578-2.021a3.22 3.22 0 0 0-.578-2.03A1.909 1.909 0 0 0 23 10.47a1.925 1.925 0 0 0-1.61.735 3.22 3.22 0 0 0-.56 2.03l-.018-.018Z"></path><path d="M14.092 7.25v13.02L8.002 7.25H4.625v17.5h2.362V10.435l6.694 14.315h2.774V7.25h-2.362Z"></path></svg>';
 
 class IconNumeroSymbolLarge extends HTMLElement {
     constructor () {

package/dist/IconNuts.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--nuts"><g clip-path="url(#prefix__clip0_8387_3604)"><path d="M14.695 9.102a4.806 4.806 0 0 0-.157-.871 5.523 5.523 0 0 0-1.376-2.344L11.62 4.345c.252-.47.2-1.054-.2-1.455a4.464 4.464 0 0 0-6.3 0l-.417.419c-.767-.636-2.013-1.455-3.39-1.403v1.368c.907-.052 1.813.522 2.414 1.02l-.34.339A4.421 4.421 0 0 0 2.08 7.787a4.42 4.42 0 0 0 1.307 3.153c.235.236.54.366.871.366.21 0 .401-.07.584-.165l1.516 1.515a5.415 5.415 0 0 0 2.317 1.368c.279.079.566.14.871.166.131.008.262.017.392.017.697 0 1.438-.165 2.152-.496l1.499-.715.583-1.272c.418-.862.601-1.768.532-2.605l-.009-.017ZM3.387 7.778c0-.845.331-1.63.923-2.23l1.734-1.734a3.169 3.169 0 0 1 2.23-.924c.81 0 1.569.288 2.178.872L4.267 9.947a3.122 3.122 0 0 1-.871-2.178l-.009.009Zm9.592 3.371-.392.854-1.063.505c-.636.288-1.29.41-1.873.358a3.633 3.633 0 0 1-.627-.114 4.11 4.11 0 0 1-1.76-1.036L5.8 10.252l4.931-4.922 1.49 1.49a4.138 4.138 0 0 1 1.045 1.777c.061.2.096.41.114.627.052.601-.088 1.263-.41 1.934l.009-.009Z"></path></g><defs><clipPath id="prefix__clip0_8387_3604"><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--nuts"><g clip-path="url(#prefix__clip0_8387_3604)"><path d="M14.695 9.102a4.806 4.806 0 0 0-.157-.871 5.523 5.523 0 0 0-1.376-2.344L11.62 4.345c.252-.47.2-1.054-.2-1.455a4.464 4.464 0 0 0-6.3 0l-.417.419c-.767-.636-2.013-1.455-3.39-1.403v1.368c.907-.052 1.813.522 2.414 1.02l-.34.339A4.421 4.421 0 0 0 2.08 7.787a4.42 4.42 0 0 0 1.307 3.153c.235.236.54.366.871.366.21 0 .401-.07.584-.165l1.516 1.515a5.415 5.415 0 0 0 2.317 1.368c.279.079.566.14.871.166.131.008.262.017.392.017.697 0 1.438-.165 2.152-.496l1.499-.715.583-1.272c.418-.862.601-1.768.532-2.605l-.009-.017ZM3.387 7.778c0-.845.331-1.63.923-2.23l1.734-1.734a3.169 3.169 0 0 1 2.23-.924c.81 0 1.569.288 2.178.872L4.267 9.947a3.122 3.122 0 0 1-.871-2.178l-.009.009Zm9.592 3.371-.392.854-1.063.505c-.636.288-1.29.41-1.873.358a3.633 3.633 0 0 1-.627-.114 4.11 4.11 0 0 1-1.76-1.036L5.8 10.252l4.931-4.922 1.49 1.49a4.138 4.138 0 0 1 1.045 1.777c.061.2.096.41.114.627.052.601-.088 1.263-.41 1.934l.009-.009Z"></path></g><defs><clipPath id="prefix__clip0_8387_3604"><rect width="14" height="14" transform="translate(1 1)"></rect></clipPath></defs></svg>';
 
 class IconNuts extends HTMLElement {
     constructor () {

package/dist/IconNutsLarge.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--nutsLarge"><path d="M27.168 19.464a8.038 8.038 0 0 0-.28-1.542 9.684 9.684 0 0 0-2.457-4.175l-3.015-3.006c.244-.331.375-.724.375-1.142 0-.523-.2-1.01-.575-1.377-3.077-3.076-8.079-3.076-11.155 0l-.784.785C7.935 7.673 5.582 5.826 2.88 5.86v1.734c2.074-.044 4.026 1.516 5.16 2.64L6.87 11.403a7.83 7.83 0 0 0-2.309 5.577 7.83 7.83 0 0 0 2.31 5.578c.365.366.853.575 1.376.575.419 0 .81-.13 1.142-.375l2.954 2.954a9.78 9.78 0 0 0 4.13 2.44 8.05 8.05 0 0 0 1.543.288c.227.017.462.035.698.035 1.237 0 2.544-.296 3.825-.88l2.658-1.273 1.02-2.24c.75-1.542 1.072-3.145.941-4.627l.009.009ZM8.405 21.329a.195.195 0 0 1-.148.061.195.195 0 0 1-.148-.061 6.11 6.11 0 0 1-1.804-4.349 6.09 6.09 0 0 1 1.804-4.348l2.213-2.214.14-.104s-.009-.018-.018-.018l.854-.854a6.15 6.15 0 0 1 4.349-1.795 6.15 6.15 0 0 1 4.349 1.795.195.195 0 0 1 .06.148.195.195 0 0 1-.06.149l-11.59 11.59Zm16.244 2.022-.767 1.682-2.074.984c-1.229.558-2.492.802-3.625.698a6.287 6.287 0 0 1-1.22-.227 7.834 7.834 0 0 1-3.381-2.004l-2.937-2.937 9.56-9.56 2.989 2.989a7.97 7.97 0 0 1 2.013 3.416c.113.384.183.793.218 1.22.104 1.168-.166 2.458-.785 3.739h.01Z"></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--nutsLarge"><path d="M27.168 19.464a8.038 8.038 0 0 0-.28-1.542 9.684 9.684 0 0 0-2.457-4.175l-3.015-3.006c.244-.331.375-.724.375-1.142 0-.523-.2-1.01-.575-1.377-3.077-3.076-8.079-3.076-11.155 0l-.784.785C7.935 7.673 5.582 5.826 2.88 5.86v1.734c2.074-.044 4.026 1.516 5.16 2.64L6.87 11.403a7.83 7.83 0 0 0-2.309 5.577 7.83 7.83 0 0 0 2.31 5.578c.365.366.853.575 1.376.575.419 0 .81-.13 1.142-.375l2.954 2.954a9.78 9.78 0 0 0 4.13 2.44 8.05 8.05 0 0 0 1.543.288c.227.017.462.035.698.035 1.237 0 2.544-.296 3.825-.88l2.658-1.273 1.02-2.24c.75-1.542 1.072-3.145.941-4.627l.009.009ZM8.405 21.329a.195.195 0 0 1-.148.061.195.195 0 0 1-.148-.061 6.11 6.11 0 0 1-1.804-4.349 6.09 6.09 0 0 1 1.804-4.348l2.213-2.214.14-.104s-.009-.018-.018-.018l.854-.854a6.15 6.15 0 0 1 4.349-1.795 6.15 6.15 0 0 1 4.349 1.795.195.195 0 0 1 .06.148.195.195 0 0 1-.06.149l-11.59 11.59Zm16.244 2.022-.767 1.682-2.074.984c-1.229.558-2.492.802-3.625.698a6.287 6.287 0 0 1-1.22-.227 7.834 7.834 0 0 1-3.381-2.004l-2.937-2.937 9.56-9.56 2.989 2.989a7.97 7.97 0 0 1 2.013 3.416c.113.384.183.793.218 1.22.104 1.168-.166 2.458-.785 3.739h.01Z"></path></svg>';
 
 class IconNutsLarge extends HTMLElement {
     constructor () {

package/dist/IconOffer.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--offer"><path d="M7.676 14.939 1.087 8.35l6.38-6.388a1.409 1.409 0 0 1 1.12-.402l5.337.534.533 5.346a1.373 1.373 0 0 1-.393 1.111L7.676 14.94ZM2.942 8.35l4.734 4.734 5.46-5.46-.411-4.332-4.27-.42L2.942 8.35Zm7.683-3.85a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-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 16 16" class="c-pieIcon c-pieIcon--offer"><path d="M7.676 14.939 1.087 8.35l6.38-6.388a1.409 1.409 0 0 1 1.12-.402l5.337.534.533 5.346a1.373 1.373 0 0 1-.393 1.111L7.676 14.94ZM2.942 8.35l4.734 4.734 5.46-5.46-.411-4.332-4.27-.42L2.942 8.35Zm7.683-3.85a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75Z"></path></svg>';
 
 class IconOffer extends HTMLElement {
     constructor () {