<ifx-accordion auto-collapse="false">
        <ifx-accordion-item caption="Label" open="true" aria-level-number="3" icon="">Content for Initial Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-accordion-item>
        <ifx-accordion-item caption="Label" open="false" aria-level-number="3" icon="">Content for Item #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-accordion-item>
        <ifx-accordion-item caption="Label" open="false" aria-level-number="3" icon="">Content for Item #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-accordion-item>
      </ifx-accordion>

<ifx-action-list list-aria-label="Navigation menu">
        <ifx-action-list-item item-title="Dashboard" description="View your main dashboard" value="dashboard" item-aria-label="Navigation item">
          <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
        </ifx-action-list-item>
        <ifx-action-list-item item-title="Settings" value="settings" item-aria-label="Navigation item">
          <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" item-aria-label="Navigation item">
          <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" item-aria-label="Navigation item">
          <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
        </ifx-action-list-item>
      </ifx-action-list>

<ifx-alert aria-live-text="assertive" variant="primary" icon="c-info-16" closable="true">Attention! This is an alert message — check it out!</ifx-alert>

<ifx-ai-label divider="true" variant="label"></ifx-ai-label>

<ifx-button type="button" aria-label-text="Button" variant="primary" size="m" target="_blank" theme="default" full-width="false" disabled="false" href="false">Button</ifx-button>

<ifx-card direction="vertical" href="" target="_blank" aria-label="" aria-label-text="Card">
        <ifx-card-image position="right" src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg" alt="Coffee" slot="img"></ifx-card-image>
        <ifx-card-overline>Overline</ifx-card-overline>
        <ifx-card-headline>Headline</ifx-card-headline>
        <ifx-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</ifx-card-text>
        <ifx-card-links slot="buttons">
          <ifx-button variant="primary">Button</ifx-button>
          <ifx-button variant="secondary">Button</ifx-button>
        </ifx-card-links>
      </ifx-card>

<ifx-checkbox error="false" disabled="false" checked="false" size="s" indeterminate="false" name="checkbox">Text</ifx-checkbox>

<ifx-checkbox-group alignment="vertical" group-label-text="Group Label" caption-text="Caption text, description, error notification" size="m" show-group-label="false" show-caption="false" show-caption-icon="false" required="false">
        <ifx-checkbox value="0" size="m">Option 0</ifx-checkbox>
        <ifx-checkbox value="1" size="m">Option 1</ifx-checkbox>
        <ifx-checkbox value="2" size="m">Option 2</ifx-checkbox>
      </ifx-checkbox-group>

<ifx-chip placeholder="Label" size="medium" variant="single" theme="outlined" icon="" aria-label="Chip" read-only="false" value="Item Value" disabled="false">
        <ifx-chip-item value="Item Value 1">Item Label 1</ifx-chip-item>
        <ifx-chip-item value="Item Value 2">Item Label 2</ifx-chip-item>
        <ifx-chip-item value="Item Value 3">Item Label 3</ifx-chip-item>
        <ifx-chip-item value="Item Value 4">Item Label 4</ifx-chip-item>
      </ifx-chip>

<ifx-content-switcher>
        <ifx-content-switcher-item value="item 1">
          <ifx-icon icon="applications-16"></ifx-icon>
        </ifx-content-switcher-item>
        <ifx-content-switcher-item value="item 2">
          <ifx-icon icon="applications-16"></ifx-icon>
        </ifx-content-switcher-item>
        <ifx-content-switcher-item value="item 3">
          <ifx-icon icon="applications-16"></ifx-icon>
        </ifx-content-switcher-item>
        <ifx-content-switcher-item value="item 4">
          <ifx-icon icon="applications-16"></ifx-icon>
        </ifx-content-switcher-item>
      </ifx-content-switcher>

<ifx-date-picker name="date-picker" error="false" disabled="false" size="s" success="false" value="" max="" min="" label="Label Text" caption="Caption text, description, error notification." aria-label-text="Date Picker" required="false" autocomplete="on" type="date"></ifx-date-picker>

