@rettangoli/ui 1.0.0-rc13 → 1.0.0-rc15

package/src/components/form/form.view.yaml

@@ -16,23 +16,15 @@ refs:
   field*:
     eventListeners:
       value-input:
-        handler: handleInputChange
+        handler: handleValueInput
       value-change:
-        handler: handleInputChange
-      add-option-click:
-        handler: handleSelectAddOption
+        handler: handleValueChange
   image*:
     eventListeners:
       click:
         handler: handleImageClick
       contextmenu:
         handler: handleImageClick
-  waveform*:
-    eventListeners:
-      click:
-        handler: handleWaveformClick
-      contextmenu:
-        handler: handleWaveformClick
 template:
   - rtgl-view#formContainer w=f p=md g=lg ${containerAttrString}:
       - rtgl-view g=sm w=f:
@@ -41,49 +33,78 @@ template:
           - $if description:
               - rtgl-text c=mu-fg: ${description}
       - rtgl-view g=lg w=f:
-          - $for field, i in fields:
-              - rtgl-view g=md w=f:
-                  - $if field.label || field.description:
+          - $for field, i in flatFields:
+              - $if field._isSection:
+                  - rtgl-view g=md w=f:
                       - rtgl-view g=sm:
-                          - rtgl-view d=h g=md av=c:
-                              - $if field.label:
-                                  - rtgl-text: ${field.label}
-                              - $if field.label && field.tooltip:
-                                  - rtgl-svg#tooltipIcon${i} data-field-name=${field.name} svg="info" wh=16 c=mu-fg cur=help ml=xs: null
+                          - $if field.label:
+                              - rtgl-text s=md: ${field.label}
                           - $if field.description:
                               - rtgl-text s=sm c=mu-fg: ${field.description}
