@infineon/infineon-design-system-stencil 39.4.3 → 39.4.4--canary.2130.4e289d5eee4c0769b9458514c7fb228750796ed6.0

package/dist/components/ifx-action-list-item.js.map

@@ -1 +1 @@
-{"file":"ifx-action-list-item.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/action-list/action-list-item.scss?tag=ifx-action-list-item&encapsulation=shadow","src/components/action-list/action-list-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.action-list-item {\n  display: flex;\n  align-items: center;\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n  background: tokens.$ifxColorBaseWhite;\n  transition: background-color 0.2s ease;\n  cursor: default;\n\n  &--clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-list-item--disabled) {\n      background: tokens.$ifxColorEngineering100;\n    }\n\n    &:focus:not(.action-list-item--disabled) {\n      outline: none;\n      //outline: 2px solid tokens.$ifxColorOcean500;\n      //outline-offset: -2px;\n      background: tokens.$ifxColorEngineering100;\n    }\n\n    &:active:not(.action-list-item--disabled) {\n      background: tokens.$ifxColorEngineering200;\n    }\n  }\n\n  &--disabled {\n    // Apply disabled color to all slotted icons\n    ::slotted(ifx-icon) {\n      color: tokens.$ifxColorEngineering300;\n    }\n\n    // Also apply to nested icons within slotted elements\n    ::slotted(*) {\n      ifx-icon {\n        color: tokens.$ifxColorEngineering300;\n      }\n    }\n  }\n\n  &__leading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: tokens.$ifxSpace200;\n    flex-shrink: 0;\n  }\n\n  &__content {\n    flex: 1;\n    min-width: 0; // Allows text to truncate\n  }\n\n  &__title {\n    font-weight: tokens.$ifxFontWeightSemibold;\n    font-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n    color: tokens.$ifxColorBaseBlack;\n\n    // Truncate long titles\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    // Disabled state\n    .action-list-item--disabled & {\n      color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &__description {\n    font-size: tokens.$ifxFontSizeS;\n    line-height: tokens.$ifxLineHeightS;\n    color: tokens.$ifxColorEngineering500;\n    margin-top: tokens.$ifxSpace25;\n\n    // Disabled state\n    .action-list-item--disabled & {\n      color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &__trailing {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-left: tokens.$ifxSpace200;\n    flex-shrink: 0;\n    gap: 16px;\n  }\n}","import { Component, h, Prop, Element, Event, EventEmitter, Watch } from '@stencil/core';\nimport classNames from 'classnames';\n\nexport interface ActionListItemClickEvent {\n  value?: string;\n  href?: string;\n  target?: string;\n  component?: ActionListItem;\n}\n\n@Component({\n  tag: 'ifx-action-list-item',\n  styleUrl: 'action-list-item.scss',\n  shadow: true,\n})\nexport class ActionListItem {\n  @Element() host: HTMLElement;\n\n  /**\n   * The title text displayed in the item\n   */\n  @Prop() itemTitle: string;\n\n  /**\n   * The description text displayed below the title\n   */\n  @Prop() description?: string;\n\n  /**\n   * Value associated with this item\n   */\n  @Prop() value?: string;\n\n  /**\n   * URL to navigate to when item is clicked\n   */\n  @Prop() href?: string;\n\n  /**\n   * Target for the link navigation\n   * @default '_self'\n   */\n  @Prop() target: string = '_self';\n\n  /**\n   * Controls whether the item is disabled\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Aria label for accessibility support\n   */\n  @Prop() itemAriaLabel?: string;\n\n  /**\n   * Event emitted when the main item area is clicked\n   */\n  @Event() ifxActionListItemClick: EventEmitter<ActionListItemClickEvent>;\n\n  @Watch('disabled')\n  onDisabledChange() {\n    // Update interactive elements when disabled state changes\n    this.updateSlotElementsDisabledState();\n  }\n\n  private handleMainClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    // Check if clicked element is inside leading or trailing areas\n    const leadingElement = this.host.shadowRoot?.querySelector('.action-list-item__leading');\n    const trailingElement = this.host.shadowRoot?.querySelector('.action-list-item__trailing');\n\n    if (leadingElement?.contains(event.target as Node) || trailingElement?.contains(event.target as Node)) {\n      return; // Don't trigger main click if clicking on leading/trailing areas\n    }\n\n    // Always emit main event when clicking on content area (text), regardless of interactive elements\n    this.ifxActionListItemClick.emit({\n      value: this.value,\n      href: this.href,\n      target: this.target,\n      component: this,\n    });\n\n    // If href is provided, automatically navigate (Link mode)\n    // If no href is provided, only the event is emitted (Event mode)\n    if (this.href) {\n      if (this.target === '_blank') {\n        window.open(this.href, this.target);\n      } else {\n        window.location.href = this.href;\n      }\n    }\n  };\n\n  private handleLeadingClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    // Check if the clicked element or any of its parents is an interactive component\n    let currentElement = target;\n    while (currentElement && currentElement !== this.host) {\n      if (this.isInteractiveElement(currentElement)) {\n        // Interactive element clicked - stop propagation to prevent main event\n        event.stopPropagation();\n        return;\n      }\n      currentElement = currentElement.parentElement;\n    }\n\n    // Non-interactive element clicked - trigger main action\n    event.stopPropagation();\n    this.ifxActionListItemClick.emit({\n      value: this.value,\n      href: this.href,\n      target: this.target,\n      component: this,\n    });\n\n    // If href is provided, automatically navigate\n    if (this.href) {\n      if (this.target === '_blank') {\n        window.open(this.href, this.target);\n      } else {\n        window.location.href = this.href;\n      }\n    }\n  };\n\n  private handleTrailingClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    // Check if the clicked element or any of its parents is an interactive component\n    let currentElement = target;\n    while (currentElement && currentElement !== this.host) {\n      if (this.isInteractiveElement(currentElement)) {\n        // Interactive element clicked - stop propagation to prevent main event\n        event.stopPropagation();\n        return;\n      }\n      currentElement = currentElement.parentElement;\n    }\n\n    // Non-interactive element clicked - trigger main action\n    event.stopPropagation();\n    this.ifxActionListItemClick.emit({\n      value: this.value,\n      href: this.href,\n      target: this.target,\n      component: this,\n    });\n\n    // If href is provided, automatically navigate\n    if (this.href) {\n      if (this.target === '_blank') {\n        window.open(this.href, this.target);\n      } else {\n        window.location.href = this.href;\n      }\n    }\n  };\n\n  private isInteractiveElement = (element: HTMLElement): boolean => {\n    // Get the tag name, handling both custom elements and standard HTML\n    const tagName = element.tagName.toUpperCase();\n\n    // List of Infineon components that should block main event\n    const interactiveInfineonComponents = [\n      'IFX-BUTTON',\n      'IFX-CHECKBOX',\n      'IFX-SWITCH'\n    ];\n\n    // Check if it's an interactive Infineon component\n    return interactiveInfineonComponents.includes(tagName);\n  };\n\n  private handleMainKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n\n      // Always trigger main action via keyboard, regardless of interactive elements\n      this.handleMainClick(event as any);\n    }\n  };\n\n  private handleLeadingKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n\n      const leadingSlot = this.host.shadowRoot?.querySelector('slot[name=\"leading\"]') as HTMLSlotElement;\n      const assignedElements = leadingSlot?.assignedElements() || [];\n\n      // Find first interactive element and activate it\n      const firstInteractive = assignedElements.find(el =>\n        this.isInteractiveElement(el as HTMLElement)\n      ) as HTMLElement;\n\n      if (firstInteractive) {\n        firstInteractive.focus();\n        firstInteractive.click();\n      }\n    }\n  };\n\n  private handleTrailingKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n\n      const trailingSlot = this.host.shadowRoot?.querySelector('slot[name=\"trailing\"]') as HTMLSlotElement;\n      const assignedElements = trailingSlot?.assignedElements() || [];\n\n      // Find first interactive element and activate it\n      const firstInteractive = assignedElements.find(el =>\n        this.isInteractiveElement(el as HTMLElement)\n      ) as HTMLElement;\n\n      if (firstInteractive) {\n        firstInteractive.focus();\n        firstInteractive.click();\n      }\n    }\n  };\n\n  private hasSlotContent(slotName: string): boolean {\n    const slot = this.host.querySelector(`[slot=\"${slotName}\"]`);\n    return !!slot;\n  }\n\n  componentDidLoad() {\n    // Apply disabled state to interactive elements in slots\n    this.updateSlotElementsDisabledState();\n  }\n\n  componentDidUpdate() {\n    // Apply disabled state to interactive elements in slots when disabled prop changes\n    this.updateSlotElementsDisabledState();\n  }\n\n  private updateSlotElementsDisabledState = () => {\n    // Only handle interactive components that should be disabled\n    const interactiveComponents = ['ifx-checkbox', 'ifx-switch', 'ifx-button'];\n\n    // Get all slotted elements\n    const slots = this.host.querySelectorAll('[slot]');\n\n    slots.forEach(slottedElement => {\n      // Check if the slotted element itself is an interactive component\n      if (interactiveComponents.includes(slottedElement.tagName.toLowerCase())) {\n        this.setElementDisabledState(slottedElement as HTMLElement);\n      }\n\n      // Also check for nested interactive components within the slotted element\n      interactiveComponents.forEach(componentTag => {\n        const nestedElements = slottedElement.querySelectorAll(componentTag);\n        nestedElements.forEach(nestedElement => {\n          this.setElementDisabledState(nestedElement as HTMLElement);\n        });\n      });\n    });\n  };\n\n  private setElementDisabledState = (element: HTMLElement) => {\n    if (this.disabled) {\n      element.setAttribute('disabled', 'true');\n    } else {\n      element.removeAttribute('disabled');\n    }\n  };  render() {\n    const isClickable = !this.disabled && (this.href || this.value);\n    const ariaLabel = this.itemAriaLabel || `${this.itemTitle}${this.description ? ` - ${this.description}` : ''}`;\n    const hasLeadingContent = this.hasSlotContent('leading');\n    const hasTrailingContent = this.hasSlotContent('trailing');\n\n    return (\n      <div\n        class={classNames(\n          'action-list-item',\n          this.disabled && 'action-list-item--disabled',\n          isClickable && 'action-list-item--clickable'\n        )}\n        role=\"listitem\"\n        tabIndex={isClickable ? 0 : -1}\n        aria-label={ariaLabel}\n        aria-disabled={this.disabled ? 'true' : undefined}\n        onClick={this.handleMainClick}\n        onKeyDown={this.handleMainKeyDown}\n      >\n        {/* Leading Item Container - only render if content exists */}\n        {hasLeadingContent && (\n          <div\n            class=\"action-list-item__leading\"\n            onClick={this.handleLeadingClick}\n            onKeyDown={this.handleLeadingKeyDown}\n          >\n            <slot name=\"leading\"></slot>\n          </div>\n        )}\n\n        {/* Text Container */}\n        <div class=\"action-list-item__content\">\n          <div class=\"action-list-item__title\">\n            {this.itemTitle}\n          </div>\n          {this.description && (\n            <div class=\"action-list-item__description\">\n              {this.description}\n            </div>\n          )}\n        </div>\n\n        {/* Trailing Item Container - only render if content exists */}\n        {hasTrailingContent && (\n          <div\n            class=\"action-list-item__trailing\"\n            onClick={this.handleTrailingClick}\n            onKeyDown={this.handleTrailingKeyDown}\n          >\n            <slot name=\"trailing\"></slot>\n          </div>\n        )}\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"ifx-action-list-item.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/action-list/action-list-item.scss?tag=ifx-action-list-item&encapsulation=shadow","src/components/action-list/action-list-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.action-list-item {\n  display: flex;\n  align-items: center;\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n  background: tokens.$ifxColorBaseWhite;\n  transition: background-color 0.2s ease;\n  cursor: default;\n\n  &--clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-list-item--disabled) {\n      background: tokens.$ifxColorEngineering100;\n    }\n\n    &:focus:not(.action-list-item--disabled) {\n      outline: none;\n      //outline: 2px solid tokens.$ifxColorOcean500;\n      //outline-offset: -2px;\n      background: tokens.$ifxColorEngineering100;\n    }\n\n    &:active:not(.action-list-item--disabled) {\n      background: tokens.$ifxColorEngineering200;\n    }\n  }\n\n  &--disabled {\n    // Apply disabled color to all slotted icons\n    ::slotted(ifx-icon) {\n      color: tokens.$ifxColorEngineering300;\n    }\n\n    // Also apply to nested icons within slotted elements\n    ::slotted(*) {\n      ifx-icon {\n        color: tokens.$ifxColorEngineering300;\n      }\n    }\n  }\n\n  &__leading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: tokens.$ifxSpace200;\n    flex-shrink: 0;\n  }\n\n  &__content {\n    flex: 1;\n    min-width: 0; // Allows text to truncate\n  }\n\n  &__title {\n    font-weight: tokens.$ifxFontWeightSemibold;\n    font-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n    color: tokens.$ifxColorBaseBlack;\n\n    // Truncate long titles\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    // Disabled state\n    .action-list-item--disabled & {\n      color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &__description {\n    font-size: tokens.$ifxFontSizeS;\n    line-height: tokens.$ifxLineHeightS;\n    color: tokens.$ifxColorEngineering500;\n    margin-top: tokens.$ifxSpace25;\n\n    // Disabled state\n    .action-list-item--disabled & {\n      color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &__trailing {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-left: tokens.$ifxSpace200;\n    flex-shrink: 0;\n    gap: 16px;\n  }\n}","import { Component, h, Prop, Element, Event, EventEmitter, Watch } from '@stencil/core';\nimport classNames from 'classnames';\n\nexport interface ActionListItemClickEvent {\n  value?: string;\n  href?: string;\n  target?: string;\n  component?: ActionListItem;\n}\n\n@Component({\n  tag: 'ifx-action-list-item',\n  styleUrl: 'action-list-item.scss',\n  shadow: true,\n})\nexport class ActionListItem {\n  @Element() host: HTMLElement;\n\n  /**\n   * The title text displayed in the item\n   */\n  @Prop() itemTitle: string;\n\n  /**\n   * The description text displayed below the title\n   */\n  @Prop() description?: string;\n\n  /**\n   * Value associated with this item\n   */\n  @Prop() value?: string;\n\n  /**\n   * URL to navigate to when item is clicked\n   */\n  @Prop() href?: string;\n\n  /**\n   * Target for the link navigation\n   * @default '_self'\n   */\n  @Prop() target: string = '_self';\n\n  /**\n   * Controls whether the item is disabled\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Aria label for accessibility support\n   */\n  @Prop() itemAriaLabel?: string;\n\n  /**\n   * Event emitted when the main item area is clicked\n   */\n  @Event() ifxActionListItemClick: EventEmitter<ActionListItemClickEvent>;\n\n  @Watch('disabled')\n  onDisabledChange() {\n    // Update interactive elements when disabled state changes\n    this.updateSlotElementsDisabledState();\n  }\n\n  private handleMainClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    // Check if clicked element is inside leading or trailing areas\n    const leadingElement = this.host.shadowRoot?.querySelector('.action-list-item__leading');\n    const trailingElement = this.host.shadowRoot?.querySelector('.action-list-item__trailing');\n\n    if (leadingElement?.contains(event.target as Node) || trailingElement?.contains(event.target as Node)) {\n      return; // Don't trigger main click if clicking on leading/trailing areas\n    }\n\n    // Always emit main event when clicking on content area (text), regardless of interactive elements\n    this.ifxActionListItemClick.emit({\n      value: this.value,\n      href: this.href,\n      target: this.target,\n      component: this,\n    });\n\n    // If href is provided, automatically navigate (Link mode)\n    // If no href is provided, only the event is emitted (Event mode)\n    if (this.href) {\n      if (this.target === '_blank') {\n        window.open(this.href, this.target);\n      } else {\n        window.location.href = this.href;\n      }\n    }\n  };\n\n  private handleLeadingClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    // Check if the clicked element or any of its parents is an interactive component\n    let currentElement = target;\n    while (currentElement && currentElement !== this.host) {\n      if (this.isInteractiveElement(currentElement)) {\n        // Interactive element clicked - stop propagation to prevent main event\n        event.stopPropagation();\n        return;\n      }\n      currentElement = currentElement.parentElement;\n    }\n\n    // Non-interactive element clicked - trigger main action\n    event.stopPropagation();\n    this.ifxActionListItemClick.emit({\n      value: this.value,\n      href: this.href,\n      target: this.target,\n      component: this,\n    });\n\n    // If href is provided, automatically navigate\n    if (this.href) {\n      if (this.target === '_blank') {\n        window.open(this.href, this.target);\n      } else {\n        window.location.href = this.href;\n      }\n    }\n  };\n\n  private handleTrailingClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n\n    // Check if the clicked element or any of its parents is an interactive component\n    let currentElement = target;\n    while (currentElement && currentElement !== this.host) {\n      if (this.isInteractiveElement(currentElement)) {\n        // Interactive element clicked - stop propagation to prevent main event\n        event.stopPropagation();\n        return;\n      }\n      currentElement = currentElement.parentElement;\n    }\n\n    // Non-interactive element clicked - trigger main action\n    event.stopPropagation();\n    this.ifxActionListItemClick.emit({\n      value: this.value,\n      href: this.href,\n      target: this.target,\n      component: this,\n    });\n\n    // If href is provided, automatically navigate\n    if (this.href) {\n      if (this.target === '_blank') {\n        window.open(this.href, this.target);\n      } else {\n        window.location.href = this.href;\n      }\n    }\n  };\n\n  private isInteractiveElement = (element: HTMLElement): boolean => {\n    // Get the tag name, handling both custom elements and standard HTML\n    const tagName = element.tagName.toUpperCase();\n\n    // List of Infineon components that should block main event\n    const interactiveInfineonComponents = [\n      'IFX-BUTTON',\n      'IFX-CHECKBOX',\n      'IFX-SWITCH'\n    ];\n\n    // Check if it's an interactive Infineon component\n    return interactiveInfineonComponents.includes(tagName);\n  };\n\n  private handleMainKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n\n      // Always trigger main action via keyboard, regardless of interactive elements\n      this.handleMainClick(event as any);\n    }\n  };\n\n  private handleLeadingKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n\n      const leadingSlot = this.host.shadowRoot?.querySelector('slot[name=\"leading\"]') as HTMLSlotElement;\n      const assignedElements = leadingSlot?.assignedElements() || [];\n\n      // Find first interactive element and activate it\n      const firstInteractive = assignedElements.find(el =>\n        this.isInteractiveElement(el as HTMLElement)\n      ) as HTMLElement;\n\n      if (firstInteractive) {\n        firstInteractive.focus();\n        firstInteractive.click();\n      }\n    }\n  };\n\n  private handleTrailingKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n\n      const trailingSlot = this.host.shadowRoot?.querySelector('slot[name=\"trailing\"]') as HTMLSlotElement;\n      const assignedElements = trailingSlot?.assignedElements() || [];\n\n      // Find first interactive element and activate it\n      const firstInteractive = assignedElements.find(el =>\n        this.isInteractiveElement(el as HTMLElement)\n      ) as HTMLElement;\n\n      if (firstInteractive) {\n        firstInteractive.focus();\n        firstInteractive.click();\n      }\n    }\n  };\n\n  private hasSlotContent(slotName: string): boolean {\n    const slot = this.host.querySelector(`[slot=\"${slotName}\"]`);\n    return !!slot;\n  }\n\n  componentDidLoad() {\n    // Apply disabled state to interactive elements in slots\n    this.updateSlotElementsDisabledState();\n  }\n\n  componentDidUpdate() {\n    // Apply disabled state to interactive elements in slots when disabled prop changes\n    this.updateSlotElementsDisabledState();\n  }\n\n  private updateSlotElementsDisabledState = () => {\n    // Only handle interactive components that should be disabled\n    const interactiveComponents = ['ifx-checkbox', 'ifx-switch', 'ifx-button'];\n\n    // Get all slotted elements\n    const slots = this.host.querySelectorAll('[slot]');\n\n    slots.forEach(slottedElement => {\n      // Check if the slotted element itself is an interactive component\n      if (interactiveComponents.includes(slottedElement.tagName.toLowerCase())) {\n        this.setElementDisabledState(slottedElement as HTMLElement);\n      }\n\n      // Also check for nested interactive components within the slotted element\n      interactiveComponents.forEach(componentTag => {\n        const nestedElements = slottedElement.querySelectorAll(componentTag);\n        nestedElements.forEach(nestedElement => {\n          this.setElementDisabledState(nestedElement as HTMLElement);\n        });\n      });\n    });\n  };\n\n  private setElementDisabledState = (element: HTMLElement) => {\n    if (this.disabled) {\n      element.setAttribute('disabled', 'true');\n    } else {\n      element.removeAttribute('disabled');\n    }\n  };  render() {\n    const isClickable = !this.disabled && (this.href || this.value);\n    const ariaLabel = this.itemAriaLabel || `${this.itemTitle}${this.description ? ` - ${this.description}` : ''}`;\n    const hasLeadingContent = this.hasSlotContent('leading');\n    const hasTrailingContent = this.hasSlotContent('trailing');\n\n    return (\n      <div\n        class={classNames(\n          'action-list-item',\n          this.disabled && 'action-list-item--disabled',\n          isClickable && 'action-list-item--clickable'\n        )}\n        role=\"listitem\"\n        tabIndex={isClickable ? 0 : -1}\n        aria-label={ariaLabel}\n        aria-disabled={this.disabled ? 'true' : undefined}\n        onClick={this.handleMainClick}\n        onKeyDown={this.handleMainKeyDown}\n      >\n        {/* Leading Item Container - only render if content exists */}\n        {hasLeadingContent && (\n          <div\n            class=\"action-list-item__leading\"\n            onClick={this.handleLeadingClick}\n            onKeyDown={this.handleLeadingKeyDown}\n          >\n            <slot name=\"leading\"></slot>\n          </div>\n        )}\n\n        {/* Text Container */}\n        <div class=\"action-list-item__content\">\n          <div class=\"action-list-item__title\">\n            {this.itemTitle}\n          </div>\n          {this.description && (\n            <div class=\"action-list-item__description\">\n              {this.description}\n            </div>\n          )}\n        </div>\n\n        {/* Trailing Item Container - only render if content exists */}\n        {hasTrailingContent && (\n          <div\n            class=\"action-list-item__trailing\"\n            onClick={this.handleTrailingClick}\n            onKeyDown={this.handleTrailingKeyDown}\n          >\n            <slot name=\"trailing\"></slot>\n          </div>\n        )}\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/components/ifx-action-list.js

@@ -4,9 +4,11 @@ import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent
 const actionListCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.action-list{background:#FFFFFF;border-radius:0;border:1px solid #EEEDED;overflow:hidden;display:flex;flex-direction:column}";
 
 const ActionList = /*@__PURE__*/ proxyCustomElement(class ActionList extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     async componentDidLoad() {

package/dist/components/ifx-action-list.js.map

@@ -1 +1 @@
-{"file":"ifx-action-list.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,+LAA+L;;MCUxM,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;AAQrB,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,iBAAiB,EAAE,MAAM,SAAS,CAAC;;;IAItD,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,MAAM,EAAA,YAAA,EACC,IAAI,CAAC,aAAa,EAAA,EAE9B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/action-list/action-list.scss?tag=ifx-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.action-list {\n  background: tokens.$ifxColorBaseWhite;\n  border-radius: tokens.$ifxBorderRadiusNone;\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-action-list',\n  styleUrl: 'action-list.scss',\n  shadow: true,\n})\nexport class ActionList {\n  @Element() el: HTMLElement;\n\n  /**\n   * Aria label for accessibility support\n   */\n  @Prop() listAriaLabel?: string;\n\n  async componentDidLoad() {\n    if (!isNestedInIfxComponent(this.el)) {\n      const framework = detectFramework();\n      trackComponent('ifx-action-list', await framework);\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class=\"action-list\"\n        role=\"list\"\n        aria-label={this.listAriaLabel}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"ifx-action-list.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,+LAA+L;;MCUxM,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;;;AAQrB,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,iBAAiB,EAAE,MAAM,SAAS,CAAC;;;IAItD,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,MAAM,EAAA,YAAA,EACC,IAAI,CAAC,aAAa,EAAA,EAE9B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/action-list/action-list.scss?tag=ifx-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.action-list {\n  background: tokens.$ifxColorBaseWhite;\n  border-radius: tokens.$ifxBorderRadiusNone;\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-action-list',\n  styleUrl: 'action-list.scss',\n  shadow: true,\n})\nexport class ActionList {\n  @Element() el: HTMLElement;\n\n  /**\n   * Aria label for accessibility support\n   */\n  @Prop() listAriaLabel?: string;\n\n  async componentDidLoad() {\n    if (!isNestedInIfxComponent(this.el)) {\n      const framework = detectFramework();\n      trackComponent('ifx-action-list', await framework);\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class=\"action-list\"\n        role=\"list\"\n        aria-label={this.listAriaLabel}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/components/ifx-alert.js

@@ -1,4 +1,4 @@
-import { A as Alert, d as defineCustomElement$1 } from './p-CnXEcTdH.js';
+import { A as Alert, d as defineCustomElement$1 } from './p-BXtTIODa.js';
 
 const IfxAlert = Alert;
 const defineCustomElement = defineCustomElement$1;