@rettangoli/ui 1.0.19 → 1.0.21

package/package.json

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

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

@@ -1,7 +1,19 @@
+const clearComponentDialogBody = (refs) => {
+  if (!refs) {
+    return;
+  }
+
+  if (typeof refs.componentDialogBodyHost?.replaceChildren === "function") {
+    refs.componentDialogBodyHost.replaceChildren();
+  }
+
+  delete refs.componentDialogBody;
+};
+
 const getDismissResult = (store) => {
   const uiType = store.selectUiType();
 
-  if (uiType === "dropdown" || uiType === "formDialog") {
+  if (uiType === "dropdown" || uiType === "formDialog" || uiType === "componentDialog") {
     return null;
   }
 
@@ -13,12 +25,13 @@ const getDismissResult = (store) => {
   return null;
 };
 
-const closeCurrentUi = ({ store, render, globalUI, emitResult = false, result }) => {
+const closeCurrentUi = ({ store, render, globalUI, refs, emitResult = false, result }) => {
   if (!store.selectIsOpen()) {
     return;
   }
 
   const resolvedResult = result !== undefined ? result : getDismissResult(store);
+  clearComponentDialogBody(refs);
   store.closeAll();
   render();
 
@@ -27,10 +40,38 @@ const closeCurrentUi = ({ store, render, globalUI, emitResult = false, result })
   }
 };
 
-const closeExistingUiBeforeShow = ({ store, render, globalUI }) => {
+const rejectCurrentUi = ({ store, render, globalUI, refs, error }) => {
+  clearComponentDialogBody(refs);
+
   if (store.selectIsOpen()) {
-    closeCurrentUi({ store, render, globalUI, emitResult: true });
+    store.closeAll();
+    render();
   }
+
+  globalUI.emit("error", error);
+};
+
+const closeExistingUiBeforeShow = ({ store, render, globalUI, refs }) => {
+  if (store.selectIsOpen()) {
+    closeCurrentUi({ store, render, globalUI, refs, emitResult: true });
+  }
+};
+
+const createUiPromise = (globalUI, { rejectOnError = false } = {}) => {
+  return new Promise((resolve, reject) => {
+    let offError = null;
+    const offEvent = globalUI.once("event", (result) => {
+      offError?.();
+      resolve(result);
+    });
+
+    if (rejectOnError) {
+      offError = globalUI.once("error", (error) => {
+        offEvent?.();
+        reject(error);
+      });
+    }
+  });
 };
 
 const scheduleFormDialogMount = (deps, expectedKey) => {
@@ -59,31 +100,73 @@ const scheduleFormDialogMount = (deps, expectedKey) => {
   }, 0);
 };
 
+const scheduleComponentDialogMount = (deps, expectedKey) => {
+  setTimeout(() => {
+    const { store, refs, render, globalUI } = deps;
+
+    if (!store.selectIsOpen() || store.selectUiType() !== "componentDialog") {
+      return;
+    }
+
+    const componentDialogConfig = store.selectComponentDialogConfig?.();
+    if (!componentDialogConfig || componentDialogConfig.key !== expectedKey) {
+      return;
+    }
+
+    const hostEl = refs.componentDialogBodyHost;
+    if (!hostEl) {
+      return;
+    }
+
+    try {
+      const bodyEl = document.createElement(componentDialogConfig.component);
+
+      Object.entries(componentDialogConfig.props ?? {}).forEach(([key, value]) => {
+        bodyEl[key] = value;
+      });
+
+      hostEl.replaceChildren(bodyEl);
+      refs.componentDialogBody = bodyEl;
+    } catch (error) {
+      rejectCurrentUi({ store, render, globalUI, refs, error });
+    }
+  }, 0);
+};
+
+const isActiveComponentDialog = (store, expectedKey) => {
+  if (!store.selectIsOpen() || store.selectUiType() !== "componentDialog") {
+    return false;
+  }
+
+  const componentDialogConfig = store.selectComponentDialogConfig?.();
+  return componentDialogConfig?.key === expectedKey;
+};
+
 export const handleDialogClose = (deps) => {
-  const { store, render, globalUI } = deps;
-  closeCurrentUi({ store, render, globalUI, emitResult: true });
+  const { store, render, globalUI, refs } = deps;
+  closeCurrentUi({ store, render, globalUI, refs, emitResult: true });
 };
 
 export const handleConfirm = (deps) => {
-  const { store, render, globalUI } = deps;
+  const { store, render, globalUI, refs } = deps;
   const config = store.selectConfig();
   const result = config.mode === "confirm" ? true : null;
 
-  closeCurrentUi({ store, render, globalUI, emitResult: true, result });
+  closeCurrentUi({ store, render, globalUI, refs, emitResult: true, result });
 };
 
 export const handleCancel = (deps) => {
-  const { store, render, globalUI } = deps;
-  closeCurrentUi({ store, render, globalUI, emitResult: true, result: false });
+  const { store, render, globalUI, refs } = deps;
+  closeCurrentUi({ store, render, globalUI, refs, emitResult: true, result: false });
 };
 
 export const handleDropdownClose = (deps) => {
-  const { store, render, globalUI } = deps;
-  closeCurrentUi({ store, render, globalUI, emitResult: true, result: null });
+  const { store, render, globalUI, refs } = deps;
+  closeCurrentUi({ store, render, globalUI, refs, emitResult: true, result: null });
 };
 
 export const handleDropdownItemClick = (deps, payload) => {
-  const { store, render, globalUI } = deps;
+  const { store, render, globalUI, refs } = deps;
   const event = payload._event;
   const { index, item } = event.detail;
 
@@ -91,6 +174,7 @@ export const handleDropdownItemClick = (deps, payload) => {
     store,
     render,
     globalUI,
+    refs,
     emitResult: true,
     result: { index, item },
   });
@@ -111,36 +195,27 @@ export const handleDropdownItemClick = (deps, payload) => {
  * @returns {Promise<void>}
  */
 export const handleShowAlert = (deps, payload) => {
-  const { store, render, globalUI } = deps;
+  const { store, render, globalUI, refs } = deps;
   const options = payload;
 
-  closeExistingUiBeforeShow({ store, render, globalUI });
+  closeExistingUiBeforeShow({ store, render, globalUI, refs });
 
   store.setAlertConfig(options);
   render();
 
-  return new Promise((resolve) => {
-    globalUI.once("event", () => {
-      resolve();
-    });
-  });
+  return createUiPromise(globalUI);
 };
 
 export const handleShowConfirm = async (deps, payload) => {
-  const { store, render, globalUI } = deps;
+  const { store, render, globalUI, refs } = deps;
   const options = payload;
 
-  closeExistingUiBeforeShow({ store, render, globalUI });
+  closeExistingUiBeforeShow({ store, render, globalUI, refs });
 
   store.setConfirmConfig(options);
   render();
 
-  return new Promise((resolve) => {
-    globalUI.once('event', (result) => {
-      // result contains info of whehter is confirm of cancel
-      resolve(result)
-    });
-  });
+  return createUiPromise(globalUI);
 };
 
 /**
@@ -161,27 +236,22 @@ export const handleShowConfirm = async (deps, payload) => {
  * @returns {Object} [result.item] - The clicked item object
  */
 export const handleShowDropdownMenu = async (deps, payload) => {
-  const { store, render, globalUI } = deps;
+  const { store, render, globalUI, refs } = deps;
   const options = payload;
 
-  closeExistingUiBeforeShow({ store, render, globalUI });
+  closeExistingUiBeforeShow({ store, render, globalUI, refs });
 
   store.setDropdownConfig(options);
   render();
 
-  return new Promise((resolve) => {
-    globalUI.once('event', (result) => {
-      // result contains info of clicked item or null if closed without selection
-      resolve(result)
-    });
-  });
+  return createUiPromise(globalUI);
 };
 
 export const handleShowFormDialog = async (deps, payload) => {
-  const { store, render, globalUI } = deps;
+  const { store, render, globalUI, refs } = deps;
   const options = payload;
 
-  closeExistingUiBeforeShow({ store, render, globalUI });
+  closeExistingUiBeforeShow({ store, render, globalUI, refs });
 
   store.setFormDialogConfig(options);
   render();
@@ -189,16 +259,27 @@ export const handleShowFormDialog = async (deps, payload) => {
   const expectedKey = store.selectFormDialogConfig?.().key;
   scheduleFormDialogMount(deps, expectedKey);
 
-  return new Promise((resolve) => {
-    globalUI.once("event", (result) => {
-      resolve(result);
-    });
-  });
+  return createUiPromise(globalUI);
+};
+
+export const handleShowComponentDialog = async (deps, payload) => {
+  const { store, render, globalUI, refs } = deps;
+  const options = payload;
+
+  closeExistingUiBeforeShow({ store, render, globalUI, refs });
+
+  store.setComponentDialogConfig(options);
+  render();
+
+  const expectedKey = store.selectComponentDialogConfig?.().key;
+  scheduleComponentDialogMount(deps, expectedKey);
+
+  return createUiPromise(globalUI, { rejectOnError: true });
 };
 
 export const handleFormAction = (deps, payload) => {
-  const { store, render, globalUI } = deps;
-  const detail = payload._event?.detail || {};
+  const { store, render, globalUI, refs } = deps;
+  const detail = payload._event?.detail ?? {};
 
   if (detail.valid === false) {
     return;
@@ -208,6 +289,7 @@ export const handleFormAction = (deps, payload) => {
     store,
     render,
     globalUI,
+    refs,
     emitResult: true,
     result: detail,
   });
@@ -215,13 +297,13 @@ export const handleFormAction = (deps, payload) => {
 
 export const handleFormFieldEvent = (deps, payload) => {
   const { store, refs } = deps;
-  const detail = payload._event?.detail || {};
+  const detail = payload._event?.detail ?? {};
   const formDialogConfig = store.selectFormDialogConfig?.();
 
   if (typeof formDialogConfig?.onFieldEvent === "function") {
     formDialogConfig.onFieldEvent({
       detail,
-      formEl: refs.formDialog || null,
+      formEl: refs.formDialog ?? null,
     });
   }
 };
@@ -239,6 +321,81 @@ export const handleFormFieldEvent = (deps, payload) => {
  * @returns {void}
  */
 export const handleCloseAll = (deps) => {
-  const { store, render, globalUI } = deps;
-  closeCurrentUi({ store, render, globalUI, emitResult: true });
+  const { store, render, globalUI, refs } = deps;
+  closeCurrentUi({ store, render, globalUI, refs, emitResult: true });
+};
+
+export const handleComponentDialogAction = async (deps, payload) => {
+  const { store, render, globalUI, refs } = deps;
+  const event = payload._event;
+  const actionIndex = Number(event?.currentTarget?.dataset?.actionIndex);
+  const componentDialogConfig = store.selectComponentDialogConfig?.();
+  const componentDialogKey = componentDialogConfig?.key;
+  const button = Number.isInteger(actionIndex)
+    ? componentDialogConfig?.actions?.buttons?.[actionIndex]
+    : null;
+
+  if (!button) {
+    return;
+  }
+
+  if (button.role === "cancel") {
+    closeCurrentUi({
+      store,
+      render,
+      globalUI,
+      refs,
+      emitResult: true,
+      result: {
+        actionId: button.id,
+      },
+    });
+    return;
+  }
+
+  try {
+    const body = refs.componentDialogBody;
+    if (!body || typeof body.validate !== "function" || typeof body.getValues !== "function") {
+      throw new Error(
+        `component dialog body '${componentDialogConfig?.component ?? "unknown"}' must implement validate() and getValues()`,
+      );
+    }
+
+    if (button.validate) {
+      const validation = await body.validate();
+      if (!isActiveComponentDialog(store, componentDialogKey)) {
+        return;
+      }
+
+      if (!validation || typeof validation !== "object" || typeof validation.valid !== "boolean") {
+        throw new Error("component dialog body validate() must return { valid, errors? }");
+      }
+      if (validation.valid === false) {
+        return;
+      }
+    }
+
+    const values = await body.getValues();
+    if (!isActiveComponentDialog(store, componentDialogKey)) {
+      return;
+    }
+
+    closeCurrentUi({
+      store,
+      render,
+      globalUI,
+      refs,
+      emitResult: true,
+      result: {
+        actionId: button.id,
+        values,
+      },
+    });
+  } catch (error) {
+    if (!isActiveComponentDialog(store, componentDialogKey)) {
+      return;
+    }
+
+    rejectCurrentUi({ store, render, globalUI, refs, error });
+  }
 };

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

@@ -1,4 +1,22 @@
 const VALID_DIALOG_SIZES = new Set(["sm", "md", "lg", "f"]);
+const VALID_COMPONENT_DIALOG_ROLES = new Set(["confirm", "cancel"]);
+
+const DEFAULT_COMPONENT_DIALOG_BUTTONS = Object.freeze([
+  {
+    id: "cancel",
+    label: "Cancel",
+    variant: "se",
+    align: "left",
+    role: "cancel",
+  },
+  {
+    id: "confirm",
+    label: "OK",
+    variant: "pr",
+    role: "confirm",
+    validate: true,
+  },
+]);
 
 const normalizeObject = (value) => {
   if (!value || typeof value !== "object" || Array.isArray(value)) {
@@ -11,9 +29,61 @@ const normalizeDialogSize = (value, fallback = "md") => {
   return VALID_DIALOG_SIZES.has(value) ? value : fallback;
 };
 
+const normalizeComponentDialogActions = (value) => {
+  const sourceButtons = Array.isArray(value?.buttons) && value.buttons.length > 0
+    ? value.buttons
+    : DEFAULT_COMPONENT_DIALOG_BUTTONS;
+
+  const buttons = sourceButtons.map((button, index) => {
+    if (!button || typeof button !== "object" || Array.isArray(button)) {
+      throw new Error("component dialog buttons must be objects");
+    }
+
+    if (typeof button.id !== "string" || button.id.length === 0) {
+      throw new Error("component dialog button id is required");
+    }
+
+    if (typeof button.label !== "string" || button.label.length === 0) {
+      throw new Error("component dialog button label is required");
+    }
+
+    if (!VALID_COMPONENT_DIALOG_ROLES.has(button.role)) {
+      throw new Error("component dialog button role must be 'confirm' or 'cancel'");
+    }
+
+    return {
+      ...button,
+      _globalIdx: index,
+      variant: button.variant ?? (button.role === "confirm" ? "pr" : "se"),
+      align: button.align ?? (button.role === "cancel" ? "left" : "right"),
+      validate: button.role === "confirm" ? !!button.validate : false,
+      _disabled: !!button.disabled,
+      pre: button.pre ?? "",
+      suf: button.suf ?? "",
+    };
+  });
+
+  return {
+    _layout: "split",
+    buttons,
+    _leftButtons: buttons.filter((button) => button.align === "left"),
+    _rightButtons: buttons.filter((button) => button.align !== "left"),
+  };
+};
+
+const createDefaultComponentDialogConfig = () => ({
+  title: "",
+  description: "",
+  size: "md",
+  component: "",
+  props: {},
+  actions: normalizeComponentDialogActions(),
+  key: 0,
+});
+
 export const createInitialState = () => Object.freeze({
   isOpen: false,
-  uiType: "dialog", // "dialog" | "dropdown" | "formDialog"
+  uiType: "dialog", // "dialog" | "dropdown" | "formDialog" | "componentDialog"
   config: {
     status: undefined, // undefined | info | warning | error
     title: "",
@@ -38,6 +108,7 @@ export const createInitialState = () => Object.freeze({
     onFieldEvent: null,
     mount: null,
   },
+  componentDialogConfig: createDefaultComponentDialogConfig(),
 });
 
 export const setAlertConfig = ({ state }, options = {}) => {
@@ -46,10 +117,10 @@ export const setAlertConfig = ({ state }, options = {}) => {
   }
 
   state.config = {
-    status: options.status || undefined,
-    title: options.title || "",
+    status: options.status ?? undefined,
+    title: options.title ?? "",
     message: options.message,
-    confirmText: options.confirmText || "OK",
+    confirmText: options.confirmText ?? "OK",
     cancelText: "",
     mode: "alert",
   };
@@ -63,11 +134,11 @@ export const setConfirmConfig = ({ state }, options = {}) => {
   }
 
   state.config = {
-    status: options.status || undefined,
-    title: options.title || "",
+    status: options.status ?? undefined,
+    title: options.title ?? "",
     message: options.message,
-    confirmText: options.confirmText || "Yes",
-    cancelText: options.cancelText || "Cancel",
+    confirmText: options.confirmText ?? "Yes",
+    cancelText: options.cancelText ?? "Cancel",
     mode: "confirm",
   };
   state.uiType = "dialog";
@@ -81,9 +152,9 @@ export const setDropdownConfig = ({ state }, options = {}) => {
 
   state.dropdownConfig = {
     items: options.items,
-    x: options.x || 0,
-    y: options.y || 0,
-    place: options.place || "bs",
+    x: options.x ?? 0,
+    y: options.y ?? 0,
+    place: options.place ?? "bs",
   };
   state.uiType = "dropdown";
   state.isOpen = true;
@@ -94,7 +165,7 @@ export const setFormDialogConfig = ({ state }, options = {}) => {
     throw new Error("form object is required for showFormDialog");
   }
 
-  const prevKey = state.formDialogConfig?.key || 0;
+  const prevKey = state.formDialogConfig?.key ?? 0;
 
   state.formDialogConfig = {
     form: options.form,
@@ -110,6 +181,26 @@ export const setFormDialogConfig = ({ state }, options = {}) => {
   state.isOpen = true;
 };
 
+export const setComponentDialogConfig = ({ state }, options = {}) => {
+  if (typeof options.component !== "string" || !options.component.includes("-")) {
+    throw new Error("component tag name is required for showComponentDialog");
+  }
+
+  const prevKey = state.componentDialogConfig?.key ?? 0;
+
+  state.componentDialogConfig = {
+    title: typeof options.title === "string" ? options.title : "",
+    description: typeof options.description === "string" ? options.description : "",
+    size: normalizeDialogSize(options.size, "md"),
+    component: options.component,
+    props: normalizeObject(options.props),
+    actions: normalizeComponentDialogActions(options.actions),
+    key: prevKey + 1,
+  };
+  state.uiType = "componentDialog";
+  state.isOpen = true;
+};
+
 export const closeAll = ({ state }) => {
   state.isOpen = false;
   state.uiType = "dialog"; // Reset to default type
@@ -118,36 +209,51 @@ export const closeAll = ({ state }) => {
 export const selectConfig = ({ state }) => state.config;
 export const selectDropdownConfig = ({ state }) => state.dropdownConfig;
 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 selectViewData = ({ state }) => {
   const isDialogOpen = state.isOpen && state.uiType === "dialog";
   const isFormDialogOpen = state.isOpen && state.uiType === "formDialog";
+  const isComponentDialogOpen = state.isOpen && state.uiType === "componentDialog";
+  const componentDialogConfig = state.componentDialogConfig ?? createDefaultComponentDialogConfig();
 
   return {
     isOpen: state.isOpen,
     uiType: state.uiType,
     config: state.config,
     dropdownConfig: {
-      items: state.dropdownConfig?.items || [],
-      x: state.dropdownConfig?.x || 0,
-      y: state.dropdownConfig?.y || 0,
-      place: state.dropdownConfig?.place || 'bs',
+      items: state.dropdownConfig?.items ?? [],
+      x: state.dropdownConfig?.x ?? 0,
+      y: state.dropdownConfig?.y ?? 0,
+      place: state.dropdownConfig?.place ?? "bs",
     },
     formDialogConfig: {
-      form: state.formDialogConfig?.form || { fields: [], actions: { buttons: [] } },
-      defaultValues: state.formDialogConfig?.defaultValues || {},
-      context: state.formDialogConfig?.context || {},
+      form: state.formDialogConfig?.form ?? { fields: [], actions: { buttons: [] } },
+      defaultValues: state.formDialogConfig?.defaultValues ?? {},
+      context: state.formDialogConfig?.context ?? {},
       disabled: !!state.formDialogConfig?.disabled,
       size: normalizeDialogSize(state.formDialogConfig?.size, "md"),
-      key: state.formDialogConfig?.key || 0,
+      key: state.formDialogConfig?.key ?? 0,
+    },
+    componentDialogConfig: {
+      title: componentDialogConfig.title ?? "",
+      description: componentDialogConfig.description ?? "",
+      size: normalizeDialogSize(componentDialogConfig.size, "md"),
+      component: componentDialogConfig.component ?? "",
+      props: componentDialogConfig.props ?? {},
+      actions: componentDialogConfig.actions ?? normalizeComponentDialogActions(),
+      key: componentDialogConfig.key ?? 0,
     },
     isDialogOpen,
     isFormDialogOpen,
-    isDialogContainerOpen: isDialogOpen || isFormDialogOpen,
+    isComponentDialogOpen,
+    isDialogContainerOpen: isDialogOpen || isFormDialogOpen || isComponentDialogOpen,
     isDropdownOpen: state.isOpen && state.uiType === 'dropdown',
-    dialogSize: isFormDialogOpen
+    dialogSize: isComponentDialogOpen
+      ? normalizeDialogSize(componentDialogConfig.size, "md")
+      : isFormDialogOpen
       ? normalizeDialogSize(state.formDialogConfig?.size, "md")
       : "sm",
   };

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

@@ -11,6 +11,11 @@ refs:
     eventListeners:
       click:
         handler: handleCancel
+  componentDialogBodyHost: {}
+  componentDialogAction*:
+    eventListeners:
+      click:
+        handler: handleComponentDialogAction
   formDialog:
     eventListeners:
       form-action:
@@ -27,7 +32,24 @@ template:
   - 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
-      - $if !isFormDialogOpen:
+      - $if isComponentDialogOpen:
+          - rtgl-view slot=content g=lg p=lg:
+              - $if componentDialogConfig.title || componentDialogConfig.description:
+                  - rtgl-view g=sm w=f:
+                      - $if componentDialogConfig.title:
+                          - rtgl-text s=lg: ${componentDialogConfig.title}
+                      - $if componentDialogConfig.description:
+                          - rtgl-text c=mu-fg: ${componentDialogConfig.description}
+              - rtgl-view#componentDialogBodyHost w=f key=component-dialog-body-${componentDialogConfig.key}: null
+              - $if componentDialogConfig.actions.buttons.length > 0:
+                  - rtgl-view d=h w=f g=sm:
+                      - rtgl-view d=h g=sm:
+                          - $for button, i in componentDialogConfig.actions._leftButtons:
+                              - rtgl-button#componentDialogAction${button._globalIdx} data-action-id=${button.id} data-action-index=${button._globalIdx} v=${button.variant} ?disabled=${button._disabled} pre=${button.pre} suf=${button.suf}: ${button.label}
+                      - rtgl-view d=h g=sm ah=e w=1fg:
+                          - $for button, i in componentDialogConfig.actions._rightButtons:
+                              - rtgl-button#componentDialogAction${button._globalIdx} data-action-id=${button.id} data-action-index=${button._globalIdx} v=${button.variant} ?disabled=${button._disabled} pre=${button.pre} suf=${button.suf}: ${button.label}
+      - $if !isFormDialogOpen && !isComponentDialogOpen:
           - rtgl-view slot=content g=lg p=lg:
               - rtgl-view g=sm w=f:
                   - $if config.title:

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

@@ -34,12 +34,12 @@ template:
           - $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-popover#popover ?open=${isOpen} x=${position.x} y=${position.y} place=rs:
-      - rtgl-view wh=300 g=xs slot=content bgc=mu br=md sv=true:
+  - 'rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y} place=rs style="--rtgl-popover-content-padding: var(--spacing-sm) 0"':
+      - rtgl-view wh=300 g=xs slot=content bgc=mu sv=true:
           - $for option, i in options:
-              - rtgl-view#option${i} w=f ph=lg pv=md cur=pointer br=md bgc=${option.bgc} data-testid=${option.testId}:
-                  - rtgl-text ta=s: ${option.label}
+              - 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 showAddOption:
               - rtgl-view w=f bw=xs bc=mu bwt=sm: null
-              - rtgl-view#optionAdd w=f ph=lg pv=md cur=pointer br=md bgc=${addOptionBgc} data-testid="select-add-option":
-                  - rtgl-text c=ac: ${addOptionLabel}
+              - rtgl-view#optionAdd w=f ph=lg pv=md cur=pointer bgc=${addOptionBgc} data-testid="select-add-option":
+                  - rtgl-text s=sm c=ac: ${addOptionLabel}