@rcarls/rc-menu 0.2.0 → 0.3.0

package/dist/demo.js

@@ -1,40 +0,0 @@
-const THEMES = ['', 'light', 'dark', 'solarized-light', 'solarized-dark'];
-const LABELS = ['Auto', 'Light', 'Dark', 'Solarized ☀', 'Solarized ☾'];
-
-const stored = localStorage.getItem('rc-demo-theme') ?? '';
-applyTheme(stored);
-
-function applyTheme(theme) {
-  if (theme) {
-    document.documentElement.dataset.theme = theme;
-  } else {
-    delete document.documentElement.dataset.theme;
-  }
-}
-
-function currentIndex() {
-  const current = document.documentElement.dataset.theme ?? '';
-  const idx = THEMES.indexOf(current);
-  return idx === -1 ? 0 : idx;
-}
-
-function updateButtons() {
-  const label = LABELS[currentIndex()];
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.textContent = label;
-  });
-}
-
-window.cycleTheme = function () {
-  const next = THEMES[(currentIndex() + 1) % THEMES.length];
-  applyTheme(next);
-  localStorage.setItem('rc-demo-theme', next);
-  updateButtons();
-};
-
-document.addEventListener('DOMContentLoaded', () => {
-  updateButtons();
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.addEventListener('click', window.cycleTheme);
-  });
-});

package/dist/rc-menu-Bd1Ytmx9.js

