@raylang/elements 0.0.0-stage → 0.3.0

package/components/tabs/tabs.js

@@ -0,0 +1,224 @@
+// <ray-tabs> + <ray-tab> + <ray-tab-panel> (WAI-ARIA tabs pattern).
+//
+// Tabs and panels are light-DOM children, so their roles, ids,
+// aria-controls and aria-labelledby work as plain attributes. A tab and its
+// panel share a `value`.
+
+import { RayElement, css, define, uid } from "../../core/core.js";
+import { applyColor } from "../../core/styles.js";
+
+const tabsStyles = css`
+  :host { display: block; }
+  :host([orientation="vertical"]) { display: flex; gap: var(--ray-space-4); }
+  /* Too many tabs for the width: the list scrolls sideways instead of
+     wrapping (a wrapped underline reads as two separate tab bars). The
+     baseline is an inset shadow, so a tab's own bottom border paints over
+     it without a negative margin that the scroller would clip. */
+  .list {
+    --_line: 2px;
+    display: flex;
+    gap: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+    box-shadow: inset 0 calc(-1 * var(--_line)) 0 var(--ray-border);
+  }
+  .list::-webkit-scrollbar { display: none; }
+  .list ::slotted(ray-tab) { flex: none; }
+  :host([orientation="vertical"]) .list { flex-direction: column; overflow-x: visible; box-shadow: none; border-right: 2px solid var(--ray-border); }
+  :host([variant="outline"]) .list { --_line: 1px; }
+  :host([variant="outline"][orientation="vertical"]) .list { border-right-width: 1px; }
+  :host([variant="pills"]) .list { gap: var(--ray-space-1); border: 0; box-shadow: none; }
+  :host([grow]) .list ::slotted(ray-tab) { flex: 1 0 auto; }
+  .panels { flex: 1; min-width: 0; padding-top: var(--ray-space-3); }
+  :host([orientation="vertical"]) .panels { padding-top: 0; }
+`;
+
+export class RayTabs extends RayElement {
+  static properties = {
+    value: { type: String },
+    orientation: { type: String, reflect: true, default: "horizontal" },
+    variant: { type: String, reflect: true, default: "default" },
+    color: { type: String, reflect: true },
+    activation: { type: String, default: "auto" },
+    grow: { type: Boolean, reflect: true },
+  };
+  static styles = [tabsStyles];
+  static template = `<div class="list" part="list" role="tablist"><slot name="tab"></slot></div><div class="panels" part="panels"><slot></slot></div>`;
+
+  constructor() {
+    super();
+    this.addEventListener("click", (e) => {
+      const tab = e.target.closest?.("ray-tab");
+      if (tab && this.tabs.includes(tab) && !tab.disabled) this._select(tab, true);
+    });
+    this.addEventListener("keydown", (e) => this._key(e));
+    for (const slot of this.shadowRoot.querySelectorAll("slot")) {
+      slot.addEventListener("slotchange", () => this.requestUpdate());
+    }
+  }
+
+  get tabs() {
+    return [...this.querySelectorAll("ray-tab")].filter((t) => t.closest("ray-tabs") === this);
+  }
+
+  get panels() {
+    return [...this.querySelectorAll("ray-tab-panel")].filter((p) => p.closest("ray-tabs") === this);
+  }
+
+  update() {
+    const tabs = this.tabs;
+    const panels = this.panels;
+    if (this.value === undefined || !tabs.some((t) => t.value === this.value && !t.disabled)) {
+      const first = tabs.find((t) => !t.disabled);
+      if (first) this.commitProperty("value", first.value);
+    }
+    const vertical = this.orientation === "vertical";
+    this.$(".list").setAttribute("aria-orientation", vertical ? "vertical" : "horizontal");
+    applyColor(this, this.color);
+    for (const tab of tabs) {
+      const panel = panels.find((p) => p.value === tab.value);
+      const active = tab.value === this.value;
+      tab.id ||= uid("tab");
+      tab.setAttribute("role", "tab");
+      tab.setAttribute("aria-selected", String(active));
+      tab.tabIndex = active ? 0 : -1;
+      tab.toggleAttribute("data-active", active);
+      tab.dataset.variant = this.variant || "default";
+      tab.toggleAttribute("data-vertical", vertical);
+      if (tab.disabled) tab.setAttribute("aria-disabled", "true");
+      else tab.removeAttribute("aria-disabled");
+      if (panel) {
+        panel.id ||= uid("tabpanel");
+        tab.setAttribute("aria-controls", panel.id);
+        panel.setAttribute("aria-labelledby", tab.id);
+      }
+    }
+    for (const panel of panels) {
+      panel.setAttribute("role", "tabpanel");
+      panel.tabIndex = 0;
+      panel.hidden = panel.value !== this.value;
+    }
+  }
+
+  _select(tab, user) {
+    const changed = tab.value !== this.value;
+    this.value = tab.value;
+    if (user && changed) this.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+
+  _key(e) {
+    const tab = e.target.closest?.("ray-tab");
+    const tabs = this.tabs.filter((t) => !t.disabled);
+    const i = tabs.indexOf(tab);
+    if (i < 0) return;
+    const vertical = this.orientation === "vertical";
+    const next = vertical ? "ArrowDown" : "ArrowRight";
+    const prev = vertical ? "ArrowUp" : "ArrowLeft";
+    let target = null;
+    if (e.key === next) target = tabs[(i + 1) % tabs.length];
+    else if (e.key === prev) 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 === "Enter" || e.key === " ") && this.activation === "manual") {
+      e.preventDefault();
+      this._select(tab, true);
+      return;
+    }
+    if (!target) return;
+    e.preventDefault();
+    target.focus();
+    if (this.activation !== "manual") this._select(target, true);
+  }
+}
+
+const tabStyles = css`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ray-space-2);
+    min-height: var(--ray-control-height-sm);
+    padding: 0 var(--ray-space-4);
+    font-size: var(--ray-font-size-sm);
+    font-weight: var(--ray-font-weight-medium);
+    color: var(--ray-muted-foreground);
+    white-space: nowrap;
+    cursor: pointer;
+    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), border-color var(--ray-duration-fast) var(--ray-easing-standard);
+  }
+  :host(:focus-visible) { outline: var(--ray-focus-ring-width) solid var(--ray-ring); outline-offset: -2px; border-radius: var(--ray-radius-sm); }
+  :host(:hover) { color: var(--ray-foreground); }
+  :host([data-active]) { color: var(--ray-foreground); }
+  :host([disabled]) { opacity: 0.5; cursor: not-allowed; }
+
+  /* default: underline */
+  :host([data-variant="default"]) { border-bottom: 2px solid transparent; }
+  :host([data-variant="default"]:hover:not([data-active])) { border-bottom-color: var(--ray-border); background: var(--ray-muted); }
+  :host([data-variant="default"][data-active]) { border-bottom-color: var(--_filled, var(--ray-primary)); }
+  :host([data-variant="default"][data-vertical]) { margin: 0 -2px 0 0; justify-content: flex-start; border-bottom: 0; border-right: 2px solid transparent; }
+  :host([data-variant="default"][data-vertical][data-active]) { border-right-color: var(--_filled, var(--ray-primary)); }
+
+  /* outline */
+  :host([data-variant="outline"]) { border: 1px solid transparent; border-radius: var(--ray-radius-default) var(--ray-radius-default) 0 0; }
+  :host([data-variant="outline"][data-active]) { border-color: var(--ray-border); border-bottom-color: var(--ray-background); background: var(--ray-background); }
+  :host([data-variant="outline"][data-vertical]) { margin: 0 -1px 0 0; justify-content: flex-start; border-radius: var(--ray-radius-default) 0 0 var(--ray-radius-default); }
+  :host([data-variant="outline"][data-vertical][data-active]) { border-bottom-color: var(--ray-border); border-right-color: var(--ray-background); }
+
+  /* pills */
+  :host([data-variant="pills"]) { border-radius: var(--ray-radius-default); }
+  :host([data-variant="pills"]:hover:not([data-active])) { background: var(--ray-accent); }
+  :host([data-variant="pills"][data-active]) { color: var(--_contrast, var(--ray-primary-foreground)); background: var(--_filled, var(--ray-primary)); }
+
+  .section { display: inline-flex; }
+  .section:not([data-filled]) { display: none; }
+  ::slotted(svg) { width: 1rem; height: 1rem; }
+`;
+
+export class RayTab extends RayElement {
+  static properties = {
+    value: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+  };
+  static styles = [tabStyles];
+  static template = `<span class="section" part="left-section"><slot name="left"></slot></span><slot></slot><span class="section" part="right-section"><slot name="right"></slot></span>`;
+
+  constructor() {
+    super();
+    for (const slot of this.shadowRoot.querySelectorAll("slot[name]")) {
+      slot.addEventListener("slotchange", () => slot.parentElement.toggleAttribute("data-filled", slot.assignedNodes().length > 0));
+    }
+  }
+
+  connectedCallback() {
+    // Tabs render in the tablist of <ray-tabs>.
+    if (this.slot !== "tab") this.slot = "tab";
+    super.connectedCallback();
+  }
+
+  update(changed) {
+    if (changed.has("value") || changed.has("disabled")) this.closest("ray-tabs")?.requestUpdate();
+  }
+}
+
+const panelStyles = css`
+  :host { display: block; outline: none; }
+  :host([hidden]) { display: none; }
+  /* The newly selected panel fades in (display none → block restarts it). */
+  :host(:not([hidden])) { animation: ray-panel-in var(--ray-duration-base) var(--ray-easing-out); }
+  @keyframes ray-panel-in { from { opacity: 0; transform: translateY(2px); } }
+  :host(:focus-visible) { outline: var(--ray-focus-ring-width) solid var(--ray-ring); outline-offset: 2px; border-radius: var(--ray-radius-sm); }
+`;
+
+export class RayTabPanel extends RayElement {
+  static properties = {
+    value: { type: String, reflect: true },
+  };
+  static styles = [panelStyles];
+  static template = `<slot></slot>`;
+}
+
+define("ray-tabs", RayTabs);
+define("ray-tab", RayTab);
+define("ray-tab-panel", RayTabPanel);

