npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.bb295d8 → 0.0.0-insider.bea5ab5 - Mend

@six-group/ui-library 0.0.0-insider.bb295d8 → 0.0.0-insider.bea5ab5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2155) hide show

package/dist/collection/components/six-sidebar/six-sidebar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-sidebar.js","sourceRoot":"","sources":["../../../src/components/six-sidebar/six-sidebar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { scrollIntoView } from '../../utils/scroll';\n\nconst isSidebarItemGroup = (node?: Element \| null): boolean =>\n node?.tagName?.toLowerCase() === 'six-sidebar-item-group';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the nested side bar [group] items.\n /\n\n@Component({\n tag: 'six-sidebar',\n styleUrl: 'six-sidebar.scss',\n shadow: true,\n})\nexport class SixSidebar {\n private willShow = false;\n private willHide = false;\n\n private sidebar?: HTMLElement;\n\n @State() isVisible = false;\n\n /* Sidebar position /\n @Prop() position: 'left' \| 'right' = 'left';\n\n /* Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* Sidebar width /\n @Prop() width = '16rem';\n\n /* Define whether sidebar is toggled meaning only one menu can be open at the same time/\n @Prop() toggled = false;\n\n /* Emitted when the sidebar opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-sidebar-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the sidebar opens and all transitions are complete. /\n @Event({ eventName: 'six-sidebar-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the sidebar closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-sidebar-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the sidebar closes and all transitions are complete. /\n @Event({ eventName: 'six-sidebar-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the sidebar opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n * allow you to set it on a different element in the sidebar, such as an input or button.\n /\n @Event({ eventName: 'six-sidebar-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.type === 'transitionend' && target.classList.contains('sidebar__container')) {\n this.resetTransitionVariables();\n }\n };\n\n componentWillLoad() {\n // Show on init if open\n if (this.open) {\n void this.show();\n // if the sidebar is open by default we need to manually reset the\n // transition variables since there will be no transition event\n this.resetTransitionVariables();\n }\n }\n\n componentDidRender() {\n this.setupTogglableMenuItems();\n }\n\n disconnectedCallback() {\n this.sidebar?.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n }\n\n private closeSiblingDetailsOnShow = (event: Event) => {\n const clickedMenuItem = event.target as HTMLElement;\n if (this.sidebar != null) {\n scrollIntoView(clickedMenuItem, this.sidebar);\n }\n\n const closeAllSiblingsBySiblingProperty = (\n getSibling: (node: Element \| null \| undefined) => Element \| null \| undefined\n ) => {\n let node: Element \| null \| undefined = clickedMenuItem;\n while (getSibling(node) != null) {\n node = getSibling(node);\n if (isSidebarItemGroup(node)) {\n const detailsElement = node?.shadowRoot?.querySelector('six-details');\n if (detailsElement != null) {\n detailsElement.open = false;\n }\n }\n }\n };\n\n // close all previous siblings\n closeAllSiblingsBySiblingProperty((node) => node?.previousElementSibling);\n // close all further siblings\n closeAllSiblingsBySiblingProperty((node) => node?.nextElementSibling);\n };\n\n private setupTogglableMenuItems() {\n if (!this.toggled \|\| this.sidebar == null) return;\n this.markAllMenuItemsAsSelectableEmpty();\n this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n }\n\n private markAllMenuItemsAsSelectableEmpty() {\n // when you have a toggled menu you also want to close other menu items when you click on an item without children\n // nice benefit this item will then also be highlighted\n const slot = this.sidebar?.querySelector('slot');\n const nodes = slot?.assignedElements() \|\| [];\n\n // since we don't just want to make the top level empty menuItems selectable in toggled mode,\n // but also nested items we need to traverse the whole menu item tree\n const menuItems = [];\n while (nodes.length > 0) {\n const node = nodes.pop();\n if (node?.shadowRoot == null) {\n continue;\n }\n\n // collect six-details in the current shadowDOM\n const menuItemsForCurrentNode = node.shadowRoot.querySelectorAll('six-details');\n menuItems.push(...menuItemsForCurrentNode);\n\n // collect all six-sidebar-item-group children of the current node to afterwards check their shadowDOM too\n const newItemGroups = Array.from(node.children).filter(isSidebarItemGroup);\n nodes.push(...newItemGroups);\n }\n\n menuItems.forEach((details) => (details.selectableEmpty = true));\n }\n\n /* Toggles whether the sidebar should be shown or hidden /\n @Method()\n async toggle() {\n if (this.willShow \|\| this.willHide) {\n return;\n }\n\n if (this.open) {\n await this.hide();\n } else {\n await this.show();\n }\n }\n\n /* Shows the sidebar /\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n }\n\n /* Hides the sidebar /\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n }\n\n /* Allows to select a menu item programmatically by index /\n @Method()\n async selectItemByIndex(index: number) {\n if (this.sidebar == null) return;\n\n const slot = this.sidebar.querySelector('slot');\n const menuItemsOnRootLevel: HTMLSixDetailsElement[] = (slot?.assignedElements() \|\| []).flatMap((el) => {\n const detailsElement = el.shadowRoot?.querySelector('six-details');\n if (detailsElement == null) {\n return [];\n }\n return [detailsElement];\n });\n if (index < 0 \|\| index > menuItemsOnRootLevel.length - 1) {\n console.error(\n `Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${index}`\n );\n return;\n }\n await menuItemsOnRootLevel[index].show();\n }\n\n /* Allows to select a menu item programmatically by name */\n @Method()\n async selectItemByName(value: string) {\n const slot = this.sidebar?.querySelector('slot');\n const sidebarItemGroups = slot?.assignedElements() as HTMLSixSidebarItemGroupElement[];\n if (sidebarItemGroups == null) {\n return;\n }\n\n const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => el?.name === value);\n const selectedItem = sidebarItemGroups.at(indexOfSelectedElement)?.shadowRoot?.querySelector('six-details');\n await selectedItem?.show();\n }\n\n private resetTransitionVariables() {\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n\n render() {\n return (\n <host class=\"six-sidebar\">\n <div\n class={{\n sidebar__container: true,\n 'sidebar--visible': this.isVisible,\n 'sidebar--open': this.open,\n 'sidebar--left': this.position === 'left',\n 'sidebar--right': this.position === 'right',\n }}\n style={{\n width: this.width,\n [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,\n }}\n ref={(el) => (this.sidebar = el)}\n aria-hidden={this.open ? 'false' : 'true'}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <slot />\n </div>\n </host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-sidebar.js","sourceRoot":"","sources":["../../../src/components/six-sidebar/six-sidebar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { scrollIntoView } from '../../utils/scroll';\n\nconst isSidebarItemGroup = (node?: Element \| null): boolean =>\n node?.tagName?.toLowerCase() === 'six-sidebar-item-group';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the nested side bar [group] items.\n /\n\n@Component({\n tag: 'six-sidebar',\n styleUrl: 'six-sidebar.scss',\n shadow: true,\n})\nexport class SixSidebar {\n private willShow = false;\n private willHide = false;\n\n private sidebar?: HTMLElement;\n\n @State() isVisible = false;\n\n /* Sidebar position /\n @Prop() position: 'left' \| 'right' = 'left';\n\n /* Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* Sidebar width /\n @Prop() width = '16rem';\n\n /* Define whether sidebar is toggled meaning only one menu can be open at the same time/\n @Prop() toggled = false;\n\n /* Emitted when the sidebar opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-sidebar-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the sidebar opens and all transitions are complete. /\n @Event({ eventName: 'six-sidebar-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the sidebar closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-sidebar-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the sidebar closes and all transitions are complete. /\n @Event({ eventName: 'six-sidebar-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the sidebar opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n * allow you to set it on a different element in the sidebar, such as an input or button.\n /\n @Event({ eventName: 'six-sidebar-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.type === 'transitionend' && target.classList.contains('sidebar__container')) {\n this.resetTransitionVariables();\n }\n };\n\n componentWillLoad() {\n // Show on init if open\n if (this.open) {\n void this.show();\n // if the sidebar is open by default we need to manually reset the\n // transition variables since there will be no transition event\n this.resetTransitionVariables();\n }\n }\n\n componentDidRender() {\n this.setupTogglableMenuItems();\n }\n\n disconnectedCallback() {\n this.sidebar?.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n }\n\n private closeSiblingDetailsOnShow = (event: Event) => {\n const clickedMenuItem = event.target as HTMLElement;\n if (this.sidebar != null) {\n scrollIntoView(clickedMenuItem, this.sidebar);\n }\n\n const closeAllSiblingsBySiblingProperty = (\n getSibling: (node: Element \| null \| undefined) => Element \| null \| undefined\n ) => {\n let node: Element \| null \| undefined = clickedMenuItem;\n while (getSibling(node) != null) {\n node = getSibling(node);\n if (isSidebarItemGroup(node)) {\n const detailsElement = node?.shadowRoot?.querySelector('six-details');\n if (detailsElement != null) {\n detailsElement.open = false;\n }\n }\n }\n };\n\n // close all previous siblings\n closeAllSiblingsBySiblingProperty((node) => node?.previousElementSibling);\n // close all further siblings\n closeAllSiblingsBySiblingProperty((node) => node?.nextElementSibling);\n };\n\n private setupTogglableMenuItems() {\n if (!this.toggled \|\| this.sidebar == null) return;\n this.markAllMenuItemsAsSelectableEmpty();\n this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n }\n\n private markAllMenuItemsAsSelectableEmpty() {\n // when you have a toggled menu you also want to close other menu items when you click on an item without children\n // nice benefit this item will then also be highlighted\n const slot = this.sidebar?.querySelector('slot');\n const nodes = slot?.assignedElements() \|\| [];\n\n // since we don't just want to make the top level empty menuItems selectable in toggled mode,\n // but also nested items we need to traverse the whole menu item tree\n const menuItems = [];\n while (nodes.length > 0) {\n const node = nodes.pop();\n if (node?.shadowRoot == null) {\n continue;\n }\n\n // collect six-details in the current shadowDOM\n const menuItemsForCurrentNode = node.shadowRoot.querySelectorAll('six-details');\n menuItems.push(...menuItemsForCurrentNode);\n\n // collect all six-sidebar-item-group children of the current node to afterwards check their shadowDOM too\n const newItemGroups = Array.from(node.children).filter(isSidebarItemGroup);\n nodes.push(...newItemGroups);\n }\n\n menuItems.forEach((details) => (details.selectableEmpty = true));\n }\n\n /* Toggles whether the sidebar should be shown or hidden /\n @Method()\n async toggle() {\n if (this.willShow \|\| this.willHide) {\n return;\n }\n\n if (this.open) {\n await this.hide();\n } else {\n await this.show();\n }\n }\n\n /* Shows the sidebar /\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n }\n\n /* Hides the sidebar /\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n }\n\n /* Allows to select a menu item programmatically by index /\n @Method()\n async selectItemByIndex(index: number) {\n if (this.sidebar == null) return;\n\n const slot = this.sidebar.querySelector('slot');\n const menuItemsOnRootLevel: HTMLSixDetailsElement[] = (slot?.assignedElements() \|\| []).flatMap((el) => {\n const detailsElement = el.shadowRoot?.querySelector('six-details');\n if (detailsElement == null) {\n return [];\n }\n return [detailsElement];\n });\n if (index < 0 \|\| index > menuItemsOnRootLevel.length - 1) {\n console.error(\n `Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${index}`\n );\n return;\n }\n await menuItemsOnRootLevel[index].show();\n }\n\n /* Allows to select a menu item programmatically by name */\n @Method()\n async selectItemByName(value: string) {\n const slot = this.sidebar?.querySelector('slot');\n const sidebarItemGroups = slot?.assignedElements() as HTMLSixSidebarItemGroupElement[];\n if (sidebarItemGroups == null) {\n return;\n }\n\n const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => el?.name === value);\n const selectedItem = sidebarItemGroups.at(indexOfSelectedElement)?.shadowRoot?.querySelector('six-details');\n await selectedItem?.show();\n }\n\n private resetTransitionVariables() {\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n\n render() {\n return (\n <host class=\"six-sidebar\">\n <div\n class={{\n sidebar__container: true,\n 'sidebar--visible': this.isVisible,\n 'sidebar--open': this.open,\n 'sidebar--left': this.position === 'left',\n 'sidebar--right': this.position === 'right',\n }}\n style={{\n width: this.width,\n [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,\n }}\n ref={(el) => (this.sidebar = el)}\n aria-hidden={this.open ? 'false' : 'true'}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <slot />\n </div>\n </host>\n );\n }\n}\n"]}

package/dist/collection/components/six-sidebar-item/six-sidebar-item.css CHANGED Viewed

@@ -24,4 +24,11 @@ a {
 }
 .sidebar-item.sidebar-item--selected {
   font-weight: var(--six-font-weight-bold);
+}
+.sidebar-item:focus {
+  outline: none;
+}
+.sidebar-item:focus-visible {
+  outline: var(--six-focus-ring);
+  outline-offset: var(--six-focus-ring-offset);
 }

package/dist/collection/components/six-sidebar-item/six-sidebar-item.js CHANGED Viewed

@@ -14,11 +14,11 @@ export class SixSidebarItem {
     }
     render() {
         const Tag = this.href != null ? 'a' : 'div';
-        return (h(Tag, { class: {
+        return (h(Tag, { key: '3e8b2d8fa4d3c5bb22f78be9ebd7af7ebd1b713c', class: {
                 'sidebar-item': true,
                 'sidebar-item--selected': this.selected,
                 'sidebar-item--disabled': this.disabled,
-            }, role: "menuitem", href: this.href, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", null)));
+            }, role: "menuitem", href: this.href, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: 'fdf9de5e93a2a97714db69d1ebbc48dc7de6bdcc' })));
     }
     static get is() { return "six-sidebar-item"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"six-sidebar-item.js","sourceRoot":"","sources":["../../../src/components/six-sidebar-item/six-sidebar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAOH,MAAM,OAAO,cAAc;;qBAEQ,EAAE;wBAGC,KAAK;wBAGL,KAAK;;;IAQzC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;QAC5C,OAAO,CACL,EAAC,GAAG,~~IACF~~,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;gBACvC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;aACxC,EACD,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,mBACA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAE/C,~~eAAa~~,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the nested displayed text of the item.\n /\n\n@Component({\n tag: 'six-sidebar-item',\n styleUrl: 'six-sidebar-item.scss',\n shadow: true,\n})\nexport class SixSidebarItem {\n /* A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. /\n @Prop({ reflect: true }) value = '';\n\n /* Set to true to draw the item in a selected state. /\n @Prop({ reflect: true }) selected = false;\n\n /* Set to true to draw the sidebar item in a disabled state. /\n @Prop({ reflect: true }) disabled = 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 render() {\n const Tag = this.href != null ? 'a' : 'div';\n return (\n <Tag\n class={{\n 'sidebar-item': true,\n 'sidebar-item--selected': this.selected,\n 'sidebar-item--disabled': this.disabled,\n }}\n role=\"menuitem\"\n href={this.href}\n aria-selected={this.selected ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <slot></slot>\n </Tag>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-sidebar-item.js","sourceRoot":"","sources":["../../../src/components/six-sidebar-item/six-sidebar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAOH,MAAM,OAAO,cAAc;;qBAEQ,EAAE;wBAGC,KAAK;wBAGL,KAAK;;;IAQzC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;QAC5C,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;gBACvC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;aACxC,EACD,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,mBACA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAE/C,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the nested displayed text of the item.\n /\n\n@Component({\n tag: 'six-sidebar-item',\n styleUrl: 'six-sidebar-item.scss',\n shadow: true,\n})\nexport class SixSidebarItem {\n /* A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. /\n @Prop({ reflect: true }) value = '';\n\n /* Set to true to draw the item in a selected state. /\n @Prop({ reflect: true }) selected = false;\n\n /* Set to true to draw the sidebar item in a disabled state. /\n @Prop({ reflect: true }) disabled = 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 render() {\n const Tag = this.href != null ? 'a' : 'div';\n return (\n <Tag\n class={{\n 'sidebar-item': true,\n 'sidebar-item--selected': this.selected,\n 'sidebar-item--disabled': this.disabled,\n }}\n role=\"menuitem\"\n href={this.href}\n aria-selected={this.selected ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <slot></slot>\n </Tag>\n );\n }\n}\n"]}

package/dist/collection/components/six-sidebar-item-group/six-sidebar-item-group.css CHANGED Viewed

@@ -29,6 +29,7 @@
 .six-sidebar-details__header {
   display: flex;
+  overflow-wrap: anywhere;
 }
 .six-sidebar-details__header-icon {
@@ -40,4 +41,11 @@
   display: block;
   color: inherit;
   width: 100%;
+}
+.six-sidebar-details__link:focus {
+  outline: none;
+}
+.six-sidebar-details__link:focus-visible {
+  outline: var(--six-focus-ring);
+  outline-offset: calc(-1 * var(--six-focus-ring-offset));
 }

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

@@ -50,7 +50,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 }, 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, 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));
         }

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

	@@ -1 +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":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C;;;;;GAKG;AAOH,MAAM,OAAO,mBAAmB;;QAgDtB,gBAAW,GAAG,CAAC,IAAY,EAAE,EAAE;YACrC,IAAI,IAAI,CAAC,qBAAqB,EAAE;~~gBAC9B~~,OAAO,CACL,WAAK,IAAI,EAAE,IAAI;oBACb,YAAM,IAAI,EAAE,IAAI,GAAS,CACrB,CACP,CAAC;~~aACH~~;YAED,OAAO,CACL,YACE,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,GAAG,EAAE;;oBACjB,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAkB,cAAc,IAAI,IAAI,CAAC,CAAC;oBAC1F,IAAI,IAAI,IAAI,IAAI,EAAE;~~wBAChB~~,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;~~qBAC9D~~;gBACH,CAAC,GACK,CACT,CAAC;QACJ,CAAC,CAAC;wBAjEkB,KAAK;oBAGV,EAAE;oBAGF,EAAE;qBAGgB,EAAE;oBAGH,KAAK;;qCAKJ,KAAK;;;IAQtC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAEO,UAAU;;QAChB,OAAO,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,wBAAwB,CAAC,KAAI,IAAI,CAAC;IAC5E,CAAC;IAEO,YAAY;QAClB,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC7C,CAAC;IAwBD,MAAM;QACJ,MAAM,OAAO,GAAG,CACd,mBACE,KAAK,EAAE;gBACL,wBAAwB,EAAE,IAAI;gBAC9B,mCAAmC,EAAE,CAAC,IAAI,CAAC,QAAQ;gBACnD,kCAAkC,EAAE,IAAI,CAAC,UAAU,EAAE;aACtD,EACD,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,IAAI,CAAC,WAAW,EAC9B,UAAU,EAAE,IAAI,CAAC,QAAQ;~~YAEzB~~,WAAK,IAAI,EAAC,SAAS;gBACjB,WAAK,KAAK,EAAC,6BAA6B;oBACrC,IAAI,CAAC,IAAI,IAAI,gBAAU,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,IAAI,CAAY;oBACtF,IAAI,CAAC,IAAI,CACN,CACF;YACL,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC;YACjC,eAAQ,CACI,CACf,CAAC;QAEF,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;~~YACvB~~,OAAO,CACL,SAAG,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACjD,OAAO,CACN,CACL,CAAC;~~SACH~~;aAAM;~~YACL~~,OAAO,OAAO,CAAC;~~SAChB~~;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 >\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"]}
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"]}

