@six-group/ui-library 0.0.0-insider.012ddb2

package/dist/collection/components/six-header/test/six-header.spec.js

@@ -0,0 +1,177 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixHeader } from "../six-header";
+describe('six-header', () => {
+    beforeEach(() => {
+        const mutationObserverMock = jest.fn(function MutationObserver() {
+            this.observe = jest.fn();
+            this.disconnect = jest.fn();
+            return this;
+        });
+        global.MutationObserver = mutationObserverMock;
+    });
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SixHeader],
+            html: `<six-header></six-header>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-header>
+        <mock:shadow-root>
+          <header class="six-header">
+            <section class="six-header__menu">
+              <six-icon-button name="menu"></six-icon-button>
+            </section>
+            <section class="six-header__logo">
+             <svg height="20" viewBox="0 0 90 26" xmlns="http://www.w3.org/2000/svg">
+               <title>
+                 SIX
+               </title>
+               <g fill="#DE3919" fill-rule="nonzero">
+                 <path d="m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525"></path>
+                 <path d="m42.16.324h5.21v24.806h-5.21z"></path>
+                 <path d="m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545"></path>
+               </g>
+             </svg>
+
+            </section>
+            <section class="six-header__placeholder"></section>
+            <section class="six-header__custom">
+              <slot></slot>
+            </section>
+          </header>
+          <div class="six-header__search-field">
+            <slot name="search-field"></slot>
+          </div>
+        </mock:shadow-root>
+      </six-header>
+    `);
+    });
+    it('should render custom logo ', async () => {
+        // given
+        const html = `<six-header><div slot="logo">custom logo</div></six-header>`;
+        // when
+        const page = await newSpecPage({
+            components: [SixHeader],
+            html: html,
+        });
+        // then
+        expect(page.root).toEqualHtml(`
+      <six-header>
+        <mock:shadow-root>
+          <header class="six-header">
+            <section class="six-header__menu">
+              <six-icon-button name="menu"></six-icon-button>
+            </section>
+            <section>
+               <slot name="logo"></slot>
+            </section>
+            <section class="six-header__placeholder"></section>
+            <section class="six-header__custom">
+              <slot></slot>
+            </section>
+          </header>
+          <div class="six-header__search-field">
+            <slot name="search-field"></slot>
+          </div>
+        </mock:shadow-root>
+          <div slot="logo">
+            custom logo
+          </div>
+      </six-header>
+    `);
+    });
+    it('should render app switcher', async () => {
+        // given
+        const html = `<six-header>
+                    <six-menu slot="app-switcher-menu">
+                      <six-menu-item checked="false">Custody</six-menu-item>
+                      <six-menu-item checked="true">Swiss Interbank Clearing</six-menu-item>
+                    </six-menu>
+                  </six-header>`;
+        // when
+        const page = await newSpecPage({
+            components: [SixHeader],
+            html: html,
+        });
+        // then
+        expect(page.root).toEqualHtml(`
+      <six-header>
+        <mock:shadow-root>
+          <header class="six-header">
+            <section class="six-header__menu">
+              <six-icon-button name="menu"></six-icon-button>
+            </section>
+            <section class="six-header__logo">
+             <svg height="20" viewBox="0 0 90 26" xmlns="http://www.w3.org/2000/svg">
+               <title>
+                 SIX
+               </title>
+               <g fill="#DE3919" fill-rule="nonzero">
+                 <path d="m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525"></path>
+                 <path d="m42.16.324h5.21v24.806h-5.21z"></path>
+                 <path d="m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545"></path>
+               </g>
+             </svg>
+
+            </section>
+            <section class="six-header__placeholder"></section>
+            <section class="six-header__custom">
+              <slot></slot>
+            </section>
+            <section class="six-header__app-switcher">
+                <six-dropdown distance="13" placement="bottom-end" skidding="20">
+                  <div class="six-header__app-switcher-dropdown" slot="trigger">
+                    <a class="six-header__selected-app">Swiss Interbank Clearing</a>
+                    <six-icon-button name="apps"></six-icon-button>
+                  </div>
+                  <slot name="app-switcher-menu"></slot>
+               </six-dropdown>
+           </section>
+          </header>
+          <div class="six-header__search-field">
+            <slot name="search-field"></slot>
+          </div>
+        </mock:shadow-root>
+        <six-menu slot="app-switcher-menu">
+            <six-menu-item checked="false">Custody</six-menu-item>
+            <six-menu-item checked="true">Swiss Interbank Clearing</six-menu-item>
+        </six-menu>
+      </six-header>
+    `);
+    });
+    it('renders without hamburger menu', async () => {
+        const page = await newSpecPage({
+            components: [SixHeader],
+            html: `<six-header hide-hamburger-menu="true"></six-header>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-header hide-hamburger-menu="true">
+        <mock:shadow-root>
+          <header class="six-header">
+            <section class="six-header__logo">
+            <svg height="20" viewBox="0 0 90 26" xmlns="http://www.w3.org/2000/svg">
+              <title>
+                SIX
+              </title>
+              <g fill="#DE3919" fill-rule="nonzero">
+                <path d="m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525"></path>
+                <path d="m42.16.324h5.21v24.806h-5.21z"></path>
+                <path d="m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545"></path>
+              </g>
+            </svg>
+
+            </section>
+            <section class="six-header__placeholder"></section>
+            <section class="six-header__custom">
+              <slot></slot>
+            </section>
+          </header>
+          <div class="six-header__search-field">
+            <slot name="search-field"></slot>
+          </div>
+        </mock:shadow-root>
+      </six-header>
+  `);
+    });
+});
+//# sourceMappingURL=six-header.spec.js.map

