@raylang/elements 0.0.0-stage → 0.4.0

package/components/group/group.js

@@ -0,0 +1,40 @@
+// <ray-group>: its children in a row (Mantine's Group): spaced by the space
+// scale, centered on the cross axis, wrapping when they do not fit. `grow`
+// shares the width among them; `nowrap` keeps them on one line.
+
+import { RayElement, css, define } from "../../core/core.js";
+import { applyFlex } from "../stack/stack.js";
+
+const styles = css`
+  :host {
+    --_gap: var(--ray-space-md);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--_gap);
+    align-items: var(--_align, center);
+    justify-content: var(--_justify, flex-start);
+    min-width: 0;
+  }
+  :host([hidden]) { display: none; }
+  :host([nowrap]) { flex-wrap: nowrap; }
+  :host([grow]) ::slotted(*) { flex: 1 1 0; min-width: 0; }
+`;
+
+export class RayGroup extends RayElement {
+  static properties = {
+    gap: { type: String, reflect: true, default: "md" },
+    align: { type: String, reflect: true, default: "center" },
+    justify: { type: String, reflect: true, default: "start" },
+    nowrap: { type: Boolean, reflect: true },
+    grow: { type: Boolean, reflect: true },
+  };
+  static styles = [styles];
+  static template = `<slot></slot>`;
+
+  update() {
+    applyFlex(this, this, "center");
+  }
+}
+
+define("ray-group", RayGroup);

package/components/icon/icon.js

@@ -0,0 +1,58 @@
+// <ray-icon name="…">: an icon of the registry (setIcons), so the app's own
+// markup uses the same set as the components. Decorative unless `label`.
+
+import { RayElement, css, define } from "../../core/core.js";
+
+const SIZES = { xs: "0.75rem", sm: "0.875rem", md: "1rem", lg: "1.25rem", xl: "1.5rem" };
+
+const styles = css`
+  /* --_size is set here, not only read: private custom properties inherit
+     through shadow roots, and an ancestor's own --_size (ray-split's pane
+     size) must not reach the icon. size= overrides it inline. */
+  :host { --_size: 1em; display: inline-flex; vertical-align: -0.125em; line-height: 1; }
+  .icon svg { width: var(--_size); height: var(--_size); }
+`;
+
+export class RayIcon extends RayElement {
+  static properties = {
+    name: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    label: { type: String },
+    color: { type: String, reflect: true },
+    stroke: { type: Number },
+  };
+  static styles = [styles];
+  static template = `<span class="icon" part="icon" data-ray-icon=""></span>`;
+
+  constructor() {
+    super();
+    this.internals = this.attachInternals();
+  }
+
+  update() {
+    const icon = this.$(".icon");
+    if (icon.getAttribute("data-ray-icon") !== (this.name ?? "")) {
+      icon.setAttribute("data-ray-icon", this.name ?? "");
+      this.paintIcons();
+    }
+    // xs…xl from the scale, or any CSS length.
+    const size = this.size ? (SIZES[this.size] ?? this.size) : "";
+    if (size) this.style.setProperty("--_size", size);
+    else this.style.removeProperty("--_size");
+    // A palette color (red), the primary, or any CSS color.
+    if (this.color) {
+      const value = /^[a-z]+$/.test(this.color) && this.color !== "currentcolor" ? `var(--ray-${this.color}-light-color, ${this.color})` : this.color;
+      this.style.color = value;
+    } else {
+      this.style.removeProperty("color");
+    }
+    if (this.stroke) this.style.setProperty("--ray-icon-stroke", String(this.stroke));
+    else this.style.removeProperty("--ray-icon-stroke");
+    // Named: an image; otherwise hidden from assistive technology.
+    this.internals.role = this.label ? "img" : null;
+    this.internals.ariaLabel = this.label || null;
+    this.internals.ariaHidden = this.label ? null : "true";
+  }
+}
+
+define("ray-icon", RayIcon);

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

