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

package/src/InputChipSetElement.ts

@@ -1,360 +0,0 @@
-import { css, CSSResultGroup, html, PropertyValues } from "lit";
-import { customElement } from "lit/decorators.js";
-
-import {
-  AttachInternals,
-  ConstraintValidation,
-  DesignToken,
-  Dirty,
-  Disabled,
-  FormAssociated,
-  formValue,
-  Required,
-  RequiredConstraintValidation,
-  Role,
-  Touched,
-} from "@m3e/core";
-
-import { ListKeyManager, ListManager } from "@m3e/core/a11y";
-import { FormFieldControl } from "@m3e/form-field";
-
-import { M3eChipSetElement } from "./ChipSetElement";
-import { M3eInputChipElement } from "./InputChipElement";
-
-/**
- * @summary
- * A container that transforms user input into a cohesive set of interactive chips, supporting entry, editing, and removal of discrete values.
- *
- * @description
- * The `m3e-input-chip-set` component enables users to input, display, and manage a collection of discrete
- * values as input chips. Designed for expressive, accessible forms, it supports keyboard navigation, validation,
- * and seamless integration with form controls. This component is ideal for capturing user-generated tags,
- * keywords, or selections in a visually consistent and interactive manner.
- *
- * @example
- * The following example illustrates the use of the `m3e-input-chip-set` inside a `m3e-form-field`.
- * In this example, the `input` slot specifies the `input` element used to add input chips and the
- * field label's `for` attribute targets the `input` element to provide an accessible label.
- * ```html
- * <m3e-form-field>
- *  <label slot="label" for="keywords">Keywords</label>
- *  <m3e-input-chip-set aria-label="Enter keywords">
- *    <input id="keywords" slot="input" placeholder="New keyword..." />
- *  </m3e-input-chip-set>
- * </m3e-form-field>
- * ```
- *
- * @tag m3e-input-chip-set
- *
- * @slot - Renders the chips of the set.
- * @slot input - Renders the input element used to add new chips to the set.
- *
- * @attr disabled - Whether the element is disabled.
- * @attr name - The name that identifies the element when submitting the associated form.
- * @attr required - Whether a value is required for the element.
- * @attr vertical - Whether the element is oriented vertically.
- *
- * @fires change - Emitted when a chip is added to, or removed from, the set.
- *
- * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.
- */
-@customElement("m3e-input-chip-set")
-export class M3eInputChipSetElement
-  extends RequiredConstraintValidation(
-    Required(
-      ConstraintValidation(Dirty(Touched(FormAssociated(Disabled(AttachInternals(Role(M3eChipSetElement, "grid")))))))
-    )
-  )
-  implements FormFieldControl
-{
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = [
-    M3eChipSetElement.styles,
-    css`
-      ::slotted([slot="input"]) {
-        outline: unset;
-        border: unset;
-        background-color: transparent;
-        box-shadow: none;
-        font-family: inherit;
-        font-size: inherit;
-        line-height: initial;
-        letter-spacing: inherit;
-        color: var(--_form-field-input-color, inherit);
-        flex: 1 1 auto;
-        min-width: 0;
-        padding: unset;
-      }
-      ::slotted(m3e-input-chip) {
-        min-width: 0;
-      }
-      ::slotted([slot="input"])::placeholder {
-        user-select: none;
-        color: currentColor;
-        transition: opacity ${DesignToken.motion.duration.extraLong1};
-      }
-      :host(:not(:focus-within)) ::slotted([slot="input"])::placeholder {
-        opacity: 0;
-        transition: 0s;
-      }
-      :host(:hover) ::slotted([slot="input"])::placeholder {
-        transition: 0s;
-      }
-      span[role="row"],
-      span[role="gridcell"] {
-        display: contents;
-      }
-      @media (prefers-reduced-motion) {
-        ::slotted([slot="input"])::placeholder {
-          transition: none !important;
-        }
-      }
-    `,
-  ];
-
-  /** @private */ readonly #inputChangeHandler = () => this.#handleInputChange();
-  /** @private */ readonly #inputKeyDownHandler = (e: KeyboardEvent) => this.#handleInputKeyDown(e);
-  /** @private */ readonly #focusHandler = () => this.#handleFocus();
-  /** @private */ readonly #focusInHandler = () => this.#handleFocusIn();
-  /** @private */ readonly #focusOutHandler = () => this.#handleFocusOut();
-  /** @private */ readonly #chipRemoveHandler = (e: Event) => this.#handleChipRemove(e);
-  /** @private */ readonly #chipClickHandler = (e: Event) => this.#handleChipClick(e);
-
-  /** @private */ readonly #listManager = new ListManager<M3eInputChipElement>();
-  /** @private */ readonly #listKeyManager = new ListKeyManager<HTMLElement>()
-    .onActiveItemChange(() => this.#listKeyManager.activeItem?.focus())
-    .withHomeAndEnd()
-    .withSkipPredicate((x) => !x.hasAttribute("tabindex"));
-
-  /** @private */ #ignoreInputChange = false;
-  /** @private */ #input: HTMLInputElement | null = null;
-  /** @private */ #tabindex = 0;
-
-  /** The chips of the set. */
-  get chips(): readonly M3eInputChipElement[] {
-    // NOTE: query is used instead of the internal list management due to
-    // validating required state on change to support form-field integration.
-    return [...this.querySelectorAll("m3e-input-chip")];
-  }
-
-  /** The selected values of the set. */
-  get value(): readonly string[] | null {
-    const values = this.chips.map((x) => x.value);
-    return values.length == 0 ? null : values;
-  }
-
-  /** @inheritdoc @internal */
-  override get [formValue]() {
-    const values = this.value;
-    if (!values) return null;
-    const data = new FormData();
-    for (const value of values) {
-      data.append(this.name, value);
-    }
-    return data;
-  }
-
-  /** @inheritdoc */
-  get shouldLabelFloat(): boolean {
-    return this.chips.length > 0;
-  }
-
-  /** @inheritdoc */
-  onContainerClick(): void {
-    this.#input?.focus();
-  }
-
-  /** @inheritdoc */
-  override connectedCallback(): void {
-    super.connectedCallback();
-
-    this.closest("m3e-form-field")?.notifyControlStateChange();
-
-    this.#tabindex = Number.parseInt(this.getAttribute("tabindex") ?? "0");
-    this.addEventListener("focus", this.#focusHandler);
-    this.addEventListener("focusin", this.#focusInHandler);
-    this.addEventListener("focusout", this.#focusOutHandler);
-  }
-
-  /** @inheritdoc */
-  override disconnectedCallback(): void {
-    super.disconnectedCallback();
-
-    this.removeEventListener("focus", this.#focusHandler);
-    this.removeEventListener("focusin", this.#focusInHandler);
-    this.removeEventListener("focusout", this.#focusOutHandler);
-  }
-
-  /** @inheritdoc */
-  protected override firstUpdated(_changedProperties: PropertyValues): void {
-    super.firstUpdated(_changedProperties);
-
-    if (!this.hasAttribute("tabindex")) {
-      this.setAttribute("tabindex", `${this.#tabindex}`);
-    }
-  }
-
-  /** @inheritdoc */
-  protected override update(changedProperties: PropertyValues<this>): void {
-    super.update(changedProperties);
-
-    if (changedProperties.has("vertical")) {
-      this.ariaOrientation = null;
-    }
-    if (changedProperties.has("disabled")) {
-      this.#listManager.items.forEach((x) => (x.disabled = this.disabled));
-      if (this.#input) {
-        this.#input.disabled = this.disabled;
-      }
-    }
-  }
-
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html`<slot @keydown="${this.#handleKeyDown}" @slotchange="${this.#handleSlotChange}"></slot>
-      <span role="row">
-        <span role="gridcell"><slot name="input" @slotchange="${this.#handleInputSlotChange}"></slot></span>
-      </span> `;
-  }
-
-  /** @private */
-  #handleKeyDown(e: KeyboardEvent): void {
-    this.#listKeyManager.onKeyDown(e);
-  }
-
-  /** @private */
-  async #handleSlotChange(): Promise<void> {
-    const { added, removed } = this.#listManager.setItems([...this.querySelectorAll("m3e-input-chip")]);
-
-    for (const chip of added) {
-      if (chip.isUpdatePending) {
-        await chip.updateComplete;
-      }
-      if (this.disabled) {
-        chip.disabled = true;
-      }
-      chip.addEventListener("remove", this.#chipRemoveHandler);
-      chip.cell.addEventListener("click", this.#chipClickHandler);
-    }
-
-    removed.forEach((x) => {
-      x.removeEventListener("remove", this.#chipRemoveHandler);
-      x.cell.removeEventListener("click", this.#chipClickHandler);
-    });
-
-    this.#listKeyManager.setItems(
-      this.#listManager.items.flatMap((x) => (x.removeButton ? [x.cell, x.removeButton] : [x.cell]))
-    );
-    if (!this.#listKeyManager.activeItem) {
-      this.#listKeyManager.updateActiveItem(this.#listKeyManager.items.find((x) => x.hasAttribute("tabindex")));
-    }
-  }
-
-  /** @private */
-  #handleInputSlotChange(): void {
-    const input = this.querySelector("input");
-    if (this.#input) {
-      this.#input.removeEventListener("change", this.#inputChangeHandler);
-      this.#input.removeEventListener("keydown", this.#inputKeyDownHandler);
-    }
-
-    this.#input = input;
-    if (this.#input) {
-      this.#input.disabled = this.disabled;
-      this.#input.addEventListener("change", this.#inputChangeHandler);
-      this.#input.addEventListener("keydown", this.#inputKeyDownHandler);
-
-      const property = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!;
-      Object.defineProperty(input, "value", {
-        get: () => property.get?.call(input),
-        set: (value: string) => {
-          property.set?.call(input, value);
-          if (this.#input === input && !this.#ignoreInputChange) {
-            this.#handleInputChange();
-          }
-        },
-      });
-    }
-  }
-
-  /** @private */
-  #handleFocus(): void {
-    setTimeout(() => (this.#listKeyManager.activeItem ?? this.#input)?.focus());
-  }
-
-  /** @private */
-  #handleFocusIn(): void {
-    this.setAttribute("tabindex", "-1");
-  }
-
-  /** @private */
-  #handleFocusOut(): void {
-    this.setAttribute("tabindex", `${this.#tabindex}`);
-  }
-
-  /** @private */
-  #handleChipRemove(e: Event): void {
-    const chip = <M3eInputChipElement>e.target;
-    const index = this.#listManager.items.indexOf(chip);
-    const nextChip = this.#listManager.items.find((x, y) => y > index && !x.disabled && x.removable);
-
-    chip.remove();
-
-    this.#listKeyManager.setActiveItem(this.#listKeyManager.items.find((x) => x === nextChip?.removeButton));
-    if (!this.#listKeyManager.activeItem) {
-      this.#input?.focus();
-    }
-
-    this.dispatchEvent(new Event("change", { bubbles: true }));
-  }
-
-  /** @private */
-  #handleChipClick(e: Event): void {
-    this.#listKeyManager.updateActiveItem(e.composedPath().find((x) => x instanceof M3eInputChipElement)?.cell);
-  }
-
-  /** @private */
-  #handleInputChange(): void {
-    const value = this.#input?.value;
-    if (!value) return;
-
-    setTimeout(() => {
-      const value = this.#input?.value;
-      if (!value) return;
-
-      const chip = document.createElement("m3e-input-chip");
-      chip.removable = true;
-      chip.appendChild(document.createTextNode(value));
-      this.appendChild(chip);
-
-      if (this.#input) {
-        try {
-          this.#ignoreInputChange = true;
-          this.#input.value = "";
-        } finally {
-          this.#ignoreInputChange = false;
-        }
-      }
-
-      this.dispatchEvent(new Event("change", { bubbles: true }));
-    });
-  }
-
-  /** @private */
-  #handleInputKeyDown(e: KeyboardEvent): void {
-    if (e.key === "Backspace" && !this.#input?.value) {
-      const item = [...this.#listManager.items]
-        .reverse()
-        .find((x) => !x.disabled && !x.disabledInteractive && x.removable);
-      if (item) {
-        item.dispatchEvent(new Event("remove"));
-      }
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-input-chip-set": M3eInputChipSetElement;
-  }
-}

package/src/SuggestionChipElement.ts

@@ -1,104 +0,0 @@
-import { nothing } from "lit";
-import { customElement } from "lit/decorators.js";
-
-import {
-  AttachInternals,
-  Disabled,
-  DisabledInteractive,
-  Focusable,
-  FormSubmitter,
-  KeyboardClick,
-  LinkButton,
-  Role,
-} from "@m3e/core";
-
-import { M3eChipElement } from "./ChipElement";
-
-/**
- * @summary
- * A chip used to help narrow a user's intent by presenting dynamically generated suggestions, such as
- * suggested responses or search filters.
- *
- * @description
- * The `m3e-suggestion-chip` component presents a suggestion chip, offering users contextually relevant
- * actions or responses. It is designed for dynamic suggestion scenarios, such as search filters or
- * smart replies, and supports accessibility, keyboard interaction, and expressive state styling in line
- * with Material 3 guidelines.  Appearance variants include `elevated` and `outlined`, enabling visual
- * differentiation and contextual emphasis.
- *
- * @example
- * The following example illustrates use of the `m3e-suggestion-chip`.  In this example, multiple chips are nested inside
- * a `m3e-chip-set` container to create a cohesive set of chips. The container is given the ARIA `role="group"` to convey
- * to assistive technologies that the chips are part of a related set of element.
- * ```html
- * <m3e-chip-set role="group" aria-label="Suggested replies">
- *  <m3e-suggestion-chip>Sounds good!</m3e-suggestion-chip>
- *  <m3e-suggestion-chip>Can you clarify?</m3e-suggestion-chip>
- *  <m3e-suggestion-chip>Let's do it.</m3e-suggestion-chip>
- *  <m3e-suggestion-chip>Maybe later.</m3e-suggestion-chip>
- * </m3e-chip-set>
- * ```
- *
- * @tag m3e-suggestion-chip
- *
- * @slot - Renders the label of the chip.
- * @slot icon - Renders an icon before the chip's label.
- *
- * @attr disabled - A value indicating whether the element is disabled.
- * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.
- * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.
- * @attr href - The URL to which the link button points.
- * @attr name - The name of the element, submitted as a pair with the element's `value` as part of form data, when the element is used to submit a form.
- * @attr rel - The relationship between the `target` of the link button and the document.
- * @attr target - The target of the link button.
- * @attr type - The type of the element.
- * @attr value - A string representing the value of the chip.
- * @attr variant - The appearance variant of the chip.
- *
- * @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.
- */
-@customElement("m3e-suggestion-chip")
-export class M3eSuggestionChipElement extends FormSubmitter(
-  AttachInternals(
-    LinkButton(KeyboardClick(Focusable(DisabledInteractive(Disabled(Role(M3eChipElement, "button")))))),
-    true
-  )
-) {
-  /** @internal @inheritdoc */
-  protected override _renderTrailingIcon(): unknown {
-    return nothing;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-suggestion-chip": M3eSuggestionChipElement;
-  }
-}

package/src/index.ts

@@ -1,9 +0,0 @@
-export * from "./AssistChipElement";
-export * from "./ChipElement";
-export * from "./ChipSetElement";
-export * from "./ChipVariant";
-export * from "./FilterChipElement";
-export * from "./FilterChipSetElement";
-export * from "./InputChipElement";
-export * from "./InputChipSetElement";
-export * from "./SuggestionChipElement";

package/tsconfig.json

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