<ifx-dropdown placement="bottom-start" default-open="false" no-close-on-outside-click="false" no-close-on-menu-click="false" no-append-to-body="false" disabled="false">
        <ifx-dropdown-trigger-button variant="primary">Dropdown</ifx-dropdown-trigger-button>
        <ifx-dropdown-menu size="m">
          <ifx-dropdown-item icon="c-info-16" target="_self" href="" error="false">Menu Item</ifx-dropdown-item>
          <ifx-dropdown-item icon="c-info-16" target="_self" href="" error="false">Menu Item</ifx-dropdown-item>
          <ifx-dropdown-item icon="c-info-16" target="_self" href="" error="false">Menu Item</ifx-dropdown-item>
          <ifx-dropdown-item icon="c-info-16" target="_self" href="" error="false">Menu Item</ifx-dropdown-item>
          <ifx-dropdown-item icon="c-info-16" target="_self" href="" error="false">Menu Item</ifx-dropdown-item>
        </ifx-dropdown-menu>
      </ifx-dropdown>

<ifx-footer copyright-text="© 1999 - 2026 Infineon Technologies AG">
        <div slot="socials">
          <ifx-link variant="title" href="http://facebook.com/infineon" aria-label="Follow us on Facebook">
            <ifx-icon icon="facebook"></ifx-icon>
          </ifx-link>
          <ifx-link variant="title" href="http://youtube.com/infineon" aria-label="Follow us on Youtube">
            <ifx-icon icon="youtube"></ifx-icon>
          </ifx-link>
          <ifx-link variant="title" href="http://instagram.com/infineon" aria-label="Follow us on Instagram">
            <ifx-icon icon="instagram"></ifx-icon>
          </ifx-link>
          <ifx-link variant="title" href="http://linkedin.com/infineon" aria-label="Follow us on LinkedIn">
            <ifx-icon icon="linkedin"></ifx-icon>
          </ifx-link>
          <ifx-link variant="title" href="http://xing.com/infineon" aria-label="Follow us on Xing">
            <ifx-icon icon="xing"></ifx-icon>
          </ifx-link>
        </div>
        <div slot="info">
          <ifx-link variant="menu" href="https://yourwebsite.com/terms" target="_blank">Terms</ifx-link>
          <ifx-link variant="menu" href="https://yourwebsite.com/imprint" target="_blank">Imprint</ifx-link>
          <ifx-link variant="menu" href="https://yourwebsite.com/privacy-policy" target="_blank">Privacy policy</ifx-link>
          <ifx-link variant="menu" href="https://yourwebsite.com/glossary" target="_blank">Glossary</ifx-link>
        </div>
      </ifx-footer>

<ifx-icon-button shape="round" variant="primary" icon="c-info-16" href="" target="_blank" size="m" aria-label-text="Icon Button" disabled="false"></ifx-icon-button>

<ifx-indicator variant="number" number="1" inverted="false"></ifx-indicator>

<ifx-link href="" aria-label="Link" target="_blank" size="m" variant="bold" download="" disabled="false">Link</ifx-link>

