@rettangoli/ui 1.0.24 → 1.1.0

package/package.json

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

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

@@ -15,7 +15,7 @@ styles:
     color: inherit
 template:
   - rtgl-popover#popover ?open=${open} x=${x} y=${y} place=${place}:
-      - rtgl-view w=${w} h=${h} sv g=xs slot=content bgc=mu br=md:
+      - rtgl-view w=${w} h=${h} sv g=xs slot=content bgc=bg pv=sm:
           - $for item, i in items:
               - $if item.isLabel:
                   - rtgl-view w=f ph=lg pv=md:

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

@@ -21,7 +21,7 @@ template:
   - rtgl-view#textDisplay w=f cur=pointer:
       - 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=mu br=md:
+      - rtgl-view g=md w=240 slot=content bgc=bg br=md:
           - rtgl-text: ${label}
           - rtgl-input#input w=f placeholder=${placeholder} ?disabled=${disabled}: null
           - rtgl-view w=f ah=e:

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

@@ -41,10 +41,7 @@ export const handleButtonClick = (deps, payload) => {
   event.stopPropagation();
 
   const button = refs.selectButton;
-
-  // Get first child's bounding rectangle (since button has display: contents)
-  const firstChild = button.firstElementChild;
-  const rect = firstChild ? firstChild.getBoundingClientRect() : button.getBoundingClientRect();
+  const rect = button.getBoundingClientRect();
 
   // Find the index of the currently selected option
   const storeSelectedValue = store.selectSelectedValue();
@@ -65,6 +62,16 @@ export const handleButtonClick = (deps, payload) => {
   render();
 }
 
+export const handleButtonKeyDown = (deps, payload) => {
+  const event = payload._event;
+  if (event.key !== "Enter" && event.key !== " ") {
+    return;
+  }
+
+  event.preventDefault();
+  handleButtonClick(deps, payload);
+}
+
 export const handleClickOptionsPopoverOverlay = (deps) => {
   const { store, render } = deps;
   store.closeOptionsPopover({});

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

@@ -75,6 +75,9 @@ export const selectViewData = ({ state, props }) => {
     selectedValue: currentValue,
     selectedLabel: displayLabel,
     selectedLabelColor: isPlaceholderLabel ? "mu-fg" : "fg",
+    selectButtonCursor: isDisabled ? "not-allowed" : "pointer",
+    selectButtonHoverBorderColor: isDisabled ? "bo" : "ac",
+    selectButtonTabIndex: isDisabled ? -1 : 0,
     hasValue: currentValue !== null && currentValue !== undefined,
     showClear: !isDisabled && !props.noClear && (currentValue !== null && currentValue !== undefined),
     showAddOption: !isDisabled && !!props.addOption,

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

@@ -3,6 +3,8 @@ refs:
     eventListeners:
       click:
         handler: handleButtonClick
+      keydown:
+        handler: handleButtonKeyDown
   clearButton:
     eventListeners:
       click:
@@ -28,14 +30,14 @@ refs:
       mouseleave:
         handler: handleAddOptionMouseLeave
 template:
-  - rtgl-button#selectButton v=ol ${containerAttrString} ?disabled=${isDisabled} data-testid="select-button":
+  - '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=bg 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}
           - $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 style="--rtgl-popover-content-padding: var(--spacing-sm) 0"':
-      - rtgl-view wh=300 g=xs slot=content bgc=mu sv=true:
+  - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y} place=rs:
+      - rtgl-view wh=300 g=xs slot=content bgc=bg sv=true 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}

package/src/components/tooltip/tooltip.store.js

@@ -35,6 +35,6 @@ export const selectViewData = ({ props }) => {
     textSize: preset.textSize,
     paddingX: preset.paddingX,
     paddingY: preset.paddingY,
-    popoverStyle: `--rtgl-popover-content-padding: 0; --rtgl-popover-content-min-width: 0; --rtgl-popover-content-max-width: ${preset.maxWidth}`,
+    contentStyle: `padding: 0; min-width: 0; max-width: ${preset.maxWidth};`,
   };
 }

package/src/components/tooltip/tooltip.view.yaml

@@ -1,5 +1,6 @@
 template:
-  - 'rtgl-popover#popover ?open=${open} x=${x} y=${y} place=${place} no-overlay style="${popoverStyle}"':
-      - rtgl-view slot=content bc=bo br=md ph=${paddingX} pv=${paddingY} ah=s av=c:
-          - rtgl-text ta=s s=${textSize} c=fg: ${content}
+  - rtgl-popover#popover ?open=${open} x=${x} y=${y} place=${place} no-overlay:
+      - 'rtgl-view slot=content style="${contentStyle}"':
+          - rtgl-view ph=${paddingX} pv=${paddingY} ah=s av=c:
+              - rtgl-text ta=s s=${textSize} c=fg: ${content}
 refs: {}

package/src/primitives/button.js

@@ -148,6 +148,10 @@ class RettangoliButtonElement extends HTMLElement {
           background-color: var(--accent);
         }
 
+        :host([v="ol"]) .surface:active {
+          background-color: var(--accent);
+        }
+
         :host([v="gh"]) .surface:hover {
           background-color: var(--accent);
         }

package/src/primitives/popover.js

@@ -53,13 +53,18 @@ class RettangoliPopoverElement extends HTMLElement {
         }
 
         slot[name="content"] {
+          display: contents;
+        }
+
+        ::slotted([slot="content"]) {
           display: block;
-          background-color: var(--muted);
+          box-sizing: border-box;
+          background-color: var(--background);
           border: 1px solid var(--border);
-          border-radius: var(--rtgl-popover-content-border-radius, var(--border-radius-md));
-          padding: var(--rtgl-popover-content-padding, var(--spacing-md));
-          min-width: var(--rtgl-popover-content-min-width, 200px);
-          max-width: var(--rtgl-popover-content-max-width, 400px);
+          border-radius: var(--border-radius-md);
+          padding: var(--spacing-md);
+          min-width: 200px;
+          max-width: 400px;
         }
       `);
     }