@siemens/ix 3.0.0-alpha.3 → 3.0.0-alpha.4

package/dist/collection/components/avatar/avatar.js

@@ -77,6 +77,7 @@ export class Avatar {
         return {
             "image": {
                 "type": "string",
+                "attribute": "image",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -91,11 +92,11 @@ export class Avatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image",
                 "reflect": false
             },
             "initials": {
                 "type": "string",
+                "attribute": "initials",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -110,11 +111,11 @@ export class Avatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "initials",
                 "reflect": false
             },
             "username": {
                 "type": "string",
+                "attribute": "username",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -132,11 +133,11 @@ export class Avatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "username",
                 "reflect": false
             },
             "extra": {
                 "type": "string",
+                "attribute": "extra",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -154,7 +155,6 @@ export class Avatar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "extra",
                 "reflect": false
             }
         };

package/dist/collection/components/basic-navigation/basic-navigation.js

@@ -98,6 +98,7 @@ export class BasicNavigation {
         return {
             "applicationName": {
                 "type": "string",
+                "attribute": "application-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -112,11 +113,11 @@ export class BasicNavigation {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "application-name",
                 "reflect": false
             },
             "hideHeader": {
                 "type": "boolean",
+                "attribute": "hide-header",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -131,12 +132,12 @@ export class BasicNavigation {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-header",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "forceBreakpoint": {
                 "type": "string",
+                "attribute": "force-breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "Breakpoint | undefined",
@@ -157,11 +158,11 @@ export class BasicNavigation {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "force-breakpoint",
                 "reflect": false
             },
             "breakpoints": {
                 "type": "unknown",
+                "attribute": "breakpoints",
                 "mutable": false,
                 "complexType": {
                     "original": "Breakpoint[]",

package/dist/collection/components/basic-navigation/basic-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"basic-navigation.js","sourceRoot":"","sources":["../../../src/components/basic-navigation/basic-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  shadow: true,\n})\nexport class BasicNavigation {\n  @Element() hostElement!: HTMLIxBasicNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName?: string;\n\n  /**\n   * Hide application header. Will disable responsive feature of basic navigation.\n   */\n  @Prop() hideHeader = false;\n  @Watch('hideHeader')\n  onHideHeaderChange() {\n    this.contextProvider?.emit({\n      hideHeader: this.hideHeader,\n      host: 'basic-navigation',\n    });\n\n    this.breakpoint = applicationLayoutService.breakpoint;\n  }\n\n  /**\n   * Change the responsive layout of the menu structure\n   */\n  @Prop() forceBreakpoint: Breakpoint | undefined;\n  forceLayoutChange(newMode: Breakpoint | undefined) {\n    if (!newMode) {\n      applicationLayoutService.enableBreakpointDetection();\n      return;\n    }\n\n    applicationLayoutService.disableBreakpointDetection();\n    applicationLayoutService.setBreakpoint(newMode);\n  }\n\n  /**\n   * Supported layouts\n   * @example ['sm', 'md']\n   */\n  @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  @Watch('breakpoints')\n  onBreakpointsChange(breakpoints: Breakpoint[]) {\n    applicationLayoutService.setBreakpoints(breakpoints);\n  }\n\n  @State() breakpoint: Breakpoint = 'lg';\n\n  get menu(): HTMLIxMenuElement | null {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable?: Disposable;\n  private contextProvider?: ContextProvider<typeof ApplicationLayoutContext>;\n\n  private onContentClick() {\n    if (menuController.isPinned) {\n      return;\n    }\n    this.menu?.toggleMenu(false);\n  }\n\n  componentWillLoad() {\n    applicationLayoutService.setBreakpoints(this.breakpoints);\n\n    this.contextProvider = useContextProvider(\n      this.hostElement,\n      ApplicationLayoutContext,\n      {\n        hideHeader: this.hideHeader,\n        host: 'basic-navigation',\n      }\n    );\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      this.breakpoint = mode;\n    });\n    this.breakpoint = applicationLayoutService.breakpoint;\n\n    if (this.forceBreakpoint) {\n      this.forceLayoutChange(this.forceBreakpoint);\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName}>\n            <slot name=\"logo\" slot=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div class=\"navigation-content\">\n          <slot name=\"menu\"></slot>\n          <div class=\"content\" onClick={() => this.onContentClick()}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"basic-navigation.js","sourceRoot":"","sources":["../../../src/components/basic-navigation/basic-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  shadow: true,\n})\nexport class BasicNavigation {\n  @Element() hostElement!: HTMLIxBasicNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName?: string;\n\n  /**\n   * Hide application header. Will disable responsive feature of basic navigation.\n   */\n  @Prop() hideHeader = false;\n  @Watch('hideHeader')\n  onHideHeaderChange() {\n    this.contextProvider?.emit({\n      hideHeader: this.hideHeader,\n      host: 'basic-navigation',\n    });\n\n    this.breakpoint = applicationLayoutService.breakpoint;\n  }\n\n  /**\n   * Change the responsive layout of the menu structure\n   */\n  @Prop() forceBreakpoint: Breakpoint | undefined;\n  forceLayoutChange(newMode: Breakpoint | undefined) {\n    if (!newMode) {\n      applicationLayoutService.enableBreakpointDetection();\n      return;\n    }\n\n    applicationLayoutService.disableBreakpointDetection();\n    applicationLayoutService.setBreakpoint(newMode);\n  }\n\n  /**\n   * Supported layouts\n   * @example ['sm', 'md']\n   */\n  @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  @Watch('breakpoints')\n  onBreakpointsChange(breakpoints: Breakpoint[]) {\n    applicationLayoutService.setBreakpoints(breakpoints);\n  }\n\n  @State() breakpoint: Breakpoint = 'lg';\n\n  get menu(): HTMLIxMenuElement | null {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable?: Disposable;\n  private contextProvider?: ContextProvider<typeof ApplicationLayoutContext>;\n\n  private onContentClick() {\n    if (menuController.isPinned) {\n      return;\n    }\n    this.menu?.toggleMenu(false);\n  }\n\n  componentWillLoad() {\n    applicationLayoutService.setBreakpoints(this.breakpoints);\n\n    this.contextProvider = useContextProvider(\n      this.hostElement,\n      ApplicationLayoutContext,\n      {\n        hideHeader: this.hideHeader,\n        host: 'basic-navigation',\n      }\n    );\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      this.breakpoint = mode;\n    });\n    this.breakpoint = applicationLayoutService.breakpoint;\n\n    if (this.forceBreakpoint) {\n      this.forceLayoutChange(this.forceBreakpoint);\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName}>\n            <slot name=\"logo\" slot=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div class=\"navigation-content\">\n          <slot name=\"menu\"></slot>\n          <div class=\"content\" onClick={() => this.onContentClick()}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/blind/blind.js

@@ -105,6 +105,7 @@ export class Blind {
         return {
             "collapsed": {
                 "type": "boolean",
+                "attribute": "collapsed",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -119,12 +120,12 @@ export class Blind {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "collapsed",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -139,11 +140,11 @@ export class Blind {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "sublabel": {
                 "type": "string",
+                "attribute": "sublabel",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -161,11 +162,11 @@ export class Blind {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sublabel",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -183,11 +184,11 @@ export class Blind {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "BlindVariant",
@@ -211,7 +212,6 @@ export class Blind {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'filled'"
             }

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -125,6 +125,7 @@ export class Breadcrumb {
         return {
             "visibleItemCount": {
                 "type": "number",
+                "attribute": "visible-item-count",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -139,12 +140,12 @@ export class Breadcrumb {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "visible-item-count",
                 "reflect": false,
                 "defaultValue": "9"
             },
             "nextItems": {
                 "type": "unknown",
+                "attribute": "next-items",
                 "mutable": false,
                 "complexType": {
                     "original": "string[]",
@@ -163,6 +164,7 @@ export class Breadcrumb {
             },
             "ghost": {
                 "type": "boolean",
+                "attribute": "ghost",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -177,12 +179,12 @@ export class Breadcrumb {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "ghost",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "ariaLabelPreviousButton": {
                 "type": "string",
+                "attribute": "aria-label-previous-button",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -200,7 +202,6 @@ export class Breadcrumb {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria-label-previous-button",
                 "reflect": false,
                 "defaultValue": "'previous'"
             }

package/dist/collection/components/breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { makeRef } from '../utils/make-ref';\n\nlet sequenceId = 0;\nconst createId = (prefix: string = 'breadcrumb-') => {\n  return `${prefix}-${sequenceId++}`;\n};\n\n@Component({\n  tag: 'ix-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true,\n})\nexport class Breadcrumb {\n  @Element() hostElement!: HTMLIxBreadcrumbElement;\n\n  /**\n   * Excess items will get hidden inside of dropdown\n   */\n  @Prop() visibleItemCount = 9;\n\n  /**\n   * Items will be accessible through a dropdown\n   */\n  @Prop() nextItems: string[] = [];\n  @Watch('nextItems')\n  onNextItemsChange() {\n    this.onChildMutation();\n  }\n\n  /**\n   * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n   */\n  @Prop() ghost = true;\n\n  /**\n   * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\n   * with conditionally hidden previous items\n   *\n   * @since 2.0.0\n   */\n  @Prop() ariaLabelPreviousButton = 'previous';\n\n  /**\n   * Crumb item clicked event\n   */\n  @Event() itemClick!: EventEmitter<string>;\n\n  /**\n   * Next item clicked event\n   */\n  @Event() nextClick!: EventEmitter<{ event: UIEvent; item: string }>;\n\n  private readonly previousButtonRef = makeRef<HTMLIxBreadcrumbItemElement>();\n  private readonly nextButtonRef = makeRef<HTMLElement>();\n\n  @State() items: HTMLIxBreadcrumbItemElement[] = [];\n  @State() isPreviousDropdownExpanded = false;\n\n  private mutationObserver?: MutationObserver;\n\n  private previousButtonId = createId();\n  private previousDropdownId = createId();\n\n  private onItemClick(item: string) {\n    this.itemClick.emit(item);\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = createMutationObserver(() =>\n      this.onChildMutation()\n    );\n\n    this.mutationObserver.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.onChildMutation();\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private async onChildMutation() {\n    const updatedItems = this.getItems();\n\n    updatedItems.forEach((bc, index) => {\n      const shouldShowDropdown =\n        this.nextItems.length !== 0 && updatedItems.length - 1 === index;\n\n      bc.ghost = this.ghost;\n      bc.showChevron = updatedItems.length - 1 !== index || shouldShowDropdown;\n      bc.isDropdownTrigger = shouldShowDropdown;\n\n      if (shouldShowDropdown) {\n        this.nextButtonRef(bc);\n      }\n\n      if (updatedItems.length < this.visibleItemCount) {\n        return;\n      }\n\n      bc.visible = index >= updatedItems.length - this.visibleItemCount;\n    });\n\n    this.items = updatedItems;\n  }\n\n  private getItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    return (\n      <Host>\n        <ix-dropdown\n          id={this.previousDropdownId}\n          aria-label={this.ariaLabelPreviousButton}\n          trigger={\n            this.items?.length > this.visibleItemCount\n              ? this.previousButtonRef.waitForCurrent()\n              : undefined\n          }\n          onShowChanged={({ detail }) => {\n            this.isPreviousDropdownExpanded = detail;\n\n            const previousButton = this.hostElement.shadowRoot!.getElementById(\n              this.previousButtonId\n            );\n\n            // Need to force update previous button to change `aria-expanded`\n            if (previousButton) {\n              forceUpdate(previousButton);\n            }\n          }}\n        >\n          {this.items\n            .slice(0, this.items.length - this.visibleItemCount)\n            .map((item) => {\n              const label = item.label ?? item.innerText;\n\n              return (\n                <ix-dropdown-item\n                  label={label}\n                  onClick={() => {\n                    this.onItemClick(label);\n                  }}\n                  onItemClick={(event) => event.stopPropagation()}\n                ></ix-dropdown-item>\n              );\n            })}\n        </ix-dropdown>\n        {this.items?.length > this.visibleItemCount ? (\n          <ix-breadcrumb-item\n            id={this.previousButtonId}\n            ref={this.previousButtonRef}\n            label=\"...\"\n            tabIndex={1}\n            onItemClick={(event) => event.stopPropagation()}\n            aria-describedby={this.previousDropdownId}\n            aria-controls={this.previousDropdownId}\n            aria-expanded={a11yBoolean(this.isPreviousDropdownExpanded)}\n            class={'previous-button'}\n          ></ix-breadcrumb-item>\n        ) : null}\n        <nav\n          class=\"crumb-items\"\n          aria-label={a11y['aria-label'] ?? 'breadcrumbs'}\n        >\n          <ol>\n            <slot></slot>\n          </ol>\n        </nav>\n        <ix-dropdown trigger={this.nextButtonRef.waitForCurrent()}>\n          {this.nextItems?.map((item) => (\n            <ix-dropdown-item\n              label={item}\n              onClick={(e) => {\n                this.nextClick.emit({\n                  event: e,\n                  item,\n                });\n              }}\n              onItemClick={(event) => event.stopPropagation()}\n            ></ix-dropdown-item>\n          ))}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { makeRef } from '../utils/make-ref';\n\nlet sequenceId = 0;\nconst createId = (prefix: string = 'breadcrumb-') => {\n  return `${prefix}-${sequenceId++}`;\n};\n\n@Component({\n  tag: 'ix-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true,\n})\nexport class Breadcrumb {\n  @Element() hostElement!: HTMLIxBreadcrumbElement;\n\n  /**\n   * Excess items will get hidden inside of dropdown\n   */\n  @Prop() visibleItemCount = 9;\n\n  /**\n   * Items will be accessible through a dropdown\n   */\n  @Prop() nextItems: string[] = [];\n  @Watch('nextItems')\n  onNextItemsChange() {\n    this.onChildMutation();\n  }\n\n  /**\n   * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n   */\n  @Prop() ghost = true;\n\n  /**\n   * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\n   * with conditionally hidden previous items\n   *\n   * @since 2.0.0\n   */\n  @Prop() ariaLabelPreviousButton = 'previous';\n\n  /**\n   * Crumb item clicked event\n   */\n  @Event() itemClick!: EventEmitter<string>;\n\n  /**\n   * Next item clicked event\n   */\n  @Event() nextClick!: EventEmitter<{ event: UIEvent; item: string }>;\n\n  private readonly previousButtonRef = makeRef<HTMLIxBreadcrumbItemElement>();\n  private readonly nextButtonRef = makeRef<HTMLElement>();\n\n  @State() items: HTMLIxBreadcrumbItemElement[] = [];\n  @State() isPreviousDropdownExpanded = false;\n\n  private mutationObserver?: MutationObserver;\n\n  private previousButtonId = createId();\n  private previousDropdownId = createId();\n\n  private onItemClick(item: string) {\n    this.itemClick.emit(item);\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = createMutationObserver(() =>\n      this.onChildMutation()\n    );\n\n    this.mutationObserver.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.onChildMutation();\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private async onChildMutation() {\n    const updatedItems = this.getItems();\n\n    updatedItems.forEach((bc, index) => {\n      const shouldShowDropdown =\n        this.nextItems.length !== 0 && updatedItems.length - 1 === index;\n\n      bc.ghost = this.ghost;\n      bc.showChevron = updatedItems.length - 1 !== index || shouldShowDropdown;\n      bc.isDropdownTrigger = shouldShowDropdown;\n\n      if (shouldShowDropdown) {\n        this.nextButtonRef(bc);\n      }\n\n      if (updatedItems.length < this.visibleItemCount) {\n        return;\n      }\n\n      bc.visible = index >= updatedItems.length - this.visibleItemCount;\n    });\n\n    this.items = updatedItems;\n  }\n\n  private getItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    return (\n      <Host>\n        <ix-dropdown\n          id={this.previousDropdownId}\n          aria-label={this.ariaLabelPreviousButton}\n          trigger={\n            this.items?.length > this.visibleItemCount\n              ? this.previousButtonRef.waitForCurrent()\n              : undefined\n          }\n          onShowChanged={({ detail }) => {\n            this.isPreviousDropdownExpanded = detail;\n\n            const previousButton = this.hostElement.shadowRoot!.getElementById(\n              this.previousButtonId\n            );\n\n            // Need to force update previous button to change `aria-expanded`\n            if (previousButton) {\n              forceUpdate(previousButton);\n            }\n          }}\n        >\n          {this.items\n            .slice(0, this.items.length - this.visibleItemCount)\n            .map((item) => {\n              const label = item.label ?? item.innerText;\n\n              return (\n                <ix-dropdown-item\n                  label={label}\n                  onClick={() => {\n                    this.onItemClick(label);\n                  }}\n                  onItemClick={(event) => event.stopPropagation()}\n                ></ix-dropdown-item>\n              );\n            })}\n        </ix-dropdown>\n        {this.items?.length > this.visibleItemCount ? (\n          <ix-breadcrumb-item\n            id={this.previousButtonId}\n            ref={this.previousButtonRef}\n            label=\"...\"\n            tabIndex={1}\n            onItemClick={(event) => event.stopPropagation()}\n            aria-describedby={this.previousDropdownId}\n            aria-controls={this.previousDropdownId}\n            aria-expanded={a11yBoolean(this.isPreviousDropdownExpanded)}\n            class={'previous-button'}\n          ></ix-breadcrumb-item>\n        ) : null}\n        <nav\n          class=\"crumb-items\"\n          aria-label={a11y['aria-label'] ?? 'breadcrumbs'}\n        >\n          <ol>\n            <slot></slot>\n          </ol>\n        </nav>\n        <ix-dropdown trigger={this.nextButtonRef.waitForCurrent()}>\n          {this.nextItems?.map((item) => (\n            <ix-dropdown-item\n              label={item}\n              onClick={(e) => {\n                this.nextClick.emit({\n                  event: e,\n                  item,\n                });\n              }}\n              onItemClick={(event) => event.stopPropagation()}\n            ></ix-dropdown-item>\n          ))}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/breadcrumb-item/breadcrumb-item.js

@@ -83,6 +83,7 @@ export class BreadcrumbItem {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -97,11 +98,11 @@ export class BreadcrumbItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -116,11 +117,11 @@ export class BreadcrumbItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "ghost": {
                 "type": "boolean",
+                "attribute": "ghost",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -138,12 +139,12 @@ export class BreadcrumbItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "ghost",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "visible": {
                 "type": "boolean",
+                "attribute": "visible",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -161,12 +162,12 @@ export class BreadcrumbItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "visible",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "showChevron": {
                 "type": "boolean",
+                "attribute": "show-chevron",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -184,12 +185,12 @@ export class BreadcrumbItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-chevron",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "isDropdownTrigger": {
                 "type": "boolean",
+                "attribute": "is-dropdown-trigger",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -207,7 +208,6 @@ export class BreadcrumbItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "is-dropdown-trigger",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/button/button.js

@@ -113,6 +113,7 @@ export class Button {
         return {
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonVariant",
@@ -136,12 +137,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'primary'"
             },
             "outline": {
                 "type": "boolean",
+                "attribute": "outline",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -156,12 +157,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "outline",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "ghost": {
                 "type": "boolean",
+                "attribute": "ghost",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -176,12 +177,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "ghost",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -196,12 +197,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'button' | 'submit'",
@@ -216,12 +217,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'button'"
             },
             "loading": {
                 "type": "boolean",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -239,12 +240,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -259,11 +260,11 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "alignment": {
                 "type": "string",
+                "attribute": "alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "'center' | 'start'",
@@ -281,12 +282,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "alignment",
                 "reflect": false,
                 "defaultValue": "'center'"
             },
             "iconSize": {
                 "type": "string",
+                "attribute": "icon-size",
                 "mutable": false,
                 "complexType": {
                     "original": "'12' | '16' | '24'",
@@ -304,7 +305,6 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-size",
                 "reflect": false,
                 "defaultValue": "'24'"
             }

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

@@ -35,6 +35,7 @@ export class Card {
         return {
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "CardVariant",
@@ -55,12 +56,12 @@ export class Card {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'outline'"
             },
             "selected": {
                 "type": "boolean",
+                "attribute": "selected",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -78,7 +79,6 @@ export class Card {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -72,6 +72,7 @@ export class CardAccordion {
         return {
             "collapse": {
                 "type": "boolean",
+                "attribute": "collapse",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -89,7 +90,6 @@ export class CardAccordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "collapse",
                 "reflect": false,
                 "defaultValue": "false"
             }