@m3e/menu 1.0.0-rc.1 → 1.0.0-rc.2

package/src/MenuItemRadioElement.ts

@@ -1,169 +0,0 @@
-import { CSSResultGroup, html, PropertyValues } from "lit";
-import { customElement } from "lit/decorators.js";
-
-import { Checked, hasAssignedNodes, Role } from "@m3e/core";
-
-import { M3eMenuItemCheckboxElement } from "./MenuItemCheckboxElement";
-import { M3eMenuItemElement } from "./MenuItemElement";
-import { MenuItemElementBase } from "./MenuItemElementBase";
-
-/**
- * @summary
- * An item of a menu which supports a mutually exclusive checkable state.
- *
- * @description
- * The `m3e-menu-item-radio` component represents a selectable menu item that participates in a mutually exclusive group.
- * It reflects a singular choice within a shared context—such as sort order, theme selection, or view mode—and updates
- * group state when selected. This component can be nested within an `m3e-menu-item-group`, allowing multiple exclusive
- * groups to coexist within a single menu.
- *
- * @example
- * The following example illustrates use of the `m3e-menu-item-radio` in a `m3e-menu` to allow a user to select a sort order.
- * The `m3e-menu-trigger` is used to trigger a `m3e-menu` specified by the `for` attribute when its parenting element is activated.
- * ```html
- * <m3e-button>
- *  <m3e-menu-trigger for="menu">Sort order</m3e-menu-trigger>
- * </m3e-button>
- * <m3e-menu id="menu">
- *  <m3e-menu-item-radio>Ascending</m3e-menu-item-radio>
- *  <m3e-menu-item-radio>Descending</m3e-menu-item-radio>
- * </m3e-menu>
- * ```
- *
- * @tag m3e-menu-item-radio
- *
- * @slot - Renders the label of the item.
- * @slot icon - Renders an icon before the items's label.
- * @slot trailing-icon - Renders an icon after the item's label.
- *
- * @attr disabled - Whether the element is disabled.
- * @attr checked - Whether the element is checked.
- *
- * @cssprop --m3e-menu-item-container-height - Height of the menu item container.
- * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.
- * @cssprop --m3e-menu-item-container-hover-color - State layer hover color for unselected items.
- * @cssprop --m3e-menu-item-container-focus-color - State layer focus color for unselected items.
- * @cssprop --m3e-menu-item-ripple-color - Ripple color for unselected items.
- * @cssprop --m3e-menu-selected-color - Text color for selected or expanded items.
- * @cssprop --m3e-menu-selected-container-color - Background color for selected or expanded items.
- * @cssprop --m3e-menu-item-selected-container-hover-color - State layer hover color for selected items.
- * @cssprop --m3e-menu-item-selected-container-focus-color - State layer focus color for selected items.
- * @cssprop --m3e-menu-item-selected-ripple-color - Ripple color for selected items.
- * @cssprop --m3e-menu-item-disabled-color - Base color for disabled items.
- * @cssprop --m3e-menu-item-disabled-opacity - Opacity percentage for disabled item color mix.
- * @cssprop --m3e-menu-item-icon-label-space - Horizontal gap between icon and content.
- * @cssprop --m3e-menu-item-padding-start - Start padding for the item wrapper.
- * @cssprop --m3e-menu-item-padding-end - End padding for the item wrapper.
- * @cssprop --m3e-menu-item-label-text-font-size - Font size for menu item text.
- * @cssprop --m3e-menu-item-label-text-font-weight - Font weight for menu item text.
- * @cssprop --m3e-menu-item-label-text-line-height - Line height for menu item text.
- * @cssprop --m3e-menu-item-label-text-tracking - Letter spacing for menu item text.
- * @cssprop --m3e-menu-item-focus-ring-shape - Border radius for the focus ring.
- * @cssprop --m3e-menu-item-icon-size - Font size for leading and trailing icons.
- */
-@customElement("m3e-menu-item-radio")
-export class M3eMenuItemRadioElement extends Checked(Role(MenuItemElementBase, "menuitemradio")) {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = M3eMenuItemCheckboxElement.styles;
-
-  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);
-  /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);
-  /** @private */ readonly #keyUpHandler = () => this.#handleKeyUp();
-  /** @private */ readonly #mouseEnterHandler = () => this.#handleMouseEnter();
-
-  /** @private */ #spacePressed = false;
-
-  /** @inheritdoc */
-  override connectedCallback(): void {
-    super.connectedCallback();
-
-    this.addEventListener("click", this.#clickHandler);
-    this.addEventListener("keydown", this.#keyDownHandler);
-    this.addEventListener("keyup", this.#keyUpHandler);
-    this.addEventListener("mouseenter", this.#mouseEnterHandler);
-  }
-
-  /** @inheritdoc */
-  override disconnectedCallback(): void {
-    super.disconnectedCallback();
-
-    this.removeEventListener("click", this.#clickHandler);
-    this.removeEventListener("keydown", this.#keyDownHandler);
-    this.removeEventListener("keyup", this.#keyUpHandler);
-    this.removeEventListener("mouseenter", this.#mouseEnterHandler);
-  }
-
-  /** @inheritdoc */
-  protected override update(changedProperties: PropertyValues<this>): void {
-    super.update(changedProperties);
-
-    if (changedProperties.has("checked") && this.checked) {
-      (this.closest("[role='group']") ?? this.closest("m3e-menu"))
-        ?.querySelectorAll("m3e-menu-item-radio")
-        .forEach((x) => {
-          if (x !== this && x.checked) {
-            x.checked = false;
-          }
-        });
-    }
-  }
-
-  /** @internal @inheritdoc */
-  protected override _renderContent(): unknown {
-    return html` <div class="icon">
-        <svg class="check" viewBox="0 -960 960 960" aria-hidden="true">
-          <path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
-        </svg>
-        <slot name="icon" @slotchange="${this.#handleIconSlotChange}"></slot>
-      </div>
-      <slot></slot>
-      <slot name="trailing-icon" aria-hidden="true" @slotchange="${this.#handleTrailingIconSlotChange}"></slot>`;
-  }
-
-  /** @private */
-  #handleIconSlotChange(e: Event): void {
-    this.classList.toggle("-with-icon", hasAssignedNodes(<HTMLSlotElement>e.target));
-  }
-
-  /** @private */
-  #handleTrailingIconSlotChange(e: Event): void {
-    this.classList.toggle("-with-trailing-icon", hasAssignedNodes(<HTMLSlotElement>e.target));
-  }
-
-  /** @private */
-  #handleClick(e: Event): void {
-    if (!e.defaultPrevented) {
-      this.checked = true;
-      this.performUpdate();
-
-      if (!this.#spacePressed) {
-        this.menu?.hideAll(true);
-      }
-    }
-  }
-
-  /** @private */
-  #handleKeyDown(e: KeyboardEvent): void {
-    this.#spacePressed = e.key === " ";
-  }
-
-  /** @private */
-  #handleKeyUp(): void {
-    this.#spacePressed = false;
-  }
-
-  /** @private */
-  #handleMouseEnter(): void {
-    this.menu?.items.forEach((item) => {
-      if (item instanceof M3eMenuItemElement && item.submenu?.isOpen) {
-        item.submenu.hide();
-      }
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-menu-item-radio": M3eMenuItemRadioElement;
-  }
-}

package/src/MenuPosition.ts

@@ -1,5 +0,0 @@
-/** Specifies the possible positions for a menu, on the x-axis, relative to its trigger. */
-export type MenuPositionX = "before" | "after";
-
-/** Specifies the possible positions for a menu, on the x-axis, relative to its trigger. */
-export type MenuPositionY = "above" | "below";

package/src/MenuTriggerElement.ts

@@ -1,154 +0,0 @@
-import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-
-import { HtmlFor, Role } from "@m3e/core";
-import { addAriaReferencedId, removeAriaReferencedId } from "@m3e/core/a11y";
-
-import type { M3eMenuElement } from "./MenuElement";
-
-/**
- * @summary
- * An element, nested within a clickable element, used to open a menu.
- *
- * @description
- * The `m3e-menu-trigger` component is used to open a menu when nested within a clickable element
- * such as a button or menu item. It anchors the menu to its invoker, enabling contextual flows and
- * nested hierarchies.
- *
- * @example
- * The following example illustrates a basic menu.  The `m3e-menu-trigger` is used to trigger a `m3e-menu` specified
- * by the `for` attribute when its parenting element is activated.
- * ```html
- * <m3e-button>
- *   <m3e-menu-trigger for="menu1">Basic menu</m3e-menu-trigger>
- * </m3e-button>
- * <m3e-menu id="menu1">
- *   <m3e-menu-item>Apple</m3e-menu-item>
- *   <m3e-menu-item>Apricot</m3e-menu-item>
- *   <m3e-menu-item>Avocado</m3e-menu-item>
- *   <m3e-menu-item>Green Apple</m3e-menu-item>
- *   <m3e-menu-item>Green Grapes</m3e-menu-item>
- *   <m3e-menu-item>Olive</m3e-menu-item>
- *   <m3e-menu-item>Orange</m3e-menu-item>
- * </m3e-menu>
- * ```
- *
- * @example
- * The next example illustrates nested menus.  Submenus are triggered by placing a `m3e-menu-trigger` inside a `m3e-menu-item`.
- * ```html
- * <m3e-button>
- *   <m3e-menu-trigger for="menu2">Nested menus</m3e-menu-trigger>
- * </m3e-button>
- * <m3e-menu id="menu2">
- *   <m3e-menu-item>
- *     <m3e-menu-trigger for="menu3">Fruits with A</m3e-menu-trigger>
- *   </m3e-menu-item>
- *   <m3e-menu-item>Grapes</m3e-menu-item>
- *   <m3e-menu-item>Olive</m3e-menu-item>
- *   <m3e-menu-item>Orange</m3e-menu-item>
- * </m3e-menu>
- * <m3e-menu id="menu3">
- *   <m3e-menu-item>Apricot</m3e-menu-item>
- *   <m3e-menu-item>Avocado</m3e-menu-item>
- *   <m3e-menu-item>
- *     <m3e-menu-trigger for="menu4">Apples</m3e-menu-trigger>
- *   </m3e-menu-item>
- * </m3e-menu>
- * <m3e-menu id="menu4">
- *   <m3e-menu-item>Fuji</m3e-menu-item>
- *   <m3e-menu-item>Granny Smith</m3e-menu-item>
- *   <m3e-menu-item>Red Delicious</m3e-menu-item>
- * </m3e-menu>
- * ```
- *
- * @tag m3e-menu-trigger
- *
- * @slot - Renders the contents of the trigger.
- */
-@customElement("m3e-menu-trigger")
-export class M3eMenuTriggerElement extends HtmlFor(Role(LitElement, "none")) {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = css`
-    :host {
-      display: contents;
-    }
-    ::slotted(.material-icons) {
-      font-size: inherit !important;
-    }
-  `;
-
-  /** @private */ readonly #clickHandler = async (e: Event) => this.#handleClick(e);
-
-  /** The menu triggered by the element. */
-  get menu(): M3eMenuElement | null {
-    return this.control?.tagName === "M3E-MENU" ? <M3eMenuElement>this.control : null;
-  }
-
-  /** @inheritdoc */
-  override connectedCallback(): void {
-    super.connectedCallback();
-    this.parentElement?.addEventListener("click", this.#clickHandler);
-  }
-
-  /** @inheritdoc */
-  override disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this.parentElement?.removeEventListener("click", this.#clickHandler);
-  }
-
-  /** @inheritdoc */
-  override attach(control: HTMLElement): void {
-    super.attach(control);
-
-    const menu = this.menu;
-    if (menu) {
-      if (this.parentElement) {
-        this.parentElement.ariaHasPopup = "menu";
-        this.parentElement.ariaExpanded = "false";
-        if (menu.id) {
-          addAriaReferencedId(this.parentElement, "aria-controls", menu.id);
-        }
-      }
-      if (this.closest("m3e-menu")) {
-        menu.submenu = true;
-      }
-    }
-  }
-
-  /** @inheritdoc */
-  override detach(): void {
-    if (this.parentElement) {
-      this.parentElement.ariaHasPopup = null;
-      this.parentElement.ariaExpanded = null;
-
-      const menu = this.menu;
-      if (menu?.id) {
-        removeAriaReferencedId(this.parentElement, "aria-controls", menu.id);
-      }
-    }
-
-    super.detach();
-  }
-
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html`<slot></slot>`;
-  }
-
-  /** @private */
-  #handleClick(e: Event): void {
-    if (!e.defaultPrevented && this.parentElement) {
-      if (this.parentElement.tagName === "M3E-MENU-ITEM") {
-        this.menu?.show(this.parentElement);
-      } else {
-        this.menu?.toggle(this.parentElement);
-      }
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-menu-trigger": M3eMenuTriggerElement;
-  }
-}

package/src/index.ts

@@ -1,7 +0,0 @@
-export * from "./MenuElement";
-export * from "./MenuItemCheckboxElement";
-export * from "./MenuItemElement";
-export * from "./MenuItemGroupElement";
-export * from "./MenuItemRadioElement";
-export * from "./MenuPosition";
-export * from "./MenuTriggerElement";

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "./dist/src"
-  },
-  "include": ["src/**/*.ts", "**/*.mjs", "**/*.js"],
-  "exclude": []
-}