@infineon/infineon-design-system-stencil 39.4.4--canary.1723.b2cb04cb46890b174f47cfd446a0e20dc3cee6fc.0 → 39.4.4-canary.0

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

@@ -1 +1 @@
-{"version":3,"file":"action-list-item.js","sourceRoot":"","sources":["../../../src/components/action-list/action-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,UAAU,MAAM,YAAY,CAAC;AAcpC,MAAM,OAAO,cAAc;IAL3B;QA4BE;;;WAGG;QACK,WAAM,GAAW,OAAO,CAAC;QAEjC;;;WAGG;QACK,aAAQ,GAAY,KAAK,CAAC;QAkB1B,oBAAe,GAAG,CAAC,KAAiB,EAAE,EAAE;;YAC9C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,OAAO;YACT,CAAC;YAED,+DAA+D;YAC/D,MAAM,cAAc,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,4BAA4B,CAAC,CAAC;YACzF,MAAM,eAAe,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,6BAA6B,CAAC,CAAC;YAE3F,IAAI,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,MAAI,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAA,EAAE,CAAC;gBACtG,OAAO,CAAC,iEAAiE;YAC3E,CAAC;YAED,kGAAkG;YAClG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;gBAC/B,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;YAEH,0DAA0D;YAC1D,iEAAiE;YACjE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;oBAC7B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;gBACtC,CAAC;qBAAM,CAAC;oBACN,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;gBACnC,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,uBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACjD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;YAE3C,iFAAiF;YACjF,IAAI,cAAc,GAAG,MAAM,CAAC;YAC5B,OAAO,cAAc,IAAI,cAAc,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBACtD,IAAI,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC,EAAE,CAAC;oBAC9C,uEAAuE;oBACvE,KAAK,CAAC,eAAe,EAAE,CAAC;oBACxB,OAAO;gBACT,CAAC;gBACD,cAAc,GAAG,cAAc,CAAC,aAAa,CAAC;YAChD,CAAC;YAED,wDAAwD;YACxD,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;gBAC/B,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;YAEH,8CAA8C;YAC9C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;oBAC7B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;gBACtC,CAAC;qBAAM,CAAC;oBACN,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;gBACnC,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,wBAAmB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAClD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;YAE3C,iFAAiF;YACjF,IAAI,cAAc,GAAG,MAAM,CAAC;YAC5B,OAAO,cAAc,IAAI,cAAc,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBACtD,IAAI,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC,EAAE,CAAC;oBAC9C,uEAAuE;oBACvE,KAAK,CAAC,eAAe,EAAE,CAAC;oBACxB,OAAO;gBACT,CAAC;gBACD,cAAc,GAAG,cAAc,CAAC,aAAa,CAAC;YAChD,CAAC;YAED,wDAAwD;YACxD,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;gBAC/B,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;YAEH,8CAA8C;YAC9C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;oBAC7B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;gBACtC,CAAC;qBAAM,CAAC;oBACN,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;gBACnC,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,OAAoB,EAAW,EAAE;YAC/D,oEAAoE;YACpE,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;YAE9C,2DAA2D;YAC3D,MAAM,6BAA6B,GAAG;gBACpC,YAAY;gBACZ,cAAc;gBACd,YAAY;aACb,CAAC;YAEF,kDAAkD;YAClD,OAAO,6BAA6B,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACzD,CAAC,CAAC;QAEM,sBAAiB,GAAG,CAAC,KAAoB,EAAE,EAAE;YACnD,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;gBAEvB,8EAA8E;gBAC9E,IAAI,CAAC,eAAe,CAAC,KAAY,CAAC,CAAC;YACrC,CAAC;QACH,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,KAAoB,EAAE,EAAE;;YACtD,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;gBAEvB,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,sBAAsB,CAAoB,CAAC;gBACnG,MAAM,gBAAgB,GAAG,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,EAAE,KAAI,EAAE,CAAC;gBAE/D,iDAAiD;gBACjD,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAClD,IAAI,CAAC,oBAAoB,CAAC,EAAiB,CAAC,CAC9B,CAAC;gBAEjB,IAAI,gBAAgB,EAAE,CAAC;oBACrB,gBAAgB,CAAC,KAAK,EAAE,CAAC;oBACzB,gBAAgB,CAAC,KAAK,EAAE,CAAC;gBAC3B,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,0BAAqB,GAAG,CAAC,KAAoB,EAAE,EAAE;;YACvD,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;gBAEvB,MAAM,YAAY,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,uBAAuB,CAAoB,CAAC;gBACrG,MAAM,gBAAgB,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,EAAE,KAAI,EAAE,CAAC;gBAEhE,iDAAiD;gBACjD,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAClD,IAAI,CAAC,oBAAoB,CAAC,EAAiB,CAAC,CAC9B,CAAC;gBAEjB,IAAI,gBAAgB,EAAE,CAAC;oBACrB,gBAAgB,CAAC,KAAK,EAAE,CAAC;oBACzB,gBAAgB,CAAC,KAAK,EAAE,CAAC;gBAC3B,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAiBM,oCAA+B,GAAG,GAAG,EAAE;YAC7C,6DAA6D;YAC7D,MAAM,qBAAqB,GAAG,CAAC,cAAc,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;YAE3E,2BAA2B;YAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;YAEnD,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE;gBAC7B,kEAAkE;gBAClE,IAAI,qBAAqB,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC;oBACzE,IAAI,CAAC,uBAAuB,CAAC,cAA6B,CAAC,CAAC;gBAC9D,CAAC;gBAED,0EAA0E;gBAC1E,qBAAqB,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE;oBAC3C,MAAM,cAAc,GAAG,cAAc,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;oBACrE,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;wBACrC,IAAI,CAAC,uBAAuB,CAAC,aAA4B,CAAC,CAAC;oBAC7D,CAAC,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,4BAAuB,GAAG,CAAC,OAAoB,EAAE,EAAE;YACzD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;YAC3C,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;YACtC,CAAC;QACH,CAAC,CAAC;KAwDH;IA7RC,gBAAgB;QACd,0DAA0D;QAC1D,IAAI,CAAC,+BAA+B,EAAE,CAAC;IACzC,CAAC;IAsLO,cAAc,CAAC,QAAgB;QACrC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,QAAQ,IAAI,CAAC,CAAC;QAC7D,OAAO,CAAC,CAAC,IAAI,CAAC;IAChB,CAAC;IAED,gBAAgB;QACd,wDAAwD;QACxD,IAAI,CAAC,+BAA+B,EAAE,CAAC;IACzC,CAAC;IAED,kBAAkB;QAChB,mFAAmF;QACnF,IAAI,CAAC,+BAA+B,EAAE,CAAC;IACzC,CAAC;IA+BG,MAAM;QACR,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;QAChE,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,IAAI,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QAC/G,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QACzD,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;QAE3D,OAAO,CACL,4DACE,KAAK,EAAE,UAAU,CACf,kBAAkB,EAClB,IAAI,CAAC,QAAQ,IAAI,4BAA4B,EAC7C,WAAW,IAAI,6BAA6B,CAC7C,EACD,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAClB,SAAS,mBACN,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,SAAS,EAAE,IAAI,CAAC,iBAAiB;YAGhC,iBAAiB,IAAI,CACpB,4DACE,KAAK,EAAC,2BAA2B,EACjC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,IAAI,CAAC,oBAAoB;gBAEpC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP;YAGD,4DAAK,KAAK,EAAC,2BAA2B;gBACpC,4DAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,SAAS,CACX;gBACL,IAAI,CAAC,WAAW,IAAI,CACnB,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,WAAW,CACb,CACP,CACG;YAGL,kBAAkB,IAAI,CACrB,4DACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,SAAS,EAAE,IAAI,CAAC,qBAAqB;gBAErC,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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":"action-list-item.js","sourceRoot":"","sources":["../../../src/components/action-list/action-list-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Event, EventEmitter, Watch } from '@stencil/core';\r\nimport classNames from 'classnames';\r\n\r\nexport interface ActionListItemClickEvent {\r\n  value?: string;\r\n  href?: string;\r\n  target?: string;\r\n  component?: ActionListItem;\r\n}\r\n\r\n@Component({\r\n  tag: 'ifx-action-list-item',\r\n  styleUrl: 'action-list-item.scss',\r\n  shadow: true,\r\n})\r\nexport class ActionListItem {\r\n  @Element() host: HTMLElement;\r\n\r\n  /**\r\n   * The title text displayed in the item\r\n   */\r\n  @Prop() itemTitle: string;\r\n\r\n  /**\r\n   * The description text displayed below the title\r\n   */\r\n  @Prop() description?: string;\r\n\r\n  /**\r\n   * Value associated with this item\r\n   */\r\n  @Prop() value?: string;\r\n\r\n  /**\r\n   * URL to navigate to when item is clicked\r\n   */\r\n  @Prop() href?: string;\r\n\r\n  /**\r\n   * Target for the link navigation\r\n   * @default '_self'\r\n   */\r\n  @Prop() target: string = '_self';\r\n\r\n  /**\r\n   * Controls whether the item is disabled\r\n   * @default false\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  /**\r\n   * Aria label for accessibility support\r\n   */\r\n  @Prop() itemAriaLabel?: string;\r\n\r\n  /**\r\n   * Event emitted when the main item area is clicked\r\n   */\r\n  @Event() ifxActionListItemClick: EventEmitter<ActionListItemClickEvent>;\r\n\r\n  @Watch('disabled')\r\n  onDisabledChange() {\r\n    // Update interactive elements when disabled state changes\r\n    this.updateSlotElementsDisabledState();\r\n  }\r\n\r\n  private handleMainClick = (event: MouseEvent) => {\r\n    if (this.disabled) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n\r\n    // Check if clicked element is inside leading or trailing areas\r\n    const leadingElement = this.host.shadowRoot?.querySelector('.action-list-item__leading');\r\n    const trailingElement = this.host.shadowRoot?.querySelector('.action-list-item__trailing');\r\n\r\n    if (leadingElement?.contains(event.target as Node) || trailingElement?.contains(event.target as Node)) {\r\n      return; // Don't trigger main click if clicking on leading/trailing areas\r\n    }\r\n\r\n    // Always emit main event when clicking on content area (text), regardless of interactive elements\r\n    this.ifxActionListItemClick.emit({\r\n      value: this.value,\r\n      href: this.href,\r\n      target: this.target,\r\n      component: this,\r\n    });\r\n\r\n    // If href is provided, automatically navigate (Link mode)\r\n    // If no href is provided, only the event is emitted (Event mode)\r\n    if (this.href) {\r\n      if (this.target === '_blank') {\r\n        window.open(this.href, this.target);\r\n      } else {\r\n        window.location.href = this.href;\r\n      }\r\n    }\r\n  };\r\n\r\n  private handleLeadingClick = (event: MouseEvent) => {\r\n    if (this.disabled) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n\r\n    const target = event.target as HTMLElement;\r\n\r\n    // Check if the clicked element or any of its parents is an interactive component\r\n    let currentElement = target;\r\n    while (currentElement && currentElement !== this.host) {\r\n      if (this.isInteractiveElement(currentElement)) {\r\n        // Interactive element clicked - stop propagation to prevent main event\r\n        event.stopPropagation();\r\n        return;\r\n      }\r\n      currentElement = currentElement.parentElement;\r\n    }\r\n\r\n    // Non-interactive element clicked - trigger main action\r\n    event.stopPropagation();\r\n    this.ifxActionListItemClick.emit({\r\n      value: this.value,\r\n      href: this.href,\r\n      target: this.target,\r\n      component: this,\r\n    });\r\n\r\n    // If href is provided, automatically navigate\r\n    if (this.href) {\r\n      if (this.target === '_blank') {\r\n        window.open(this.href, this.target);\r\n      } else {\r\n        window.location.href = this.href;\r\n      }\r\n    }\r\n  };\r\n\r\n  private handleTrailingClick = (event: MouseEvent) => {\r\n    if (this.disabled) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n\r\n    const target = event.target as HTMLElement;\r\n\r\n    // Check if the clicked element or any of its parents is an interactive component\r\n    let currentElement = target;\r\n    while (currentElement && currentElement !== this.host) {\r\n      if (this.isInteractiveElement(currentElement)) {\r\n        // Interactive element clicked - stop propagation to prevent main event\r\n        event.stopPropagation();\r\n        return;\r\n      }\r\n      currentElement = currentElement.parentElement;\r\n    }\r\n\r\n    // Non-interactive element clicked - trigger main action\r\n    event.stopPropagation();\r\n    this.ifxActionListItemClick.emit({\r\n      value: this.value,\r\n      href: this.href,\r\n      target: this.target,\r\n      component: this,\r\n    });\r\n\r\n    // If href is provided, automatically navigate\r\n    if (this.href) {\r\n      if (this.target === '_blank') {\r\n        window.open(this.href, this.target);\r\n      } else {\r\n        window.location.href = this.href;\r\n      }\r\n    }\r\n  };\r\n\r\n  private isInteractiveElement = (element: HTMLElement): boolean => {\r\n    // Get the tag name, handling both custom elements and standard HTML\r\n    const tagName = element.tagName.toUpperCase();\r\n\r\n    // List of Infineon components that should block main event\r\n    const interactiveInfineonComponents = [\r\n      'IFX-BUTTON',\r\n      'IFX-CHECKBOX',\r\n      'IFX-SWITCH'\r\n    ];\r\n\r\n    // Check if it's an interactive Infineon component\r\n    return interactiveInfineonComponents.includes(tagName);\r\n  };\r\n\r\n  private handleMainKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n\r\n      // Always trigger main action via keyboard, regardless of interactive elements\r\n      this.handleMainClick(event as any);\r\n    }\r\n  };\r\n\r\n  private handleLeadingKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n\r\n      const leadingSlot = this.host.shadowRoot?.querySelector('slot[name=\"leading\"]') as HTMLSlotElement;\r\n      const assignedElements = leadingSlot?.assignedElements() || [];\r\n\r\n      // Find first interactive element and activate it\r\n      const firstInteractive = assignedElements.find(el =>\r\n        this.isInteractiveElement(el as HTMLElement)\r\n      ) as HTMLElement;\r\n\r\n      if (firstInteractive) {\r\n        firstInteractive.focus();\r\n        firstInteractive.click();\r\n      }\r\n    }\r\n  };\r\n\r\n  private handleTrailingKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n\r\n      const trailingSlot = this.host.shadowRoot?.querySelector('slot[name=\"trailing\"]') as HTMLSlotElement;\r\n      const assignedElements = trailingSlot?.assignedElements() || [];\r\n\r\n      // Find first interactive element and activate it\r\n      const firstInteractive = assignedElements.find(el =>\r\n        this.isInteractiveElement(el as HTMLElement)\r\n      ) as HTMLElement;\r\n\r\n      if (firstInteractive) {\r\n        firstInteractive.focus();\r\n        firstInteractive.click();\r\n      }\r\n    }\r\n  };\r\n\r\n  private hasSlotContent(slotName: string): boolean {\r\n    const slot = this.host.querySelector(`[slot=\"${slotName}\"]`);\r\n    return !!slot;\r\n  }\r\n\r\n  componentDidLoad() {\r\n    // Apply disabled state to interactive elements in slots\r\n    this.updateSlotElementsDisabledState();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    // Apply disabled state to interactive elements in slots when disabled prop changes\r\n    this.updateSlotElementsDisabledState();\r\n  }\r\n\r\n  private updateSlotElementsDisabledState = () => {\r\n    // Only handle interactive components that should be disabled\r\n    const interactiveComponents = ['ifx-checkbox', 'ifx-switch', 'ifx-button'];\r\n\r\n    // Get all slotted elements\r\n    const slots = this.host.querySelectorAll('[slot]');\r\n\r\n    slots.forEach(slottedElement => {\r\n      // Check if the slotted element itself is an interactive component\r\n      if (interactiveComponents.includes(slottedElement.tagName.toLowerCase())) {\r\n        this.setElementDisabledState(slottedElement as HTMLElement);\r\n      }\r\n\r\n      // Also check for nested interactive components within the slotted element\r\n      interactiveComponents.forEach(componentTag => {\r\n        const nestedElements = slottedElement.querySelectorAll(componentTag);\r\n        nestedElements.forEach(nestedElement => {\r\n          this.setElementDisabledState(nestedElement as HTMLElement);\r\n        });\r\n      });\r\n    });\r\n  };\r\n\r\n  private setElementDisabledState = (element: HTMLElement) => {\r\n    if (this.disabled) {\r\n      element.setAttribute('disabled', 'true');\r\n    } else {\r\n      element.removeAttribute('disabled');\r\n    }\r\n  };  render() {\r\n    const isClickable = !this.disabled && (this.href || this.value);\r\n    const ariaLabel = this.itemAriaLabel || `${this.itemTitle}${this.description ? ` - ${this.description}` : ''}`;\r\n    const hasLeadingContent = this.hasSlotContent('leading');\r\n    const hasTrailingContent = this.hasSlotContent('trailing');\r\n\r\n    return (\r\n      <div\r\n        class={classNames(\r\n          'action-list-item',\r\n          this.disabled && 'action-list-item--disabled',\r\n          isClickable && 'action-list-item--clickable'\r\n        )}\r\n        role=\"listitem\"\r\n        tabIndex={isClickable ? 0 : -1}\r\n        aria-label={ariaLabel}\r\n        aria-disabled={this.disabled ? 'true' : undefined}\r\n        onClick={this.handleMainClick}\r\n        onKeyDown={this.handleMainKeyDown}\r\n      >\r\n        {/* Leading Item Container - only render if content exists */}\r\n        {hasLeadingContent && (\r\n          <div\r\n            class=\"action-list-item__leading\"\r\n            onClick={this.handleLeadingClick}\r\n            onKeyDown={this.handleLeadingKeyDown}\r\n          >\r\n            <slot name=\"leading\"></slot>\r\n          </div>\r\n        )}\r\n\r\n        {/* Text Container */}\r\n        <div class=\"action-list-item__content\">\r\n          <div class=\"action-list-item__title\">\r\n            {this.itemTitle}\r\n          </div>\r\n          {this.description && (\r\n            <div class=\"action-list-item__description\">\r\n              {this.description}\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {/* Trailing Item Container - only render if content exists */}\r\n        {hasTrailingContent && (\r\n          <div\r\n            class=\"action-list-item__trailing\"\r\n            onClick={this.handleTrailingClick}\r\n            onKeyDown={this.handleTrailingKeyDown}\r\n          >\r\n            <slot name=\"trailing\"></slot>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"]}

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

@@ -10,7 +10,7 @@ export class ActionList {
         }
     }
     render() {
-        return (h("div", { key: 'a9da34b5b948204642b94582781d1b74a86dc6f5', class: "action-list", role: "list", "aria-label": this.listAriaLabel }, h("slot", { key: 'bf5dea0baf869e9e072ebe7bfd0ae2104ceb477b' })));
+        return (h("div", { key: '3b5dd123b84e88c458e22fd83e592735c006684b', class: "action-list", role: "list", "aria-label": this.listAriaLabel }, h("slot", { key: 'ed92d35c40ad4b1330296414f61f565c4bf30468' })));
     }
     static get is() { return "ifx-action-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"action-list.js","sourceRoot":"","sources":["../../../src/components/action-list/action-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAOzE,MAAM,OAAO,UAAU;IAQrB,KAAK,CAAC,gBAAgB;QACpB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACrC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,iBAAiB,EAAE,MAAM,SAAS,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,MAAM,gBACC,IAAI,CAAC,aAAa;YAE9B,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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":"action-list.js","sourceRoot":"","sources":["../../../src/components/action-list/action-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAOzE,MAAM,OAAO,UAAU;IAQrB,KAAK,CAAC,gBAAgB;QACpB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACrC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,iBAAiB,EAAE,MAAM,SAAS,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,MAAM,gBACC,IAAI,CAAC,aAAa;YAE9B,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-action-list',\r\n  styleUrl: 'action-list.scss',\r\n  shadow: true,\r\n})\r\nexport class ActionList {\r\n  @Element() el: HTMLElement;\r\n\r\n  /**\r\n   * Aria label for accessibility support\r\n   */\r\n  @Prop() listAriaLabel?: string;\r\n\r\n  async componentDidLoad() {\r\n    if (!isNestedInIfxComponent(this.el)) {\r\n      const framework = detectFramework();\r\n      trackComponent('ifx-action-list', await framework);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        class=\"action-list\"\r\n        role=\"list\"\r\n        aria-label={this.listAriaLabel}\r\n      >\r\n        <slot></slot>\r\n      </div>\r\n    );\r\n  }\r\n}"]}

package/dist/collection/components/action-list/action-list.stories.js

@@ -69,41 +69,41 @@ const BaseTemplate = (args) => {
     if (args.listAriaLabel)
         listEl.setAttribute('list-aria-label', args.listAriaLabel);
     // Create items based on the story requirements
-    listEl.innerHTML = `
-    <ifx-action-list-item
-      item-title="${args.itemTitle || 'Dashboard'}"
-      description="${args.description || 'View your main dashboard'}"
-      value="dashboard"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
-      ${args.href ? `href="${args.href}"` : ''}
-      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
-      ${args.disabled ? 'disabled="true"' : ''}>
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
-
-    <ifx-action-list-item
-      item-title="Settings"
-      value="settings"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
-
-    <ifx-action-list-item
-      item-title="Profile"
-      description="Manage your profile information"
-      value="profile"
-      disabled="true"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
-
-    <ifx-action-list-item
-      item-title="Advanced Analytics and Reporting Dashboard with Extended Functionality"
-      description="This comprehensive analytics dashboard provides detailed insights into user behavior and system performance metrics."
-      value="analytics"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
+    listEl.innerHTML = `
+    <ifx-action-list-item
+      item-title="${args.itemTitle || 'Dashboard'}"
+      description="${args.description || 'View your main dashboard'}"
+      value="dashboard"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
+      ${args.href ? `href="${args.href}"` : ''}
+      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
+      ${args.disabled ? 'disabled="true"' : ''}>
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
+
+    <ifx-action-list-item
+      item-title="Settings"
+      value="settings"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
+
+    <ifx-action-list-item
+      item-title="Profile"
+      description="Manage your profile information"
+      value="profile"
+      disabled="true"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
+
+    <ifx-action-list-item
+      item-title="Advanced Analytics and Reporting Dashboard with Extended Functionality"
+      description="This comprehensive analytics dashboard provides detailed insights into user behavior and system performance metrics."
+      value="analytics"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
   `;
     listEl.addEventListener('ifxActionListItemClick', (event) => {
         const customEvent = event;
@@ -129,41 +129,41 @@ export const InteractiveCheckbox = (args) => {
     if (args.listAriaLabel)
         listEl.setAttribute('list-aria-label', args.listAriaLabel);
     // Create items based on the story requirements
-    listEl.innerHTML = `
-    <ifx-action-list-item
-      item-title="${args.itemTitle || 'Enable notifications'}"
-      description="${args.description || 'Receive notifications for important updates'}"
-      value="notifications"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
-      ${args.href ? `href="${args.href}"` : ''}
-      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
-      ${args.disabled ? 'disabled="true"' : ''}>
-      <ifx-checkbox slot="leading" checked="true"></ifx-checkbox>
-    </ifx-action-list-item>
-
-    <ifx-action-list-item
-      item-title="Auto-save documents"
-      description="Automatically save your work"
-      value="autosave"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-checkbox slot="leading" checked="false"></ifx-checkbox>
-    </ifx-action-list-item>
-
-    <ifx-action-list-item
-      item-title="Enable backups"
-      description="Create automatic backups"
-      value="backups"
-      disabled="true"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-checkbox slot="leading" checked="false"></ifx-checkbox>
-    </ifx-action-list-item>
-
-    <ifx-action-list-item
-      item-title="Show advanced options"
-      value="advanced"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-checkbox slot="leading" checked="true"></ifx-checkbox>
-    </ifx-action-list-item>
+    listEl.innerHTML = `
+    <ifx-action-list-item
+      item-title="${args.itemTitle || 'Enable notifications'}"
+      description="${args.description || 'Receive notifications for important updates'}"
+      value="notifications"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
+      ${args.href ? `href="${args.href}"` : ''}
+      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
+      ${args.disabled ? 'disabled="true"' : ''}>
+      <ifx-checkbox slot="leading" checked="true"></ifx-checkbox>
+    </ifx-action-list-item>
+
+    <ifx-action-list-item
+      item-title="Auto-save documents"
+      description="Automatically save your work"
+      value="autosave"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-checkbox slot="leading" checked="false"></ifx-checkbox>
+    </ifx-action-list-item>
+
+    <ifx-action-list-item
+      item-title="Enable backups"
+      description="Create automatic backups"
+      value="backups"
+      disabled="true"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-checkbox slot="leading" checked="false"></ifx-checkbox>
+    </ifx-action-list-item>
+
+    <ifx-action-list-item
+      item-title="Show advanced options"
+      value="advanced"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-checkbox slot="leading" checked="true"></ifx-checkbox>
+    </ifx-action-list-item>
   `;
     listEl.addEventListener('ifxActionListItemClick', (event) => {
         const customEvent = event;
@@ -189,41 +189,41 @@ export const InteractiveSwitch = (args) => {
     if (args.listAriaLabel)
         listEl.setAttribute('list-aria-label', args.listAriaLabel);
     // Create items based on the story requirements
-    listEl.innerHTML = `
-    <ifx-action-list-item
-      item-title="${args.itemTitle || 'Enable dark mode'}"
-      description="${args.description || 'Toggle dark mode for the interface'}"
-      value="darkmode"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
-      ${args.href ? `href="${args.href}"` : ''}
-      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
-      ${args.disabled ? 'disabled="true"' : ''}>
-      <ifx-switch slot="leading" checked="false"></ifx-switch>
-    </ifx-action-list-item>
-
-    <ifx-action-list-item
-      item-title="Auto-sync data"
-      description="Automatically synchronize your data"
-      value="autosync"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-switch slot="leading" checked="true"></ifx-switch>
-    </ifx-action-list-item>
-
-    <ifx-action-list-item
-      item-title="Enable analytics"
-      description="Collect usage analytics"
-      value="analytics"
-      disabled="true"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-switch slot="leading" checked="false"></ifx-switch>
-    </ifx-action-list-item>
-
-    <ifx-action-list-item
-      item-title="Performance mode"
-      value="performance"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-switch slot="leading" checked="true"></ifx-switch>
-    </ifx-action-list-item>
+    listEl.innerHTML = `
+    <ifx-action-list-item
+      item-title="${args.itemTitle || 'Enable dark mode'}"
+      description="${args.description || 'Toggle dark mode for the interface'}"
+      value="darkmode"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
+      ${args.href ? `href="${args.href}"` : ''}
+      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
+      ${args.disabled ? 'disabled="true"' : ''}>
+      <ifx-switch slot="leading" checked="false"></ifx-switch>
+    </ifx-action-list-item>
+
+    <ifx-action-list-item
+      item-title="Auto-sync data"
+      description="Automatically synchronize your data"
+      value="autosync"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-switch slot="leading" checked="true"></ifx-switch>
+    </ifx-action-list-item>
+
+    <ifx-action-list-item
+      item-title="Enable analytics"
+      description="Collect usage analytics"
+      value="analytics"
+      disabled="true"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-switch slot="leading" checked="false"></ifx-switch>
+    </ifx-action-list-item>
+
+    <ifx-action-list-item
+      item-title="Performance mode"
+      value="performance"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-switch slot="leading" checked="true"></ifx-switch>
+    </ifx-action-list-item>
   `;
     listEl.addEventListener('ifxActionListItemClick', (event) => {
         const customEvent = event;
@@ -248,45 +248,45 @@ export const WithIcons = (args) => {
     const listEl = document.createElement('ifx-action-list');
     if (args.listAriaLabel)
         listEl.setAttribute('list-aria-label', args.listAriaLabel);
-    listEl.innerHTML = `
-    <ifx-action-list-item
-      item-title="${args.itemTitle || 'Dashboard'}"
-      description="${args.description || 'View your main dashboard'}"
-      value="dashboard"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
-      ${args.href ? `href="${args.href}"` : ''}
-      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
-      ${args.disabled ? 'disabled="true"' : ''}>
-      <ifx-icon slot="leading" icon="home-16"></ifx-icon>
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
-
-    <ifx-action-list-item
-      item-title="Settings"
-      value="settings"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-icon slot="leading" icon="server-16"></ifx-icon>
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
-
-    <ifx-action-list-item
-      item-title="Profile"
-      description="Manage your profile information"
-      value="profile"
-      disabled="true"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-icon slot="leading" icon="user-16"></ifx-icon>
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
-
-    <ifx-action-list-item
-      item-title="Enterprise Resource Planning and Business Intelligence System"
-      description="Comprehensive enterprise solution that integrates all aspects of business operations including financial management and human resources."
-      value="erp"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-icon slot="leading" icon="chart-16"></ifx-icon>
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
+    listEl.innerHTML = `
+    <ifx-action-list-item
+      item-title="${args.itemTitle || 'Dashboard'}"
+      description="${args.description || 'View your main dashboard'}"
+      value="dashboard"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
+      ${args.href ? `href="${args.href}"` : ''}
+      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
+      ${args.disabled ? 'disabled="true"' : ''}>
+      <ifx-icon slot="leading" icon="home-16"></ifx-icon>
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
+
+    <ifx-action-list-item
+      item-title="Settings"
+      value="settings"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-icon slot="leading" icon="server-16"></ifx-icon>
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
+
+    <ifx-action-list-item
+      item-title="Profile"
+      description="Manage your profile information"
+      value="profile"
+      disabled="true"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-icon slot="leading" icon="user-16"></ifx-icon>
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
+
+    <ifx-action-list-item
+      item-title="Enterprise Resource Planning and Business Intelligence System"
+      description="Comprehensive enterprise solution that integrates all aspects of business operations including financial management and human resources."
+      value="erp"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-icon slot="leading" icon="chart-16"></ifx-icon>
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
   `;
     listEl.addEventListener('ifxActionListItemClick', (event) => {
         const customEvent = event;
@@ -311,37 +311,37 @@ export const WithImages = (args) => {
     const listEl = document.createElement('ifx-action-list');
     if (args.listAriaLabel)
         listEl.setAttribute('list-aria-label', args.listAriaLabel);
-    listEl.innerHTML = `
-    <ifx-action-list-item
-      item-title="${args.itemTitle || 'John Doe'}"
-      description="${args.description || 'Senior Developer'}"
-      value="john"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
-      ${args.href ? `href="${args.href}"` : ''}
-      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
-      ${args.disabled ? 'disabled="true"' : ''}>
-      <img slot="leading" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALFSURBVHgB7dy/SxthHMfxr6W9LJel6VAdagoaQXMQSaE4COnYQTr4p7bQVSi0FAxKUwTFwS5Jh8YlWXKLfb5PfDS9pP76nM9zgc97OSLxwBfPr1zAhfN+/0LYg3siDIqAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoIREIyAYAQEeyoBOmi35ehnR9LRSPIoKpVkpbYmb7e2xHfeAb9/+ypHnY75g2sSl8uSR8PBwNzzh0RRJJvNpvjMO+Dp8YnF2269k7xTRN+A3tfANB3lNvIm03umaSq+C7IGzqrX7crvXleeVyqyXH0t81IhAL/s7cnpyfHVa90QtlstmYeCA/46O7N4m8030jDr12F73+7Sq2adfLm0JEUv+DnwvP/HXhuXi3/DQGo9M53noeCAi4vjUaajbnzdt9dK5cXUe/M6N+ZZ8Cms01TXPJ26h5d4q+b1q2r1n/fpWe/zp4/2vb6PKjdViE1EN4xlA9Y301lHZHbtc3jpKL1CLgpiYY4xOuKyo05zeHIh8mF31244BwVCLAzgrCbx3u/s2MOy22SKghgcUJH0KLORJFM/z+K5ioQYFNAh6VU/hjmIm/BcWcRQBQOcRNLRd70D127Fc00iPsbn67sUBHA4GE4h6aMohdDnhNGz6FY81zViW0IU5CBtP/dmRphC6BS+D55Lf1cfkYUoyAiM4/JMJIVYryf2CfO97xloCgcZgStr/38a/RC8kPFLJTDvgFFUsptI3uk9dSPynfc1cD2pmyPLeMeMy7HkkeLpxrRRT8R33gH1wakemvXLJf1+JI90VOsO7o40Plvg/0zA4iYCRkAwAoIREIyAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoL9BS7b7t2PtL1XAAAAAElFTkSuQmCC" alt="User avatar" style="width: 100%; max-width: 40px; height: auto;">
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
-
-    <ifx-action-list-item
-      item-title="Jane Smith"
-      description="UI/UX Designer"
-      value="jane"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <img slot="leading" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALFSURBVHgB7dy/SxthHMfxr6W9LJel6VAdagoaQXMQSaE4COnYQTr4p7bQVSi0FAxKUwTFwS5Jh8YlWXKLfb5PfDS9pP76nM9zgc97OSLxwBfPr1zAhfN+/0LYg3siDIqAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoIREIyAYAQEeyoBOmi35ehnR9LRSPIoKpVkpbYmb7e2xHfeAb9/+ypHnY75g2sSl8uSR8PBwNzzh0RRJJvNpvjMO+Dp8YnF2269k7xTRN+A3tfANB3lNvIm03umaSq+C7IGzqrX7crvXleeVyqyXH0t81IhAL/s7cnpyfHVa90QtlstmYeCA/46O7N4m8030jDr12F73+7Sq2adfLm0JEUv+DnwvP/HXhuXi3/DQGo9M53noeCAi4vjUaajbnzdt9dK5cXUe/M6N+ZZ8Cms01TXPJ26h5d4q+b1q2r1n/fpWe/zp4/2vb6PKjdViE1EN4xlA9Y301lHZHbtc3jpKL1CLgpiYY4xOuKyo05zeHIh8mF31244BwVCLAzgrCbx3u/s2MOy22SKghgcUJH0KLORJFM/z+K5ioQYFNAh6VU/hjmIm/BcWcRQBQOcRNLRd70D127Fc00iPsbn67sUBHA4GE4h6aMohdDnhNGz6FY81zViW0IU5CBtP/dmRphC6BS+D55Lf1cfkYUoyAiM4/JMJIVYryf2CfO97xloCgcZgStr/38a/RC8kPFLJTDvgFFUsptI3uk9dSPynfc1cD2pmyPLeMeMy7HkkeLpxrRRT8R33gH1wakemvXLJf1+JI90VOsO7o40Plvg/0zA4iYCRkAwAoIREIyAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoL9BS7b7t2PtL1XAAAAAElFTkSuQmCC" alt="User avatar" style="width: 100%; max-width: 40px; height: auto;">
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
-
-    <ifx-action-list-item
-      item-title="Mike Johnson"
-      description="Product Manager"
-      value="mike"
-      disabled="true"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <img slot="leading" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALFSURBVHgB7dy/SxthHMfxr6W9LJel6VAdagoaQXMQSaE4COnYQTr4p7bQVSi0FAxKUwTFwS5Jh8YlWXKLfb5PfDS9pP76nM9zgc97OSLxwBfPr1zAhfN+/0LYg3siDIqAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoIREIyAYAQEeyoBOmi35ehnR9LRSPIoKpVkpbYmb7e2xHfeAb9/+ypHnY75g2sSl8uSR8PBwNzzh0RRJJvNpvjMO+Dp8YnF2269k7xTRN+A3tfANB3lNvIm03umaSq+C7IGzqrX7crvXleeVyqyXH0t81IhAL/s7cnpyfHVa90QtlstmYeCA/46O7N4m8030jDr12F73+7Sq2adfLm0JEUv+DnwvP/HXhuXi3/DQGo9M53noeCAi4vjUaajbnzdt9dK5cXUe/M6N+ZZ8Cms01TXPJ26h5d4q+b1q2r1n/fpWe/zp4/2vb6PKjdViE1EN4xlA9Y301lHZHbtc3jpKL1CLgpiYY4xOuKyo05zeHIh8mF31244BwVCLAzgrCbx3u/s2MOy22SKghgcUJH0KLORJFM/z+K5ioQYFNAh6VU/hjmIm/BcWcRQBQOcRNLRd70D127Fc00iPsbn67sUBHA4GE4h6aMohdDnhNGz6FY81zViW0IU5CBtP/dmRphC6BS+D55Lf1cfkYUoyAiM4/JMJIVYryf2CfO97xloCgcZgStr/38a/RC8kPFLJTDvgFFUsptI3uk9dSPynfc1cD2pmyPLeMeMy7HkkeLpxrRRT8R33gH1wakemvXLJf1+JI90VOsO7o40Plvg/0zA4iYCRkAwAoIREIyAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoL9BS7b7t2PtL1XAAAAAElFTkSuQmCC" alt="User avatar" style="width: 100%; max-width: 40px; height: auto;">
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
+    listEl.innerHTML = `
+    <ifx-action-list-item
+      item-title="${args.itemTitle || 'John Doe'}"
+      description="${args.description || 'Senior Developer'}"
+      value="john"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
+      ${args.href ? `href="${args.href}"` : ''}
+      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
+      ${args.disabled ? 'disabled="true"' : ''}>
+      <img slot="leading" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALFSURBVHgB7dy/SxthHMfxr6W9LJel6VAdagoaQXMQSaE4COnYQTr4p7bQVSi0FAxKUwTFwS5Jh8YlWXKLfb5PfDS9pP76nM9zgc97OSLxwBfPr1zAhfN+/0LYg3siDIqAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoIREIyAYAQEeyoBOmi35ehnR9LRSPIoKpVkpbYmb7e2xHfeAb9/+ypHnY75g2sSl8uSR8PBwNzzh0RRJJvNpvjMO+Dp8YnF2269k7xTRN+A3tfANB3lNvIm03umaSq+C7IGzqrX7crvXleeVyqyXH0t81IhAL/s7cnpyfHVa90QtlstmYeCA/46O7N4m8030jDr12F73+7Sq2adfLm0JEUv+DnwvP/HXhuXi3/DQGo9M53noeCAi4vjUaajbnzdt9dK5cXUe/M6N+ZZ8Cms01TXPJ26h5d4q+b1q2r1n/fpWe/zp4/2vb6PKjdViE1EN4xlA9Y301lHZHbtc3jpKL1CLgpiYY4xOuKyo05zeHIh8mF31244BwVCLAzgrCbx3u/s2MOy22SKghgcUJH0KLORJFM/z+K5ioQYFNAh6VU/hjmIm/BcWcRQBQOcRNLRd70D127Fc00iPsbn67sUBHA4GE4h6aMohdDnhNGz6FY81zViW0IU5CBtP/dmRphC6BS+D55Lf1cfkYUoyAiM4/JMJIVYryf2CfO97xloCgcZgStr/38a/RC8kPFLJTDvgFFUsptI3uk9dSPynfc1cD2pmyPLeMeMy7HkkeLpxrRRT8R33gH1wakemvXLJf1+JI90VOsO7o40Plvg/0zA4iYCRkAwAoIREIyAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoL9BS7b7t2PtL1XAAAAAElFTkSuQmCC" alt="User avatar" style="width: 100%; max-width: 40px; height: auto;">
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
+
+    <ifx-action-list-item
+      item-title="Jane Smith"
+      description="UI/UX Designer"
+      value="jane"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <img slot="leading" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALFSURBVHgB7dy/SxthHMfxr6W9LJel6VAdagoaQXMQSaE4COnYQTr4p7bQVSi0FAxKUwTFwS5Jh8YlWXKLfb5PfDS9pP76nM9zgc97OSLxwBfPr1zAhfN+/0LYg3siDIqAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoIREIyAYAQEeyoBOmi35ehnR9LRSPIoKpVkpbYmb7e2xHfeAb9/+ypHnY75g2sSl8uSR8PBwNzzh0RRJJvNpvjMO+Dp8YnF2269k7xTRN+A3tfANB3lNvIm03umaSq+C7IGzqrX7crvXleeVyqyXH0t81IhAL/s7cnpyfHVa90QtlstmYeCA/46O7N4m8030jDr12F73+7Sq2adfLm0JEUv+DnwvP/HXhuXi3/DQGo9M53noeCAi4vjUaajbnzdt9dK5cXUe/M6N+ZZ8Cms01TXPJ26h5d4q+b1q2r1n/fpWe/zp4/2vb6PKjdViE1EN4xlA9Y301lHZHbtc3jpKL1CLgpiYY4xOuKyo05zeHIh8mF31244BwVCLAzgrCbx3u/s2MOy22SKghgcUJH0KLORJFM/z+K5ioQYFNAh6VU/hjmIm/BcWcRQBQOcRNLRd70D127Fc00iPsbn67sUBHA4GE4h6aMohdDnhNGz6FY81zViW0IU5CBtP/dmRphC6BS+D55Lf1cfkYUoyAiM4/JMJIVYryf2CfO97xloCgcZgStr/38a/RC8kPFLJTDvgFFUsptI3uk9dSPynfc1cD2pmyPLeMeMy7HkkeLpxrRRT8R33gH1wakemvXLJf1+JI90VOsO7o40Plvg/0zA4iYCRkAwAoIREIyAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoL9BS7b7t2PtL1XAAAAAElFTkSuQmCC" alt="User avatar" style="width: 100%; max-width: 40px; height: auto;">
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
+
+    <ifx-action-list-item
+      item-title="Mike Johnson"
+      description="Product Manager"
+      value="mike"
+      disabled="true"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <img slot="leading" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALFSURBVHgB7dy/SxthHMfxr6W9LJel6VAdagoaQXMQSaE4COnYQTr4p7bQVSi0FAxKUwTFwS5Jh8YlWXKLfb5PfDS9pP76nM9zgc97OSLxwBfPr1zAhfN+/0LYg3siDIqAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoIREIyAYAQEeyoBOmi35ehnR9LRSPIoKpVkpbYmb7e2xHfeAb9/+ypHnY75g2sSl8uSR8PBwNzzh0RRJJvNpvjMO+Dp8YnF2269k7xTRN+A3tfANB3lNvIm03umaSq+C7IGzqrX7crvXleeVyqyXH0t81IhAL/s7cnpyfHVa90QtlstmYeCA/46O7N4m8030jDr12F73+7Sq2adfLm0JEUv+DnwvP/HXhuXi3/DQGo9M53noeCAi4vjUaajbnzdt9dK5cXUe/M6N+ZZ8Cms01TXPJ26h5d4q+b1q2r1n/fpWe/zp4/2vb6PKjdViE1EN4xlA9Y301lHZHbtc3jpKL1CLgpiYY4xOuKyo05zeHIh8mF31244BwVCLAzgrCbx3u/s2MOy22SKghgcUJH0KLORJFM/z+K5ioQYFNAh6VU/hjmIm/BcWcRQBQOcRNLRd70D127Fc00iPsbn67sUBHA4GE4h6aMohdDnhNGz6FY81zViW0IU5CBtP/dmRphC6BS+D55Lf1cfkYUoyAiM4/JMJIVYryf2CfO97xloCgcZgStr/38a/RC8kPFLJTDvgFFUsptI3uk9dSPynfc1cD2pmyPLeMeMy7HkkeLpxrRRT8R33gH1wakemvXLJf1+JI90VOsO7o40Plvg/0zA4iYCRkAwAoIREIyAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoL9BS7b7t2PtL1XAAAAAElFTkSuQmCC" alt="User avatar" style="width: 100%; max-width: 40px; height: auto;">
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
   `;
     listEl.addEventListener('ifxActionListItemClick', (event) => {
         const customEvent = event;