<ifx-navbar show-logo-and-appname="true" application-name="Application name" fixed="false" logo-href="http://google.com" logo-href-target="_self">
        <ifx-navbar-item icon="" slot="left-item" target="_self" href="" hide-on-mobile="true">
          <ifx-navbar-item icon="">
            <ifx-navbar-item>
              <ifx-navbar-item href="http://google.com" target="_blank">Link Layer 3 Nested Item 1</ifx-navbar-item>
              <ifx-navbar-item>Layer 3 Nested Item 2</ifx-navbar-item>
              <ifx-navbar-item>Layer 3 Nested Item 3</ifx-navbar-item>
              <ifx-navbar-item>Layer 3 Nested Item 4</ifx-navbar-item>
            </ifx-navbar-item>
            <ifx-navbar-item>Layer 2 Nested Item 3</ifx-navbar-item>
            <ifx-navbar-item>Layer 2 Nested Item 4</ifx-navbar-item>
            <ifx-navbar-item>Layer 2 Nested Item 5</ifx-navbar-item>
          </ifx-navbar-item>
          <ifx-navbar-item>
            <ifx-navbar-item>Layer 2 Item 1</ifx-navbar-item>
            <ifx-navbar-item>Layer 2 Item 2</ifx-navbar-item>
            <ifx-navbar-item>Layer 2 Item 3</ifx-navbar-item>
          </ifx-navbar-item>
          <ifx-navbar-item>Nested Item 3</ifx-navbar-item>
          <ifx-navbar-item>
            <ifx-navbar-item>Nested Item 4</ifx-navbar-item>
          </ifx-navbar-item>
        </ifx-navbar-item>
        <ifx-navbar-item href="" target="_self" slot="left-item" icon="" show-label="true">Menu Item</ifx-navbar-item>
        <ifx-navbar-item slot="left-item">
          <ifx-navbar-item>Item1</ifx-navbar-item>
          <ifx-navbar-item>Item2</ifx-navbar-item>
        </ifx-navbar-item>
        <ifx-search-bar slot="search-bar-left" is-open="false"></ifx-search-bar>
        <ifx-navbar-item number-indicator="" slot="right-item" target="_blank" href="http://google.com" hide-on-mobile="" show-label="false" icon="image-16"></ifx-navbar-item>
        <ifx-navbar-item dot-indicator="false" slot="right-item" hide-on-mobile="" show-label="false" icon="image-16"></ifx-navbar-item>
        <ifx-navbar-profile user-name="" slot="right-item" image-url="" show-label="true" href="" target="_self" alt="profile image"></ifx-navbar-profile>
      </ifx-navbar>

<ifx-sidebar application-name="Application Name" collapsible="false" collapsed="false" show-header="true" show-footer="true" initial-collapse="true" terms-of-use="https://yourwebsite.com/terms" imprint="https://yourwebsite.com/imprint" privacy-policy="https://yourwebsite.com/privacy-policy" copyright-text="© 1999 - 2026 Infineon Technologies AG" position="left" hide-menu-label="Hide Menu">
        <ifx-sidebar-title>Menu Items</ifx-sidebar-title>
        <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
        <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
        <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
        <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
        <ifx-sidebar-item>
          <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
          <ifx-sidebar-item icon="image-16">
            <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>
            <ifx-sidebar-item active="true">Sub menu item</ifx-sidebar-item>
            <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>
          </ifx-sidebar-item>
          <ifx-sidebar-item href="https://google.com" target="_blank">Menu Item</ifx-sidebar-item>
          <ifx-sidebar-item href="https://google.com" target="_blank">Menu Item</ifx-sidebar-item>
        </ifx-sidebar-item>
        <ifx-sidebar-title>Items group</ifx-sidebar-title>
        <ifx-sidebar-item href="https://google.com" target="_self" icon="image-16" number-indicator="" isactionitem="false" active="false">Item 1</ifx-sidebar-item>
        <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Item 2</ifx-sidebar-item>
      </ifx-sidebar>

<ifx-notification icon="c-check-16" variant="success" link-text="Link" link-href="https://www.example.com" link-target="_blank">Sample Notification</ifx-notification>

<ifx-pagination total="50" current-page="1" show-items-per-page="" items-per-page='[{"value":"10","selected":true}, {"value":"20","selected":false}, {"value":"30","selected":false}, {"value":"all","selected":false}]' items-per-page-label="Result per Pages"></ifx-pagination>

<ifx-progress-bar value="50" size="m" show-label="false"></ifx-progress-bar>

<ifx-radio-button size="s" name="radio-button" value="radio" error="false" disabled="false" checked="false">Text</ifx-radio-button>

