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

package/src/FilterChipSetElement.ts

@@ -1,161 +0,0 @@
-import { html, PropertyValues } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-import { AttachInternals, Labelled, Dirty, Disabled, FormAssociated, formValue, Touched, Role } from "@m3e/core";
-import { SelectionManager, selectionManager } from "@m3e/core/a11y";
-
-import { M3eChipSetElement } from "./ChipSetElement";
-import { M3eFilterChipElement } from "./FilterChipElement";
-
-/**
- * @summary
- * A container that organizes filter chips into a cohesive group, enabling selection and
- * deselection of values used to refine content or trigger contextual behavior.
- *
- * @description
- * The `m3e-filter-chip-set` component presents a group of filter chips, enabling users to select
- * one or more options to filter content or data sets. It supports single and multi-selection,
- * keyboard navigation, accessibility, and seamless form association, providing expressive and
- * interactive filtering experiences in line with Material 3 guidelines.
- *
- * @example
- * The following example illustrates a single-select `m3e-filter-chip-set` containing multiple `m3e-filter-chip` components that
- * allow a user to choose an option. You can use the `multi` attribute to enable multiselect.
- * ```html
- * <m3e-filter-chip-set aria-label="Filter by topic">
- *  <m3e-filter-chip><m3e-icon slot="icon" name="palette"></m3e-icon>Design</m3e-filter-chip>
- *  <m3e-filter-chip><m3e-icon slot="icon" name="accessibility_new"></m3e-icon>Accessibility</m3e-filter-chip>
- *  <m3e-filter-chip><m3e-icon slot="icon" name="motion_photos_on"></m3e-icon>Motion</m3e-filter-chip>
- *  <m3e-filter-chip><m3e-icon slot="icon" name="description"></m3e-icon>Documentation</m3e-filter-chip>
- * </m3e-filter-chip-set>
- * ```
- *
- * @tag m3e-filter-chip-set
- *
- * @slot - Renders the chips of the set.
- *
- * @attr disabled - Whether the element is disabled.
- * @attr hide-selection-indicator - Whether to hide the selection indicator.
- * @attr multi - Whether multiple chips can be selected.
- * @attr name - The name that identifies the element when submitting the associated form.
- * @attr vertical - Whether the element is oriented vertically.
- *
- * @fires input - Emitted when the selected state of a chip changes.
- * @fires change - Emitted when the selected state of a chip changes.
- *
- * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.
- */
-@customElement("m3e-filter-chip-set")
-export class M3eFilterChipSetElement extends Labelled(
-  Dirty(Touched(FormAssociated(Disabled(AttachInternals(Role(M3eChipSetElement, "listbox"))))))
-) {
-  /** @internal */
-  readonly [selectionManager] = new SelectionManager<M3eFilterChipElement>()
-    .onActiveItemChange(() => this[selectionManager].activeItem?.focus())
-    .withWrap();
-
-  /**
-   * Whether multiple chips can be selected.
-   * @default false
-   */
-  @property({ type: Boolean }) multi = false;
-
-  /**
-   * Whether to hide the selection indicator.
-   * @default false
-   */
-  @property({ attribute: "hide-selection-indicator", type: Boolean }) hideSelectionIndicator = false;
-
-  /** The chips of the set. */
-  get chips(): readonly M3eFilterChipElement[] {
-    return this[selectionManager]?.items ?? [];
-  }
-
-  /** The selected chip(s) of the set. */
-  get selected(): readonly M3eFilterChipElement[] {
-    return this[selectionManager]?.selectedItems ?? [];
-  }
-
-  /** The selected value(s) of the set. */
-  get value(): string | readonly string[] | null {
-    const values = this.selected.map((x) => x.value);
-    switch (values.length) {
-      case 0:
-        return null;
-      case 1:
-        return values[0];
-      default:
-        return values;
-    }
-  }
-
-  /** @inheritdoc @internal */
-  override get [formValue]() {
-    const values = this.value;
-    if (Array.isArray(values)) {
-      const data = new FormData();
-      for (const value of values) {
-        data.append(this.name, value);
-      }
-      return data;
-    }
-    return <string | null>values;
-  }
-
-  /** @inheritdoc */
-  protected override update(changedProperties: PropertyValues<this>): void {
-    super.update(changedProperties);
-
-    if (changedProperties.has("vertical")) {
-      this[selectionManager].vertical = this.vertical;
-    }
-
-    if (changedProperties.has("disabled") && (changedProperties.get("disabled") !== undefined || this.disabled)) {
-      this[selectionManager].disabled = this.disabled;
-    }
-
-    if (changedProperties.has("multi")) {
-      this.ariaMultiSelectable = `${this.multi}`;
-      this[selectionManager].multi = this.multi;
-      this[selectionManager].disableRovingTabIndex(this.multi);
-    }
-
-    if (changedProperties.has("hideSelectionIndicator")) {
-      this.chips.forEach((x) => x.classList.toggle("-hide-selection", this.hideSelectionIndicator));
-    }
-  }
-
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html`<slot
-      @slotchange="${this.#handleSlotChange}"
-      @keydown="${this.#handleKeyDown}"
-      @change="${this.#handleChange}"
-    ></slot>`;
-  }
-
-  /** @internal */
-  #handleSlotChange() {
-    const { added } = this[selectionManager].setItems([...this.querySelectorAll("m3e-filter-chip")]);
-    added.forEach((x) => x.classList.toggle("-hide-selection", this.hideSelectionIndicator));
-  }
-
-  /** @internal */
-  #handleKeyDown(e: KeyboardEvent): void {
-    if (!this.multi) {
-      this[selectionManager].onKeyDown(e);
-    }
-  }
-
-  /** @internal */
-  #handleChange(e: Event): void {
-    e.stopPropagation();
-    this.dispatchEvent(new Event("change", { bubbles: true }));
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-filter-chip-set": M3eFilterChipSetElement;
-  }
-}

package/src/InputChipElement.ts

@@ -1,287 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */
-import { css, CSSResultGroup, html, nothing, PropertyValues } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-
-import {
-  DisabledInteractive,
-  Disabled,
-  EventAttribute,
-  Role,
-  AttachInternals,
-  DesignToken,
-  hasAssignedNodes,
-} from "@m3e/core";
-
-import { M3eIconButtonElement } from "@m3e/icon-button";
-
-import { M3eChipElement } from "./ChipElement";
-
-/**
- * @summary
- * A chip which represents a discrete piece of information entered by a user.
- *
- * @description
- * The `m3e-input-chip` component represents an input chip, allowing users to enter, display,
- * and manage discrete values such as tags or keywords. It supports expressive styling, accessibility,
- * keyboard interaction, and appearance variants including `elevated` and `outlined`.
- *
- * @tag m3e-input-chip
- *
- * @slot - Renders the label of the chip.
- * @slot avatar - Renders an avatar before the chip's label.
- * @slot icon - Renders an icon before the chip's label.
- * @slot remove-icon - Renders the icon for the button used to remove the chip.
- *
- * @attr disabled - Whether the element is disabled.
- * @attr disabled-interactive - Whether the element is disabled and interactive.
- * @attr removable - Whether the chip is removable.
- * @attr remove-label - The accessible label given to the button used to remove the chip.
- * @attr value - A string representing the value of the chip.
- * @attr variant - The appearance variant of the chip.
- *
- * @fires remove - Emitted when the remove button is clicked or DELETE or BACKSPACE key is pressed.
- *
- * @cssprop --m3e-chip-container-shape - Border radius of the chip container.
- * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
- * @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.
- * @cssprop --m3e-chip-label-text-font-weight - Font weight of the chip label text.
- * @cssprop --m3e-chip-label-text-line-height - Line height of the chip label text.
- * @cssprop --m3e-chip-label-text-tracking - Letter spacing of the chip label text.
- * @cssprop --m3e-chip-label-text-color - Label text color in default state.
- * @cssprop --m3e-chip-icon-color - Icon color in default state.
- * @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.
- * @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.
- * @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.
- * @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.
- * @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.
- * @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.
- * @cssprop --m3e-chip-disabled-label-text-color - Base color for disabled label text.
- * @cssprop --m3e-chip-disabled-label-text-opacity - Opacity applied to disabled label text.
- * @cssprop --m3e-chip-disabled-icon-color - Base color for disabled icons.
- * @cssprop --m3e-chip-disabled-icon-opacity - Opacity applied to disabled icons.
- * @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.
- * @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.
- * @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.
- * @cssprop --m3e-elevated-chip-disabled-container-color - Background color for disabled elevated variant.
- * @cssprop --m3e-elevated-chip-disabled-container-opacity - Opacity applied to disabled elevated background.
- * @cssprop --m3e-elevated-chip-disabled-elevation - Elevation level for disabled elevated variant.
- * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.
- * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.
- * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.
- * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.
- * @cssprop --m3e-chip-avatar-size - Font size of the avatar slot content.
- * @cssprop --m3e-chip-disabled-avatar-opacity - Opacity applied to the avatar when disabled.
- * @cssprop --m3e-chip-with-avatar-padding-start - Start padding when an avatar is present.
- */
-@customElement("m3e-input-chip")
-export class M3eInputChipElement extends EventAttribute(
-  DisabledInteractive(Disabled(AttachInternals(Role(M3eChipElement, "row"), true))),
-  "remove"
-) {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = [
-    M3eChipElement.styles,
-    css`
-      .cell {
-        display: inline-flex;
-        align-items: center;
-        outline: none;
-        column-gap: var(--m3e-chip-spacing, 0.5rem);
-        min-width: 0;
-      }
-      .remove-button {
-        --m3e-icon-button-extra-small-container-height: 1.5rem;
-        --m3e-icon-button-extra-small-icon-size: var(--m3e-chip-icon-size, 1.125rem);
-        width: 1.5rem;
-      }
-      .remove-icon {
-        flex: none;
-        width: var(--m3e-chip-icon-size, 1.125rem);
-        height: var(--m3e-chip-icon-size, 1.125rem);
-      }
-      .touch {
-        top: calc(
-          0px - calc(calc(3rem - calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken.density.calc(-2)})) / 2)
-        );
-      }
-      .wrapper {
-        height: 100%;
-        overflow: visible;
-        min-width: 0;
-      }
-      ::slotted([slot="avatar"]) {
-        flex: none;
-        font-size: var(--m3e-chip-avatar-size, 1.5rem);
-      }
-      :host(:disabled) ::slotted([slot="avatar"]),
-      :host([disabled-interactive]) ::slotted([slot="avatar"]) {
-        opacity: var(--m3e-chip-disabled-avatar-opacity, 38%);
-        color: var(--m3e-chip-disabled-icon-color, ${DesignToken.color.onSurface});
-      }
-      :host(.-with-avatar) ::slotted([slot="icon"]) {
-        display: none;
-      }
-      :host(.-with-avatar) .wrapper {
-        padding-inline-start: var(--m3e-chip-with-avatar-padding-start, 0.25rem);
-      }
-      @media (forced-colors: active) {
-        :host(:disabled) ::slotted([slot="avatar"]),
-        :host([disabled-interactive]) ::slotted([slot="avatar"]) {
-          color: CanvasText;
-        }
-      }
-    `,
-  ];
-
-  /** A reference to the grid cell of the chip. */
-  @query(".cell") readonly cell!: HTMLSpanElement;
-
-  /** A reference to the button used to remove the chip. */
-  @query(".remove-button") readonly removeButton!: M3eIconButtonElement | null;
-
-  /**
-   * Whether the chip is removable.
-   * @default false
-   */
-  @property({ type: Boolean }) removable = false;
-
-  /**
-   * The accessible label given to the button used to remove the chip.
-   * @default "Remove"
-   */
-  @property({ attribute: "remove-label" }) removeLabel = "Remove";
-
-  /** @inheritdoc */
-  override connectedCallback(): void {
-    super.connectedCallback();
-    this.removeAttribute("tabindex");
-  }
-
-  /** @inheritdoc */
-  protected override update(changedProperties: PropertyValues<this>): void {
-    super.update(changedProperties);
-    this.removeAttribute("tabindex");
-
-    if (changedProperties.has("removable")) {
-      this.classList.toggle("-with-trailing-icon", this.removable);
-    }
-  }
-
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html`<div class="base">
-      <m3e-elevation
-        class="elevation"
-        for="cell"
-        ?disabled="${this.disabled || this.disabledInteractive}"
-      ></m3e-elevation>
-      <m3e-state-layer
-        class="state-layer"
-        for="cell"
-        ?disabled="${this.disabled || this.disabledInteractive}"
-      ></m3e-state-layer>
-      <m3e-focus-ring class="focus-ring" for="cell" ?disabled="${this.disabled}"></m3e-focus-ring>
-      <m3e-ripple class="ripple" for="cell" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-ripple>
-      <div class="wrapper">
-        <div
-          id="cell"
-          class="cell"
-          role="gridcell"
-          tabindex="${ifDefined(this.disabled ? undefined : "-1")}"
-          @keydown="${this.#handleKeyDown}"
-        >
-          <slot name="avatar" @slotchange="${this.#handleAvatarSlotChange}"></slot>
-          ${this._renderIcon()}
-          <div class="label">${this._renderSlot()}</div>
-          <div class="touch" aria-hidden="true"></div>
-        </div>
-        ${this._renderTrailingIcon()}
-      </div>
-    </div>`;
-  }
-
-  /** @internal @inheritdoc */
-  protected override _renderTrailingIcon(): unknown {
-    return this.removable
-      ? html`<span role="gridcell" class="remove">
-          <m3e-icon-button
-            class="remove-button"
-            aria-label="${this.removeLabel}"
-            size="extra-small"
-            tabindex="-1"
-            ?disabled="${this.disabled}"
-            ?disabled-interactive="${this.disabledInteractive}"
-            @click="${this.#handleRemoveButtonClick}"
-          >
-            <slot name="remove-icon">
-              <svg class="remove-icon" viewBox="0 -960 960 960" fill="currentColor">
-                <path
-                  d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"
-                />
-              </svg>
-            </slot>
-          </m3e-icon-button>
-        </span>`
-      : nothing;
-  }
-
-  /** @private */
-  #handleAvatarSlotChange(e: Event): void {
-    this.classList.toggle("-with-avatar", hasAssignedNodes(<HTMLSlotElement>e.target));
-  }
-
-  /** @private */
-  #handleRemoveButtonClick(e: Event): void {
-    e.stopPropagation();
-    this.dispatchEvent(new Event("remove"));
-  }
-
-  /** @private */
-  #handleKeyDown(e: KeyboardEvent): void {
-    if (this.removable) {
-      switch (e.key) {
-        case "Backspace":
-        case "Delete":
-          this.dispatchEvent(new Event("remove"));
-          break;
-      }
-    }
-  }
-}
-
-interface M3eInputChipElementEventMap extends HTMLElementEventMap {
-  remove: Event;
-}
-
-export interface M3eInputChipElement {
-  addEventListener<K extends keyof M3eInputChipElementEventMap>(
-    type: K,
-    listener: (this: M3eInputChipElement, ev: M3eInputChipElementEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  addEventListener(
-    type: string,
-    listener: EventListenerOrEventListenerObject,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  removeEventListener<K extends keyof M3eInputChipElementEventMap>(
-    type: K,
-    listener: (this: M3eInputChipElement, ev: M3eInputChipElementEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
-
-  removeEventListener(
-    type: string,
-    listener: EventListenerOrEventListenerObject,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-input-chip": M3eInputChipElement;
-  }
-}