@pokle/basecoat 0.3.10-beta2.pokle

package/src/jinja/command.html.jinja

@@ -0,0 +1,206 @@
+{#
+  Renders a standalone command menu component with search and keyboard navigation.
+
+  @param id {string} [optional] - Unique identifier for the command component.
+  @param items {array} [optional] - Array of items to render (alternative to using caller).
+  @param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input.
+  @param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param input_attrs {object} [optional] - Additional HTML attributes for the search input.
+  @param menu_attrs {object} [optional] - Additional HTML attributes for the menu div.
+#}
+{% macro command(
+  id=None,
+  items=None,
+  placeholder="Type a command or search...",
+  empty_text="No results found.",
+  main_attrs={},
+  input_attrs={},
+  menu_attrs={}
+) %}
+{% set id = id or ("command-" ~ range(100000, 999999) | random | string) %}
+<div
+  id="{{ id }}"
+  class="command {{ main_attrs.class }}"
+  aria-label="Command menu"
+  {% for key, value in main_attrs.items() %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <header>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+    <input
+      type="text"
+      id="{{ id }}-input"
+      placeholder="{{ placeholder }}"
+      autocomplete="off"
+      autocorrect="off"
+      spellcheck="false"
+      aria-autocomplete="list"
+      role="combobox"
+      aria-expanded="true"
+      aria-controls="{{ id }}-menu"
+      {% for key, value in input_attrs.items() %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+  </header>
+  <div
+    role="menu"
+    id="{{ id }}-menu"
+    aria-orientation="vertical"
+    data-empty="{{ empty_text }}"
+    class="scrollbar {{ menu_attrs.class }}"
+    {% for key, value in menu_attrs.items() %}
+      {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+    {% endfor %}
+  >
+    {% if items and items|length > 0 %}
+      {{ render_command_items(items, id ~ "-items" if id else "items") }}
+    {% else %}
+      {{ caller() if caller }}
+    {% endif %}
+  </div>
+</div>
+{% endmacro %}
+
+{#
+  Renders a command dialog (modal command palette).
+
+  @param id {string} [optional] - Unique identifier for the command dialog.
+  @param items {array} [optional] - Array of items to render (alternative to using caller).
+  @param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input.
+  @param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search.
+  @param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog element.
+  @param input_attrs {object} [optional] - Additional HTML attributes for the search input.
+  @param menu_attrs {object} [optional] - Additional HTML attributes for the menu div.
+  @param open {boolean} [optional] [default=False] - Whether the command dialog should be open initially.
+#}
+{% macro command_dialog(
+  id=None,
+  items=None,
+  placeholder="Type a command or search...",
+  empty_text="No results found.",
+  dialog_attrs={},
+  input_attrs={},
+  menu_attrs={},
+  open=False
+) %}
+{% set id = id or ("command-dialog-" ~ range(100000, 999999) | random | string) %}
+<dialog
+  id="{{ id }}"
+  class="dialog command-dialog {{ dialog_attrs.class }}"
+  aria-label="Command menu"
+  {% if open %}open{% endif %}
+  onclick="if (event.target === this) this.close()"
+  {% for key, value in dialog_attrs.items() %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <div class="command">
+    <header>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      <input
+        type="text"
+        id="{{ id }}-input"
+        placeholder="{{ placeholder }}"
+        autocomplete="off"
+        autocorrect="off"
+        spellcheck="false"
+        aria-autocomplete="list"
+        role="combobox"
+        aria-expanded="true"
+        aria-controls="{{ id }}-menu"
+        {% for key, value in input_attrs.items() %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+    </header>
+    <div
+      role="menu"
+      id="{{ id }}-menu"
+      aria-orientation="vertical"
+      data-empty="{{ empty_text }}"
+      class="scrollbar {{ menu_attrs.class }}"
+      {% for key, value in menu_attrs.items() %}
+        {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+      {% endfor %}
+    >
+      {% if items and items|length > 0 %}
+        {{ render_command_items(items, id ~ "-items" if id else "items") }}
+      {% else %}
+        {{ caller() if caller }}
+      {% endif %}
+    </div>
+    <button type="button" aria-label="Close dialog" onclick="this.closest('dialog').close()">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+    </button>
+  </div>
+</dialog>
+{% endmacro %}
+
+{# 
+  Renders a list of items for the command component.
+
+  @param items {array} - Array of items to render. Each item can be:
+    - { type: "item", label: "Text or HTML", icon: "HTML", url: "href", keywords: "search terms", disabled: true, attrs: {} }
+    - { type: "group", label: "Group Title", items: [...] }
+    - { type: "separator" }
+    Note: Use attrs to add data-label for alternative search text if needed. If url is provided, renders as <a role="menuitem"> instead of <div role="menuitem">. Label supports HTML (marked as safe).
+  @param parent_id_prefix {string} [optional] - The prefix for the item id.
+#}
+{% macro render_command_items(items, parent_id_prefix="items") %}
+  {% for item in items %}
+    {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
+    {% if item.type == "group" %}
+      {% set group_label_id = item.id if item.id else "group-label-" + item_id %}
+      <div
+        role="group"
+        aria-labelledby="{{ group_label_id }}"
+        {% if item.attrs %}
+          {% for key, value in item.attrs.items() %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
+      >
+        <span role="heading" id="{{ group_label_id }}">{{ item.label | safe }}</span>
+        {{ render_command_items(item['items'], item_id) if item['items'] }}
+      </div>
+    {% elif item.type == "separator" %}
+      <hr role="separator" />
+    {% elif item.type == "item" or not item.type %}
+      {% if item.url %}
+        <a
+          id="{{ item_id }}"
+          href="{{ item.url }}"
+          role="menuitem"
+          {% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
+          {% if item.disabled %}aria-disabled="true"{% endif %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs.items() %}
+              {% if key != "href" %}{{ key }}="{{ value }}"{% endif %}
+            {% endfor %}
+          {% endif %}
+        >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
+          {{ item.label | safe }}
+        </a>
+      {% else %}
+        <div
+          id="{{ item_id }}"
+          role="menuitem"
+          {% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
+          {% if item.disabled %}aria-disabled="true"{% endif %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs.items() %}
+              {{ key }}="{{ value }}"
+            {% endfor %}
+          {% endif %}
+        >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
+          {{ item.label | safe }}
+        </div>
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+{% endmacro %}

package/src/jinja/dialog.html.jinja

@@ -0,0 +1,94 @@
+{#
+  Renders a dialog component with optional trigger, header, body, and footer.
+
+  @param id {string} - Unique identifier for the dialog component.
+  @param trigger {string} [optional] - Text or HTML for the button that triggers the dialog.
+  @param title {string} [optional] - Title text displayed in the dialog header.
+  @param description {string} [optional] - Description text displayed below the title.
+  @param footer {string} [optional] - HTML content for the dialog footer.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
+  @param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog content container.
+  @param header_attrs {object} [optional] - Additional HTML attributes for the dialog header.
+  @param body_attrs {object} [optional] - Additional HTML attributes for the dialog body section.
+  @param footer_attrs {object} [optional] - Additional HTML attributes for the dialog footer.
+  @param open {boolean} [optional] [default=false] - Whether the dialog should be open initially.
+  @param close_button {boolean} [optional] [default=true] - Whether to include a close button.
+  @param close_on_overlay_click {boolean} [optional] [default=true] - Whether clicking the overlay closes the dialog.
+#}
+{% macro dialog(
+  id=None,
+  trigger=None,
+  title=None,
+  description=None,
+  footer=None,
+  dialog_attrs={},
+  trigger_attrs={},
+  header_attrs={},
+  body_attrs={},
+  footer_attrs={},
+  open=false,
+  close_button=true,
+  close_on_overlay_click=true
+) %}
+{% set id = id or ("dialog-" + (range(100000, 999999) | random | string)) %}
+{% if trigger %}
+<button
+  type="button"
+  onclick="document.getElementById('{{ id }}').showModal()"
+  {% for key, value in trigger_attrs.items() %}
+    {{ key }}="{{ value }}"
+  {% endfor %}
+>
+  {{ trigger | safe }}
+</button>
+{% endif %}
+<dialog
+  id="{{ id }}"
+  class="dialog {{ dialog_attrs.class }}"
+  aria-labelledby="{{ id }}-title"
+  {% if description %}aria-describedby="{{ id }}-description"{% endif %}
+  {% if close_on_overlay_click %}onclick="if (event.target === this) this.close()"{% endif %}
+  {% for key, value in dialog_attrs.items() %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <div>
+    {% if title or description %}
+      <header
+        {% for key, value in header_attrs.items() %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        <h2 id="{{ id }}-title">{{ title | safe }}</h2>
+        {% if description %}<p id="{{ id }}-description">{{ description | safe }}</p>{% endif %}
+      </header>
+    {% endif %}
+    {% if caller %}
+      <section
+        {% for key, value in body_attrs.items() %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        {{ caller() }}
+      </section>
+    {% endif %}
+    {% if footer %}
+      <footer
+        {% for key, value in footer_attrs.items() %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        {{ footer | safe }}
+      </footer>
+    {% endif %}
+    {% if close_button %}
+      <form method="dialog">
+        <button aria-label="Close dialog">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      </button>
+      </form>
+    {% endif %}
+  </div>
+</dialog>
+{% endmacro %}

package/src/jinja/dropdown-menu.html.jinja

@@ -0,0 +1,124 @@
+{#
+  Renders a dropdown menu component.
+
+  @param id {string} [optional] - Unique identifier for the dropdown component.
+  @param trigger {string} [optional] - HTML content for the button that triggers the dropdown.
+  @param items {array} [optional] - Array of menu items for the dropdown.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
+  @param popover_attrs {object} [optional] - Additional HTML attributes for the dropdown content div.
+#}
+{% macro dropdown_menu(
+  trigger,
+  id=None,
+  items=None,
+  main_attrs={},
+  trigger_attrs={},
+  popover_attrs={},
+  menu_attrs={}
+) %}
+{% set id = id or ("dropdown-menu-" + (range(100000, 999999) | random | string)) %}
+
+<div
+  id="{{ id }}"
+  class="dropdown-menu {{ main_attrs.class }}"
+  {% for key, value in main_attrs.items() %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <button
+    type="button"
+    id="{{ id }}-trigger"
+    aria-haspopup="menu"
+    aria-controls="{{ id }}-menu"
+    aria-expanded="false"
+    {% for key, value in trigger_attrs.items() %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {{ trigger | safe }}
+  </button>
+  <div
+    id="{{ id }}-popover"
+    data-popover
+    aria-hidden="true"
+    {% for key, value in popover_attrs.items() %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    <div
+      role="menu"
+      id="{{ id }}-menu"
+      aria-labelledby="{{ id }}-trigger"
+      {% for key, value in menu_attrs.items() %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+      {% if items %}
+        {{ render_dropdown_items(items, id ~ "-items" if id else "items") }}
+      {% else %}
+        {{ caller() if caller }}
+      {% endif %}
+    </div>
+  </div>
+</div>
+{% endmacro %}
+
+{#
+  Renders dropdown menu items recursively.
+
+  @param items {array} - The array of items to render.
+  @param parent_id_prefix {string} [optional] - Prefix for generating element IDs.
+#}
+{% macro render_dropdown_items(items, parent_id_prefix="items") %}
+  {% for item in items %}
+    {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
+
+    {% if item.type == "group" %}
+      {% set group_label_id = item.id if item.id else "group-label-" + item_id %}
+      <div
+        role="group"
+        aria-labelledby="{{ group_label_id }}"
+        {% if item.attrs %}
+          {% for key, value in item.attrs.items() %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
+      >
+        <div role="heading" id="{{ group_label_id }}">{{ item.label }}</div>
+        {{ render_dropdown_items(item['items'], item_id) if item['items'] }}
+      </div>
+    {% elif item.type == "separator" %}
+      <hr role="separator" />
+    {% elif item.type == "item" or not item.type %}
+      {% if item.url %}
+        <a
+          id="{{ item_id }}"
+          role="menuitem"
+          href="{{ item.url }}"
+          {% if item.attrs %}
+            {% for key, value in item.attrs.items() %}
+              {% if key != "url" %} {{ key }}="{{ value }}" {% endif %}
+            {% endfor %}
+          {% endif %}
+        >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
+          {{ item.label | safe }}
+        </a>
+      {% else %}
+        <div
+          id="{{ item_id }}"
+          role="menuitem"
+          {% if item.attrs %}
+            {% for key, value in item.attrs.items() %}
+              {{ key }}="{{ value }}"
+            {% endfor %}
+          {% endif %}
+        >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
+          {{ item.label | safe }}
+        </div>
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+{% endmacro %}

package/src/jinja/popover.html.jinja

@@ -0,0 +1,48 @@
+{#
+  Renders a generic popover component, often used internally by other components like dropdowns or selects.
+
+  @param id {string} [optional] - Unique identifier for the popover component.
+  @param trigger {string} [optional] - HTML content for the element that triggers the popover.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger element.
+  @param popover_attrs {object} [optional] - Additional HTML attributes for the popover content div.
+#}
+{% macro popover(
+  trigger,
+  id=None,
+  main_attrs={},
+  trigger_attrs={},
+  popover_attrs={}
+) %}
+{% set id = id or ("popover-" + (range(100000, 999999) | random | string)) %}
+
+<div
+  id="{{ id }}"
+  class="popover {{ main_attrs.class }}"
+  {% for key, value in main_attrs.items() %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <button
+    id="{{ id }}-trigger"
+    type="button"
+    aria-expanded="false"
+    aria-controls="{{ id }}-popover"
+    {% for key, value in trigger_attrs.items() %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {{ trigger | safe }}
+  </button>
+  <div
+    id="{{ id }}-popover"
+    data-popover
+    aria-hidden="true"
+    {% for key, value in popover_attrs.items() %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  > 
+    {{ caller() if caller }}
+  </div>
+</div>
+{% endmacro %}

package/src/jinja/select.html.jinja

@@ -0,0 +1,196 @@
+{#
+  Renders a select or combobox component.
+
+  @param id {string} [optional] - Unique identifier for the select component.
+  @param selected {string|array} [optional] - The initially selected value(s).
+  @param name {string} [optional] - The name attribute for the hidden input storing the selected value.
+  @param multiple {boolean} [optional] [default=false] - Enables multiple selection mode.
+  @param placeholder {string} [optional] - Placeholder text shown when no options are selected (multiple mode only).
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
+  @param popover_attrs {object} [optional] - Additional HTML attributes for the popover content div.
+  @param listbox_attrs {object} [optional] - Additional HTML attributes for the listbox div.
+  @param input_attrs {object} [optional] - Additional HTML attributes for the hidden input.
+  @param search_placeholder {string} [optional] [default="Search entries..."] - Placeholder text for the search input (combobox only).
+  @param is_combobox {boolean} [optional] [default=false] - Renders a combobox with search functionality if true.
+#}
+{% macro select(
+  id=None,
+  selected=None,
+  name=None,
+  items=[],
+  multiple=false,
+  placeholder=None,
+  main_attrs={},
+  trigger_attrs={},
+  popover_attrs={},
+  listbox_attrs={},
+  input_attrs={},
+  search_placeholder="Search entries...",
+  is_combobox=false
+) %}
+{% set id = id or ("select-" + (range(100000, 999999) | random | string)) %}
+
+{% if selected is defined and selected is iterable and selected is not string %}
+  {% set selectedArray = selected %}
+{% elif selected is defined %}
+  {% set selectedArray = [selected] %}
+{% else %}
+  {% set selectedArray = [] %}
+{% endif %}
+{% set first_option = namespace(item=None) %}
+{% set selected_options = namespace(items=[]) %}
+
+{% if items %}
+  {% for item in items %}
+    {% if item.type == "group" %}
+      {% for sub_item in item['items'] %}
+        {% if not first_option.item %}
+          {% set first_option.item = sub_item %}
+        {% endif %}
+        {% if sub_item.value in selectedArray %}
+          {% set selected_options.items = selected_options.items + [sub_item] %}
+        {% endif %}
+      {% endfor %}
+    {% else %}
+      {% if not first_option.item %}
+        {% set first_option.item = item %}
+      {% endif %}
+      {% if item.value in selectedArray %}
+        {% set selected_options.items = selected_options.items + [item] %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
+{% set default_option = (selected_options.items[0] if selected_options.items else first_option.item) %}
+{% set labels = [] %}
+{% if multiple and selected_options.items %}
+  {% for opt in selected_options.items %}
+    {% set labels = labels + [opt.label] %}
+  {% endfor %}
+{% endif %}
+{% set default_label = (', '.join(labels) if (multiple and selected_options.items) else ((placeholder or '') if (multiple and not selected_options.items) else (default_option.label if default_option else ''))) %}
+
+<div
+  id="{{ id }}"
+  class="select {{ main_attrs.class }}"
+  {% if multiple and placeholder %}data-placeholder="{{ placeholder }}"{% endif %}
+  {% for key, value in main_attrs.items() %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <button
+    type="button"
+    class="btn-outline {{ trigger_attrs.class }}"
+    id="{{ id }}-trigger"
+    aria-haspopup="listbox"
+    aria-expanded="false"
+    aria-controls="{{ id }}-listbox"
+    {% for key, value in trigger_attrs.items() %}
+      {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+    {% endfor %}
+  >
+    <span class="truncate">{{ default_label }}</span>
+    {% if is_combobox %}
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down text-muted-foreground opacity-50 shrink-0"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+    {% else %}
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down text-muted-foreground opacity-50 shrink-0"><path d="m6 9 6 6 6-6"/></svg>
+    {% endif %}
+  </button>
+  <div
+    id="{{ id }}-popover"
+    data-popover
+    aria-hidden="true"
+    {% for key, value in popover_attrs.items() %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {% if is_combobox %}
+    <header>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      <input
+        type="text"
+        value=""
+        placeholder="{{ search_placeholder }}"
+        autocomplete="off"
+        autocorrect="off"
+        spellcheck="false"
+        aria-autocomplete="list"
+        role="combobox"
+        aria-expanded="false"
+        aria-controls="{{ id }}-listbox"
+        aria-labelledby="{{ id }}-trigger"
+      >
+    </header>
+    {% endif %}
+    <div
+      role="listbox"
+      id="{{ id }}-listbox"
+      aria-orientation="vertical"
+      aria-labelledby="{{ id }}-trigger"
+      {% if multiple %}aria-multiselectable="true"{% endif %}
+      {% for key, value in listbox_attrs.items() %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+      {% if items %}
+        {{ render_select_items(items, selectedArray, id ~ "-items" if id else "items") }}
+      {% else %}
+        {{ caller() if caller }}
+      {% endif %}
+    </div>
+  </div>
+  <input
+    type="hidden"
+    name="{{ name or id ~ '-value' }}"
+    value="{% if multiple %}{{ selectedArray | tojson }}{% else %}{{ (default_option.value if default_option) or '' }}{% endif %}"
+    {% for key, value in input_attrs.items() %}
+      {% if key != 'name' and key != 'value' %}{{ key }}="{{ value }}"{% endif %}
+    {% endfor %}
+  >
+</div>
+{% endmacro %}
+
+{# 
+  Renders a list of items for the select component.
+
+  @param items {array} - The array of items to render.
+  @param parent_id_prefix {string} [optional] - The prefix for the item id.
+#}
+{% macro render_select_items(items, selectedArray, parent_id_prefix="items") %}
+  {% for item in items %}
+    {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
+    {% if item.type == "group" %}
+      {% set group_label_id = item.id if item.id else "group-label-" + item_id %}
+      <div
+        role="group"
+        aria-labelledby="{{ group_label_id }}"
+        {% if item.attrs %}
+          {% for key, value in item.attrs.items() %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
+      >
+        <div role="heading" id="{{ group_label_id }}">{{ item.label }}</div>
+        {{ render_select_items(item['items'], selectedArray, item_id) if item['items'] }}
+      </div>
+    {% elif item.type == "separator" %}
+      <hr role="separator" />
+    {% elif item.type == "item" or not item.type %}
+      <div
+        id="{{ item_id }}"
+        role="option"
+        {% if item.value is defined and item.value is not none %}data-value="{{ item.value }}"{% endif %}
+        {% if item.value in selectedArray %}aria-selected="true"{% endif %}
+        {% if item.attrs %}
+          {% for key, value in item.attrs.items() %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
+      >
+        {{ item.label | safe }}
+      </div>
+    {% endif %}
+  {% endfor %}
+{% endmacro %}