@six-group/ui-library 0.0.0-insider.e8b5a11 → 0.0.0-insider.eb446eb

package/dist/collection/components/six-sidebar-item-group/six-sidebar-item-group.js

@@ -18,6 +18,14 @@ export class SixSidebarItemGroup {
         /** Indicates whether the sidebar is shown */
         this.open = false;
         this.summaryIconHasContent = false;
+        this.handleDetailsShow = (event) => {
+            event.stopPropagation();
+            this.open = true;
+        };
+        this.handleDetailsHide = (event) => {
+            event.stopPropagation();
+            this.open = false;
+        };
         this.provideSlot = (name) => {
             if (this.summaryIconHasContent) {
                 return (h("div", { slot: name }, h("slot", { name: name })));
@@ -52,7 +60,7 @@ export class SixSidebarItemGroup {
                 'six-sidebar-item-group': true,
                 'six-sidebar-item-group--childless': !this.hasItems,
                 'six-sidebar-item-group--subgroup': this.isSubgroup(),
-            }, inline: true, open: this.open, "summary-icon": this.summaryIcon, hasContent: this.hasItems, tabindex: this.renderAsHref() ? -1 : undefined }, h("div", { slot: "summary" }, h("div", { class: "six-sidebar-details__header" }, this.icon && h("six-icon", { class: "six-sidebar-details__header-icon" }, this.icon), this.name)), this.provideSlot('summary-icon'), h("slot", null)));
+            }, inline: true, open: this.open, "summary-icon": this.summaryIcon, "onSix-details-show": this.handleDetailsShow, "onSix-details-hide": this.handleDetailsHide, hasContent: this.hasItems, tabindex: this.renderAsHref() ? -1 : undefined }, h("div", { slot: "summary" }, h("div", { class: "six-sidebar-details__header" }, this.icon && h("six-icon", { class: "six-sidebar-details__header-icon" }, this.icon), this.name)), this.provideSlot('summary-icon'), h("slot", null)));
         if (this.renderAsHref()) {
             return (h("a", { class: "six-sidebar-details__link", href: this.href }, element));
         }
