@m3e/core 1.0.0-rc.1 → 1.0.0-rc.3

package/src/a11y/list-key/RadioKeyManager.ts

@@ -1,49 +0,0 @@
-import { LitElement } from "lit";
-
-import { CheckedOrSelectedMixin, isCheckedOrSelected } from "../../shared/mixins/CheckedOrSelected";
-import { DisabledMixin } from "../../shared/mixins/Disabled";
-
-import { RovingTabIndexManager } from "./RovingTabIndexManager";
-
-/**
- * Utility for managing keyboard events for selectable lists whose items behave like a radio.
- * @template T The type of managed item.
- */
-export class RadioKeyManager<
-  T extends LitElement & DisabledMixin & CheckedOrSelectedMixin
-> extends RovingTabIndexManager<T> {
-  /** @private */ #disabled = false;
-
-  /** A value indicating whether managed items are disabled. */
-  get disabled(): boolean {
-    return this.#disabled;
-  }
-  set disabled(value: boolean) {
-    this.#disabled = value;
-    this.items.forEach((x) => (x.disabled = value));
-  }
-
-  /** @inheritdoc */
-  override setItems(items: T[]): { added: readonly T[]; removed: readonly T[] } {
-    if (this.disabled) {
-      items.forEach((x) => (x.disabled = true));
-    }
-
-    const { added, removed } = super.setItems(items);
-
-    if (added.length > 0 || removed.length > 0) {
-      if (!this.activeItem) {
-        this.updateActiveItem(added.find((x) => !this.skipPredicate(x)) ?? null);
-      }
-
-      if (this.activeItem && (this.activeItem.disabled || !isCheckedOrSelected(this.activeItem))) {
-        const checked = added.find((x) => !this.skipPredicate(x) && isCheckedOrSelected(x));
-        if (checked) {
-          this.updateActiveItem(checked);
-        }
-      }
-    }
-
-    return { added, removed };
-  }
-}

package/src/a11y/list-key/RovingTabIndexManager.ts