@@ -1,187 +0,0 @@
-import { css as m, LitElement as u, html as v } from "lit";
-import { property as h, query as p } from "lit/decorators.js";
-import { RovingTabIndexMixin as b, isFocusable as l, keyNavigation as f } from "@rcarls/rc-common";
-const g = m`
-  :host {
-    display: block;
-  }
-
-  #root {
-    display: flex;
-    flex-direction: column;
-    min-width: var(--rc-menu-min-width, 10em);
-    padding-block: var(--rc-menu-padding-block, var(--rc-control-padding-block, 0.25em));
-    background: var(--rc-menu-background, var(--rc-surface, Canvas));
-    border: var(--rc-menu-border, var(--rc-border, 1px solid ButtonBorder));
-    border-radius: var(--rc-menu-radius, var(--rc-control-radius, 0));
-    box-shadow: var(--rc-menu-shadow, var(--rc-shadow, 0 2px 8px color-mix(in srgb, CanvasText 15%, transparent)));
-    color: var(--rc-menu-color, var(--rc-field-text, CanvasText));
-    font-family: var(--rc-font-family, inherit);
-    font-size: var(--rc-font-size, inherit);
-    line-height: var(--rc-line-height, normal);
-    overflow: hidden;
-
-    /* Focus styling for keyboard navigation */
-    &[data-interaction-mode='keyboard']:focus-within {
-      outline: var(--rc-focus-ring, auto);
-      outline-offset: var(--rc-focus-ring-offset, 0);
-    }
-  }
-
-  #slot-wrap {
-    display: contents;
-  }
-
-  ::slotted(button),
-  ::slotted([role='menuitem']),
-  ::slotted([role='menuitemradio']),
-  ::slotted([role='menuitemcheckbox']) {
-    display: flex;
-    align-items: center;
-    gap: var(--rc-menu-item-gap, var(--rc-item-gap, 0.5em));
-    width: 100%;
-    text-align: start;
-    padding: var(--rc-menu-item-padding-block, var(--rc-item-padding-block, 0.3em))
-      var(--rc-menu-item-padding-inline, var(--rc-item-padding-inline, 0.75em));
-  }
-
-  ::slotted(svg),
-  ::slotted(img) {
-    flex: 0 0 auto;
-    inline-size: var(--rc-menu-icon-size, 1.2em);
-    block-size: var(--rc-menu-icon-size, 1.2em);
-    max-inline-size: var(--rc-menu-icon-size, 1.2em);
-    max-block-size: var(--rc-menu-icon-size, 1.2em);
-  }
-
-  ::slotted(button:disabled),
-  ::slotted([aria-disabled='true']) {
-    color: var(--rc-menu-disabled-color, var(--rc-text-disabled, GrayText));
-    opacity: var(--rc-menu-disabled-opacity, var(--rc-disabled-opacity, 0.55));
-    cursor: default;
-  }
-
-  /* Groups stack their children vertically and stretch them to full width. */
-  ::slotted([role='group']) {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  ::slotted([role='separator']),
-  ::slotted(hr) {
-    border: none;
-    border-block-start: var(--rc-menu-separator-border, var(--rc-border, 1px solid ButtonBorder));
-    margin-block: var(--rc-menu-separator-margin-block, var(--rc-control-gap, 0.25em));
-  }
-`;
-var x = Object.defineProperty, d = (n, e, t, o) => {
-  for (var r = void 0, i = n.length - 1, c; i >= 0; i--)
-    (c = n[i]) && (r = c(e, t, r) || r);
-  return r && x(e, t, r), r;
-};
-const k = ["menuitem", "menuitemcheckbox", "menuitemradio"], s = class s extends b(u) {
-  constructor() {
-    super(...arguments), this.label = "";
-  }
-  /**
-   * Collects navigable menu items from the slot, supporting `role="group"`
-   * containers and skipping `role="separator"` elements.
-   *
-   * Direct focusable children are included as-is. Elements with
-   * `role="group"` are traversed one level deep so their focusable children
-   * participate in arrow-key navigation. Separators and non-focusable
-   * container elements are excluded.
-   */
-  _collectItems(e) {
-    const t = [];
-    for (const o of e.assignedElements()) {
-      const r = o.getAttribute("role");
-      if (r !== "separator") {
-        if (r === "group") {
-          for (const i of o.children)
-            l(i) && t.push(i);
-          continue;
-        }
-        l(o) && t.push(o);
-      }
-    }
-    return t;
-  }
-  _initItems() {
-    super._initItems(), this.items.forEach((e) => {
-      const t = e.getAttribute("role");
-      (!t || !k.includes(t)) && e.setAttribute("role", "menuitem");
-    });
-  }
-  _onNavigate(e) {
-    switch (e) {
-      case "next":
-        this.focusItem(this.nextItem);
-        break;
-      case "prev":
-        this.focusItem(this.previousItem);
-        break;
-      case "start":
-        this.focusItem(this.firstItem);
-        break;
-      case "end":
-        this.focusItem(this.lastItem);
-        break;
-      case "activate":
-        this._lastFocused && (this._lastFocused.click(), this.dispatchEvent(
-          new CustomEvent("rc-menu-activate", {
-            bubbles: !0,
-            composed: !0,
-            detail: {
-              item: this._lastFocused,
-              value: this._lastFocused.dataset.value ?? this._lastFocused.getAttribute("value") ?? "",
-              text: this._lastFocused.textContent?.trim() ?? ""
-            }
-          })
-        ));
-        break;
-      case "escape":
-        this.dispatchEvent(
-          new CustomEvent("rc-menu-close", {
-            bubbles: !0,
-            composed: !0,
-            detail: { reason: "escape" }
-          })
-        );
-        break;
-    }
-  }
-  render() {
-    return v`
-      <div
-        id="root"
-        part="root"
-        ${f(this._onNavigate, {
-      handleEscape: !0,
-      handleActivate: !0
-    })}
-        data-interaction-mode="keyboard"
-        role="menu"
-        aria-label=${this.label}
-        tabindex="-1"
-      >
-        <div id="slot-wrap" @focusin=${this._handleItemFocus}>
-          <slot id="items" @slotchange=${this._onSlotChange}></slot>
-        </div>
-      </div>
-    `;
-  }
-};
-s.styles = [g];
-let a = s;
-d([
-  h({ type: String })
-], a.prototype, "label");
-d([
-  p("#root", !0)
-], a.prototype, "_$root");
-export {
-  a as R
-};
-//# sourceMappingURL=rc-menu-Bd1Ytmx9.js.map