package/components/textarea/textarea.js

@@ -0,0 +1,105 @@
+// <ray-textarea>: a multi-line text field, optionally growing with its content.
+
+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`
+  .box { align-items: stretch; }
+  .control {
+    padding-block: calc(var(--_px) * 0.4);
+    line-height: var(--ray-line-height-md);
+    resize: vertical;
+  }
+  :host([autosize]) .control { resize: none; overflow: hidden; }
+  :host([resize="none"]) .control { resize: none; }
+  :host([resize="both"]) .control { resize: both; }
+`;
+
+const PASSTHROUGH = ["placeholder", "autocomplete", "minlength", "maxlength", "spellcheck", "wrap"];
+
+export class RayTextarea extends FieldControl {
+  static properties = {
+    ...FieldControl.fieldProperties,
+    value: { type: String },
+    rows: { type: Number, default: 3 },
+    autosize: { type: Boolean, reflect: true },
+    maxRows: { type: Number },
+    readonly: { type: Boolean, reflect: true },
+  };
+  static styles = [sizeStyles, radiusStyles, fieldStyles, boxStyles, styles];
+  static template = fieldTemplate(`<textarea id="control" class="control" part="textarea"></textarea>`, { sections: false });
+
+  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);
+      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);
+    }
+    // Initial value: the attribute, else the element's text (like <textarea>).
+    this._default = this.getAttribute("value") ?? this.textContent ?? "";
+    if (this.value === undefined) this.commitProperty("value", this._default);
+    this.control.addEventListener("input", () => {
+      this.commitProperty("value", this.control.value);
+      this._commit();
+      this._fit();
+    });
+    this.control.addEventListener("change", (e) => this.forward(e));
+  }
+
+  update() {
+    const c = this.control;
+    const v = this.value ?? "";
+    if (c.value !== v) c.value = v;
+    c.rows = this.rows || 3;
+    c.readOnly = Boolean(this.readonly);
+    this.syncField();
+    this._commit();
+    this._fit();
+  }
+
+  _commit() {
+    this.internals.setFormValue(this.value ?? "");
+    this.syncValidity();
+  }
+
+  // Autosize: grow to the content, up to maxRows.
+  _fit() {
+    const c = this.control;
+    if (!this.autosize) {
+      c.style.removeProperty("height");
+      return;
+    }
+    c.style.height = "auto";
+    let h = c.scrollHeight;
+    if (this.maxRows) {
+      const line = parseFloat(getComputedStyle(c).lineHeight) || 20;
+      const pad = c.offsetHeight - c.clientHeight + parseFloat(getComputedStyle(c).paddingTop) * 2;
+      h = Math.min(h, line * this.maxRows + pad);
+      c.style.overflowY = c.scrollHeight > h ? "auto" : "hidden";
+    }
+    c.style.height = `${h}px`;
+  }
+
+  formResetCallback() {
+    this.value = this._default;
+  }
+
+  formStateRestoreCallback(state) {
+    this.value = String(state ?? "");
+  }
+}
+
+define("ray-textarea", RayTextarea);