@@ -1,56 +0,0 @@
-import { FocusKeyManager } from "./FocusKeyManager";
-
-/**
- * Utility for managing keyboard events and a roving tab index for selectable lists whose items directly receive focus.
- * @template T The type of managed item.
- */
-export class RovingTabIndexManager<T extends HTMLElement> extends FocusKeyManager<T> {
-  /** @private */ #disableRovingTabIndex = false;
-
-  /** @inheritdoc */
-  override updateActiveItem(item: T | null | undefined): void {
-    super.updateActiveItem(item);
-
-    if (!this.#disableRovingTabIndex) {
-      item?.setAttribute("tabindex", "0");
-      for (const other of this.items) {
-        if (other !== item && other.hasAttribute("tabindex")) {
-          other.setAttribute("tabindex", "-1");
-        }
-      }
-    }
-  }
-
-  /** @inheritdoc */
-  override setItems(items: T[]): { added: readonly T[]; removed: readonly T[] } {
-    const result = super.setItems(items);
-
-    if (!this.#disableRovingTabIndex) {
-      for (const added of result.added) {
-        if (added !== this.activeItem && !this.skipPredicate(added)) {
-          added.setAttribute("tabindex", "-1");
-        }
-      }
-    }
-
-    return result;
-  }
-
-  /**
-   * Configures whether roving tab index is disabled.
-   * @param {boolean} [disabled=true] Whether the roving tab index is disabled.
-   * @returns {RovingTabIndexManager<T>} The configured roving tab index manager.
-   */
-  disableRovingTabIndex(disabled: boolean = true): this {
-    if (disabled !== this.#disableRovingTabIndex) {
-      this.#disableRovingTabIndex = disabled;
-      for (const item of this.items) {
-        if (!this.skipPredicate(item)) {
-          item?.setAttribute("tabindex", this.#disableRovingTabIndex || item === this.activeItem ? "0" : "-1");
-        }
-      }
-    }
-
-    return this;
-  }
-}

package/src/a11y/list-key/SelectionManager.ts

@@ -1,132 +0,0 @@
-import { LitElement } from "lit";
-
-import { CheckedOrSelectedMixin, checkOrSelect, isCheckedOrSelected } from "../../shared/mixins/CheckedOrSelected";
-import { DisabledMixin } from "../../shared/mixins/Disabled";
-
-import { RadioKeyManager } from "./RadioKeyManager";
-
-/** A symbol through which to access an element's selection manager. */
-export const selectionManager = Symbol("selectionManager");
-
-/**
- * Utility for managing keyboard events for selectable lists where one or more items can be selected.
- * @template T The type of managed item.
- */
-export class SelectionManager<
-  T extends LitElement & DisabledMixin & CheckedOrSelectedMixin
-> extends RadioKeyManager<T> {
-  /** @private */ #onSelectedItemsChangeCallback?: () => void;
-  /** @private */ #selectedItems = new Array<T>();
-  /** @private */ #multi = false;
-
-  /** A value indicating whether multiple items can be selected. */
-  get multi(): boolean {
-    return this.#multi;
-  }
-  set multi(value: boolean) {
-    this.#multi = value;
-    this.#enforceSingleSelect(true);
-  }
-
-  /** The selected items. */
-  get selectedItems(): readonly T[] {
-    return this.#selectedItems;
-  }
-
-  /**
-   * Selects or deselects the item based on the item's checked or selected state.
-   * @param {T} item The item whose selection state has changed.
-   */
-  notifySelectionChange(item: T): void {
-    if (this.items.includes(item)) {
-      if (isCheckedOrSelected(item)) {
-        this.select(item);
-      } else {
-        this.deselect(item);
-      }
-    }
-  }
-
-  /**
-   * Deselects the specified item.
-   * @param {T} item The item to deselect.
-   */
-  deselect(item: T): void {
-    if (this.items.includes(item)) {
-      if (isCheckedOrSelected(item)) {
-        checkOrSelect(item, false);
-      }
-
-      const index = this.#selectedItems.indexOf(item);
-      if (index >= 0) {
-        this.#selectedItems.splice(index, 1);
-        this.#onSelectedItemsChangeCallback?.();
-      }
-    }
-  }
-
-  /**
-   * Updates the selected item.
-   * @param {T | null | undefined} item The selected item.
-   * @param {boolean} [activate=true] A value indicating whether to activate the item.
-   */
-  select(item: T | null | undefined, activate: boolean = true): void {
-    if (!item || this.items.includes(item)) {
-      if (!this.multi) {
-        for (const selected of this.#selectedItems) {
-          if (selected !== item) {
-            checkOrSelect(selected, false);
-          }
-        }
-        this.#selectedItems.length = 0;
-      }
-
-      if (item) {
-        this.#selectedItems.push(item);
-        if (!isCheckedOrSelected(item)) {
-          checkOrSelect(item, true);
-        }
-      }
-
-      if (activate) {
-        this.updateActiveItem(item);
-      }
-
-      this.#onSelectedItemsChangeCallback?.();
-    }
-  }
-
-  /** @inheritdoc */
-  override setItems(items: T[]): { added: readonly T[]; removed: readonly T[] } {
-    const { added, removed } = super.setItems(items);
-
-    this.#selectedItems = this.#selectedItems.filter((x) => !removed.includes(x));
-    this.#selectedItems.push(...added.filter((x) => isCheckedOrSelected(x)));
-    this.#enforceSingleSelect();
-    this.#onSelectedItemsChangeCallback?.();
-    return { added, removed };
-  }
-
-  /**
-   * Configures the selection manager with a callback invoked when selected items change.
-   * @param {() => void} callback The callback invoked when selected items change.
-   * @returns {SelectionManager<T>} The configured selection manager.
-   */
-  onSelectedItemsChange(callback: () => void): this {
-    this.#onSelectedItemsChangeCallback = callback;
-    return this;
-  }
-
-  /** @private */
-  #enforceSingleSelect(emit = false): void {
-    if (!this.multi && this.#selectedItems.length > 1) {
-      for (let i = 1; i < this.#selectedItems.length; i++) {
-        checkOrSelect(this.#selectedItems[i], false);
-      }
-      this.#selectedItems.length = 1;
-      if (emit) {
-        this.#onSelectedItemsChangeCallback?.();
-      }
-    }
-  }
-}

package/src/a11y/list-key/Typeahead.ts

@@ -1,131 +0,0 @@
-/**
- * Adapted from Angular Material CDK KeyManager
- * Source: https://github.com/angular/components/blob/main/src/cdk/a11y/key-manager/typeahead.ts
- *
- * @license MIT
- * Copyright (c) 2025 Google LLC
- * See LICENSE file in the project root for full license text.
- */
-
-import { getKeyCode, KeyCode } from "../keycodes";
-import { hasKeys } from "../../shared/mixins/hasKeys";
-
-/** A symbol through which to access an element's textual content used for typeahead search. */
-export const typeaheadLabel = Symbol("typeaheadLabel");
-
-/** Defines functionality required for an item that supports searching using typeahead. */
-export interface TypeaheadItem {
-  /** Returns the textual content to search. */
-  [typeaheadLabel]?(): string;
-}
-
-/**
- * Determines whether a value is a `TypeaheadItem`.
- * @param {unknown} value The value to test.
- * @returns A value indicating whether `value` is an `TypeaheadItem`.
- */
-export function isTypeaheadItem(value: unknown): value is TypeaheadItem {
-  return hasKeys<TypeaheadItem>(value, typeaheadLabel);
-}
-
-/** Encapsulates options used to select items based on typeahead.
- * @template T The type of `TypeaheadItem`.
- */
-export interface TypeaheadOptions<T extends TypeaheadItem = TypeaheadItem> {
-  /** The interval, in milliseconds, before searching items. */
-  debounceInterval?: number;
-
-  /** Function used to determine whether an item should be skipped. */
-  skipPredicate?: (item: T) => boolean;
-
-  /** Function invoked when an item is selected. */
-  callback: (item: T) => void;
-}
-
-/**
- * Implements typeahead functionality which selects items based on keyboard input.
- * @template T The type of `TypeaheadItem`.
- */
-export class Typeahead<T extends TypeaheadItem = TypeaheadItem> {
-  /** @private */ #debounceInterval: number;
-  /** @private */ #timeoutId = -1;
-  /** @private */ #callback: (item: T) => void;
-  /** @private */ #skipPredicate?: (item: T) => boolean;
-
-  /** @private */ #pressedKeys = new Array<string>();
-  /** @private */ #selectedIndex = -1;
-  /** @private */ #items: readonly T[] = [];
-
-  /**
-   * Initializes a new instance of this class.
-   * @param {TypeaheadOptions<T>} options Options that control typeahead behavior.
-   */
-  constructor(options: TypeaheadOptions<T>) {
-    this.#debounceInterval = options.debounceInterval ?? 200;
-    this.#callback = options.callback;
-    this.#skipPredicate = options.skipPredicate;
-  }
-
-  /** A value indicating whether the user is currently typing. */
-  get isTyping(): boolean {
-    return this.#pressedKeys.length > 0;
-  }
-
-  /**
-   * Sets the items to search.
-   * @param {readonly T[]} items The items to search.
-   */
-  setItems(items: readonly T[]): void {
-    this.#items = items;
-  }
-
-  /**
-   * Sets the index of the selected item.
-   * @param {number} index The index of the selected item.
-   */
-  setSelectedIndex(index: number): void {
-    this.#selectedIndex = index;
-  }
-
-  /** Resets the stored sequence of typed characters. */
-  reset(): void {
-    this.#pressedKeys.length = 0;
-  }
-
-  /**
-   * Sets the selected item depending on the key event passed in.
-   * @param {KeyboardEvent} e The keyboard event to be used for determining which element should be active.
-   */
-  onKeyDown(e: KeyboardEvent): void {
-    if (e.key && e.key.length === 1) {
-      this.#appendKey(e.key);
-    } else {
-      const keycode = getKeyCode(e);
-      if ((keycode >= KeyCode.A && keycode <= KeyCode.Z) || (keycode >= KeyCode.Zero && keycode <= KeyCode.Nine)) {
-        this.#appendKey(String.fromCharCode(keycode));
-      }
-    }
-  }
-
-  /** @private */
-  #appendKey(key: string): void {
-    this.#pressedKeys.push(key.toLocaleUpperCase());
-    clearTimeout(this.#timeoutId);
-    this.#timeoutId = setTimeout(() => this.#searchItems(), this.#debounceInterval);
-  }
-
-  /** @private */
-  #searchItems(): void {
-    const term = this.#pressedKeys.join("");
-    for (let i = 1; i < this.#items.length + 1; i++) {
-      const index = (this.#selectedIndex + i) % this.#items.length;
-      const item = this.#items[index];
-      const label = item[typeaheadLabel]?.().toLocaleUpperCase().trim();
-      if (!this.#skipPredicate?.(item) && label?.indexOf(term) === 0) {
-        this.#callback(item);
-        break;
-      }
-    }
-    this.reset();
-  }
-}

package/src/a11y/list-key/index.ts

@@ -1,7 +0,0 @@
-export * from "./FocusKeyManager";
-export * from "./ListKeyManager";
-export * from "./ListManager";
-export * from "./RadioKeyManager";
-export * from "./RovingTabIndexManager";
-export * from "./SelectionManager";
-export * from "./Typeahead";

package/src/a11y/visuallyHide.ts

@@ -1,18 +0,0 @@
-/**
- * Visually hides an element.
- * @param {CSSStyleDeclaration} style The style of the element to visually hide.
- */
-export function visuallyHide(style: CSSStyleDeclaration): void {
-  style.position = "absolute";
-  style.appearance = "none";
-  style.visibility = "hidden";
-  style.border = "0";
-  style.outline = "0";
-  style.overflow = "hidden";
-  style.left = "0";
-  style.height = "1px";
-  style.width = "1px";
-  style.margin = "-1px";
-  style.padding = "0";
-  style.whiteSpace = "nowrap";
-}

package/src/anchoring/AnchorOptions.ts

@@ -1,19 +0,0 @@
-import { AnchorPosition } from "./AnchorPosition";
-
-/** Options used to anchor an element to another. */
-export interface AnchorOptions {
-  /** The position of the element, relative to the anchor. */
-  position: AnchorPosition;
-
-  /** Whether to improve positioning for inline elements which can span multiple lines. */
-  inline?: boolean;
-
-  /** Whether the element can be shifted to keep it in view. */
-  shift?: boolean;
-
-  /** Whether the element can flip to keep it in view. */
-  flip?: boolean | AnchorPosition[];
-
-  /** The logical margin, in pixels, between element and its anchor. */
-  offset?: number;
-}

package/src/anchoring/AnchorPosition.ts

@@ -1,14 +0,0 @@
-/** Specifies the possible positions in which to anchor an element to another. */
-export type AnchorPosition =
-  | "top"
-  | "right"
-  | "bottom"
-  | "left"
-  | "top-start"
-  | "top-end"
-  | "right-start"
-  | "right-end"
-  | "bottom-start"
-  | "bottom-end"
-  | "left-start"
-  | "left-end";

package/src/anchoring/index.ts

@@ -1,3 +0,0 @@
-export * from "./AnchorOptions";
-export * from "./AnchorPosition";
-export * from "./positionAnchor";

package/src/anchoring/positionAnchor.ts

@@ -1,53 +0,0 @@
-import { autoUpdate, computePosition, flip, inline, Middleware, offset, platform, shift } from "@floating-ui/dom";
-import { offsetParent } from "composed-offset-position";
-
-import { AnchorOptions } from "./AnchorOptions";
-import { AnchorPosition } from "./AnchorPosition";
-
-/**
- * Positions an element relative to an anchor element.
- * @param {HTMLElement} target The element to position.
- * @param {HTMLElement} anchor The element in which to anchor `target`.
- * @param {AnchorOptions} options Options that control positioning relative to the anchor.
- * @param {((x: number, y: number, position: AnchorPosition) => void) | undefined} update Callback used to position `target`.
- * @returns {Promise<() => void>} Promise that resolves to a function used to stop updating target when the position of the anchor element changes.
- */
-export async function positionAnchor(
-  target: HTMLElement,
-  anchor: HTMLElement,
-  options: AnchorOptions,
-  update?: (x: number, y: number, position: AnchorPosition) => void
-): Promise<() => void> {
-  async function computeAnchorPosition() {
-    const middleware = new Array<Middleware>();
-
-    if (options?.inline) {
-      middleware.push(inline());
-    }
-    if (options.flip) {
-      middleware.push(options.flip === true ? flip() : flip({ fallbackPlacements: options.flip }));
-    }
-    if (options.shift) {
-      middleware.push(shift());
-    }
-    if (options.offset && !isNaN(options.offset)) {
-      middleware.push(offset(options.offset));
-    }
-
-    const result = await computePosition(anchor, target, {
-      placement: options.position,
-      middleware: middleware,
-      platform: { ...platform, getOffsetParent: (x) => platform.getOffsetParent(x, offsetParent) },
-    });
-
-    if (!update) {
-      target.style.left = `${result.x}px`;
-      target.style.top = `${result.y}px`;
-    } else {
-      update(result.x, result.y, result.placement);
-    }
-  }
-
-  await computeAnchorPosition();
-  return autoUpdate(anchor, target, async () => await computeAnchorPosition());
-}

package/src/bidi/Directionality.ts

@@ -1,85 +0,0 @@
-/**
- * Adapted from Angular Material CDK Directionality
- * Source: https://github.com/angular/components/blob/main/src/cdk/bidi/directionality.ts
- *
- * @license MIT
- * Copyright (c) 2025 Google LLC
- * See LICENSE file in the project root for full license text.
- */
-
-import { isServer } from "lit";
-
-/** Taken from `goog.i18n.bidi.isRtlLanguage`. */
-const RTL_LOCALES =
-  /^(ar|ckb|dv|he|iw|fa|nqo|ps|sd|ug|ur|yi|.*[-_](Adlm|Arab|Hebr|Nkoo|Rohg|Thaa))(?!.*[-_](Latn|Cyrl)($|-|_))($|-|_)/i;
-
-/** Specifies the directionalities for a document. */
-export type Direction = "ltr" | "rtl";
-
-/** Utility used to determine the directionality of the current document. */
-export class M3eDirectionality {
-  /** @private */ static #current: Direction = "ltr";
-  /** @private */ static readonly #observers = Array<() => void>();
-
-  static {
-    if (!isServer) {
-      this.#updateDirection();
-
-      if (MutationObserver) {
-        const init: MutationObserverInit = { attributeFilter: ["dir"] };
-        const observer = new MutationObserver(() => this.#handleChange());
-        if (document.body) {
-          observer.observe(document.body, init);
-        }
-        if (document.documentElement) {
-          observer.observe(document.documentElement, init);
-        }
-      }
-
-      window.addEventListener("languagechange", () => this.#handleChange());
-    }
-  }
-
-  /** The directionality of the current document. */
-  static get current(): Direction {
-    return this.#current;
-  }
-
-  /**
-   * Observes changes to directionality.
-   * @param {()=>void} callback Function invoked when directionality changes.
-   * @returns {()=>void} A function used to unobserve changes.
-   */
-  static observe(callback: () => void): () => void {
-    this.#observers.push(callback);
-    return () => {
-      this.#observers.splice(this.#observers.indexOf(callback), 1);
-    };
-  }
-
-  /** @private */
-  static #updateDirection() {
-    const _dir = (document?.body?.dir || document?.documentElement?.dir)?.toLowerCase() || "auto";
-    this.#current =
-      _dir === "auto" && !isServer && navigator?.language
-        ? RTL_LOCALES.test(navigator.language)
-          ? "rtl"
-          : "ltr"
-        : _dir === "rtl"
-        ? "rtl"
-        : "ltr";
-  }
-
-  /** @private */
-  static #handleChange(): void {
-    this.#updateDirection();
-    this.#observers.forEach((x) => x());
-  }
-}
-
-declare global {
-  /** Utility used to determine the directionality of the current document. */
-  var M3eDirectionality: M3eDirectionality;
-}
-
-globalThis.M3eDirectionality = M3eDirectionality;

package/src/bidi/index.ts

@@ -1 +0,0 @@
-export * from "./Directionality";

package/src/index.ts

@@ -1 +0,0 @@
-export * from "./shared";

package/src/layout/Breakpoint.ts

@@ -1,26 +0,0 @@
-/**
- * Adapted from Angular Material CDK Breakpoints
- * Source: https://github.com/angular/components/blob/main/src/cdk/layout/breakpoints.ts
- *
- * @license MIT
- * Copyright (c) 2025 Google LLC
- * See LICENSE file in the project root for full license text.
- */
-
-/** Specifies predefined breakpoints. */
-export enum Breakpoint {
-  XSmall = "(max-width: 599.98px)",
-  Small = "(min-width: 600px) and (max-width: 959.98px)",
-  Medium = "(min-width: 960px) and (max-width: 1279.98px)",
-  Large = "(min-width: 1280px) and (max-width: 1919.98px)",
-  XLarge = "(min-width: 1920px)",
-  Handset = "(max-width: 599.98px) and (orientation: portrait), (max-width: 959.98px) and (orientation: landscape)",
-  Tablet = "(min-width: 600px) and (max-width: 839.98px) and (orientation: portrait), (min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)",
-  Web = "(min-width: 840px) and (orientation: portrait), (min-width: 1280px) and (orientation: landscape)",
-  HandsetPortrait = "(max-width: 599.98px) and (orientation: portrait)",
-  TabletPortrait = "(min-width: 600px) and (max-width: 839.98px) and (orientation: portrait)",
-  WebPortrait = "(min-width: 840px) and (orientation: portrait)",
-  HandsetLandscape = "(max-width: 959.98px) and (orientation: landscape)",
-  TabletLandscape = "(min-width: 960px) and (max-width: 1279.98px) and (orientation: landscape)",
-  WebLandscape = "(min-width: 1280px) and (orientation: landscape)",
-}

package/src/layout/BreakpointObserver.ts

@@ -1,44 +0,0 @@
-import { isServer } from "lit";
-
-import { Breakpoint } from "./Breakpoint";
-
-/** The callback function invoked when the viewport size changes. */
-export type BreakpointObserverCallback = (matches: Map<Breakpoint | string, boolean>) => void;
-
-/** Utility used to detect changes to viewport sizes. */
-export class M3eBreakpointObserver {
-  /**
-   * Observes changes to viewport sizes.
-   * @param {Array<Breakpoint | string>} breakpoints The breakpoints to observe.
-   * @param {BreakpointObserverCallback} callback The callback function invoked when the viewport size changes.
-   * @returns {() => void} A function used to stop observing changes to viewport sizes.
-   */
-  static observe(breakpoints: Array<Breakpoint | string>, callback: BreakpointObserverCallback): () => void {
-    if (isServer || breakpoints.length == 0) {
-      return () => {};
-    }
-
-    const mediaQueries = breakpoints.map((x) => matchMedia(x));
-    const changeHandler = () => {
-      const map = new Map<Breakpoint | string, boolean>();
-      breakpoints.forEach((x, i) => map.set(x, mediaQueries[i].matches));
-      callback(map);
-    };
-
-    mediaQueries.forEach((x) => x.addEventListener("change", changeHandler));
-
-    changeHandler();
-
-    return () => {
-      mediaQueries.forEach((x) => x.removeEventListener("change", changeHandler));
-      mediaQueries.length = 0;
-    };
-  }
-}
-
-declare global {
-  /** Utility used to detect changes to viewport sizes. */
-  var M3eBreakpointObserver: M3eBreakpointObserver;
-}
-
-globalThis.M3eBreakpointObserver = M3eBreakpointObserver;

package/src/layout/index.ts

@@ -1,2 +0,0 @@
-export * from "./Breakpoint";
-export * from "./BreakpointObserver";