package/dist/collection/components/six-spinner/six-spinner.css CHANGED Viewed

@@ -67,6 +67,51 @@
   -webkit-animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;
   animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;
 }
+.six-spinner polygon {
+  stroke-dasharray: 310;
+  stroke-dashoffset: 310;
+  animation: big-polygon-draw 2s ease-in-out infinite;
+  -webkit-animation: big-polygon-draw 2s ease-in-out infinite;
+}
+.six-spinner polygon:nth-child(2),
+.six-spinner polygon:nth-child(3) {
+  stroke-dasharray: 110;
+  stroke-dashoffset: 110;
+  animation: small-polygon-draw 2s ease-in-out infinite;
+  -webkit-animation: small-polygon-draw 2s ease-in-out infinite;
+}
+@keyframes big-polygon-draw {
+  0%, 100% {
+    stroke-dashoffset: 310;
+  }
+  50% {
+    stroke-dashoffset: 140;
+  }
+}
+@-webkit-keyframes big-polygon-draw {
+  0%, 100% {
+    stroke-dashoffset: 310;
+  }
+  50% {
+    stroke-dashoffset: 140;
+  }
+}
+@keyframes small-polygon-draw {
+  0%, 100% {
+    stroke-dashoffset: 110;
+  }
+  50% {
+    stroke-dashoffset: 50;
+  }
+}
+@-webkit-keyframes small-polygon-draw {
+  0%, 100% {
+    stroke-dashoffset: 110;
+  }
+  50% {
+    stroke-dashoffset: 50;
+  }
+}
 @-webkit-keyframes six-spinner {
   to {
     stroke-dashoffset: -444;

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

@@ -6,20 +6,53 @@ import { h } from "@stencil/core";
  * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
  *
  * @part base - The component's base wrapper.
- * @part svg - The spinner icon
+ * @part svg - The spinner icon.
  */
 export class SixSpinner {
     constructor() {
-        this.six = false;
+        this.logo = undefined;
+        this.six = undefined;
     }
+    /**
+     * Renders a container with a given SVG content.
+     */
+    renderWrapper(content) {
+        return (h("span", { class: "six-spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { class: "six-spinner__container" }, content)));
+    }
+    /**
+     * Renders the SIX logo spinner.
+     */
     renderSIXLogo() {
-        return (h("span", { class: "six-spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { class: "six-spinner__container" }, h("svg", { viewBox: "0 0 40 40", part: "svg" }, h("path", { fill: "none", stroke: "#de3919", "stroke-width": "5", "stroke-linecap": "round", d: "M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42" })))));
+        const sixLogo = (h("svg", { viewBox: "0 0 40 40", part: "svg" }, h("path", { fill: "none", stroke: "#de3919", "stroke-width": "5", "stroke-linecap": "round", d: "M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42" })));
+        return this.renderWrapper(sixLogo);
+    }
+    /**
+     * Renders the BME logo spinner.
+     */
+    renderBMELogo() {
+        const bmeLogo = (h("svg", { viewBox: "0 0 45 55", part: "svg" }, h("polygon", { fill: "none", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", points: "4.42 51.96 17.02 31.473 2 31.473 2 22.486 17.02 22.486 4.42 2 15.404 2 30.289 26.98 14.763 51.96 4.42 51.96" }), h("polygon", { fill: "none", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", points: "42 51.96 31.655 51.96 24.598 40.498 29.831 32.073 42 51.96" }), h("polygon", { fill: "none", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", points: "24.518 12.719 31.014 2 42 2 29.831 21.637 24.518 12.719" })));
+        return this.renderWrapper(bmeLogo);
     }
-    renderSimple() {
+    /**
+     * Renders a simple spinner.
+     */
+    renderSimpleSpinner() {
         return h("span", { part: "base", class: "spinner", "aria-busy": "true", "aria-live": "polite" });
     }
     render() {
-        return this.six ? this.renderSIXLogo() : this.renderSimple();
+        // Check the deprecated `six` property first
+        if (this.six) {
+            console.warn('The "six" prop is deprecated. Use "logo=\'six\'" instead.');
+            return this.renderSIXLogo();
+        }
+        switch (this.logo) {
+            case 'six':
+                return this.renderSIXLogo();
+            case 'bme':
+                return this.renderBMELogo();
+            default:
+                return this.renderSimpleSpinner();
+        }
     }
     static get is() { return "six-spinner"; }
     static get encapsulation() { return "shadow"; }
@@ -35,23 +68,39 @@ export class SixSpinner {
     }
     static get properties() {
         return {
+            "logo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'six' | 'bme'",
+                    "resolved": "\"bme\" | \"six\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner."
+                },
+                "attribute": "logo",
+                "reflect": false
+            },
             "six": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates if the spinner is shown as animated SIX logo or simple spinner."
+                    "text": "**@deprecated** Use `logo=\"six\"` instead.\n\nIf set to true, the spinner displays the SIX logo."
                 },
                 "attribute": "six",
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             }
         };
     }

package/dist/collection/components/six-spinner/six-spinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-spinner.js","sourceRoot":"","sources":["../../../src/components/six-spinner/six-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;GAQG;AAMH,MAAM,OAAO,UAAU;;~~mBAEP~~,~~KAAK;;IAEX~~,~~aAAa~~;~~QACnB~~,OAAO,CACL,YAAM,KAAK,EAAC,aAAa,eAAW,MAAM,eAAW,QAAQ;YAC3D,WAAK,KAAK,EAAC,wBAAwB;~~gBACjC~~,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK;~~oBACjC~~,YACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,EACtB,CAAC,EAAC,mHAAmH,GAC/G,CACJ,~~CACF~~,~~CACD~~,~~CACR~~,CAAC;~~IACJ~~,CAAC;~~IAEO~~,~~YAAY~~;~~QAClB~~,OAAO,YAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,eAAW,MAAM,eAAW,QAAQ,GAAG,CAAC;IAClF,CAAC;IAED,MAAM;QACJ,~~OAAO~~,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,~~YAAY~~,EAAE,CAAC;~~IAC/D~~,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, h, Prop } 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 @part base - The component's base wrapper.\n * @part svg - The spinner icon\n /\n@Component({\n tag: 'six-spinner',\n styleUrl: 'six-spinner.scss',\n shadow: true,\n})\nexport class SixSpinner {\n /* Indicates if the spinner is shown as animated SIX logo or simple spinner. */\n @Prop() six = ~~false~~;\n\n private ~~renderSIXLogo~~() {\n return (\n <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n <div class=\"six-spinner__container\">\n <svg viewBox=\"0 0 40 40\" part=\"svg\">\n <path\n fill=\"none\"\n stroke=\"#de3919\"\n stroke-width=\"5\"\n stroke-linecap=\"round\"\n d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\"\n ></path>\n </svg>\n ~~</div~~>\n </~~span~~>\n );\n }\n\n private ~~renderSimple~~() {\n return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n }\n\n render() {\n ~~return~~ this.six ? this.renderSIXLogo() : this.~~renderSimple~~();\n }\n}\n"]}
1	+ {"version":3,"file":"six-spinner.js","sourceRoot":"","sources":["../../../src/components/six-spinner/six-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;GAQG;AAMH,MAAM,OAAO,UAAU;;;;;IAUrB;;OAEG;IACK,aAAa,CAAC,OAAmB;QACvC,OAAO,CACL,YAAM,KAAK,EAAC,aAAa,eAAW,MAAM,eAAW,QAAQ;YAC3D,WAAK,KAAK,EAAC,wBAAwB,IAAE,OAAO,CAAO,CAC9C,CACR,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,aAAa;QACnB,MAAM,OAAO,GAAG,CACd,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK;YACjC,YACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,EACtB,CAAC,EAAC,mHAAmH,GAC/G,CACJ,CACP,CAAC;QACF,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED;;OAEG;IACK,aAAa;QACnB,MAAM,OAAO,GAAG,CACd,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK;YACjC,eACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,OAAO,kBACD,GAAG,oBACD,OAAO,EACtB,MAAM,EAAC,6GAA6G,GACpH;YACF,eACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,OAAO,kBACD,GAAG,oBACD,OAAO,EACtB,MAAM,EAAC,4DAA4D,GACnE;YACF,eACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,OAAO,kBACD,GAAG,oBACD,OAAO,EACtB,MAAM,EAAC,yDAAyD,GAChE,CACE,CACP,CAAC;QACF,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED;;OAEG;IACK,mBAAmB;QACzB,OAAO,YAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,eAAW,MAAM,eAAW,QAAQ,GAAG,CAAC;IAClF,CAAC;IAED,MAAM;QACJ,4CAA4C;QAC5C,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,OAAO,CAAC,IAAI,CAAC,2DAA2D,CAAC,CAAC;YAC1E,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;QAC9B,CAAC;QAED,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;YAC9B,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;YAC9B;gBACE,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACtC,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } 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 @part base - The component's base wrapper.\n * @part svg - The spinner icon.\n /\n@Component({\n tag: 'six-spinner',\n styleUrl: 'six-spinner.scss',\n shadow: true,\n})\nexport class SixSpinner {\n /* Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner. /\n @Prop() logo?: 'six' \| 'bme';\n /\n @deprecated Use `logo=\"six\"` instead.\n \n If set to true, the spinner displays the SIX logo.\n /\n @Prop() six?: boolean;\n\n /\n Renders a container with a given SVG content.\n /\n private renderWrapper(content: SVGElement) {\n return (\n <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n <div class=\"six-spinner__container\">{content}</div>\n </span>\n );\n }\n\n /\n Renders the SIX logo spinner.\n /\n private renderSIXLogo() {\n const sixLogo = (\n <svg viewBox=\"0 0 40 40\" part=\"svg\">\n <path\n fill=\"none\"\n stroke=\"#de3919\"\n stroke-width=\"5\"\n stroke-linecap=\"round\"\n d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\"\n ></path>\n </svg>\n );\n return this.renderWrapper(sixLogo);\n }\n\n /\n Renders the BME logo spinner.\n /\n private renderBMELogo() {\n const bmeLogo = (\n <svg viewBox=\"0 0 45 55\" part=\"svg\">\n <polygon\n fill=\"none\"\n stroke=\"black\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n points=\"4.42 51.96 17.02 31.473 2 31.473 2 22.486 17.02 22.486 4.42 2 15.404 2 30.289 26.98 14.763 51.96 4.42 51.96\"\n />\n <polygon\n fill=\"none\"\n stroke=\"black\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n points=\"42 51.96 31.655 51.96 24.598 40.498 29.831 32.073 42 51.96\"\n />\n <polygon\n fill=\"none\"\n stroke=\"black\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n points=\"24.518 12.719 31.014 2 42 2 29.831 21.637 24.518 12.719\"\n />\n </svg>\n );\n return this.renderWrapper(bmeLogo);\n }\n\n /\n Renders a simple spinner.\n */\n private renderSimpleSpinner() {\n return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n }\n\n render() {\n // Check the deprecated `six` property first\n if (this.six) {\n console.warn('The \"six\" prop is deprecated. Use \"logo=\\'six\\'\" instead.');\n return this.renderSIXLogo();\n }\n\n switch (this.logo) {\n case 'six':\n return this.renderSIXLogo();\n case 'bme':\n return this.renderBMELogo();\n default:\n return this.renderSimpleSpinner();\n }\n }\n}\n"]}

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

@@ -105,12 +105,12 @@ export class SixSwitch {
         (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.blur();
     }
     render() {
-        return (h(FormControl, { 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", { part: "base", htmlFor: this.switchId, class: {
+        return (h(FormControl, { key: 'a9d3d8960bb4b343ef48002dcf53d142247c7286', 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: '6b2465842afa35dca3e8125fd113b3dcf588c00f', 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", { part: "control", class: "switch__control" }, h("span", { part: "thumb", class: "switch__thumb" }), h("input", { 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", { part: "label", id: this.labelId, class: "switch__label" }, h("slot", null)))));
+            }, onMouseDown: this.handleMouseDown }, h("span", { key: '06ec2de539168ab6f0858b177bc1bb6ec08f34da', part: "control", class: "switch__control" }, h("span", { key: '06bf28497e82ecabf745c3b5b32ccc75e0aff448', part: "thumb", class: "switch__thumb" }), h("input", { key: '0a3bd2ea0afa9001d8a54f8d489aed6d3d524c6b', 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: '44d1e734ba479497166839f4e3ff8e249bd9d3ee', part: "label", id: this.labelId, class: "switch__label" }, h("slot", { key: '78a97dcd93380f9f418c2eac1050021b7e489043' })))));
     }
     static get is() { return "six-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-switch/six-switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-switch.js","sourceRoot":"","sources":["../../../src/components/six-switch/six-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\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 switch's label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part control - The switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n /\n\n@Component({\n tag: 'six-switch',\n styleUrl: 'six-switch.scss',\n shadow: true,\n})\nexport class SixSwitch {\n private switchId = `switch-${++id}`;\n private labelId = `switch-label-${id}`;\n private errorTextId = `input-error-text-${id}`;\n\n private inputElement?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixSwitchElement;\n\n @State() hasFocus = false;\n @State() hasErrorTextSlot = false;\n\n /* The switch's name attribute. /\n @Prop() name = '';\n\n /* The switch's value attribute. /\n @Prop() value = 'on';\n\n /* Set to true to disable the switch. /\n @Prop() disabled = false;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* Set to true to draw the switch in a checked state. /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n @Watch('checked')\n handleCheckedChange() {\n if (this.inputElement != null) {\n this.inputElement.checked = this.checked;\n this.checked = this.inputElement.checked;\n }\n }\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-switch-blur' }) sixBlur!: EventEmitter<boolean>;\n\n /* Emitted when the control's checked state changes. /\n @Event({ eventName: 'six-switch-change' }) sixChange!: EventEmitter<boolean>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-switch-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-switch-change', 'change', this.host);\n this.eventListeners.forward('six-switch-blur', 'blur', this.host);\n this.eventListeners.forward('six-switch-focus', 'focus', this.host);\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n private handleSlotChange = () => {\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n /* Sets focus on the switch. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.inputElement?.focus(options);\n }\n\n /* Removes focus from the switch. */\n @Method()\n async removeFocus() {\n this.inputElement?.blur();\n }\n\n private handleClick = () => {\n if (this.inputElement != null) {\n this.checked = this.inputElement.checked;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit(this.checked);\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.checked = false;\n this.sixChange.emit(this.checked);\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n this.checked = true;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.inputElement?.focus();\n };\n\n render() {\n return (\n <FormControl\n inputId={this.switchId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={false}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <label\n part=\"base\"\n htmlFor={this.switchId}\n class={{\n switch: true,\n 'switch--checked': this.checked,\n 'switch--disabled': this.disabled,\n 'switch--focused': this.hasFocus,\n }}\n onMouseDown={this.handleMouseDown}\n >\n <span part=\"control\" class=\"switch__control\">\n <span part=\"thumb\" class=\"switch__thumb\" />\n\n <input\n ref={(el) => (this.inputElement = el)}\n id={this.switchId}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n role=\"switch\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onClick={this.handleClick}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n />\n </span>\n\n <span part=\"label\" id={this.labelId} class=\"switch__label\">\n <slot />\n </span>\n </label>\n </FormControl>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-switch.js","sourceRoot":"","sources":["../../../src/components/six-switch/six-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\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 switch's label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part control - The switch control.\n * @part thumb - The switch position indicator.\n * @part label - The switch label.\n /\n\n@Component({\n tag: 'six-switch',\n styleUrl: 'six-switch.scss',\n shadow: true,\n})\nexport class SixSwitch {\n private switchId = `switch-${++id}`;\n private labelId = `switch-label-${id}`;\n private errorTextId = `input-error-text-${id}`;\n\n private inputElement?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixSwitchElement;\n\n @State() hasFocus = false;\n @State() hasErrorTextSlot = false;\n\n /* The switch's name attribute. /\n @Prop() name = '';\n\n /* The switch's value attribute. /\n @Prop() value = 'on';\n\n /* Set to true to disable the switch. /\n @Prop() disabled = false;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* Set to true to draw the switch in a checked state. /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n @Watch('checked')\n handleCheckedChange() {\n if (this.inputElement != null) {\n this.inputElement.checked = this.checked;\n this.checked = this.inputElement.checked;\n }\n }\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-switch-blur' }) sixBlur!: EventEmitter<boolean>;\n\n /* Emitted when the control's checked state changes. /\n @Event({ eventName: 'six-switch-change' }) sixChange!: EventEmitter<boolean>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-switch-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-switch-change', 'change', this.host);\n this.eventListeners.forward('six-switch-blur', 'blur', this.host);\n this.eventListeners.forward('six-switch-focus', 'focus', this.host);\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n private handleSlotChange = () => {\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n /* Sets focus on the switch. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.inputElement?.focus(options);\n }\n\n /* Removes focus from the switch. */\n @Method()\n async removeFocus() {\n this.inputElement?.blur();\n }\n\n private handleClick = () => {\n if (this.inputElement != null) {\n this.checked = this.inputElement.checked;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit(this.checked);\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n this.checked = false;\n this.sixChange.emit(this.checked);\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n this.checked = true;\n this.sixChange.emit(this.checked);\n }\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.inputElement?.focus();\n };\n\n render() {\n return (\n <FormControl\n inputId={this.switchId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={false}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size=\"medium\"\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <label\n part=\"base\"\n htmlFor={this.switchId}\n class={{\n switch: true,\n 'switch--checked': this.checked,\n 'switch--disabled': this.disabled,\n 'switch--focused': this.hasFocus,\n }}\n onMouseDown={this.handleMouseDown}\n >\n <span part=\"control\" class=\"switch__control\">\n <span part=\"thumb\" class=\"switch__thumb\" />\n\n <input\n ref={(el) => (this.inputElement = el)}\n id={this.switchId}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n role=\"switch\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onClick={this.handleClick}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n />\n </span>\n\n <span part=\"label\" id={this.labelId} class=\"switch__label\">\n <slot />\n </span>\n </label>\n </FormControl>\n );\n }\n}\n"]}

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

@@ -41,7 +41,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, { id: this.host.id || this.componentId }, h("div", { part: "base", ref: (el) => (this.tab = el), class: {
+        h(Host, { key: '1d9448f852c5350d3cb627647ffc3466f7281298', id: this.host.id || this.componentId }, h("div", { key: 'cc330a70be98dbdccdb89e1c5b035cb2bc761dbd', part: "base", ref: (el) => (this.tab = el), class: {
                 tab: true,
                 // Placements
                 'tab--top': placement === 'top',
@@ -52,7 +52,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", null), this.closable && (h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { class: {
+            }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h("slot", { key: '4551c8b03d17a513c95734f648536e9cae077d33' }), this.closable && (h("six-icon-button", { key: '8ac44e41d48ae15e0ba57c0965f0c98df1d12b30', name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: 'a138cc0729964dc801f620a48513b312874a36fb', part: this.active ? 'active-tab-indicator' : '', class: {
                 tab__indicator: true,
                 'tab__indicator--active': this.active,
                 // Placements

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

	@@ -1 +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;;QACT,gBAAW,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC;qBAMH,EAAE;sBAGD,KAAK;wBAGpB,KAAK;wBAGY,KAAK;;IAKzC,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,~~IAAC~~,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW;YACxC,~~WACE~~,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,~~eAAQ~~;gBACP,IAAI,CAAC,QAAQ,IAAI,CAChB,~~uBACE~~,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,~~WACE~~,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 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"]}
1	+ {"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 >\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.js CHANGED Viewed

@@ -84,7 +84,8 @@ export class SixTabGroup {
                 behavior: 'smooth',
             });
         };
-        this.hasScrollControls = false;
+        this.hasLeftControl = false;
+        this.hasRightControl = false;
         this.placement = 'top';
         this.noScrollControls = false;
     }
@@ -106,6 +107,13 @@ export class SixTabGroup {
         this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());
         this.resizeObserver.observe(this.nav);
         requestAnimationFrame(() => this.updateScrollControls());
+        this.nav.addEventListener('scroll', () => {
+            if (this.nav == null) {
+                return;
+            }
+            this.hasRightControl = this.calculateRightControlVisibility();
+            this.hasLeftControl = this.calculateLeftControlVisibility();
+        });
         // Update aria labels if the DOM changes
         this.mutationObserver = new MutationObserver((mutations) => {
             if (mutations.some((mutation) => {
@@ -153,12 +161,29 @@ export class SixTabGroup {
     getActiveTab() {
         return this.getAllTabs().find((el) => el.active);
     }
+    calculateRightControlVisibility() {
+        var _a, _b, _c;
+        if (this.nav == null) {
+            return false;
+        }
+        return Math.abs((_a = this.nav) === null || _a === void 0 ? void 0 : _a.scrollLeft) + ((_b = this.nav) === null || _b === void 0 ? void 0 : _b.clientWidth) < ((_c = this.nav) === null || _c === void 0 ? void 0 : _c.scrollWidth) - 1;
+    }
+    calculateLeftControlVisibility() {
+        var _a;
+        if (this.nav == null) {
+            return false;
+        }
+        return Math.abs((_a = this.nav) === null || _a === void 0 ? void 0 : _a.scrollLeft) > 0;
+    }
     updateScrollControls() {
         if (this.nav == null)
             return;
-        this.hasScrollControls = this.noScrollControls
+        this.hasRightControl = this.noScrollControls
+            ? false
+            : ['top', 'bottom'].includes(this.placement) && this.calculateRightControlVisibility();
+        this.hasLeftControl = this.noScrollControls
             ? false
-            : ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
+            : ['top', 'bottom'].includes(this.placement) && this.calculateLeftControlVisibility();
     }
     setActiveTab(tab, emitEvents = true) {
         var _a, _b, _c;
@@ -201,15 +226,15 @@ export class SixTabGroup {
         });
     }
     render() {
-        return (h("div", { part: "base", ref: (el) => (this.tabGroup = el), class: {
+        return (h("div", { key: '9752b81f3babdcbe656cc5552b7c07c7cc096d8d', part: "base", ref: (el) => (this.tabGroup = el), class: {
                 'tab-group': true,
                 // Placements
                 'tab-group--top': this.placement === 'top',
                 'tab-group--bottom': this.placement === 'bottom',
                 'tab-group--left': this.placement === 'left',
                 'tab-group--right': this.placement === 'right',
-                'tab-group--has-scroll-controls': this.hasScrollControls,
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "tab-group__nav-container" }, this.hasScrollControls && (h("six-icon-button", { 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", { ref: (el) => (this.tabs = el), part: "tabs", class: "tab-group__tabs", role: "tablist" }, h("slot", { name: "nav" }))), this.hasScrollControls && (h("six-icon-button", { class: "tab-group__scroll-button tab-group__scroll-button--right", exportparts: "base:scroll-button", name: "chevron_right", onClick: this.handleScrollRight }))), h("div", { ref: (el) => (this.body = el), part: "body", class: "tab-group__body" }, h("slot", null))));
+                'tab-group--has-scroll-controls': this.hasRightControl || this.hasLeftControl,
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'd96c9094ddc1a9cd6ad9ac9c5ab559ac703ccd6e', class: "tab-group__nav-container" }, this.hasLeftControl && (h("six-icon-button", { key: '0e355b7d602b3178a5c99a818780fef140119f81', 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: 'dce5e155787ddc97e00d285dc76f3b502b46b35f', ref: (el) => (this.tabs = el), part: "tabs", class: "tab-group__tabs", role: "tablist" }, h("slot", { key: 'dfcc4786a1273194d6769438b47b42543806ff14', name: "nav" }))), this.hasRightControl && (h("six-icon-button", { key: '3c4b965f9beb5229b702e808cfabbb99e7e577a4', class: "tab-group__scroll-button tab-group__scroll-button--right", exportparts: "base:scroll-button", name: "chevron_right", onClick: this.handleScrollRight }))), h("div", { key: 'b4dd8c577928e1b67c7307f40c37360dc5faa76a', ref: (el) => (this.body = el), part: "body", class: "tab-group__body" }, h("slot", { key: '0e0f770235bfb838d1994db5dbf3504c66749e8e' }))));
     }
     static get is() { return "six-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -265,7 +290,8 @@ export class SixTabGroup {
     }
     static get states() {
         return {
-            "hasScrollControls": {}
+            "hasLeftControl": {},
+            "hasRightControl": {}
         };
     }
     static get events() {