@@ -0,0 +1,30 @@
+// <ray-icon-button>: a square button for an icon (Mantine's ActionIcon).
+// The icon goes in the default slot; `label` is its accessible name.
+
+import { css, define } from "../../core/core.js";
+import { RayButton } from "../button/button.js";
+
+const styles = css`
+  .button { width: var(--_h); padding: 0; }
+  .label { font-size: calc(var(--_fs) * 1.15); }
+  ::slotted(svg) { width: 1.15em; height: 1.15em; }
+`;
+
+export class RayIconButton extends RayButton {
+  static properties = {
+    ...RayButton.properties,
+    variant: { type: String, reflect: true, default: "subtle" },
+    label: { type: String, reflect: true },
+  };
+  static styles = [...RayButton.styles, styles];
+
+  update() {
+    super.update();
+    if (this.label) {
+      this._el.setAttribute("aria-label", this.label);
+      this._el.title = this.label;
+    }
+  }
+}
+
+define("ray-icon-button", RayIconButton);

package/components/indicator/indicator.js

@@ -0,0 +1,112 @@
+// <ray-indicator>: a dot or a small label on the edge of any element
+// (Mantine's Indicator): "New" on an avatar, an unread count on a bell, an
+// online dot on a profile picture.
+//
+//   <ray-indicator label="New" offset="7"><ray-avatar …></ray-avatar></ray-indicator>
+//
+// It wraps its content as tight as it is (width: fit-content; inline for
+// inline content) and places the indicator on one of nine points of its
+// box, `offset` pixels inward. A numeric label over `max` shows "max+".
+
+import { RayElement, css, define } from "../../core/core.js";
+import { applyColor } from "../../core/styles.js";
+
+const POSITIONS = ["top-start", "top-center", "top-end", "middle-start", "middle-center", "middle-end", "bottom-start", "bottom-center", "bottom-end"];
+const RADII = ["xs", "sm", "md", "lg", "xl"];
+
+const styles = css`
+  :host { position: relative; display: block; width: fit-content; --_size: 10px; --_offset: 0px; }
+  :host([inline]) { display: inline-block; vertical-align: middle; }
+  .indicator {
+    position: absolute;
+    z-index: 1;
+    top: var(--_top);
+    left: var(--_left);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: var(--_size);
+    height: var(--_size);
+    color: var(--_contrast);
+    background: var(--_filled);
+    border-radius: var(--_radius, 999px);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+  .indicator[data-label] {
+    height: auto;
+    min-height: var(--_size);
+    padding: 0.1875rem 0.4375rem;
+    font-size: var(--ray-font-size-xs);
+    font-weight: var(--ray-font-weight-semibold);
+    line-height: 1;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+  :host([with-border]) .indicator { box-shadow: 0 0 0 2px var(--ray-background); }
+  :host([disabled]) .indicator { display: none; }
+  /* processing: a ring that grows and fades, like a live signal. */
+  :host([processing]) .indicator::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: var(--_filled);
+    animation: ray-indicator-pulse 1.4s var(--ray-easing-out) infinite;
+    z-index: -1;
+  }
+  @keyframes ray-indicator-pulse {
+    from { opacity: 0.6; transform: scale(1); }
+    to { opacity: 0; transform: scale(2.6); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :host([processing]) .indicator::before { animation-duration: 2.8s; }
+  }
+`;
+
+export class RayIndicator extends RayElement {
+  static properties = {
+    label: { type: String },
+    position: { type: String, reflect: true, default: "top-end" },
+    offset: { type: String },
+    color: { type: String, reflect: true },
+    size: { type: String },
+    radius: { type: String, reflect: true },
+    max: { type: Number },
+    inline: { type: Boolean, reflect: true },
+    withBorder: { type: Boolean, reflect: true },
+    processing: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+  };
+  static styles = [styles];
+  static template = `<slot></slot><span class="indicator" part="indicator"></span>`;
+
+  update() {
+    const dot = this.$(".indicator");
+    applyColor(dot, this.color);
+    // The label: text, or a count capped at max ("99+").
+    let text = this.label ?? "";
+    const n = Number(text);
+    if (text !== "" && Number.isFinite(n) && this.max !== undefined && this.max !== null && n > this.max) text = `${this.max}+`;
+    dot.textContent = text;
+    dot.toggleAttribute("data-label", text !== "");
+    // Where: one of nine points of the box, `offset` inward.
+    const [v, h] = (POSITIONS.includes(this.position) ? this.position : "top-end").split("-");
+    const off = "var(--_offset)";
+    this.style.setProperty("--_top", v === "top" ? off : v === "middle" ? "50%" : `calc(100% - ${off})`);
+    this.style.setProperty("--_left", h === "start" ? off : h === "center" ? "50%" : `calc(100% - ${off})`);
+    const length = (x) => (x === undefined || x === null || x === "" ? null : /^-?\d+(\.\d+)?$/.test(String(x)) ? `${x}px` : String(x));
+    const offset = length(this.offset);
+    if (offset) this.style.setProperty("--_offset", offset);
+    else this.style.removeProperty("--_offset");
+    const size = length(this.size);
+    if (size) this.style.setProperty("--_size", size);
+    else this.style.removeProperty("--_size");
+    const r = this.radius;
+    if (r) dot.style.setProperty("--_radius", RADII.includes(r) ? `var(--ray-radius-${r})` : r === "none" ? "0" : r);
+    else dot.style.removeProperty("--_radius");
+  }
+}
+
+define("ray-indicator", RayIndicator);

