@rettangoli/ui 1.2.3 → 1.3.0

package/dist/themes/theme-catppuccin.css

@@ -76,6 +76,7 @@
   --destructive-foreground: #eff1f5;
 
   --background: #eff1f5;
+  --surface: #eceff4;
   --foreground: #4c4f69;
   --muted: #e6e9ef;
   --muted-foreground: #6c6f85;
@@ -94,6 +95,7 @@
 .dark {
   /* Catppuccin Mocha */
   --background: #1e1e2e;
+  --surface: #252536;
   --foreground: #cdd6f4;
   --primary: #89b4fa;
   --primary-foreground: #1e1e2e;

package/dist/themes/theme-rtgl-mono.css

@@ -75,6 +75,7 @@
   --destructive-foreground: #fcf3f3;
 
   --background: #fff;
+  --surface: #fafafa;
   --foreground: #0a0a0a;
   --muted: #f5f5f5;
   --muted-foreground: #737373;
@@ -92,6 +93,7 @@
 
 .dark {
   --background: #0a0a0a;
+  --surface: #141414;
   --foreground: #fafafa;
   --primary: #e5e5e5;
   --primary-foreground: #171717;

package/dist/themes/theme-rtgl-slate.css

@@ -75,6 +75,7 @@
   --destructive-foreground: oklch(0.145 0 0);
 
   --background: oklch(1 0 0);
+  --surface: oklch(0.985 0 0);
   --foreground: oklch(0.145 0 0);
   --muted: oklch(0.97 0 0);
   --muted-foreground: oklch(0.556 0 0);
@@ -92,6 +93,7 @@
 
 .dark {
   --background: rgb(29 29 29);
+  --surface: rgb(36 36 36);
   --foreground: rgb(242 242 242);
   --primary: oklch(0.922 0 0);
   --primary-foreground: oklch(0.305 0 0);

package/package.json

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

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

@@ -30,7 +30,7 @@ refs:
       mouseleave:
         handler: handleAddOptionMouseLeave
 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=bg cur=${selectButtonCursor} ${containerAttrString} data-testid="select-button" role="button" tabindex=${selectButtonTabIndex} aria-disabled=${isDisabled}':
+  - '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}
           - $if showClear:

package/src/primitives/dialog.js

@@ -106,12 +106,19 @@ class RettangoliDialogElement extends HTMLElement {
     this._adaptiveFrameId = null;
     this._layoutRetryCount = 0;
     this._observedContentElement = null;
+    this._managedLongTokenTextElements = new Set();
+    this._contentMutationObserver = typeof MutationObserver !== "undefined"
+      ? new MutationObserver(() => {
+        this._syncLongTokenWrapping();
+      })
+      : null;
     this._resizeObserver = typeof ResizeObserver !== "undefined"
       ? new ResizeObserver(() => {
         this._scheduleAdaptiveCentering();
       })
       : null;
     this._onSlotChange = () => {
+      this._syncLongTokenWrapping();
       this._observeAssignedContent();
       this._scheduleAdaptiveCentering({ resetRetries: true });
     };
@@ -175,6 +182,7 @@ class RettangoliDialogElement extends HTMLElement {
 
   disconnectedCallback() {
     this._isConnected = false;
+    this._clearManagedLongTokenWrapping();
     this._stopAdaptiveObservers();
     if (this._slotElement) {
       this._slotElement.removeEventListener('slotchange', this._onSlotChange);
@@ -211,6 +219,58 @@ class RettangoliDialogElement extends HTMLElement {
     }
   }
 
+  _clearManagedLongTokenWrapping() {
+    for (const textElement of this._managedLongTokenTextElements) {
+      if (textElement?.isConnected) {
+        textElement.removeAttribute("break-long-tokens");
+      }
+    }
+    this._managedLongTokenTextElements.clear();
+  }
+
+  _collectTextElements(node, collected) {
+    if (!node || node.nodeType !== Node.ELEMENT_NODE) {
+      return;
+    }
+
+    if (node.localName === "rtgl-text") {
+      collected.push(node);
+    }
+
+    for (const child of node.children) {
+      this._collectTextElements(child, collected);
+    }
+
+    if (node.shadowRoot) {
+      for (const child of node.shadowRoot.children) {
+        this._collectTextElements(child, collected);
+      }
+    }
+  }
+
+  _syncLongTokenWrapping() {
+    this._clearManagedLongTokenWrapping();
+
+    if (!this._slotElement) {
+      return;
+    }
+
+    const assignedNodes = this._slotElement.assignedNodes({ flatten: true });
+    const textElements = [];
+
+    for (const node of assignedNodes) {
+      this._collectTextElements(node, textElements);
+    }
+
+    for (const textElement of textElements) {
+      if (textElement.hasAttribute("ellipsis") || textElement.hasAttribute("break-long-tokens")) {
+        continue;
+      }
+      textElement.setAttribute("break-long-tokens", "");
+      this._managedLongTokenTextElements.add(textElement);
+    }
+  }
+
   // Internal methods
   _showModal() {
     if (!this._dialogElement.open) {
@@ -228,6 +288,7 @@ class RettangoliDialogElement extends HTMLElement {
       this._dialogElement.scrollTop = 0;
 
       window.addEventListener("resize", this._onWindowResize);
+      this._syncLongTokenWrapping();
       this._observeAssignedContent();
       this._layoutRetryCount = 0;
       // Apply the first centering pass before paint so the enter animation
@@ -238,6 +299,7 @@ class RettangoliDialogElement extends HTMLElement {
 
   _hideModal() {
     if (this._dialogElement.open) {
+      this._clearManagedLongTokenWrapping();
       this._stopAdaptiveObservers();
       this._dialogElement.close();
 
@@ -269,6 +331,9 @@ class RettangoliDialogElement extends HTMLElement {
     if (this._resizeObserver && this._observedContentElement) {
       this._resizeObserver.unobserve(this._observedContentElement);
     }
+    if (this._contentMutationObserver) {
+      this._contentMutationObserver.disconnect();
+    }
     this._observedContentElement = null;
   }
 
@@ -281,7 +346,7 @@ class RettangoliDialogElement extends HTMLElement {
   }
 
   _observeAssignedContent() {
-    if (!this._resizeObserver) {
+    if (!this._resizeObserver && !this._contentMutationObserver) {
       return;
     }
     const nextContentElement = this._getAssignedContentElement();
@@ -289,11 +354,25 @@ class RettangoliDialogElement extends HTMLElement {
       return;
     }
     if (this._observedContentElement) {
-      this._resizeObserver.unobserve(this._observedContentElement);
+      if (this._resizeObserver) {
+        this._resizeObserver.unobserve(this._observedContentElement);
+      }
+      if (this._contentMutationObserver) {
+        this._contentMutationObserver.disconnect();
+      }
     }
     this._observedContentElement = nextContentElement;
     if (this._observedContentElement) {
-      this._resizeObserver.observe(this._observedContentElement);
+      if (this._resizeObserver) {
+        this._resizeObserver.observe(this._observedContentElement);
+      }
+      if (this._contentMutationObserver) {
+        this._contentMutationObserver.observe(this._observedContentElement, {
+          childList: true,
+          subtree: true,
+        });
+      }
+      this._syncLongTokenWrapping();
     }
   }
 

package/src/primitives/popover.js

@@ -195,12 +195,12 @@ class RettangoliPopoverElement extends HTMLElement {
       this._contentWrapper = document.createElement("rtgl-view");
       this._contentWrapper.setAttribute(CONTENT_WRAPPER_ATTR, "");
       this._contentWrapper.setAttribute("part", "content");
-      this._contentWrapper.setAttribute("bgc", "bg");
+      this._contentWrapper.setAttribute("bgc", "su");
       this._contentWrapper.setAttribute("bw", "xs");
       this._contentWrapper.setAttribute("bc", "bo");
       this._contentWrapper.setAttribute("br", "md");
-      this._contentWrapper.setAttribute("ph", "md");
-      this._contentWrapper.setAttribute("pv", "md");
+      this._contentWrapper.setAttribute("ph", "sm");
+      this._contentWrapper.setAttribute("pv", "sm");
       this._contentWrapper.setAttribute("style", DEFAULT_CONTENT_STYLE);
     }
 
@@ -231,9 +231,9 @@ class RettangoliPopoverElement extends HTMLElement {
       }
     }
 
-    wrapper.setAttribute("bgc", this.getAttribute("content-bgc") || "bg");
-    wrapper.setAttribute("ph", "md");
-    wrapper.setAttribute("pv", this.getAttribute("content-pv") || "md");
+    wrapper.setAttribute("bgc", this.getAttribute("content-bgc") || "su");
+    wrapper.setAttribute("ph", "sm");
+    wrapper.setAttribute("pv", this.getAttribute("content-pv") || "sm");
 
     const contentStyle = this.getAttribute("content-style");
     wrapper.setAttribute("style", contentStyle ? `${DEFAULT_CONTENT_STYLE} ${contentStyle}` : DEFAULT_CONTENT_STYLE);

package/src/primitives/text.js

@@ -58,7 +58,7 @@ class RettangoliTextElement extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["key", "w", "ellipsis", "href", "new-tab", "rel"];
+    return ["key", "w", "ellipsis", "href", "new-tab", "rel", "break-long-tokens"];
   }
 
   connectedCallback() {
@@ -77,15 +77,20 @@ class RettangoliTextElement extends HTMLElement {
   _updateStyling() {
     const width = dimensionWithUnit(this.getAttribute("w"));
     const ellipsis = this.hasAttribute("ellipsis");
+    const breakLongTokens = this.hasAttribute("break-long-tokens");
 
     if (ellipsis) {
       this.style.overflow = "hidden";
       this.style.textOverflow = "ellipsis";
       this.style.whiteSpace = "nowrap";
+      this.style.overflowWrap = "";
+      this.style.wordBreak = "";
     } else {
       this.style.overflow = "";
       this.style.textOverflow = "";
       this.style.whiteSpace = "";
+      this.style.overflowWrap = breakLongTokens ? "anywhere" : "";
+      this.style.wordBreak = breakLongTokens ? "break-word" : "";
     }
 
     // Allow shrinking in flex layouts so ellipsis and wrapping constraints work predictably.

package/src/styles/viewStyles.js

@@ -26,6 +26,9 @@ const styles = {
     bg: `
     background-color: var(--background);
     `,
+    su: `
+    background-color: var(--surface);
+    `,
     mu: `
     background-color: var(--muted);
     `,
@@ -98,6 +101,7 @@ const styles = {
     de: "--destructive",
     fg: "--foreground",
     bg: "--background",
+    su: "--surface",
     mu: "--muted",
     ac: "--accent",
     bo: "--border",

package/src/styles/viewStylesForTarget.js

@@ -16,6 +16,7 @@ const styles = {
     de: `background-color: var(--destructive);`,
     fg: `background-color: var(--foreground);`,
     bg: `background-color: var(--background);`,
+    su: `background-color: var(--surface);`,
     mu: `background-color: var(--muted);`,
     ac: `background-color: var(--accent);`,
     bo: `background-color: var(--border);`,
@@ -41,6 +42,7 @@ const styles = {
     de: "--destructive",
     fg: "--foreground",
     bg: "--background",
+    su: "--surface",
     mu: "--muted",
     ac: "--accent",
     bo: "--border",

package/src/themes/theme-catppuccin.css

@@ -76,6 +76,7 @@
   --destructive-foreground: #eff1f5;
 
   --background: #eff1f5;
+  --surface: #eceff4;
   --foreground: #4c4f69;
   --muted: #e6e9ef;
   --muted-foreground: #6c6f85;
@@ -94,6 +95,7 @@
 .dark {
   /* Catppuccin Mocha */
   --background: #1e1e2e;
+  --surface: #252536;
   --foreground: #cdd6f4;
   --primary: #89b4fa;
   --primary-foreground: #1e1e2e;

package/src/themes/theme-rtgl-mono.css

@@ -75,6 +75,7 @@
   --destructive-foreground: #fcf3f3;
 
   --background: #fff;
+  --surface: #fafafa;
   --foreground: #0a0a0a;
   --muted: #f5f5f5;
   --muted-foreground: #737373;
@@ -92,6 +93,7 @@
 
 .dark {
   --background: #0a0a0a;
+  --surface: #141414;
   --foreground: #fafafa;
   --primary: #e5e5e5;
   --primary-foreground: #171717;

package/src/themes/theme-rtgl-slate.css

@@ -75,6 +75,7 @@
   --destructive-foreground: oklch(0.145 0 0);
 
   --background: oklch(1 0 0);
+  --surface: oklch(0.985 0 0);
   --foreground: oklch(0.145 0 0);
   --muted: oklch(0.97 0 0);
   --muted-foreground: oklch(0.556 0 0);
@@ -92,6 +93,7 @@
 
 .dark {
   --background: rgb(29 29 29);
+  --surface: rgb(36 36 36);
   --foreground: rgb(242 242 242);
   --primary: oklch(0.922 0 0);
   --primary-foreground: oklch(0.305 0 0);