@@ -76,6 +84,7 @@ export class SixSidebarItemGroup {
         return {
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -90,12 +99,12 @@ export class SixSidebarItemGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -110,12 +119,12 @@ export class SixSidebarItemGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -130,13 +139,13 @@ export class SixSidebarItemGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true,
                 "defaultValue": "''"
             },
             "open": {
                 "type": "boolean",
-                "mutable": false,
+                "attribute": "open",
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -150,12 +159,12 @@ export class SixSidebarItemGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "summaryIcon": {
                 "type": "string",
+                "attribute": "summary-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -170,11 +179,11 @@ export class SixSidebarItemGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "summary-icon",
                 "reflect": false
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -189,7 +198,6 @@ export class SixSidebarItemGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": true
             }
         };

package/dist/collection/components/six-sidebar-item-group/six-sidebar-item-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-sidebar-item-group.js","sourceRoot":"","sources":["../../../src/components/six-sidebar-item-group/six-sidebar-item-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested sidebar [group] items.\n */\n\n@Component({\n  tag: 'six-sidebar-item-group',\n  styleUrl: 'six-sidebar-item-group.scss',\n  shadow: true,\n})\nexport class SixSidebarItemGroup {\n  @Element() readonly host!: HTMLSixSidebarItemGroupElement;\n\n  @State() hasItems = false;\n\n  /** Title of item group */\n  @Prop() name = '';\n\n  /** Icon of the group */\n  @Prop() icon = '';\n\n  /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Indicates whether the sidebar is shown */\n  @Prop({ reflect: true }) open = false;\n\n  /** Custom summary icon name. */\n  @Prop() summaryIcon?: string;\n\n  @State() summaryIconHasContent = false;\n\n  /**\n   * Provide if the item should be rendered as anchor tag.\n   * Note, that the href is added automatically when using routerLink in Angular.\n   */\n  @Prop({ reflect: true }) href: string | undefined;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange() {\n    this.hasItems = hasSlot(this.host);\n  }\n\n  private isSubgroup() {\n    return this.host.parentElement?.closest('six-sidebar-item-group') != null;\n  }\n\n  private renderAsHref(): boolean {\n    return this.href != null && !this.hasItems;\n  }\n\n  private provideSlot = (name: string) => {\n    if (this.summaryIconHasContent) {\n      return (\n        <div slot={name}>\n          <slot name={name}></slot>\n        </div>\n      );\n    }\n\n    return (\n      <slot\n        name={name}\n        onSlotchange={() => {\n          const slot = this.host.shadowRoot?.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`);\n          if (slot != null) {\n            this.summaryIconHasContent = slot.assignedNodes().length > 0;\n          }\n        }}\n      ></slot>\n    );\n  };\n\n  render() {\n    const element = (\n      <six-details\n        class={{\n          'six-sidebar-item-group': true,\n          'six-sidebar-item-group--childless': !this.hasItems,\n          'six-sidebar-item-group--subgroup': this.isSubgroup(),\n        }}\n        inline={true}\n        open={this.open}\n        summary-icon={this.summaryIcon}\n        hasContent={this.hasItems}\n        tabindex={this.renderAsHref() ? -1 : undefined}\n      >\n        <div slot=\"summary\">\n          <div class=\"six-sidebar-details__header\">\n            {this.icon && <six-icon class=\"six-sidebar-details__header-icon\">{this.icon}</six-icon>}\n            {this.name}\n          </div>\n        </div>\n        {this.provideSlot('summary-icon')}\n        <slot />\n      </six-details>\n    );\n\n    if (this.renderAsHref()) {\n      return (\n        <a class=\"six-sidebar-details__link\" href={this.href}>\n          {element}\n        </a>\n      );\n    } else {\n      return element;\n    }\n  }\n}\n"]}
+{"version":3,"file":"six-sidebar-item-group.js","sourceRoot":"","sources":["../../../src/components/six-sidebar-item-group/six-sidebar-item-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { SixDetailsCustomEvent } from '../../components';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested sidebar [group] items.\n */\n\n@Component({\n  tag: 'six-sidebar-item-group',\n  styleUrl: 'six-sidebar-item-group.scss',\n  shadow: true,\n})\nexport class SixSidebarItemGroup {\n  @Element() readonly host!: HTMLSixSidebarItemGroupElement;\n\n  @State() hasItems = false;\n\n  /** Title of item group */\n  @Prop() name = '';\n\n  /** Icon of the group */\n  @Prop() icon = '';\n\n  /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Indicates whether the sidebar is shown */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  /** Custom summary icon name. */\n  @Prop() summaryIcon?: string;\n\n  @State() summaryIconHasContent = false;\n\n  /**\n   * Provide if the item should be rendered as anchor tag.\n   * Note, that the href is added automatically when using routerLink in Angular.\n   */\n  @Prop({ reflect: true }) href: string | undefined;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange() {\n    this.hasItems = hasSlot(this.host);\n  }\n\n  private isSubgroup() {\n    return this.host.parentElement?.closest('six-sidebar-item-group') != null;\n  }\n\n  private renderAsHref(): boolean {\n    return this.href != null && !this.hasItems;\n  }\n\n  private handleDetailsShow = (event: SixDetailsCustomEvent<undefined>) => {\n    event.stopPropagation();\n    this.open = true;\n  };\n\n  private handleDetailsHide = (event: SixDetailsCustomEvent<undefined>) => {\n    event.stopPropagation();\n    this.open = false;\n  };\n\n  private provideSlot = (name: string) => {\n    if (this.summaryIconHasContent) {\n      return (\n        <div slot={name}>\n          <slot name={name}></slot>\n        </div>\n      );\n    }\n\n    return (\n      <slot\n        name={name}\n        onSlotchange={() => {\n          const slot = this.host.shadowRoot?.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`);\n          if (slot != null) {\n            this.summaryIconHasContent = slot.assignedNodes().length > 0;\n          }\n        }}\n      ></slot>\n    );\n  };\n\n  render() {\n    const element = (\n      <six-details\n        class={{\n          'six-sidebar-item-group': true,\n          'six-sidebar-item-group--childless': !this.hasItems,\n          'six-sidebar-item-group--subgroup': this.isSubgroup(),\n        }}\n        inline={true}\n        open={this.open}\n        summary-icon={this.summaryIcon}\n        onSix-details-show={this.handleDetailsShow}\n        onSix-details-hide={this.handleDetailsHide}\n        hasContent={this.hasItems}\n        tabindex={this.renderAsHref() ? -1 : undefined}\n      >\n        <div slot=\"summary\">\n          <div class=\"six-sidebar-details__header\">\n            {this.icon && <six-icon class=\"six-sidebar-details__header-icon\">{this.icon}</six-icon>}\n            {this.name}\n          </div>\n        </div>\n        {this.provideSlot('summary-icon')}\n        <slot />\n      </six-details>\n    );\n\n    if (this.renderAsHref()) {\n      return (\n        <a class=\"six-sidebar-details__link\" href={this.href}>\n          {element}\n        </a>\n      );\n    } else {\n      return element;\n    }\n  }\n}\n"]}

package/dist/collection/components/six-spinner/six-spinner.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;
+}
+
 /**
  * @prop --track-color: The color of the spinner's track.
  * @prop --indicator-color: The color of the spinner's indicator.

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

@@ -66,6 +66,7 @@ export class SixSpinner {
         return {
             "logo": {
                 "type": "string",
+                "attribute": "logo",
                 "mutable": false,
                 "complexType": {
                     "original": "'six' | 'bme'",
@@ -80,11 +81,11 @@ export class SixSpinner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo",
                 "reflect": false
             },
             "six": {
                 "type": "boolean",
+                "attribute": "six",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -99,7 +100,6 @@ export class SixSpinner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "six",
                 "reflect": false
             }
         };

package/dist/collection/components/six-stage-indicator/six-stage-indicator.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: grid;
 }

package/dist/collection/components/six-stage-indicator/six-stage-indicator.js

@@ -23,6 +23,7 @@ export class SixStageIndicator {
         return {
             "stage": {
                 "type": "string",
+                "attribute": "stage",
                 "mutable": false,
                 "complexType": {
                     "original": "StageType",
@@ -43,7 +44,6 @@ export class SixStageIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "stage",
                 "reflect": false,
                 "defaultValue": "null"
             }

package/dist/collection/components/six-switch/six-switch.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;
 }

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

@@ -112,12 +112,12 @@ export class SixSwitch {
         (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.blur();
     }
     render() {
-        return (h(FormControl, { key: 'ea977a4c3679aad414bbf614784525f80f3cdfa2', inputId: this.switchId, label: this.label, labelId: this.labelId, hasLabelSlot: false, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { key: '47d1bea4fb8dd49e5695cc9a0a62f178faab75b9', part: "base", htmlFor: this.switchId, class: {
+        return (h(FormControl, { key: 'fd6c9c888316e46623e92b779c2215888783413b', inputId: this.switchId, label: this.label, labelId: this.labelId, hasLabelSlot: false, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { key: 'd7d5f569d8aea4f7203f7c0973cf212bd6bcfc60', part: "base", htmlFor: this.switchId, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled,
                 'switch--focused': this.hasFocus,
-            }, onMouseDown: this.handleMouseDown }, h("span", { key: '8c471ca1aad813d7d773ad39a3c76e4ea2f085a0', part: "control", class: "switch__control" }, h("span", { key: '80441f79d3da03bbd05879f230e4def1b4f36386', part: "thumb", class: "switch__thumb" }), h("input", { key: 'dc35e7d4ba3b4198f38211bcaae34146726aee76', ref: (el) => (this.inputElement = el), id: this.switchId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown })), h("span", { key: '14cd70ebc30c70e1a3c13162fa0e3b62497c2ed2', part: "label", id: this.labelId, class: "switch__label" }, h("slot", { key: '7757ec7b7eeaadc2cbf1624c02f3b6155e2448fe' })))));
+            }, onMouseDown: this.handleMouseDown }, h("span", { key: '4043bb4abed6a44a360b5409b0e4ebd5929a719f', part: "control", class: "switch__control" }, h("span", { key: 'd93e868866ea81ae2c2832ddc6fdcb11c0b23679', part: "thumb", class: "switch__thumb" }), h("input", { key: '7e5cff86449295f36e85b221f8795f3df18808ae', ref: (el) => (this.inputElement = el), id: this.switchId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown })), h("span", { key: 'c0823f84eb3a30c2e0fdfe5acb6f1390e2b389aa', part: "label", id: this.labelId, class: "switch__label" }, h("slot", { key: 'aeb69e52fd37efab7ee8061d3c69bfab1c174933' })))));
     }
     static get is() { return "six-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -135,6 +135,7 @@ export class SixSwitch {
         return {
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -149,12 +150,12 @@ export class SixSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -169,12 +170,12 @@ export class SixSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "'on'"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -189,12 +190,12 @@ export class SixSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -209,12 +210,12 @@ export class SixSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -229,12 +230,12 @@ export class SixSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -249,12 +250,12 @@ export class SixSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "errorText": {
                 "type": "string",
+                "attribute": "error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -269,12 +270,12 @@ export class SixSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error-text",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "errorTextCount": {
                 "type": "number",
+                "attribute": "error-text-count",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -289,11 +290,11 @@ export class SixSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error-text-count",
                 "reflect": false
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -308,7 +309,6 @@ export class SixSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"
             }

package/dist/collection/components/six-tab/six-tab.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: flex;
 }
@@ -44,6 +55,18 @@
 .tab:hover:not(.tab--disabled) {
   color: var(--six-tab-color-hover);
 }
+.tab.tab--left, .tab.tab--right {
+  display: inline-block;
+  text-align: left;
+}
+.tab.tab--left::before, .tab.tab--right::before {
+  display: block;
+  font-weight: var(--six-font-weight-bold);
+  content: attr(title);
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
 
 .tab__close-button {
   font-size: var(--six-font-size-large);

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

@@ -45,7 +45,7 @@ export class SixTab {
         const placement = (_a = tabGroup === null || tabGroup === void 0 ? void 0 : tabGroup.placement) !== null && _a !== void 0 ? _a : 'top';
         return (
         // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels
-        h(Host, { key: '1d5d5e515bd7491370ca506c0613dc5787692a54', id: this.host.id || this.componentId }, h("div", { key: 'e13f65d6a2d3d70f7b4463b8c685d857020f3597', part: "base", ref: (el) => (this.tab = el), class: {
+        h(Host, { key: '40b4042f28816b55ef585cf24570b64a44031863', id: this.host.id || this.componentId }, h("div", { key: 'e4e8ba43cf2e1384a421835fe1131ea411ac7a18', part: "base", ref: (el) => (this.tab = el), class: {
                 tab: true,
                 // Placements
                 'tab--top': placement === 'top',
@@ -56,7 +56,7 @@ export class SixTab {
                 'tab--active': this.active,
                 'tab--closable': this.closable,
                 'tab--disabled': this.disabled,
-            }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h("slot", { key: '6fde6d26cb76ba8bd62fd0bf6535b3b34b699c2c' }), this.closable && (h("six-icon-button", { key: 'be5edcec20b6f91ca0c6f3bd1ac96372bf579e7f', name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: 'c1fd8a1b882d7f43b36797156e5e2ef8682b1431', part: this.active ? 'active-tab-indicator' : '', class: {
+            }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0', title: this.host.innerHTML }, h("slot", { key: '39b1a75c51726543e0371e2607c6aa9197483b34' }), this.closable && (h("six-icon-button", { key: 'b9b2468f19b875ea58292f9ed330b49cff084d7c', name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: 'da5cf7175879826bfb96f52cd8aca427372e32e6', part: this.active ? 'active-tab-indicator' : '', class: {
                 tab__indicator: true,
                 'tab__indicator--active': this.active,
                 // Placements
@@ -82,6 +82,7 @@ export class SixTab {
         return {
             "panel": {
                 "type": "string",
+                "attribute": "panel",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -96,12 +97,12 @@ export class SixTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "panel",
                 "reflect": true,
                 "defaultValue": "''"
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -116,12 +117,12 @@ export class SixTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "closable": {
                 "type": "boolean",
+                "attribute": "closable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -136,12 +137,12 @@ export class SixTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "closable",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -156,7 +157,6 @@ export class SixTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             }

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

@@ -1 +1 @@
-{"version":3,"file":"six-tab.js","sourceRoot":"","sources":["../../../src/components/six-tab/six-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAG/F,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;;GAUG;AAOH,MAAM,OAAO,MAAM;IALnB;QAMU,gBAAW,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC;QAKpC,uGAAuG;QAC9E,UAAK,GAAG,EAAE,CAAC;QAEpC,sDAAsD;QAC7B,WAAM,GAAG,KAAK,CAAC;QAExC,6DAA6D;QACrD,aAAQ,GAAG,KAAK,CAAC;QAEzB,uDAAuD;QAC9B,aAAQ,GAAG,KAAK,CAAC;KAkF3C;IA7EC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IAED,6BAA6B;IAE7B,KAAK,CAAC,QAAQ,CAAC,OAAsB;;QACnC,MAAA,IAAI,CAAC,GAAG,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC;IAED,kCAAkC;IAElC,KAAK,CAAC,WAAW;;QACf,MAAA,IAAI,CAAC,GAAG,0CAAE,IAAI,EAAE,CAAC;IACnB,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;;QACJ,MAAM,QAAQ,GAAkC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACnF,MAAM,SAAS,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,mCAAI,KAAK,CAAC;QAC/C,OAAO;QACL,uGAAuG;QACvG,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW;YACxC,4DACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;oBACL,GAAG,EAAE,IAAI;oBAET,aAAa;oBACb,UAAU,EAAE,SAAS,KAAK,KAAK;oBAC/B,aAAa,EAAE,SAAS,KAAK,QAAQ;oBACrC,WAAW,EAAE,SAAS,KAAK,MAAM;oBACjC,YAAY,EAAE,SAAS,KAAK,OAAO;oBAEnC,SAAS;oBACT,aAAa,EAAE,IAAI,CAAC,MAAM;oBAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;oBAC9B,eAAe,EAAE,IAAI,CAAC,QAAQ;iBAC/B,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;gBAEpD,8DAAQ;gBACP,IAAI,CAAC,QAAQ,IAAI,CAChB,wEACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,GAClB,CACH,CACG;YACN,4DACE,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,EAC/C,KAAK,EAAE;oBACL,cAAc,EAAE,IAAI;oBACpB,wBAAwB,EAAE,IAAI,CAAC,MAAM;oBAErC,aAAa;oBACb,qBAAqB,EAAE,SAAS,KAAK,KAAK;oBAC1C,wBAAwB,EAAE,SAAS,KAAK,QAAQ;oBAChD,sBAAsB,EAAE,SAAS,KAAK,MAAM;oBAC5C,uBAAuB,EAAE,SAAS,KAAK,OAAO;iBAC/C,GACI,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\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 tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab',\n  styleUrl: 'six-tab.scss',\n  shadow: true,\n})\nexport class SixTab {\n  private componentId = `tab-${++id}`;\n  private tab?: HTMLElement;\n\n  @Element() host!: HTMLSixTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) active = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Set to true to draw the tab in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n  }\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.tab?.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab?.blur();\n  }\n\n  private handleCloseClick() {\n    this.sixClose.emit();\n  }\n\n  render() {\n    const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n    const placement = tabGroup?.placement ?? 'top';\n    return (\n      // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            tab: true,\n\n            // Placements\n            'tab--top': placement === 'top',\n            'tab--bottom': placement === 'bottom',\n            'tab--left': placement === 'left',\n            'tab--right': placement === 'right',\n\n            // States\n            'tab--active': this.active,\n            'tab--closable': this.closable,\n            'tab--disabled': this.disabled,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <six-icon-button\n              name=\"close\"\n              size=\"xSmall\"\n              exportparts=\"base:close-button\"\n              class=\"tab__close-button\"\n              onClick={this.handleCloseClick}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n        <div\n          part={this.active ? 'active-tab-indicator' : ''}\n          class={{\n            tab__indicator: true,\n            'tab__indicator--active': this.active,\n\n            // Placements\n            'tab__indicator--top': placement === 'top',\n            'tab__indicator--bottom': placement === 'bottom',\n            'tab__indicator--left': placement === 'left',\n            'tab__indicator--right': placement === 'right',\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-tab.js","sourceRoot":"","sources":["../../../src/components/six-tab/six-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\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 tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab',\n  styleUrl: 'six-tab.scss',\n  shadow: true,\n})\nexport class SixTab {\n  private componentId = `tab-${++id}`;\n  private tab?: HTMLElement;\n\n  @Element() host!: HTMLSixTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) active = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Set to true to draw the tab in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n  }\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.tab?.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab?.blur();\n  }\n\n  private handleCloseClick() {\n    this.sixClose.emit();\n  }\n\n  render() {\n    const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n    const placement = tabGroup?.placement ?? 'top';\n    return (\n      // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            tab: true,\n\n            // Placements\n            'tab--top': placement === 'top',\n            'tab--bottom': placement === 'bottom',\n            'tab--left': placement === 'left',\n            'tab--right': placement === 'right',\n\n            // States\n            'tab--active': this.active,\n            'tab--closable': this.closable,\n            'tab--disabled': this.disabled,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n          title={this.host.innerHTML}\n        >\n          <slot />\n          {this.closable && (\n            <six-icon-button\n              name=\"close\"\n              size=\"xSmall\"\n              exportparts=\"base:close-button\"\n              class=\"tab__close-button\"\n              onClick={this.handleCloseClick}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n        <div\n          part={this.active ? 'active-tab-indicator' : ''}\n          class={{\n            tab__indicator: true,\n            'tab__indicator--active': this.active,\n\n            // Placements\n            'tab__indicator--top': placement === 'top',\n            'tab__indicator--bottom': placement === 'bottom',\n            'tab__indicator--left': placement === 'left',\n            'tab__indicator--right': placement === 'right',\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-tab-group/six-tab-group.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: block;
 }

package/dist/collection/components/six-tab-group/six-tab-group.js

@@ -228,7 +228,7 @@ export class SixTabGroup {
         });
     }
     render() {
-        return (h("div", { key: '50cbef0781a3cb02c56dd3e912f82889b5da1937', part: "base", ref: (el) => (this.tabGroup = el), class: {
+        return (h("div", { key: '56aaa11f3101ba44544017ee7f881ec20d779b40', part: "base", ref: (el) => (this.tabGroup = el), class: {
                 'tab-group': true,
                 // Placements
                 'tab-group--top': this.placement === 'top',
@@ -236,7 +236,7 @@ export class SixTabGroup {
                 'tab-group--left': this.placement === 'left',
                 'tab-group--right': this.placement === 'right',
                 'tab-group--has-scroll-controls': this.hasRightControl || this.hasLeftControl,
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '6262c15276def35075129c8f1431094dbecc7ecf', class: "tab-group__nav-container" }, this.hasLeftControl && (h("six-icon-button", { key: '9ca0654f604fd2c5c2a38fe3036d95746f7ec1e0', class: "tab-group__scroll-button tab-group__scroll-button--left", exportparts: "base:scroll-button", name: "chevron_left", onClick: this.handleScrollLeft })), h("div", { ref: (el) => (this.nav = el), key: "nav", part: "nav", class: "tab-group__nav" }, h("div", { key: '288b14b0bbc790f1ae54e2a26693e9b103002715', ref: (el) => (this.tabs = el), part: "tabs", class: "tab-group__tabs", role: "tablist" }, h("slot", { key: '249ef2f5d67dd3abf35b07028c9d2fe3798ef1ea', name: "nav" }))), this.hasRightControl && (h("six-icon-button", { key: '7cd9a161b9c5cfe8470c2c8311e1767b48ce61ed', class: "tab-group__scroll-button tab-group__scroll-button--right", exportparts: "base:scroll-button", name: "chevron_right", onClick: this.handleScrollRight }))), h("div", { key: 'f2f82d9a7730f577fe4ed4a77a98929487f88dec', ref: (el) => (this.body = el), part: "body", class: "tab-group__body" }, h("slot", { key: 'ca9dfe2b30a558eb1b95a20aee81978b00b9be2d' }))));
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '439df915243867dc2b8b6fa6b508d99f5dbed623', class: "tab-group__nav-container" }, this.hasLeftControl && (h("six-icon-button", { key: '4921d96aea14fc6ee904b5f56c115fc9dd00c6fa', class: "tab-group__scroll-button tab-group__scroll-button--left", exportparts: "base:scroll-button", name: "chevron_left", onClick: this.handleScrollLeft })), h("div", { ref: (el) => (this.nav = el), key: "nav", part: "nav", class: "tab-group__nav" }, h("div", { key: '078cf88dd7be97d186f70f16055b22d5a2a2047b', ref: (el) => (this.tabs = el), part: "tabs", class: "tab-group__tabs", role: "tablist" }, h("slot", { key: 'b65782fdf2f18b7a59912227293e49c2d3cba83d', name: "nav" }))), this.hasRightControl && (h("six-icon-button", { key: '8273dadfbfb6de487b10b0b7a8e5d6eb3dfa1b81', class: "tab-group__scroll-button tab-group__scroll-button--right", exportparts: "base:scroll-button", name: "chevron_right", onClick: this.handleScrollRight }))), h("div", { key: '014ba8c47b65d967dc3eb547f9b282fab8270a58', ref: (el) => (this.body = el), part: "body", class: "tab-group__body" }, h("slot", { key: '488a5b56b66451f1f17802bd0421d4c2d70a773c' }))));
     }
     static get is() { return "six-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -254,6 +254,7 @@ export class SixTabGroup {
         return {
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "'top' | 'bottom' | 'left' | 'right'",
@@ -268,12 +269,12 @@ export class SixTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'top'"
             },
             "noScrollControls": {
                 "type": "boolean",
+                "attribute": "no-scroll-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -288,7 +289,6 @@ export class SixTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "no-scroll-controls",
                 "reflect": false,
                 "defaultValue": "false"
             }