package/dist/collection/components/six-header/test/six-header.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-header.spec.js","sourceRoot":"","sources":["../../../../src/components/six-header/test/six-header.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,UAAU,CAAC,GAAG,EAAE;QACd,MAAM,oBAAoB,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,gBAAgB;YAC5D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;YACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;YAC5B,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,gBAAgB,GAAG,oBAAoB,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,2BAA2B;SAClC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,QAAQ;QACR,MAAM,IAAI,GAAG,6DAA6D,CAAC;QAE3E,OAAO;QACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;QAEH,OAAO;QACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,QAAQ;QACR,MAAM,IAAI,GAAG;;;;;gCAKe,CAAC;QAE7B,OAAO;QACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;QAEH,OAAO;QACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2C7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,sDAAsD;SAC7D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2B/B,CAAC,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixHeader } from '../six-header';\n\ndescribe('six-header', () => {\n  beforeEach(() => {\n    const mutationObserverMock = jest.fn(function MutationObserver(this: MutationObserver): MutationObserver {\n      this.observe = jest.fn();\n      this.disconnect = jest.fn();\n      return this;\n    });\n    global.MutationObserver = mutationObserverMock;\n  });\n\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixHeader],\n      html: `<six-header></six-header>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-header>\n        <mock:shadow-root>\n          <header class=\"six-header\">\n            <section class=\"six-header__menu\">\n              <six-icon-button name=\"menu\"></six-icon-button>\n            </section>\n            <section class=\"six-header__logo\">\n             <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n               <title>\n                 SIX\n               </title>\n               <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n                 <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\"></path>\n                 <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\n                 <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\"></path>\n               </g>\n             </svg>\n\n            </section>\n            <section class=\"six-header__placeholder\"></section>\n            <section class=\"six-header__custom\">\n              <slot></slot>\n            </section>\n          </header>\n          <div class=\"six-header__search-field\">\n            <slot name=\"search-field\"></slot>\n          </div>\n        </mock:shadow-root>\n      </six-header>\n    `);\n  });\n\n  it('should render custom logo ', async () => {\n    // given\n    const html = `<six-header><div slot=\"logo\">custom logo</div></six-header>`;\n\n    // when\n    const page = await newSpecPage({\n      components: [SixHeader],\n      html: html,\n    });\n\n    // then\n    expect(page.root).toEqualHtml(`\n      <six-header>\n        <mock:shadow-root>\n          <header class=\"six-header\">\n            <section class=\"six-header__menu\">\n              <six-icon-button name=\"menu\"></six-icon-button>\n            </section>\n            <section>\n               <slot name=\"logo\"></slot>\n            </section>\n            <section class=\"six-header__placeholder\"></section>\n            <section class=\"six-header__custom\">\n              <slot></slot>\n            </section>\n          </header>\n          <div class=\"six-header__search-field\">\n            <slot name=\"search-field\"></slot>\n          </div>\n        </mock:shadow-root>\n          <div slot=\"logo\">\n            custom logo\n          </div>\n      </six-header>\n    `);\n  });\n\n  it('should render app switcher', async () => {\n    // given\n    const html = `<six-header>\n                    <six-menu slot=\"app-switcher-menu\">\n                      <six-menu-item checked=\"false\">Custody</six-menu-item>\n                      <six-menu-item checked=\"true\">Swiss Interbank Clearing</six-menu-item>\n                    </six-menu>\n                  </six-header>`;\n\n    // when\n    const page = await newSpecPage({\n      components: [SixHeader],\n      html: html,\n    });\n\n    // then\n    expect(page.root).toEqualHtml(`\n      <six-header>\n        <mock:shadow-root>\n          <header class=\"six-header\">\n            <section class=\"six-header__menu\">\n              <six-icon-button name=\"menu\"></six-icon-button>\n            </section>\n            <section class=\"six-header__logo\">\n             <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n               <title>\n                 SIX\n               </title>\n               <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n                 <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\"></path>\n                 <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\n                 <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\"></path>\n               </g>\n             </svg>\n\n            </section>\n            <section class=\"six-header__placeholder\"></section>\n            <section class=\"six-header__custom\">\n              <slot></slot>\n            </section>\n            <section class=\"six-header__app-switcher\">\n                <six-dropdown distance=\"13\" placement=\"bottom-end\" skidding=\"20\">\n                  <div class=\"six-header__app-switcher-dropdown\" slot=\"trigger\">\n                    <a class=\"six-header__selected-app\">Swiss Interbank Clearing</a>\n                    <six-icon-button name=\"apps\"></six-icon-button>\n                  </div>\n                  <slot name=\"app-switcher-menu\"></slot>\n               </six-dropdown>\n           </section>\n          </header>\n          <div class=\"six-header__search-field\">\n            <slot name=\"search-field\"></slot>\n          </div>\n        </mock:shadow-root>\n        <six-menu slot=\"app-switcher-menu\">\n            <six-menu-item checked=\"false\">Custody</six-menu-item>\n            <six-menu-item checked=\"true\">Swiss Interbank Clearing</six-menu-item>\n        </six-menu>\n      </six-header>\n    `);\n  });\n\n  it('renders without hamburger menu', async () => {\n    const page = await newSpecPage({\n      components: [SixHeader],\n      html: `<six-header hide-hamburger-menu=\"true\"></six-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <six-header hide-hamburger-menu=\"true\">\n        <mock:shadow-root>\n          <header class=\"six-header\">\n            <section class=\"six-header__logo\">\n            <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n              <title>\n                SIX\n              </title>\n              <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n                <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\"></path>\n                <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\n                <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\"></path>\n              </g>\n            </svg>\n\n            </section>\n            <section class=\"six-header__placeholder\"></section>\n            <section class=\"six-header__custom\">\n              <slot></slot>\n            </section>\n          </header>\n          <div class=\"six-header__search-field\">\n            <slot name=\"search-field\"></slot>\n          </div>\n        </mock:shadow-root>\n      </six-header>\n  `);\n  });\n});\n"]}

package/dist/collection/components/six-icon/six-icon.css

@@ -0,0 +1,66 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.material-icons {
+  vertical-align: middle;
+  font-weight: normal;
+  font-style: normal;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+  /* Support for IE. */
+  font-feature-settings: "liga";
+  /* Icon name should not be selectable. */
+  user-select: none;
+}
+
+.material-icons-filled {
+  font-family: "Material Icons";
+}
+
+.material-icons-outlined {
+  font-family: "Material Icons Outlined";
+}
+
+.icon--xsmall {
+  font-size: 12px;
+}
+.icon--small {
+  font-size: 18px;
+}
+.icon--medium {
+  font-size: 24px;
+}
+.icon--large {
+  font-size: 36px;
+}
+.icon--xlarge {
+  font-size: 48px;
+}
+.icon--xxlarge {
+  font-size: 72px;
+}
+.icon--xxxlarge {
+  font-size: 96px;
+}
+.icon--inherit {
+  font-size: 1.5em;
+}

package/dist/collection/components/six-icon/six-icon.js

@@ -0,0 +1,81 @@
+import { h } from "@stencil/core";
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the material icon name.
+ */
+export class SixIcon {
+    constructor() {
+        this.size = 'inherit';
+        this.filled = false;
+    }
+    render() {
+        return (h("i", { class: {
+                'material-icons': true,
+                'material-icons-outlined': !this.filled,
+                'material-icons-filled': this.filled,
+                'icon--xsmall': this.size === 'xSmall',
+                'icon--small': this.size === 'small',
+                'icon--medium': this.size === 'medium',
+                'icon--large': this.size === 'large',
+                'icon--xlarge': this.size === 'xLarge',
+                'icon--xxlarge': this.size === 'xxLarge',
+                'icon--xxxlarge': this.size === 'xxxLarge',
+                'icon--inherit': this.size === 'inherit',
+            } }, h("slot", null)));
+    }
+    static get is() { return "six-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge'",
+                    "resolved": "\"inherit\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon's size."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'inherit'"
+            },
+            "filled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If set to true the default material outlined icons are not used."
+                },
+                "attribute": "filled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=six-icon.js.map

package/dist/collection/components/six-icon/six-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-icon.js","sourceRoot":"","sources":["../../../src/components/six-icon/six-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAOH,MAAM,OAAO,OAAO;;oBAUD,SAAS;sBAGT,KAAK;;IAEtB,MAAM;QACJ,OAAO,CACL,SACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,yBAAyB,EAAE,CAAC,IAAI,CAAC,MAAM;gBACvC,uBAAuB,EAAE,IAAI,CAAC,MAAM;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACxC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;gBAC1C,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;aACzC;YAED,eAAa,CACX,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the material icon name.\n */\n\n@Component({\n  tag: 'six-icon',\n  styleUrls: ['six-icon.scss'],\n  shadow: true,\n})\nexport class SixIcon {\n  /** The icon's size. */\n  @Prop({ reflect: true }) size:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** If set to true the default material outlined icons are not used. */\n  @Prop() filled = false;\n\n  render() {\n    return (\n      <i\n        class={{\n          'material-icons': true,\n          'material-icons-outlined': !this.filled,\n          'material-icons-filled': this.filled,\n          'icon--xsmall': this.size === 'xSmall',\n          'icon--small': this.size === 'small',\n          'icon--medium': this.size === 'medium',\n          'icon--large': this.size === 'large',\n          'icon--xlarge': this.size === 'xLarge',\n          'icon--xxlarge': this.size === 'xxLarge',\n          'icon--xxxlarge': this.size === 'xxxLarge',\n          'icon--inherit': this.size === 'inherit',\n        }}\n      >\n        <slot></slot>\n      </i>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-icon/test/six-icon.spec.js

@@ -0,0 +1,20 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixIcon } from "../six-icon";
+describe('six-icon', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SixIcon],
+            html: `<six-icon></six-icon>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-icon size="inherit">
+        <mock:shadow-root>
+          <i class="icon--inherit material-icons material-icons-outlined">
+            <slot></slot>
+          </i>
+        </mock:shadow-root>
+      </six-icon>
+    `);
+    });
+});
+//# sourceMappingURL=six-icon.spec.js.map