package/components/input/input.js

@@ -0,0 +1,85 @@
+// <ray-input>: a text field with label, description and error (Mantine's
+// TextInput). Takes part in <form> under `name`.
+
+import { css, define } from "../../core/core.js";
+import { sizeStyles, radiusStyles } from "../../core/styles.js";
+import { FieldControl, fieldStyles, boxStyles, fieldTemplate } from "../../core/form.js";
+
+const styles = css`
+  .control[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
+  .control[type="number"] { font-variant-numeric: tabular-nums; }
+`;
+
+// Attributes copied as-is to the inner <input>.
+const PASSTHROUGH = ["placeholder", "autocomplete", "inputmode", "pattern", "min", "max", "step", "minlength", "maxlength", "spellcheck", "autocapitalize", "enterkeyhint", "list"];
+
+export class RayInput extends FieldControl {
+  static properties = {
+    ...FieldControl.fieldProperties,
+    type: { type: String, reflect: true, default: "text" },
+    value: { type: String },
+    placeholder: { type: String },
+    readonly: { type: Boolean, reflect: true },
+    autofocus: { type: Boolean },
+  };
+  static styles = [sizeStyles, radiusStyles, fieldStyles, boxStyles, styles];
+  static template = fieldTemplate(`<input id="control" class="control" part="input">`);
+
+  static get observedAttributes() {
+    return [...super.observedAttributes, ...PASSTHROUGH];
+  }
+
+  attributeChangedCallback(attr, old, value) {
+    if (PASSTHROUGH.includes(attr)) {
+      if (value === null) this.control?.removeAttribute(attr);
+      else this.control?.setAttribute(attr, value);
+      this.requestUpdate();
+      return;
+    }
+    super.attributeChangedCallback(attr, old, value);
+  }
+
+  wire() {
+    for (const attr of PASSTHROUGH) {
+      const v = this.getAttribute(attr);
+      if (v !== null) this.control.setAttribute(attr, v);
+    }
+    this._default = this.getAttribute("value") ?? "";
+    this.control.addEventListener("input", () => {
+      this.commitProperty("value", this.control.value);
+      this._commit();
+    });
+    this.control.addEventListener("change", (e) => this.forward(e));
+    if (this.autofocus) queueMicrotask(() => this.control.focus());
+  }
+
+  update() {
+    const c = this.control;
+    if (c.type !== (this.type || "text")) c.type = this.type || "text";
+    const v = this.value ?? "";
+    if (c.value !== v) c.value = v;
+    c.readOnly = Boolean(this.readonly);
+    this.syncField();
+    this._commit();
+  }
+
+  _commit() {
+    this.internals.setFormValue(this.value ?? "");
+    this.syncValidity();
+  }
+
+  formResetCallback() {
+    this.value = this._default;
+  }
+
+  formStateRestoreCallback(state) {
+    this.value = String(state ?? "");
+  }
+
+  /** Selects the text, like HTMLInputElement.select(). */
+  select() {
+    this.control.select();
+  }
+}
+
+define("ray-input", RayInput);

package/components/kbd/kbd.js