package/dist/rc-menu-Bd1Ytmx9.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"rc-menu-Bd1Ytmx9.js","sources":["../src/rc-menu.styles.ts","../src/rc-menu.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const menuStyles = css`\n  :host {\n    display: block;\n  }\n\n  #root {\n    display: flex;\n    flex-direction: column;\n    min-width: var(--rc-menu-min-width, 10em);\n    padding-block: var(--rc-menu-padding-block, var(--rc-control-padding-block, 0.25em));\n    background: var(--rc-menu-background, var(--rc-surface, Canvas));\n    border: var(--rc-menu-border, var(--rc-border, 1px solid ButtonBorder));\n    border-radius: var(--rc-menu-radius, var(--rc-control-radius, 0));\n    box-shadow: var(--rc-menu-shadow, var(--rc-shadow, 0 2px 8px color-mix(in srgb, CanvasText 15%, transparent)));\n    color: var(--rc-menu-color, var(--rc-field-text, CanvasText));\n    font-family: var(--rc-font-family, inherit);\n    font-size: var(--rc-font-size, inherit);\n    line-height: var(--rc-line-height, normal);\n    overflow: hidden;\n\n    /* Focus styling for keyboard navigation */\n    &[data-interaction-mode='keyboard']:focus-within {\n      outline: var(--rc-focus-ring, auto);\n      outline-offset: var(--rc-focus-ring-offset, 0);\n    }\n  }\n\n  #slot-wrap {\n    display: contents;\n  }\n\n  ::slotted(button),\n  ::slotted([role='menuitem']),\n  ::slotted([role='menuitemradio']),\n  ::slotted([role='menuitemcheckbox']) {\n    display: flex;\n    align-items: center;\n    gap: var(--rc-menu-item-gap, var(--rc-item-gap, 0.5em));\n    width: 100%;\n    text-align: start;\n    padding: var(--rc-menu-item-padding-block, var(--rc-item-padding-block, 0.3em))\n      var(--rc-menu-item-padding-inline, var(--rc-item-padding-inline, 0.75em));\n  }\n\n  ::slotted(svg),\n  ::slotted(img) {\n    flex: 0 0 auto;\n    inline-size: var(--rc-menu-icon-size, 1.2em);\n    block-size: var(--rc-menu-icon-size, 1.2em);\n    max-inline-size: var(--rc-menu-icon-size, 1.2em);\n    max-block-size: var(--rc-menu-icon-size, 1.2em);\n  }\n\n  ::slotted(button:disabled),\n  ::slotted([aria-disabled='true']) {\n    color: var(--rc-menu-disabled-color, var(--rc-text-disabled, GrayText));\n    opacity: var(--rc-menu-disabled-opacity, var(--rc-disabled-opacity, 0.55));\n    cursor: default;\n  }\n\n  /* Groups stack their children vertically and stretch them to full width. */\n  ::slotted([role='group']) {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  ::slotted([role='separator']),\n  ::slotted(hr) {\n    border: none;\n    border-block-start: var(--rc-menu-separator-border, var(--rc-border, 1px solid ButtonBorder));\n    margin-block: var(--rc-menu-separator-margin-block, var(--rc-control-gap, 0.25em));\n  }\n`;\n\nexport default menuStyles;\n","import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport {\n  isFocusable,\n  keyNavigation,\n  type FocusableElement,\n  type KeyboardNavigationAction,\n  RovingTabIndexMixin,\n} from '@rcarls/rc-common';\n\nimport menuStyles from './rc-menu.styles';\n\nexport interface RCMenuActivateEvent {\n  item: HTMLElement;\n  value: string;\n  text: string;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-menu': RCMenu;\n  }\n}\n\n/** WAI-ARIA roles that are valid direct children of `role=\"menu\"`. */\nconst MENU_ITEM_ROLES = ['menuitem', 'menuitemcheckbox', 'menuitemradio'] as const;\n\n/**\n * A menu component, as defined in WAI-ARIA\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/menu/\n * @slot Takes any number of child elements to display in the menu. Only focusable elements are navigable.\n * @fires rc-menu-activate - Fired when a menu item is activated via Enter or Space\n * @fires rc-menu-close - Fired when Escape is pressed\n * @cssprop [--rc-menu-min-width=10em] - Minimum width of the menu panel\n * @cssprop [--rc-menu-padding-block=0.25em] - Block (top/bottom) padding inside the panel\n * @cssprop [--rc-menu-background=Canvas] - Background color; falls back through --rc-surface\n * @cssprop [--rc-menu-border=1px solid ButtonBorder] - Border; falls back through --rc-border\n * @cssprop [--rc-menu-radius=var(--rc-control-radius)] - Menu panel border radius\n * @cssprop [--rc-menu-shadow=0 2px 8px color-mix(in srgb, CanvasText 15%, transparent)] - Box shadow; falls back through --rc-shadow\n * @cssprop [--rc-menu-item-padding-block=var(--rc-item-padding-block)] - Menu item block-axis padding\n * @cssprop [--rc-menu-item-padding-inline=var(--rc-item-padding-inline)] - Menu item inline-axis padding\n * @cssprop [--rc-menu-item-gap=var(--rc-item-gap)] - Gap between icon and text content in flex menu items\n * @cssprop [--rc-menu-icon-size=1.2em] - Size clamp for direct slotted icon media\n * @cssprop [--rc-menu-disabled-color=GrayText] - Disabled menu item text color\n * @cssprop [--rc-menu-disabled-opacity=var(--rc-disabled-opacity)] - Disabled menu item opacity\n * @cssprop [--rc-menu-separator-border=var(--rc-border)] - Separator border\n * @cssprop [--rc-menu-separator-margin-block=var(--rc-control-gap)] - Separator block-axis margin\n * @csspart root - The root container element\n */\nexport class RCMenu extends RovingTabIndexMixin(LitElement) {\n  static styles = [menuStyles];\n\n  /** Accessible label for this menu. */\n  @property({ type: String })\n  label = '';\n\n  @query('#root', true)\n  protected _$root!: HTMLDivElement;\n\n  /**\n   * Collects navigable menu items from the slot, supporting `role=\"group\"`\n   * containers and skipping `role=\"separator\"` elements.\n   *\n   * Direct focusable children are included as-is. Elements with\n   * `role=\"group\"` are traversed one level deep so their focusable children\n   * participate in arrow-key navigation. Separators and non-focusable\n   * container elements are excluded.\n   */\n  protected override _collectItems(slot: HTMLSlotElement): FocusableElement[] {\n    const items: FocusableElement[] = [];\n\n    for (const el of slot.assignedElements()) {\n      const role = el.getAttribute('role');\n\n      if (role === 'separator') continue;\n\n      if (role === 'group') {\n        for (const child of el.children) {\n          if (isFocusable(child)) items.push(child as FocusableElement);\n        }\n        continue;\n      }\n\n      if (isFocusable(el)) items.push(el as FocusableElement);\n    }\n\n    return items;\n  }\n\n  protected override _initItems() {\n    super._initItems(); // sets tabindex 0/−1\n\n    this.items.forEach((el) => {\n      const existingRole = el.getAttribute('role');\n\n      // Preserve explicit WAI-ARIA menu item roles set by the consumer.\n      // Only assign the menuitem default when no valid role is present.\n      if (!existingRole || !MENU_ITEM_ROLES.includes(existingRole as typeof MENU_ITEM_ROLES[number])) {\n        el.setAttribute('role', 'menuitem');\n      }\n    });\n  }\n\n  protected _onNavigate(action: KeyboardNavigationAction) {\n    switch (action) {\n      case 'next':\n        this.focusItem(this.nextItem);\n        break;\n      case 'prev':\n        this.focusItem(this.previousItem);\n        break;\n      case 'start':\n        this.focusItem(this.firstItem);\n        break;\n      case 'end':\n        this.focusItem(this.lastItem);\n        break;\n      case 'activate':\n        if (this._lastFocused) {\n          this._lastFocused.click();\n          this.dispatchEvent(\n            new CustomEvent<RCMenuActivateEvent>('rc-menu-activate', {\n              bubbles: true,\n              composed: true,\n              detail: {\n                item: this._lastFocused,\n                value: this._lastFocused.dataset.value ?? this._lastFocused.getAttribute('value') ?? '',\n                text: this._lastFocused.textContent?.trim() ?? '',\n              },\n            }),\n          );\n        }\n        break;\n      case 'escape':\n        this.dispatchEvent(\n          new CustomEvent('rc-menu-close', {\n            bubbles: true,\n            composed: true,\n            detail: { reason: 'escape' },\n          }),\n        );\n        break;\n    }\n  }\n\n  protected render() {\n    return html`\n      <div\n        id=\"root\"\n        part=\"root\"\n        ${keyNavigation(this._onNavigate, {\n          handleEscape: true,\n          handleActivate: true,\n        })}\n        data-interaction-mode=\"keyboard\"\n        role=\"menu\"\n        aria-label=${this.label}\n        tabindex=\"-1\"\n      >\n        <div id=\"slot-wrap\" @focusin=${this._handleItemFocus}>\n          <slot id=\"items\" @slotchange=${this._onSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default RCMenu;\n"],"names":["menuStyles","css","MENU_ITEM_ROLES","_RCMenu","RovingTabIndexMixin","LitElement","slot","items","el","role","child","isFocusable","existingRole","action","html","keyNavigation","RCMenu","__decorateClass","property","query"],"mappings":"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"}