package/dist/collection/components/six-icon/test/six-icon.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-icon.spec.js","sourceRoot":"","sources":["../../../../src/components/six-icon/test/six-icon.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,uBAAuB;SAC9B,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixIcon } from '../six-icon';\n\ndescribe('six-icon', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixIcon],\n      html: `<six-icon></six-icon>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-icon size=\"inherit\">\n        <mock:shadow-root>\n          <i class=\"icon--inherit material-icons material-icons-outlined\">\n            <slot></slot>\n          </i>\n        </mock:shadow-root>\n      </six-icon>\n    `);\n  });\n});\n"]}

package/dist/collection/components/six-icon-button/six-icon-button.css

@@ -0,0 +1,71 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: inline-block;
+}
+
+.icon-button {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: var(--six-border-radius-medium);
+  font-size: inherit;
+  color: var(--six-input-icon-color);
+  padding: var(--six-spacing-x-small);
+  cursor: pointer;
+  transition: var(--six-transition-medium) color;
+  -webkit-appearance: none;
+}
+.icon-button:hover:not(.icon-button--disabled), .icon-button:focus:not(.icon-button--disabled) {
+  color: var(--six-input-icon-color-hover);
+}
+.icon-button:active:not(.icon-button--disabled) {
+  color: var(--six-input-icon-color);
+}
+.icon-button:focus {
+  outline: none;
+}
+.icon-button:focus-visible {
+  outline: var(--six-focus-ring);
+  outline-offset: var(--six-focus-ring-offset);
+}
+
+.icon-button--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.icon-button-wrapper--disabled {
+  cursor: not-allowed;
+}
+
+.icon-button ::slotted(six-badge) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  pointer-events: none;
+}
+
+.icon-button six-icon[size=xLarge] + ::slotted(six-badge) {
+  transform: translateY(40%) translateX(-35%);
+}
+
+.icon-button six-icon[size=large] + ::slotted(six-badge) {
+  transform: translateY(20%) translateX(-20%);
+}
+
+.icon-button six-icon[size=medium] + ::slotted(six-badge) {
+  transform: translateY(10%) translateX(50%);
+}
+
+.icon-button six-icon[size=xSmall] + ::slotted(six-badge) {
+  transform: translateY(-25%) translateX(25%);
+}

