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

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-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 {