@six-group/ui-library 4.0.4 → 4.1.1

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

@@ -1 +1 @@
-{"version":3,"file":"six-button.js","sourceRoot":"","sources":["../../../src/components/six-button/six-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { submitForm } from '../../utils/form';\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 * @slot - The button's label.\n * @slot prefix - Used to prepend an icon or similar element to the button.\n * @slot suffix - Used to append an icon or similar element to the button.\n *\n * @part base - The component's base wrapper.\n * @part prefix - The prefix container.\n * @part label - The button's label.\n * @part suffix - The suffix container.\n * @part caret - The button's caret.\n */\n\n@Component({\n  tag: 'six-button',\n  styleUrl: 'six-button.scss',\n  shadow: true,\n})\nexport class SixButton {\n  private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n\n  @Element() host!: HTMLSixButtonElement;\n\n  @State() hasFocus = false;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n\n  /** The button's type. */\n  @Prop({ reflect: true }) type: 'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action' =\n    'primary';\n\n  /** The button's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop() caret = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to draw the button in a loading state. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Set to true to draw a pill-style button with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to draw a circle button. */\n  @Prop({ reflect: true }) circle = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit = false;\n\n  /** Indicates if activating the button should reset the form. */\n  @Prop({ reflect: true }) reset = false;\n\n  /** An optional name for the button. Ignored when `href` is set. */\n  @Prop() name = '';\n\n  /** An optional value for the button. Ignored when `href` is set. */\n  @Prop() value = '';\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download?: string;\n\n  /** Emitted when the button loses focus. */\n  @Event({ eventName: 'six-button-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the button gains focus. */\n  @Event({ eventName: 'six-button-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeButton?.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.nativeButton?.blur();\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlot(this.host);\n    this.hasPrefix = hasSlot(this.host, 'prefix');\n    this.hasSuffix = hasSlot(this.host, 'suffix');\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (this.submit) {\n      event.preventDefault();\n      submitForm(this.host);\n    }\n  };\n\n  render() {\n    const isLink = this.href != null;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n\n    return (\n      <div onClick={this.handleClick} class={{ 'button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.nativeButton = el)}\n          part=\"base\"\n          class={{\n            button: true,\n\n            // Types\n            'button--secondary': this.type === 'secondary',\n            'button--primary': this.type === 'primary',\n            'button--link': this.type === 'link',\n            'button--success': this.type === 'success',\n            'button--warning': this.type === 'warning',\n            'button--danger': this.type === 'danger',\n            'button--action': this.type === 'action',\n\n            // Sizes\n            'button--small': this.size === 'small',\n            'button--medium': this.size === 'medium',\n            'button--large': this.size === 'large',\n\n            // Modifiers\n            'button--caret': this.caret,\n            'button--circle': this.circle,\n            'button--disabled': this.disabled,\n            'button--focused': this.hasFocus,\n            'button--loading': this.loading,\n            'button--pill': this.pill,\n            'button--has-label': this.hasLabel,\n            'button--has-prefix': this.hasPrefix,\n            'button--has-suffix': this.hasSuffix,\n          }}\n          disabled={isButton ? this.disabled : undefined}\n          tabindex={this.disabled ? '-1' : undefined}\n          type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined}\n          name={isButton ? this.name : undefined}\n          value={isButton ? this.value : undefined}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          data-testid=\"button\"\n        >\n          <span part=\"prefix\" class=\"button__prefix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"prefix\" />\n          </span>\n          <span part=\"label\" class=\"button__label\">\n            <slot onSlotchange={this.handleSlotChange} />\n          </span>\n          <span part=\"suffix\" class=\"button__suffix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"suffix\" />\n          </span>\n          {this.caret && (\n            <span part=\"caret\" class=\"button__caret\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"6 9 12 15 18 9\" />\n              </svg>\n            </span>\n          )}\n\n          {this.loading && <six-spinner />}\n        </Button>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-button.js","sourceRoot":"","sources":["../../../src/components/six-button/six-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { submitForm } from '../../utils/form';\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 * @slot - The button's label.\n * @slot prefix - Used to prepend an icon or similar element to the button.\n * @slot suffix - Used to append an icon or similar element to the button.\n *\n * @part base - The component's base wrapper.\n * @part prefix - The prefix container.\n * @part label - The button's label.\n * @part suffix - The suffix container.\n * @part caret - The button's caret.\n */\n\n@Component({\n  tag: 'six-button',\n  styleUrl: 'six-button.scss',\n  shadow: true,\n})\nexport class SixButton {\n  private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n\n  @Element() host!: HTMLSixButtonElement;\n\n  @State() hasFocus = false;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n\n  /** The button's type. */\n  @Prop({ reflect: true }) type: 'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action' =\n    'primary';\n\n  /** The button's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop() caret = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to draw the button in a loading state. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Set to true to draw a pill-style button with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to draw a circle button. */\n  @Prop({ reflect: true }) circle = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit = false;\n\n  /** Indicates if activating the button should reset the form. */\n  @Prop({ reflect: true }) reset = false;\n\n  /** An optional name for the button. Ignored when `href` is set. */\n  @Prop() name = '';\n\n  /** An optional value for the button. Ignored when `href` is set. */\n  @Prop() value = '';\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download?: string;\n\n  /** Emitted when the button loses focus. */\n  @Event({ eventName: 'six-button-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the button gains focus. */\n  @Event({ eventName: 'six-button-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeButton?.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.nativeButton?.blur();\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlot(this.host);\n    this.hasPrefix = hasSlot(this.host, 'prefix');\n    this.hasSuffix = hasSlot(this.host, 'suffix');\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (this.submit) {\n      event.preventDefault();\n      submitForm(this.host);\n    }\n  };\n\n  render() {\n    const isLink = this.href != null;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n\n    return (\n      <div onClick={this.handleClick} class={{ 'button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.nativeButton = el)}\n          part=\"base\"\n          class={{\n            button: true,\n\n            // Types\n            'button--secondary': this.type === 'secondary',\n            'button--primary': this.type === 'primary',\n            'button--link': this.type === 'link',\n            'button--success': this.type === 'success',\n            'button--warning': this.type === 'warning',\n            'button--danger': this.type === 'danger',\n            'button--action': this.type === 'action',\n\n            // Sizes\n            'button--small': this.size === 'small',\n            'button--medium': this.size === 'medium',\n            'button--large': this.size === 'large',\n\n            // Modifiers\n            'button--caret': this.caret,\n            'button--circle': this.circle,\n            'button--disabled': this.disabled,\n            'button--focused': this.hasFocus,\n            'button--loading': this.loading,\n            'button--pill': this.pill,\n            'button--has-label': this.hasLabel,\n            'button--has-prefix': this.hasPrefix,\n            'button--has-suffix': this.hasSuffix,\n          }}\n          disabled={isButton ? this.disabled : undefined}\n          tabindex={this.disabled ? '-1' : undefined}\n          type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined}\n          name={isButton ? this.name : undefined}\n          value={isButton ? this.value : undefined}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          data-testid=\"button\"\n        >\n          <span part=\"prefix\" class=\"button__prefix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"prefix\" />\n          </span>\n          <span part=\"label\" class=\"button__label\">\n            <slot onSlotchange={this.handleSlotChange} />\n          </span>\n          <span part=\"suffix\" class=\"button__suffix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"suffix\" />\n          </span>\n          {this.caret && (\n            <span part=\"caret\" class=\"button__caret\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"6 9 12 15 18 9\" />\n              </svg>\n            </span>\n          )}\n\n          {this.loading && <six-spinner />}\n        </Button>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,26 +1,26 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { SixButton } from "../six-button";
 describe('six-button', () => {
-  it('should create a component instance', () => {
-    expect(new SixButton()).toBeInstanceOf(SixButton);
-  });
-  describe('rendering', () => {
-    let page;
-    let button;
-    beforeEach(async () => {
-      var _a, _b;
-      page = (await newSpecPage({
-        components: [SixButton],
-        html: `<six-button></six-button>`,
-        supportsShadowDom: true,
-      }));
-      const queryResult = (_b = (_a = page.root) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[data-testid="button"]');
-      if (queryResult != null) {
-        button = queryResult;
-      }
+    it('should create a component instance', () => {
+        expect(new SixButton()).toBeInstanceOf(SixButton);
     });
-    it('renders', async () => {
-      expect(page.root).toEqualHtml(`
+    describe('rendering', () => {
+        let page;
+        let button;
+        beforeEach(async () => {
+            var _a, _b;
+            page = (await newSpecPage({
+                components: [SixButton],
+                html: `<six-button></six-button>`,
+                supportsShadowDom: true,
+            }));
+            const queryResult = (_b = (_a = page.root) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[data-testid="button"]');
+            if (queryResult != null) {
+                button = queryResult;
+            }
+        });
+        it('renders', async () => {
+            expect(page.root).toEqualHtml(`
       <six-button size="medium" type="primary">
         <mock:shadow-root>
          <div>
@@ -39,31 +39,31 @@ describe('six-button', () => {
         </mock:shadow-root>
       </six-button>
     `);
+        });
+        describe('custom events', () => {
+            it(`should propagate custom 'six-button-blur' event`, async () => {
+                var _a;
+                const spy = jest.fn();
+                (_a = page.root) === null || _a === void 0 ? void 0 : _a.addEventListener('six-button-blur', spy);
+                await page.waitForChanges();
+                // when
+                button.dispatchEvent(new Event('blur'));
+                await page.waitForChanges();
+                // then
+                expect(spy).toHaveBeenCalled();
+            });
+            it(`should propagate custom 'six-button-focus' event`, async () => {
+                var _a;
+                const spy = jest.fn();
+                (_a = page.root) === null || _a === void 0 ? void 0 : _a.addEventListener('six-button-focus', spy);
+                await page.waitForChanges();
+                // when
+                button.dispatchEvent(new Event('focus'));
+                await page.waitForChanges();
+                // then
+                expect(spy).toHaveBeenCalled();
+            });
+        });
     });
-    describe('custom events', () => {
-      it(`should propagate custom 'six-button-blur' event`, async () => {
-        var _a;
-        const spy = jest.fn();
-        (_a = page.root) === null || _a === void 0 ? void 0 : _a.addEventListener('six-button-blur', spy);
-        await page.waitForChanges();
-        // when
-        button.dispatchEvent(new Event('blur'));
-        await page.waitForChanges();
-        // then
-        expect(spy).toHaveBeenCalled();
-      });
-      it(`should propagate custom 'six-button-focus' event`, async () => {
-        var _a;
-        const spy = jest.fn();
-        (_a = page.root) === null || _a === void 0 ? void 0 : _a.addEventListener('six-button-focus', spy);
-        await page.waitForChanges();
-        // when
-        button.dispatchEvent(new Event('focus'));
-        await page.waitForChanges();
-        // then
-        expect(spy).toHaveBeenCalled();
-      });
-    });
-  });
 });
 //# sourceMappingURL=six-button.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"six-button.spec.js","sourceRoot":"","sources":["../../../../src/components/six-button/test/six-button.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAY,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAM1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;IAC5C,MAAM,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;EACpD,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,IAAI,IAA8B,CAAC;IACnC,IAAI,MAAyB,CAAC;IAE9B,UAAU,CAAC,KAAK,IAAI,EAAE;;MACpB,IAAI,GAAG,CAAC,MAAM,WAAW,CAAC;QACxB,UAAU,EAAE,CAAC,SAAS,CAAC;QACvB,IAAI,EAAE,2BAA2B;QACjC,iBAAiB,EAAE,IAAI;OACxB,CAAC,CAA6B,CAAC;MAChC,MAAM,WAAW,GAAG,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,0CAAE,aAAa,CAAC,wBAAwB,CAAC,CAAC;MACnF,IAAI,WAAW,IAAI,IAAI,EAAE;QACvB,MAAM,GAAG,WAAgC,CAAC;OAC3C;IACH,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;MACvB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;KAkB/B,CAAC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;MAC7B,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;;QAC/D,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACtB,MAAA,IAAI,CAAC,IAAI,0CAAE,gBAAgB,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC;QACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,OAAO;QACP,MAAM,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;QACxC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,OAAO;QACP,MAAM,CAAC,GAAG,CAAC,CAAC,gBAAgB,EAAE,CAAC;MACjC,CAAC,CAAC,CAAC;MAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;;QAChE,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QACtB,MAAA,IAAI,CAAC,IAAI,0CAAE,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC;QACrD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,OAAO;QACP,MAAM,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QACzC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,OAAO;QACP,MAAM,CAAC,GAAG,CAAC,CAAC,gBAAgB,EAAE,CAAC;MACjC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage, SpecPage } from '@stencil/core/testing';\nimport { SixButton } from '../six-button';\n\ninterface TypedSpecPage<T> extends Omit<SpecPage, 'root'> {\n  root?: HTMLElement & T;\n}\n\ndescribe('six-button', () => {\n  it('should create a component instance', () => {\n    expect(new SixButton()).toBeInstanceOf(SixButton);\n  });\n\n  describe('rendering', () => {\n    let page: TypedSpecPage<SixButton>;\n    let button: HTMLButtonElement;\n\n    beforeEach(async () => {\n      page = (await newSpecPage({\n        components: [SixButton],\n        html: `<six-button></six-button>`,\n        supportsShadowDom: true,\n      })) as TypedSpecPage<SixButton>;\n      const queryResult = page.root?.shadowRoot?.querySelector('[data-testid=\"button\"]');\n      if (queryResult != null) {\n        button = queryResult as HTMLButtonElement;\n      }\n    });\n\n    it('renders', async () => {\n      expect(page.root).toEqualHtml(`\n      <six-button size=\"medium\" type=\"primary\">\n        <mock:shadow-root>\n         <div>\n          <button class=\"button button--primary button--medium\" part=\"base\" type=\"button\" data-testid=\"button\" value=\"\">\n            <span part=\"prefix\" class=\"button__prefix\">\n              <slot name=\"prefix\"></slot>\n            </span>\n            <span part=\"label\" class=\"button__label\">\n              <slot></slot>\n            </span>\n            <span part=\"suffix\" class=\"button__suffix\">\n              <slot name=\"suffix\"></slot>\n            </span>\n          </button>\n         </div>\n        </mock:shadow-root>\n      </six-button>\n    `);\n    });\n\n    describe('custom events', () => {\n      it(`should propagate custom 'six-button-blur' event`, async () => {\n        const spy = jest.fn();\n        page.root?.addEventListener('six-button-blur', spy);\n        await page.waitForChanges();\n\n        // when\n        button.dispatchEvent(new Event('blur'));\n        await page.waitForChanges();\n\n        // then\n        expect(spy).toHaveBeenCalled();\n      });\n\n      it(`should propagate custom 'six-button-focus' event`, async () => {\n        const spy = jest.fn();\n        page.root?.addEventListener('six-button-focus', spy);\n        await page.waitForChanges();\n\n        // when\n        button.dispatchEvent(new Event('focus'));\n        await page.waitForChanges();\n\n        // then\n        expect(spy).toHaveBeenCalled();\n      });\n    });\n  });\n});\n"]}
+{"version":3,"file":"six-button.spec.js","sourceRoot":"","sources":["../../../../src/components/six-button/test/six-button.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAY,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAM1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC5C,MAAM,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;QACzB,IAAI,IAA8B,CAAC;QACnC,IAAI,MAAyB,CAAC;QAE9B,UAAU,CAAC,KAAK,IAAI,EAAE;;YACpB,IAAI,GAAG,CAAC,MAAM,WAAW,CAAC;gBACxB,UAAU,EAAE,CAAC,SAAS,CAAC;gBACvB,IAAI,EAAE,2BAA2B;gBACjC,iBAAiB,EAAE,IAAI;aACxB,CAAC,CAA6B,CAAC;YAChC,MAAM,WAAW,GAAG,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,0CAAE,aAAa,CAAC,wBAAwB,CAAC,CAAC;YACnF,IAAI,WAAW,IAAI,IAAI,EAAE;gBACvB,MAAM,GAAG,WAAgC,CAAC;aAC3C;QACH,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;YACvB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;KAkB/B,CAAC,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;YAC7B,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;;gBAC/D,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;gBACtB,MAAA,IAAI,CAAC,IAAI,0CAAE,gBAAgB,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC;gBACpD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;gBAE5B,OAAO;gBACP,MAAM,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;gBACxC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;gBAE5B,OAAO;gBACP,MAAM,CAAC,GAAG,CAAC,CAAC,gBAAgB,EAAE,CAAC;YACjC,CAAC,CAAC,CAAC;YAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;;gBAChE,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;gBACtB,MAAA,IAAI,CAAC,IAAI,0CAAE,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC;gBACrD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;gBAE5B,OAAO;gBACP,MAAM,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;gBACzC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;gBAE5B,OAAO;gBACP,MAAM,CAAC,GAAG,CAAC,CAAC,gBAAgB,EAAE,CAAC;YACjC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage, SpecPage } from '@stencil/core/testing';\nimport { SixButton } from '../six-button';\n\ninterface TypedSpecPage<T> extends Omit<SpecPage, 'root'> {\n  root?: HTMLElement & T;\n}\n\ndescribe('six-button', () => {\n  it('should create a component instance', () => {\n    expect(new SixButton()).toBeInstanceOf(SixButton);\n  });\n\n  describe('rendering', () => {\n    let page: TypedSpecPage<SixButton>;\n    let button: HTMLButtonElement;\n\n    beforeEach(async () => {\n      page = (await newSpecPage({\n        components: [SixButton],\n        html: `<six-button></six-button>`,\n        supportsShadowDom: true,\n      })) as TypedSpecPage<SixButton>;\n      const queryResult = page.root?.shadowRoot?.querySelector('[data-testid=\"button\"]');\n      if (queryResult != null) {\n        button = queryResult as HTMLButtonElement;\n      }\n    });\n\n    it('renders', async () => {\n      expect(page.root).toEqualHtml(`\n      <six-button size=\"medium\" type=\"primary\">\n        <mock:shadow-root>\n         <div>\n          <button class=\"button button--primary button--medium\" part=\"base\" type=\"button\" data-testid=\"button\" value=\"\">\n            <span part=\"prefix\" class=\"button__prefix\">\n              <slot name=\"prefix\"></slot>\n            </span>\n            <span part=\"label\" class=\"button__label\">\n              <slot></slot>\n            </span>\n            <span part=\"suffix\" class=\"button__suffix\">\n              <slot name=\"suffix\"></slot>\n            </span>\n          </button>\n         </div>\n        </mock:shadow-root>\n      </six-button>\n    `);\n    });\n\n    describe('custom events', () => {\n      it(`should propagate custom 'six-button-blur' event`, async () => {\n        const spy = jest.fn();\n        page.root?.addEventListener('six-button-blur', spy);\n        await page.waitForChanges();\n\n        // when\n        button.dispatchEvent(new Event('blur'));\n        await page.waitForChanges();\n\n        // then\n        expect(spy).toHaveBeenCalled();\n      });\n\n      it(`should propagate custom 'six-button-focus' event`, async () => {\n        const spy = jest.fn();\n        page.root?.addEventListener('six-button-focus', spy);\n        await page.waitForChanges();\n\n        // when\n        button.dispatchEvent(new Event('focus'));\n        await page.waitForChanges();\n\n        // then\n        expect(spy).toHaveBeenCalled();\n      });\n    });\n  });\n});\n"]}

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

@@ -3,13 +3,12 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 :host {
   display: inline-block;
-  box-shadow: var(--six-elevation-8dp);
-  border-radius: 0;
-  padding: 1rem;
-  margin-bottom: 0.6rem;
+  box-shadow: var(--six-shadow-medium);
+  border: 1px solid var(--six-color-web-rock-100);
+  padding: var(--six-spacing-medium);
 }

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

@@ -6,20 +6,20 @@ import { h, Host } from "@stencil/core";
  * @slot - Used to define the content of the card.
  */
 export class SixCard {
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-  static get is() { return "six-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-card.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-card.css"]
-    };
-  }
+    render() {
+        return (h(Host, null, h("slot", null)));
+    }
+    static get is() { return "six-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-card.css"]
+        };
+    }
 }
 //# sourceMappingURL=six-card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"six-card.js","sourceRoot":"","sources":["../../../src/components/six-card/six-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAOH,MAAM,OAAO,OAAO;EAClB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAQ,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the content of the card.\n */\n\n@Component({\n  tag: 'six-card',\n  styleUrl: 'six-card.scss',\n  shadow: true,\n})\nexport class SixCard {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-card.js","sourceRoot":"","sources":["../../../src/components/six-card/six-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAOH,MAAM,OAAO,OAAO;IAClB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,eAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the content of the card.\n */\n\n@Component({\n  tag: 'six-card',\n  styleUrl: 'six-card.scss',\n  shadow: true,\n})\nexport class SixCard {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,18 +1,18 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { SixCard } from "../six-card";
 describe('six-card', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [SixCard],
-      html: `<six-card></six-card>`,
-    });
-    expect(page.root).toEqualHtml(`
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SixCard],
+            html: `<six-card></six-card>`,
+        });
+        expect(page.root).toEqualHtml(`
       <six-card>
         <mock:shadow-root>
           <slot></slot>
         </mock:shadow-root>
       </six-card>
     `);
-  });
+    });
 });
 //# sourceMappingURL=six-card.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"six-card.spec.js","sourceRoot":"","sources":["../../../../src/components/six-card/test/six-card.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;EACxB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;MACrB,IAAI,EAAE,uBAAuB;KAC9B,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixCard } from '../six-card';\n\ndescribe('six-card', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixCard],\n      html: `<six-card></six-card>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-card>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </six-card>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"six-card.spec.js","sourceRoot":"","sources":["../../../../src/components/six-card/test/six-card.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;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixCard } from '../six-card';\n\ndescribe('six-card', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixCard],\n      html: `<six-card></six-card>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-card>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </six-card>\n    `);\n  });\n});\n"]}

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

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 .form-control .form-control__label {
@@ -101,6 +101,11 @@
   cursor: pointer;
 }
 
+.checkbox--focused .checkbox__control {
+  outline: var(--six-focus-ring);
+  outline-offset: 0;
+}
+
 .checkbox__control {
   position: relative;
   display: inline-flex;