@six-group/ui-library 4.3.3 → 5.0.0-rc.1

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

@@ -14,22 +14,26 @@ import { h } from "@stencil/core";
  */
 export class SixAvatar {
     constructor() {
-        this.handleImageError = () => {
-            this.hasError = true;
-        };
         this.hasError = false;
+        /** The image source to use for the avatar. */
         this.image = '';
+        /** Alternative text for the image. */
         this.alt = '';
+        /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
         this.initials = '';
+        /** The shape of the avatar. */
         this.shape = 'circle';
+        this.handleImageError = () => {
+            this.hasError = true;
+        };
     }
     render() {
-        return (h("div", { key: '0dbd57a48040d1a7c7c07fa838e8be3da457e2c1', part: "base", class: {
+        return (h("div", { key: 'c18818d8ee0e4c16ecc7036dee47334eafa8d38d', part: "base", class: {
                 avatar: true,
                 'avatar--circle': this.shape === 'circle',
                 'avatar--rounded': this.shape === 'rounded',
                 'avatar--square': this.shape === 'square',
-            }, role: "image", "aria-label": this.alt, tabIndex: 0 }, this.initials === '' && (h("div", { key: '86e4e434e5da9fe126c6950b3716aa69e0738278', part: "icon", class: "avatar__icon" }, h("slot", { key: '376b3afc1ded98932f9f80c440f0f142e5bce33f', name: "icon" }, h("six-icon", { key: '0371ad768fc7440b24528bf2b1b331f466ab5574' }, "person")))), this.initials && (h("div", { key: 'd1a3412dc155ff96e7d3fddfac1d483561537e98', part: "initials", class: "avatar__initials" }, this.initials)), this.image && !this.hasError && (h("img", { key: 'e8a7e31f01329601ae9181c89b702f9469accc35', part: "image", class: "avatar__image", src: this.image, onError: this.handleImageError }))));
+            }, role: "image", "aria-label": this.alt, tabIndex: 0 }, this.initials === '' && (h("div", { key: '793124283385b4d78d269217c0f80a303ea3af01', part: "icon", class: "avatar__icon" }, h("slot", { key: '20046d36c15a800783c245fc9bd9f8a0c462cd00', name: "icon" }, h("six-icon", { key: 'e25b68320947163b737d94484d6bd5a43117f6d7' }, "person")))), this.initials && (h("div", { key: '7f9e5c67a482b081116c0038ff248e1fdb9662d1', part: "initials", class: "avatar__initials" }, this.initials)), this.image && !this.hasError && (h("img", { key: '44c10b4d2755543a5e77fc3d6b15e02ba917ef7d', part: "image", class: "avatar__image", src: this.image, onError: this.handleImageError }))));
     }
     static get is() { return "six-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -47,6 +51,7 @@ export class SixAvatar {
         return {
             "image": {
                 "type": "string",
+                "attribute": "image",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -59,12 +64,14 @@ export class SixAvatar {
                     "tags": [],
                     "text": "The image source to use for the avatar."
                 },
-                "attribute": "image",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "alt": {
                 "type": "string",
+                "attribute": "alt",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -77,12 +84,14 @@ export class SixAvatar {
                     "tags": [],
                     "text": "Alternative text for the image."
                 },
-                "attribute": "alt",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "initials": {
                 "type": "string",
+                "attribute": "initials",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -95,12 +104,14 @@ export class SixAvatar {
                     "tags": [],
                     "text": "Initials to use as a fallback when no image is available (1-2 characters max recommended)."
                 },
-                "attribute": "initials",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "shape": {
                 "type": "string",
+                "attribute": "shape",
                 "mutable": false,
                 "complexType": {
                     "original": "'circle' | 'square' | 'rounded'",
@@ -113,7 +124,8 @@ export class SixAvatar {
                     "tags": [],
                     "text": "The shape of the avatar."
                 },
-                "attribute": "shape",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'circle'"
             }

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

@@ -1 +1 @@
-{"version":3,"file":"six-avatar.js","sourceRoot":"","sources":["../../../src/components/six-avatar/six-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE1D;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,SAAS;;QAeZ,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC,CAAC;wBAhBkB,KAAK;qBAGT,EAAE;mBAGJ,EAAE;wBAGG,EAAE;qBAG4B,QAAQ;;IAMzD,MAAM;QACJ,OAAO,CACL,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;gBACzC,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;gBAC3C,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;aAC1C,EACD,IAAI,EAAC,OAAO,gBACA,IAAI,CAAC,GAAG,EACpB,QAAQ,EAAE,CAAC;YAEV,IAAI,CAAC,QAAQ,KAAK,EAAE,IAAI,CACvB,4DAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc;gBACnC,6DAAM,IAAI,EAAC,MAAM;oBACf,4EAA2B,CACtB,CACH,CACP;YAEA,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB,IAC1C,IAAI,CAAC,QAAQ,CACV,CACP;YAEA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAC/B,4DAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC5F,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\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 icon - The default icon to use when no image or initials are present.\n *\n * @part base - The component's base wrapper.\n * @part icon - The container that wraps the avatar icon.\n * @part initials - The container that wraps the avatar initials.\n * @part image - The avatar image.\n */\n@Component({\n  tag: 'six-avatar',\n  styleUrl: 'six-avatar.scss',\n  shadow: true,\n})\nexport class SixAvatar {\n  @State() hasError = false;\n\n  /** The image source to use for the avatar. */\n  @Prop() image = '';\n\n  /** Alternative text for the image. */\n  @Prop() alt = '';\n\n  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */\n  @Prop() initials = '';\n\n  /** The shape of the avatar. */\n  @Prop() shape: 'circle' | 'square' | 'rounded' = 'circle';\n\n  private handleImageError = () => {\n    this.hasError = true;\n  };\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          avatar: true,\n          'avatar--circle': this.shape === 'circle',\n          'avatar--rounded': this.shape === 'rounded',\n          'avatar--square': this.shape === 'square',\n        }}\n        role=\"image\"\n        aria-label={this.alt}\n        tabIndex={0}\n      >\n        {this.initials === '' && (\n          <div part=\"icon\" class=\"avatar__icon\">\n            <slot name=\"icon\">\n              <six-icon>person</six-icon>\n            </slot>\n          </div>\n        )}\n\n        {this.initials && (\n          <div part=\"initials\" class=\"avatar__initials\">\n            {this.initials}\n          </div>\n        )}\n\n        {this.image && !this.hasError && (\n          <img part=\"image\" class=\"avatar__image\" src={this.image} onError={this.handleImageError} />\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-avatar.js","sourceRoot":"","sources":["../../../src/components/six-avatar/six-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE1D;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,SAAS;IALtB;QAMW,aAAQ,GAAG,KAAK,CAAC;QAE1B,8CAA8C;QACtC,UAAK,GAAG,EAAE,CAAC;QAEnB,sCAAsC;QAC9B,QAAG,GAAG,EAAE,CAAC;QAEjB,iGAAiG;QACzF,aAAQ,GAAG,EAAE,CAAC;QAEtB,+BAA+B;QACvB,UAAK,GAAoC,QAAQ,CAAC;QAElD,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC,CAAC;KAoCH;IAlCC,MAAM;QACJ,OAAO,CACL,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;gBACzC,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;gBAC3C,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;aAC1C,EACD,IAAI,EAAC,OAAO,gBACA,IAAI,CAAC,GAAG,EACpB,QAAQ,EAAE,CAAC;YAEV,IAAI,CAAC,QAAQ,KAAK,EAAE,IAAI,CACvB,4DAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc;gBACnC,6DAAM,IAAI,EAAC,MAAM;oBACf,4EAA2B,CACtB,CACH,CACP;YAEA,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB,IAC1C,IAAI,CAAC,QAAQ,CACV,CACP;YAEA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAC/B,4DAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC5F,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\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 icon - The default icon to use when no image or initials are present.\n *\n * @part base - The component's base wrapper.\n * @part icon - The container that wraps the avatar icon.\n * @part initials - The container that wraps the avatar initials.\n * @part image - The avatar image.\n */\n@Component({\n  tag: 'six-avatar',\n  styleUrl: 'six-avatar.scss',\n  shadow: true,\n})\nexport class SixAvatar {\n  @State() hasError = false;\n\n  /** The image source to use for the avatar. */\n  @Prop() image = '';\n\n  /** Alternative text for the image. */\n  @Prop() alt = '';\n\n  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */\n  @Prop() initials = '';\n\n  /** The shape of the avatar. */\n  @Prop() shape: 'circle' | 'square' | 'rounded' = 'circle';\n\n  private handleImageError = () => {\n    this.hasError = true;\n  };\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          avatar: true,\n          'avatar--circle': this.shape === 'circle',\n          'avatar--rounded': this.shape === 'rounded',\n          'avatar--square': this.shape === 'square',\n        }}\n        role=\"image\"\n        aria-label={this.alt}\n        tabIndex={0}\n      >\n        {this.initials === '' && (\n          <div part=\"icon\" class=\"avatar__icon\">\n            <slot name=\"icon\">\n              <six-icon>person</six-icon>\n            </slot>\n          </div>\n        )}\n\n        {this.initials && (\n          <div part=\"initials\" class=\"avatar__initials\">\n            {this.initials}\n          </div>\n        )}\n\n        {this.image && !this.hasError && (\n          <img part=\"image\" class=\"avatar__image\" src={this.image} onError={this.handleImageError} />\n        )}\n      </div>\n    );\n  }\n}\n"]}

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

@@ -6,6 +6,17 @@
   box-sizing: border-box;
 }
 
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 :host {
   display: inline-flex;
 }

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

@@ -11,12 +11,15 @@ import { h } from "@stencil/core";
  */
 export class SixBadge {
     constructor() {
+        /** The badge's type. */
         this.type = 'primary';
+        /** Set to true to draw a pill-style badge with rounded edges. */
         this.pill = false;
+        /** Set to true to make the badge pulsate to draw attention. */
         this.pulse = false;
     }
     render() {
-        return (h("span", { key: '023a7f78c1ac275db32a3dc65d7bb46a0d4f3aba', part: "base", class: {
+        return (h("span", { key: '5f279e992f0f009a0a2be5128e21290c0ce9990a', part: "base", class: {
                 badge: true,
                 // Types
                 'badge--primary': this.type === 'primary',
@@ -28,7 +31,7 @@ export class SixBadge {
                 'badge--info': this.type === 'info',
                 'badge--pill': this.pill,
                 'badge--pulse': this.pulse,
-            }, role: "status" }, h("slot", { key: '09f7a992878ce4df2ac75fd99d7de7500cdb80d0' })));
+            }, role: "status" }, h("slot", { key: '08847cb32936a89c9407d36f9c94e32a35baa1fb' })));
     }
     static get is() { return "six-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -46,6 +49,7 @@ export class SixBadge {
         return {
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action'",
@@ -58,12 +62,14 @@ export class SixBadge {
                     "tags": [],
                     "text": "The badge's type."
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'primary'"
             },
             "pill": {
                 "type": "boolean",
+                "attribute": "pill",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -76,12 +82,14 @@ export class SixBadge {
                     "tags": [],
                     "text": "Set to true to draw a pill-style badge with rounded edges."
                 },
-                "attribute": "pill",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "pulse": {
                 "type": "boolean",
+                "attribute": "pulse",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -94,7 +102,8 @@ export class SixBadge {
                     "tags": [],
                     "text": "Set to true to make the badge pulsate to draw attention."
                 },
-                "attribute": "pulse",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -1 +1 @@
-{"version":3,"file":"six-badge.js","sourceRoot":"","sources":["../../../src/components/six-badge/six-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;GASG;AAOH,MAAM,OAAO,QAAQ;;oBAE4E,SAAS;oBAGzF,KAAK;qBAGJ,KAAK;;IAErB,MAAM;QACJ,OAAO,CACL,6DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI;gBAEX,QAAQ;gBACR,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW;gBAC7C,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACvC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI;gBACxB,cAAc,EAAE,IAAI,CAAC,KAAK;aAC3B,EACD,IAAI,EAAC,QAAQ;YAEb,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\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 badge's content.\n *\n * @part base - The base wrapper\n */\n\n@Component({\n  tag: 'six-badge',\n  styleUrl: 'six-badge.scss',\n  shadow: true,\n})\nexport class SixBadge {\n  /** The badge's type. */\n  @Prop() type: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action' = 'primary';\n\n  /** Set to true to draw a pill-style badge with rounded edges. */\n  @Prop() pill = false;\n\n  /** Set to true to make the badge pulsate to draw attention. */\n  @Prop() pulse = false;\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        class={{\n          badge: true,\n\n          // Types\n          'badge--primary': this.type === 'primary',\n          'badge--secondary': this.type === 'secondary',\n          'badge--success': this.type === 'success',\n          'badge--warning': this.type === 'warning',\n          'badge--danger': this.type === 'danger',\n          'badge--action': this.type === 'action',\n          'badge--info': this.type === 'info',\n          'badge--pill': this.pill,\n          'badge--pulse': this.pulse,\n        }}\n        role=\"status\"\n      >\n        <slot />\n      </span>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-badge.js","sourceRoot":"","sources":["../../../src/components/six-badge/six-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;GASG;AAOH,MAAM,OAAO,QAAQ;IALrB;QAME,wBAAwB;QAChB,SAAI,GAAmF,SAAS,CAAC;QAEzG,iEAAiE;QACzD,SAAI,GAAG,KAAK,CAAC;QAErB,+DAA+D;QACvD,UAAK,GAAG,KAAK,CAAC;KA0BvB;IAxBC,MAAM;QACJ,OAAO,CACL,6DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI;gBAEX,QAAQ;gBACR,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW;gBAC7C,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACzC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACvC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI;gBACxB,cAAc,EAAE,IAAI,CAAC,KAAK;aAC3B,EACD,IAAI,EAAC,QAAQ;YAEb,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\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 badge's content.\n *\n * @part base - The base wrapper\n */\n\n@Component({\n  tag: 'six-badge',\n  styleUrl: 'six-badge.scss',\n  shadow: true,\n})\nexport class SixBadge {\n  /** The badge's type. */\n  @Prop() type: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'action' = 'primary';\n\n  /** Set to true to draw a pill-style badge with rounded edges. */\n  @Prop() pill = false;\n\n  /** Set to true to make the badge pulsate to draw attention. */\n  @Prop() pulse = false;\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        class={{\n          badge: true,\n\n          // Types\n          'badge--primary': this.type === 'primary',\n          'badge--secondary': this.type === 'secondary',\n          'badge--success': this.type === 'success',\n          'badge--warning': this.type === 'warning',\n          'badge--danger': this.type === 'danger',\n          'badge--action': this.type === 'action',\n          'badge--info': this.type === 'info',\n          'badge--pill': this.pill,\n          'badge--pulse': this.pulse,\n        }}\n        role=\"status\"\n      >\n        <slot />\n      </span>\n    );\n  }\n}\n"]}

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

@@ -6,6 +6,17 @@
   box-sizing: border-box;
 }
 
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 :host {
   display: inline-block;
   width: auto;
@@ -41,7 +52,9 @@
 }
 .button ::slotted(six-icon) {
   pointer-events: none;
-  transform: translateY(-1.5px);
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
 }
 
 .button-wrapper--disabled {

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

@@ -19,10 +19,45 @@ import { submitForm } from "../../utils/form";
  */
 export class SixButton {
     constructor() {
+        this.hasFocus = false;
+        this.hasLabel = false;
+        this.hasPrefix = false;
+        this.hasSuffix = false;
+        /** The button's type. */
+        this.type = 'primary';
+        /** The button's size. */
+        this.size = 'medium';
+        /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */
+        this.caret = false;
+        /** Set to true to disable the button. */
+        this.disabled = false;
+        /** Set to true to draw the button in a loading state. */
+        this.loading = false;
+        /** Set to true to draw a pill-style button with rounded edges. */
+        this.pill = false;
+        /** Set to true to draw a circle button. */
+        this.circle = false;
+        /** Indicates if activating the button should submit the form. Ignored when `href` is set. */
+        this.submit = false;
+        /** Indicates if activating the button should reset the form. */
+        this.reset = false;
+        /** An optional name for the button. Ignored when `href` is set. */
+        this.name = '';
+        /** An optional value for the button. Ignored when `href` is set. */
+        this.value = '';
         this.handleSlotChange = () => {
             this.hasLabel = hasSlot(this.host);
             this.hasPrefix = hasSlot(this.host, 'prefix');
             this.hasSuffix = hasSlot(this.host, 'suffix');
+            // set the correct icon size for suffix and prefix icons
+            const prefixIcon = this.host.querySelector('[slot="prefix"]');
+            const suffixIcon = this.host.querySelector('[slot="suffix"]');
+            if ((prefixIcon === null || prefixIcon === void 0 ? void 0 : prefixIcon.tagName.toLowerCase()) === 'six-icon') {
+                prefixIcon.setAttribute('size', this.mapSizeToIconSize(this.size));
+            }
+            if ((suffixIcon === null || suffixIcon === void 0 ? void 0 : suffixIcon.tagName.toLowerCase()) === 'six-icon') {
+                suffixIcon.setAttribute('size', this.mapSizeToIconSize(this.size));
+            }
         };
         this.handleBlur = () => {
             this.hasFocus = false;
@@ -43,24 +78,6 @@ export class SixButton {
                 submitForm(this.host);
             }
         };
-        this.hasFocus = false;
-        this.hasLabel = false;
-        this.hasPrefix = false;
-        this.hasSuffix = false;
-        this.type = 'primary';
-        this.size = 'medium';
-        this.caret = false;
-        this.disabled = false;
-        this.loading = false;
-        this.pill = false;
-        this.circle = false;
-        this.submit = false;
-        this.reset = false;
-        this.name = '';
-        this.value = '';
-        this.href = undefined;
-        this.target = undefined;
-        this.download = undefined;
     }
     componentWillLoad() {
         this.handleSlotChange();
@@ -75,11 +92,19 @@ export class SixButton {
         var _a;
         (_a = this.nativeButton) === null || _a === void 0 ? void 0 : _a.blur();
     }
+    mapSizeToIconSize(buttonSize) {
+        const sizeMap = {
+            small: 'xSmall',
+            medium: 'small',
+            large: 'medium',
+        };
+        return sizeMap[buttonSize] || 'small'; // Default to small
+    }
     render() {
         const isLink = this.href != null;
         const isButton = !isLink;
         const Button = isLink ? 'a' : 'button';
-        return (h("div", { key: '733c60d955d509acb4293ff6ac3bd28385fc0179', onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, h(Button, { key: 'f1c659d53e416d57c3d743accbc74fa71320fce5', ref: (el) => (this.nativeButton = el), part: "base", class: {
+        return (h("div", { key: '6eba8f1f34f9dfa51d29e4349870994acf7b89fb', onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, h(Button, { key: '77cd544148f4ea4dcf2c6b34c4c6d62d4372372d', ref: (el) => (this.nativeButton = el), part: "base", class: {
                 button: true,
                 // Types
                 'button--secondary': this.type === 'secondary',
@@ -104,7 +129,7 @@ export class SixButton {
                 'button--has-label': this.hasLabel,
                 'button--has-prefix': this.hasPrefix,
                 'button--has-suffix': this.hasSuffix,
-            }, disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined, name: isButton ? this.name : undefined, value: isButton ? this.value : undefined, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, "data-testid": "button" }, h("span", { key: 'db88ca38040960f384a72f274c215c490abcd7be', part: "prefix", class: "button__prefix" }, h("slot", { key: '19a0077f9a1ea594f669cb3d5f56f7eabd6695b4', onSlotchange: this.handleSlotChange, name: "prefix" })), h("span", { key: 'd6ad98d9a36572228bc9ea4d50263323dac74322', part: "label", class: "button__label" }, h("slot", { key: '33e06a87ab2f18d0f1096fdf1904b1398811c014', onSlotchange: this.handleSlotChange })), h("span", { key: '771e0da37ab98f26cfa6189a9794ff1f6c4424bd', part: "suffix", class: "button__suffix" }, h("slot", { key: 'fa94fccd963ec5a65c84b7620182adb24a329383', onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (h("span", { key: '7098e8219a536758498c0e76974080c96e5baecd', part: "caret", class: "button__caret" }, h("svg", { key: 'a8f4e991d39137a45dae525a550edd4ad79cf83f', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '03dbc033c9799c31b856e45cd3d4967f3098bd8e', points: "6 9 12 15 18 9" })))), this.loading && h("six-spinner", { key: '6ab43caf71a3ceadf32817b09e7c4d6885f2ba7a' }))));
+            }, disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined, name: isButton ? this.name : undefined, value: isButton ? this.value : undefined, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, "data-testid": "button" }, h("span", { key: '0fb19c85adc826ed6e92b306f734185e3557e30f', part: "prefix", class: "button__prefix" }, h("slot", { key: '8223eb8644d495ef27cd175a905ab68c3d10f14f', onSlotchange: this.handleSlotChange, name: "prefix" })), h("span", { key: '00d407ea8d28b9e515992a872cc91705e2906a24', part: "label", class: "button__label" }, h("slot", { key: '28fb5d1061bfdf0f404e2241ccf6f16b4e113ba7', onSlotchange: this.handleSlotChange })), h("span", { key: '65e82de3e6851445627b31212bbbeccc8ca85d35', part: "suffix", class: "button__suffix" }, h("slot", { key: 'd9608fad50cafb5fcc14e1eecd9e47cf99edcb14', onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (h("span", { key: '4c8b4ad77d69e4a189621f53e3c20dbb7504c4cb', part: "caret", class: "button__caret" }, h("svg", { key: '16b2146dd6bd99677cadb4b2fe5cf67a4e32a39d', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '4cdd831978519dcb553a929fe54f6bd49b25fbc5', points: "6 9 12 15 18 9" })))), this.loading && h("six-spinner", { key: 'df087e05782f46995bdc6f6325b4a610f74ce971' }))));
     }
     static get is() { return "six-button"; }
     static get encapsulation() { return "shadow"; }
@@ -122,6 +147,7 @@ export class SixButton {
         return {
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "| 'secondary'\n    | 'primary'\n    | 'link'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'action'\n    | 'action-outline'",
@@ -134,12 +160,14 @@ export class SixButton {
                     "tags": [],
                     "text": "The button's type."
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'primary'"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -152,12 +180,14 @@ export class SixButton {
                     "tags": [],
                     "text": "The button's size."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'medium'"
             },
             "caret": {
                 "type": "boolean",
+                "attribute": "caret",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -170,12 +200,14 @@ export class SixButton {
                     "tags": [],
                     "text": "Set to true to draw the button with a caret for use with dropdowns, popovers, etc."
                 },
-                "attribute": "caret",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -188,12 +220,14 @@ export class SixButton {
                     "tags": [],
                     "text": "Set to true to disable the button."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "loading": {
                 "type": "boolean",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -206,12 +240,14 @@ export class SixButton {
                     "tags": [],
                     "text": "Set to true to draw the button in a loading state."
                 },
-                "attribute": "loading",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "pill": {
                 "type": "boolean",
+                "attribute": "pill",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -224,12 +260,14 @@ export class SixButton {
                     "tags": [],
                     "text": "Set to true to draw a pill-style button with rounded edges."
                 },
-                "attribute": "pill",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "circle": {
                 "type": "boolean",
+                "attribute": "circle",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -242,12 +280,14 @@ export class SixButton {
                     "tags": [],
                     "text": "Set to true to draw a circle button."
                 },
-                "attribute": "circle",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "submit": {
                 "type": "boolean",
+                "attribute": "submit",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -260,12 +300,14 @@ export class SixButton {
                     "tags": [],
                     "text": "Indicates if activating the button should submit the form. Ignored when `href` is set."
                 },
-                "attribute": "submit",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "reset": {
                 "type": "boolean",
+                "attribute": "reset",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -278,12 +320,14 @@ export class SixButton {
                     "tags": [],
                     "text": "Indicates if activating the button should reset the form."
                 },
-                "attribute": "reset",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -296,12 +340,14 @@ export class SixButton {
                     "tags": [],
                     "text": "An optional name for the button. Ignored when `href` is set."
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -314,12 +360,14 @@ export class SixButton {
                     "tags": [],
                     "text": "An optional value for the button. Ignored when `href` is set."
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -332,11 +380,13 @@ export class SixButton {
                     "tags": [],
                     "text": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`."
                 },
-                "attribute": "href",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "target": {
                 "type": "string",
+                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "'_blank' | '_parent' | '_self' | '_top'",
@@ -349,11 +399,13 @@ export class SixButton {
                     "tags": [],
                     "text": "Tells the browser where to open the link. Only used when `href` is set."
                 },
-                "attribute": "target",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "download": {
                 "type": "string",
+                "attribute": "download",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -366,7 +418,8 @@ export class SixButton {
                     "tags": [],
                     "text": "Tells the browser to download the linked file as this filename. Only used when `href` is set."
                 },
-                "attribute": "download",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };