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

package/src/shared/primitives/StateLayerElement.ts

@@ -1,191 +0,0 @@
-import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-
-import { FocusController, HoverController } from "../controllers";
-import { HtmlFor, Role } from "../mixins";
-
-import { StateLayerToken } from "./StateLayerToken";
-
-/**
- * @summary
- * Provides focus and hover state layer treatment for an interactive element.
- *
- * @description
- * The `m3e-state-layer` component is an absolute positioned element used to depict hover and focus overlays.
- * The parenting element must be a relative positioned element.
- *
- * This element can be attached to an interactive element using the `for` attribute or programmatically using the `attach` method.
- * The state layer is displayed when the interactive element is either hovered or focused.  This can be disabled using
- * the `disabled` attribute.
- *
- * @example
- * The following example illustrates attaching a state layer to an interactive element. In this example, the parenting div
- * has relative positioning and is given an `id` referenced by `m3e-state-layer` using the `for` attribute.  Note that `#myDiv`
- * is not used when specifying the attached element's identifier.  The `#` is inferred.
- *
- * ```html
- * <div id="myDiv" tabindex="0" style="position: relative;">
- *  <m3e-state-layer for="myDiv"></m3e-state-layer>
- * <div>
- * ```
- *
- * @tag m3e-state-layer
- *
- * @attr disabled - Whether hover and focus event will not trigger the state layer.Whether hover and focus event will not trigger the state layer. State layers can still be controlled manually using the `show` and `hide` methods.
- *
- * @cssprop --m3e-state-layer-duration - Duration of state layer changes.
- * @cssprop --m3e-state-layer-easing - Easing curve of state layer changes.
- * @cssprop --m3e-state-layer-focus-color - Color on hover.
- * @cssprop --m3e-state-layer-focus-opacity - Opacity on focus.
- * @cssprop --m3e-state-layer-hover-color - Color on hover.
- * @cssprop --m3e-state-layer-hover-opacity - Opacity on hover.
- */
-@customElement("m3e-state-layer")
-export class M3eStateLayerElement extends HtmlFor(Role(LitElement, "none")) {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = css`
-    :host {
-      display: block;
-    }
-    :host,
-    .layer {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      pointer-events: none;
-      border-radius: inherit;
-    }
-    .layer {
-      will-change: background-color;
-      transition: ${unsafeCSS(`background-color ${StateLayerToken.duration} ${StateLayerToken.easing}`)};
-    }
-    .layer.focused {
-      background-color: color-mix(in srgb, ${StateLayerToken.focusColor} ${StateLayerToken.focusOpacity}, transparent);
-    }
-    .layer.hover {
-      background-color: color-mix(in srgb, ${StateLayerToken.hoverColor} ${StateLayerToken.hoverOpacity}, transparent);
-    }
-    @media (prefers-reduced-motion) {
-      .layer {
-        transition: none;
-      }
-    }
-    @media (forced-colors: active) {
-      .layer {
-        display: none;
-      }
-    }
-  `;
-
-  /** @private */
-  readonly #hoverController = new HoverController(this, {
-    target: null,
-    callback: (hovering) => this.#handleHoverChange(hovering),
-  });
-
-  /** @private */
-  readonly #focusController = new FocusController(this, {
-    target: null,
-    callback: (focused) => this.#handleFocusChange(focused),
-  });
-
-  /** @private */ @query(".layer") private readonly _layer?: HTMLElement;
-
-  /**
-   * Whether hover and focus event will not trigger the state layer. State layers can still
-   * be controlled manually using the `show` and `hide` methods.
-   * @default false
-   */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /**
-   * Launches a manual state layer.
-   * @param {"hover" | "focused"} state The state of the layer to show.
-   */
-  show(state: "hover" | "focused"): void {
-    this._layer?.classList.toggle(state, true);
-  }
-
-  /**
-   * Hides the state layer.
-   * @param {"hover" | "focused"} state The state of the layer to hide.
-   */
-  hide(state: "hover" | "focused"): void {
-    this._layer?.classList.toggle(state, false);
-  }
-
-  /** @inheritdoc */
-  override attach(control: HTMLElement): void {
-    super.attach(control);
-    this.#hoverController.observe(control);
-    this.#focusController.observe(control);
-  }
-
-  /** @inheritdoc */
-  override detach(): void {
-    if (this.control) {
-      this.#hoverController.unobserve(this.control);
-      this.#focusController.unobserve(this.control);
-    }
-    super.detach();
-  }
-
-  /** @inheritdoc */
-  override connectedCallback(): void {
-    this.ariaHidden = "true";
-    super.connectedCallback();
-  }
-
-  /** @inheritdoc */
-  override disconnectedCallback(): void {
-    super.disconnectedCallback();
-
-    this.hide("hover");
-    this.hide("focused");
-  }
-
-  /** @inheritdoc */
-  protected override updated(_changedProperties: PropertyValues<this>): void {
-    super.updated(_changedProperties);
-
-    if (_changedProperties.has("disabled") && this.disabled) {
-      this.hide("hover");
-      this.hide("focused");
-    }
-  }
-
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html`<div class="layer"></div>`;
-  }
-
-  /** @private */
-  #handleHoverChange(hovering: boolean): void {
-    if (!this.disabled) {
-      if (hovering) {
-        this.show("hover");
-      } else {
-        this.hide("hover");
-      }
-    }
-  }
-
-  /** @private */
-  #handleFocusChange(focused: boolean): void {
-    if (!this.disabled) {
-      if (focused) {
-        this.show("focused");
-      } else {
-        this.hide("focused");
-      }
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-state-layer": M3eStateLayerElement;
-  }
-}

package/src/shared/primitives/StateLayerToken.ts

@@ -1,16 +0,0 @@
-import { unsafeCSS } from "lit";
-
-import { DesignToken } from "../tokens";
-
-/**
- * Component design tokens that control the `M3eStateLayerElement`.
- * @internal
- */
-export const StateLayerToken = {
-  hoverColor: unsafeCSS(`var(--m3e-state-layer-hover-color, ${DesignToken.color.onSurface})`),
-  hoverOpacity: unsafeCSS(`var(--m3e-state-layer-hover-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
-  focusColor: unsafeCSS(`var(--m3e-state-layer-focus-color, ${DesignToken.color.onSurface})`),
-  focusOpacity: unsafeCSS(`var(--m3e-state-layer-focus-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
-  duration: unsafeCSS(`var(--m3e-state-layer-duration, ${DesignToken.motion.duration.medium1})`),
-  easing: unsafeCSS(`var(--m3e-state-layer-easing, ${DesignToken.motion.easing.standard})`),
-} as const;

package/src/shared/primitives/TextOverflowElement.ts

@@ -1,60 +0,0 @@
-import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-
-/**
- * @summary
- * An inline container which presents an ellipsis when content overflows.
- *
- * @description
- * The `m3e-text-overflow` component truncates inline content with an ellipsis when it
- * exceeds the available width. It's intended for use inside flex or otherwise
- * constrained containers to preserve layout while providing predictable, single-line
- * truncation behavior for long text.
- *
- * @example
- * A typical usage inside a flex container where the heading and trailing actions are
- * constrained, allowing the center text to truncate with an ellipsis.
- *
- * ```html
- * <div style="display:flex;align-items:center;gap:12px;">
- *   <m3e-icon name="menu"></m3e-icon>
- *   <m3e-text-overflow>Very long title or breadcrumb that should truncate gracefully</m3e-text-overflow>
- *   <m3e-icon name="more_vert"></m3e-icon>
- * </div>
- * ```
- *
- * @tag m3e-text-overflow
- *
- * @slot - Renders the content to truncate with an ellipsis.
- */
-@customElement("m3e-text-overflow")
-export class M3eTextOverflowElement extends LitElement {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = css`
-    :host {
-      flex: 1 1 auto;
-      display: inline-flex;
-      align-items: center;
-      flex-wrap: nowrap;
-      min-width: 0;
-    }
-    .base {
-      flex: 1 1 auto;
-      display: inline;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  `;
-
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html`<span class="base"><slot></slot></span>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-text-overflow": M3eTextOverflowElement;
-  }
-}

package/src/shared/primitives/index.ts

@@ -1,12 +0,0 @@
-export * from "./CollapsibleElement";
-export * from "./ElevationElement";
-export * from "./ElevationLevel";
-export * from "./FocusRingElement";
-export * from "./PseudoCheckboxElement";
-export * from "./PseudoRadioElement";
-export * from "./RippleElement";
-export * from "./ScrollContainerElement";
-export * from "./ScrollDividers";
-export * from "./SlideElement";
-export * from "./StateLayerElement";
-export * from "./TextOverflowElement";

package/src/shared/tokens/ColorToken.ts

@@ -1,142 +0,0 @@
-import { unsafeCSS } from "lit";
-
-/** Design tokens that control color. */
-export const ColorToken = {
-  /** High-emphasis fills, texts, and icons against surface. */
-  primary: unsafeCSS("var(--md-sys-color-primary, #6750A4)"),
-
-  /** Text and icons against primary. */
-  onPrimary: unsafeCSS("var(--md-sys-color-on-primary, #FFFFFF)"),
-
-  /** Standout fill color against surface, for key components. */
-  primaryContainer: unsafeCSS("var(--md-sys-color-primary-container, #EADDFF)"),
-
-  /** Text and icons against primary container. */
-  onPrimaryContainer: unsafeCSS("var(--md-sys-color-on-primary-container, #4F378B)"),
-
-  /** High-emphasis fills, texts, and icons that maintain the same tone in light and dark themes. */
-  primaryFixed: unsafeCSS("var(--md-sys-color-primary-fixed, #EADDFF)"),
-
-  /** High-emphasis fills, texts, and icons that maintain the same stronger tone in light and dark themes. */
-  primaryFixedDim: unsafeCSS("var(--md-sys-color-primary-fixed-dim, #D0BCFF)"),
-
-  /** Text and icons against fixed primary. */
-  onPrimaryFixed: unsafeCSS("var(--md-sys-color-on-primary-fixed, #21005D)"),
-
-  /** Lower-emphasis text and icons against fixed primary. */
-  onPrimaryFixedVariant: unsafeCSS("var(--md-sys-color-on-primary-fixed-variant, #4F378B)"),
-
-  /** Less prominent fills, text, and icons against surface. */
-  secondary: unsafeCSS("var(--md-sys-color-secondary, #625B71)"),
-
-  /** Text and icons against secondary. */
-  onSecondary: unsafeCSS("var(--md-sys-color-on-secondary, #FFFFFF)"),
-
-  /** Less prominent fill color against surface, for recessive components. */
-  secondaryContainer: unsafeCSS("var(--md-sys-color-secondary-container, #E8DEF8)"),
-
-  /** Text and icons against secondary container. */
-  onSecondaryContainer: unsafeCSS("var(--md-sys-color-on-secondary-container, #4A4458)"),
-
-  /** Less prominent fills, texts, and icons that maintain the same tone in light and dark themes. */
-  secondaryFixed: unsafeCSS("var(--md-sys-color-secondary-fixed, #E8DEF8)"),
-
-  /** Less prominent fills, texts, and icons that maintain the same stronger tone in light and dark themes. */
-  secondaryFixedDim: unsafeCSS("var(--md-sys-color-secondary-fixed-dim, #CCC2DC)"),
-
-  /** Text and icons against fixed secondary. */
-  onSecondaryFixed: unsafeCSS("var(--md-sys-color-on-secondary-fixed, #1D192B)"),
-
-  /** Lower-emphasis text and icons against fixed secondary. */
-  onSecondaryFixedVariant: unsafeCSS("var(--md-sys-color-on-secondary-fixed-variant, #4A4458)"),
-
-  /** Complementary fills, text, and icons against surface. */
-  tertiary: unsafeCSS("var(--md-sys-color-tertiary, #7D5260)"),
-
-  /** Text and icons against tertiary. */
-  onTertiary: unsafeCSS("var(--md-sys-color-on-tertiary, #FFFFFF)"),
-
-  /** Complementary container color against surface. */
-  tertiaryContainer: unsafeCSS("var(--md-sys-color-tertiary-container, #FFD8E4)"),
-
-  /** Text and icons against tertiary container. */
-  onTertiaryContainer: unsafeCSS("var(--md-sys-color-on-tertiary-container, #633B48)"),
-
-  /** Complementary fills, texts, and icons that maintain the same tone in light and dark themes. */
-  tertiaryFixed: unsafeCSS("var(--md-sys-color-tertiary-fixed, #FFD8E4)"),
-
-  /** Complementary fills, texts, and icons that maintain the same stronger tone in light and dark themes. */
-  tertiaryFixedDim: unsafeCSS("var(--md-sys-color-tertiary-fixed-dim, #EFB8C8)"),
-
-  /** Text and icons against fixed tertiary. */
-  onTertiaryFixed: unsafeCSS("var(--md-sys-color-on-tertiary-fixed, #31111D)"),
-
-  /** Lower-emphasis text and icons against fixed tertiary. */
-  onTertiaryFixedVariant: unsafeCSS("var(--md-sys-color-on-tertiary-fixed-variant, #633B48)"),
-
-  /** Attention-grabbing color against surface for fills, icons, and text, indicating urgency. */
-  error: unsafeCSS("var(--md-sys-color-error, #B3261E)"),
-
-  /** Text and icons against error. */
-  onError: unsafeCSS("var(--md-sys-color-on-error, #FFFFFF)"),
-
-  /** Attention-grabbing fill color against surface. */
-  errorContainer: unsafeCSS("var(--md-sys-color-error-container, #F9DEDC)"),
-
-  /** Text and icons against error container. */
-  onErrorContainer: unsafeCSS("var(--md-sys-color-on-error-container, #8C1D18)"),
-
-  /** Default color for backgrounds. */
-  surface: unsafeCSS("var(--md-sys-color-surface, #FEF7FF)"),
-
-  /** Text and icons against any surface color. */
-  onSurface: unsafeCSS("var(--md-sys-color-on-surface, #1D1B20)"),
-
-  /** Lower-emphasis color for text and icons against any surface color. */
-  onSurfaceVariant: unsafeCSS("var(--md-sys-color-on-surface-variant, #49454F)"),
-
-  /** Lowest-emphasis container color. */
-  surfaceContainerLowest: unsafeCSS("var(--md-sys-color-surface-container-lowest, #FFFFFF)"),
-
-  /** Low-emphasis container color. */
-  surfaceContainerLow: unsafeCSS("var(--md-sys-color-surface-container-low, #F7F2FA)"),
-
-  /** Default container color. */
-  surfaceContainer: unsafeCSS("var(--md-sys-color-surface-container, #F3EDF7)"),
-
-  /** High-emphasis container color. */
-  surfaceContainerHigh: unsafeCSS("var(--md-sys-color-surface-container-high, #ECE6F0)"),
-
-  /** Highest-emphasis container color. */
-  surfaceContainerHighest: unsafeCSS("var(--md-sys-color-surface-container-highest, #E6E0E9)"),
-
-  /** Dimmest surface color in light and dark themes. */
-  surfaceDim: unsafeCSS("var(--md-sys-color-surface-dim, #DED8E1)"),
-
-  /** Brightest surface color in light and dark themes. */
-  surfaceBright: unsafeCSS("var(--md-sys-color-surface-bright, #FEF7FF)"),
-
-  /** Alternate surface color, can be used for active states. */
-  surfaceVariant: unsafeCSS("var(--md-sys-color-surface-variant, #E7E0EC)"),
-
-  /** Background fills for elements which contrast against surface. */
-  inverseSurface: unsafeCSS("var(--md-sys-color-inverse-surface, #322F35)"),
-
-  /** Text and icons against inverse surface. */
-  inverseOnSurface: unsafeCSS("var(--md-sys-color-inverse-on-surface, #F5EFF7)"),
-
-  /** Primary text and icons against inverse surface. */
-  inversePrimary: unsafeCSS("var(--md-sys-color-inverse-primary, #D0BCFF)"),
-
-  /** Important boundaries, such as a text field outline. */
-  outline: unsafeCSS("var(--md-sys-color-outline, #79747E)"),
-
-  /** Decorative elements, such as dividers. */
-  outlineVariant: unsafeCSS("var(--md-sys-color-outline-variant, #CAC4D0)"),
-
-  /** Elevation shadow color. */
-  shadow: unsafeCSS("var(--md-sys-color-shadow, #000000)"),
-
-  /** Backdrop which obscures underlying content. */
-  scrim: unsafeCSS("var(--md-sys-color-scrim, #000000)"),
-} as const;

package/src/shared/tokens/DensityToken.ts

@@ -1,23 +0,0 @@
-import { CSSResult, unsafeCSS } from "lit";
-
-const _DensityToken = {
-  /** Base density multiplier. */
-  scale: unsafeCSS("var(--md-sys-density-scale, 0)"),
-
-  /** Spatial unit used to scale component dimensions based on density. */
-  size: unsafeCSS("var(--md-sys-density-size, 0.25rem)"),
-} as const;
-
-/** Design tokens that control density. */
-export const DensityToken = {
-  ..._DensityToken,
-
-  /**
-   * Creates a CSS `calc` that calculates a dimension based on density.
-   * @param {number} minScale The minimum supported scale.
-   * @returns {CSSResult} A CSS `calc` used to calculate a dimension based on density.
-   */
-  calc(minScale: number): CSSResult {
-    return unsafeCSS(`calc(max(${minScale}, ${_DensityToken.scale}) * ${_DensityToken.size})`);
-  },
-} as const;

package/src/shared/tokens/DesignToken.ts

@@ -1,35 +0,0 @@
-import { ColorToken } from "./ColorToken";
-import { DensityToken } from "./DensityToken";
-import { ElevationToken } from "./ElevationToken";
-import { MotionToken } from "./MotionToken";
-import { ScrollbarToken } from "./ScrollbarToken";
-import { ShapeToken } from "./ShapeToken";
-import { StateToken } from "./StateToken";
-import { TypescaleToken } from "./TypescaleToken";
-
-/** Design tokens used to style components. */
-export const DesignToken = {
-  /** Design tokens that control color. */
-  color: ColorToken,
-
-  /** Design tokens that control elevation. */
-  elevation: ElevationToken,
-
-  /** Design tokens that control motion. */
-  motion: MotionToken,
-
-  /** Design tokens that control shape. */
-  shape: ShapeToken,
-
-  /** Design tokens that control state layer. */
-  state: StateToken,
-
-  /** Design tokens that control typescale. */
-  typescale: TypescaleToken,
-
-  /** Design tokens that control scrollbars. */
-  scrollbar: ScrollbarToken,
-
-  /** Design tokens that control density. */
-  density: DensityToken,
-} as const;

package/src/shared/tokens/ElevationToken.ts

@@ -1,115 +0,0 @@
-import { unsafeCSS } from "lit";
-
-import { ColorToken } from "./ColorToken";
-
-const UMBRA_COLOR = `color-mix(in srgb, var(--m3e-elevation-color, ${ColorToken.shadow}) 20%, transparent)`;
-const UMBRA = [
-  "0px 0px 0px 0px",
-  "0px 2px 1px -1px",
-  "0px 3px 1px -2px",
-  "0px 3px 3px -2px",
-  "0px 2px 4px -1px",
-  "0px 3px 5px -1px",
-  "0px 3px 5px -1px",
-  "0px 4px 5px -2px",
-  "0px 5px 5px -3px",
-  "0px 5px 6px -3px",
-  "0px 6px 6px -3px",
-  "0px 6px 7px -4px",
-  "0px 7px 8px -4px",
-  "0px 7px 8px -4px",
-  "0px 7px 9px -4px",
-  "0px 8px 9px -5px",
-  "0px 8px 10px -5px",
-  "0px 8px 11px -5px",
-  "0px 9px 11px -5px",
-  "0px 9px 12px -6px",
-  "0px 10px 13px -6px",
-  "0px 10px 13px -6px",
-  "0px 10px 14px -6px",
-  "0px 11px 14px -7px",
-  "0px 11px 15px -7px",
-];
-
-const PENUMBRA_COLOR = `color-mix(in srgb, var(--m3e-elevation-color, ${ColorToken.shadow}) 14%, transparent)`;
-const PENUMBRA = [
-  "0px 0px 0px 0px",
-  "0px 1px 1px 0px",
-  "0px 2px 2px 0px",
-  "0px 3px 4px 0px",
-  "0px 4px 5px 0px",
-  "0px 5px 8px 0px",
-  "0px 6px 10px 0px",
-  "0px 7px 10px 1px",
-  "0px 8px 10px 1px",
-  "0px 9px 12px 1px",
-  "0px 10px 14px 1px",
-  "0px 11px 15px 1px",
-  "0px 12px 17px 2px",
-  "0px 13px 19px 2px",
-  "0px 14px 21px 2px",
-  "0px 15px 22px 2px",
-  "0px 16px 24px 2px",
-  "0px 17px 26px 2px",
-  "0px 18px 28px 2px",
-  "0px 19px 29px 2px",
-  "0px 20px 31px 3px",
-  "0px 21px 33px 3px",
-  "0px 22px 35px 3px",
-  "0px 23px 36px 3px",
-  "0px 24px 38px 3px",
-];
-
-const AMBIENT_COLOR = `color-mix(in srgb, var(--m3e-elevation-color, ${ColorToken.shadow}) 12%, transparent)`;
-const AMBIENT = [
-  "0px 0px 0px 0px",
-  "0px 1px 3px 0px",
-  "0px 1px 5px 0px",
-  "0px 1px 8px 0px",
-  "0px 1px 10px 0px",
-  "0px 1px 14px 0px",
-  "0px 1px 18px 0px",
-  "0px 2px 16px 1px",
-  "0px 3px 14px 2px",
-  "0px 3px 16px 2px",
-  "0px 4px 18px 3px",
-  "0px 4px 20px 3px",
-  "0px 5px 22px 4px",
-  "0px 5px 24px 4px",
-  "0px 5px 26px 4px",
-  "0px 6px 28px 5px",
-  "0px 6px 30px 5px",
-  "0px 6px 32px 5px",
-  "0px 7px 34px 6px",
-  "0px 7px 36px 6px",
-  "0px 8px 38px 7px",
-  "0px 8px 40px 7px",
-  "0px 8px 42px 7px",
-  "0px 9px 44px 8px",
-  "0px 9px 46px 8px",
-];
-
-function elevation(z: number) {
-  return `${UMBRA_COLOR} ${UMBRA[z]},${PENUMBRA_COLOR} ${PENUMBRA[z]},${AMBIENT_COLOR} ${AMBIENT[z]}`;
-}
-
-/** Design tokens that control elevation. */
-export const ElevationToken = {
-  /** Level 0 elevation. */
-  level0: unsafeCSS(`var(--md-sys-elevation-level0, ${elevation(0)})`),
-
-  /** Level 1 elevation. */
-  level1: unsafeCSS(`var(--md-sys-elevation-level1, ${elevation(1)})`),
-
-  /** Level 2 elevation. */
-  level2: unsafeCSS(`var(--md-sys-elevation-level2, ${elevation(3)})`),
-
-  /** Level 3 elevation. */
-  level3: unsafeCSS(`var(--md-sys-elevation-level3, ${elevation(6)})`),
-
-  /** Level 4 elevation. */
-  level4: unsafeCSS(`var(--md-sys-elevation-level4, ${elevation(8)})`),
-
-  /** Level 5 elevation. */
-  level5: unsafeCSS(`var(--md-sys-elevation-level5, ${elevation(12)})`),
-} as const;