package/components/theme-toggle/theme-toggle.js

@@ -0,0 +1,78 @@
+// <ray-theme-toggle>: cycles the document theme system -> light -> dark.
+
+import { RayElement, css, define, getTheme, setTheme, onThemeChange } from "../../core/core.js";
+
+const ORDER = ["system", "light", "dark"];
+const LABEL = { system: "System theme", light: "Light theme", dark: "Dark theme" };
+
+// Icon of each theme (from the icon registry).
+const ICONS = { system: "monitor", light: "sun", dark: "moon" };
+
+const styles = css`
+  :host {
+    display: inline-flex;
+    --_size: var(--ray-control-height-sm);
+  }
+  :host([size="xs"]) { --_size: var(--ray-control-height-xs); }
+  :host([size="md"]) { --_size: var(--ray-control-height-md); }
+  :host([size="lg"]) { --_size: var(--ray-control-height-lg); }
+  :host([size="xl"]) { --_size: var(--ray-control-height-xl); }
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_size);
+    height: var(--_size);
+    padding: 0;
+    color: var(--ray-foreground);
+    background: transparent;
+    border: 1px solid var(--ray-border);
+    border-radius: var(--ray-radius-default);
+    cursor: pointer;
+    transition: background var(--ray-duration-fast) var(--ray-easing-standard);
+  }
+  button:hover { background: var(--ray-accent); }
+  .icon svg { width: calc(var(--_size) * 0.55); height: calc(var(--_size) * 0.55); }
+`;
+
+export class RayThemeToggle extends RayElement {
+  static properties = {
+    size: { type: String, reflect: true, default: "sm" },
+  };
+  static styles = [styles];
+  static delegatesFocus = true;
+  static template = `<button part="button" class="focus-ring" type="button"><span class="icon" data-ray-icon="monitor" aria-hidden="true"></span></button>`;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._button = this.$("button");
+    this._onClick = () => {
+      const next = ORDER[(ORDER.indexOf(getTheme()) + 1) % ORDER.length];
+      setTheme(next);
+    };
+    this._button.addEventListener("click", this._onClick);
+    this._stop = onThemeChange(() => this.requestUpdate());
+    this._paint();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._button.removeEventListener("click", this._onClick);
+    this._stop?.();
+  }
+
+  update() {
+    this._paint();
+  }
+
+  _paint() {
+    const theme = getTheme();
+    const next = ORDER[(ORDER.indexOf(theme) + 1) % ORDER.length];
+    this.$(".icon").setAttribute("data-ray-icon", ICONS[theme]);
+    this.paintIcons(this._button);
+    this._button.setAttribute("aria-label", `${LABEL[theme]} (switch to ${next})`);
+    this._button.title = LABEL[theme];
+  }
+}
+
+define("ray-theme-toggle", RayThemeToggle);