package/dist/collection/components/six-icon-button/six-icon-button.js

@@ -0,0 +1,146 @@
+import { h } from "@stencil/core";
+import { focusVisible } from "../../utils/focus-visible";
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @part base - The component's base wrapper.
+ */
+export class SixIconButton {
+    constructor() {
+        this.handleClickEvent = (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.name = undefined;
+        this.size = 'medium';
+        this.label = undefined;
+        this.disabled = false;
+        this.html = undefined;
+    }
+    componentDidLoad() {
+        if (this.button != null) {
+            focusVisible.observe(this.button);
+        }
+    }
+    disconnectedCallback() {
+        if (this.button != null) {
+            focusVisible.unobserve(this.button);
+        }
+    }
+    render() {
+        const html = this.html && h("span", { innerHTML: this.html });
+        return (h("div", { onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h("button", { ref: (el) => (this.button = el), part: "base", disabled: this.disabled, class: {
+                'icon-button': true,
+                'icon-button--disabled': this.disabled,
+            }, type: "button", "aria-label": this.label }, h("six-icon", { "aria-hidden": "true", size: this.size }, this.name), h("slot", null), html)));
+    }
+    static get is() { return "six-icon-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-icon-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-icon-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon to draw."
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon's size."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\nalways include a label that describes what the icon button does."
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to disable the button."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "html": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML symbol code or entity."
+                },
+                "attribute": "html",
+                "reflect": true
+            }
+        };
+    }
+}
+//# sourceMappingURL=six-icon-button.js.map

