@six-group/ui-library 0.0.0-insider.fa8b667 → 0.0.0-insider.fade3a2

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

@@ -1,12 +1,12 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { SixBadge } from "../six-badge";
 describe('six-badge', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [SixBadge],
-      html: `<six-badge></six-badge>`,
-    });
-    expect(page.root).toEqualHtml(`
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SixBadge],
+            html: `<six-badge></six-badge>`,
+        });
+        expect(page.root).toEqualHtml(`
       <six-badge>
         <mock:shadow-root>
           <span class="badge badge--primary" part="base" role="status">
@@ -15,6 +15,6 @@ describe('six-badge', () => {
          </mock:shadow-root>
       </six-badge>
     `);
-  });
+    });
 });
 //# sourceMappingURL=six-badge.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"six-badge.spec.js","sourceRoot":"","sources":["../../../../src/components/six-badge/test/six-badge.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EACzB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,yBAAyB;KAChC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixBadge } from '../six-badge';\n\ndescribe('six-badge', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixBadge],\n      html: `<six-badge></six-badge>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-badge>\n        <mock:shadow-root>\n          <span class=\"badge badge--primary\" part=\"base\" role=\"status\">\n            <slot></slot>\n          </span>\n         </mock:shadow-root>\n      </six-badge>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"six-badge.spec.js","sourceRoot":"","sources":["../../../../src/components/six-badge/test/six-badge.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,yBAAyB;SAChC,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 { SixBadge } from '../six-badge';\n\ndescribe('six-badge', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixBadge],\n      html: `<six-badge></six-badge>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-badge>\n        <mock:shadow-root>\n          <span class=\"badge badge--primary\" part=\"base\" role=\"status\">\n            <slot></slot>\n          </span>\n         </mock:shadow-root>\n      </six-badge>\n    `);\n  });\n});\n"]}

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

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 :host {
@@ -41,6 +41,7 @@
 }
 .button ::slotted(six-icon) {
   pointer-events: none;
+  transform: translateY(-1.5px);
 }
 
 .button-wrapper--disabled {
@@ -54,6 +55,10 @@
   align-items: center;
 }
 
+.button:focus-visible {
+  outline: var(--six-focus-ring);
+  outline-offset: var(--six-focus-ring-offset);
+}
 .button.button--secondary {
   background-color: var(--six-color-white);
   border-color: var(--six-color-web-rock-900);
@@ -70,12 +75,11 @@
 .button.button--secondary:focus:not(.button--disabled) {
   background-color: var(--six-color-web-rock-100);
   border-color: var(--six-color-web-rock-400);
-  box-shadow: var(--six-button-focus-shadow);
 }
 .button.button--secondary:active:not(.button--disabled) {
   background-color: var(--six-color-web-rock-300);
   border-color: var(--six-color-web-rock-900);
-  border-width: var(--six-focus-ring-width);
+  border-width: 1px;
 }
 .button.button--primary {
   background-color: var(--six-color-web-rock-900);
@@ -91,11 +95,6 @@
   background-color: var(--six-color-web-rock-800);
   border-color: var(--six-color-web-rock-800);
 }
-.button.button--primary:focus:not(.button--disabled) {
-  background-color: var(--six-color-web-rock-900);
-  border-color: var(--six-color-web-rock-400);
-  box-shadow: var(--six-button-focus-shadow);
-}
 .button.button--primary:active:not(.button--disabled) {
   background-color: var(--six-color-web-rock-900);
   border-color: var(--six-color-web-rock-900);
@@ -112,9 +111,6 @@
 .button.button--link:hover:not(.button--disabled) {
   color: var(--six-color-action-600);
 }
-.button.button--link:focus:not(.button--disabled) {
-  border-color: var(--six-color-web-rock-400);
-}
 .button.button--link:active:not(.button--disabled) {
   color: var(--six-color-action-light-to-be-defined);
 }
@@ -132,11 +128,6 @@
   background-color: var(--six-color-danger-900);
   border-color: var(--six-color-danger-900);
 }
-.button.button--danger:focus:not(.button--disabled) {
-  background-color: var(--six-color-danger-800);
-  border-color: var(--six-color-web-rock-400);
-  box-shadow: var(--six-button-focus-shadow);
-}
 .button.button--danger:active:not(.button--disabled) {
   background-color: var(--six-color-danger-800);
   border-color: var(--six-color-danger-800);
@@ -156,11 +147,6 @@
   background-color: var(--six-color-warning-800);
   border-color: var(--six-color-warning-800);
 }
-.button.button--warning:focus:not(.button--disabled) {
-  background-color: var(--six-color-warning-700);
-  border-color: var(--six-color-web-rock-400);
-  box-shadow: var(--six-button-focus-shadow);
-}
 .button.button--warning:active:not(.button--disabled) {
   background-color: var(--six-color-warning-700);
   border-color: var(--six-color-warning-700);
@@ -180,11 +166,6 @@
   background-color: var(--six-color-success-600);
   border-color: var(--six-color-success-600);
 }
-.button.button--success:focus:not(.button--disabled) {
-  background-color: var(--six-color-success-500);
-  border-color: var(--six-color-web-rock-400);
-  box-shadow: var(--six-button-focus-shadow);
-}
 .button.button--success:active:not(.button--disabled) {
   background-color: var(--six-color-success-500);
   border-color: var(--six-color-success-500);
@@ -204,11 +185,6 @@
   background-color: var(--six-color-action-600);
   border-color: var(--six-color-action-600);
 }
-.button.button--action:focus:not(.button--disabled) {
-  background-color: var(--six-color-action-500);
-  border-color: var(--six-color-web-rock-400);
-  box-shadow: var(--six-button-focus-shadow);
-}
 .button.button--action:active:not(.button--disabled) {
   background-color: var(--six-color-action-500);
   border-color: var(--six-color-action-500);