@raylang/elements 0.0.0-stage → 0.4.0

package/components/sidebar/sidebar.js

@@ -0,0 +1,252 @@
+// <ray-sidebar>: the side navigation of an app shell (shadcn's Sidebar).
+// Header, content and footer slots; on wide screens a panel that can
+// collapse to an icon rail (`collapsed`); below `breakpoint` an off-canvas
+// drawer (`open`): a modal <dialog> sliding in from its side, with focus
+// trapped, Escape and backdrop click closing it.
+//
+// toggle() does the right thing for the screen: collapse/expand on wide
+// screens, open/close the drawer on narrow ones — wire it to a menu button.
+//
+// <ray-sidebar-group label="Projects">: a titled section of nav links; the
+// title hides when the sidebar collapses.
+
+import { RayElement, css, define } from "../../core/core.js";
+import { overlayStyles } from "../../core/styles.js";
+import { play, playAll } from "../../core/motion.js";
+
+const styles = css`
+  :host {
+    --_w: 16rem;
+    --_rail: 3.5rem;
+    display: block;
+    flex: none;
+    width: var(--_w);
+    height: 100%;
+    min-height: 0;
+    transition: width var(--ray-duration-base) var(--ray-easing-standard);
+  }
+  :host([collapsed]:not([data-mobile])) { width: var(--_rail); }
+  :host([data-mobile]) { width: 0; }
+  .panel {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    color: var(--ray-foreground);
+    background: var(--ray-sidebar, color-mix(in srgb, var(--ray-muted) 70%, var(--ray-background)));
+    border-inline-end: 1px solid var(--ray-border);
+  }
+  :host([side="right"]) .panel { border-inline-end: 0; border-inline-start: 1px solid var(--ray-border); }
+  :host([variant="floating"]:not([data-mobile])) { padding: var(--ray-space-2); box-sizing: border-box; }
+  :host([variant="floating"]) .panel { border: 1px solid var(--ray-border); border-radius: var(--ray-radius-lg); box-shadow: var(--ray-shadow-sm); }
+  .header, .footer { flex: none; padding: var(--ray-space-2); }
+  .header:not([data-filled]), .footer:not([data-filled]) { display: none; }
+  .content { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: var(--ray-space-2); }
+
+  /* Narrow screens: the panel lives in a modal dialog at the edge. */
+  dialog {
+    --_from: -100%;
+    position: fixed;
+    inset: 0 auto 0 0;
+    box-sizing: border-box;
+    width: min(var(--_w), calc(100vw - 3rem));
+    max-width: none;
+    height: 100dvh;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    overflow: visible;
+  }
+  :host([side="right"]) dialog { inset: 0 0 0 auto; }
+  dialog[open] { display: block; animation: ray-sidebar-in var(--ray-duration-slow) var(--ray-easing-out); }
+  dialog .panel { box-shadow: var(--ray-shadow-xl); background: var(--ray-card); }
+  @keyframes ray-sidebar-in { from { transform: translateX(var(--_from)); } }
+  :host([side="right"]) dialog { --_from: 100%; }
+  dialog::backdrop { animation: ray-fade-in var(--ray-duration-base) var(--ray-easing-out); }
+  @keyframes ray-fade-in { from { opacity: 0; } }
+`;
+
+export class RaySidebar extends RayElement {
+  static properties = {
+    collapsed: { type: Boolean, reflect: true },
+    open: { type: Boolean, reflect: true },
+    side: { type: String, reflect: true, default: "left" },
+    variant: { type: String, reflect: true, default: "sidebar" },
+    width: { type: String },
+    collapsedWidth: { type: String },
+    breakpoint: { type: String, default: "48em" },
+    label: { type: String, default: "Sidebar" },
+  };
+  static styles = [overlayStyles, styles];
+  static template = `
+    <div class="panel" part="panel">
+      <div class="header" part="header"><slot name="header"></slot></div>
+      <nav class="content" part="content"><slot></slot></nav>
+      <div class="footer" part="footer"><slot name="footer"></slot></div>
+    </div>
+    <dialog part="drawer"></dialog>`;
+
+  #mq = null;
+  #exit = null;
+
+  constructor() {
+    super();
+    this.panel = this.$(".panel");
+    this.dialog = this.$("dialog");
+    for (const name of ["header", "footer"]) {
+      const slot = this.$(`slot[name="${name}"]`);
+      slot.addEventListener("slotchange", () => slot.parentElement.toggleAttribute("data-filled", slot.assignedNodes().length > 0));
+    }
+    this.dialog.addEventListener("cancel", (e) => {
+      e.preventDefault();
+      this.open = false;
+    });
+    this.dialog.addEventListener("close", () => {
+      if (this.open) this.commitProperty("open", false);
+    });
+    // A click on the backdrop (outside the panel) closes the drawer.
+    this.dialog.addEventListener("click", (e) => {
+      if (e.target === this.dialog) this.open = false;
+    });
+    // Following a link closes the drawer.
+    this.addEventListener("click", (e) => {
+      if (!this.mobile || !this.open) return;
+      const link = e.composedPath().find((n) => n.localName === "a" && n.href);
+      if (link) this.open = false;
+    });
+    // New nav links and groups pick up the collapsed state.
+    this.$(".content slot").addEventListener("slotchange", () => this._syncCollapsed());
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._watch();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#mq?.removeEventListener("change", this._onMedia);
+    this.#mq = null;
+    if (this.dialog.open) this.dialog.close();
+  }
+
+  /** Whether the sidebar is in its narrow-screen (drawer) mode. */
+  get mobile() {
+    return this.hasAttribute("data-mobile");
+  }
+
+  /** Collapses/expands on wide screens; opens/closes the drawer on narrow ones. */
+  toggle() {
+    if (this.mobile) this.open = !this.open;
+    else this.collapsed = !this.collapsed;
+    this.emit("ray-toggle", { collapsed: Boolean(this.collapsed), open: Boolean(this.open), mobile: this.mobile });
+  }
+
+  _watch() {
+    this.#mq?.removeEventListener("change", this._onMedia);
+    this.#mq = matchMedia(`(max-width: ${this.breakpoint || "48em"})`);
+    this._onMedia = () => this._setMobile(this.#mq.matches);
+    this.#mq.addEventListener("change", this._onMedia);
+    this._setMobile(this.#mq.matches);
+  }
+
+  _setMobile(on) {
+    this.toggleAttribute("data-mobile", on);
+    if (on) {
+      if (this.panel.parentNode !== this.dialog) this.dialog.append(this.panel);
+      if (this.open && !this.dialog.open) this._show();
+    } else {
+      if (this.dialog.open) this.dialog.close();
+      if (this.panel.parentNode !== this.shadowRoot) this.shadowRoot.prepend(this.panel);
+      if (this.open) this.commitProperty("open", false);
+    }
+    this._syncCollapsed();
+  }
+
+  update(changed) {
+    if (this.width) this.style.setProperty("--_w", this.width);
+    else this.style.removeProperty("--_w");
+    if (this.collapsedWidth) this.style.setProperty("--_rail", this.collapsedWidth);
+    else this.style.removeProperty("--_rail");
+    this.$(".content").setAttribute("aria-label", this.label ?? "Sidebar");
+    if (changed.has("breakpoint") && this.isConnected) this._watch();
+    if (changed.has("collapsed")) this._syncCollapsed();
+    if (changed.has("open") && this.mobile) {
+      if (this.open && this.#exit) {
+        this.#exit.cancel();
+        this.#exit = null;
+      } else if (this.open && !this.dialog.open) {
+        this._show();
+      } else if (!this.open && this.dialog.open && !this.#exit) {
+        this._leave();
+      }
+    }
+  }
+
+  _show() {
+    this.dialog.showModal();
+    this.emit("ray-open");
+  }
+
+  async _leave() {
+    const to = this.side === "right" ? "translateX(100%)" : "translateX(-100%)";
+    const exit = playAll([
+      play(this.dialog, [{ transform: "none" }, { transform: to }]),
+      play(this.dialog, [{ opacity: 1 }, { opacity: 0 }], { pseudoElement: "::backdrop" }),
+    ]);
+    this.#exit = exit;
+    await exit.finished;
+    if (this.#exit !== exit) return;
+    this.#exit = null;
+    if (!this.open && this.dialog.open) this.dialog.close();
+    exit.cancel();
+    this.emit("ray-close");
+  }
+
+  // The rail shows icons only: nav links and group titles follow.
+  _syncCollapsed() {
+    const rail = Boolean(this.collapsed) && !this.mobile;
+    for (const el of this.querySelectorAll("ray-nav-link")) el.iconOnly = rail;
+    for (const el of this.querySelectorAll("ray-sidebar-group")) el.toggleAttribute("collapsed", rail);
+  }
+}
+
+const groupStyles = css`
+  :host { display: block; }
+  :host(:not(:first-child)) { margin-top: var(--ray-space-3); }
+  .label {
+    display: block;
+    height: 1.75rem;
+    padding: 0 var(--ray-space-3);
+    font-size: var(--ray-font-size-xs);
+    font-weight: var(--ray-font-weight-medium);
+    line-height: 1.75rem;
+    color: var(--ray-muted-foreground);
+    white-space: nowrap;
+    overflow: hidden;
+    transition: opacity var(--ray-duration-fast) var(--ray-easing-standard);
+  }
+  .label:empty { display: none; }
+  /* Collapsed: the title fades but keeps its height, so icons do not jump. */
+  :host([collapsed]) .label { opacity: 0; }
+  .items { display: grid; gap: 2px; }
+`;
+
+export class RaySidebarGroup extends RayElement {
+  static properties = {
+    label: { type: String },
+  };
+  static styles = [groupStyles];
+  static template = `<div class="label" part="label" id="label"></div><div class="items" part="items" role="group" aria-labelledby="label"><slot></slot></div>`;
+
+  update() {
+    this.$(".label").textContent = this.label ?? "";
+  }
+}
+
+define("ray-sidebar", RaySidebar);
+define("ray-sidebar-group", RaySidebarGroup);

package/components/skeleton/skeleton.js

@@ -0,0 +1,90 @@
+// <ray-skeleton>: a placeholder shown while content loads (Mantine's
+// Skeleton). A shimmering block, a circle, or a few text lines; with the
+// `loaded` attribute it shows its slotted content instead.
+
+import { RayElement, css, define } from "../../core/core.js";
+
+const RADII = ["xs", "sm", "md", "lg", "xl", "full"];
+
+const styles = css`
+  :host {
+    display: block;
+    --_w: 100%;
+    --_h: 1rem;
+    --_r: var(--ray-radius-sm);
+    /* Visible on the page and on cards in both schemes; the sweep moves
+       toward the background color. */
+    --_base: color-mix(in srgb, var(--ray-muted) 45%, var(--ray-border));
+    --_shine: color-mix(in srgb, var(--_base) 45%, var(--ray-background));
+  }
+  :host([hidden]) { display: none; }
+  :host([circle]) { --_r: 50%; --_w: 2.5rem; }
+  :host([circle]) { width: max-content; }
+  .bones { display: grid; gap: var(--ray-space-2); width: var(--_w); }
+  .bone {
+    height: var(--_h);
+    border-radius: var(--_r);
+    background: var(--_base);
+  }
+  :host([circle]) .bones { width: var(--_w); }
+  :host([circle]) .bone { width: var(--_w); height: var(--_w); }
+  :host([lines]) .bone:last-child:not(:first-child) { width: 70%; }
+  /* animation: shimmer (default) | pulse | none. Not "animate": that would
+     shadow Element.prototype.animate(). */
+  :host(:not([animation])) .bone, :host([animation="shimmer"]) .bone {
+    background: linear-gradient(90deg, var(--_base) 25%, var(--_shine) 50%, var(--_base) 75%) 0 0 / 300% 100%;
+    animation: ray-skeleton-shine 1.6s var(--ray-easing-standard) infinite;
+  }
+  :host([animation="pulse"]) .bone { animation: ray-skeleton-pulse 1.6s var(--ray-easing-standard) infinite; }
+  @keyframes ray-skeleton-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
+  @keyframes ray-skeleton-pulse { 50% { opacity: 0.45; } }
+  @media (prefers-reduced-motion: reduce) {
+    .bone { animation: none !important; background: var(--_base) !important; }
+  }
+  .content { display: none; }
+  :host([loaded]) .bones { display: none; }
+  :host([loaded]) .content { display: contents; }
+`;
+
+const length = (v) => (/^-?\d+(\.\d+)?$/.test(String(v)) ? `${v}px` : String(v));
+
+export class RaySkeleton extends RayElement {
+  static properties = {
+    width: { type: String },
+    height: { type: String },
+    radius: { type: String, reflect: true },
+    circle: { type: Boolean, reflect: true },
+    lines: { type: Number, reflect: true },
+    animation: { type: String, reflect: true },
+    loaded: { type: Boolean, reflect: true },
+  };
+  static styles = [styles];
+  static template = `<div class="bones" part="skeleton" aria-hidden="true"></div><div class="content"><slot></slot></div>`;
+
+  update() {
+    const s = this.style;
+    // A circle's diameter: width, else height.
+    const w = this.width || (this.circle ? this.height : "");
+    if (w) s.setProperty("--_w", length(w));
+    else s.removeProperty("--_w");
+    if (this.height) s.setProperty("--_h", length(this.height));
+    else s.removeProperty("--_h");
+    if (this.radius && !this.circle) s.setProperty("--_r", RADII.includes(this.radius) ? `var(--ray-radius-${this.radius})` : length(this.radius));
+    else s.removeProperty("--_r");
+    const n = this.circle ? 1 : Math.max(1, Math.floor(this.lines || 1));
+    const bones = this.$(".bones");
+    if (bones.children.length !== n) {
+      bones.replaceChildren(...Array.from({ length: n }, () => {
+        const b = document.createElement("div");
+        b.className = "bone";
+        b.setAttribute("part", "bone");
+        return b;
+      }));
+    }
+    // Screen readers: busy while the placeholder stands in for the content.
+    if (this.loaded) this.removeAttribute("aria-busy");
+    else this.setAttribute("aria-busy", "true");
+  }
+}
+
+define("ray-skeleton", RaySkeleton);

package/components/slider/slider.js

@@ -0,0 +1,155 @@
+// <ray-slider>: a range input (native, so keyboard, touch and screen readers
+// work as usual) with label, description, value display and marks.
+// Form-associated.
+
+import { css, define } from "../../core/core.js";
+import { applyColor, sizeStyles } from "../../core/styles.js";
+import { FieldControl, fieldStyles } from "../../core/form.js";
+
+const styles = css`
+  :host {
+    --_track: 0.375rem;
+    --_thumb: 1.125rem;
+  }
+  :host([size="xs"]) { --_track: 0.25rem; --_thumb: 0.875rem; }
+  :host([size="md"]) { --_track: 0.5rem; --_thumb: 1.375rem; }
+  :host([size="lg"]) { --_track: 0.625rem; --_thumb: 1.625rem; }
+  :host([size="xl"]) { --_track: 0.75rem; --_thumb: 1.875rem; }
+  .head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ray-space-2); }
+  .value { font-size: calc(var(--_fs) - 0.0625rem); font-variant-numeric: tabular-nums; color: var(--ray-muted-foreground); }
+  .value[hidden] { display: none; }
+  .root { position: relative; padding: calc((var(--_thumb) - var(--_track)) / 2) 0; }
+  input {
+    display: block;
+    width: 100%;
+    height: var(--_thumb);
+    margin: calc((var(--_track) - var(--_thumb)) / 2) 0;
+    background: transparent;
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+  }
+  input:disabled { cursor: not-allowed; }
+  input::-webkit-slider-runnable-track {
+    height: var(--_track);
+    border-radius: var(--ray-radius-full);
+    background: linear-gradient(to right, var(--_filled) var(--_pct), var(--ray-muted) var(--_pct));
+    box-shadow: inset 0 0 0 1px var(--ray-border);
+  }
+  input::-moz-range-track { height: var(--_track); border-radius: var(--ray-radius-full); background: var(--ray-muted); }
+  input::-moz-range-progress { height: var(--_track); border-radius: var(--ray-radius-full); background: var(--_filled); }
+  input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: var(--_thumb);
+    height: var(--_thumb);
+    margin-top: calc((var(--_track) - var(--_thumb)) / 2);
+    background: var(--ray-white);
+    border: 3px solid var(--_filled);
+    border-radius: 50%;
+    box-shadow: var(--ray-shadow-xs);
+  }
+  input::-moz-range-thumb {
+    width: var(--_thumb);
+    height: var(--_thumb);
+    background: var(--ray-white);
+    border: 3px solid var(--_filled);
+    border-radius: 50%;
+  }
+  input:focus-visible { outline: none; }
+  input:focus-visible::-webkit-slider-thumb { outline: var(--ray-focus-ring-width) solid var(--ray-ring); outline-offset: 2px; }
+  input:focus-visible::-moz-range-thumb { outline: var(--ray-focus-ring-width) solid var(--ray-ring); outline-offset: 2px; }
+  input:disabled { --_filled: var(--ray-border); }
+  .marks { position: relative; height: 1.25rem; margin: var(--ray-space-1) calc(var(--_thumb) / 2) 0; font-size: var(--ray-font-size-xs); color: var(--ray-muted-foreground); }
+  .marks:empty { display: none; }
+  .mark { position: absolute; transform: translateX(-50%); white-space: nowrap; }
+  .mark::before { content: ""; display: block; width: 1px; height: 0.25rem; margin: 0 auto 0.125rem; background: var(--ray-border); }
+`;
+
+export class RaySlider extends FieldControl {
+  static properties = {
+    ...FieldControl.fieldProperties,
+    value: { type: Number },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: { type: Number, default: 1 },
+    color: { type: String, reflect: true },
+    showValue: { type: Boolean, reflect: true },
+    unit: { type: String },
+    marks: { attribute: false },
+  };
+  static styles = [sizeStyles, fieldStyles, styles];
+  static template = `
+    <div class="head">
+      <label class="label" part="label" for="control" hidden><span class="label-text"></span><span class="required" aria-hidden="true" hidden> *</span></label>
+      <span class="value" part="value" aria-hidden="true" hidden></span>
+    </div>
+    <div class="description" part="description" id="description" hidden></div>
+    <div class="root" part="root"><input id="control" type="range" part="input"></div>
+    <div class="marks" part="marks"></div>
+    <div class="error" part="error" id="error" hidden></div>`;
+
+  wire() {
+    this._default = this.getAttribute("value");
+    this.control.addEventListener("input", () => {
+      this.commitProperty("value", Number(this.control.value));
+      this._commit();
+    });
+    this.control.addEventListener("change", (e) => this.forward(e));
+  }
+
+  update(changed) {
+    const c = this.control;
+    c.min = String(this.min ?? 0);
+    c.max = String(this.max ?? 100);
+    c.step = String(this.step ?? 1);
+    if (this.value === undefined) this.commitProperty("value", Number(c.value));
+    if (Number(c.value) !== this.value) c.value = String(this.value);
+    applyColor(this.$(".root"), this.color);
+    this.syncField();
+    if (changed.has("marks") || changed.has("min") || changed.has("max") || !this._marked) this._renderMarks();
+    this._commit();
+  }
+
+  _commit() {
+    const c = this.control;
+    const min = Number(c.min);
+    const max = Number(c.max);
+    const pct = max > min ? ((Number(c.value) - min) / (max - min)) * 100 : 0;
+    c.style.setProperty("--_pct", `${pct}%`);
+    const text = `${c.value}${this.unit ?? ""}`;
+    const value = this.$(".value");
+    value.hidden = !this.showValue;
+    value.textContent = text;
+    if (this.unit) c.setAttribute("aria-valuetext", text);
+    else c.removeAttribute("aria-valuetext");
+    this.internals.setFormValue(c.value);
+    this.syncValidity();
+  }
+
+  _renderMarks() {
+    this._marked = true;
+    const box = this.$(".marks");
+    box.replaceChildren();
+    if (!Array.isArray(this.marks)) return;
+    const min = this.min ?? 0;
+    const max = this.max ?? 100;
+    for (const m of this.marks) {
+      const v = typeof m === "number" ? m : m.value;
+      const span = document.createElement("span");
+      span.className = "mark";
+      span.style.left = `${((v - min) / (max - min || 1)) * 100}%`;
+      span.textContent = typeof m === "number" ? String(m) : (m.label ?? String(m.value));
+      box.append(span);
+    }
+  }
+
+  formResetCallback() {
+    this.value = this._default === null ? undefined : Number(this._default);
+  }
+
+  formStateRestoreCallback(state) {
+    this.value = Number(state);
+  }
+}
+
+define("ray-slider", RaySlider);

package/components/spinner/spinner.js

@@ -0,0 +1,39 @@
+// <ray-spinner>: an indeterminate loading indicator (Mantine's Loader).
+
+import { RayElement, css, define } from "../../core/core.js";
+import { applyColor, loaderStyles, srOnlyStyles } from "../../core/styles.js";
+
+const styles = css`
+  :host {
+    display: inline-flex;
+    vertical-align: middle;
+    --_loader: 2.25rem;
+  }
+  :host([size="xs"]) { --_loader: 1.125rem; }
+  :host([size="sm"]) { --_loader: 1.375rem; }
+  :host([size="lg"]) { --_loader: 2.75rem; }
+  :host([size="xl"]) { --_loader: 3.625rem; }
+  .loader { color: var(--_filled); }
+`;
+
+export class RaySpinner extends RayElement {
+  static properties = {
+    color: { type: String, reflect: true },
+    size: { type: String, reflect: true, default: "md" },
+    label: { type: String, default: "Loading" },
+  };
+  static styles = [loaderStyles, srOnlyStyles, styles];
+  static template = `<span class="loader" part="spinner"></span><span class="sr-only"></span>`;
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) this.setAttribute("role", "status");
+  }
+
+  update() {
+    applyColor(this.$(".loader"), this.color);
+    this.$(".sr-only").textContent = this.label;
+  }
+}
+
+define("ray-spinner", RaySpinner);