@raylang/elements 0.8.0 → 0.9.0

package/components/code/code.js

@@ -400,6 +400,7 @@ export class RayCode extends RayElement {
     lineNumbers: { type: Boolean, reflect: true },
     highlight: { type: String },
     wrap: { type: Boolean, reflect: true },
+    verbatim: { type: Boolean, reflect: true },
     maxHeight: { type: String },
     expanded: { type: Boolean, reflect: true },
     hideCopy: { type: Boolean, reflect: true },
@@ -450,20 +451,22 @@ export class RayCode extends RayElement {
     this.#observer.disconnect();
   }
 
-  /** The code shown (dedented), whatever its source. */
+  /** The code shown (dedented unless verbatim), whatever its source. */
   get source() {
     return this.#source;
   }
 
   #readSource() {
-    if (typeof this.code === "string") return dedent(this.code);
+    // verbatim: data (a response body, a log) is shown and copied as it came.
+    const shape = this.verbatim ? String : dedent;
+    if (typeof this.code === "string") return shape(this.code);
     // A <template> is parsed as HTML: perfect for markup; its serialization
     // escapes &, < and > in text, undone here.
     const tpl = this.querySelector(":scope > template");
-    if (tpl) return dedent(tpl.innerHTML.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&nbsp;/g, "\u00a0").replace(/&amp;/g, "&"));
+    if (tpl) return shape(tpl.innerHTML.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&nbsp;/g, "\u00a0").replace(/&amp;/g, "&"));
     const script = this.querySelector(':scope > script[type="text/plain"]');