-                  - $if field.inputType == "read-only-text":
-                      - rtgl-text s=sm: ${field.defaultValue}
-                  - $if field.inputType == "input-text":
-                      - rtgl-input#field${i} data-field-name=${field.name} w=f min=${field.min} max=${field.max} step=${field.step} data-testid=${field.testId}: null
-                  - $if field.inputType == "input-number":
-                      - rtgl-input-number#field${i} data-field-name=${field.name} w=f data-testid=${field.testId}: null
-                  - $if field.inputType == "input-textarea":
-                      - rtgl-textarea#field${i} data-field-name=${field.name} w=f rows=${field.rows} data-testid=${field.testId}: null
-                  - $if field.inputType == "popover-input":
-                      - rtgl-popover-input#field${i} data-field-name=${field.name} label="${field.label}" data-testid=${field.testId}: null
-                  - $if field.inputType == "select":
-                      - rtgl-select#field${i} data-field-name=${field.name} key=${key} w=f :options=fields[${i}].options ?no-clear=fields[${i}].noClear :addOption=fields[${i}].addOption :selectedValue=#{field.selectedValue} :placeholder=#{field.placeholder} data-testid=${field.testId}: null
-                  - $if field.inputType == "color-picker":
-                      - rtgl-color-picker#field${i} data-field-name=${field.name} key=${key} data-testid=${field.testId}: null
-                  - $if field.inputType == "slider":
-                      - rtgl-slider#field${i} data-field-name=${field.name} key=${key} w=f min=${field.min} max=${field.max} step=${field.step} data-testid=${field.testId}: null
-                  - $if field.inputType == "slider-input":
-                      - rtgl-slider-input#field${i} data-field-name=${field.name} w=f min=${field.min} max=${field.max} step=${field.step} data-testid=${field.testId}: null
-                  - $if field.inputType == "image" && field.imageSrc:
-                      - rtgl-image#image${i} data-field-name=${field.name} src=${field.imageSrc} w=${field.width} h=${field.height} cur=pointer data-testid=${field.testId}: null
-                  - $if field.inputType == "image" && !field.imageSrc:
-                      - rtgl-view#image${i} data-field-name=${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=pointer p=md data-testid=${field.testId}:
-                          - rtgl-text c=mu-fg ta=c: ${field.placeholderText}
-                  - $if field.inputType == "waveform" && field.waveformData:
-                      - rtgl-waveform#waveform${i} data-field-name=${field.name} :waveformData=fields[${i}].waveformData w=${field.width} h=${field.height} cur=pointer data-testid=${field.testId}: null
-                  - $if field.inputType == "waveform" && !field.waveformData:
-                      - rtgl-view#waveform${i} data-field-name=${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=pointer p=md data-testid=${field.testId}:
-                          - rtgl-text c=mu-fg ta=c: ${field.placeholder}
-                  - $if field.inputType == "slot":
-                      - 'slot#fieldSlot${i} data-field-name=${field.name} name=${field.slot} style="display: contents;"': null
-      - rtgl-view g=sm w=f:
-          - rtgl-view d=h ah=e g=sm w=f:
-              - $for button, i in actions.buttons:
-                  - rtgl-button#action${i} data-action-id=${button.id} data-testid=${button.testId}: ${button.content}
+              - $if !field._isSection:
+                  - rtgl-view g=md w=f:
+                      - $if field.label || field.description:
+                          - rtgl-view g=sm:
+                              - rtgl-view d=h g=md av=c:
+                                  - $if field.label:
+                                      - rtgl-text: ${field.label}
+                                  - $if field.required:
+                                      - rtgl-text c=fg s=sm: "*"
+                                  - $if field.tooltip:
+                                      - rtgl-svg#tooltipIcon${field._idx} data-field-name=${field.name} svg="info" wh=16 c=mu-fg cur=help ml=xs: null
+                              - $if field.description:
+                                  - rtgl-text s=sm c=mu-fg: ${field.description}
+                      - $if field.type == "input-text":
+                          - rtgl-input#field${field._idx} data-field-name=${field.name} w=f type=${field._inputType} placeholder=${field.placeholder} ?disabled=${field._disabled}: null
+                      - $if field.type == "input-date":
+                          - rtgl-input-date#field${field._idx} data-field-name=${field.name} w=f min=${field.min} max=${field.max} placeholder=${field.placeholder} ?disabled=${field._disabled}: null
+                      - $if field.type == "input-time":
+                          - rtgl-input-time#field${field._idx} data-field-name=${field.name} w=f min=${field.min} max=${field.max} step=${field.step} placeholder=${field.placeholder} ?disabled=${field._disabled}: null
+                      - $if field.type == "input-datetime":
+                          - rtgl-input-datetime#field${field._idx} data-field-name=${field.name} w=f min=${field.min} max=${field.max} step=${field.step} placeholder=${field.placeholder} ?disabled=${field._disabled}: null
+                      - $if field.type == "input-number":
+                          - rtgl-input-number#field${field._idx} data-field-name=${field.name} w=f min=${field.min} max=${field.max} step=${field.step} placeholder=${field.placeholder} ?disabled=${field._disabled}: null
+                      - $if field.type == "input-textarea":
+                          - rtgl-textarea#field${field._idx} data-field-name=${field.name} w=f rows=${field.rows} placeholder=${field.placeholder} ?disabled=${field._disabled}: null
+                      - $if field.type == "select":
+                          - rtgl-select#field${field._idx} data-field-name=${field.name} w=f :options=flatFields[${field._arrIdx}].options ?no-clear=flatFields[${field._arrIdx}].noClear :selectedValue=#{field._selectedValue} :placeholder=#{field.placeholder} ?disabled=${field._disabled}: null
+                      - $if field.type == "color-picker":
+                          - rtgl-color-picker#field${field._idx} data-field-name=${field.name} ?disabled=${field._disabled}: null
+                      - $if field.type == "slider":
+                          - rtgl-slider#field${field._idx} data-field-name=${field.name} w=f min=${field.min} max=${field.max} step=${field.step} ?disabled=${field._disabled}: null
+                      - $if field.type == "slider-with-input":
+                          - rtgl-slider-input#field${field._idx} data-field-name=${field.name} w=f min=${field.min} max=${field.max} step=${field.step} ?disabled=${field._disabled}: null
+                      - $if field.type == "popover-input":
+                          - rtgl-popover-input#field${field._idx} data-field-name=${field.name} label="${field.label}" placeholder=${field.placeholder} ?disabled=${field._disabled}: null
+                      - $if field.type == "checkbox":
+                          - rtgl-checkbox#field${field._idx} data-field-name=${field.name} label="${field._checkboxText}" ?disabled=${field._disabled}: null
+                      - $if field.type == "image" && field._imageSrc:
+                          - rtgl-image#image${field._idx} data-field-name=${field.name} src=${field._imageSrc} w=${field.width} h=${field.height} cur=pointer: null
+                      - $if field.type == "image" && !field._imageSrc:
+                          - rtgl-view#image${field._idx} data-field-name=${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=pointer p=md:
+                              - rtgl-text c=mu-fg ta=c: ${field.placeholderText}
+                      - $if field.type == "read-only-text":
+                          - rtgl-text s=sm: ${field.content}
+                      - $if field.type == "slot":
+                          - 'slot#fieldSlot${field._idx} name=${field.slot} style="display: contents;"': null
+                      - $if field._error:
+                          - rtgl-text s=sm c=de: ${field._error}
+      - $if actions.buttons.length > 0:
+          - $if actions._layout == "split":
+              - rtgl-view d=h w=f g=sm:
+                  - rtgl-view d=h g=sm:
+                      - $for button, i in actions._leftButtons:
+                          - rtgl-button#action${button._globalIdx} data-action-id=${button.id} 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 actions._rightButtons:
+                          - rtgl-button#action${button._globalIdx} data-action-id=${button.id} v=${button.variant} ?disabled=${button._disabled} pre=${button.pre} suf=${button.suf}: ${button.label}
+          - $if actions._layout == "vertical":
+              - rtgl-view g=sm w=f:
+                  - $for button, i in actions._allButtons:
+                      - rtgl-button#action${button._globalIdx} data-action-id=${button.id} v=${button.variant} w=f ?disabled=${button._disabled} pre=${button.pre} suf=${button.suf}: ${button.label}
+          - $if actions._layout == "stretch":
+              - rtgl-view d=h g=sm w=f:
+                  - $for button, i in actions._allButtons:
+                      - rtgl-view w=1fg:
+                          - rtgl-button#action${button._globalIdx} data-action-id=${button.id} v=${button.variant} w=f ?disabled=${button._disabled} pre=${button.pre} suf=${button.suf}: ${button.label}
       - rtgl-tooltip ?open=${tooltipState.open} x=${tooltipState.x} y=${tooltipState.y} place="t" content="${tooltipState.content}": null

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

