@six-group/ui-library 0.0.0-insider.98c4058 → 0.0.0-insider.99e1a07

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

@@ -0,0 +1,27 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  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: block;
+}
+:host nav {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}

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

@@ -0,0 +1,109 @@
+import { h } from "@stencil/core";
+/**
+ * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+ *
+ * @since 5.0
+ * @status beta
+ *
+ * @slot - One or more breadcrumb items to display.
+ * @slot separator - The separator to use between breadcrumb items. Works best with six-icon.
+ *
+ * @part base - The component's base wrapper.
+ */
+export class SixBreadcrumbs {
+    constructor() {
+        /** Defines an icon as a separator without having to place a slot **/
+        this.separatorIcon = '';
+        this.updateBreadcrumbItems = () => {
+            const items = [...this.host.querySelectorAll('six-breadcrumbs-item')];
+            items.forEach((item, index) => {
+                // Append separators to each item if they don't already have one
+                const separator = item.querySelector('[slot="separator"]');
+                if (separator === null) {
+                    // No separator exists, add one
+                    item.append(this.createSeparatorElement());
+                }
+                else if (separator.hasAttribute('data-default')) {
+                    // A default separator exists, replace it
+                    separator.replaceWith(this.createSeparatorElement());
+                }
+                // The last breadcrumb item is the "current page"
+                if (index === items.length - 1) {
+                    item.setAttribute('aria-current', 'page');
+                }
+                else {
+                    item.removeAttribute('aria-current');
+                }
+            });
+        };
+    }
+    createSeparatorElement() {
+        // Find a custom separator by checking direct children only
+        const customSeparator = this.getCustomSeparator();
+        console.log(customSeparator);
+        if (customSeparator) {
+            const clone = customSeparator.cloneNode(true);
+            clone.removeAttribute('id');
+            clone.setAttribute('data-default', '');
+            clone.slot = 'separator';
+            return clone;
+        }
+        // Create default separator element
+        const span = document.createElement('span');
+        span.innerText = '/';
+        span.slot = 'separator';
+        span.setAttribute('data-default', '');
+        return span;
+    }
+    getCustomSeparator() {
+        var _a;
+        if (Boolean((_a = this.separatorIcon) === null || _a === void 0 ? void 0 : _a.length)) {
+            const sixIcon = document.createElement('six-icon');
+            sixIcon.innerText = this.separatorIcon;
+            sixIcon.setAttribute('size', 'small');
+            return sixIcon;
+        }
+        return Array.from(this.host.children).find((child) => child.getAttribute('slot') === 'separator');
+    }
+    render() {
+        return (h("host", { key: '71fcac983222825168006e795d3c7f8f887f2f66' }, h("nav", { key: '76473724c4e4ca45650a5defcc9a4c8352311345', part: "base" }, h("slot", { key: '6ec1262745d1b9507e6d612d3cf3a22c5e6859cd', onSlotchange: this.updateBreadcrumbItems }))));
+    }
+    static get is() { return "six-breadcrumbs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-breadcrumbs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-breadcrumbs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "separatorIcon": {
+                "type": "string",
+                "attribute": "separator-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines an icon as a separator without having to place a slot *"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=six-breadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/six-breadcrumbs/six-breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n *\n * @since 5.0\n * @status beta\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with six-icon.\n *\n * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'six-breadcrumbs',\n  styleUrl: 'six-breadcrumbs.scss',\n  shadow: true,\n})\nexport class SixBreadcrumbs {\n  @Element() host!: HTMLSixBreadcrumbsElement;\n\n  /** Defines an icon as a separator without having to place a slot **/\n  @Prop({ attribute: 'separator-icon', reflect: true }) separatorIcon: string = '';\n\n  private updateBreadcrumbItems = () => {\n    const items = [...this.host.querySelectorAll('six-breadcrumbs-item')] as HTMLSixBreadcrumbsItemElement[];\n\n    items.forEach((item, index) => {\n      // Append separators to each item if they don't already have one\n      const separator = item.querySelector('[slot=\"separator\"]');\n      if (separator === null) {\n        // No separator exists, add one\n        item.append(this.createSeparatorElement());\n      } else if (separator.hasAttribute('data-default')) {\n        // A default separator exists, replace it\n        separator.replaceWith(this.createSeparatorElement());\n      }\n\n      // The last breadcrumb item is the \"current page\"\n      if (index === items.length - 1) {\n        item.setAttribute('aria-current', 'page');\n      } else {\n        item.removeAttribute('aria-current');\n      }\n    });\n  };\n\n  private createSeparatorElement(): HTMLElement {\n    // Find a custom separator by checking direct children only\n    const customSeparator = this.getCustomSeparator();\n    console.log(customSeparator);\n    if (customSeparator) {\n      const clone = customSeparator.cloneNode(true) as HTMLElement;\n      clone.removeAttribute('id');\n      clone.setAttribute('data-default', '');\n      clone.slot = 'separator';\n      return clone;\n    }\n\n    // Create default separator element\n    const span = document.createElement('span');\n    span.innerText = '/';\n    span.slot = 'separator';\n    span.setAttribute('data-default', '');\n    return span;\n  }\n\n  private getCustomSeparator() {\n    if (Boolean(this.separatorIcon?.length)) {\n      const sixIcon = document.createElement('six-icon');\n      sixIcon.innerText = this.separatorIcon;\n      sixIcon.setAttribute('size', 'small');\n      return sixIcon;\n    }\n    return Array.from(this.host.children).find((child) => child.getAttribute('slot') === 'separator');\n  }\n\n  render() {\n    return (\n      <host>\n        <nav part=\"base\">\n          <slot onSlotchange={this.updateBreadcrumbItems} />\n        </nav>\n      </host>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-breadcrumbs-item/six-breadcrumbs-item.css

@@ -0,0 +1,61 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  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;
+}
+
+/**
+* @prop --separator-color: The color of the separator
+* @prop --last-item-color: The color of the last breadcrumbs item
+*/
+:host {
+  --last-item-color: var(--six-color-web-rock-700);
+  --separator-color: var(--six-color-web-rock-700);
+}
+:host::part(label) {
+  padding: unset;
+}
+:host::part(base) {
+  display: flex;
+  align-items: center;
+}
+:host::part(separator) {
+  align-items: center;
+  user-select: none;
+  -webkit-user-select: none;
+}
+:host six-button::part(label) {
+  padding-left: var(--six-spacing-xx-small);
+  padding-right: var(--six-spacing-xx-small);
+}
+
+:host([read-only]) six-button::part(base) {
+  color: var(--last-item-color);
+}
+
+.breadcrumb-item-readonly {
+  cursor: default;
+}
+
+.breadcrumb-item__separator {
+  display: flex;
+  align-items: center;
+  color: var(--separator-color);
+}
+
+:host(:last-of-type) .breadcrumb-item__separator {
+  display: none;
+}

package/dist/collection/components/six-breadcrumbs-item/six-breadcrumbs-item.js

@@ -0,0 +1,123 @@
+import { h } from "@stencil/core";
+/**
+ * Breadcrumb items are used inside breadcrumbs to represent different links.
+ *
+ * @since 5.0
+ * @status beta
+ *
+ * @slot - The breadcrumb item’s label.
+ * @slot prefix - An optional prefix, usually an icon or icon button.
+ * @slot suffix - An optional suffix, usually an icon or icon button.
+ * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on six-breadcrumbs instead.
+ *
+ * @part base - The component's base wrapper.
+ * @part button - The button that renders the item
+ * @part separator - The separator
+ */
+export class SixBreadcrumbsItem {
+    constructor() {
+        /** The breadcrumbs item size. */
+        this.size = 'medium';
+        /** Set to true to readonly the breadcrumb item. */
+        this.readonly = false;
+    }
+    render() {
+        return (h("div", { key: 'c513737271cbfcd6755fa7b1effc526ec450bf04', part: "base" }, h("six-button", { key: '9f7fa7a98c83bcd536e864c486e696623a337aba', part: "button", type: "link", class: { 'breadcrumb-item-readonly': this.readonly }, href: this.readonly ? undefined : this.href, tabindex: this.readonly ? -1 : undefined, target: this.target, size: this.size }, h("slot", { key: '21702eca3e7529a8e6e2e63d640a079b9da3eef9', name: "prefix", slot: "prefix" }), h("slot", { key: 'eaeaac8681abaf25e4959615c0d7acbed2f51813' }), h("slot", { key: 'b7bf9a20d59cee15010f585e17fb3cdf1979573b', name: "suffix", slot: "suffix" })), h("span", { key: '0c4189811fa524e18bf0c0f94c7f6490c11018d9', part: "separator", class: "breadcrumb-item__separator", "aria-hidden": "true" }, h("slot", { key: '03ca6b113b73f75fbaeec04b0ec3d3224536c77b', name: "separator" }))));
+    }
+    static get is() { return "six-breadcrumbs-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-breadcrumbs-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-breadcrumbs-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "attribute": "href",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "attribute": "target",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_blank' | '_parent' | '_self' | '_top'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tells the browser where to open the link. Only used when `href` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The breadcrumbs item size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "read-only",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to readonly the breadcrumb item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=six-breadcrumbs-item.js.map

package/dist/collection/components/six-breadcrumbs-item/six-breadcrumbs-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-breadcrumbs-item.js","sourceRoot":"","sources":["../../../src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE5D;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,kBAAkB;IAL/B;QAcE,iCAAiC;QACR,SAAI,GAAiC,QAAQ,CAAC;QAEvE,mDAAmD;QACF,aAAQ,GAAY,KAAK,CAAC;KAwB5E;IAtBC,MAAM;QACJ,OAAO,CACL,4DAAK,IAAI,EAAC,MAAM;YACd,mEACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,EACpD,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAC3C,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACxC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI;gBAEf,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAG;gBACpC,8DAAQ;gBACR,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAG,CACzB;YACb,6DAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,iBAAa,MAAM;gBAC1E,6DAAM,IAAI,EAAC,WAAW,GAAG,CACpB,CACH,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * Breadcrumb items are used inside breadcrumbs to represent different links.\n *\n * @since 5.0\n * @status beta\n *\n * @slot - The breadcrumb item’s label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on six-breadcrumbs instead.\n *\n * @part base - The component's base wrapper.\n * @part button - The button that renders the item\n * @part separator - The separator\n */\n@Component({\n  tag: 'six-breadcrumbs-item',\n  styleUrl: 'six-breadcrumbs-item.scss',\n  shadow: true,\n})\nexport class SixBreadcrumbsItem {\n  @Element() host!: HTMLSixBreadcrumbsItemElement;\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  /** The breadcrumbs item size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to readonly the breadcrumb item. */\n  @Prop({ attribute: 'read-only', reflect: true }) readonly: boolean = false;\n\n  render() {\n    return (\n      <div part=\"base\">\n        <six-button\n          part=\"button\"\n          type=\"link\"\n          class={{ 'breadcrumb-item-readonly': this.readonly }}\n          href={this.readonly ? undefined : this.href}\n          tabindex={this.readonly ? -1 : undefined}\n          target={this.target}\n          size={this.size}\n        >\n          <slot name=\"prefix\" slot=\"prefix\" />\n          <slot />\n          <slot name=\"suffix\" slot=\"suffix\" />\n        </six-button>\n        <span part=\"separator\" class=\"breadcrumb-item__separator\" aria-hidden=\"true\">\n          <slot name=\"separator\" />\n        </span>\n      </div>\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

@@ -49,6 +49,15 @@ export class SixButton {
             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;
@@ -83,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: '6d8805ed1d5c513d940b920d75651f945618f3e4', onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, h(Button, { key: 'c8d4d41bbd6ae8af44e15e73f64ccdea7ce0ae6e', 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',
@@ -112,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: '185a16d68e7d8ce5de6459d4fae511344dcabd47', part: "prefix", class: "button__prefix" }, h("slot", { key: 'a6128d2341dd34212529bc07dd06188ab0f73b5c', onSlotchange: this.handleSlotChange, name: "prefix" })), h("span", { key: '9f8c78eb8982bd61e9e440024bbafa6d097e9b05', part: "label", class: "button__label" }, h("slot", { key: '3752f84bcc8427663a3b7e61ab1f100f860027ba', onSlotchange: this.handleSlotChange })), h("span", { key: 'c936392626dead5ae3c568d21ee2595eb83171b4', part: "suffix", class: "button__suffix" }, h("slot", { key: '2e4d5d1bcb5cf2da616f0f1facc1c9b5b767a16f', onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (h("span", { key: '71874a301d18ccfc0d109e03bf37712cec7f28f0', part: "caret", class: "button__caret" }, h("svg", { key: '4476a03737696128a77cbc1a5d0f307d027c5096', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '400c81a7d7266f5ccae85c30eb3c7a1a9f26cbdc', points: "6 9 12 15 18 9" })))), this.loading && h("six-spinner", { key: 'f1b153aaed8cb908f78d0e76c7c3b53911288b1d' }))));
+            }, 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"; }
@@ -130,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'",
@@ -144,12 +162,12 @@ export class SixButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": true,
                 "defaultValue": "'primary'"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -164,12 +182,12 @@ export class SixButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": true,
                 "defaultValue": "'medium'"
             },
             "caret": {
                 "type": "boolean",
+                "attribute": "caret",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -184,12 +202,12 @@ export class SixButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caret",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -204,12 +222,12 @@ export class SixButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "loading": {
                 "type": "boolean",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -224,12 +242,12 @@ export class SixButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "loading",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "pill": {
                 "type": "boolean",
+                "attribute": "pill",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -244,12 +262,12 @@ export class SixButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "pill",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "circle": {
                 "type": "boolean",
+                "attribute": "circle",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -264,12 +282,12 @@ export class SixButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "circle",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "submit": {
                 "type": "boolean",
+                "attribute": "submit",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -284,12 +302,12 @@ export class SixButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "submit",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "reset": {
                 "type": "boolean",
+                "attribute": "reset",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -304,12 +322,12 @@ export class SixButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "reset",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -324,12 +342,12 @@ export class SixButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -344,12 +362,12 @@ export class SixButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -364,11 +382,11 @@ export class SixButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false
             },
             "target": {
                 "type": "string",
+                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "'_blank' | '_parent' | '_self' | '_top'",
@@ -383,11 +401,11 @@ export class SixButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "target",
                 "reflect": false
             },
             "download": {
                 "type": "string",
+                "attribute": "download",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -402,7 +420,6 @@ export class SixButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "download",
                 "reflect": false
             }
         };