@raylang/elements 0.9.0 → 0.10.0

package/core/complete.js

@@ -42,7 +42,8 @@ export const completeStyles = css`
     white-space: nowrap;
   }
   .suggestion[aria-selected="true"] { color: var(--ray-accent-foreground); background: var(--ray-accent); }
-  .suggestion .s-label { flex: none; font-family: var(--ray-font-mono); }
+  .suggestion .s-main { flex: none; }
+  .suggestion .s-label { font-family: var(--ray-font-mono); }
   .suggestion .s-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ray-muted-foreground); }
   .suggestion .s-description { display: block; font-size: var(--ray-font-size-xs); color: var(--ray-muted-foreground); }
 `;
@@ -127,22 +128,30 @@ class Completer {
       option.dataset.index = String(i);
       option.setAttribute("role", "option");
       option.setAttribute("part", "suggestion");
+      // The label (code, in the mono font) with the description (prose)
+      // under it, then the detail.
+      const main = document.createElement("span");
+      main.className = "s-main";
       const label = document.createElement("span");
       label.className = "s-label";
+      label.setAttribute("part", "suggestion-label");
       label.textContent = item.label ?? String(item.value);
-      option.append(label);
+      main.append(label);
+      if (item.description) {
+        const d = document.createElement("span");
+        d.className = "s-description";
+        d.setAttribute("part", "suggestion-description");
+        d.textContent = item.description;
+        main.append(d);
+      }
+      option.append(main);
       if (item.detail) {
         const detail = document.createElement("span");
         detail.className = "s-detail";
+        detail.setAttribute("part", "suggestion-detail");
         detail.textContent = item.detail;
         option.append(detail);
       }
-      if (item.description) {
-        const d = document.createElement("span");
-        d.className = "s-description";
-        d.textContent = item.description;
-        label.append(d);
-      }
       return option;
     }));
     const keep = this.open ? this.open.items[this.open.index]?.value : undefined;

package/custom-elements.json

@@ -4814,6 +4814,18 @@
               "name": "suggestion",
               "description": "Each suggestion ([aria-selected] when active)."
             },
+            {
+              "name": "suggestion-label",
+              "description": "A suggestion's label (in the mono font)."
+            },
+            {
+              "name": "suggestion-detail",
+              "description": "A suggestion's detail."
+            },
+            {
+              "name": "suggestion-description",
+              "description": "A suggestion's description, under its label (in the interface font)."
+            },
             {
               "name": "highlight",
               "description": "Each marked range (also highlight-<kind> for a range with a kind)."
@@ -9575,6 +9587,18 @@
               "name": "suggestion",
               "description": "Each suggestion ([aria-selected] when active)."
             },
+            {
+              "name": "suggestion-label",
+              "description": "A suggestion's label (in the mono font)."
+            },
+            {
+              "name": "suggestion-detail",
+              "description": "A suggestion's detail."
+            },
+            {
+              "name": "suggestion-description",
+              "description": "A suggestion's description, under its label (in the interface font)."
+            },
             {
               "name": "highlight",
               "description": "Each marked range (also highlight-<kind> for a range with a kind)."

package/llms-full.txt

@@ -1,6 +1,6 @@
 # ray-elements
 
-> Web components (custom elements, Shadow DOM, no dependencies) for any web app: plain HTML, React, Vue or a raylang app. npm: `@raylang/elements`, `@raylang/react`, `@raylang/vue`; raylang: the `elements` package. This file describes version 0.9.0.
+> Web components (custom elements, Shadow DOM, no dependencies) for any web app: plain HTML, React, Vue or a raylang app. npm: `@raylang/elements`, `@raylang/react`, `@raylang/vue`; raylang: the `elements` package. This file describes version 0.10.0.
 
 ray-elements is a design system of standard web components (custom elements
 with Shadow DOM, no dependencies): `<ray-button>`, `<ray-input>`,
@@ -935,6 +935,9 @@ Parts (`::part()`):
 - `error`: The error message.
 - `suggestions`: The suggestion list (a listbox in the top layer).
 - `suggestion`: Each suggestion ([aria-selected] when active).
+- `suggestion-label`: A suggestion's label (in the mono font).
+- `suggestion-detail`: A suggestion's detail.
+- `suggestion-description`: A suggestion's description, under its label (in the interface font).
 - `highlight`: Each marked range (also highlight-<kind> for a range with a kind).
 - `text-layer`: The layer behind the text that holds the marks.
 
@@ -1486,6 +1489,9 @@ Parts (`::part()`):
 - `wrapper`: The box.
 - `suggestions`: The suggestion list (a listbox in the top layer).
 - `suggestion`: Each suggestion ([aria-selected] when active).
+- `suggestion-label`: A suggestion's label (in the mono font).
+- `suggestion-detail`: A suggestion's detail.
+- `suggestion-description`: A suggestion's description, under its label (in the interface font).
 - `highlight`: Each marked range (also highlight-<kind> for a range with a kind).
 - `text-layer`: The layer behind the text that holds the marks.
 

package/llms.txt

@@ -1,6 +1,6 @@
 # ray-elements
 
-> Web components (custom elements, Shadow DOM, no dependencies) for any web app: plain HTML, React, Vue or a raylang app. npm: `@raylang/elements`, `@raylang/react`, `@raylang/vue`; raylang: the `elements` package. This file describes version 0.9.0.
+> Web components (custom elements, Shadow DOM, no dependencies) for any web app: plain HTML, React, Vue or a raylang app. npm: `@raylang/elements`, `@raylang/react`, `@raylang/vue`; raylang: the `elements` package. This file describes version 0.10.0.
 
 ray-elements is a design system of standard web components (custom elements
 with Shadow DOM, no dependencies): `<ray-button>`, `<ray-input>`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raylang/elements",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Web components for any app, with raylang extras (shadcn/ui + Mantine inspired)",
   "license": "Apache-2.0",
   "keywords": ["web-components", "custom-elements", "design-system", "ui", "raylang"],