package/dist/types/rc-menu.d.ts

@@ -1,56 +0,0 @@
-import { LitElement } from 'lit';
-import { FocusableElement, KeyboardNavigationAction } from '@rcarls/rc-common';
-export interface RCMenuActivateEvent {
-    item: HTMLElement;
-    value: string;
-    text: string;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'rc-menu': RCMenu;
-    }
-}
-declare const RCMenu_base: typeof LitElement & (new (...args: any[]) => import('@rcarls/rc-common').RovingTabIndexMixinBase);
-/**
- * A menu component, as defined in WAI-ARIA
- *
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/menu/
- * @slot Takes any number of child elements to display in the menu. Only focusable elements are navigable.
- * @fires rc-menu-activate - Fired when a menu item is activated via Enter or Space
- * @fires rc-menu-close - Fired when Escape is pressed
- * @cssprop [--rc-menu-min-width=10em] - Minimum width of the menu panel
- * @cssprop [--rc-menu-padding-block=0.25em] - Block (top/bottom) padding inside the panel
- * @cssprop [--rc-menu-background=Canvas] - Background color; falls back through --rc-surface
- * @cssprop [--rc-menu-border=1px solid ButtonBorder] - Border; falls back through --rc-border
- * @cssprop [--rc-menu-radius=var(--rc-control-radius)] - Menu panel border radius
- * @cssprop [--rc-menu-shadow=0 2px 8px color-mix(in srgb, CanvasText 15%, transparent)] - Box shadow; falls back through --rc-shadow
- * @cssprop [--rc-menu-item-padding-block=var(--rc-item-padding-block)] - Menu item block-axis padding
- * @cssprop [--rc-menu-item-padding-inline=var(--rc-item-padding-inline)] - Menu item inline-axis padding
- * @cssprop [--rc-menu-item-gap=var(--rc-item-gap)] - Gap between icon and text content in flex menu items
- * @cssprop [--rc-menu-icon-size=1.2em] - Size clamp for direct slotted icon media
- * @cssprop [--rc-menu-disabled-color=GrayText] - Disabled menu item text color
- * @cssprop [--rc-menu-disabled-opacity=var(--rc-disabled-opacity)] - Disabled menu item opacity
- * @cssprop [--rc-menu-separator-border=var(--rc-border)] - Separator border
- * @cssprop [--rc-menu-separator-margin-block=var(--rc-control-gap)] - Separator block-axis margin
- * @csspart root - The root container element
- */
-export declare class RCMenu extends RCMenu_base {
-    static styles: import('lit').CSSResult[];
-    /** Accessible label for this menu. */
-    label: string;
-    protected _$root: HTMLDivElement;
-    /**
-     * Collects navigable menu items from the slot, supporting `role="group"`
-     * containers and skipping `role="separator"` elements.
-     *
-     * Direct focusable children are included as-is. Elements with
-     * `role="group"` are traversed one level deep so their focusable children
-     * participate in arrow-key navigation. Separators and non-focusable
-     * container elements are excluded.
-     */
-    protected _collectItems(slot: HTMLSlotElement): FocusableElement[];
-    protected _initItems(): void;
-    protected _onNavigate(action: KeyboardNavigationAction): void;
-    protected render(): import('lit').TemplateResult<1>;
-}
-export default RCMenu;