@reliability-design/web 1.4.6 → 1.4.7

package/dist/components/rel-menu/rel-menu.ts

@@ -1,541 +0,0 @@
-import { LitElement, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import "@reliability-design/icons/rel-icon";
-import "../rel-checkbox/rel-checkbox.js";
-import "../rel-radio/rel-radio.js";
-
-export type MenuType = "default" | "checkbox" | "arrow" | "select-option" | "fixed" | "fit";
-
-export interface MenuItem {
-  label: string;
-  active?: boolean;
-  checked?: boolean;
-  disabled?: boolean;
-  submenu?: MenuItem[];
-  open?: boolean;
-}
-
-@customElement("rel-menu-item")
-export class RelMenuItem extends LitElement {
-  @property({ type: String }) label: string = "";
-  @property({ type: String }) value: string = "";
-  @property({ type: Boolean }) disabled: boolean = false;
-  @property({ type: String }) icon: string = "";
-
-  createRenderRoot() {
-    return this;
-  }
-
-  render() {
-    return html``;
-  }
-}
-
-@customElement("rel-menu")
-export class RelMenu extends LitElement {
-  @property({ type: String }) type: MenuType = "default";
-
-  @property({ type: Array }) items: MenuItem[] = [];
-
-  @state() private focusedIndex: number = 0;
-  /** Index inside the open submenu that virtual focus sits on; -1 = main list. */
-  @state() private subFocusedIndex: number = -1;
-  @state() private _items: MenuItem[] = [];
-
-  /** Stable id prefix for aria-activedescendant targets. */
-  private menuId = `rel-menu-${Math.random().toString(36).slice(2)}`;
-
-  public static readonly _css = `
-    :host {
-      color: var(--rel-text-default);
-      display: inline-block;
-    }
-
-    .rel-menu {
-      position: relative;
-      display: inline-block;
-      background: var(--rel-bg-neutral);
-      color: var(--rel-text-default);
-      border-radius: var(--rel-border-radius-md);
-      box-shadow: var(--rel-shadows-shadow-300);
-      min-width: 220px;
-      /* No vertical padding: items fill edge-to-edge so a first/last-item hover
-         reaches the menu's top/bottom. NOT overflow:hidden — that clips the
-         type=arrow flyout (position:absolute at left:100%). Instead the first
-         and last items carry the outer corner radius so hover backgrounds clip
-         to the rounded shape without any overflow. */
-      padding: 0;
-      outline: none;
-      overflow: visible;
-      font-family: var(--rel-body-lg-regular-font-family);
-      font-weight: var(--rel-body-lg-regular-font-weight);
-      font-size: var(--rel-body-lg-regular-font-size);
-      line-height: var(--rel-body-lg-regular-line-height);
-      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
-    }
-
-    .rel-menu:focus-visible,
-    :host(:focus-visible) .rel-menu {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-    }
-
-    .rel-menu-item {
-      position: relative;
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs);
-      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
-      line-height: var(--rel-body-sm-regular-line-height);
-      cursor: pointer;
-      transition: background 0.15s ease, color 0.15s ease;
-      user-select: none;
-    }
-
-    /* First/last items carry the menu's outer radius so their hover fill clips
-       to the rounded corners (replaces the removed overflow:hidden). */
-    .rel-menu > .rel-menu-item:first-child {
-      border-top-left-radius: var(--rel-border-radius-md);
-      border-top-right-radius: var(--rel-border-radius-md);
-    }
-
-    .rel-menu > .rel-menu-item:last-child {
-      border-bottom-left-radius: var(--rel-border-radius-md);
-      border-bottom-right-radius: var(--rel-border-radius-md);
-    }
-
-    .rel-menu-item:hover {
-      background: var(--rel-bg-neutral-elevated-1);
-    }
-
-    .rel-menu-item:active {
-      background: var(--rel-bg-neutral-elevated-1);
-    }
-
-    .rel-menu-item.active {
-      background: var(--rel-bg-neutral-elevated-2);
-      font-weight: var(--rel-body-lg-medium-font-weight);
-    }
-
-    .rel-menu-item.disabled {
-      background-color: transparent;
-      color: var(--rel-text-disabled);
-      /* Keep the item pointer-interactive so cursor:not-allowed actually
-         renders; clicks are already neutralised by the item.disabled guard in
-         onItemClick/onItemEnter. pointer-events:none here would make the row
-         transparent to the pointer and suppress the cursor. */
-      cursor: not-allowed;
-    }
-
-    /* [data-focused] (presence, not ="true"): the ?data-focused boolean
-       binding renders the attribute with an EMPTY value, so a ="true"
-       selector never matches. */
-    .rel-menu-item[data-focused] {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: -2px;
-    }
-
-    /* Width modes (Figma Type=Fixed / Type=Fit) */
-    .rel-menu.fixed {
-      width: var(--rel-menu-width, 300px);
-      min-width: 0;
-      box-sizing: border-box;
-    }
-
-    .rel-menu.fit {
-      min-width: 0;
-      width: max-content;
-    }
-
-    /* Checkbox (Type=Checkbox) / radio (Type=Select Option) rows render the real
-       rel-checkbox / rel-radio. pointer-events:none keeps the whole row the click
-       target so onItemClick stays the single source of truth. */
-    .menu-control {
-      pointer-events: none;
-      width: 100%;
-    }
-
-    .menu-label {
-      flex: 1 1 auto;
-    }
-
-    /* Submenu affordance — same rel-icon chevron the menubar uses. */
-    .submenu-chevron {
-      margin-left: auto;
-      display: inline-flex;
-      align-items: center;
-      opacity: 0.6;
-      pointer-events: none;
-    }
-
-    /* Shortcut / hint text (Figma body-sm-regular, caption tone) */
-    .menu-shortcut,
-    ::slotted([slot="shortcut"]) {
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-      color: var(--rel-text-caption);
-      margin-left: auto;
-      padding-left: var(--rel-spacing-md);
-    }
-
-    
-    .rel-submenu {
-      border: 1px solid var(--rel-border-subtle);
-      position: absolute;
-      top: calc(-1 * var(--rel-spacing-3xs));
-      /* flush against the trigger (no gap) so moving the pointer into the flyout
-         never crosses a dead zone that would fire the trigger's mouseleave */
-      left: 100%;
-      min-width: 200px;
-      background: var(--rel-bg-neutral);
-      color: var(--rel-text-default);
-      border-radius: var(--rel-border-radius-md);
-      box-shadow: var(--rel-shadows-shadow-300);
-      /* padding:0 + overflow:hidden — safe here (a submenu has no further nested
-         flyout to clip) — so sub-item hovers fill fully and clip to the corners */
-      padding: 0;
-      overflow: hidden;
-      visibility: hidden;
-      pointer-events: none;
-      z-index: 20;
-    }
-
-    .rel-submenu.visible {
-      visibility: visible;
-      pointer-events: auto;
-    }
-
-    .rel-submenu .rel-menu-item {
-      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
-    }
-  `;
-
-  createRenderRoot() {
-    return this;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener("click", this.handleDocumentClick);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("click", this.handleDocumentClick);
-  }
-
-  updated(changedProperties: Map<string, unknown>) {
-    if (changedProperties.has('items')) {
-      this._items = this.items.map(item => ({ ...item }));
-    }
-  }
-
-  /** Index of a submenu locked open by a click (survives hover-out). -1 = none. */
-  private lockedIndex = -1;
-
-  private handleDocumentClick = (e: MouseEvent) => {
-    // composedPath (NOT e.target): document-level e.target is retargeted to the
-    // shadow host when this menu lives inside a shadow root, so this.contains()
-    // wrongly reads an inside-click as outside and closes an open submenu on the
-    // click that opened it. composedPath pierces shadow boundaries.
-    if (!e.composedPath().includes(this)) {
-      this.lockedIndex = -1;
-      this.subFocusedIndex = -1;
-      this._items = this._items.map(i => ({ ...i, open: false }));
-    }
-  };
-
-  private onItemEnter(item: MenuItem, index: number) {
-    if (item.disabled) return;
-    if (this.type === "arrow" && item.submenu?.length) {
-      // Hover opens this submenu; a click-locked one also stays open.
-      this._items = this._items.map((i, idx) => ({ ...i, open: idx === index || idx === this.lockedIndex }));
-    }
-  }
-
-  private onItemLeave(_item: MenuItem, index: number) {
-    if (this.type !== "arrow") return;
-    // Hover-out closes the submenu UNLESS it was locked open by a click. Moving
-    // into the flyout doesn't fire this (the flyout is a DOM descendant of the
-    // item and sits flush at left:100%, so there's no dead-zone gap).
-    if (this.lockedIndex === index) return;
-    this._items = this._items.map((i, idx) => ({ ...i, open: idx === this.lockedIndex }));
-  }
-
-  private onItemClick(item: MenuItem, index: number, ev?: Event) {
-    ev?.stopPropagation();
-    if (item.disabled) return;
-
-    this.focusedIndex = index;
-
-    if (this.type === "checkbox") {
-      const updated = { ...item, checked: !item.checked };
-      this._items = this._items.map((i, idx) => idx === index ? updated : i);
-      this.dispatchEvent(
-        new CustomEvent("rel-check", {
-          detail: { item: updated, checked: updated.checked },
-          bubbles: true,
-          composed: true,
-        })
-      );
-      return;
-    }
-
-    if (this.type === "arrow" && item.submenu?.length) {
-      // Click LOCKS the submenu open (click again to unlock/close).
-      const lock = this.lockedIndex !== index;
-      this.lockedIndex = lock ? index : -1;
-      this._items = this._items.map((i, idx) => ({ ...i, open: idx === index ? lock : false }));
-      return;
-    }
-
-    // Default: set active
-    const updated = { ...item, active: true };
-    this._items = this._items.map((i, idx) => idx === index ? updated : { ...i, active: false });
-    this.dispatchEvent(
-      new CustomEvent("rel-select", {
-        detail: { item: updated },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private onSubClick(parentIndex: number, subIndex: number, ev?: Event) {
-    ev?.stopPropagation();
-    this.lockedIndex = -1;
-    this._items = this._items.map((i, idx) => ({
-      ...i,
-      active: false,
-      open: false,
-      submenu: i.submenu?.map((s, sIdx) => ({
-        ...s,
-        active: idx === parentIndex && sIdx === subIndex,
-      })),
-    }));
-    this.dispatchEvent(
-      new CustomEvent("rel-submenu-select", {
-        detail: {
-          parent: this._items[parentIndex],
-          sub: this._items[parentIndex]?.submenu?.[subIndex],
-        },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  /** Keyboard-open locks the submenu (no hover-out to close it) and moves
-   *  virtual focus onto its first entry. */
-  private openSubmenuAt(index: number) {
-    this.lockedIndex = index;
-    this.subFocusedIndex = 0;
-    this._items = this._items.map((i, idx) => ({ ...i, open: idx === index }));
-  }
-
-  private closeSubmenus() {
-    this.lockedIndex = -1;
-    this.subFocusedIndex = -1;
-    this._items = this._items.map(i => ({ ...i, open: false }));
-  }
-
-  private onKeydown(ev: KeyboardEvent) {
-    const last = this._items.length - 1;
-    const focusedItem = this._items[this.focusedIndex];
-
-    // ── Virtual focus is inside an open submenu ──
-    if (
-      this.subFocusedIndex >= 0 &&
-      this.type === "arrow" &&
-      focusedItem?.open &&
-      focusedItem.submenu?.length
-    ) {
-      const subLast = focusedItem.submenu.length - 1;
-      switch (ev.key) {
-        case "ArrowDown":
-          this.subFocusedIndex = Math.min(subLast, this.subFocusedIndex + 1);
-          ev.preventDefault();
-          return;
-        case "ArrowUp":
-          this.subFocusedIndex = Math.max(0, this.subFocusedIndex - 1);
-          ev.preventDefault();
-          return;
-        case "Home":
-          this.subFocusedIndex = 0;
-          ev.preventDefault();
-          return;
-        case "End":
-          this.subFocusedIndex = subLast;
-          ev.preventDefault();
-          return;
-        case "ArrowLeft":
-        case "Escape":
-          // Close only the submenu; don't let Escape also dismiss an
-          // enclosing popover in the same keystroke.
-          this.closeSubmenus();
-          ev.preventDefault();
-          ev.stopPropagation();
-          return;
-        case "Enter":
-        case " ":
-          this.onSubClick(this.focusedIndex, this.subFocusedIndex);
-          ev.preventDefault();
-          return;
-        default:
-          return;
-      }
-    }
-
-    // ── Virtual focus is in the main list ──
-    if (ev.key === "ArrowDown") {
-      this.focusedIndex = Math.min(last, this.focusedIndex + 1);
-      ev.preventDefault();
-    } else if (ev.key === "ArrowUp") {
-      this.focusedIndex = Math.max(0, this.focusedIndex - 1);
-      ev.preventDefault();
-    } else if (ev.key === "Home") {
-      this.focusedIndex = 0;
-      ev.preventDefault();
-    } else if (ev.key === "End") {
-      this.focusedIndex = last;
-      ev.preventDefault();
-    } else if (ev.key === "ArrowRight") {
-      const item = this._items[this.focusedIndex];
-      if (this.type === "arrow" && item?.submenu?.length && !item.disabled) {
-        this.openSubmenuAt(this.focusedIndex);
-        ev.preventDefault();
-      }
-    } else if (ev.key === "ArrowLeft" || ev.key === "Escape") {
-      const anyOpen = this._items.some(i => i.open);
-      if (anyOpen) {
-        this.closeSubmenus();
-        ev.preventDefault();
-        if (ev.key === "Escape") ev.stopPropagation();
-      }
-    } else if (ev.key === "Enter" || ev.key === " ") {
-      const item = this._items[this.focusedIndex];
-      if (this.type === "arrow" && item?.submenu?.length && !item.disabled) {
-        this.openSubmenuAt(this.focusedIndex);
-      } else {
-        this.onItemClick(item, this.focusedIndex);
-      }
-      ev.preventDefault();
-    }
-  }
-
-  private renderMenuItem(item: MenuItem, index: number) {
-    const isFocused = this.focusedIndex === index && this.subFocusedIndex < 0;
-    const hasSubmenu = this.type === "arrow" && !!item.submenu?.length;
-    const role =
-      this.type === "checkbox"
-        ? "menuitemcheckbox"
-        : this.type === "select-option"
-        ? "menuitemradio"
-        : "menuitem";
-    const ariaChecked =
-      this.type === "checkbox"
-        ? String(!!item.checked)
-        : this.type === "select-option"
-        ? String(!!item.active)
-        : nothing;
-
-    // Checkbox / select-option rows delegate their control to the real
-    // rel-checkbox / rel-radio components (pointer-events:none so the whole ROW
-    // stays the click target — onItemClick is the single source of truth and
-    // the control just reflects item state).
-    const control =
-      this.type === "checkbox"
-        ? html`<rel-checkbox
-            class="menu-control"
-            inert
-            aria-hidden="true"
-            label="${item.label}"
-            status="${item.checked ? "checked" : "unchecked"}"
-            state="${item.disabled ? "disabled" : "default"}"
-          ></rel-checkbox>`
-        : this.type === "select-option"
-        ? html`<rel-radio
-            class="menu-control"
-            inert
-            aria-hidden="true"
-            .options="${[{ value: item.label, label: item.label, disabled: !!item.disabled }]}"
-            .selectedValue="${item.active ? item.label : null}"
-          ></rel-radio>`
-        : html`
-            <span class="menu-label">${item.label}</span>
-            ${hasSubmenu
-              ? html`<span class="submenu-chevron"
-                  ><rel-icon name="chevron-right" size="sm"></rel-icon
-                ></span>`
-              : ""}
-          `;
-
-    return html`
-      <div
-        id="${this.menuId}-item-${index}"
-        class="rel-menu-item ${item.active ? "active" : ""} ${item.disabled ? "disabled" : ""}"
-        role="${role}"
-        aria-checked="${ariaChecked}"
-        aria-label="${this.type === "checkbox" || this.type === "select-option" ? item.label : nothing}"
-        aria-disabled="${item.disabled ? "true" : nothing}"
-        aria-haspopup="${hasSubmenu ? "menu" : nothing}"
-        aria-expanded="${hasSubmenu ? String(!!item.open) : nothing}"
-        ?data-focused="${isFocused}"
-        @mouseenter="${() => this.onItemEnter(item, index)}"
-        @mouseleave="${() => this.onItemLeave(item, index)}"
-        @click="${(e: Event) => this.onItemClick(item, index, e)}">
-        ${control}
-        ${hasSubmenu
-          ? html`
-              <div
-                part="panel" class="rel-submenu ${item.open ? "visible" : ""}"
-                role="menu"
-                @click="${(e: Event) => e.stopPropagation()}">
-                ${item.submenu!.map(
-                  (sub, subIndex) => html`
-                    <div
-                      id="${this.menuId}-item-${index}-sub-${subIndex}"
-                      class="rel-menu-item ${sub.active ? "active" : ""} ${sub.disabled ? "disabled" : ""}"
-                      role="menuitem"
-                      aria-disabled="${sub.disabled ? "true" : nothing}"
-                      ?data-focused="${this.focusedIndex === index && this.subFocusedIndex === subIndex}"
-                      @click="${(e: Event) => this.onSubClick(index, subIndex, e)}">
-                      <span class="menu-label">${sub.label}</span>
-                    </div>
-                  `
-                )}
-              </div>
-            `
-          : ""}
-      </div>
-    `;
-  }
-
-  render() {
-    // DOM focus stays on the container; this tells AT which item virtual
-    // focus is on as the user arrows around (main list or open submenu).
-    const activeDescendant =
-      this._items.length === 0
-        ? nothing
-        : this.subFocusedIndex >= 0
-        ? `${this.menuId}-item-${this.focusedIndex}-sub-${this.subFocusedIndex}`
-        : `${this.menuId}-item-${this.focusedIndex}`;
-
-    return html`
-      <style>${RelMenu._css}</style>
-      <div
-        part="list" class="rel-menu ${this.type === "fixed" || this.type === "fit" ? this.type : ""}"
-        role="menu"
-        aria-label="Menu"
-        tabindex="0"
-        aria-activedescendant="${activeDescendant}"
-        @keydown="${this.onKeydown}"
-        @click="${(e: Event) => e.stopPropagation()}">
-        ${this._items.map((item, index) => this.renderMenuItem(item, index))}
-      </div>
-    `;
-  }
-}

package/dist/components/rel-menubar/index.ts

@@ -1,2 +0,0 @@
-export * from "./rel-menubar";
-export * from "./rel-menubar-menu";

package/dist/components/rel-menubar/rel-menubar-menu.css

@@ -1,3 +0,0 @@
-rel-menubar-menu {
-  display: none;
-}

package/dist/components/rel-menubar/rel-menubar-menu.ts

@@ -1,17 +0,0 @@
-import { LitElement, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import "./rel-menubar-menu.css";
-
-@customElement("rel-menubar-menu")
-export class RelMenubarMenu extends LitElement {
-  @property({ type: String }) label = "";
-
-  // Disable shadow DOM to allow parent to access children
-  createRenderRoot() {
-    return this;
-  }
-
-  render() {
-    return html``;
-  }
-}