package/dist/collection/components/six-icon-button/six-icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-icon-button.js","sourceRoot":"","sources":["../../../src/components/six-icon-button/six-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD;;;;;;;GAOG;AAOH,MAAM,OAAO,aAAa;;QA2DhB,qBAAgB,GAAG,CAAC,KAAY,EAAE,EAAE;YAC1C,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;aACzB;QACH,CAAC,CAAC;;oBAzD2G,QAAQ;;wBASjF,KAAK;;;IAKzC,gBAAgB;QACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;YACvB,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACnC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;YACvB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACrC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,YAAM,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QAEzD,OAAO,CACL,WAAK,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE;YAC5F,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;iBACvC,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK;gBAEtB,+BAAsB,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,IAAI,CACD;gBACX,eAAQ;gBACP,IAAI,CACE,CACL,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  private button?: HTMLButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html?: string;\n\n  componentDidLoad() {\n    if (this.button != null) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button != null) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={this.disabled}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type=\"button\"\n          aria-label={this.label}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"]}

package/dist/collection/components/six-icon-button/test/six-icon-button.spec.js

@@ -0,0 +1,23 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixIconButton } from "../six-icon-button";
+describe('six-icon-button', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SixIconButton],
+            html: `<six-icon-button></six-icon-button>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-icon-button size="medium">
+        <mock:shadow-root>
+         <div>
+          <button class="icon-button" part="base" type="button">
+            <six-icon aria-hidden="true" size="medium"></six-icon>
+            <slot></slot>
+          </button>
+         </div>
+        </mock:shadow-root>
+      </six-icon-button>
+    `);
+    });
+});
+//# sourceMappingURL=six-icon-button.spec.js.map

package/dist/collection/components/six-icon-button/test/six-icon-button.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-icon-button.spec.js","sourceRoot":"","sources":["../../../../src/components/six-icon-button/test/six-icon-button.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;YAC3B,IAAI,EAAE,qCAAqC;SAC5C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixIconButton } from '../six-icon-button';\n\ndescribe('six-icon-button', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixIconButton],\n      html: `<six-icon-button></six-icon-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-icon-button size=\"medium\">\n        <mock:shadow-root>\n         <div>\n          <button class=\"icon-button\" part=\"base\" type=\"button\">\n            <six-icon aria-hidden=\"true\" size=\"medium\"></six-icon>\n            <slot></slot>\n          </button>\n         </div>\n        </mock:shadow-root>\n      </six-icon-button>\n    `);\n  });\n});\n"]}