package/components/timeline/timeline.js

@@ -0,0 +1,150 @@
+// <ray-timeline> + <ray-timeline-item>: events in order along a line
+// (Mantine's Timeline): activity, history, a deploy's stages. Items up to
+// `active` are reached: a filled bullet and a colored line. A bullet is a
+// dot, an icon, or anything in the bullet slot (an avatar).
+
+import { RayElement, css, define } from "../../core/core.js";
+import { applyColor } from "../../core/styles.js";
+
+const timelineStyles = css`
+  :host { display: block; --_bullet: 1.25rem; --_line: 2px; }
+  :host([hidden]) { display: none; }
+  .list { display: flex; flex-direction: column; }
+`;
+
+const itemStyles = css`
+  :host {
+    position: relative;
+    display: grid;
+    grid-template-columns: var(--_bullet) minmax(0, 1fr);
+    column-gap: var(--ray-space-3);
+    padding-bottom: var(--ray-space-6);
+  }
+  :host([hidden]) { display: none; }
+  :host([data-last]) { padding-bottom: 0; }
+  :host([data-align="right"]) { grid-template-columns: minmax(0, 1fr) var(--_bullet); text-align: right; }
+  :host([data-align="right"]) .bullet-col { grid-column: 2; grid-row: 1; }
+  :host([data-align="right"]) .body { grid-column: 1; grid-row: 1; }
+  .bullet-col { position: relative; display: flex; justify-content: center; }
+  .bullet {
+    position: relative;
+    z-index: 1;
+    box-sizing: border-box;
+    display: grid;
+    place-items: center;
+    width: var(--_bullet);
+    height: var(--_bullet);
+    color: var(--ray-muted-foreground);
+    background: var(--ray-background);
+    border: var(--_line) solid var(--ray-border);
+    border-radius: 50%;
+    --ray-icon-size: calc(var(--_bullet) * 0.6);
+    --ray-icon-stroke: 2.25;
+  }
+  :host([data-reached]) .bullet { color: var(--_contrast); background: var(--_filled); border-color: var(--_filled); }
+  :host([data-has-bullet]) .bullet { border: 0; background: none; overflow: visible; }
+  .line {
+    position: absolute;
+    top: var(--_bullet);
+    bottom: calc(-1 * var(--ray-space-6));
+    left: calc(50% - var(--_line) / 2);
+    width: 0;
+    border-left: var(--_line) var(--_line-style, solid) var(--ray-border);
+  }
+  :host([data-last]) .line { display: none; }
+  :host([data-line-reached]) .line { border-left-color: var(--_filled); }
+  :host([line-variant="dashed"]) .line { --_line-style: dashed; }
+  :host([line-variant="dotted"]) .line { --_line-style: dotted; }
+  .body { min-width: 0; padding-top: calc((var(--_bullet) - 1.4em) / 2); }
+  .title { display: block; font-weight: var(--ray-font-weight-medium); line-height: 1.4; }
+  .title:empty { display: none; }
+  .content { font-size: var(--ray-font-size-sm); color: var(--ray-muted-foreground); }
+  .content ::slotted(*) { margin-block: var(--ray-space-1) 0; }
+  .time { display: block; margin-top: var(--ray-space-1); font-size: var(--ray-font-size-xs); color: var(--ray-muted-foreground); opacity: 0.85; }
+  .time:empty { display: none; }
+`;
+
+export class RayTimeline extends RayElement {
+  static properties = {
+    active: { type: Number, reflect: true, default: -1 },
+    align: { type: String, reflect: true, default: "left" },
+    bulletSize: { type: String, attribute: "bullet-size" },
+    lineWidth: { type: Number, attribute: "line-width" },
+    color: { type: String, reflect: true },
+    reverseActive: { type: Boolean, reflect: true, attribute: "reverse-active" },
+  };
+  static styles = [timelineStyles];
+  static template = `<div class="list" part="list"><slot></slot></div>`;
+
+  constructor() {
+    super();
+    this.$("slot").addEventListener("slotchange", () => this.requestUpdate());
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) this.setAttribute("role", "list");
+  }
+
+  /** The items, in order. */
+  get items() {
+    return [...this.children].filter((el) => el.localName === "ray-timeline-item");
+  }
+
+  update() {
+    const items = this.items;
+    const n = items.length;
+    const active = this.active ?? -1;
+    if (this.bulletSize) this.style.setProperty("--_bullet", /^\d+(\.\d+)?$/.test(this.bulletSize) ? `${this.bulletSize}px` : this.bulletSize);
+    else this.style.removeProperty("--_bullet");
+    if (this.lineWidth) this.style.setProperty("--_line", `${this.lineWidth}px`);
+    else this.style.removeProperty("--_line");
+    applyColor(this, this.color);
+    items.forEach((item, i) => {
+      // reverse-active: reached from the end (the latest event at the top).
+      const k = this.reverseActive ? n - 1 - i : i;
+      item.toggleAttribute("data-reached", active >= 0 && k <= active);
+      item.toggleAttribute("data-line-reached", active >= 0 && (this.reverseActive ? k <= active && k > 0 : k < active));
+      item.toggleAttribute("data-last", i === n - 1);
+      item.setAttribute("data-align", this.align === "right" ? "right" : "left");
+    });
+  }
+}
+
+export class RayTimelineItem extends RayElement {
+  static properties = {
+    label: { type: String },
+    time: { type: String },
+    icon: { type: String },
+    color: { type: String, reflect: true },
+    lineVariant: { type: String, reflect: true, attribute: "line-variant", default: "solid" },
+  };
+  static styles = [itemStyles];
+  static template = `
+    <div class="bullet-col"><span class="bullet" part="bullet"><span class="icon" data-ray-icon=""></span><slot name="bullet"></slot></span><span class="line" part="line"></span></div>
+    <div class="body" part="body"><span class="title" part="title"></span><div class="content"><slot></slot></div><span class="time" part="time"></span></div>`;
+
+  constructor() {
+    super();
+    const slot = this.$('slot[name="bullet"]');
+    slot.addEventListener("slotchange", () => this.toggleAttribute("data-has-bullet", slot.assignedElements().length > 0));
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "listitem");
+  }
+
+  update() {
+    this.$(".title").textContent = this.label ?? "";
+    this.$(".time").textContent = this.time ?? "";
+    this.$(".icon").setAttribute("data-ray-icon", this.icon ?? "");
+    this.paintIcons();
+    // Its own color, else the timeline's (inherited custom properties).
+    if (this.color) applyColor(this, this.color);
+    else for (const p of [...this.style]) if (p.startsWith("--_")) this.style.removeProperty(p);
+  }
+}
+
+define("ray-timeline-item", RayTimelineItem);
+define("ray-timeline", RayTimeline);