@@ -0,0 +1,60 @@
+// <ray-kbd>: a keyboard key. variant="default" is a raised keycap (thicker
+// bottom edge); "filled" a flat muted chip and "outline" a flat chip with a
+// border (shadcn's Kbd) — both lighter, for hints inside menus and buttons.
+
+import { RayElement, css, define } from "../../core/core.js";
+
+const styles = css`
+  :host {
+    display: inline-block;
+    vertical-align: baseline;
+    --_fs: var(--ray-font-size-xs);
+  }
+  :host([size="xs"]) { --_fs: 0.625rem; }
+  :host([size="md"]) { --_fs: var(--ray-font-size-sm); }
+  :host([size="lg"]) { --_fs: var(--ray-font-size-md); }
+  :host([size="xl"]) { --_fs: var(--ray-font-size-lg); }
+  kbd {
+    display: inline-block;
+    min-width: 1.6em;
+    padding: 0.125em 0.4em;
+    font-family: var(--ray-font-mono);
+    font-size: var(--_fs);
+    font-weight: var(--ray-font-weight-bold);
+    line-height: var(--ray-line-height-md);
+    text-align: center;
+    color: var(--ray-foreground);
+    /* A keycap lit from above: the face, a slightly darker rim and a much
+       darker bottom edge (its shadow) — in both schemes. In dark the face
+       is the raised surface, lighter than the page, and the edge sits
+       between the two: darker than the key, still visible on the page. */
+    --_face: light-dark(var(--ray-muted), var(--ray-raised));
+    background: var(--_face);
+    border: 1px solid light-dark(color-mix(in srgb, var(--_face), black 12%), color-mix(in srgb, var(--_face) 82%, var(--ray-background)));
+    border-bottom: 3px solid light-dark(color-mix(in srgb, var(--_face), black 24%), color-mix(in srgb, var(--_face) 62%, var(--ray-background)));
+    border-radius: var(--ray-radius-sm);
+    box-shadow: inset 0 1px 0 light-dark(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.08));
+  }
+  /* Flat variants: the same box height, quieter text. */
+  :host([variant="filled"]) kbd, :host([variant="outline"]) kbd {
+    padding: 0.125em 0.45em;
+    font-family: var(--ray-font-sans);
+    font-weight: var(--ray-font-weight-medium);
+    color: var(--ray-muted-foreground);
+    border-bottom-width: 1px;
+    box-shadow: none;
+  }
+  :host([variant="filled"]) kbd { background: var(--ray-muted); border-color: transparent; }
+  :host([variant="outline"]) kbd { background: transparent; border-color: var(--ray-border); }
+`;
+
+export class RayKbd extends RayElement {
+  static properties = {
+    size: { type: String, reflect: true, default: "sm" },
+    variant: { type: String, reflect: true, default: "default" },
+  };
+  static styles = [styles];
+  static template = `<kbd part="kbd"><slot></slot></kbd>`;
+}
+
+define("ray-kbd", RayKbd);

package/components/menu/menu.js

