<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 actions-placement="default" full-width="false" direction="vertical" href="" target="_blank" aria-label="" aria-label-text="Card">
        <ifx-card-image object-fit="cover" position="right" src="https://raw.githubusercontent.com/Infineon/public-assets/main/ifx-placeholder.png" alt="Default" 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="actions">
          <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" read-only="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" read-only="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="true" 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" error="false">Menu Item</ifx-dropdown-item>
          <ifx-dropdown-item icon="c-info-16" error="false">Menu Item</ifx-dropdown-item>
          <ifx-dropdown-item icon="c-info-16" error="false">Menu Item</ifx-dropdown-item>
          <ifx-dropdown-item icon="c-info-16" error="false">Menu Item</ifx-dropdown-item>
          <ifx-dropdown-item icon="c-info-16" error="false">Menu Item</ifx-dropdown-item>
        </ifx-dropdown-menu>
      </ifx-dropdown>

<ifx-error-page img-alt="" type="403" headline="" description="" illustration-url="">
        <div slot="button">
          <ifx-button variant="primary" full-width="true">Go to homepage</ifx-button>
        </div>
        <div slot="button">
          <ifx-button variant="secondary" full-width="true">Get support</ifx-button>
        </div>
      </ifx-error-page>

<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" fixed="false" logo-href="http://google.com" logo-href-target="_self" footer-target="_blank" hide-menu-label="Hide Menu" footer-href-target="_blank">
        <ifx-sidebar-title>Menu Items</ifx-sidebar-title>
        <ifx-sidebar-item font-weight="normal" href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
        <ifx-sidebar-item font-weight="normal" href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
        <ifx-sidebar-item font-weight="normal" href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
        <ifx-sidebar-item font-weight="normal" href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
        <ifx-sidebar-item>
          <ifx-sidebar-item font-weight="normal" href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
          <ifx-sidebar-item font-weight="normal" icon="image-16">
            <ifx-sidebar-item font-weight="normal">Sub menu item</ifx-sidebar-item>
            <ifx-sidebar-item font-weight="normal" active="true">Sub menu item</ifx-sidebar-item>
            <ifx-sidebar-item font-weight="normal">Sub menu item</ifx-sidebar-item>
          </ifx-sidebar-item>
          <ifx-sidebar-item font-weight="normal" href="https://google.com" target="_blank">Menu Item</ifx-sidebar-item>
          <ifx-sidebar-item font-weight="normal" 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 font-weight="normal" href="https://google.com" target="_self" icon="image-16" number-indicator="" isactionitem="false" active="false">Item 1</ifx-sidebar-item>
        <ifx-sidebar-item font-weight="normal" 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" closable="false">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="" show-close-button="true" autocomplete="on"></ifx-search-bar>

<ifx-search-field size="l" show-delete-icon="" 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" show-suggestions="false" enable-history="false"></ifx-search-field>

<ifx-segmented-control caption="Caption text to describe the controls" label="Group Label" size="regular" name="segmented-control" value="" 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..." label="" caption="" placeholder-value="Placeholder" aria-select-label="Select" aria-search-label="Search options" aria-clear-label="Clear selection" aria-select-labelled-by="" aria-select-described-by="" error="false" disabled="false" read-only="false" required="false">
        <ifx-select-option value="a">Option A</ifx-select-option>
        <ifx-select-option value="b">Option B</ifx-select-option>
        <ifx-select-option value="c">Option C</ifx-select-option>
        <ifx-select-option value="d" disabled="">Option D (disabled)</ifx-select-option>
      </ifx-select>

<ifx-multiselect label="KPIs" placeholder="Select KPIs..." name="multiselect" disabled="false" read-only="false" required="true" show-search="true" show-select-all="true" show-expand-collapse="true" error="false" caption="" show-clear-button="true" no-results-message="No results found." show-no-results-message="true" search-placeholder="Search" select-all-label="Select all" expand-label="Expand" collapse-label="Collapse" aria-multi-select-label="Multi-select dropdown" aria-multi-select-labelled-by="" aria-multi-select-described-by="" aria-search-label="Search options" aria-clear-label="Clear all selections" aria-toggle-label="Toggle dropdown" aria-select-all-label="Select all options" aria-expand-all-label="Expand all categories" aria-collapse-all-label="Collapse all categories">
        <ifx-multiselect-group label="Revenue">
          <ifx-multiselect-option value="revenue-total">Total revenue</ifx-multiselect-option>
          <ifx-multiselect-option value="revenue-region">Revenue by region</ifx-multiselect-option>
        </ifx-multiselect-group>
        <ifx-multiselect-group label="Costs">
          <ifx-multiselect-option value="costs-total">Total costs</ifx-multiselect-option>
          <ifx-multiselect-option value="costs-category">Costs by category</ifx-multiselect-option>
        </ifx-multiselect-group>
      </ifx-multiselect>

<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" read-only="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" column-value-position="left"></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="true" 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" column-value-position="left" 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="" subline-position="left" label="" number="0">
        <ifx-tab header="Tab 1" icon="" icon-position="left" subline="" subline-position="left" 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="" subline-position="left" 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="" subline-position="left" 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" success="false" 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>

<form id="form-associated-demo" class="demo-form__layout">
  <ifx-text-field
    name="fullName"
    label="Full name"
    placeholder="Ada Lovelace"
    show-delete-icon="true"
  ></ifx-text-field>

  <ifx-textarea
    name="message"
    label="Message"
    placeholder="Write a longer message"
    full-width="true"
  ></ifx-textarea>

  <ifx-select name="country" label="Country" placeholder-value="Select a country">
    <ifx-select-option value="de">Germany</ifx-select-option>
    <ifx-select-option value="us">United States</ifx-select-option>
    <ifx-select-option value="jp">Japan</ifx-select-option>
  </ifx-select>

  <ifx-checkbox name="newsletter" value="yes">Subscribe to newsletter</ifx-checkbox>

  <ifx-radio-button-group show-group-label="true" group-label-text="Preferred contact method">
    <ifx-radio-button name="contactMethod" value="email" checked="true">Email contact</ifx-radio-button>
    <ifx-radio-button name="contactMethod" value="phone">Phone contact</ifx-radio-button>
  </ifx-radio-button-group>

  <ifx-segmented-control name="priority" label="Primary priority" required="true">
    <ifx-segment value="high" selected="true">High</ifx-segment>
    <ifx-segment value="low">Low</ifx-segment>
  </ifx-segmented-control>

  <ifx-segmented-control name="priority" label="Secondary priority" required="true">
    <ifx-segment value="high">High</ifx-segment>
    <ifx-segment value="low" selected="true">Low</ifx-segment>
  </ifx-segmented-control>

  <ifx-switch name="termsAccepted" value="accepted">Accept terms</ifx-switch>

  <ifx-slider
    name="satisfaction"
    min="0"
    max="100"
    step="1"
    value="50"
    show-percentage="true"
  ></ifx-slider>

  <ifx-counter name="quantity" value="1"></ifx-counter>

  <div class="demo-form__actions">
    <ifx-button type="submit" variant="primary">Submit</ifx-button>
    <ifx-button type="reset" variant="secondary">Reset</ifx-button>
  </div>
</form>