<ifx-radio-button-group alignment="vertical" group-label-text="Group Label" caption-text="Caption text, description, error notification" size="m" show-group-label="false" show-caption="false" show-caption-icon="false" required="false">
        <ifx-radio-button value="0" size="m">Option 0</ifx-radio-button>
        <ifx-radio-button value="1" size="m">Option 1</ifx-radio-button>
        <ifx-radio-button value="2" size="m">Option 2</ifx-radio-button>
      </ifx-radio-button-group>

<ifx-search-bar is-open="true" disabled="false" value="" autocomplete="on"></ifx-search-bar>

<ifx-search-field size="m" show-delete-icon="true" show-suggestions="false" enable-history="true" max-suggestions="10" max-history-items="5" history-key="ifx-search-history" history-header-text="Recent Searches" value="" autocomplete="on" placeholder="Search..." aria-label-text="Search field" delete-icon-aria-label="Clear search" history-delete-aria-label="Remove from history" dropdown-aria-label="Search suggestions and history" suggestion-aria-label="Search suggestion" history-item-aria-label="Search history item" disabled="false"></ifx-search-field>

<ifx-segmented-control caption="Caption text to describe the controls" label="Group Label" size="regular" error="false" required="false">
        <ifx-segment value="Value1" icon="star-16"></ifx-segment>
        <ifx-segment value="Value2" icon="star-16"></ifx-segment>
        <ifx-segment value="Value3" icon="star-16"></ifx-segment>
        <ifx-segment value="Value4" icon="star-16"></ifx-segment>
        <ifx-segment value="Value5" icon="star-16"></ifx-segment>
      </ifx-segmented-control>

<ifx-select size="m" placeholder="true" show-clear-button="" show-search="" search-placeholder-value="Search..." required="" label="" caption="" placeholder-value="Placeholder" options='[{"value":"a","label":"option a","selected":false},{"value":"b","label":"option b","selected":false},{"value":"c","label":"option c","selected":false}]' error="false" disabled="false"></ifx-select>

<ifx-spinner aria-label-text="" variant="default" size="m" inverted="false"></ifx-spinner>

<ifx-status label="text" color="orange-500" border="true"></ifx-status>

<ifx-stepper active-step="2" aria-label-text="" aria-current-text="" show-step-number="false" variant="default" indicator-position="left">
        <ifx-step>Step Label 1</ifx-step>
        <ifx-step>Step Label 2</ifx-step>
        <ifx-step>Step Label 3</ifx-step>
        <ifx-step>Step Label 4</ifx-step>
        <ifx-step>Step Label 5</ifx-step>
      </ifx-stepper>

<ifx-stepper active-step="2" aria-label-text="" aria-current-text="" indicator-position="left" variant="compact" show-step-number="false">
        <ifx-step>Step Label 1</ifx-step>
        <ifx-step>Step Label 2</ifx-step>
        <ifx-step>Step Label 3</ifx-step>
        <ifx-step>Step Label 4</ifx-step>
        <ifx-step>Step Label 5</ifx-step>
      </ifx-stepper>

<ifx-switch name="switch" value="on" checked="false" disabled="false">Switch</ifx-switch>

<ifx-basic-table cols='[{"headerName":"ID","field":"id","sortable":true,"sort":"desc","unSortIcon":true},{"headerName":"Item","field":"item","sortable":true,"unSortIcon":true},{"headerName":"Price","field":"price"},{"headerName":"Date","field":"date"}]' rows='[{"id":1,"item":"Item 1","price":356,"date":"2025-05-11"},{"id":2,"item":"Item 2","price":55,"date":"2025-03-26"},{"id":3,"item":"Item 3","price":24},{"id":4,"item":"Item 4","price":874,"date":"2025-04-30"},{"id":5,"item":"Item 5","price":689,"date":"2025-09-14"},{"id":6,"item":"Item 6","price":46},{"id":7,"item":"Item 7","price":421,"date":"2026-07-25"},{"id":8,"item":"Item 8","price":17,"date":"2026-06-28"},{"id":9,"item":"Item 9","price":752},{"id":10,"item":"Item 10","price":73,"date":"2026-01-27"},{"id":11,"item":"Item 11","price":94,"date":"2026-10-31"},{"id":12,"item":"Item 12","price":846}]' table-height="auto" row-height="default" variant="default"></ifx-basic-table>