@@ -0,0 +1,296 @@
+// <ray-menu> + <ray-menu-item>, <ray-menu-label>, <ray-menu-divider>:
+// a dropdown menu (WAI-ARIA menu button pattern) or, with `context`, a
+// 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).
+//
+// 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
+// at the pointer instead: its items and dividers (not labels nor nested
+// menus), with the same ray-select.
+
+import { RayElement, css, define } from "../../core/core.js";
+import { Floating, floatingStyles } from "../../core/floating.js";
+import { applyColor } from "../../core/styles.js";
+import { pointRect } from "../../core/position.js";
+import { getHost, hostCan } from "../../core/host.js";
+
+const menuStyles = css`
+  .panel { min-width: 12rem; padding: var(--ray-space-1); }
+  :host([context]) { display: contents; }
+`;
+
+export class RayMenu extends Floating {
+  static properties = {
+    ...Floating.properties,
+    placement: { type: String, reflect: true, default: "bottom-start" },
+    offset: { type: Number, default: 4 },
+    context: { type: Boolean, reflect: true },
+    keepOpen: { type: Boolean, reflect: true },
+    native: { type: Boolean, reflect: true },
+  };
+  static styles = [floatingStyles, menuStyles];
+  static haspopup = "menu";
+  static template = `<slot name="trigger"></slot><div class="panel" part="dropdown" role="menu" tabindex="-1"><slot></slot></div>`;
+
+  constructor() {
+    super();
+    this._typed = "";
+    this.addEventListener("click", (e) => {
+      const item = e.target.closest?.("ray-menu-item");
+      if (item && this.items.includes(item)) this._choose(item);
+    });
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this._keys) {
+      this._keys = true;
+      this.panel.addEventListener("keydown", (e) => this._menuKey(e));
+    }
+  }
+
+  popupKind() {
+    return this.context ? null : "menu";
+  }
+
+  /** The enabled and disabled items of this menu (not of nested menus). */
+  get items() {
+    return [...this.querySelectorAll("ray-menu-item")].filter((i) => i.closest("ray-menu") === this);
+  }
+
+  wireTrigger(t) {
+    if (this.context) {
+      t.addEventListener("contextmenu", (e) => {
+        e.preventDefault();
+        if (this._native()) {
+          this.popupNative();
+          return;
+        }
+        this._point = pointRect(e.clientX, e.clientY);
+        this._focusOnOpen = "first";
+        const openNow = () => {
+          if (this.open) this.reposition();
+          else this.open = true;
+        };
+        // macOS/Linux fire contextmenu on press: the release that follows,
+        // outside the just-opened panel, would light-dismiss it. Open after it.
+        if (e.buttons & 2) {
+          window.addEventListener("pointerup", () => setTimeout(openNow, 0), { once: true, capture: true });
+        } else {
+          openNow();
+        }
+      });
+      return;
+    }
+    t.addEventListener("click", () => {
+      if (this._native()) {
+        this.popupNative();
+        return;
+      }
+      if (!this.open && this.justClosed()) return;
+      this._focusOnOpen = "first";
+      this.toggle();
+    });
+    t.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        this._focusOnOpen = e.key === "ArrowDown" ? "first" : "last";
+        if (this.open) this._focus(this._focusOnOpen);
+        else this.open = true;
+      }
+    });
+  }
+
+  _native() {
+    return Boolean(this.native) && hostCan("popup_menu");
+  }
+
+  /**
+   * Opens the items as the system's context menu at the pointer (needs a
+   * native host); resolves to the chosen item, or null when dismissed.
+   */
+  async popupNative() {
+    if (!hostCan("popup_menu")) return null;
+    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 }));
+    const index = await getHost().popupMenu(items);
+    const item = index === null || index === undefined ? null : entries[index];
+    if (!item || item.localName !== "ray-menu-item") return null;
+    this._choose(item);
+    return item;
+  }
+
+  anchorRect() {
+    return this.context && this._point ? this._point : super.anchorRect();
+  }
+
+  toggled(open) {
+    if (open) {
+      this._focus(this._focusOnOpen ?? "first");
+    } else {
+      this._point = null;
+      // Focus back to the trigger when it was inside the menu.
+      if (this.focusWasInside && !this.context) this.trigger?.focus();
+    }
+  }
+
+  _enabled() {
+    return this.items.filter((i) => !i.disabled);
+  }
+
+  _focus(which) {
+    const items = this._enabled();
+    if (!items.length) {
+      this.panel.focus();
+      return;
+    }
+    const current = items.indexOf(document.activeElement);
+    let i;
+    if (which === "first") i = 0;
+    else if (which === "last") i = items.length - 1;
+    else if (which === "next") i = current < 0 ? 0 : (current + 1) % items.length;
+    else i = current < 0 ? items.length - 1 : (current - 1 + items.length) % items.length;
+    items[i].focus();
+  }
+
+  _menuKey(e) {
+    switch (e.key) {
+      case "ArrowDown": e.preventDefault(); this._focus("next"); return;
+      case "ArrowUp": e.preventDefault(); this._focus("prev"); return;
+      case "Home": e.preventDefault(); this._focus("first"); return;
+      case "End": e.preventDefault(); this._focus("last"); return;
+      case "Tab": this.open = false; return;
+      case "Enter":
+      case " ": {
+        const item = e.target.closest?.("ray-menu-item");
+        if (item) {
+          e.preventDefault();
+          this._choose(item);
+        }
+        return;
+      }
+      default:
+        this._typeahead(e);
+    }
+  }
+
+  // Typing letters jumps to the next item starting with them.
+  _typeahead(e) {
+    if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return;
+    clearTimeout(this._typedTimer);
+    this._typed += e.key.toLowerCase();
+    this._typedTimer = setTimeout(() => { this._typed = ""; }, 500);
+    const items = this._enabled();
+    const start = Math.max(0, items.indexOf(document.activeElement));
+    const order = [...items.slice(start + (this._typed.length === 1 ? 1 : 0)), ...items.slice(0, start + 1)];
+    const hit = order.find((i) => i.textContent.trim().toLowerCase().startsWith(this._typed));
+    hit?.focus();
+  }
+
+  _choose(item) {
+    if (item.disabled) return;
+    this.emit("ray-select", { value: item.value ?? item.textContent.trim(), item });
+    if (!this.keepOpen) this.open = false;
+  }
+}
+
+// The text of an item without its left and right sections (icon, shortcut).
+function itemLabel(item) {
+  return [...item.childNodes]
+    .filter((n) => n.nodeType === Node.TEXT_NODE || (n.nodeType === Node.ELEMENT_NODE && !n.slot))
+    .map((n) => n.textContent)
+    .join("")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+const itemStyles = css`
+  :host {
+    display: flex;
+    align-items: center;
+    gap: var(--ray-space-2);
+    min-height: var(--ray-control-height-xs);
+    padding: 0 var(--ray-space-2);
+    font-size: var(--ray-font-size-sm);
+    color: var(--ray-popover-foreground);
+    border-radius: var(--ray-radius-sm);
+    cursor: default;
+    user-select: none;
+    outline: none;
+  }
+  :host(:hover), :host(:focus-visible), :host(:focus) { background: var(--ray-accent); color: var(--ray-accent-foreground); }
+  :host([color]) { color: var(--_light-color); }
+  :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; }
+  .section { display: inline-flex; align-items: center; color: var(--ray-muted-foreground); }
+  :host([color]) .section { color: inherit; }
+  .section:not([data-filled]) { display: none; }
+  .right { margin-left: var(--ray-space-6); font-size: var(--ray-font-size-xs); }
+  ::slotted(svg) { width: 1rem; height: 1rem; }
+`;
+
+export class RayMenuItem extends RayElement {
+  static properties = {
+    value: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    color: { 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>`;
+
+  constructor() {
+    super();
+    this.internals = this.attachInternals();
+    this.internals.role = "menuitem";
+    for (const slot of this.shadowRoot.querySelectorAll("slot[name]")) {
+      slot.addEventListener("slotchange", () => slot.parentElement.toggleAttribute("data-filled", slot.assignedNodes().length > 0));
+    }
+  }
+
+  update() {
+    this.tabIndex = -1;
+    this.internals.ariaDisabled = this.disabled ? "true" : "false";
+    if (this.color) applyColor(this, this.color);
+  }
+}
+
+const labelStyles = css`
+  :host {
+    display: block;
+    padding: var(--ray-space-2) var(--ray-space-2) var(--ray-space-1);
+    font-size: var(--ray-font-size-xs);
+    font-weight: var(--ray-font-weight-medium);
+    color: var(--ray-muted-foreground);
+  }
+`;
+
+export class RayMenuLabel extends RayElement {
+  static styles = [labelStyles];
+  static template = `<slot></slot>`;
+  constructor() {
+    super();
+    this.attachInternals().role = "presentation";
+  }
+}
+
+const dividerStyles = css`
+  :host { display: block; height: 1px; margin: var(--ray-space-1) calc(var(--ray-space-1) * -1); background: var(--ray-border); }
+`;
+
+export class RayMenuDivider extends RayElement {
+  static styles = [dividerStyles];
+  constructor() {
+    super();
+    this.attachInternals().role = "separator";
+  }
+}
+
+define("ray-menu", RayMenu);
+define("ray-menu-item", RayMenuItem);
+define("ray-menu-label", RayMenuLabel);
+define("ray-menu-divider", RayMenuDivider);