@@ -55,7 +55,7 @@ export const handleDropdownItemClick = (deps, payload) => {
  * @param {string} [payload.confirmText] - Text for the confirm button (default: "OK")
  * @returns {void}
  */
-export const showAlert = (deps, payload) => {
+export const handleShowAlert = (deps, payload) => {
   const { store, render } = deps;
   const options = payload;
 
@@ -69,7 +69,7 @@ export const showAlert = (deps, payload) => {
   render();
 };
 
-export const showConfirm = async (deps, payload) => {
+export const handleShowConfirm = async (deps, payload) => {
   const { store, render, globalUI } = deps;
   const options = payload;
 
@@ -107,7 +107,7 @@ export const showConfirm = async (deps, payload) => {
  * @returns {Object} [result.index] - Index of the clicked item
  * @returns {Object} [result.item] - The clicked item object
  */
-export const showDropdownMenu = async (deps, payload) => {
+export const handleShowDropdownMenu = async (deps, payload) => {
   const { store, render, globalUI } = deps;
   const options = payload;
 
@@ -140,7 +140,7 @@ export const showDropdownMenu = async (deps, payload) => {
  * @param {Object} deps.globalUI - The globalUI event emitter
  * @returns {void}
  */
-export const closeAll = (deps) => {
+export const handleCloseAll = (deps) => {
   const { store, render } = deps;
 
   // Close global UI dialogs/dropdowns

package/src/components/popoverInput/popoverInput.handlers.js

@@ -1,18 +1,46 @@
+const normalizePopoverValue = (value) => {
+  if (value === undefined || value === null || value === true) {
+    return "";
+  }
+  return String(value);
+};
+
+const commitValue = (deps, value) => {
+  const { store, render, dispatchEvent } = deps;
+  const nextValue = normalizePopoverValue(value);
+
+  store.setValue({ value: nextValue });
+  store.closePopover({});
+
+  dispatchEvent(new CustomEvent("value-change", {
+    detail: { value: nextValue },
+    bubbles: true,
+  }));
+
+  render();
+};
+
 export const handleBeforeMount = (deps) => {
   const { store, props } = deps;
 
   if (props.value !== undefined) {
-    store.setValue({ value: props.value || '' });
+    const value = normalizePopoverValue(props.value);
+    store.setValue({ value });
+    store.setTempValue({ value });
   }
 }
 
 export const handleOnUpdate = (deps, payload) => {
   const { oldProps, newProps } = payload;
   const { store, render } = deps;
+  const valueChanged = oldProps?.value !== newProps?.value;
 
-  if (oldProps?.value !== newProps?.value) {
-    const value = newProps?.value ?? '';
+  if (valueChanged) {
+    const value = normalizePopoverValue(newProps?.value);
     store.setValue({ value });
+    if (!store.getState().isOpen) {
+      store.setTempValue({ value });
+    }
   }
 
   render();
@@ -20,10 +48,14 @@ export const handleOnUpdate = (deps, payload) => {
 
 export const handleTextClick = (deps, payload) => {
   const { store, render, refs, props } = deps;
+  if (props.disabled) {
+    return;
+  }
   const event = payload._event;
 
-  const value = store.selectValue();
-  store.setTempValue({ value })
+  const value = normalizePopoverValue(props.value);
+  store.setValue({ value });
+  store.setTempValue({ value });
 
   store.openPopover({
     position: {
@@ -31,16 +63,18 @@ export const handleTextClick = (deps, payload) => {
       y: event.currentTarget.getBoundingClientRect().bottom,
     }
   });
-
-  const { input } = refs;
-  input.value = value;
   render();
 
-  if (props.autoFocus) {
-    setTimeout(() => {
-      input.focus();
-    }, 50)
-  }
+  setTimeout(() => {
+    const { input } = refs;
+    if (!input) return;
+    input.value = value;
+    input.focus();
+    const innerInput = input.shadowRoot?.querySelector("input, textarea");
+    if (innerInput && typeof innerInput.focus === "function") {
+      innerInput.focus();
+    }
+  }, 50);
 }
 
 export const handlePopoverClose = (deps, payload) => {
@@ -50,54 +84,34 @@ export const handlePopoverClose = (deps, payload) => {
 }
 
 export const handleInputChange = (deps, payload) => {
-  const { store, render, dispatchEvent } = deps;
+  const { store } = deps;
   const event = payload._event;
-  const value = event.detail.value;
+  const value = normalizePopoverValue(event.detail.value);
 
   store.setTempValue({ value });
-
-  dispatchEvent(new CustomEvent('value-input', {
-    detail: { value },
-    bubbles: true,
-  }));
-
-  render();
 }
 
 export const handleSubmitClick = (deps) => {
-  const { store, render, dispatchEvent, refs } = deps;
-  const { input } = refs
-  const value = input.value;
-
-  store.setValue({ value });
-  store.closePopover({});
-
-  dispatchEvent(new CustomEvent('value-change', {
-    detail: { value },
-    bubbles: true,
-  }));
-
-  render();
+  const { store, refs } = deps;
+  const { input } = refs;
+  const value = input ? input.value : store.getState().tempValue;
+  commitValue(deps, value);
 }
 
 export const handleInputKeydown = (deps, payload) => {
-  const { store, render, dispatchEvent, refs } = deps;
+  const { store, refs } = deps;
   const event = payload._event;
 
-  if (event.key === 'Enter') {
-    const { input } = refs
-    const value = input.value;
-
-    store.closePopover({});
-    // Dispatch custom event
-    dispatchEvent(new CustomEvent('value-change', {
-      detail: { value },
-      bubbles: true,
-    }));
-
-    render();
-  } else if (event.key === 'Escape') {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    event.stopPropagation();
+    const { input } = refs;
+    const value = input ? input.value : store.getState().tempValue;
+    commitValue(deps, value);
+  } else if (event.key === "Escape") {
+    event.preventDefault();
+    event.stopPropagation();
     store.closePopover({});
-    render();
+    deps.render();
   }
 }

package/src/components/popoverInput/popoverInput.schema.yaml

@@ -10,8 +10,10 @@ propsSchema:
       type: string
     autoFocus:
       type: boolean
+    disabled:
+      type: boolean
+      default: false
 events:
-  value-input: {}
   value-change: {}
 methods:
   type: object

package/src/components/popoverInput/popoverInput.store.js

@@ -9,15 +9,21 @@ export const createInitialState = () => Object.freeze({
 });
 
 export const selectViewData = ({ props, state }) => {
-  const value = state.value || '-';
+  const hasValue = typeof state.value === "string" && state.value.length > 0;
+  const value = hasValue ? state.value : "-";
+  const placeholder = typeof props.placeholder === "string" ? props.placeholder : "";
+  const label = typeof props.label === "string" ? props.label : "";
+  const disabled = Boolean(props.disabled);
 
   return {
     isOpen: state.isOpen,
     position: state.position,
     value: value,
+    valueColor: hasValue ? "fg" : "mu-fg",
     tempValue: state.tempValue,
-    placeholder: props.placeholder ?? '',
-    label: props.label,
+    placeholder,
+    label,
+    disabled,
   };
 }
 

package/src/components/popoverInput/popoverInput.view.yaml

@@ -19,10 +19,10 @@ refs:
         handler: handleSubmitClick
 template:
   - rtgl-view#textDisplay w=f cur=pointer:
-      - rtgl-text: ${value}
+      - rtgl-text c=${valueColor}: ${value}
   - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y}:
-      - rtgl-view g=md w=240 slot=content bgc=bg br=md:
+      - rtgl-view g=md w=240 slot=content bgc=mu br=md:
           - rtgl-text: ${label}
-          - rtgl-input#input w=f placeholder=${placeholder}: null
+          - rtgl-input#input w=f placeholder=${placeholder} ?disabled=${disabled}: null
           - rtgl-view w=f ah=e:
-              - rtgl-button#submit: Submit
+              - rtgl-button#submit ?disabled=${disabled}: Submit

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

@@ -17,33 +17,26 @@ export const handleBeforeMount = (deps) => {
 export const handleOnUpdate = (deps, payload) => {
   const { oldProps, newProps } = payload;
   const { store, render } = deps;
+  let shouldRender = false;
 
-  // Check if key changed
-  if (oldProps?.key !== newProps?.key && newProps?.key) {
-    // Clear current state using store action
-    store.resetSelection({});
-
-    // Re-apply the prop value if available
-    const selectedValue = newProps?.selectedValue;
-    const options = newProps?.options || [];
-
-    if (selectedValue !== null && selectedValue !== undefined && options) {
-      const selectedOption = options.find(opt => deepEqual(opt.value, selectedValue));
-      if (selectedOption) {
-        store.updateSelectedValue({
-          value: selectedOption.value
-        });
-      }
-    }
-    render();
-  } else if (oldProps.selectedValue !== newProps.selectedValue) {
+  if (!!newProps?.disabled && !oldProps?.disabled) {
+    store.closeOptionsPopover({});
+    shouldRender = true;
+  }
+
+  if (oldProps.selectedValue !== newProps.selectedValue) {
     store.updateSelectedValue({ value: newProps.selectedValue });
+    shouldRender = true;
+  }
+
+  if (shouldRender) {
     render();
   }
 }
 
 export const handleButtonClick = (deps, payload) => {
   const { store, render, refs, props } = deps;
+  if (props.disabled) return;
   const event = payload._event;
   event.stopPropagation();
 
@@ -80,6 +73,7 @@ export const handleClickOptionsPopoverOverlay = (deps) => {
 
 export const handleOptionClick = (deps, payload) => {
   const { render, dispatchEvent, props, store } = deps;
+  if (props.disabled) return;
   const event = payload._event;
   event.stopPropagation();
   const id = event.currentTarget.id.slice('option'.length);
@@ -124,6 +118,7 @@ export const handleOptionMouseLeave = (deps, payload) => {
 
 export const handleClearClick = (deps, payload) => {
   const { store, render, dispatchEvent, props } = deps;
+  if (props.disabled) return;
   const event = payload._event;
 
   event.stopPropagation();
@@ -150,6 +145,7 @@ export const handleClearClick = (deps, payload) => {
 }
 
 export const handleAddOptionClick = (deps, payload) => {
+  if (deps.props.disabled) return;
   const { store, render, dispatchEvent } = deps;
   const { _event: event } = payload;
   event.stopPropagation();

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

@@ -26,6 +26,8 @@ propsSchema:
       properties:
         label:
           type: string
+    disabled:
+      type: boolean
     w:
       type: string
 events:

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

@@ -14,6 +14,7 @@ const blacklistedProps = [
   "options",
   "noClear",
   "addOption",
+  "disabled",
 ];
 
 const stringifyProps = (props = {}) => {
@@ -37,9 +38,11 @@ export const createInitialState = () => Object.freeze({
 export const selectViewData = ({ state, props }) => {
   // Generate container attribute string
   const containerAttrString = stringifyProps(props);
+  const isDisabled = !!props.disabled;
 
-  // Use state's selected value if available, otherwise use props.selectedValue
-  const currentValue = state.selectedValue !== null ? state.selectedValue : props.selectedValue;
+  // Treat selectedValue as a controlled prop when provided by parent.
+  const hasControlledValue = Object.prototype.hasOwnProperty.call(props || {}, "selectedValue");
+  const currentValue = hasControlledValue ? props.selectedValue : state.selectedValue;
 
   // Calculate display label from value
   let displayLabel = props.placeholder || "Select an option";
@@ -65,6 +68,7 @@ export const selectViewData = ({ state, props }) => {
 
   return {
     containerAttrString,
+    isDisabled,
     isOpen: state.isOpen,
     position: state.position,
     options: optionsWithSelection,
@@ -72,8 +76,8 @@ export const selectViewData = ({ state, props }) => {
     selectedLabel: displayLabel,
     selectedLabelColor: isPlaceholderLabel ? "mu-fg" : "fg",
     hasValue: currentValue !== null && currentValue !== undefined,
-    showClear: !props.noClear && (currentValue !== null && currentValue !== undefined),
-    showAddOption: !!props.addOption,
+    showClear: !isDisabled && !props.noClear && (currentValue !== null && currentValue !== undefined),
+    showAddOption: !isDisabled && !!props.addOption,
     addOptionLabel: props.addOption?.label ? `+ ${props.addOption.label}` : "+ Add",
     addOptionBgc: state.hoveredAddOption ? "ac" : "",
   };
@@ -125,5 +129,3 @@ export const clearSelectedValue = ({ state }) => {
 export const setHoveredAddOption = ({ state }, payload = {}) => {
   state.hoveredAddOption = !!payload.isHovered;
 };
-
-

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

@@ -28,9 +28,9 @@ refs:
       mouseleave:
         handler: handleAddOptionMouseLeave
 template:
-  - rtgl-button#selectButton v=ol ${containerAttrString} data-testid="select-button":
-      - rtgl-view d=h av=c w=f:
-          - rtgl-text w=1fg c=${selectedLabelColor} ellipsis: ${selectedLabel}
+  - rtgl-button#selectButton v=ol ${containerAttrString} ?disabled=${isDisabled} data-testid="select-button":
+      - rtgl-view d=h av=c ah=s w=f:
+          - rtgl-text w=1fg ta=s c=${selectedLabelColor} ellipsis: ${selectedLabel}
           - $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
@@ -38,7 +38,7 @@ template:
       - rtgl-view wh=300 g=xs slot=content bgc=mu br=md 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: ${option.label}
+                  - rtgl-text ta=s: ${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":

package/src/components/sliderInput/sliderInput.handlers.js

@@ -6,8 +6,10 @@ export const handleBeforeMount = (deps) => {
 export const handleOnUpdate = (deps, payload) => {
   const { oldProps, newProps } = payload;
   const { store, render } = deps;
+  const keyChanged = oldProps?.key !== newProps?.key;
+  const valueChanged = oldProps?.value !== newProps?.value;
 
-  if (oldProps?.value !== newProps?.value) {
+  if (keyChanged || valueChanged) {
     const value = newProps?.value ?? 0;
     store.setValue({ value });
     render();
@@ -18,8 +20,14 @@ export const handleValueChange = (deps, payload) => {
   const { store, render, dispatchEvent } = deps;
   const event = payload._event;
   const newValue = Number(event.detail.value);
+  const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+  const host = path.find((node) => node?.tagName === "RTGL-SLIDER-INPUT")
+    || event.currentTarget?.getRootNode?.()?.host;
 
   store.setValue({ value: newValue });
+  if (host && typeof host.setAttribute === "function") {
+    host.setAttribute("value", String(newValue));
+  }
 
   // Re-render to sync slider and input
   render();
@@ -39,8 +47,14 @@ export const handleValueInput = (deps, payload) => {
   const { store, render, dispatchEvent } = deps;
   const event = payload._event;
   const newValue = Number(event.detail.value);
+  const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+  const host = path.find((node) => node?.tagName === "RTGL-SLIDER-INPUT")
+    || event.currentTarget?.getRootNode?.()?.host;
 
   store.setValue({ value: newValue });
+  if (host && typeof host.setAttribute === "function") {
+    host.setAttribute("value", String(newValue));
+  }
 
   // Re-render to sync slider and input
   render();

package/src/components/sliderInput/sliderInput.schema.yaml

@@ -19,6 +19,9 @@ propsSchema:
     step:
       type: string
       default: '1'
+    disabled:
+      type: boolean
+      default: false
 events:
   value-input: {}
   value-change: {}

package/src/components/sliderInput/sliderInput.store.js

@@ -9,7 +9,8 @@ export const selectViewData = ({ state, props }) => {
     w: props.w || '',
     min: props.min || 0,
     max: props.max || 100,
-    step: props.step || 1
+    step: props.step || 1,
+    disabled: Boolean(props.disabled),
   };
 }
 

package/src/components/sliderInput/sliderInput.view.yaml

@@ -13,6 +13,6 @@ refs:
         handler: handleValueInput
 template:
   - rtgl-view d=h av=c g=md w=${w}:
-      - rtgl-slider#slider key=${key} w=f type=range min=${min} max=${max} step=${step} value=${value}: null
+      - rtgl-slider#slider key=${key} w=f type=range min=${min} max=${max} step=${step} value=${value} ?disabled=${disabled}: null
       - rtgl-view w=84:
-          - rtgl-input#input key=${key} w=f type=number min=${min} max=${max} step=${step} value=${value}: null
+          - rtgl-input-number#input key=${key} w=f min=${min} max=${max} step=${step} value=${value} ?disabled=${disabled}: null

package/src/components/tooltip/tooltip.schema.yaml

@@ -3,7 +3,7 @@ propsSchema:
   type: object
   properties:
     open:
-      type: string
+      type: boolean
     x:
       type: string
     'y':