<ifx-table row-height="default" cols='[{"headerName":"ID","field":"id","sortable":true,"sort":"desc","unSortIcon":true},{"headerName":"Item","field":"item","sortable":true,"unSortIcon":true},{"headerName":"Price","field":"price"},{"headerName":"Date","field":"date"}]' rows='[{"id":"1","item":"Item 1","price":356,"date":"2025-06-25"},{"id":"2","item":"Item 2","price":55,"date":"2025-03-26"},{"id":"3","item":"Item 3","price":24},{"id":"4","item":"x","price":874},{"id":"5","item":"x","price":689},{"id":"6","item":"x","price":46},{"id":"7","item":"Item 7","price":421},{"id":"8","item":"Item 8","price":17},{"id":"9","item":"x","price":752},{"id":"10","item":"Item 10","price":73},{"id":"11","item":"x","price":94}]' table-height="auto" pagination-items-per-page='[{"value":"10","selected":true}, {"value":"20","selected":false}, {"value":"30","selected":false}, {"value":"all","selected":false}]' filter-orientation="none" variant="default" fit-column="false" column-min-width="200" column-width="100" headline="Matching results" headline-number="0" pagination="false" server-side-pagination="false" show-loading="false" enable-selection="false" fit-columns="false"></ifx-table>

<ifx-tabs orientation="horizontal" active-tab-index="0" full-width="false" position-sticky="false" subline="" label="" number="0">
        <ifx-tab header="Tab 1" icon="" icon-position="left" subline="" label="" number="0">Content for Tab #1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-tab>
        <ifx-tab header="Tab 2" disabled="false" icon="" icon-position="left" subline="" label="" number="0">Content for Tab #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-tab>
        <ifx-tab header="Tab 3" icon="" icon-position="left" subline="" label="" number="0">Content for Tab #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.</ifx-tab>
      </ifx-tabs>

<ifx-text-field error="false" size="m" icon="" success="false" placeholder="Placeholder" read-only="false" caption="Caption" label="Label" required="true" name="text-field" show-delete-icon="false" value="" autocomplete="on" type="text" internal-id="text-field" aria-label="text field for user input" disabled="false" maxlength=""></ifx-text-field>

<ifx-textarea caption="Caption text, description, error notification" cols="43" error="false" label="Label Text" name="textarea" placeholder="Placeholder" required="true" read-only="false" resize="both" rows="5" value="" wrap="soft" full-width="false" disabled="false"></ifx-textarea>

<ifx-tooltip text="Hi, I'm a tooltip" variant="compact" position="auto" icon="c-info-16" aria-label-text="Tooltip with important information" header="Tooltip headline">I'm the tooltip reference element - Please hover me</ifx-tooltip>

<ifx-modal
    id="modal"
    caption="Modal Title"
    caption-aria-label="Additional information for caption"
    close-button-aria-label="Close modal"
    variant="default"
    close-on-overlay-click="false"
    show-close-button="true"
    size="s">
    <div slot="content">
      <span>Modal content</span>
    </div>
    <div slot="buttons">
      <ifx-button variant="secondary">Cancel</ifx-button>
      <ifx-button>OK</ifx-button>
    </div>
  </ifx-modal>
  <ifx-button id="open-modal">Open Modal</ifx-button>

  <script>
    const modal = document.getElementById('modal');
    const openButton = document.getElementById('open-modal');
    
    openButton.addEventListener('click', () => {
      modal.opened = true;
    });
    
    modal.addEventListener('ifxOpen', (event) => {
      console.log('ifxOpen:', event.detail);
    });
    
    modal.addEventListener('ifxClose', (event) => {
      console.log('ifxClose:', event.detail);
    });
  </script>