@rettangoli/ui 1.4.2 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.4.2",
+  "version": "1.6.0",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",

package/src/components/dropdownMenu/dropdownMenu.handlers.js

@@ -1,4 +1,16 @@
 
+const getItemType = (item = {}) => {
+  if (item.type === 'section' || item.type === 'label') {
+    return 'section';
+  }
+
+  if (item.type === 'separator') {
+    return 'separator';
+  }
+
+  return 'item';
+};
+
 export const handleClosePopover = (deps, payload) => {
   const { dispatchEvent } = deps;
   dispatchEvent(new CustomEvent('close'));
@@ -9,7 +21,7 @@ export const handleClickMenuItem = (deps, payload) => {
   const event = payload._event;
   const index = Number(event.currentTarget.dataset.index ?? event.currentTarget.id.slice('option'.length));
   const item = props.items[index];
-  const itemType = item?.type || 'item';
+  const itemType = getItemType(item);
 
   if (!item || itemType !== 'item' || item.disabled) {
     event.preventDefault();

package/src/components/dropdownMenu/dropdownMenu.schema.yaml

@@ -12,9 +12,10 @@ propsSchema:
           type:
             type: string
             enum:
-              - label
+              - section
               - item
               - separator
+              - label
           id:
             type: string
           icon:

package/src/components/dropdownMenu/dropdownMenu.store.js

@@ -3,12 +3,23 @@ export const createInitialState = () => Object.freeze({
 });
 
 const escapeAttrValue = (value) => `${value}`.replace(/"/g, '"');
+const getItemType = (item = {}) => {
+  if (item.type === 'section' || item.type === 'label') {
+    return 'section';
+  }
+
+  if (item.type === 'separator') {
+    return 'separator';
+  }
+
+  return 'item';
+};
 
 const normalizeItems = (items) => {
   return items.map((item, index) => {
-    const type = item.type || 'item';
+    const type = getItemType(item);
     const isSeparator = type === 'separator';
-    const isLabel = type === 'label';
+    const isSection = type === 'section';
     const isItem = type === 'item';
     const isDisabled = !!item.disabled;
     const isInteractive = isItem && !isDisabled;
@@ -34,7 +45,7 @@ const normalizeItems = (items) => {
       index,
       type,
       isSeparator,
-      isLabel,
+      isSection,
       isItem,
       isDisabled,
       isInteractive,

package/src/components/dropdownMenu/dropdownMenu.view.yaml

@@ -20,9 +20,9 @@ styles:
 template:
   - rtgl-popover#popover ?open=${open} x=${x} y=${y} place=${place} content-w=${w} content-h=${h} content-sv=true content-g=xs content-pv=sm:
       - $for item, i in items:
-          - $if item.isLabel:
+          - $if item.isSection:
               - rtgl-view w=f p=md:
-                  - rtgl-text s=sm c=mu-fg: ${item.label}
+                  - rtgl-text s=xs c=mu-fg: ${item.label}
             $elif item.isItem && item.isDisabled:
               - rtgl-view w=f p=md bgc=${item.bgc}:
                   - rtgl-view d=h av=c w=f g=md:
@@ -34,7 +34,7 @@ template:
                                   - div class=icon-placeholder aria-hidden="true": null
                           - rtgl-text s=sm c=${item.c} w=1fg ellipsis: ${item.label}
                       - $if item.hasSuffixText:
-                          - rtgl-text s=sm c=${item.suffixTextColor} ta=e: ${item.suffixText}
+                          - rtgl-text s=xs c=${item.suffixTextColor} ta=e: ${item.suffixText}
             $elif item.isItem && item.hasHref && item.linkExtraAttrs:
               - a#option${i} href=${item.href} ${item.linkExtraAttrs} data-index=${item.index} data-testid=${item.testId}:
                   - rtgl-view w=f h-bgc=${item.hoverBgc} p=md cur=pointer bgc=${item.bgc}:
@@ -47,7 +47,7 @@ template:
                                       - div class=icon-placeholder aria-hidden="true": null
                               - rtgl-text s=sm c=${item.c} w=1fg ellipsis: ${item.label}
                           - $if item.hasSuffixText:
-                              - rtgl-text s=sm c=${item.suffixTextColor} ta=e: ${item.suffixText}
+                              - rtgl-text s=xs c=${item.suffixTextColor} ta=e: ${item.suffixText}
             $elif item.isItem && item.hasHref:
               - a#option${i} href=${item.href} data-index=${item.index} data-testid=${item.testId}:
                   - rtgl-view w=f h-bgc=${item.hoverBgc} p=md cur=pointer bgc=${item.bgc}:
@@ -60,7 +60,7 @@ template:
                                       - div class=icon-placeholder aria-hidden="true": null
                               - rtgl-text s=sm c=${item.c} w=1fg ellipsis: ${item.label}
                           - $if item.hasSuffixText:
-                              - rtgl-text s=sm c=${item.suffixTextColor} ta=e: ${item.suffixText}
+                              - rtgl-text s=xs c=${item.suffixTextColor} ta=e: ${item.suffixText}
             $elif item.isItem:
               - rtgl-view#option${i} w=f h-bgc=${item.hoverBgc} p=md cur=pointer bgc=${item.bgc} data-index=${item.index} data-testid=${item.testId}:
                   - rtgl-view d=h av=c w=f g=md:
@@ -72,6 +72,6 @@ template:
                                   - div class=icon-placeholder aria-hidden="true": null
                           - rtgl-text s=sm c=${item.c} w=1fg ellipsis: ${item.label}
                       - $if item.hasSuffixText:
-                          - rtgl-text s=sm c=${item.suffixTextColor} ta=e: ${item.suffixText}
+                          - rtgl-text s=xs c=${item.suffixTextColor} ta=e: ${item.suffixText}
             $elif item.isSeparator:
               - rtgl-view w=f h=1 bgc=mu mv=sm: null

package/src/components/globalUi/globalUi.handlers.js

@@ -1,3 +1,7 @@
+const TOAST_DURATION_MS = 3000;
+const TOAST_EXIT_DURATION_MS = 180;
+const toastTimeoutsByGlobalUI = new WeakMap();
+
 const clearComponentDialogBody = (refs) => {
   if (!refs) {
     return;
@@ -74,6 +78,64 @@ const createUiPromise = (globalUI, { rejectOnError = false } = {}) => {
   });
 };
 
+const getToastTimeouts = (globalUI) => {
+  let timeouts = toastTimeoutsByGlobalUI.get(globalUI);
+
+  if (!timeouts) {
+    timeouts = new Map();
+    toastTimeoutsByGlobalUI.set(globalUI, timeouts);
+  }
+
+  return timeouts;
+};
+
+const clearToastTimeout = (globalUI, toastId) => {
+  const timeouts = toastTimeoutsByGlobalUI.get(globalUI);
+  const timeoutIds = timeouts?.get(toastId);
+
+  if (timeoutIds) {
+    clearTimeout(timeoutIds.exitTimerId);
+    clearTimeout(timeoutIds.removeTimerId);
+    timeouts.delete(toastId);
+  }
+};
+
+const clearAllToastTimeouts = (globalUI) => {
+  const timeouts = toastTimeoutsByGlobalUI.get(globalUI);
+
+  if (!timeouts) {
+    return;
+  }
+
+  for (const timeoutIds of timeouts.values()) {
+    clearTimeout(timeoutIds.exitTimerId);
+    clearTimeout(timeoutIds.removeTimerId);
+  }
+
+  timeouts.clear();
+};
+
+const scheduleToastRemoval = ({ store, render, globalUI }, toastId) => {
+  clearToastTimeout(globalUI, toastId);
+
+  const timeouts = getToastTimeouts(globalUI);
+  const exitTimerId = setTimeout(() => {
+    store.setToastPhase?.({ id: toastId, phase: "exiting" });
+    render();
+  }, Math.max(0, TOAST_DURATION_MS - TOAST_EXIT_DURATION_MS));
+
+  const removeTimerId = setTimeout(() => {
+    timeouts.delete(toastId);
+    store.removeToast({ id: toastId });
+    render();
+  }, TOAST_DURATION_MS);
+
+  timeouts.set(toastId, {
+    exitTimerId,
+    removeTimerId,
+  });
+};
+
 const scheduleFormDialogMount = (deps, expectedKey) => {
   setTimeout(() => {
     const { store, refs } = deps;
@@ -218,6 +280,21 @@ export const handleShowConfirm = async (deps, payload) => {
   return createUiPromise(globalUI);
 };
 
+export const handleShowToast = (deps, payload) => {
+  const { store, render, globalUI } = deps;
+  store.addToast(payload);
+  render();
+
+  const toasts = store.selectToasts?.() ?? [];
+  const toastId = toasts[toasts.length - 1]?.id;
+
+  if (!toastId) {
+    return;
+  }
+
+  scheduleToastRemoval({ store, render, globalUI }, toastId);
+};
+
 /**
  * Shows a dropdown menu at the specified position with the given items.
  * Closes any existing dialog or dropdown menu before showing the dropdown menu.
@@ -322,7 +399,21 @@ export const handleFormFieldEvent = (deps, payload) => {
  */
 export const handleCloseAll = (deps) => {
   const { store, render, globalUI, refs } = deps;
-  closeCurrentUi({ store, render, globalUI, refs, emitResult: true });
+  clearAllToastTimeouts(globalUI);
+  const hasToasts = (store.selectToasts?.().length ?? 0) > 0;
+
+  if (hasToasts) {
+    store.clearToasts();
+  }
+
+  if (store.selectIsOpen()) {
+    closeCurrentUi({ store, render, globalUI, refs, emitResult: true });
+    return;
+  }
+
+  if (hasToasts) {
+    render();
+  }
 };
 
 export const handleComponentDialogAction = async (deps, payload) => {

package/src/components/globalUi/globalUi.store.js

@@ -1,4 +1,6 @@
 const VALID_DIALOG_SIZES = new Set(["sm", "md", "lg", "f"]);
+const VALID_TOAST_SIZES = new Set(["sm", "md", "lg"]);
+const VALID_TOAST_PHASES = new Set(["active", "exiting"]);
 const VALID_COMPONENT_DIALOG_ROLES = new Set(["confirm", "cancel"]);
 
 const DEFAULT_COMPONENT_DIALOG_BUTTONS = Object.freeze([
@@ -29,6 +31,14 @@ const normalizeDialogSize = (value, fallback = "md") => {
   return VALID_DIALOG_SIZES.has(value) ? value : fallback;
 };
 
+const normalizeToastSize = (value, fallback = "sm") => {
+  return VALID_TOAST_SIZES.has(value) ? value : fallback;
+};
+
+const normalizeToastPhase = (value, fallback = "active") => {
+  return VALID_TOAST_PHASES.has(value) ? value : fallback;
+};
+
 const normalizeComponentDialogActions = (value) => {
   const sourceButtons = Array.isArray(value?.buttons) && value.buttons.length > 0
     ? value.buttons
@@ -84,6 +94,8 @@ const createDefaultComponentDialogConfig = () => ({
 export const createInitialState = () => Object.freeze({
   isOpen: false,
   uiType: "dialog", // "dialog" | "dropdown" | "formDialog" | "componentDialog"
+  nextToastId: 0,
+  toasts: [],
   config: {
     status: undefined, // undefined | info | warning | error
     title: "",
@@ -201,6 +213,52 @@ export const setComponentDialogConfig = ({ state }, options = {}) => {
   state.isOpen = true;
 };
 
+export const addToast = ({ state }, options = {}) => {
+  if (typeof options.message !== "string" || options.message.length === 0) {
+    throw new Error("message is required for showToast");
+  }
+
+  const nextToastId = (state.nextToastId ?? 0) + 1;
+  const toast = {
+    id: `toast-${nextToastId}`,
+    message: options.message,
+    size: normalizeToastSize(options.size ?? options.s, "sm"),
+    phase: "active",
+  };
+
+  state.nextToastId = nextToastId;
+  state.toasts = [...(state.toasts ?? []), toast];
+};
+
+export const removeToast = ({ state }, options = {}) => {
+  if (typeof options.id !== "string" || options.id.length === 0) {
+    return;
+  }
+
+  state.toasts = (state.toasts ?? []).filter((toast) => toast.id !== options.id);
+};
+
+export const setToastPhase = ({ state }, options = {}) => {
+  if (typeof options.id !== "string" || options.id.length === 0) {
+    return;
+  }
+
+  state.toasts = (state.toasts ?? []).map((toast) => {
+    if (toast.id !== options.id) {
+      return toast;
+    }
+
+    return {
+      ...toast,
+      phase: normalizeToastPhase(options.phase, "active"),
+    };
+  });
+};
+
+export const clearToasts = ({ state }) => {
+  state.toasts = [];
+};
+
 export const closeAll = ({ state }) => {
   state.isOpen = false;
   state.uiType = "dialog"; // Reset to default type
@@ -212,6 +270,7 @@ export const selectFormDialogConfig = ({ state }) => state.formDialogConfig;
 export const selectComponentDialogConfig = ({ state }) => state.componentDialogConfig;
 export const selectUiType = ({ state }) => state.uiType;
 export const selectIsOpen = ({ state }) => state.isOpen;
+export const selectToasts = ({ state }) => state.toasts ?? [];
 
 export const selectViewData = ({ state }) => {
   const isDialogOpen = state.isOpen && state.uiType === "dialog";
@@ -246,6 +305,13 @@ export const selectViewData = ({ state }) => {
       actions: componentDialogConfig.actions ?? normalizeComponentDialogActions(),
       key: componentDialogConfig.key ?? 0,
     },
+    toasts: Array.isArray(state.toasts)
+      ? state.toasts.map((toast) => ({
+          ...toast,
+          size: normalizeToastSize(toast.size, "sm"),
+          phase: normalizeToastPhase(toast.phase, "active"),
+        }))
+      : [],
     isDialogOpen,
     isFormDialogOpen,
     isComponentDialogOpen,

package/src/components/globalUi/globalUi.view.yaml

@@ -28,7 +28,44 @@ refs:
         handler: handleDropdownClose
       item-click:
         handler: handleDropdownItemClick
+styles:
+  .toast-layer:
+    pointer-events: none
+  .toast-card:
+    pointer-events: auto
+    box-sizing: border-box
+    width: 33vw
+    max-width: calc(100vw - 2 * var(--spacing-lg))
+    opacity: 1
+    transform: translateY(0) scale(1)
+    animation: toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1)
+    transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1)
+    will-change: opacity, transform
+  .toast-card-md:
+    width: 50vw
+  .toast-card-lg:
+    width: 80vw
+  .toast-card-exiting:
+    opacity: 0
+    transform: translateY(calc(var(--spacing-sm) * -0.5)) scale(0.98)
+  .toast-message:
+    overflow-wrap: anywhere
+  '@keyframes toast-in':
+    from:
+      opacity: 0
+      transform: translateY(calc(var(--spacing-sm) * -1)) scale(0.96)
+    to:
+      opacity: 1
+      transform: translateY(0) scale(1)
+  '@media (prefers-reduced-motion: reduce)':
+    .toast-card:
+      animation: none
+      transition: none
 template:
+  - rtgl-view class=toast-layer pos=fix edge=t z=2100 w=f ah=c g=sm p=md:
+      - $for toast, i in toasts:
+          - 'rtgl-view class="toast-card toast-card-${toast.size} toast-card-${toast.phase}" key=toast-${toast.id} bgc=su bc=bo bw=xs br=md shadow=md ph=lg pv=md':
+              - rtgl-text class=toast-message ta=c w=f: ${toast.message}
   - rtgl-dialog#dialog ?open=${isDialogContainerOpen} s=${dialogSize}:
       - $if isFormDialogOpen:
           - rtgl-form#formDialog slot=content :form=${formDialogConfig.form} :defaultValues=${formDialogConfig.defaultValues} :context=${formDialogConfig.context} ?disabled=${formDialogConfig.disabled} key=form-dialog-${formDialogConfig.key}: null

package/src/components/select/select.handlers.js

@@ -1,10 +1,22 @@
 import { deepEqual } from '../../common.js';
 
+const getOptionType = (option = {}) => {
+  if (option.type === 'section') {
+    return 'section';
+  }
+
+  if (option.type === 'separator') {
+    return 'separator';
+  }
+
+  return 'item';
+};
+
 export const handleBeforeMount = (deps) => {
   const { store, props, render } = deps;
 
   if (props.selectedValue !== null && props.selectedValue !== undefined && props.options) {
-    const selectedOption = props.options.find(opt => deepEqual(opt.value, props.selectedValue));
+    const selectedOption = props.options.find((opt) => getOptionType(opt) === 'item' && deepEqual(opt.value, props.selectedValue));
     if (selectedOption) {
       store.updateSelectedValue({
         value: selectedOption?.value
@@ -48,7 +60,7 @@ export const handleButtonClick = (deps, payload) => {
   const currentValue = storeSelectedValue !== null ? storeSelectedValue : props.selectedValue;
   let selectedIndex = null;
   if (currentValue !== null && currentValue !== undefined && props.options) {
-    selectedIndex = props.options.findIndex(opt => deepEqual(opt.value, currentValue));
+    selectedIndex = props.options.findIndex((opt) => getOptionType(opt) === 'item' && deepEqual(opt.value, currentValue));
     if (selectedIndex === -1) selectedIndex = null;
   }
 
@@ -87,6 +99,9 @@ export const handleOptionClick = (deps, payload) => {
   const index = Number(id);
 
   const option = props.options[id];
+  if (getOptionType(option) !== 'item') {
+    return;
+  }
 
   // Update internal state
   store.updateSelectedValue({ value: option?.value });

package/src/components/select/select.schema.yaml

@@ -9,10 +9,22 @@ propsSchema:
       items:
         type: object
         properties:
+          type:
+            type: string
+            enum:
+              - section
+              - item
+              - separator
           label:
             type: string
           value:
             type: any
+          icon:
+            type: string
+          shortcut:
+            type: string
+          suffixText:
+            type: string
           testId:
             type: string
     selectedValue:

package/src/components/select/select.store.js

@@ -24,6 +24,89 @@ const stringifyProps = (props = {}) => {
     .join(" ");
 };
 
+const hasOwnProp = (object, key) => Object.prototype.hasOwnProperty.call(object || {}, key);
+const getOptionType = (option = {}) => {
+  if (option.type === 'section') {
+    return 'section';
+  }
+
+  if (option.type === 'separator') {
+    return 'separator';
+  }
+
+  return 'item';
+};
+const isSelectableOption = (option = {}) => getOptionType(option) === 'item';
+
+const getOptionIcon = (option = {}) => {
+  return typeof option.icon === 'string' && option.icon.length > 0 ? option.icon : '';
+};
+
+const getOptionSuffixText = (option = {}) => {
+  if (typeof option.shortcut === 'string' && option.shortcut.length > 0) {
+    return option.shortcut;
+  }
+
+  if (typeof option.suffixText === 'string' && option.suffixText.length > 0) {
+    return option.suffixText;
+  }
+
+  return '';
+};
+
+const normalizeOption = (option = {}, index, currentValue, hoveredOptionId, hasIconColumn) => {
+  const type = getOptionType(option);
+  const isSection = type === 'section';
+  const isSeparator = type === 'separator';
+  const isItem = type === 'item';
+
+  if (isSection) {
+    return {
+      ...option,
+      index,
+      type,
+      isSection,
+      isSeparator,
+      isItem,
+    };
+  }
+
+  if (isSeparator) {
+    return {
+      ...option,
+      index,
+      type,
+      isSection,
+      isSeparator,
+      isItem,
+    };
+  }
+
+  const isSelected = deepEqual(option.value, currentValue);
+  const isHovered = hoveredOptionId === index;
+  const icon = getOptionIcon(option);
+  const suffixText = getOptionSuffixText(option);
+
+  return {
+    ...option,
+    index,
+    type,
+    isSection,
+    isSeparator,
+    isItem,
+    isSelected,
+    bgc: isHovered ? 'ac' : (isSelected ? 'mu' : ''),
+    hasIconSlot: hasIconColumn,
+    icon,
+    hasIcon: icon.length > 0,
+    iconColor: 'fg',
+    c: 'fg',
+    suffixText,
+    hasSuffixText: suffixText.length > 0,
+    suffixTextColor: 'mu-fg',
+  };
+};
+
 export const createInitialState = () => Object.freeze({
   isOpen: false,
   position: {
@@ -49,22 +132,17 @@ export const selectViewData = ({ state, props }) => {
   let isPlaceholderLabel = true;
 
   const options = props.options || [];
-  const selectedOption = options.find(opt => deepEqual(opt.value, currentValue));
+  const selectedOption = options.find((opt) => isSelectableOption(opt) && deepEqual(opt.value, currentValue));
   if (selectedOption) {
     displayLabel = selectedOption.label;
     isPlaceholderLabel = false;
   }
 
-  // Map options to include isSelected flag and computed background color
+  const hasIconColumn = options.some((option) => isSelectableOption(option) && hasOwnProp(option, 'icon'));
   const optionsWithSelection = options.map((option, index) => {
-    const isSelected = deepEqual(option.value, currentValue);
-    const isHovered = state.hoveredOptionId === index;
-    return {
-      ...option,
-      isSelected,
-      bgc: isHovered ? 'ac' : (isSelected ? 'mu' : '')
-    };
+    return normalizeOption(option, index, currentValue, state.hoveredOptionId, hasIconColumn);
   });
+  const selectedOptionView = optionsWithSelection.find((option) => option.isItem && option.isSelected);
 
   return {
     containerAttrString,
@@ -75,6 +153,12 @@ export const selectViewData = ({ state, props }) => {
     selectedValue: currentValue,
     selectedLabel: displayLabel,
     selectedLabelColor: isPlaceholderLabel ? "mu-fg" : "fg",
+    selectedIcon: selectedOptionView?.icon || "",
+    hasSelectedIcon: !!selectedOptionView?.hasIcon,
+    selectedIconColor: isPlaceholderLabel ? "mu-fg" : "fg",
+    selectedSuffixText: selectedOptionView?.suffixText || "",
+    hasSelectedSuffixText: !!selectedOptionView?.hasSuffixText,
+    selectedSuffixTextColor: "mu-fg",
     selectButtonCursor: isDisabled ? "not-allowed" : "pointer",
     selectButtonHoverBorderColor: isDisabled ? "bo" : "ac",
     selectButtonTabIndex: isDisabled ? -1 : 0,

package/src/components/select/select.view.yaml

@@ -29,17 +29,42 @@ refs:
         handler: handleAddOptionMouseEnter
       mouseleave:
         handler: handleAddOptionMouseLeave
+styles:
+  .icon-placeholder:
+    width: 16px
+    height: 16px
+    flex-shrink: 0
 template:
   - 'rtgl-view#selectButton style="display: inline-flex;" d=h av=c h=32 ph=md bw=xs bc=bo h-bc=${selectButtonHoverBorderColor} br=md bgc=su cur=${selectButtonCursor} ${containerAttrString} data-testid="select-button" role="button" tabindex=${selectButtonTabIndex} aria-disabled=${isDisabled}':
-      - rtgl-view d=h av=c ah=s w=f:
-          - rtgl-text w=1fg ta=s c=${selectedLabelColor} ellipsis: ${selectedLabel}
+      - rtgl-view d=h av=c ah=s w=f g=md:
+          - rtgl-view d=h av=c g=md w=1fg:
+              - $if hasSelectedIcon:
+                  - rtgl-svg svg=${selectedIcon} wh=16 c=${selectedIconColor}: null
+              - rtgl-text w=1fg ta=s c=${selectedLabelColor} ellipsis: ${selectedLabel}
+          - $if hasSelectedSuffixText:
+              - rtgl-text s=xs c=${selectedSuffixTextColor} ta=e: ${selectedSuffixText}
           - $if showClear:
-              - rtgl-svg#clearButton ml=md svg=x wh=16 c=mu-fg cur=pointer data-testid="select-clear-button": null
-          - rtgl-svg ml=md svg=chevronDown wh=16 c=mu-fg: null
+              - rtgl-svg#clearButton svg=x wh=16 c=mu-fg cur=pointer data-testid="select-clear-button": null
+          - rtgl-svg svg=chevronDown wh=16 c=mu-fg: null
   - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y} place=rs content-wh=300 content-g=xs content-sv=true content-pv=sm:
       - $for option, i in options:
-          - rtgl-view#option${i} w=f ph=lg pv=md cur=pointer bgc=${option.bgc} data-testid=${option.testId}:
-              - rtgl-text s=sm: ${option.label}
+          - $if option.isSection:
+              - rtgl-view w=f p=md:
+                  - rtgl-text s=xs c=mu-fg: ${option.label}
+            $elif option.isItem:
+              - rtgl-view#option${option.index} w=f ph=lg pv=md cur=pointer bgc=${option.bgc} data-testid=${option.testId}:
+                  - rtgl-view d=h av=c w=f g=md:
+                      - rtgl-view d=h av=c g=md w=1fg:
+                          - $if option.hasIconSlot:
+                              - $if option.hasIcon:
+                                  - rtgl-svg wh=16 svg=${option.icon} c=${option.iconColor}: null
+                                $else:
+                                  - div class=icon-placeholder aria-hidden="true": null
+                          - rtgl-text s=sm c=${option.c} w=1fg ellipsis: ${option.label}
+                      - $if option.hasSuffixText:
+                          - rtgl-text s=xs c=${option.suffixTextColor} ta=e: ${option.suffixText}
+            $elif option.isSeparator:
+              - rtgl-view w=f h=1 bgc=mu mv=sm: null
       - $if showAddOption:
           - rtgl-view w=f bw=xs bc=mu bwt=sm: null
           - rtgl-view#optionAdd w=f ph=lg pv=md cur=pointer bgc=${addOptionBgc} data-testid="select-add-option":