@lit-material/chip 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 bohdaq
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+# @lit-material/chip
+
+A Material Design 3 chip web component built with [Lit](https://lit.dev/). Part of
+[lit-material](https://github.com/bohdaq/lit-material).
+
+![lit-material chip states: assist/suggestion/elevated/link, filter selection, removable input, disabled](./screenshot.png)
+
+Assist, filter, input, and suggestion variants, an elevated style, and a removable trailing button.
+
+## Install
+
+```sh
+npm install @lit-material/chip @lit-material/tokens
+```
+
+## Usage
+
+```html
+<link rel="stylesheet" href="node_modules/@lit-material/tokens/css/index.css" />
+<script type="module">
+  import "@lit-material/chip";
+</script>
+
+<lit-material-chip>Assist</lit-material-chip>
+<lit-material-chip elevated>Elevated assist</lit-material-chip>
+<lit-material-chip href="https://lit.dev" target="_blank">Open lit.dev</lit-material-chip>
+
+<lit-material-chip variant="filter">Spicy</lit-material-chip>
+<lit-material-chip variant="filter" selected>Vegetarian</lit-material-chip>
+
+<lit-material-chip variant="input" removable>Tag one</lit-material-chip>
+
+<lit-material-chip variant="suggestion">Nearby</lit-material-chip>
+```
+
+## API
+
+| Property    | Attribute | Type                                                | Default    |
+| ----------- | --------- | ---------------------------------------------------- | ---------- |
+| `variant`   | `variant` | `"assist" \| "filter" \| "input" \| "suggestion"`     | `"assist"` |
+| `selected`  | `selected` | `boolean`                                            | `false`    |
+| `disabled`  | `disabled` | `boolean`                                            | `false`    |
+| `elevated`  | `elevated` | `boolean`                                            | `false`    |
+| `removable` | `removable` | `boolean`                                           | `false`    |
+| `href`      | `href`    | `string`                                              | `""`       |
+| `target`    | `target`  | `string`                                              | `""`       |
+
+Slots: default (label), `leading-icon` (ignored on a selected `filter` chip, which shows a
+checkmark in its place).
+
+`variant` is presentational, not exclusive: `selected` and `removable` work on any variant, though
+conventionally `selected` toggling is used with `filter` chips and `removable` with `input` chips.
+Clicking a `filter` chip toggles `selected` and fires `change`; the trailing remove button (shown
+when `removable`) fires a cancelable `remove` event and, unless `event.preventDefault()` is
+called, removes the chip from the DOM.
+
+Unlike checkbox/radio/switch, chips are **not** form-associated — they're auxiliary UI (filters,
+action triggers, removable tags), not a value a `<form>` submits, matching how Material Design
+itself treats chips. Track a `filter` chip set's selection or an `input` chip list by listening for
+`change`/`remove` rather than reading `FormData`.
+
+## License
+
+MIT

package/dist/chip-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=chip-styles.d.ts.map

package/dist/chip-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-styles.d.ts","sourceRoot":"","sources":["../src/chip-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA0KlB,CAAC"}

package/dist/chip-styles.js

@@ -0,0 +1,173 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: inline-flex;
+    vertical-align: top;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  .chip {
+    position: relative;
+    display: inline-flex;
+    align-items: stretch;
+    box-sizing: border-box;
+    height: 32px;
+    border-radius: var(--md-sys-shape-corner-small, 8px);
+    background-color: transparent;
+    border: 1px solid var(--md-sys-color-outline, #79747e);
+    color: var(--md-sys-color-on-surface-variant, #49454f);
+    transition:
+      background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+      border-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  .chip.elevated {
+    border-color: transparent;
+    background-color: var(--md-sys-color-surface-container-low, #f7f2fa);
+    box-shadow: var(--md-sys-elevation-1, 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15));
+  }
+
+  .chip.filter.selected {
+    border-color: transparent;
+    background-color: var(--md-sys-color-secondary-container, #e8def8);
+    color: var(--md-sys-color-on-secondary-container, #1d192b);
+  }
+
+  :host([disabled]) .chip {
+    opacity: 0.38;
+    box-shadow: none;
+  }
+
+  .action {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: 100%;
+    padding-inline: 16px;
+    margin: 0;
+    border: none;
+    background: transparent;
+    text-decoration: none;
+    cursor: pointer;
+    color: inherit;
+    font-family: var(--md-sys-typescale-label-large-font, Roboto, system-ui, sans-serif);
+    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+    line-height: var(--md-sys-typescale-label-large-line-height, 1.25rem);
+    border-radius: inherit;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  .action:disabled,
+  .action[aria-disabled="true"] {
+    cursor: default;
+  }
+
+  .action:focus-visible {
+    outline: 2px solid var(--md-sys-color-secondary, #625b71);
+    outline-offset: -2px;
+  }
+
+  .state-layer {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-color: currentColor;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 100ms linear;
+  }
+
+  .action:hover .state-layer {
+    opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
+  }
+
+  .state-layer[data-pressed] {
+    opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.1);
+  }
+
+  .leading-icon ::slotted(*) {
+    width: 18px;
+    height: 18px;
+    display: block;
+    pointer-events: none;
+  }
+
+  .checkmark {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    pointer-events: none;
+  }
+
+  .checkmark path {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .label {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+
+  .remove {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: 24px;
+    margin-inline: -8px 8px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    border-radius: 50%;
+    color: inherit;
+    cursor: pointer;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  .remove:disabled {
+    cursor: default;
+  }
+
+  .remove:hover {
+    background-color: color-mix(in srgb, currentColor 8%, transparent);
+  }
+
+  .remove:focus-visible {
+    outline: 2px solid var(--md-sys-color-secondary, #625b71);
+    outline-offset: -1px;
+  }
+
+  .remove-icon {
+    width: 14px;
+    height: 14px;
+    pointer-events: none;
+  }
+
+  .remove-icon path {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chip,
+    .state-layer {
+      transition: none;
+    }
+  }
+`;
+//# sourceMappingURL=chip-styles.js.map

package/dist/chip-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-styles.js","sourceRoot":"","sources":["../src/chip-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0KxB,CAAC"}

package/dist/chip.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from "lit";
+export type ChipVariant = "assist" | "filter" | "input" | "suggestion";
+/**
+ * Material Design 3 chip.
+ *
+ * Unlike checkbox/radio/switch, chips are not form-associated: they're
+ * auxiliary UI (filters, action triggers, removable tags) rather than a
+ * value a `<form>` submits, matching how Material Design itself treats
+ * chips. A `filter` chip's `selected` state and an `input` chip's removal
+ * are communicated via `change`/`remove` events instead.
+ *
+ * @element lit-material-chip
+ *
+ * @slot - The chip's label.
+ * @slot leading-icon - An optional icon before the label. Ignored on a
+ *   selected `filter` chip, which shows a checkmark in its place.
+ *
+ * @csspart chip - The outer container (background/border/elevation).
+ * @csspart action - The main clickable `<button>` or `<a>` (icon + label).
+ * @csspart remove-button - The trailing remove `<button>`, when `removable`.
+ * @csspart ripple - The state-layer element the hover/press feedback is drawn on.
+ *
+ * @fires change - Bubbles when a `filter` chip's `selected` state toggles via user interaction.
+ * @fires remove - Cancelable; fires when the remove button is activated. Unless
+ *   `event.preventDefault()` is called, the chip removes itself from the DOM afterward.
+ */
+export declare class LitMaterialChip extends LitElement {
+    static styles: import("lit").CSSResult;
+    variant: ChipVariant;
+    selected: boolean;
+    disabled: boolean;
+    elevated: boolean;
+    removable: boolean;
+    /** If set, renders the main action as a link (`<a>`) instead of a `<button>`. */
+    href: string;
+    target: string;
+    private readonly actionElement?;
+    private readonly ripple;
+    protected firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+    private handleActionClick;
+    private handleLinkClick;
+    private handleRemoveClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "lit-material-chip": LitMaterialChip;
+    }
+}
+//# sourceMappingURL=chip.d.ts.map

package/dist/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../src/chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAU;IAEpB,OAAO,EAAE,WAAW,CAAY;IACA,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAChC,SAAS,UAAS;IAE/C,iFAAiF;IACrE,IAAI,SAAM;IACV,MAAM,SAAM;IAEN,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAwC;IAEzF,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA8B;cAElC,YAAY,IAAI,IAAI;IAM9B,MAAM;IA8Ef,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,iBAAiB;CAQ1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/chip.js

@@ -0,0 +1,180 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { RippleController } from "@lit-material/core";
+import { styles } from "./chip-styles.js";
+/**
+ * Material Design 3 chip.
+ *
+ * Unlike checkbox/radio/switch, chips are not form-associated: they're
+ * auxiliary UI (filters, action triggers, removable tags) rather than a
+ * value a `<form>` submits, matching how Material Design itself treats
+ * chips. A `filter` chip's `selected` state and an `input` chip's removal
+ * are communicated via `change`/`remove` events instead.
+ *
+ * @element lit-material-chip
+ *
+ * @slot - The chip's label.
+ * @slot leading-icon - An optional icon before the label. Ignored on a
+ *   selected `filter` chip, which shows a checkmark in its place.
+ *
+ * @csspart chip - The outer container (background/border/elevation).
+ * @csspart action - The main clickable `<button>` or `<a>` (icon + label).
+ * @csspart remove-button - The trailing remove `<button>`, when `removable`.
+ * @csspart ripple - The state-layer element the hover/press feedback is drawn on.
+ *
+ * @fires change - Bubbles when a `filter` chip's `selected` state toggles via user interaction.
+ * @fires remove - Cancelable; fires when the remove button is activated. Unless
+ *   `event.preventDefault()` is called, the chip removes itself from the DOM afterward.
+ */
+let LitMaterialChip = class LitMaterialChip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "assist";
+        this.selected = false;
+        this.disabled = false;
+        this.elevated = false;
+        this.removable = false;
+        /** If set, renders the main action as a link (`<a>`) instead of a `<button>`. */
+        this.href = "";
+        this.target = "";
+        this.ripple = new RippleController(this);
+    }
+    static { this.styles = styles; }
+    firstUpdated() {
+        if (this.actionElement) {
+            this.ripple.attach(this.actionElement);
+        }
+    }
+    render() {
+        const isFilter = this.variant === "filter";
+        const showCheckmark = isFilter && this.selected;
+        const chipClasses = [
+            "chip",
+            this.variant,
+            showCheckmark ? "selected" : "",
+            this.elevated ? "elevated" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+        const leading = showCheckmark
+            ? html `
+          <svg class="checkmark" viewBox="0 0 18 18" aria-hidden="true">
+            <path d="M4 9.5 L7.2 12.7 L14 5.5"></path>
+          </svg>
+        `
+            : html `<slot name="leading-icon" class="leading-icon"></slot>`;
+        const actionContent = html `
+      <div class="state-layer" part="ripple"></div>
+      ${leading}
+      <span class="label"><slot></slot></span>
+    `;
+        const action = this.href
+            ? html `
+          <a
+            class="action"
+            part="action"
+            href=${this.disabled ? nothing : this.href}
+            target=${this.target || nothing}
+            rel=${this.target === "_blank" ? "noopener noreferrer" : nothing}
+            aria-disabled=${this.disabled ? "true" : nothing}
+            tabindex=${this.disabled ? "-1" : "0"}
+            @click=${this.handleLinkClick}
+          >
+            ${actionContent}
+          </a>
+        `
+            : html `
+          <button
+            class="action"
+            part="action"
+            type="button"
+            ?disabled=${this.disabled}
+            aria-pressed=${isFilter ? String(this.selected) : nothing}
+            @click=${this.handleActionClick}
+          >
+            ${actionContent}
+          </button>
+        `;
+        return html `
+      <div class=${chipClasses} part="chip">
+        ${action}
+        ${this.removable
+            ? html `
+              <button
+                class="remove"
+                part="remove-button"
+                type="button"
+                ?disabled=${this.disabled}
+                aria-label="Remove"
+                @click=${this.handleRemoveClick}
+              >
+                <svg class="remove-icon" viewBox="0 0 18 18" aria-hidden="true">
+                  <path d="M5 5 L13 13 M13 5 L5 13"></path>
+                </svg>
+              </button>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+    handleActionClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            return;
+        }
+        if (this.variant === "filter") {
+            this.selected = !this.selected;
+            this.dispatchEvent(new Event("change", { bubbles: true }));
+        }
+    }
+    handleLinkClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    handleRemoveClick(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        const proceed = this.dispatchEvent(new Event("remove", { bubbles: true, cancelable: true, composed: true }));
+        if (proceed)
+            this.remove();
+    }
+};
+__decorate([
+    property()
+], LitMaterialChip.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialChip.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialChip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialChip.prototype, "elevated", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitMaterialChip.prototype, "removable", void 0);
+__decorate([
+    property()
+], LitMaterialChip.prototype, "href", void 0);
+__decorate([
+    property()
+], LitMaterialChip.prototype, "target", void 0);
+__decorate([
+    query(".action")
+], LitMaterialChip.prototype, "actionElement", void 0);
+LitMaterialChip = __decorate([
+    customElement("lit-material-chip")
+], LitMaterialChip);
+export { LitMaterialChip };
+//# sourceMappingURL=chip.js.map

package/dist/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../src/chip.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { LitMaterialChip, type ChipVariant } from "./chip.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { LitMaterialChip } from "./chip.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAoB,MAAM,WAAW,CAAC"}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@lit-material/chip",
+  "version": "0.0.1",
+  "description": "Material Design 3 chip web component (assist, filter, input, suggestion variants).",
+  "license": "MIT",
+  "author": {
+    "name": "bohdaq",
+    "email": "bohdaq@gmail.com",
+    "url": "https://github.com/bohdaq"
+  },
+  "homepage": "https://github.com/bohdaq/lit-material#readme",
+  "bugs": "https://github.com/bohdaq/lit-material/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/bohdaq/lit-material.git",
+    "directory": "packages/chip"
+  },
+  "keywords": ["lit", "web-components", "lit-material", "material-design", "material-design-3", "chip"],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "web-test-runner && node --import tsx --test src/chip.ssr.test.ts"
+  },
+  "dependencies": {
+    "@lit-material/core": "workspace:*",
+    "@lit-material/tokens": "workspace:*",
+    "lit": "^3.2.0"
+  },
+  "devDependencies": {
+    "@lit-labs/ssr": "^3.3.1",
+    "@open-wc/testing": "^4.0.0",
+    "@web/dev-server-esbuild": "^1.0.0",
+    "@web/test-runner": "^0.19.0",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0"
+  }
+}