-    if (script) return dedent(script.textContent);
-    return dedent(this.textContent);
+    if (script) return shape(script.textContent);
+    return shape(this.textContent);
   }
 
   update() {

package/components/command-palette/command-palette.js

@@ -86,6 +86,7 @@ const styles = css`
   .icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; color: var(--ray-muted-foreground); }
   .option[aria-selected="true"] .icon { color: inherit; }
   .icon svg { width: 1rem; height: 1rem; }
+  .prefix { flex: none; display: inline-flex; align-items: center; font-size: var(--ray-font-size-xs); color: var(--ray-muted-foreground); }
   .text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
   .label, .description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .label { font-size: var(--ray-font-size-sm); }
@@ -187,6 +188,9 @@ export class RayCommandPalette extends RayElement {
     emptyLabel: { type: String, default: "Nothing found" },
     label: { type: String, default: "Command palette" },
     hideHint: { type: Boolean, reflect: true },
+    navigateLabel: { type: String, default: "navigate" },
+    runLabel: { type: String, default: "run" },
+    closeLabel: { type: String, default: "close" },
     overlayBlur: { type: String },
     nativeMenus: { type: Boolean, attribute: "native-menus", reflect: true },
   };
@@ -196,7 +200,7 @@ export class RayCommandPalette extends RayElement {
       <div class="search" part="search">${SEARCH_ICON}<input id="input" part="input" role="combobox" aria-expanded="true" aria-controls="list" aria-autocomplete="list" autocomplete="off" spellcheck="false"></div>
       <div class="list" id="list" role="listbox" part="list"></div>
       <div class="empty" part="empty" hidden></div>
-      <div class="hint" part="hint"><span><b>↑↓</b> navigate</span><span><b>↵</b> run</span><span><b>esc</b> close</span></div>
+      <div class="hint" part="hint"><span><b>↑↓</b> <span id="hint-navigate"></span></span><span><b>↵</b> <span id="hint-run"></span></span><span><b>esc</b> <span id="hint-close"></span></span></div>
       <slot name="overlay"></slot>
     </dialog>`;
 
@@ -281,6 +285,9 @@ export class RayCommandPalette extends RayElement {
     this.dialog.setAttribute("aria-label", this.label ?? "Command palette");
     if (this.input.value !== (this.query ?? "")) this.input.value = this.query ?? "";
     this.$(".hint").hidden = Boolean(this.hideHint);
+    this.$("#hint-navigate").textContent = this.navigateLabel ?? "";
+    this.$("#hint-run").textContent = this.runLabel ?? "";
+    this.$("#hint-close").textContent = this.closeLabel ?? "";
     this._render();
     if (changed.has("open") || this._first === undefined) {
       this._first = false;
@@ -399,6 +406,14 @@ export class RayCommandPalette extends RayElement {
       else icon.textContent = String(a.icon);
       opt.append(icon);
     }
+    // Content of its own before the text, any width: a colored method tag.
+    if (a.prefix !== undefined && a.prefix !== null && a.prefix !== "") {
+      const prefix = document.createElement("span");
+      prefix.className = "prefix";
+      if (a.prefix instanceof Node) prefix.append(a.prefix);
+      else prefix.textContent = String(a.prefix);
+      opt.append(prefix);
+    }
     const text = document.createElement("span");
     text.className = "text";
     const label = document.createElement("span");

package/components/doc-tabs/doc-tabs.js

@@ -0,0 +1,255 @@
+// <ray-doc-tabs> + <ray-doc-tab>: the tabs of open documents (an editor's,
+// a browser's), each closable and with an unsaved mark, all over one shared
+// panel (WAI-ARIA tabs: `panel` is that element's id).
+//
+// Closing is the app's: the × (for the pointer only: a tab holds no
+// focusable control), a middle click, or Delete/Backspace on the focused tab
+// fire `ray-request-close` ({ value, tab, source }); the app asks if it must
+// and removes the tab. When the selected tab goes, the one that takes its
+// place is selected (`change`), and focused if the closed tab had the focus.
+//
+// Too many tabs for the width: the bar scrolls sideways like ray-tabs.
+
+import { RayElement, css, define, uid } from "../../core/core.js";
+import { inlineKey } from "../../core/direction.js";
+import { SideScroller, sideScrollerStyles } from "../../core/scroll.js";
+
+const barStyles = css`
+  :host { display: flex; align-items: center; gap: var(--ray-space-1); min-width: 0; }
+  .list { display: flex; flex: 0 1 auto; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
+  .list::-webkit-scrollbar { display: none; }
+  .list ::slotted(ray-doc-tab) { flex: none; }
+  .end { display: inline-flex; flex: none; align-items: center; }
+  .end:not([data-filled]) { display: none; }
+`;
+
+export class RayDocTabs extends RayElement {
+  static properties = {
+    value: { type: String },
+    panel: { type: String },
+    label: { type: String },
+    closeLabel: { type: String, default: "Close" },
+    dirtyLabel: { type: String, default: "Unsaved changes" },
+  };
+  static styles = [sideScrollerStyles, barStyles];
+  static template = `<div class="list" part="list" role="tablist"><slot></slot></div><span class="end" part="end"><slot name="end"></slot></span>`;
+
+  constructor() {
+    super();
+    this._order = [];
+    this._focused = null;
+    this.addEventListener("click", (e) => {
+      const tab = this._tabOf(e);
+      if (!tab) return;
+      if (e.composedPath().some((n) => n.part?.contains?.("close"))) this._requestClose(tab, "button");
+      else this._select(tab, true);
+    });
+    // The middle button closes, without the browser's autoscroll.
+    this.addEventListener("mousedown", (e) => {
+      if (e.button === 1 && this._tabOf(e)) e.preventDefault();
+    });
+    this.addEventListener("auxclick", (e) => {
+      const tab = this._tabOf(e);
+      if (tab && e.button === 1) this._requestClose(tab, "middle");
+    });
+    this.addEventListener("keydown", (e) => this._key(e));
+    // Which tab has the focus, kept while it is removed (no focusout then).
+    this.addEventListener("focusin", (e) => {
+      this._focused = e.target.closest?.("ray-doc-tab") ?? null;
+    });
+    this.addEventListener("focusout", (e) => {
+      if (e.relatedTarget) this._focused = null;
+    });
+    const end = this.$('slot[name="end"]');
+    end.addEventListener("slotchange", () => end.parentElement.toggleAttribute("data-filled", end.assignedNodes().length > 0));
+    this.$(".list slot").addEventListener("slotchange", () => this.requestUpdate());
+    this._scroller = new SideScroller(this, this.$(".list"), { onResize: () => this.requestUpdate() });
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._scroller.connect();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._scroller.disconnect();
+  }
+
+  get tabs() {
+    return [...this.querySelectorAll("ray-doc-tab")].filter((t) => t.closest("ray-doc-tabs") === this);
+  }
+
+  /** The shared panel (`panel` is its id), or null. */
+  get panelElement() {
+    return this.panel ? this.getRootNode().getElementById?.(this.panel) ?? null : null;
+  }
+
+  update() {
+    const tabs = this.tabs;
+    if (!tabs.some((t) => t.value === this.value)) this._replaceSelected(tabs);
+    const list = this.$(".list");
+    if (this.label) list.setAttribute("aria-label", this.label);
+    else list.removeAttribute("aria-label");
+    const panel = this.panelElement;
+    for (const tab of tabs) {
+      const active = tab.value === this.value;
+      tab.id ||= uid("doc-tab");
+      tab.setAttribute("role", "tab");
+      tab.setAttribute("aria-selected", String(active));
+      tab.tabIndex = active ? 0 : -1;
+      tab.toggleAttribute("data-active", active);
+      if (panel) tab.setAttribute("aria-controls", panel.id);
+      else tab.removeAttribute("aria-controls");
+      tab.requestUpdate();
+    }
+    if (panel) {
+      panel.setAttribute("role", "tabpanel");
+      const active = tabs.find((t) => t.value === this.value);
+      if (active) panel.setAttribute("aria-labelledby", active.id);
+      else panel.removeAttribute("aria-labelledby");
+    }
+    this._order = tabs;
+    if (this.value !== this._revealed && this._scroller.reveal(tabs.find((t) => t.value === this.value))) {
+      this._revealed = this.value;
+    }
+    this._scroller.update();
+  }
+
+  // The selected tab is gone (or none was chosen yet): the one at its place
+  // takes over, else the one before it; the first when nothing was selected.
+  _replaceSelected(tabs) {
+    const before = this._order.findIndex((t) => t.value === this.value);
+    const next = before < 0 ? tabs[0] : tabs[Math.min(before, tabs.length - 1)];
+    const closed = before >= 0 ? this._order[before] : null;
+    if (!next) {
+      if (this.value !== undefined && before >= 0) {
+        this.commitProperty("value", undefined);
+        this.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+      return;
+    }
+    if (this.value === undefined || before < 0) {
+      this.commitProperty("value", next.value);
+      return;
+    }
+    this.commitProperty("value", next.value);
+    this.dispatchEvent(new Event("change", { bubbles: true }));
+    if (closed && closed === this._focused) {
+      this._focused = next;
+      queueMicrotask(() => next.focus());
+    }
+  }
+
+  _tabOf(e) {
+    const tab = e.target.closest?.("ray-doc-tab");
+    return tab && tab.closest("ray-doc-tabs") === this ? tab : null;
+  }
+
+  _select(tab, user) {
+    const changed = tab.value !== this.value;
+    this.value = tab.value;
+    if (user && changed) this.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+
+  _requestClose(tab, source) {
+    if (tab.hideClose) return;
+    this.emit("ray-request-close", { value: tab.value, tab, source });
+  }
+
+  _key(e) {
+    const tab = this._tabOf(e);
+    if (!tab || e.target !== tab) return;
+    const tabs = this.tabs;
+    const i = tabs.indexOf(tab);
+    // Right to left, ArrowLeft is the next tab.
+    const key = inlineKey(e.key, this);
+    let target = null;
+    if (key === "ArrowRight") target = tabs[(i + 1) % tabs.length];
+    else if (key === "ArrowLeft") target = tabs[(i - 1 + tabs.length) % tabs.length];
+    else if (e.key === "Home") target = tabs[0];
+    else if (e.key === "End") target = tabs[tabs.length - 1];
+    else if (e.key === "Delete" || e.key === "Backspace") {
+      e.preventDefault();
+      this._requestClose(tab, "key");
+      return;
+    }
+    if (!target) return;
+    e.preventDefault();
+    target.focus();
+    this._select(target, true);
+  }
+}
+
+const tabStyles = css`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ray-space-1);
+    box-sizing: border-box;
+    max-width: 14rem;
+    height: var(--ray-control-height-xs);
+    padding-inline: var(--ray-space-2) var(--ray-space-1);
+    font-size: var(--ray-font-size-sm);
+    color: var(--ray-muted-foreground);
+    white-space: nowrap;
+    border: 1px solid transparent;
+    border-radius: var(--ray-radius-sm);
+    cursor: default;
+    user-select: none;
+    outline: none;
+    transition: color var(--ray-duration-fast) var(--ray-easing-standard), background-color var(--ray-duration-fast) var(--ray-easing-standard);
+  }
+  :host(:hover) { color: var(--ray-foreground); background: var(--ray-muted); }
+  :host([data-active]) { color: var(--ray-foreground); background: var(--ray-card); border-color: var(--ray-border); }
+  :host(:focus-visible) { outline: var(--ray-focus-ring-width) solid var(--ray-ring); outline-offset: -2px; }
+  .section { display: inline-flex; flex: none; align-items: center; }
+  .section:not([data-filled]) { display: none; }
+  ::slotted(svg) { width: 1rem; height: 1rem; }
+  .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+
+  /* The end of the tab: the × (on hover and on the selected tab), or the
+     unsaved dot, which turns into the × under the pointer. */
+  .mark { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; }
+  .close { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--ray-muted-foreground); border-radius: var(--ray-radius-xs); visibility: hidden; }
+  .close svg { width: 0.75rem; height: 0.75rem; }
+  .close:hover { color: var(--ray-foreground); background: var(--ray-accent); }
+  :host(:hover) .close, :host([data-active]) .close { visibility: visible; }
+  .dot { position: absolute; display: none; width: 0.4375rem; height: 0.4375rem; background: var(--ray-primary); border-radius: 50%; }
+  :host([dirty]) .dot { display: block; }
+  :host([dirty]) .close { visibility: hidden; }
+  :host([dirty]) .mark:hover .close { visibility: visible; }
+  :host([dirty]) .mark:hover .dot { display: none; }
+  :host([hide-close]) .close { display: none; }
+  :host([hide-close]:not([dirty])) .mark { display: none; }
+  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+`;
+
+export class RayDocTab extends RayElement {
+  static properties = {
+    value: { type: String, reflect: true },
+    dirty: { type: Boolean, reflect: true },
+    hideClose: { type: Boolean, reflect: true },
+  };
+  static styles = [tabStyles];
+  static template = `<span class="section" part="left-section"><slot name="left"></slot></span><span class="label" part="label"><slot></slot></span><span class="mark" aria-hidden="true"><span class="dot" part="dot"></span><span class="close" part="close" data-ray-icon="ui.close"></span></span><span class="sr"></span>`;
+
+  constructor() {
+    super();
+    const slot = this.$('slot[name="left"]');
+    slot.addEventListener("slotchange", () => slot.parentElement.toggleAttribute("data-filled", slot.assignedNodes().length > 0));
+  }
+
+  update(changed) {
+    const bar = this.closest("ray-doc-tabs");
+    this.$(".close").title = bar?.closeLabel ?? "Close";
+    // The unsaved mark is part of the tab's name for assistive technology.
+    this.$(".sr").textContent = this.dirty ? `, ${bar?.dirtyLabel ?? "Unsaved changes"}` : "";
+    if (this.hideClose) this.removeAttribute("aria-keyshortcuts");
+    else this.setAttribute("aria-keyshortcuts", "Delete");
+    if (changed.has("value")) bar?.requestUpdate();
+  }
+}
+
+define("ray-doc-tabs", RayDocTabs);
+define("ray-doc-tab", RayDocTab);

package/components/icon-button/icon-button.js

@@ -5,6 +5,10 @@ import { css, define } from "../../core/core.js";
 import { RayButton } from "../button/button.js";
 
 const styles = css`
+  /* The square on the host too: the inner button's flex: 1 (a 0 basis) gives
+     it no width of its own to an auto grid track or a shrink-to-fit box. A
+     width set on the element from outside still wins. */
+  :host { width: var(--_h); }
   .button { width: var(--_h); padding: 0; }
   .label { font-size: calc(var(--_fs) * 1.15); }
   ::slotted(svg) { width: 1.15em; height: 1.15em; }

package/components/input/input.js

@@ -4,6 +4,8 @@
 import { css, define } from "../../core/core.js";
 import { sizeStyles, radiusStyles } from "../../core/styles.js";
 import { FieldControl, fieldStyles, boxStyles, fieldTemplate } from "../../core/form.js";
+import { syncHighlight, textLayerStyles } from "../../core/textlayer.js";
+import { syncComplete, completeStyles } from "../../core/complete.js";
 
 const styles = css`
   .control[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
@@ -23,8 +25,11 @@ export class RayInput extends FieldControl {
     placeholder: { type: String },
     readonly: { type: Boolean, reflect: true },
     autofocus: { type: Boolean },
+    highlight: { attribute: false },
+    complete: { attribute: false },
+    suggestionsLabel: { type: String, default: "Suggestions" },
   };
-  static styles = [sizeStyles, radiusStyles, fieldStyles, boxStyles, styles];
+  static styles = [sizeStyles, radiusStyles, fieldStyles, boxStyles, textLayerStyles, completeStyles, styles];
   static template = fieldTemplate(`<input id="control" class="control" part="input">`);
 
   static get observedAttributes() {
@@ -64,6 +69,13 @@ export class RayInput extends FieldControl {
     c.readOnly = Boolean(this.readonly);
     this.syncField();
     this._commit();
+    syncHighlight(this);
+    syncComplete(this);
+  }
+
+  /** Runs `highlight` again (what it marks changed, not the text). */
+  refreshHighlight() {
+    syncHighlight(this);
   }
 
   _commit() {

package/components/menu/menu.js

@@ -3,7 +3,11 @@
 // context menu opened at the pointer over the trigger area.
 //
 // Choosing an item fires `ray-select` ({ value, item }) on the menu and
-// closes it (unless keep-open).
+// closes it (unless keep-open). An item of type="checkbox" toggles its
+// `checked` first; one of type="radio" checks itself and unchecks the radio
+// items of the menu with the same `name`. Before its trigger opens it, the
+// menu fires a cancelable `ray-request-open` ({ event }): the place to fill
+// items that depend on what was clicked, read only after it.
 //
 // With `native` and a native host that offers "popup_menu" (core/host.js; a
 // std/ui window with core/raylang.js), it opens as the system's context menu
@@ -64,6 +68,7 @@ export class RayMenu extends Floating {
     if (this.context) {
       t.addEventListener("contextmenu", (e) => {
         e.preventDefault();
+        if (!this._requestOpen(e)) return;
         if (this._native()) {
           this.popupNative();
           return;
@@ -84,12 +89,12 @@ export class RayMenu extends Floating {
       });
       return;
     }
-    t.addEventListener("click", () => {
+    t.addEventListener("click", (e) => {
       if (this._native()) {
-        this.popupNative();
+        if (this._requestOpen(e)) this.popupNative();
         return;
       }
-      if (!this.open && this.justClosed()) return;
+      if (!this.open && (this.justClosed() || !this._requestOpen(e))) return;
       this._focusOnOpen = "first";
       this.toggle();
     });
@@ -98,11 +103,20 @@ export class RayMenu extends Floating {
         e.preventDefault();
         this._focusOnOpen = e.key === "ArrowDown" ? "first" : "last";
         if (this.open) this._focus(this._focusOnOpen);
-        else this.open = true;
+        else if (this._requestOpen(e)) this.open = true;
       }
     });
   }
 
+  /**
+   * Fires ray-request-open before the trigger opens the menu; false when a
+   * listener cancelled it. It comes before the items are read: an app's own
+   * listener on the trigger may run after the menu's.
+   */
+  _requestOpen(event) {
+    return this.emit("ray-request-open", { event }, { cancelable: true });
+  }
+
   _native() {
     return Boolean(this.native) && hostCan("popup_menu");
   }
@@ -116,7 +130,7 @@ export class RayMenu extends Floating {
     const entries = [...this.querySelectorAll("ray-menu-item, ray-menu-divider")].filter((el) => el.closest("ray-menu") === this);
     const items = entries.map((el) => (el.localName === "ray-menu-divider"
       ? { separator: true }
-      : { title: itemLabel(el), enabled: !el.disabled }));
+      : { title: itemLabel(el), enabled: !el.disabled, ...(el.checkable ? { checked: Boolean(el.checked) } : {}) }));
     const index = await getHost().popupMenu(items);
     const item = index === null || index === undefined ? null : entries[index];
     if (!item || item.localName !== "ray-menu-item") return null;
@@ -193,6 +207,13 @@ export class RayMenu extends Floating {
 
   _choose(item) {
     if (item.disabled) return;
+    if (item.type === "checkbox") item.checked = !item.checked;
+    else if (item.type === "radio") {
+      for (const other of this.items) {
+        if (other !== item && other.type === "radio" && (other.name ?? "") === (item.name ?? "")) other.checked = false;
+      }
+      item.checked = true;
+    }
     this.emit("ray-select", { value: item.value ?? item.textContent.trim(), item });
     if (!this.keepOpen) this.open = false;
   }
@@ -227,6 +248,10 @@ const itemStyles = css`
   :host([color]:hover), :host([color]:focus) { background: var(--_light); color: var(--_light-color); }
   :host([disabled]) { color: var(--ray-muted-foreground); background: transparent; cursor: not-allowed; opacity: 0.6; }
   .label { flex: 1; white-space: nowrap; }
+  /* A checkbox or radio item keeps a column for its mark, checked or not. */
+  .mark { display: none; flex: none; width: 1rem; height: 1rem; visibility: hidden; }
+  :host([type="checkbox"]) .mark, :host([type="radio"]) .mark { display: inline-flex; }
+  :host([checked]) .mark { visibility: visible; }
   .section { display: inline-flex; align-items: center; color: var(--ray-muted-foreground); }
   :host([color]) .section { color: inherit; }
   .section:not([data-filled]) { display: none; }
@@ -239,9 +264,12 @@ export class RayMenuItem extends RayElement {
     value: { type: String, reflect: true },
     disabled: { type: Boolean, reflect: true },
     color: { type: String, reflect: true },
+    type: { type: String, reflect: true, default: "item" },
+    checked: { type: Boolean, reflect: true },
+    name: { type: String, reflect: true },
   };
   static styles = [itemStyles];
-  static template = `<span class="section left" part="left-section"><slot name="left"></slot></span><span class="label" part="label"><slot></slot></span><span class="section right" part="right-section"><slot name="right"></slot></span>`;
+  static template = `<span class="mark" part="mark" aria-hidden="true" data-ray-icon="ui.checked"></span><span class="section left" part="left-section"><slot name="left"></slot></span><span class="label" part="label"><slot></slot></span><span class="section right" part="right-section"><slot name="right"></slot></span>`;
 
   constructor() {
     super();
@@ -252,8 +280,15 @@ export class RayMenuItem extends RayElement {
     }
   }
 
+  /** Whether it is a checkbox or radio item. */
+  get checkable() {
+    return this.type === "checkbox" || this.type === "radio";
+  }
+
   update() {
     this.tabIndex = -1;
+    this.internals.role = this.type === "checkbox" ? "menuitemcheckbox" : this.type === "radio" ? "menuitemradio" : "menuitem";
+    this.internals.ariaChecked = this.checkable ? String(Boolean(this.checked)) : null;
     this.internals.ariaDisabled = this.disabled ? "true" : "false";
     if (this.color) applyColor(this, this.color);
   }