@six-group/ui-library 0.0.0-insider.b13c699 → 0.0.0-insider.b2b9a34

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: 'c8cdb43580af7e80984c0cbf86f269b2726ef7c0', onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, h(Button, { key: '8daeb79358745e4cb021870fdb21ba83db9d6861', 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: '703ca93447400bc9ec12ea9bf1ba36abd324e1cc', part: "prefix", class: "button__prefix" }, h("slot", { key: '0a2c7a1148878d455b7d1b6785729c62eda396d6', onSlotchange: this.handleSlotChange, name: "prefix" })), h("span", { key: '74e8386afffae9cba1a72ce52a4ee75da72abdcd', part: "label", class: "button__label" }, h("slot", { key: 'ce6e54dfc9e280efa178f009e556669ccf6f45b6', onSlotchange: this.handleSlotChange })), h("span", { key: '42b0f3b72007f57caa2a7a745f628a395c999f9a', part: "suffix", class: "button__suffix" }, h("slot", { key: '4741a3a3eeffb36182eb93005afca98522983ef1', onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (h("span", { key: '3c5a5e7e2b0ed436d6576888eed7999eb50395c3', part: "caret", class: "button__caret" }, h("svg", { key: '82a715a604bd7ed1ab8242cd3994d67dfeba9e1d', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '5c870552f2138305088348ed5e3e3b787a5b598c', points: "6 9 12 15 18 9" })))), this.loading && h("six-spinner", { key: '4267336c2eb4b8bd71567d1a7ec4ee3f32362c2f' }))));
     }
     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
             }
         };

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:\n    | 'secondary'\n    | 'primary'\n    | 'link'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'action'\n    | 'action-outline' = '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            'button--action-outline': this.type === 'action-outline',\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:\n    | 'secondary'\n    | 'primary'\n    | 'link'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'action'\n    | 'action-outline' = '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    // set the correct icon size for suffix and prefix icons\n    const prefixIcon = this.host.querySelector('[slot=\"prefix\"]');\n    const suffixIcon = this.host.querySelector('[slot=\"suffix\"]');\n\n    if (prefixIcon?.tagName.toLowerCase() === 'six-icon') {\n      prefixIcon.setAttribute('size', this.mapSizeToIconSize(this.size));\n    }\n\n    if (suffixIcon?.tagName.toLowerCase() === 'six-icon') {\n      suffixIcon.setAttribute('size', this.mapSizeToIconSize(this.size));\n    }\n  };\n\n  private mapSizeToIconSize(buttonSize: 'small' | 'medium' | 'large'): string {\n    const sizeMap = {\n      small: 'xSmall',\n      medium: 'small',\n      large: 'medium',\n    };\n    return sizeMap[buttonSize] || 'small'; // Default to small\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            'button--action-outline': this.type === 'action-outline',\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-card/six-card.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;
   box-shadow: var(--six-shadow-medium);

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

@@ -7,7 +7,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SixCard {
     render() {
-        return (h(Host, { key: 'aad0ccff1f39203ebe4e16e74c13cd7a344f2da8' }, h("slot", { key: '6e713eaee2db4b9dedbd9f5884911bce16f30c88' })));
+        return (h(Host, { key: '9a56f190ccdf8545c4503284ae32a23220e1af37' }, h("slot", { key: 'db6e7fe7d83c4e41747ad39a85bf108ce581ae87' })));
     }
     static get is() { return "six-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-checkbox/six-checkbox.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;
+}
+
 .form-control .form-control__label {
   display: none;
 }